:root {
  --bg: #f7f8fb;
  --surface: #ffffff;
  --surface-2: #f7f8fb;
  --border: rgba(75, 81, 102, 0.16);
  --border-strong: rgba(75, 81, 102, 0.32);
  --ink: #1f2437;
  --ink-2: #4b5166;
  --muted: #4b5166;
  --muted-2: rgba(75, 81, 102, 0.82);  /* 4.92:1 on surface; 0.72 was 3.84 — under AA for small text */
  --brand: #1f2437;          /* VINT Midnight */
  --brand-2: #4b5166;        /* VINT Slate */
  --accent: #f3a1c2;         /* VINT Pink — fills, borders, never text */
  --accent-text: #c2185b;    /* VINT Pink, readable: ~5.9:1 on surface */
  --accent-soft: rgba(243, 161, 194, 0.18);
  --accent-ring: rgba(243, 161, 194, 0.28);
  --midnight-soft: rgba(31, 36, 55, 0.08);
  --slate-soft: rgba(75, 81, 102, 0.10);
  --warn: #4b5166;
  --danger: #1f2437;
  --ok: #4b5166;
  --shadow: 0 1px 2px rgba(31, 36, 55, 0.05), 0 1px 1px rgba(31, 36, 55, 0.03);
  --shadow-lg: 0 16px 34px rgba(31, 36, 55, 0.12), 0 2px 6px rgba(31, 36, 55, 0.05);
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 8px;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01", "ss03";
}
/* Numbers stay aligned in data-dense tables + dashboards. */
.kpi-value, table.data td, .bar-row .value, .preview-kpi, .dashboard-hero .stat-num {
  font-variant-numeric: tabular-nums;
}
/* Tighten headings a touch since Geist already has compact metrics. */
h1, h2, h3, h4 { font-family: var(--sans); }
a { color: var(--brand-2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Layout ---------- */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 100vw;
  overflow-x: clip;
}
.app-header {
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0 28px;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(31, 36, 55, 0.03);
}
.app-header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-width: 0;
  min-height: 64px;
  border-bottom: 1px solid var(--border);
}
.brand {
  padding: 0;
  flex: 0 0 auto;
  min-width: 0;
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand-horizontal {
  display: flex;
  align-items: center;
}

.vint-logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--brand);
}
.vint-logo-mark {
  width: 54px;
  height: auto;
  flex: 0 0 auto;
  display: block;
}
.vint-logo-mark-large {
  width: 124px;
  height: auto;
}
.vint-logo-img {
  display: block;
  height: auto;
  flex: 0 0 auto;
  /* Reserve the logo's box before the file arrives. Without this the header has
     zero height until the image decodes, then grows and pushes the whole page
     down — a single 0.149 layout shift, over the 0.1 CLS threshold, on every
     cold load. 360x104 is the asset's intrinsic size. */
  aspect-ratio: 360 / 104;
}
.vint-logo-img-horizontal {
  width: 166px;
}
.vint-logo-img-stacked {
  width: 156px;
}
.vint-logo-lockup-stacked {
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
}
.vint-wordmark,
.brand-name {
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.32em;
  color: var(--brand);
  line-height: 1;
}
.brand-tagline {
  margin-top: 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
}
.brand-horizontal .brand-tagline {
  align-self: center;
  border-left: 1px solid var(--border);
  padding-left: 14px;
}

.module-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  min-width: 0;
  scrollbar-width: none;
}
.module-tabs::-webkit-scrollbar { display: none; }
.module-tabs a {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--ink-2);
  font-weight: 500;
  font-size: 12.5px;
  text-decoration: none;
  white-space: nowrap;
}
.module-tabs a:hover { background: var(--surface-2); color: var(--brand); text-decoration: none; }
.module-tabs a.active {
  background: transparent;
  border-color: var(--accent);
  color: var(--brand);
  position: relative;
  top: 0;
}
.module-tabs a .ico { display: none; }

.mobile-nav-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--brand);
  color: var(--surface);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.mobile-nav-bars,
.mobile-nav-bars::before,
.mobile-nav-bars::after {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}
.mobile-nav-bars {
  position: relative;
}
.mobile-nav-bars::before,
.mobile-nav-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.mobile-nav-bars::before { top: -5px; }
.mobile-nav-bars::after { top: 5px; }

.mobile-tabbar,
.mobile-more-sheet,
.mobile-sheet-backdrop {
  display: none;
}

.app-header-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 0;
  font-size: 12.5px;
  color: var(--muted);
}
.app-header-user .user {
  display: flex; align-items: center; gap: 10px;
}
.avatar {
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--brand); color: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
}

/* ---------- Topbar ---------- */
.main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.page-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.page-title small {
  font-weight: 400;
  color: var(--muted);
  margin-left: 10px;
  font-size: 12.5px;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar-actions .inline-form {
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.topbar-actions .btn,
.topbar-actions .chip,
.topbar-actions .builder-status {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
}

.content { padding: 24px 28px 80px; flex: 1; width: 100%; }

@media (max-width: 980px) {
  .app-header {
    align-items: stretch;
    padding: 0 16px;
  }
  .brand {
    padding-bottom: 0;
  }
  .app-header-user {
    position: static;
  }
  .app-header-user .user > div:last-child {
    display: none;
  }
  .topbar {
    flex-direction: column;
    align-items: stretch;
  }
  .topbar-actions {
    flex-wrap: wrap;
  }
}
@media (max-width: 640px) {
  .app-header-main {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 8px 0;
    border-bottom: 0;
  }
  .app-header-user {
    justify-content: flex-end;
    margin-left: auto;
  }
  .vint-logo-lockup { gap: 10px; }
  .vint-logo-mark { width: 44px; }
  .vint-logo-img-horizontal { width: 132px; max-width: 42vw; }
  .vint-wordmark, .brand-name { font-size: 20px; letter-spacing: 0.26em; }
  .brand-tagline { display: none; }
  .app-header-user .btn {
    display: none;
  }
  .content { padding: 16px 14px calc(92px + env(safe-area-inset-bottom)); }
}
@media (max-width: 720px) {
  .app-header {
    padding: 0 14px;
  }
  .content {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }
  .mobile-nav-toggle {
    display: none;
  }
  .module-tabs {
    display: none;
  }
  .topbar {
    padding: 12px 14px;
    gap: 12px;
  }
  .page-title {
    line-height: 1.25;
  }
  .page-title small {
    display: block;
    margin: 4px 0 0;
    line-height: 1.35;
  }
  .topbar-actions {
    width: 100%;
    gap: 8px;
  }
  .topbar-actions > .btn,
  .topbar-actions > .chip,
  .topbar-actions > .builder-status,
  .topbar-actions > .inline-form {
    flex: 1 1 132px;
  }
  .topbar-actions .inline-form .btn,
  .topbar-actions .inline-form button {
    width: 100%;
  }
  .mobile-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -8px 24px rgba(31, 36, 55, 0.10);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  .mobile-tabbar a,
  .mobile-tabbar button {
    min-width: 0;
    min-height: 48px;
    padding: 5px 4px 4px;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font: inherit;
    font-size: 10.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
  }
  .mobile-tabbar a.active,
  .mobile-tabbar button[aria-expanded="true"] {
    background: var(--accent-soft);
    color: var(--brand);
  }
  /* The platform's feedback button is fixed at bottom-right, which on a phone
     is exactly where the "More" tab sits: taps on More opened feedback. Lift
     it clear of the tab bar (62px + safe area). */
  #bm-feedback-btn {
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }
  .tabbar-icon {
    display: block;
    height: 20px;
    font-size: 17px;
    line-height: 20px;
  }
  .mobile-sheet-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(31, 36, 55, 0.38);
  }
  .mobile-more-sheet:not([hidden]) {
    display: block;
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(70px + env(safe-area-inset-bottom));
    z-index: 50;
    max-height: min(72vh, 520px);
    overflow: auto;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
  }
  .mobile-sheet-handle {
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: var(--border-strong);
    margin: 4px auto 10px;
  }
  .mobile-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 6px 12px;
    border-bottom: 1px solid var(--border);
  }
  .mobile-sheet-head strong,
  .mobile-sheet-head span {
    display: block;
  }
  .mobile-sheet-head strong {
    font-size: 13px;
  }
  .mobile-sheet-head span {
    color: var(--muted);
    font-size: 12px;
  }
  .mobile-sheet-links {
    display: grid;
    gap: 6px;
    padding-top: 8px;
  }
  .mobile-sheet-links a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
  }
  .mobile-sheet-links a.active {
    background: var(--accent-soft);
    color: var(--brand);
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.08s ease, border-color 0.08s ease, transform 0.08s ease;
}
.btn:hover { background: var(--surface-2); text-decoration: none; border-color: var(--brand-2); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--surface);
}
.btn-primary:hover { background: var(--brand-2); border-color: var(--brand-2); color: var(--surface); }
.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--brand);
}
.btn-accent:hover { background: var(--surface); border-color: var(--accent); color: var(--brand); }
.btn-danger { color: var(--danger); border-color: var(--accent); }
.btn-danger:hover { background: var(--accent-soft); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-xs { padding: 3px 8px; font-size: 11.5px; }
.btn .chev { font-weight: 400; opacity: 0.6; }
/* Reference Data page */
.refdata-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.refdata-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 120ms ease, transform 120ms ease;
  cursor: pointer;
}
.refdata-stat:hover {
  border-color: var(--brand-2);
  transform: translateY(-1px);
}
.refdata-stat-num {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--brand);
}
.refdata-stat-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
}
@media (max-width: 640px) {
  .refdata-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .refdata-stat { padding: 10px 12px; }
  .refdata-stat-num { font-size: 20px; }
}

.refdata-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
  overflow-x: auto;
}
.refdata-tab {
  padding: 10px 16px;
  font-size: 13px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
  margin-bottom: -1px;
}
.refdata-tab:hover { color: var(--ink); }
.refdata-tab.is-active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.refdata-pane { display: none; }
.refdata-pane.is-active { display: block; }
.refdata-pane[hidden] { display: none !important; }

.refdata-pane-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.refdata-pane-head .filter-search { flex: 1 1 280px; }

.refdata-add { position: relative; }
.refdata-add > summary {
  list-style: none;
  cursor: pointer;
}
.refdata-add > summary::-webkit-details-marker { display: none; }
.refdata-add-body {
  margin-top: 10px;
  padding: 16px;
  width: 100%;
}
.refdata-add[open] > summary { background: var(--brand-2); }

.refdata-doc-group { margin-bottom: 18px; }
.refdata-doc-cat {
  margin: 8px 0 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 800;
}

.mapping-list { display: grid; gap: 8px; }
.mapping-row {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
}

/* Submissions toolbar */
.subs-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 14px;
}
.subs-toolbar-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.subs-toolbar-search input[type="text"] {
  flex: 1 1 auto;
  height: 36px;
  padding: 0 12px 0 36px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: 13px;
  min-width: 0;
}
.subs-toolbar-search input[type="text"]:focus {
  outline: none;
  border-color: var(--brand-2);
  background: var(--surface);
}
.subs-search-icon {
  position: absolute;
  left: 12px;
  font-size: 14px;
  pointer-events: none;
  color: var(--muted-2);
}
.subs-toolbar-search .btn { height: 36px; padding: 0 14px; flex: 0 0 auto; }

.subs-toolbar-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.subs-select {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  max-width: 200px;
}
.subs-select:hover { border-color: var(--border-strong); }
.subs-daterange {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 12px;
  color: var(--muted);
}
.subs-daterange input[type="date"] {
  border: none;
  background: transparent;
  font-size: 12px;
  padding: 0;
  width: 110px;
  color: var(--ink);
  font-family: inherit;
}
.subs-daterange input[type="date"]:focus { outline: none; }
.subs-daterange-arrow { color: var(--muted-2); font-size: 11px; }
.subs-daterange-ico { color: var(--muted-2); }

.subs-counts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-wrap: wrap;
}
.subs-count {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 9px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.subs-count b { color: var(--ink); font-weight: 700; }
.subs-count[data-state="completed"] b { color: var(--ok); }
.subs-count[data-state="in_relay"] b { color: var(--accent-text); }

@media (max-width: 720px) {
  .subs-toolbar-filters { gap: 6px; }
  .subs-select { max-width: 100%; flex: 1 1 140px; }
  .subs-daterange { flex: 1 1 100%; }
  .subs-counts { margin-left: 0; width: 100%; }
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 10px 4px;
  flex-wrap: wrap;
}
.pager-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pager-current {
  padding: 5px 10px;
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.btn.is-disabled,
span.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
@media (max-width: 640px) {
  .filter-bar-row { flex-direction: column; align-items: stretch; }
  .filter-group { width: 100%; }
  .submission-filter-bar select,
  .submission-filter-bar input[type="date"] { width: 100%; min-width: 0; }
  .state-counts { font-size: 11px; }
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.4;
}
.filter-chip-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-2);
  font-weight: 700;
}
.filter-chip-value {
  background: var(--surface);
  color: var(--ink);
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.custom-schedule {
  margin-top: 12px;
  padding: 14px;
  border: 1px dashed var(--border-strong);
  background: var(--surface-2);
  border-radius: var(--r-sm);
}
.custom-schedule-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.inline-pair { display: flex; gap: 6px; }
.inline-pair input { flex: 0 0 80px; }
.dow-row { display: flex; gap: 6px; flex-wrap: wrap; }
.dow-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
}
.dow-pill input { display: none; }
.dow-pill input:checked + span {
  font-weight: 700;
  color: var(--brand);
}
.dow-pill:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.btn-link-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--accent-soft, #eef2ff);
  border: 1px solid var(--accent, #c7d2fe);
  border-radius: var(--r-md, 8px);
  color: var(--brand, #1f2937);
  font-weight: 600;
  text-decoration: none;
}
.btn-link-field:hover { background: var(--accent, #c7d2fe); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.card-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.card-body { padding: 16px 18px; }
.card-body-flush { padding: 0; }

/* ---------- Grid ---------- */
.grid { display: grid; gap: 16px; }
.grid-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-dash { grid-template-columns: 2fr 1fr; gap: 20px; }
@media (max-width: 1080px) {
  .grid-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-dash { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .btn {
    justify-content: center;
    min-height: 40px;
  }
  .btn-sm,
  .btn-xs {
    min-height: 34px;
  }
  .grid-2,
  .grid-kpis {
    grid-template-columns: 1fr;
  }
  .card-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .kpi {
    min-height: auto;
    padding: 14px;
  }
  .kpi-value {
    font-size: 24px;
  }
  .kpi-meta {
    align-items: center;
    gap: 10px;
  }
}

/* ---------- KPI Card ---------- */
.kpi {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 112px;
}
.kpi-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kpi-value {
  font-size: 30px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 6px;
}
.kpi-meta {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
}
.kpi-accent { color: var(--accent-text); font-weight: 600; }

/* ---------- Tables ---------- */
.table-wrap { overflow: auto; border-radius: var(--r-md); max-width: 100%; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.data th, table.data td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}
table.data th {
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
table.data tr:last-child td { border-bottom: 0; }
table.data tr:hover td { background: var(--surface-2); }
.table-empty { padding: 32px; text-align: center; color: var(--muted); }
@media (max-width: 720px) {
  table.data {
    min-width: 680px;
    font-size: 12.5px;
  }
  table.data th,
  table.data td {
    padding: 9px 10px;
  }
  .text-right {
    text-align: left;
  }
  .table-wrap:has(.mobile-list) {
    overflow: visible;
  }
  table.data.mobile-list {
    min-width: 0;
    display: block;
    border-collapse: separate;
  }
  table.data.mobile-list thead {
    display: none;
  }
  table.data.mobile-list tbody {
    display: grid;
    gap: 10px;
  }
  table.data.mobile-list tr {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow);
  }
  table.data.mobile-list tr:hover td {
    background: transparent;
  }
  table.data.mobile-list td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 0;
    border: 0;
    text-align: right;
    overflow-wrap: anywhere;
  }
  table.data.mobile-list td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 45%;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
  }
  table.data.mobile-list td:first-child {
    display: block;
    text-align: left;
    padding-bottom: 4px;
  }
  table.data.mobile-list td:first-child::before {
    display: none;
  }
  table.data.mobile-list td.table-empty {
    display: block;
    text-align: center;
    padding: 18px;
  }
  table.data.mobile-list td.table-empty::before {
    display: none;
  }
  .mobile-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .mobile-actions::before {
    display: none;
  }
  .mobile-actions .btn,
  .mobile-actions select,
  .mobile-actions form {
    width: 100%;
  }
}

/* ---------- Chips / badges ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  text-transform: capitalize;
  letter-spacing: 0.01em;
}
.chip-draft { background: var(--surface-2); color: var(--muted); }
.chip-in_progress { background: var(--accent-soft); color: var(--brand); }
.chip-in_relay { background: var(--slate-soft); color: var(--brand-2); }
.chip-completed { background: var(--surface-2); color: var(--brand); border: 1px solid var(--border); }
.chip-fielded { background: var(--surface-2); color: var(--brand); border: 1px solid var(--border); }
.chip-testing { background: var(--accent-soft); color: var(--brand); }
.chip-archived { background: var(--surface-2); color: var(--muted); }
.chip-role { text-transform: none; background: var(--surface-2); }
.chip-role-architect { background: var(--accent-soft); color: var(--brand); }
.chip-role-designer { background: var(--slate-soft); color: var(--brand-2); }
.chip-role-dispatcher { background: var(--accent-soft); color: var(--brand); }
.chip-role-reporter { background: var(--surface-2); color: var(--brand); border: 1px solid var(--border); }
.chip-role-operator { background: var(--surface-2); color: var(--ink-2); }
.chip-role-mobile_operator { background: var(--surface-2); color: var(--ink-2); }
.chip-consultant { background: var(--slate-soft); color: var(--brand-2); text-transform: none; }

/* Switch company (lib/companies.ts) */
.company-picker { display: flex; flex-direction: column; gap: 6px; }
.company-picker-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  width: 100%; padding: 10px 12px; text-align: left; cursor: pointer;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--r-md); font: inherit;
}
.company-picker-row:hover:not(:disabled) { border-color: var(--brand); background: var(--surface-2); }
.company-picker-row.current { cursor: default; background: var(--surface-2); }
.company-picker-row > span:first-child { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.company-picker-meta { display: inline-flex; gap: 6px; align-items: center; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.field .hint { font-size: 11.5px; color: var(--muted); }
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="datetime-local"],
input[type="time"], input:not([type]),
select, textarea {
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
  outline: none;
  transition: border-color 0.1s ease, box-shadow 0.1s ease;
}
.compact-select {
  width: auto;
  max-width: 112px;
  padding: 5px 8px;
  font-size: 12px;
  margin-right: 6px;
}
.span-2 { grid-column: 1 / -1; }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(243, 161, 194, 0.22);
}
input[type="checkbox"] { width: auto; }
.checkrow { display: flex; align-items: center; gap: 8px; }
@media (max-width: 720px) {
  .compact-select {
    width: 100%;
    max-width: none;
    margin: 0 0 8px;
  }
  .inline-form {
    display: block;
    width: 100%;
  }
  .field {
    margin-bottom: 12px;
  }
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="date"], input[type="datetime-local"],
  select, textarea {
    min-height: 42px;
  }
}

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
}
.login-aside {
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand) 58%, var(--brand-2) 100%);
  color: var(--surface-2);
  padding: 56px 48px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.login-aside::after {
  content: "";
  position: absolute; inset: auto 0 0 auto;
  width: 48%;
  height: 7px;
  border-radius: 0;
  background: var(--accent);
}
.login-aside .vint-wordmark { color: var(--surface); font-size: 32px; }
.login-aside .brand-tagline { color: var(--surface-2); }
.login-aside .vint-logo-lockup-stacked {
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 14px 16px 12px;
  box-shadow: var(--shadow-lg);
}
.login-aside .vint-logo-lockup-stacked .brand-tagline {
  color: var(--brand-2);
}
.login-aside .pitch { font-size: 22px; line-height: 1.4; max-width: 30ch; }
.login-aside .pitch strong { color: var(--surface); }
.login-aside .copy { color: var(--surface-2); font-size: 12px; }

.login-main {
  padding: 72px 8%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
.login-card { width: 100%; max-width: 420px; }
.login-card h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -0.02em; }
.login-card p.sub { color: var(--muted); margin: 0 0 28px; }
.demo-accounts {
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin-top: 22px;
  font-size: 12px;
  color: var(--muted);
  background: var(--surface);
}
.demo-accounts h4 { margin: 0 0 6px; font-size: 11px; color: var(--ink-2); letter-spacing: 0.08em; text-transform: uppercase; }
.demo-accounts code { font-family: var(--mono); font-size: 11.5px; color: var(--brand-2); }
.demo-accounts ul { list-style: none; padding: 0; margin: 0; }
.demo-accounts li { padding: 3px 0; display: flex; justify-content: space-between; gap: 12px; }
@media (max-width: 800px) {
  .login-wrap { grid-template-columns: 1fr; }
  .login-aside { display: none; }
}

/* ---------- Flash messages ---------- */
.messages { margin-bottom: 16px; }
.msg { padding: 10px 14px; border-radius: var(--r-sm); font-size: 13px; margin-bottom: 8px; }
.msg-success,
.msg-info { background: var(--surface-2); color: var(--brand-2); border: 1px solid var(--border); }
.msg-error,
.msg-warning { background: var(--accent-soft); color: var(--brand); border: 1px solid var(--accent); }

/* ---------- Filter bar ---------- */
.filter-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 8px 12px; margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.filter-bar label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.filter-bar select, .filter-bar input { max-width: 220px; padding: 6px 10px; font-size: 12.5px; }
.filter-bar .spacer { flex: 1; }
@media (max-width: 720px) {
  .filter-bar {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }
  .filter-bar select,
  .filter-bar input,
  .filter-bar .btn {
    max-width: none;
    width: 100%;
  }
  .filter-bar .spacer {
    display: none;
  }
}

/* ---------- Form builder ---------- */
.field-row {
  display: grid;
  grid-template-columns: 1fr 2fr 1.2fr auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.field-row:last-child { border-bottom: 0; }
.field-row .key { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.field-row .type { font-size: 11.5px; color: var(--muted); }
.field-row .flags { font-size: 11px; color: var(--muted-2); display: flex; gap: 4px; }
@media (max-width: 720px) {
  .field-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .field-row .btn,
  .field-row select,
  .field-row input {
    width: 100%;
  }
}

/* ---------- Bar chart ---------- */
.bar-row { display: grid; grid-template-columns: 150px 1fr 72px; gap: 12px; align-items: center; margin-bottom: 8px; font-size: 12.5px; }
.bar-row .label { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row .value { color: var(--ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.bar-track { background: var(--surface-2); height: 10px; border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--brand), var(--accent)); border-radius: 999px; transition: width 0.3s ease; }
@media (max-width: 720px) {
  .bar-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px;
    margin-bottom: 14px;
  }
  .bar-row .value {
    text-align: right;
  }
  .bar-track {
    grid-column: 1 / -1;
  }
}

/* ---------- Detail page ---------- */
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 10px 18px; }
.kv dt { color: var(--muted); font-size: 12.5px; }
.kv dd { margin: 0; color: var(--ink); font-size: 13px; }
@media (max-width: 720px) {
  .kv {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .kv dd {
    margin-bottom: 10px;
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

.page-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;
}
.page-head h2 { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
.page-head .crumb { font-size: 12px; color: var(--muted); margin-bottom: 4px; }

.empty-state {
  padding: 48px;
  text-align: center;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
}
.empty-state .ico { font-size: 24px; opacity: 0.5; }
.empty-state h4 { color: var(--ink); margin: 8px 0 4px; }

.inline-form { display: inline; }

.pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em;
}
.pill-ok { background: var(--surface-2); color: var(--brand); border: 1px solid var(--border); }

.dashboard-hero {
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  color: var(--surface);
  border-radius: var(--r-lg);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-lg);
}
.dashboard-hero h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.dashboard-hero p { margin: 0; color: var(--surface-2); font-size: 13px; }
.dashboard-hero .stats { display: flex; gap: 24px; }
.dashboard-hero .stat { text-align: right; }
.dashboard-hero .stat-num { font-size: 22px; font-weight: 700; line-height: 1; }
.dashboard-hero .stat-label { font-size: 10.5px; color: var(--surface-2); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 4px; }
@media (max-width: 720px) {
  .dashboard-hero {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    margin-bottom: 14px;
    border-radius: var(--r-md);
    box-shadow: var(--shadow);
  }
  .dashboard-hero h2 {
    font-size: 17px;
    line-height: 1.25;
  }
  .dashboard-hero p {
    font-size: 12.5px;
    line-height: 1.35;
  }
  .dashboard-hero .stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
  }
  .dashboard-hero .stat {
    text-align: left;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.07);
  }
  .dashboard-hero .stat-num {
    font-size: 20px;
  }
  .dashboard-hero .stat-label {
    font-size: 9.5px;
    letter-spacing: 0.08em;
  }
}

.widget-add-hint {
  padding: 36px; text-align: center; color: var(--muted);
  background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--r-md);
}
@media (max-width: 720px) {
  .widget-add-hint {
    padding: 20px 16px;
  }
}

/* ---------- Marketing / Home page ---------- */

.marketing {
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
}
.marketing-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;  /* match .hero / .section outer horizontal padding */
}
.marketing-nav .inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.marketing-nav .links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 13px;
  color: var(--muted);
}
.marketing-nav .links a:not(.btn) { color: var(--ink-2); font-weight: 500; }
.marketing-nav .links a:not(.btn):hover { color: var(--brand); text-decoration: none; }

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
  padding: 72px 28px 88px;
}

.hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  z-index: -2;
  background: var(--accent);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 28px 0 28px;
  height: 1px;
  background: var(--border);
  pointer-events: none;
}

/* Ensure hero content stays above the decorative layers. */
.hero-inner { position: relative; z-index: 1; }
.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  box-shadow: var(--shadow);
}
.hero-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 999px; background: var(--accent);
  box-shadow: 0 0 0 4px rgba(243, 161, 194, 0.25);
}
.hero h1 {
  font-size: 54px;
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--ink);
  margin: 20px 0 16px;
  max-width: 12ch;
}
.hero h1 .gradient {
  color: var(--accent);
}
.hero p.lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 0 28px;
}
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-xl {
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 8px;
}
.hero-proof {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--muted);
  font-size: 12.5px;
}
.hero-proof .line {
  width: 28px; height: 1px; background: var(--border-strong);
}

/* Floating dashboard preview on the right */
.hero-preview {
  position: relative;
  perspective: 1400px;
}
.hero-preview .stack {
  position: relative;
  width: 100%;
  transform: none;
}
.hero-preview .card {
  box-shadow: var(--shadow);
  border-radius: var(--r-lg);
}
.hero-preview .card + .card {
  margin-top: 14px;
}
.preview-head {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.preview-head h4 { margin: 0; font-size: 12px; letter-spacing: 0.02em; color: var(--ink); font-weight: 700; }
.preview-head .small { font-size: 10.5px; color: var(--muted); }
.preview-body { padding: 14px 16px; }
.preview-kpi {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.preview-kpi-sub {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-top: 10px;
}
.preview-spark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 38px;
  margin-top: 14px;
}
.preview-spark span {
  flex: 1;
  background: linear-gradient(180deg, var(--brand), var(--accent));
  border-radius: 2px 2px 0 0;
  opacity: 0.9;
}

.hero-preview .grid-kpis { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.hero-preview .kpi { min-height: 100px; padding: 12px 14px; }
.hero-preview .kpi-value { font-size: 22px; }

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero h1 { font-size: 40px; }
  .hero-preview .stack { transform: none; }
}

/* Features section */
.section {
  padding: 80px 28px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.section.alt { background: var(--bg); }
.section-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.section-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.section-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-2);
  margin-bottom: 12px;
}
.section-head h2 {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 12px;
  line-height: 1.15;
}
.section-head p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.section.alt .feature { background: var(--bg); }
.feature:hover {
  background: var(--surface-2);
  border-color: var(--accent);
}
.feature .ico-wrap {
  width: 44px; height: 44px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft);
  color: var(--brand);
  font-size: 22px;
  margin-bottom: 16px;
}
.feature h3 {
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.feature p {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
}
@media (max-width: 900px) {
  .feature-grid { grid-template-columns: 1fr; }
}

/* How it works */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  counter-reset: step;
}
.step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  position: relative;
}
.section.alt .step { background: var(--bg); }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--brand-2);
  display: block;
  margin-bottom: 10px;
  font-weight: 700;
}
.step h4 { margin: 0 0 6px; font-size: 15px; color: var(--ink); letter-spacing: -0.01em; }
.step p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr 1fr; }
}

/* Roles matrix teaser */
.role-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.role-tile {
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.section.alt .role-tile { background: var(--bg); }
.role-tile .role-name {
  font-weight: 700;
  color: var(--ink);
  font-size: 14px;
  margin-bottom: 3px;
}
.role-tile .role-desc { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
@media (max-width: 900px) {
  .role-grid { grid-template-columns: 1fr; }
}

/* CTA strip */
.cta-strip {
  background: var(--brand);
  color: var(--surface);
  padding: 64px 28px;
  position: relative;
  overflow: hidden;
}
.cta-strip::after {
  content: "";
  position: absolute;
  inset: auto 0 0 auto;
  width: 48%;
  height: 7px;
  background: var(--accent);
}
.cta-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  position: relative;
  z-index: 1;
}
.cta-inner h3 {
  font-size: 28px;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--surface);
  line-height: 1.2;
  max-width: 28ch;
}
.cta-inner p {
  color: var(--surface-2);
  margin: 0;
  font-size: 14.5px;
  max-width: 52ch;
}
.cta-inner .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--brand);
}
.cta-inner .btn-primary:hover {
  background: var(--surface);
  border-color: var(--surface);
}
@media (max-width: 800px) {
  .cta-inner { flex-direction: column; align-items: flex-start; }
}

/* Footer */
.marketing-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 32px 28px;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  font-size: 12.5px;
}
.footer-inner .links a { color: var(--ink-2); margin-left: 18px; }
.footer-inner .links a:hover { color: var(--brand); text-decoration: none; }

/* Minor utility */
.mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.muted { color: var(--muted); }
.flex { display: flex; align-items: center; gap: 10px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.text-right { text-align: right; }
.small { font-size: 12px; }
.mono { font-family: var(--mono); }
.stretch { width: 100%; }

/* ---------- Form Builder (drag-and-drop) ---------- */
.builder-stagebar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.stage {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}
.stage span {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
}
.stage.is-active {
  color: var(--brand);
  border-color: rgba(243, 161, 194, 0.55);
  background: var(--accent-soft);
}
.stage.is-active span {
  background: var(--brand);
  color: var(--surface);
  border-color: var(--brand);
}

.builder-status {
  font-size: 12px;
  color: var(--muted);
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.builder-status.is-dirty { color: var(--brand); border-color: var(--accent); background: var(--accent-soft); }
.builder-status.is-saved { color: var(--brand-2); border-color: var(--border-strong); background: var(--surface-2); }
.builder-status.is-error { color: var(--brand); border-color: var(--accent); background: var(--accent-soft); }

.builder-meta {
  margin-bottom: 16px;
}
.builder-meta > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.builder-meta > summary::-webkit-details-marker { display: none; }
.builder-meta > summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
}
.builder-meta[open] > summary::after { content: "▴"; }

.builder {
  display: grid;
  grid-template-columns: minmax(210px, 240px) minmax(420px, 1fr) minmax(300px, 340px);
  gap: 16px;
  align-items: stretch;
  height: calc(100vh - 180px);
  min-height: 560px;
}
@media (max-width: 1100px) {
  .builder { grid-template-columns: 200px 1fr 280px; }
}
@media (max-width: 900px) {
  .builder {
    grid-template-columns: 1fr;
    height: auto;
  }
  .builder-palette,
  .builder-field-settings {
    position: static;
    max-height: none;
  }
  .builder-palette { order: 1; }
  .builder-canvas  { order: 2; }
  .builder-field-settings { order: 3; }
  .palette-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.builder-palette,
.builder-canvas,
.builder-field-settings {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.builder-palette > .palette-scroll,
.builder-canvas > .canvas-list,
.builder-field-settings > .fs-body,
.builder-field-settings > .fs-empty {
  flex: 1 1 auto;
  overflow-y: auto;
}

/* Palette search + groups */
.palette-search-wrap { padding: 0 12px 8px; }
.palette-search {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  background: var(--surface-2);
}
.palette-search:focus {
  outline: none;
  border-color: var(--brand-2);
  background: var(--surface);
}
.palette-scroll { padding: 0 0 4px; min-height: 0; }
.palette-group { margin: 0 8px 6px; }
.palette-group > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: var(--surface-2);
}
.palette-group > summary::-webkit-details-marker { display: none; }
.palette-group > summary::after {
  content: "▸";
  font-size: 10px;
  color: var(--muted-2);
  margin-left: 8px;
  transition: transform 120ms ease;
}
.palette-group[open] > summary::after { transform: rotate(90deg); }
.palette-group:hover > summary { color: var(--brand); }
.palette-group-count {
  font-weight: 700;
  color: var(--muted-2);
  background: var(--surface);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
}
.palette-list-group { padding: 6px 0 2px; }
.palette-empty {
  text-align: center;
  color: var(--muted-2);
  font-size: 12px;
  padding: 12px;
}

/* Workflow accordion (collapsed by default below builder) */
.workflow-accordion > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.workflow-accordion > summary::-webkit-details-marker { display: none; }
.workflow-accordion > summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--muted-2);
  transition: transform 120ms ease;
}
.workflow-accordion[open] > summary::after { transform: rotate(180deg); }

/* Mobile preview drawer — sits below the topbar (so page title + topbar
   actions stay visible) and pushes the form-builder content over instead of
   overlapping it. `--preview-top` is set in JS to the live bottom of .topbar. */
body.has-preview-drawer { padding-right: 0; }
body.has-preview-drawer .content { padding-right: 540px; }
@media (max-width: 1100px) {
  body.has-preview-drawer .content { padding-right: 480px; }
}
@media (max-width: 900px) {
  body.has-preview-drawer .content { padding-right: 0; }
}
.preview-drawer {
  position: fixed;
  top: var(--preview-top, 120px);
  right: 0;
  bottom: 0;
  width: 520px;
  max-width: 90vw;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -10px 0 32px rgba(0, 0, 0, 0.08);
  transform: translateX(100%);
  transition: transform 220ms ease;
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 14px 18px;
}
.preview-drawer.is-open { transform: translateX(0); }
.preview-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  flex: 0 0 auto;
}
.preview-drawer > .mobile-shell {
  flex: 0 0 auto;
  margin: auto;        /* vertical + horizontal centering inside the drawer */
  overflow: visible;
}
@media (max-width: 1100px) {
  .preview-drawer { width: 460px; }
}
@media (max-width: 900px) {
  .preview-drawer { width: 92vw; }
}

.builder-pane-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 16px 8px;
}
.builder-pane-hint {
  font-size: 12px;
  color: var(--muted-2);
  padding: 0 16px 12px;
}

.builder-palette,
.builder-canvas,
.builder-field-settings {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
/* Panes scroll internally now (see .builder height + overflow rules below). */

.palette-list {
  list-style: none;
  margin: 0;
  padding: 0 10px 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.palette-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  cursor: grab;
  font-size: 12.5px;
  user-select: none;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}
.palette-item:hover {
  border-color: var(--brand-2);
  background: var(--slate-soft);
}
.palette-item:active { cursor: grabbing; transform: scale(0.98); }
.palette-subhead {
  list-style: none;
  padding: 10px 4px 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: default;
  user-select: none;
}
.inv-subhead {
  margin: 16px 0 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-2, var(--muted));
}
.inv-subhead:first-of-type { margin-top: 4px; border-top: 0; padding-top: 0; }
.inv-advanced { margin-top: 14px; }
.palette-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  color: var(--brand);
  font-family: var(--mono);
}
.palette-label { font-weight: 500; color: var(--ink-2); }

.builder-canvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 16px;
}
.canvas-list {
  list-style: none;
  margin: 0;
  padding: 6px 12px 16px;
  min-height: 200px;
}
.canvas-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.canvas-row:hover { border-color: var(--border-strong); }
.canvas-row.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(243, 161, 194, 0.22);
}
.canvas-row-handle {
  cursor: grab;
  color: var(--muted-2);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -2px;
}
.canvas-row-handle:active { cursor: grabbing; }
.canvas-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.canvas-row-label {
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.canvas-row-type {
  font-size: 11.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.canvas-row-key {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted-2);
  margin-top: 2px;
}
.canvas-row-preview {
  margin-top: 8px;
}
.canvas-row-ghost { opacity: 0.4; background: var(--slate-soft); }

.preview-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
}
.preview-input:disabled { cursor: not-allowed; }
.preview-check { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.preview-section {
  padding: 10px 12px;
  border-left: 3px solid var(--brand-2);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12.5px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.preview-signature, .preview-photo {
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  padding: 14px;
  text-align: center;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 12.5px;
}
.preview-static {
  padding: 10px 12px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12.5px;
  border-radius: var(--r-sm);
  font-style: italic;
}
.preview-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--accent-soft, #eef2ff);
  border: 1px solid var(--accent, #c7d2fe);
  color: var(--brand, #1f2937);
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: 13px;
}
.preview-rating {
  padding: 6px 10px;
  color: var(--brand-2);
  font-size: 18px;
  letter-spacing: 4px;
}
.preview-radios {
  display: grid;
  gap: 6px;
}
.static-text {
  padding: 10px 12px;
  background: var(--surface-2);
  color: var(--muted);
  border-radius: var(--r-sm);
  font-size: 13px;
}

/* Builder label_format → runtime classes (Rolando: bold/large/highlight callouts
   are critical for corrective-action visibility and operator alerts). */
.vint-fmt.fmt-bold { font-weight: 700; }
.vint-fmt.fmt-italic { font-style: italic; }
.vint-fmt.fmt-large { font-size: 18px; line-height: 1.35; }
.vint-fmt.fmt-large.fmt-bold { font-size: 20px; }
.vint-fmt.fmt-highlight {
  background: #fef3c7;
  color: #78350f;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
  border: 1px solid #f59e0b;
}
.static-text.vint-fmt.fmt-highlight {
  background: #fef3c7;
  color: #78350f;
  border-color: #f59e0b;
}
.vint-fmt.fmt-place-left { display: inline-block; min-width: 140px; margin-right: 12px; }
.vint-fmt.fmt-place-hidden { display: none; }

/* Inline corrective-action block under an offending number field. */
.field-needs-ca > input,
.field-needs-ca > textarea { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12); }
.corrective-action-prompt {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid #fbbf24;
  background: #fffbeb;
  border-radius: 8px;
  display: grid;
  gap: 6px;
}
.corrective-action-prompt .ca-banner {
  font-weight: 600;
  color: #92400e;
}
.corrective-action-prompt textarea {
  min-height: 56px;
}

.screen-conditional-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border, #e5e7eb);
}
.cascade-search {
  display: block;
  width: 100%;
  margin: 0 0 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12.5px;
  background: var(--surface);
}
.cascade-search:focus { outline: 2px solid var(--brand); outline-offset: -1px; }

.signature-pad {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 8px;
}
.signature-canvas {
  display: block;
  width: 100%;
  background: linear-gradient(to bottom, #fff 0%, #fff 88%, var(--surface-2, #f6f7f9) 100%);
  border-radius: 6px;
  touch-action: none;
  cursor: crosshair;
}
.signature-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}
.photo-upload {
  display: grid;
  gap: 8px;
}
.photo-preview {
  display: block;
  max-width: 100%;
  max-height: 320px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.ref-help {
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--surface-2, #f6f7f9);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
}
.ref-help-title {
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 4px;
}
.ref-help-list {
  margin: 0 0 8px;
  padding-left: 18px;
  color: var(--ink-2);
  line-height: 1.4;
}
.ref-help-list li { margin-bottom: 3px; }
.ref-help-list strong { color: var(--ink); }
.ref-help-list em { color: var(--brand); font-style: normal; }

.container-capacity-warning {
  margin-top: 6px;
  padding: 6px 10px;
  font-size: 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  border-radius: 6px;
}
.container-capacity-warning.is-ok {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #065f46;
}

.submission-image {
  display: block;
  max-width: 320px;
  max-height: 240px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 4px;
  background: var(--surface-2, #f6f7f9);
}

.submission-ca-banner {
  padding: 12px 14px;
  margin-bottom: 14px;
  background: #fffbeb;
  border: 1px solid #fbbf24;
  border-radius: 8px;
  color: #92400e;
}
.submission-ca-banner .ca-list {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 13px;
  color: #78350f;
}
.submission-ca {
  margin-top: 6px;
  padding: 6px 10px;
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  border-radius: 4px;
  font-size: 12.5px;
  color: #78350f;
}
.submission-ca-tag {
  display: inline-block;
  font-weight: 700;
  margin-right: 6px;
  color: #92400e;
}
.screen-conditional-section h5 {
  margin: 0 0 4px;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.single-choice {
  display: grid;
  gap: 8px;
}
.radio-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rating-input {
  display: flex;
  gap: 4px;
}
.rating-input input[type="radio"] { position: absolute; opacity: 0; }
.rating-star {
  cursor: pointer;
  font-size: 22px;
  color: var(--border-strong);
}
.rating-star:has(input:checked) { color: var(--brand-2); }
.mobile-static {
  padding: 8px 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

/* Inventory module subnav */
.subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow-x: auto;
}
.subnav a {
  padding: 6px 12px;
  border-radius: var(--r-sm);
  color: var(--muted);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}
.subnav a:hover { color: var(--ink); background: var(--surface); }
.subnav a.active {
  background: var(--brand);
  color: var(--surface);
  font-weight: 700;
}

.subnav-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  position: relative;
}
.subnav-group[data-label]::before {
  content: attr(data-label);
  position: absolute;
  top: -16px;
  left: 8px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-2);
  pointer-events: none;
}
.subnav-sep {
  width: 1px;
  height: 18px;
  background: var(--border-strong);
  margin: 0 4px;
  flex: 0 0 1px;
}
.inventory-subnav { margin-top: 22px; padding-top: 6px; }
.subnav a.subnav-home { color: var(--ink); font-weight: 700; }
.subnav a.subnav-home.active { color: var(--surface); }
@media (max-width: 720px) {
  .subnav-group[data-label]::before { display: none; }
  .inventory-subnav { margin-top: 16px; }
  .subnav { padding: 4px; }
  .subnav a { padding: 6px 10px; font-size: 12px; }
  .subnav-sep { display: none; }
}

.hold-row, .bom-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.hold-row:last-child, .bom-row:last-child { border-bottom: none; }

/* ------------- Slack-style chat shell ------------- */
.chat-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  min-height: calc(100vh - 220px);
  position: relative;
}
.chat-sidebar {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px 0;
  overflow-y: auto;
  max-height: calc(100vh - 220px);
}
.chat-sidebar-close { display: none; }
.chat-backdrop { display: none; }
.chat-menu-btn { display: none; }
.chat-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-2);
  padding: 12px 16px 4px;
}
.chat-add summary { cursor: pointer; list-style: none; padding: 0 4px; color: var(--muted); }
.chat-add summary::-webkit-details-marker { display: none; }
.chat-add-form { padding: 8px 16px; display: grid; gap: 6px; }
.chat-add-form input { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 12px; }
.channel-list { list-style: none; margin: 0; padding: 0; }
.channel-list li { padding: 0; }
.channel-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 16px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
}
.channel-row:hover { color: var(--ink); background: var(--surface); }
.channel-row.is-active { color: var(--ink); background: var(--surface); font-weight: 600; }
.channel-row-form { margin: 0; }
.channel-hash { color: var(--muted-2); font-weight: 700; }
.channel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; }
.member-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand);
  color: var(--surface);
  font-size: 10px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.member-name { flex: 1; font-size: 12.5px; }
.member-role { font-size: 10px; color: var(--muted-2); }

.chat-main {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.chat-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  gap: 12px;
}
.chat-head h3 { margin: 0; font-size: 15px; }
.chat-head-text { flex: 1 1 auto; min-width: 0; }
.chat-empty {
  padding: 40px;
  text-align: center;
  color: var(--muted);
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-message {
  display: flex;
  gap: 10px;
}
.chat-avatar {
  width: 32px; height: 32px; border-radius: 6px;
  background: var(--brand);
  color: var(--surface);
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chat-message.is-me .chat-avatar { background: var(--brand-2); }
.chat-bubble { flex: 1; }
.chat-meta { font-size: 12px; }
.chat-body { font-size: 13.5px; line-height: 1.45; color: var(--ink); margin-top: 2px; }
.chat-compose {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.chat-compose input[type="text"] {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 13px;
}

@media (max-width: 768px) {
  .chat-shell {
    grid-template-columns: 1fr;
    min-height: calc(100vh - 160px);
  }
  .chat-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--r-sm);
    font-size: 18px;
    cursor: pointer;
    flex: 0 0 auto;
  }
  .chat-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 84vw;
    max-width: 320px;
    max-height: none;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 220ms ease;
    box-shadow: 4px 0 16px rgba(0,0,0,0.18);
    border-radius: 0;
    padding-top: 4px;
  }
  .chat-sidebar.is-open { transform: translateX(0); }
  .chat-sidebar-close {
    display: flex;
    justify-content: flex-end;
    padding: 8px 12px 0;
  }
  .chat-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.32);
    z-index: 55;
  }
  .chat-backdrop[hidden] { display: none; }
  body.chat-drawer-open { overflow: hidden; }
  .channel-row { padding: 10px 16px; font-size: 14px; }
  .member-avatar { width: 26px; height: 26px; font-size: 11px; }
  .chat-messages { padding: 12px; }
  .chat-compose { padding: 8px; }
  .chat-head { padding: 10px 12px; }
  .chat-head h3 { font-size: 14.5px; }
}

.work-hub { display: grid; gap: 12px; }
.work-bucket-head { font-size: 12px; margin-bottom: 4px; color: var(--ink); }
.work-row {
  display: flex;
  flex-direction: column;
  padding: 6px 8px;
  margin-bottom: 4px;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink);
  background: var(--surface-2);
  font-size: 12.5px;
}
.work-row:hover { background: var(--surface); }
.work-row strong { font-weight: 500; }

/* Segmented date-range toggle on metric form */
.seg-toggle {
  display: inline-flex;
  gap: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 2px;
}
.seg-toggle label {
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  border-radius: var(--r-sm);
  color: var(--muted);
}
/* Selected segment used --brand bg with --ink text, but --ink and --brand are
   the same color (#1f2437), so the selected option was dark text on a dark box
   and unreadable (Rolando's "text is the same as the selection tint" note).
   Use the pink accent he asked for, with dark text for contrast. */
.seg-toggle label:has(input:checked) { background: var(--accent); color: var(--brand); }
.seg-toggle input { display: none; }

.multi-choice { display: grid; gap: 6px; }
.preview-inv {
  padding: 10px;
  background: rgba(255, 200, 70, 0.06);
  border-left: 3px solid var(--brand-2);
  color: var(--muted);
  font-size: 12.5px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.inventory-action-row {
  padding: 12px;
  background: var(--surface-2);
  border-left: 3px solid var(--brand-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-bottom: 12px;
}
.inv-action-tag { font-weight: 600; font-size: 12.5px; color: var(--brand-2); }
.reference-doc-row, .link-row, .static-image-row {
  padding: 8px 12px;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  margin-bottom: 12px;
}

.settings-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.settings-tab {
  background: transparent;
  border: none;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.settings-tab.is-active { color: var(--ink); border-bottom-color: var(--brand-2); font-weight: 600; }
.settings-pane { padding: 8px 0; }

/* Builder title bar — form name lives here, prominent */
.builder-titlebar {
  margin-bottom: 14px;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.builder-form-name {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}
.builder-form-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--muted);
}

.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.doc-card {
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.doc-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

.canvas-empty {
  text-align: center;
  padding: 40px 20px 60px;
  color: var(--muted);
}
.canvas-empty-art {
  font-size: 36px;
  color: var(--muted-2);
  margin-bottom: 8px;
}

.builder-field-settings .field { padding: 0; }
.builder-field-settings .field input[type="text"],
.builder-field-settings .field select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: 13px;
  background: var(--surface);
}
.builder-field-settings .field input[type="text"]:focus,
.builder-field-settings .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(243, 161, 194, 0.22);
}
.fs-empty {
  padding: 12px 16px;
  color: var(--muted);
  font-size: 12.5px;
  font-style: italic;
  flex: 0 0 auto;
}
.fs-stack {
  display: grid;
}
.fs-stack[hidden],
.fs-empty[hidden] { display: none; }
.fs-group {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
}
.fs-section {
  border-top: 1px solid var(--border);
}
.fs-section > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.fs-section > summary::-webkit-details-marker { display: none; }
.fs-section > summary::after {
  content: "▸";
  margin-left: auto;
  color: var(--muted-2);
  font-size: 11px;
  transition: transform 120ms ease;
}
.fs-section[open] > summary::after { transform: rotate(90deg); }
.fs-section > summary > h4 {
  margin: 0;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fs-section[open] > summary > h4 { color: var(--brand); }
/* Section content (every direct child except summary) gets a left/right pad and a small gap between blocks. */
.fs-section > :not(summary) { margin: 0 14px 8px; }
.fs-section > :last-child { margin-bottom: 12px; }
.fs-group-title {
  margin: 0 0 8px;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.builder-field-settings .field label {
  display: grid;
  gap: 2px;
  margin-bottom: 6px;
}
.builder-field-settings .field .hint {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted-2);
  line-height: 1.35;
}
.toggle-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 10px 0 14px;
}
.toggle-row {
  display: grid !important;
  grid-template-columns: 16px 1fr;
  align-items: start;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  cursor: pointer;
}
.toggle-row.compact {
  padding: 7px 9px;
}
.toggle-row input {
  margin-top: 2px;
  justify-self: start;
  flex: 0 0 auto;
}
.toggle-row span {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.toggle-row strong {
  font-size: 12px;
  line-height: 1.25;
}
.toggle-row small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}
.seg-check {
  display: block;
}
.seg-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.seg-check span {
  min-height: 30px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 700;
}
.seg-check input:checked + span {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--brand);
}
.fs-actions {
  padding: 8px 16px 16px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}

.pill-required { background: var(--accent-soft); color: var(--danger); border-color: var(--accent); }

.form-section-divider {
  border-top: 1px solid var(--border);
  margin: 22px 0 14px;
  padding-top: 18px;
}
.form-section-divider h3 {
  margin: 0;
  font-size: 14px;
  color: var(--brand);
  letter-spacing: 0.01em;
}

@media (max-width: 760px) {
  .builder-stagebar {
    grid-template-columns: 1fr 1fr;
  }
  .stage {
    min-height: 36px;
    padding: 7px 9px;
  }
  .builder-canvas-head,
  .canvas-row-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .canvas-list {
    padding: 6px 10px 12px;
  }
}

/* ---------- Prototype module surfaces ---------- */
.folder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}
.folder-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  padding: 12px;
}
.folder-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--brand);
}
.prototype-flow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.prototype-flow span {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-weight: 700;
  font-size: 12px;
}
.prototype-flow i {
  width: 28px;
  height: 1px;
  background: var(--border-strong);
}
@media (max-width: 720px) {
  .folder-grid {
    padding: 12px;
  }
  .folder-tile {
    align-items: flex-start;
  }
  .prototype-flow {
    align-items: stretch;
    flex-direction: column;
  }
  .prototype-flow span {
    text-align: center;
  }
  .prototype-flow i {
    width: 1px;
    height: 14px;
    align-self: center;
  }
}
.mapping-row,
.thread-row,
.timeline-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.mapping-row:last-child,
.thread-row:last-child,
.timeline-row:last-child { border-bottom: 0; }
.timeline-row {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
}
.messaging-grid,
.messaging-shell {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
}
.messaging-shell {
  align-items: stretch;
}
.messaging-threads,
.messaging-conversation {
  min-height: 640px;
}
.thread-list {
  padding: 10px;
  max-height: 620px;
  overflow: auto;
}
.thread-row {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: 8px;
  color: var(--ink);
  text-decoration: none;
  min-height: 74px;
}
.thread-row:hover {
  background: var(--surface-2);
  text-decoration: none;
}
.thread-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.thread-main strong,
.thread-snippet {
  overflow: hidden;
  text-overflow: ellipsis;
}
.thread-main strong {
  white-space: nowrap;
}
.thread-snippet {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.thread-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-top: 6px;
  background: var(--border-strong);
}
.thread-row.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.thread-row.is-active .thread-dot {
  background: var(--accent);
}
.conversation-head {
  min-height: 68px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.conversation-head h3 {
  margin: 0;
  font-size: 15px;
}
.message-list {
  padding: 18px;
  min-height: 480px;
  max-height: 560px;
  overflow: auto;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}
.message-line {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 12px;
}
.message-line.is-me {
  justify-content: flex-end;
}
.message-line.is-me .message-avatar {
  order: 2;
}
.message-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  flex: 0 0 auto;
}
.message-bubble {
  max-width: min(72%, 680px);
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
}
.message-line.is-me .message-bubble {
  background: var(--accent-soft);
  border-color: rgba(243, 161, 194, 0.55);
}
.message-attachment {
  margin-top: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--brand-2);
  font-size: 12px;
  font-weight: 700;
}
.conversation-compose {
  border-top: 1px solid var(--border);
  padding: 12px;
  background: var(--surface);
}
.message-compose {
  display: grid;
  grid-template-columns: 1fr minmax(180px, 260px) auto;
  gap: 8px;
}
.message-new-thread > summary {
  cursor: pointer;
  list-style: none;
}
.message-new-thread > summary::-webkit-details-marker { display: none; }
.compact-form textarea {
  min-height: 84px;
}
.palette-group-title {
  padding: 0 16px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted-2);
  text-transform: uppercase;
}
.screen-list {
  display: grid;
  gap: 6px;
  padding: 0 10px 14px;
  max-height: 360px;
  overflow-y: auto;
}
.screen-tab.is-drop-target {
  outline: 2px dashed var(--brand);
  outline-offset: -2px;
  background: var(--accent-soft);
}
.screen-tab {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink-2);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  text-align: left;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.screen-tab {
  display: flex;
  align-items: center;
  gap: 8px;
}
.screen-num {
  display: inline-flex;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.screen-label { flex: 1; }
.screen-kind-badge {
  font-size: 10px;
  background: var(--brand-2);
  color: var(--surface);
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 700;
}
.screen-tab.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--brand);
  font-weight: 700;
}
.screen-tab.is-active .screen-num { background: var(--brand); color: var(--surface); }
.screen-add-btn {
  display: block;
  width: calc(100% - 20px);
  margin: 0 10px 14px;
  padding: 8px;
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.screen-add-btn:hover { color: var(--ink); border-color: var(--brand); }

.canvas-screen-banner { display: flex; flex-direction: column; gap: 2px; }
.screen-settings-card {
  margin: 14px;
  padding: 0 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.screen-settings-card summary {
  padding: 10px 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--muted);
}
.screen-settings-card[open] summary { color: var(--ink); }
.screen-settings-body { padding: 0 0 14px; }
.screen-settings-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.mobile-screen-divider {
  margin: 8px -8px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.04);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.mobile-loop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  background: rgba(255, 200, 70, 0.08);
  font-size: 11px;
  color: var(--muted);
  margin: 4px 0 8px;
  border-radius: 999px;
}
.loop-tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--brand-2);
  color: var(--surface);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
  border-radius: 999px;
}
.mobile-relay-marker {
  margin: 8px 0;
  padding: 6px;
  text-align: center;
  font-size: 11px;
  background: rgba(58, 173, 255, 0.08);
  color: var(--accent);
  border-radius: 6px;
}

.form-screen-block {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin: 16px 0;
  background: var(--surface-2);
}
.form-screen-legend {
  font-weight: 700;
  font-size: 14px;
  padding: 0 8px;
  color: var(--ink);
}
.screen-relay-marker {
  margin-top: 16px;
  padding: 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  background: rgba(58, 173, 255, 0.08);
  color: var(--accent);
  border-radius: var(--r-sm);
}

.loop-table-wrap { overflow-x: auto; }
.loop-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-bottom: 8px;
}
.loop-table th, .loop-table td {
  padding: 6px;
  border: 1px solid var(--border);
  vertical-align: top;
}
.loop-table th {
  background: var(--surface);
  text-align: left;
  font-weight: 600;
  color: var(--muted);
}
.loop-table input, .loop-table select, .loop-table textarea {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 12.5px;
  font-family: inherit;
}

/* Drag-droppable resizable dashboard widgets */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.dash-widget {
  position: relative;
  display: flex;
  min-height: 120px;
}
.dash-widget > .kpi { flex: 1; }
.dash-widget.size-1x1 { grid-column: span 1; }
.dash-widget.size-2x1 { grid-column: span 2; }
.dash-widget.size-2x2 { grid-column: span 2; min-height: 280px; }
.dash-widget-controls {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 2;
}
.dash-widget:hover .dash-widget-controls { opacity: 1; }
.dash-handle, .dash-resize, .dash-remove {
  width: 22px; height: 22px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dash-handle:hover, .dash-resize:hover { color: var(--ink); border-color: var(--brand); }
.dash-remove:hover { color: var(--danger); border-color: var(--danger); }
.dash-handle { cursor: grab; }
.dash-widget-ghost { opacity: 0.4; }

@media (max-width: 768px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-widget.size-2x1, .dash-widget.size-2x2 { grid-column: span 1; }
}
.format-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.conditional-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 8px;
}
.relay-builder {
  display: grid;
  grid-template-columns: 1fr auto 1.2fr auto 1fr;
  gap: 10px;
  align-items: stretch;
}
.relay-step {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  padding: 12px;
}
.relay-step span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}
.relay-arrow {
  display: flex;
  align-items: center;
  color: var(--muted-2);
}
/* Phone-shaped mobile preview. Fixed aspect ratio (~9:19.5 — modern iPhone),
   inner scroll only on the screen area, body remains rigid. */
.mobile-shell {
  position: relative;
  width: 360px;
  height: 740px;
  margin: 8px auto 0;
  background: #111;
  border: 1px solid #222;
  border-radius: 38px;
  padding: 12px 8px;
  box-shadow:
    0 1px 0 #2a2a2a inset,
    0 -1px 0 #2a2a2a inset,
    0 12px 32px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
}
.mobile-notch-camera {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 22px;
  border-radius: 14px;
  background: #000;
  z-index: 2;
}
.mobile-notch-camera::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2a2a2a;
  box-shadow: inset 0 0 0 1px #444;
}
.mobile-screen {
  flex: 1;
  background: var(--surface);
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.mobile-statusbar {
  flex: 0 0 auto;
  padding: 6px 18px 4px;
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-2, #f6f7f9);
}
.mobile-statusbar-icons { letter-spacing: 1px; opacity: 0.7; }
.mobile-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 14px 24px;
  background: var(--surface);
}
.mobile-home-indicator {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 4px;
  border-radius: 2px;
  background: #444;
}
.mobile-title {
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 12px;
  color: var(--brand);
}

/* Per-screen mobile preview: pager pills + screen header + nav. */
.mobile-screen-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.mobile-screen-tab {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  width: 26px;
  height: 26px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.mobile-screen-tab.is-active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.mobile-screen-tab.is-conditional {
  border-style: dashed;
  position: relative;
}
.mobile-screen-tab.is-conditional .cond-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fbbf24;
  color: #78350f;
  font-size: 8px;
  line-height: 11px;
  font-weight: 800;
  border: 1px solid var(--surface);
}
.mobile-screen-cond {
  font-size: 11px;
  color: #92400e;
  background: #fffbeb;
  padding: 4px 8px;
  margin-top: 4px;
  border-radius: 4px;
  border: 1px solid #fde68a;
}
.mobile-screen-header {
  margin: 4px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}
.mobile-screen-count {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.mobile-screen-name {
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  margin-top: 2px;
}
.mobile-screen-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.mobile-relay-marker {
  margin-top: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--surface-2, #f6f7f9);
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
}
.mobile-section {
  margin: 14px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  font-weight: 800;
  color: var(--brand);
}
.mobile-field {
  margin-bottom: 12px;
}
.mobile-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--ink-2);
}
@media (max-width: 960px) {
  .folder-grid { grid-template-columns: 1fr; }
  .messaging-grid,
  .messaging-shell { grid-template-columns: 1fr; }
  .messaging-threads,
  .messaging-conversation {
    min-height: 0;
  }
  .thread-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    max-height: none;
    padding: 12px;
    scroll-snap-type: x mandatory;
  }
  .thread-row {
    min-width: min(84vw, 360px);
    margin-bottom: 0;
    scroll-snap-align: start;
  }
  .message-list {
    min-height: 360px;
    max-height: none;
    padding: 14px;
  }
  .message-bubble {
    max-width: calc(100vw - 92px);
  }
  .conversation-head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface);
  }
  .conversation-compose {
    position: sticky;
    bottom: 0;
  }
  .message-compose {
    grid-template-columns: 1fr;
  }
  .relay-builder { grid-template-columns: 1fr; }
  .relay-arrow { justify-content: center; transform: rotate(90deg); }
}
@media (max-width: 720px) {
  .messaging-grid,
  .messaging-shell {
    gap: 12px;
  }
  .thread-list {
    padding: 10px;
    display: grid;
    gap: 8px;
    overflow-x: hidden;
    scroll-snap-type: none;
  }
  .thread-row {
    width: 100%;
    min-width: 0;
    min-height: 68px;
    padding: 10px;
    grid-template-columns: 8px minmax(0, 1fr);
    scroll-snap-align: none;
  }
  .thread-row .chip {
    grid-column: 2;
    justify-self: start;
    margin-top: 4px;
  }
  .conversation-head {
    align-items: flex-start;
    flex-direction: column;
    min-height: 0;
    padding: 14px;
  }
  .message-list {
    min-height: 54vh;
    padding: 12px;
  }
  .message-avatar {
    display: none;
  }
  .message-bubble {
    max-width: 92%;
    padding: 9px 10px;
  }
  .conversation-compose {
    padding: 10px;
  }
  .message-new-thread > summary {
    display: flex;
    justify-content: center;
    min-height: 40px;
  }
  .timeline-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
@media (max-width: 760px) {
  .format-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mobile-shell {
    width: 300px;
    height: 620px;
  }
}

/* ===== Benmore SPA port additions ========================================
   Layout utilities + SPA-only components. Everything responsive down to
   iPhone widths; the original mobile tabbar/sheet CSS (≤720px) is reused. */

/* --- responsive grid utilities --- */
.vgrid { display: grid; gap: 12px; }
.vgrid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vgrid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vgrid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vgrid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
@media (max-width: 1080px) {
  .vgrid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vgrid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vgrid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .vgrid-2, .vgrid-3, .vgrid-4 { grid-template-columns: 1fr; }
  .vgrid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
}

/* --- consistent section headings + page rhythm --- */
.section-title {
  margin: 22px 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.section-title:first-child { margin-top: 0; }
.section-title .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* --- centered single-column form pages --- */
.page-narrow { max-width: 760px; margin: 0 auto; }
.page-form { max-width: 860px; margin: 0 auto; }

/* --- modal --- */
.vint-modal-backdrop {
  position: fixed; inset: 0; background: rgba(31, 36, 55, 0.45);
  display: flex; align-items: center; justify-content: center; z-index: 1100; padding: 24px;
}
.vint-modal {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  width: 100%; max-height: 86vh; overflow: auto; padding: 20px;
}
.vint-modal h3 { margin-top: 0; }
@media (max-width: 640px) { .vint-modal-backdrop { padding: 10px; } .vint-modal { padding: 14px; } }

/* --- form runner wizard --- */
.runner-card { max-width: 760px; margin: 0 auto; }
.runner-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.runner-steps .step {
  font-size: 12px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
}
.runner-steps .step::before { content: none !important; margin: 0 !important; }
.runner-steps .step.current { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }
.runner-steps .step.done { background: var(--accent-soft); border-color: var(--accent-ring); color: var(--ink); }
.loop-rows-summary { margin-top: 14px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.loop-rows-summary table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 560px; }
.loop-rows-summary th, .loop-rows-summary td { border-bottom: 1px solid var(--border); padding: 7px 10px; text-align: left; white-space: nowrap; }
.loop-rows-summary tr:last-child td { border-bottom: 0; }
.loop-rows-summary th { background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }

/* --- relay toast + email preview --- */
.relay-toast {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 1200; cursor: pointer;
  background: var(--brand); color: #fff; padding: 12px 16px; border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); font-size: 13px; max-width: 380px;
}
@media (max-width: 720px) { .relay-toast { left: 16px; right: 16px; bottom: calc(78px + env(safe-area-inset-bottom)); max-width: none; } }
.relay-toast small { display: block; opacity: 0.75; margin-top: 2px; }
.email-preview { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.email-preview .email-head { background: var(--surface-2); padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.email-preview .email-body { padding: 14px; overflow-x: auto; }
.email-preview table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.email-preview td { padding: 4px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }

/* --- builder workspace --- */
.builder-grid { display: grid; grid-template-columns: 215px minmax(0, 1fr) 330px; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .builder-grid { grid-template-columns: 200px minmax(0, 1fr); } .builder-field-settings { grid-column: 1 / -1; } }
@media (max-width: 720px) { .builder-grid { grid-template-columns: 1fr; } }
.builder-field-card { margin-bottom: 8px; cursor: pointer; }
.builder-field-card.selected { outline: 2px solid var(--accent); }

/* --- messaging --- */
.messaging-grid { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 800px) { .messaging-grid { grid-template-columns: 1fr; } }
.messaging-pane { display: flex; flex-direction: column; height: min(62vh, 560px); }
.messaging-pane-head { font-weight: 600; border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 8px; }
.messaging-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.msg-row { display: flex; gap: 8px; padding: 5px 0; }
.msg-row-body { min-width: 0; }
.msg-row-body strong { font-size: 12.5px; }
.msg-row-time { font-size: 11px; }
.msg-row-text { font-size: 13px; overflow-wrap: anywhere; }

/* --- misc consistency --- */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.card + .card, .table-wrap + .card, .card + .section-title ~ * { min-width: 0; }
.cell-actions { text-align: right; white-space: nowrap; }
@media print {
  .app-header, .topbar-actions, .mobile-tabbar, .no-print, #flashHost, .relay-toast { display: none !important; }
  body { background: #fff; }
  .content { padding: 0; }
}
.vgrid-4 > .vcell-wide, .vgrid-6 > .vcell-wide { grid-column: span 2; }
@media (max-width: 640px) { .vgrid-4 > .vcell-wide { grid-column: auto; } }

.metric-src-row { display: grid; grid-template-columns: 28px 2fr 2fr 1fr; gap: 8px; align-items: end; margin-bottom: 6px; }
@media (max-width: 640px) { .metric-src-row { grid-template-columns: 1fr; align-items: stretch; border-bottom: 1px dashed var(--border); padding-bottom: 8px; } }
.toolbar select, .toolbar input { width: auto; max-width: 230px; padding: 7px 10px; font-size: 12.5px; }
@media (max-width: 640px) { .toolbar select, .toolbar input { max-width: none; flex: 1 1 46%; } .toolbar .btn { flex: 1 1 46%; justify-content: center; } }
/* With the preview drawer open on mid-size desktops, drop the builder to two
   columns and let the inspector span full width below — nothing hides. */
@media (max-width: 1560px) {
  body.has-preview-drawer .builder { grid-template-columns: 200px minmax(0, 1fr); height: auto; min-height: 0; }
  body.has-preview-drawer .builder-palette { max-height: 70vh; }
  body.has-preview-drawer .builder-canvas { max-height: none; }
  body.has-preview-drawer .builder-field-settings { grid-column: 1 / -1; max-height: 540px; }
}

/* ===== Lucide icon + builder polish layer ================================ */
svg.lucide { width: 15px; height: 15px; flex: 0 0 auto; vertical-align: -2px; stroke-width: 2; }
.btn svg.lucide { margin: 0; }
.module-tabs a svg.lucide { width: 14px; height: 14px; margin-right: 6px; display: inline-block; }
.module-tabs a .ico { display: none; }
.mobile-tabbar svg.lucide { width: 19px; height: 19px; }
.palette-ico svg.lucide { width: 13px; height: 13px; }
.screen-tab svg.lucide, .canvas-row-label svg.lucide { width: 12px; height: 12px; }

/* drag-to-reorder canvas rows */
.canvas-row { user-select: none; }
.canvas-row.is-dragging { opacity: 0.45; }
.canvas-row.drop-above { box-shadow: 0 -3px 0 0 var(--accent); }
.canvas-row.drop-below { box-shadow: 0 3px 0 0 var(--accent); }

/* phone preview scales to fit the drawer height — whole iPhone always visible */
.mobile-shell-scaler { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mobile-shell-scaler .mobile-shell { margin: 0; transform-origin: center center; flex: 0 0 auto; }

/* forms-by-folder layout */
.folder-section { margin-bottom: 18px; }
.folder-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--ink); }
.folder-head .muted { font-weight: 400; }
.folder-select { width: auto; max-width: 150px; padding: 4px 8px; font-size: 12px; }
/* fieldsets default to min-inline-size:min-content — a wide loop summary table
   was inflating the runner card past its max-width after "+ Add row" */
fieldset.form-screen-block { min-width: 0; min-inline-size: 0; max-width: 100%; }
.runner-card .card-body { min-width: 0; overflow-x: clip; }
.loop-rows-summary { max-width: 100%; }

/* Builder preview: the real runner inside the phone frame, without card chrome. */
.mobile-scroll .runner-card { border: 0; box-shadow: none; background: transparent; max-width: none; }
.mobile-scroll .runner-card .card-body { padding: 0; }
.mobile-scroll .runner-steps .step[data-pv-step] { cursor: pointer; }
.mobile-scroll .preview-run-note { font-size: 11.5px; padding: 7px 10px; margin-bottom: 10px; }
.mobile-scroll .flex-between { gap: 6px; flex-wrap: wrap; }
.mobile-scroll .pv-selected { outline: 2px solid var(--accent-ring, #f3a1c2); outline-offset: 4px; border-radius: 6px; }

/* ===== Finesse layer ======================================================
   Real Geist (self-hosted), motion, and brand character. */
@font-face {
  font-family: "Geist";
  src: url("/static/fonts/GeistVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/static/fonts/GeistMonoVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* selection + focus carry the brand */
::selection { background: var(--accent-soft); color: var(--brand); }
.btn:focus-visible, a:focus-visible, .screen-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* slim slate scrollbars everywhere */
* { scrollbar-width: thin; scrollbar-color: rgba(75, 81, 102, 0.35) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(75, 81, 102, 0.28); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(75, 81, 102, 0.48); }
*::-webkit-scrollbar-track { background: transparent; }

/* page transitions — content slides up softly on every route change */
@keyframes vint-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.content.page-enter > * { animation: vint-enter 0.26s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@media (prefers-reduced-motion: reduce) { .content.page-enter > * { animation: none; } }

/* branded loading state */
.vint-loading {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 72px 0; color: var(--muted); font-size: 12.5px;
}
.vint-spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--accent-soft); border-top-color: var(--accent);
  animation: vint-spin 0.7s linear infinite;
}
@keyframes vint-spin { to { transform: rotate(360deg); } }

/* flash toasts slide in */
#flashHost .msg { animation: vint-toast-in 0.22s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@keyframes vint-toast-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}

/* modals pop softly */
.vint-modal { animation: vint-pop 0.18s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@keyframes vint-pop {
  from { opacity: 0; transform: scale(0.97) translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.vint-modal-backdrop { animation: vint-fade 0.15s ease both; }
@keyframes vint-fade { from { opacity: 0; } }

/* relay toast breathes once to catch the eye */
.relay-toast { animation: vint-toast-in 0.25s ease both, vint-breathe 1.6s ease 0.4s 2; }
@keyframes vint-breathe {
  0%, 100% { box-shadow: var(--shadow-lg); }
  50% { box-shadow: 0 16px 34px rgba(243, 161, 194, 0.45), 0 2px 6px rgba(31, 36, 55, 0.05); }
}

/* KPI cards: lift on hover, pink tick accent on the label */
.kpi { transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease; }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--accent-ring); }
.kpi-label::before {
  content: ""; display: inline-block; width: 14px; height: 3px;
  border-radius: 2px; background: var(--accent); margin-right: 8px; vertical-align: 2px;
}

/* section titles get the same brand tick */
.section-title::before {
  content: ""; display: inline-block; width: 14px; height: 3px;
  border-radius: 2px; background: var(--accent); margin-right: 8px; vertical-align: 2px;
}

/* avatars: midnight→slate gradient with a pink ring on hover targets */
.avatar {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border);
}
.app-header-user .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--accent-ring); }

/* interactive cards (folder sections, hub entries) */
.card { transition: border-color 0.14s ease; }
tr[data-sub] td { transition: background 0.1s ease; }

/* chips: consistent metrics */
.chip { display: inline-flex; align-items: center; gap: 4px; line-height: 1.4; }

/* topbar page title: tiny brand dot */
.page-title::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); margin-right: 9px; vertical-align: 1px;
}
@media print { .page-title::before { display: none; } }

/* empty states breathe */
.table-empty { padding: 40px 24px; }

/* phone preview shell gets a soft pink glow so it reads as "the demo moment" */
.preview-drawer .mobile-shell { box-shadow: 0 1px 0 #2a2a2a inset, 0 -1px 0 #2a2a2a inset, 0 18px 44px rgba(31, 36, 55, 0.25), 0 0 0 6px rgba(243, 161, 194, 0.08); }

/* buttons never wrap their labels ("Test run" was breaking onto two lines) */
.btn { white-space: nowrap; }
/* logo keeps its natural aspect — width from CSS, height auto */
.vint-logo-img-horizontal { width: 148px; height: auto; }

/* phone statusbar icons: crisp lucide glyphs instead of unicode soup */
.mobile-statusbar-icons { display: inline-flex; align-items: center; gap: 5px; letter-spacing: 0; opacity: 0.8; }
.mobile-statusbar-icons svg.lucide { width: 12px; height: 12px; stroke-width: 2.2; }

/* builder status pill: one line, with a real dot instead of a text bullet */
.builder-status { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.builder-status.is-dirty::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: 0 0 auto;
  animation: vint-status-pulse 1.4s ease infinite;
}
@keyframes vint-status-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Reference Data is a three-column page on a desktop: reference tables +
   cascade mappings, the compliance library, and facility files. Below a
   laptop it stacks — the library panels are tall and unusable side by side
   on a tablet. */
@media (max-width: 1400px) {
  .reference-grid { grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr) !important; }
  .reference-grid > #filesCol { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .reference-grid { grid-template-columns: 1fr !important; }
  .reference-grid > #filesCol { grid-column: auto; }
}

/* An Action Block that is about to commit says so before the operator
   submits, rather than surprising them with a record afterwards. */
.inventory-action-row.is-firing {
  border-color: #f5c87a;
  background: #fffbf0;
}

/* Timer readout — large enough to read at arm's length on a plant floor. */
.timer-field .timer-readout { letter-spacing: .02em; }
.number-with-unit .unit-suffix {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}


/* ---------- Touch targets (WCAG 2.5.8) ----------
   The builder's row actions and the phone-preview screen tabs were 18-24px.
   This app is used on a plant floor, often with gloves, so a 24px minimum is
   the floor rather than a nicety. Size is added as padding so nothing reflows. */
.btn-xs {
  min-width: 28px;
  min-height: 28px;
}
.btn-sm {
  min-height: 28px;
}
.mobile-screen-tab {
  min-width: 28px;
  min-height: 28px;
}
/* A bare checkbox is ~13px, but .checkrow makes the whole row the target, which
   is what the operator actually taps. Enlarge the box itself for gloved use. */
.checkrow input[type="checkbox"],
.checkrow input[type="radio"],
.radio-row input[type="radio"] {
  width: 18px;
  height: 18px;
}

/* Choice rows in the form runner are the operator's primary interaction — this
   is where Pass/Fail is recorded. They were 21px tall and stacked, so a gloved
   mis-tap selected the adjacent answer. The settings panel keeps a denser row
   because it is a desktop surface. */
.single-choice .radio-row,
.multi-choice .checkrow {
  min-height: 36px;
  align-items: center;
}
.checkrow {
  min-height: 28px;
}

/* ---------- Icon placeholders (CLS) ----------
   icon() emits <i data-lucide="name"></i>, which lucide later replaces with a
   sized <svg>. The placeholder has no box, so every icon on the page popped
   from 0 to its real size on first paint — one 0.149 layout shift per cold
   load, over the 0.1 CLS threshold. Reserving the identical box for the
   placeholder makes the swap size-neutral. These mirror the svg.lucide rules
   above; keep the two lists in step. */
i[data-lucide] {
  display: inline-block;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  vertical-align: -2px;
}
.module-tabs a i[data-lucide] { width: 14px; height: 14px; margin-right: 6px; }
.mobile-tabbar i[data-lucide] { width: 19px; height: 19px; }
.palette-ico i[data-lucide] { width: 13px; height: 13px; }
.screen-tab i[data-lucide], .canvas-row-label i[data-lucide] { width: 12px; height: 12px; }
.mobile-statusbar-icons i[data-lucide] { width: 12px; height: 12px; }

/* ---------- Topbar height reservation (CLS) ----------
   The shell renders with #pageTitle and #topbarActions empty, then fills them
   once the view resolves. The topbar grew from 57px to 65px+ and pushed
   #content down on every navigation — the single layout shift behind a 0.149
   CLS. Across every route the populated topbar is 53-65px at desktop widths,
   so reserving 65px absorbs the fill entirely. */
.topbar {
  min-height: 65px;
}

/* At phone width the topbar's action buttons wrapped onto three rows, taking
   the bar from 65px to ~200px once the view populated it — the remaining
   layout shift after reserving the desktop height. A single scrollable row
   keeps the bar a fixed height, and is easier to use one-handed than a
   three-row block that pushes the page down. */
@media (max-width: 720px) {
  .topbar {
    align-items: flex-start;
  }
  .topbar-actions {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
    padding-bottom: 2px;
  }
  .topbar-actions::-webkit-scrollbar { display: none; }
  .topbar-actions > * { flex: 0 0 auto; }
}

/* Offline sync indicator — only rendered when there is something to report. */
.sync-status {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.sync-status.offline {
  background: #fff4e5;
  color: #8a4b00;
  border-color: #f0c38a;
}
.sync-status.syncing {
  background: #e8f1fb;
  color: #14508c;
  border-color: #9cc2e8;
}
.sync-status.failed {
  background: #fdecec;
  color: #8f1d1d;
  border-color: #f0a8a8;
  cursor: pointer;
}
@media (max-width: 720px) {
  /* On a phone the topbar is already tight; the dot carries the state and the
     full sentence stays available to a screen reader. */
  .sync-status { font-size: 0; padding: 7px; }
  .sync-status::before {
    content: ''; display: block; width: 8px; height: 8px; border-radius: 50%;
    background: currentColor;
  }
}

/* Form version history + diff */
.version-list { display: flex; flex-direction: column; gap: 2px; }
.version-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.version-row:last-child { border-bottom: 0; }
.version-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.version-tag {
  font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--chip-bg, #eef1f5); border-radius: 5px; padding: 2px 8px; font-size: 12px;
}
.version-summary { font-weight: 600; }
.version-diff { margin: 10px 0 2px 10px; }
.diff-list { margin: 0; padding-left: 18px; }
.diff-list > li { margin-bottom: 6px; }
.diff-settings { margin: 4px 0 0; padding-left: 16px; font-size: 13px; }
.diff-settings li { color: var(--muted-2); margin-bottom: 2px; }
.diff-add, .diff-del, .diff-mod {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 1px 6px; border-radius: 4px; margin-right: 4px;
}
.diff-add { background: #e3f4e7; color: #1c6b31; }
.diff-del { background: #fae3e3; color: #8c2020; }
.diff-mod { background: #e8f1fb; color: #14508c; }
.diff-from { text-decoration: line-through; color: var(--muted-2); }
.diff-to { font-weight: 600; }

/* Review queue */
.row-overdue { background: #fff7f7; }
.chip-overdue { background: #fae3e3; color: #8c2020; border: 1px solid #e6b3b3; }
.chip-state-revision_requested { background: #fff4e5; color: #8a4b00; }
.chip-state-rejected { background: #fae3e3; color: #8c2020; }
.chip-state-superseded { background: #eceef1; color: #4a5260; }

/* ---- Native shell (Capacitor) -------------------------------------------
   `is-native` is set by initNativeShell() only inside the iOS/Android app, so
   none of this touches the browser build. The WebView runs edge to edge, which
   means the top bar sits under the notch and the tab bar under the home
   indicator unless we inset them ourselves. The web layout already pads the
   content and tab bar for safe areas; only the fixed top bar was missing it,
   because in a browser there is nothing above it. */
.is-native .topbar {
  padding-top: env(safe-area-inset-top);
  min-height: calc(65px + env(safe-area-inset-top));
}
.is-native .app-header { padding-top: env(safe-area-inset-top); }

/* Long-press on a WebView selects text and shows the magnifier, which on a
   form the operator is tapping through reads as a bug. Inputs keep selection. */
.is-native { -webkit-touch-callout: none; }
.is-native body { -webkit-user-select: none; user-select: none; }
.is-native input, .is-native textarea, .is-native [contenteditable] {
  -webkit-user-select: text; user-select: text;
}

/* Rubber-band scrolling past the end of a form exposes the WebView background
   below the app; pinning the background to the page colour hides the seam. */
.is-native, .is-native body { background: var(--bg); overscroll-behavior-y: none; }

/* The native capture button replaces the file input in the shell. Sized to the
   same 48px minimum as every other touch target in the app. */
.btn-photo-native {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; padding: 12px 18px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink);
  font: 600 15px/1 inherit; cursor: pointer;
}
.btn-photo-native:active { background: var(--accent-soft); }

/* ---- Collapsible field-settings sections --------------------------------
   The panel is long enough that moving between Identity and Output meant
   scrolling past everything in between. Sections start open, so the panel
   looks unchanged until somebody collapses one. */
.fs-group > .fs-group-summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 6px;
  padding: 12px 14px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  color: var(--brand-2); text-transform: uppercase;
  user-select: none;
}
.fs-group > .fs-group-summary::-webkit-details-marker { display: none; }
.fs-group > .fs-group-summary::before {
  content: '▸'; font-size: 11px; transition: transform .12s ease; flex-shrink: 0;
}
.fs-group[open] > .fs-group-summary::before { transform: rotate(90deg); }
.fs-group > .fs-group-summary:hover { background: var(--accent-soft); }
/* The summary is the section's whole hit target, so give it a real one. */
.fs-group > .fs-group-summary { min-height: 40px; }

/* A checkbox the panel has locked — shown for truth, not for editing. */
.checkrow.is-locked { opacity: 0.72; }
.checkrow.is-locked input { cursor: not-allowed; }

/* ===== Form builder fixes (Rolando, 2026-10-20) ========================== */

/* #38 — the Fields list stays put while a long canvas scrolls past it, and
   fills the height it has instead of stopping short. */
.builder-palette { position: sticky; top: 12px; align-self: start; max-height: calc(100vh - 24px); }
@media (max-width: 1560px) {
  body.has-preview-drawer .builder-palette { max-height: calc(100vh - 24px); }
}
@media (max-width: 900px) {
  .builder-palette { position: static; max-height: none; }
}
.palette-note { list-style: none; font-size: 11px; color: var(--muted); padding: 0 6px 4px 30px; margin-top: -2px; }

/* #39 — previous / next screen beside the screen name. */
.canvas-screen-nav { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.canvas-screen-nav .btn[disabled] { opacity: .35; cursor: default; }

/* #6, #15 — canvas tags. */
.chip-link { background: #eef2ff; color: #3730a3; }
.chip-section { background: #fdf2f8; color: #9d174d; }

/* Field Settings: options with points, "More options", formatting bar. */
.fs-options { display: flex; flex-direction: column; gap: 6px; }
.fs-option-row { display: flex; gap: 6px; align-items: center; }
.fs-option-row input:first-child { flex: 1 1 auto; min-width: 0; }
.fs-option-row input[type="number"] { width: 68px; flex: 0 0 68px; }
.fs-more { margin: 8px 0 4px; border: 1px dashed var(--line, var(--border)); border-radius: 6px; padding: 6px 10px; }
.fs-more > summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--ink-2, var(--ink)); }
.fs-more[open] > summary { margin-bottom: 8px; }
.rte { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.rte-bar { display: flex; gap: 2px; padding: 4px; border-bottom: 1px solid var(--border); background: var(--surface-2); border-radius: 6px 6px 0 0; }
.rte-bar button { border: 0; background: none; min-width: 28px; height: 26px; border-radius: 4px; cursor: pointer; font-size: 13px; color: var(--ink); }
.rte-bar button:hover { background: var(--surface); }
.rte-body { min-height: 90px; padding: 8px 10px; font-size: 13px; line-height: 1.5; outline: none; }
.rte-body:focus { box-shadow: inset 0 0 0 2px var(--brand-2); border-radius: 0 0 6px 6px; }
.rich-text ul, .rich-text ol, .rte-body ul, .rte-body ol { margin: 4px 0; padding-left: 22px; }
.rich-text p, .rte-body p { margin: 0 0 6px; }
.rich-text a, .rte-body a { color: var(--brand-2, #2563eb); text-decoration: underline; }

/* #16, #21 — "Out of range" / "Over time": a mark, never a block. */
.oor-notice { margin-top: 6px; padding: 5px 9px; border-radius: 6px; background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; font-size: 12px; font-weight: 600; }
.oor-notice[hidden] { display: none; }

/* #17 — choice styles. Inputs stay real and keyboard reachable; the label is
   the visible control. */
.choice-set { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-opt { position: relative; display: inline-flex; cursor: pointer; }
.choice-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-opt span, .choice-set > .choice-opt:not(:has(input)) { display: inline-flex; align-items: center; justify-content: center; }
.choice-bubbles .choice-opt span, .choice-bubbles > span.choice-opt { padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); font-weight: 600; font-size: 13px; }
.choice-bubbles .choice-opt input:checked + span { background: var(--ink, #111); color: #fff; border-color: var(--ink, #111); }
.choice-squares { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.choice-squares .choice-opt span, .choice-squares > span.choice-opt { min-height: 64px; width: 100%; padding: 8px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--surface); font-weight: 700; font-size: 13px; text-align: center; }
.choice-squares .choice-opt { display: flex; }
.choice-squares .choice-opt input:checked + span { border-color: var(--brand-2, #2563eb); background: #eff6ff; color: #1e3a8a; box-shadow: inset 0 0 0 1.5px var(--brand-2, #2563eb); }
.choice-glass { padding: 6px; border-radius: 14px; background: linear-gradient(135deg, rgba(243,161,194,.25), rgba(139,167,199,.25)); }
.choice-glass .choice-opt span, .choice-glass > span.choice-opt { padding: 10px 16px; border-radius: 12px; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 2px 8px rgba(17,24,39,.08); font-weight: 600; font-size: 13px; }
.choice-glass .choice-opt input:checked + span { background: rgba(17,24,39,.82); color: #fff; border-color: rgba(17,24,39,.9); }
.choice-opt input:focus-visible + span { outline: 2px solid var(--brand-2, #2563eb); outline-offset: 2px; }
.choice-opt input:disabled + span { opacity: .6; cursor: not-allowed; }
.choice-dropdown { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.choice-dropdown > summary { padding: 9px 12px; cursor: pointer; list-style: none; }
.choice-dropdown > summary::after { content: "▾"; float: right; color: var(--muted); }
.choice-dropdown-list { padding: 4px 12px 8px; border-top: 1px solid var(--border); }

/* #20 — timer. */
.timer-field .timer-readout { font-family: var(--mono); font-size: 26px; font-weight: 700; letter-spacing: .02em; }
.timer-field .timer-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.timer-field .timer-actions .btn { min-width: 84px; justify-content: center; }

/* #8–#15 — sections: instructions, folding, the record. */
.section-instructions { font-size: 12.5px; color: var(--muted); margin-top: 4px; white-space: pre-line; }
.section-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; color: inherit; }
.section-toggle h3 { margin: 0; }
.section-chevron { color: var(--muted); font-size: 14px; }
.section-body.is-collapsed { display: none; }
.rec-section td { background: var(--surface-2); padding-top: 10px !important; }
@media print { .rec-section td { background: #f3f4f6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Ledger fixes (2026-10-20) — CA record sections and the company lists page. */
.ledger-section { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 10px; }
.ledger-section-title { font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.list-row { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.list-row input[data-label] { flex: 1 1 220px; min-width: 0; }
.cab-extras { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.cab-extras[hidden], [data-cab-cant][hidden], [data-cab-correct][hidden], [data-cab-ctype-note][hidden] { display: none; }