*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* ── Design system (Orqestra) ─────────────────────
   Layered near-black surfaces, hairline white-alpha
   borders, teal accent, Inter + JetBrains Mono.
   Dark is the source of truth; `:root[data-theme="light"]`
   below remaps every token to the light palette from the
   "-Light-" handoff mockups (same screens, color map only).
   Rules: never hard-code a surface/text/border color —
   use a token, and use `rgba(var(--x-rgb), a)` for tints.   */
:root {
  color-scheme: dark;
  --bg:          #0C0E14;
  --sidebar-bg:  #0A0C11;   /* sidebar rail                   */
  --surface:     #0F131B;   /* panels, sidebar, cards         */
  --surface-2:   #12161F;   /* inputs, hover                  */
  --surface-3:   #161B25;   /* raised chips, popovers         */
  --surface-4:   #1C2130;   /* menu-item hover                */
  --row-hover:   #11151D;   /* table row hover                */
  --row-sel:     #131822;   /* selected board row             */
  --map-bg:      #0E1219;   /* leaflet container behind tiles */
  --glass:       rgba(10,13,20,.9);   /* translucent map overlays */
  --overlay:     rgba(4,6,10,.6);     /* modal / drawer scrim     */
  --shadow-rgb:  0,0,0;
  --shadow-k:    1;         /* shadow alpha multiplier        */
  --blue2:       #5B7BEF;   /* provider identity #2           */
  --blue2-rgb:   91,123,239;
  --purple:      #B48BFF;   /* provider identity #3           */
  --purple-rgb:  180,139,255;
  --indigo:      #8891F0;   /* settings overrides (planner settings v2) */
  --indigo-rgb:  136,145,240;
  --indigo-soft: #A3AAF5;   /* indigo as text on tints        */
  --border-soft: rgba(255,255,255,.045);
  --border:      rgba(255,255,255,.06);
  --border-2:    rgba(255,255,255,.10);
  --border-3:    rgba(255,255,255,.16);
  --border-4:    rgba(255,255,255,.22);
  --text:        #F0F4FF;
  --text-soft:   #D4DCEC;
  --text-muted:  #A8B4CC;
  --text-mid:    #8895AC;
  --text-dim:    #5A6880;
  --text-low:    #4B5872;
  --text-quiet:  #3A4458;
  --text-faint:  #2E3A50;
  --accent:      #00D4AA;   /* teal                           */
  --accent-rgb:  0,212,170;
  --accent-hover:#19E0BA;
  --accent-bg:   rgba(0,212,170,.12);
  --accent-bg-2: rgba(0,212,170,.06);
  --accent-ink:  #0C0E14;   /* text on teal                   */
  --teal-2:      #4CE3C4;   /* dropped / done status          */
  --danger:      #FF4466;
  --danger-rgb:  255,68,102;
  --danger-soft: #FF7D93;   /* danger as text on dark tints   */
  --danger-bg:   rgba(255,68,102,.12);
  --amber:       #F0A020;
  --amber-rgb:   240,160,32;
  --health-good: #5FD4A8;   /* health ladder: Good (80–89)   */
  --health-good-rgb: 95,212,168;
  --health-watch: #F0763A;  /* health ladder: Watch (55–69)  */
  --health-watch-rgb: 240,118,58;
  --amber-soft:  #FFC94D;
  --amber-bg:    rgba(240,160,32,.10);
  --blue:        #4488FF;
  --blue-rgb:    68,136,255;
  --blue-bg:     rgba(68,136,255,.12);
  --sky:         #38C5F0;   /* accepted / routed              */
  --sky-2:       #76D3EA;   /* dropped                        */
  --sky-3:       #64B5F6;   /* arrived · drop                 */
  --green:       #3FCF8E;
  --green-rgb:   63,207,142;
  --done:        #5CC458;   /* Completed status dot (dispatch review 20 Oct, T20 / mock 1c) */
  --done-rgb:    92,196,88;
  --success:     #00D4AA;
  --success-bg:  rgba(0,212,170,.10);
  --radius:      8px;
  --sidebar:     228px;
  --fn:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --fm:          'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Light mode — palette from the "-Light-" handoff mockups:
   bg #F7F8FA, surfaces #F0F2F5 / #ECEFF3 / #E7EAF0, hover #DFE3EA, ink #0A1628,
   text #3C4757 / #5B6472 / #8A94A6 / #9AA3B2, borders rgba(10,22,40,.06–.12),
   teal #009478 (bright #00A98A), blue #3D5CD6, violet #7C4FD6, red #D92546,
   amber #B26B00. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:          #F7F8FA;
  --sidebar-bg:  #F1F3F6;
  --surface:     #F0F2F5;
  --surface-2:   #ECEFF3;
  --surface-3:   #E7EAF0;
  --surface-4:   #DFE3EA;
  --row-hover:   #ECEFF3;
  --row-sel:     #E7EAF0;
  --map-bg:      #E7EAF0;
  --glass:       rgba(247,248,250,.92);
  --overlay:     rgba(10,22,40,.35);
  --shadow-rgb:  16,24,40;
  --shadow-k:    .3;
  --blue2:       #3D5CD6;
  --blue2-rgb:   61,92,214;
  --purple:      #7C4FD6;
  --purple-rgb:  124,79,214;
  --indigo:      #5560CC;
  --indigo-rgb:  85,96,204;
  --indigo-soft: #4E57C0;
  --border-soft: rgba(10,22,40,.05);
  --border:      rgba(10,22,40,.07);
  --border-2:    rgba(10,22,40,.12);
  --border-3:    rgba(10,22,40,.18);
  --border-4:    rgba(10,22,40,.28);
  --text:        #0A1628;
  --text-soft:   #3C4757;
  --text-muted:  #4C5769;
  --text-mid:    #5B6472;
  --text-dim:    #8A94A6;
  --text-low:    #9AA3B2;
  --text-quiet:  #C0C7D2;
  --text-faint:  #D3D8E1;
  --accent:      #009478;
  --accent-rgb:  0,148,120;
  --accent-hover:#00A98A;
  --accent-bg:   rgba(0,148,120,.10);
  --accent-bg-2: rgba(0,148,120,.06);
  --accent-ink:  #FFFFFF;
  --teal-2:      #00A98A;
  --danger:      #D92546;
  --danger-rgb:  217,37,70;
  --danger-soft: #B01E40;
  --danger-bg:   rgba(217,37,70,.09);
  --amber:       #B26B00;
  --amber-rgb:   178,107,0;
  --health-good: #3DAA83;
  --health-good-rgb: 61,170,131;
  --health-watch: #C9481F;
  --health-watch-rgb: 201,72,31;
  --amber-soft:  #B26B00;
  --amber-bg:    rgba(178,107,0,.09);
  --blue:        #3355C0;
  --blue-rgb:    51,85,192;
  --blue-bg:     rgba(51,85,192,.10);
  --sky:         #0E7FA8;
  --sky-2:       #0E7FA8;
  --sky-3:       #2C6FB5;
  --green:       #1E9E5A;
  --green-rgb:   30,158,90;
  --done:        #3E9B3A;
  --done-rgb:    62,155,58;
  --success:     #009478;
  --success-bg:  rgba(0,148,120,.09);
}

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font: 13px/1.5 var(--fn);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ── Brand mark ───────────────────────────────── */
/* d2 logo: bare ring + blue satellite dot, no container box. */
.brand-mark {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.brand-mark svg { width: 24px; height: 24px; }

/* ── Login ────────────────────────────────────── */
#login-view {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  height: 100dvh;
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 40px 36px;
  width: 360px;
  box-shadow: 0 16px 48px rgba(var(--shadow-rgb),calc(.5*var(--shadow-k)));
}

.login-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.4px;
  margin-bottom: 28px;
}

/* OTP countdown: draining bar + mm:ss until the emailed code expires. */
.otp-expiry { margin-bottom: 14px; }
.otp-expiry-bar {
  height: 3px;
  border-radius: 2px;
  background: var(--surface-3);
  overflow: hidden;
  margin-bottom: 6px;
}
#otp-expiry-fill {
  height: 100%;
  width: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 1s linear;
}
#otp-expiry-text { font-size: 11px; color: var(--text-dim); }
.otp-expiry.warn #otp-expiry-fill { background: var(--amber); }
.otp-expiry.warn #otp-expiry-text { color: var(--amber); }
.otp-expiry.expired #otp-expiry-text { color: var(--danger); }

.login-legal {
  margin-top: 20px;
  text-align: center;
  font-size: 11px;
}
.login-legal a {
  color: var(--text-dim);
  text-decoration: none;
  transition: color .12s;
}
.login-legal a:hover { color: var(--text-muted); text-decoration: underline; }

/* ── App shell ────────────────────────────────── */
#app-view {
  display: flex;
  height: 100vh;
  /* Mobile browsers (e.g. Brave on Android/DeX) count URL-bar chrome into
     100vh, pushing the sidebar footer off-screen; dvh tracks what's visible. */
  height: 100dvh;
}

/* ── Sidebar navigation ───────────────────────── */
#sidebar {
  width: 202px;   /* d2 sidebar */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  padding: 14px 10px;
  overflow: hidden;
  transition: width .16s ease, padding .16s ease;
}
#sidebar.collapsed {
  width: 60px;
  padding: 14px 8px;
}

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px 16px;
}
#sidebar.collapsed .sidebar-head { justify-content: center; padding: 4px 0 16px; }

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex-shrink: 0;
}
.topbar-brand-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.3px;
  white-space: nowrap;
}

/* Rail collapse / expand buttons */
.rail-btn {
  width: 26px; height: 26px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--border-2);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: color .12s, background .12s;
}
.rail-btn:hover { color: var(--text); background: var(--surface-2); }
.rail-btn svg { width: 14px; height: 14px; }

/* Hide labels/text when collapsed */
#sidebar.collapsed .topbar-brand-name,
#sidebar.collapsed .nav-text,
#sidebar.collapsed .nav-label,
#sidebar.collapsed #sidebar-collapse,
#sidebar.collapsed .current-user { display: none; }

/* Nav */
.sidebar-nav {
  flex: 1;
  /* Allow shrinking below content height so the nav scrolls in short windows
     instead of pushing the user/logout row out of the clipped sidebar. */
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  margin: 0 -4px;
  padding: 0 4px;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

.nav-group { margin-top: 9px; }
.nav-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-quiet);
  padding: 5px 10px 5px;
  white-space: nowrap;
}
/* d2: section labels become hairline dividers on the collapsed rail. */
#sidebar.collapsed .nav-group { margin: 0; }
#sidebar.collapsed .nav-group::before {
  content: '';
  display: block;
  height: 1px;
  background: var(--border);
  margin: 9px 6px;
}

.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  margin-bottom: 1px;
  border-radius: 7px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: -.08px;
  white-space: nowrap;
  transition: color .12s, background .12s;
}
#sidebar.collapsed .nav-link { justify-content: center; padding: 9px; }
.nav-link:hover  { color: var(--text); background: var(--surface-3); }
.nav-link.active {
  color: var(--text);
  font-weight: 500;
  background: var(--surface-3);
  box-shadow: inset 2px 0 0 var(--accent);
}
.nav-link svg        { flex-shrink: 0; opacity: .8; }
.nav-link.active svg { opacity: 1; }

/* Timezone picker (sidebar footer) — searchable combobox, opens upward. */
.sidebar-tz { position: relative; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.sidebar-tz .nav-label { margin: 0; padding: 0 2px 5px; }
.sidebar-tz input {
  width: 100%;
  font-size: 12px;
  padding: 5px 8px;
  color: var(--text-muted);
}
.sidebar-tz input:focus { color: var(--text); }
/* Opens upward. Must out-rank .tag-dropdown's own `top` (defined later in
   this file, same specificity) or the box gets both top and bottom and
   collapses to zero height. */
.sidebar-tz .tag-dropdown { top: auto; bottom: calc(100% + 2px); max-height: 260px; }
.tz-offset { float: right; color: var(--text-dim); font-size: 11px; margin-left: 8px; }
.tag-option.tz-active { color: var(--accent); }

/* Account row (sidebar footer) — the whole row opens #user-menu (u1 mockup). */
.sidebar-user {
  margin-top: 8px;
  padding: 8px 4px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  border-radius: 8px;
  transition: background .12s;
}
.sidebar-user:hover { background: var(--surface-2); }
#sidebar.collapsed .sidebar-user { justify-content: center; padding: 8px 0; }
#sidebar.collapsed .sidebar-user .user-caret { display: none; }
.user-caret { flex-shrink: 0; color: var(--text-dim); }

.user-avatar {
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase;
}

.current-user {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}
.current-user-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.current-user-email {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "not in view": a list filter whose account / provider sits outside the
   global site scope keeps its value but returns no rows. */
.filter-hint {
  align-self: center;
  margin-left: -4px;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--amber-bg, rgba(var(--accent-rgb), .12));
  color: var(--amber, var(--accent));
  font: 600 10.5px var(--fm);
  white-space: nowrap;
}

/* Global site scope picker (sidebar header; site-scope spec 23 Sep 2026).
   Expanded rail: a quiet select-like button under the brand. Collapsed rail:
   a 36×36 pin with a teal count badge (hidden when viewing all). */
.site-scope {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  margin: -6px 0 10px;
  padding: 6px 9px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font: 500 12.5px var(--fn);
  text-align: left;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.site-scope:hover, .site-scope[aria-expanded="true"] { background: var(--surface-2); border-color: var(--border-2); }
.site-scope.static { cursor: default; }
.site-scope.static:hover { background: transparent; border-color: var(--border); }
.site-scope-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-scope-chevron { width: 12px; height: 12px; flex-shrink: 0; color: var(--text-dim); }
.site-scope.static .site-scope-chevron { display: none; }
.site-scope-pin { display: none; width: 15px; height: 15px; }
.site-scope-badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px;
  background: var(--accent); color: var(--accent-ink);
  border: 2px solid var(--sidebar-bg);
  font: 600 10px var(--fm);
  display: flex; align-items: center; justify-content: center;
}
.site-scope-badge[hidden] { display: none; }
#sidebar:not(.collapsed) .site-scope-badge { display: none; }   /* the label already says it */
#sidebar.collapsed .site-scope {
  width: 36px; height: 36px; padding: 0;
  margin: 0 auto 10px;
  justify-content: center;
  border-radius: 8px;
  color: var(--text-mid);
}
#sidebar.collapsed .site-scope-label, #sidebar.collapsed .site-scope-chevron { display: none; }
#sidebar.collapsed .site-scope-pin { display: block; }

.site-scope-backdrop { position: fixed; inset: 0; z-index: 90; }
.site-scope-card {
  position: fixed; z-index: 91;
  width: 220px;
  display: flex; flex-direction: column; gap: 1px;
  overflow: hidden;
  padding: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(var(--shadow-rgb), calc(.6 * var(--shadow-k)));
  font-family: var(--fn);
}
.ss-row {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 7px 9px;
  border: none; border-radius: 6px;
  background: transparent; color: var(--text);
  font: 12.5px var(--fn); text-align: left;
  cursor: pointer;
}
.ss-row:hover { background: var(--surface-4); }
.ss-row.strong { font-weight: 500; }
.ss-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-check {
  width: 15px; height: 15px; flex-shrink: 0;
  border-radius: 4px; border: 1.5px solid var(--border-4);
  display: flex; align-items: center; justify-content: center;
}
.ss-check.on { border-color: var(--accent); background: var(--accent); }
.ss-sep { height: 1px; background: var(--border); margin: 3px 4px; flex-shrink: 0; }
.ss-list { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; min-height: 0; max-height: 280px; }
.ss-search {
  width: 100%; box-sizing: border-box;
  margin: 2px 0 4px; padding: 6px 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font: 12px var(--fn); outline: none;
}
.ss-empty { padding: 8px 9px; font-size: 12px; color: var(--text-dim); }
.ss-default {
  padding: 6px 9px;
  border: none; border-radius: 6px; background: none;
  color: var(--accent); font: 11.5px var(--fn); text-align: left;
  cursor: pointer;
}
.ss-default:hover { background: var(--surface-4); }
.ss-default:disabled { color: var(--text-dim); cursor: default; background: none; }

/* Account menu popover: fixed over the rail footer, panels swap in one card. */
.user-menu-backdrop { position: fixed; inset: 0; z-index: 90; }
.user-menu-card {
  position: fixed;
  left: 10px;
  bottom: 56px;
  z-index: 91;
  width: 226px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 11px;
  box-shadow: 0 16px 40px rgba(var(--shadow-rgb), calc(.6 * var(--shadow-k)));
  padding: 6px;
  font-family: var(--fn);
}
.user-menu-head {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 9px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.user-menu-head .user-avatar { width: 28px; height: 28px; }
.user-menu-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 9px;
  font-size: 12px;
  color: var(--text-muted);
}
.user-menu-seg {
  display: flex; gap: 2px;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: 7px;
  padding: 2px;
}
.user-menu-seg button {
  padding: 3px 10px;
  border: 0; border-radius: 5px;
  background: none;
  color: var(--text-mid);
  font: 600 11.5px var(--fn);
  cursor: pointer;
}
.user-menu-seg button:hover { color: var(--text); }
.user-menu-seg button.on { background: var(--surface-4); color: var(--text); cursor: default; }
.user-menu-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: 0; border-radius: 7px;
  background: none;
  font: 12.5px var(--fn);
  color: var(--text-soft);
  text-align: left;
  cursor: pointer;
}
.user-menu-item svg { color: var(--text-mid); flex-shrink: 0; }
.user-menu-item:hover { background: var(--surface-3); }
.user-menu-item.danger { color: var(--danger-soft); }
.user-menu-item.danger svg { color: currentColor; }
.user-menu-item.danger:hover { background: rgba(var(--danger-rgb), .09); }
.user-menu-sep { height: 1px; background: var(--border); margin: 6px 0; }
.user-menu-back {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 7px 9px 9px;
  border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  margin-bottom: 6px;
  background: none;
  font: 600 12px var(--fn);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.user-menu-back svg { color: var(--text-dim); }
/* Display time zone lives in the Preferences panel now (was the rail footer). */
.user-menu-card .sidebar-tz { margin: 0; padding: 4px 9px 6px; border: 0; }
.user-menu-card .sidebar-tz .nav-label { padding: 0 0 5px; }
.user-menu-card .sidebar-tz .tag-dropdown { left: 9px; right: 9px; }
.user-menu-keys { display: flex; flex-direction: column; gap: 1px; padding: 0 2px 4px; }
.user-menu-keys > div {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 7px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.user-menu-keys kbd {
  font: 10.5px var(--fm);
  color: var(--text-dim);
  border: 1px solid var(--border-2);
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
}

/* ── Main column ──────────────────────────────── */
.main-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* the record form (#modal-overlay) takes over this column, not the viewport */
  position: relative;
}

#topbar {
  height: 54px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.page-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.2px;
  color: var(--text);
}

/* ── Main content ─────────────────────────────── */
#page-content {
  flex: 1;
  overflow-y: auto;
  padding: 30px 32px;
  background: var(--bg);
}
#page-content::-webkit-scrollbar { width: 3px; }
#page-content::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 2px; }

/* ── Home dashboard ───────────────────────────── */
/* On very wide screens, condense to 75% (centered) rather than
   stretching the full content width. */
.dash { margin-inline: auto; }
@media (min-width: 1500px) { .dash { width: 75%; max-width: 1700px; } }

.dash-greeting { margin-bottom: 24px; }
.dash-greeting-label {
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 6px;
}
.dash-greeting-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
}
.dash-greeting-text span { color: var(--accent); }

/* Hero: greeting beside the Network Health summary. */
.dash-hero {
  display: flex;
  gap: 12px;
  align-items: stretch;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.dash-hero .dash-greeting { flex: 1 1 260px; margin-bottom: 0; align-self: center; }

.dash-health {
  flex: 0 0 300px;
  align-self: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
@media (max-width: 880px) { .dash-health { flex-basis: 100%; } }

.hs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.hs-row:last-child { margin-bottom: 0; }
.hs-label { font-size: 12.5px; color: var(--text-muted); }
.hs-val {
  font-family: var(--fm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.dash-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.dash-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .dash-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .dash-grid, .dash-grid-3 { grid-template-columns: 1fr; } }

.dash-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  transition: border-color .15s;
}
.dash-card:hover { border-color: var(--border-2); }
.dash-card.hi { border-color: rgba(var(--accent-rgb),.25); background: var(--accent-bg-2); }
.dash-card.ri { border-color: rgba(var(--danger-rgb),.25); background: var(--danger-bg); }
.dash-card.wa { border-color: rgba(var(--amber-rgb),.25); background: var(--amber-bg); }
.dash-card.bl { border-color: rgba(var(--blue-rgb),.25); background: var(--blue-bg); }

.dash-card-label {
  font-family: var(--fm);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 10px;
}
.dash-card.hi .dash-card-label { color: rgba(var(--accent-rgb),.6); }
.dash-card.ri .dash-card-label { color: rgba(var(--danger-rgb),.6); }
.dash-card.wa .dash-card-label { color: rgba(var(--amber-rgb),.6); }
.dash-card.bl .dash-card-label { color: rgba(var(--blue-rgb),.6); }

.dash-card-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -1.2px;
  line-height: 1;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.dash-card.hi .dash-card-value { color: var(--accent); }
.dash-card.ri .dash-card-value { color: var(--danger); }
.dash-card.wa .dash-card-value { color: var(--amber); }
.dash-card.bl .dash-card-value { color: var(--blue); }

.dash-card-sub {
  font-size: 12px;
  color: var(--text-dim);
  min-height: 15px;
}

/* Thin accent strip along the bottom of a card. */
.dash-card-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }

.dash-section-title {
  font-family: var(--fm);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .9px;
  margin: 26px 0 12px;
}

.dash-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
}

.dash-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}
@media (max-width: 880px) { .dash-split { grid-template-columns: 1fr; } }

.dash-panel-title {
  font-family: var(--fm);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .9px;
  margin-bottom: 18px;
}

/* Full-width progress bars (orq .prog style). */
.dash-progs { display: flex; flex-direction: column; gap: 16px; }
.dash-prog-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.dash-prog-l { font-size: 13px; color: var(--text-muted); }
.dash-prog-v { font-family: var(--fm); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-prog-track { height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.dash-prog-fill { height: 100%; border-radius: 3px; transition: width .5s ease; }

.dash-bars { display: flex; flex-direction: column; gap: 12px; }
.dash-bars-empty { color: var(--text-dim); font-size: 13px; }

/* Recent activity feed (orq decision-log style). */
.dash-feed { display: flex; flex-direction: column; }
.feed-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.feed-item:first-child { padding-top: 0; }
.feed-item:last-child { border-bottom: none; padding-bottom: 0; }
.feed-item .badge { margin-top: 1px; flex-shrink: 0; }
.feed-main { min-width: 0; }
.feed-body { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.feed-ts { font-family: var(--fm); font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }

.dash-bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 52px;
  align-items: center;
  gap: 12px;
}
.dash-bar-label { font-size: 12.5px; color: var(--text-muted); }
.dash-bar-track { height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.dash-bar-fill { height: 100%; border-radius: 3px; transition: width .4s ease; }
.dash-bar-val {
  font-family: var(--fm);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Page header ──────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
/* The create/invite button lives at the right end of the filters row. */
.toolbar .toolbar-new { margin-left: auto; }

/* Ask Orqi badge (sparkle + gradient label), shared by the analytics input
   and the list pages' free-language filter. */
.ask-orqi-badge { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Free-language list filter — same Ask Orqi design as the command center,
   living in the shared topbar on the page-title row, centered in the space
   right of the page title (auto margins on both sides). */
.list-ask {
  flex: 1;
  max-width: 520px;
  margin: 0 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(180deg, rgba(var(--blue2-rgb),.13), rgba(var(--accent-rgb),.09));
  border: 1px solid rgba(var(--accent-rgb),.26);
  border-radius: 9px;
  padding: 7px 12px;
  cursor: text;
}
.list-ask:hover { border-color: rgba(var(--accent-rgb),.6); }
.list-ask:focus-within { border-color: rgba(var(--accent-rgb),.7); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.1), 0 0 20px rgba(var(--accent-rgb),.16); }
.list-ask input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  font: 600 13px var(--fn);
  color: var(--text);
}
.list-ask input::placeholder { color: var(--text-dim); font-weight: 500; }
.list-ask-status {
  flex-shrink: 0;
  font: 11.5px var(--fn);
  color: var(--text-dim);
  white-space: nowrap;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Orqi is working — an unmissable "computing" state on the box itself:
   the border/glow pulses through the brand gradient colors and the sparkle
   spins. Toggled via .thinking by every Ask Orqi flow (routing included). */
.list-ask.thinking, .cc-ask.thinking { animation: orqi-think 1.1s ease-in-out infinite; }
.list-ask.thinking .cc-ask-spark, .cc-ask.thinking .cc-ask-spark { animation: orqi-spin 1s linear infinite; }
.list-ask.thinking .list-ask-status { color: var(--accent); }
@keyframes orqi-think {
  0%, 100% { border-color: rgba(var(--accent-rgb),.95); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.12), 0 0 24px rgba(var(--accent-rgb),.3); }
  50%      { border-color: rgba(var(--blue-rgb),.95); box-shadow: 0 0 0 5px rgba(var(--blue-rgb),.12), 0 0 30px rgba(var(--blue-rgb),.35); }
}
@keyframes orqi-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .list-ask.thinking, .cc-ask.thinking {
    animation: none;
    border-color: rgba(var(--accent-rgb),.95);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.12), 0 0 24px rgba(var(--accent-rgb),.3);
  }
  .list-ask.thinking .cc-ask-spark, .cc-ask.thinking .cc-ask-spark { animation: none; }
}

.page-title { font-size: 20px; font-weight: 700; letter-spacing: -.5px; }

/* ── List header (drivers-pattern, all entity list pages) ───────────── */
.list-headrow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  row-gap: 10px;
}
.list-search {
  display: flex; align-items: center; gap: 7px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 9px;
  padding: 0 10px;
  width: 148px; height: 32px;
  flex-shrink: 0;
}
.list-search input {
  background: none; border: none; outline: none;
  color: var(--text); font-size: 12.5px;
  width: 100%; min-width: 0;
  padding: 0; height: 100%;   /* QA 19 Oct #6: not the global input padding — text on the 32 px centre line */
}
/* Search fields (Dispatch review 20 Oct T9): one shared focus style for every
   search box in the app — no outline, no ring; only the border colour changes.
   Boxed searches (a frame with an icon + bare input) change the frame's border;
   bare search inputs (popover filters, site picker…) change their own. */
input[placeholder^="Search"]:focus, :is(.list-search, .shf-search, .ig-search, .nt-search, .imp-hsearch, .clc-searchbox, .tag-input) input:focus { outline: none; box-shadow: none; }
input[placeholder^="Search"]:focus, :is(.list-search, .shf-search, .ig-search, .nt-search, .imp-hsearch, .clc-searchbox, .tag-input):focus-within { border-color: rgba(var(--accent-rgb),.45); box-shadow: none; outline: none; }

/* ── Toolbar ──────────────────────────────────── */
.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  /* Filter-heavy pages (trips) outgrow one line — controls flow onto more
     rows instead of overflowing or squeezing. */
  flex-wrap: wrap;
  row-gap: 8px;
}

/* ── Table (drivers-pattern look: no card — hairline rows on the page
   background, low-contrast sentence-case headers) ─────────────────── */
.table-wrap {
  border-top: 1px solid var(--border);
  overflow-x: auto;
  background: transparent;
}

table { width: 100%; border-collapse: collapse; }

thead { background: transparent; }

th {
  padding: 10px 16px;
  text-align: left;
  font-family: var(--fn);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-size: 12.5px;
  /* top-align so multi-line cells (settings list editor, attribute chips)
     don't float their neighbors to the middle of a tall row */
  vertical-align: top;
}

tbody tr { background: transparent; transition: background .08s; }
tbody tr:hover { background: var(--row-hover); }
tr.row-clickable { cursor: pointer; }

.col-id { width: 56px; color: var(--text-dim); font-family: var(--fm); font-size: 12px; }
.col-cb { width: 40px; }

/* ── Buttons ──────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--fn);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, opacity .12s, color .12s;
}

.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-danger  {
  background: transparent;
  color: var(--danger);
  border-color: transparent;
}
.btn-danger:hover:not(:disabled) { background: var(--danger-bg); }

.btn-ghost {
  background: var(--surface-2);
  color: var(--text-muted);
  border-color: var(--border-2);
}
.btn-ghost:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }

.btn-sm  { padding: 5px 11px; font-size: 12px; }
.btn-full { width: 100%; justify-content: center; }

/* Space stacked full-width buttons in the login card. */
#login-view .btn-full + .btn-full { margin-top: 10px; }

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: none;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text-dim);
  transition: background .12s, color .12s;
}
.btn-icon:hover { background: var(--surface-2); color: var(--text); }

/* Theme toggle: sun shown in dark mode (→ light), moon in light mode (→ dark). */
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
.login-card { position: relative; }
.login-theme-toggle { position: absolute; top: 14px; right: 14px; }

/* ── Forms ────────────────────────────────────── */
.field { margin-bottom: 14px; }

.field:last-child { margin-bottom: 0; }

label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* Password inputs with an inline show/hide eye toggle. */
.password-wrap { position: relative; }
.password-wrap input { padding-right: 38px; }
.password-toggle {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  transition: color .12s;
}
.password-toggle:hover { color: var(--text); }
.password-toggle svg { width: 16px; height: 16px; }
.password-toggle .eye-off { display: none; }
.password-toggle[aria-pressed="true"] .eye { display: none; }
.password-toggle[aria-pressed="true"] .eye-off { display: block; }

/* Checkbox fields put the input inside the label, side by side. */
.checkbox-label { display: flex; align-items: center; gap: 8px; margin-bottom: 0; cursor: pointer; }
.checkbox-label input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--accent); }

input, select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  color: var(--text);
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

input::placeholder { color: var(--text-dim); }
input:focus, select:focus {
  border-color: rgba(var(--accent-rgb),.35);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.06);
}
select option { background: var(--surface-2); }
input[type="checkbox"] { width: auto; accent-color: var(--accent); cursor: pointer; }

/* Inline on/off switch (settings list Value column). */
.switch { display: inline-flex; align-items: center; margin: 0; cursor: pointer; vertical-align: middle; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  width: 34px;
  height: 18px;
  border-radius: 9px;
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  position: relative;
  transition: background .15s, border-color .15s;
}
.switch-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: left .15s, background .15s;
}
.switch input:checked + .switch-track { background: rgba(var(--accent-rgb), .25); border-color: var(--accent); }
.switch input:checked + .switch-track::after { left: 18px; background: var(--accent); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12); }

/* Inline value inputs (settings list Value column). */
.setting-input { max-width: 260px; padding: 4px 10px; font-size: 12.5px; }
.setting-input.setting-num { max-width: 110px; text-align: right; }
.setting-input.invalid, .setting-input.invalid:focus { border-color: var(--danger); box-shadow: none; }

/* Stacked string-list editor (settings list Value column + setting form). */
.strlist { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.strlist-row { display: flex; align-items: center; gap: 4px; width: 100%; max-width: 260px; }
.strlist-row input { flex: 1; min-width: 0; padding: 4px 10px; font-size: 12.5px; }
.strlist-remove {
  flex: none; background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 15px; line-height: 1; padding: 2px 4px;
}
.strlist-remove:hover { color: var(--danger); }
.strlist .strlist-add { align-self: flex-start; }

/* Setting form Value field: kind picker + the matching control. */
.sv-body { display: flex; gap: 8px; align-items: flex-start; }
.sv-body .sv-kind-select { width: 110px; flex: none; }
.sv-control { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.sv-control .switch { min-height: 34px; }
.sv-control .strlist-row { max-width: none; }

input[type="search"] {
  max-width: 280px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A6880' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
  padding-left: 32px;
}

/* ── Modal ────────────────────────────────────── */
/* ── Record form (was a floating modal): a full center-view surface in the
   drivers-record pattern — opaque, no dim, cards + pinned save bar. ──────── */
#modal-overlay {
  position: absolute;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  /* Above the live map page: Leaflet panes (200-1000) and .live-panel (800)
     share the root stacking context, so anything lower renders under the map. */
  z-index: 1100;
}

.modal {
  background: var(--bg);
  border: none;
  border-radius: 0;
  width: 100%;
  max-width: none;
  max-height: none;
  display: flex;
  flex-direction: column;
  box-shadow: none;
}

.modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px 14px;
  border-bottom: 1px solid var(--border);
  flex-direction: row-reverse;      /* the X reads as a back control, leading */
  justify-content: flex-end;
}
/* Ask Orqi pill in the form header (row-reverse: margin-left pushes it to the
   visual right). Clicking it returns to the list with its ask box focused. */
.modal-header #modal-ask { width: auto; padding: 6px 11px; margin-left: auto; flex: none; }

.modal-header .btn-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  border: 1px solid var(--border-2);
}

.modal-header h2 { font-size: 19px; font-weight: 600; letter-spacing: -.3px; }

.modal-body { padding: 22px 30px 30px; overflow-y: auto; flex: 1; }

/* The generated form sits in a driver-record-style card. */
#modal-form {
  max-width: 720px;
  margin-inline: auto;   /* full-width center view, card centered in it */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-content: start;
}
#modal-form .field { margin-bottom: 0; }
/* Wide widgets keep the full row: tag pickers, free text, nested editors. */
#modal-form .field:has(textarea, .tag-input, .kpi-rows),
#modal-form .field[data-setting-value],
#modal-form .field[data-kpi-editor],
#modal-form .field[data-trip-jobs],
#modal-form .field:only-child { grid-column: 1 / -1; }

/* Wide variant with a map pane beside the form */
.modal-body-map { display: flex; gap: 18px; align-items: stretch; flex-wrap: wrap; }
.modal-body-map #modal-form { flex: 0 0 560px; min-width: 0; margin-inline: 0; }

/* Full-width stops row beneath the form + map pair (moved there by
   setupFormMap for trips). Wide plans scroll inside the row, not the page. */
.trip-plan-row { flex: 1 1 100%; min-width: 0; }
.trip-plan-row .table-wrap { overflow-x: auto; }
.modal-map {
  flex: 1;
  min-height: 420px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}
.modal-map .leaflet-container { width: 100%; height: 100%; background: var(--surface-2); }

/* Polygon editor */
.poly-vtx {
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(var(--shadow-rgb),calc(.35*var(--shadow-k)));
  cursor: move;
}
.polygon-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.polygon-count { font-size: 12px; color: var(--text-dim); }
.polygon-help  { margin: 6px 0 0; font-size: 11px; color: var(--text-dim); line-height: 1.4; }
.btn.btn-sm { padding: 5px 11px; font-size: 12px; }

/* Text input with an inline action button (e.g. geocode "Search") */
.input-with-btn { display: flex; gap: 8px; align-items: stretch; }
.input-with-btn input { flex: 1; min-width: 0; }
.input-with-btn .btn { flex: 0 0 auto; white-space: nowrap; }

/* Pinned save bar, like the driver record's. */
.modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
  padding: 13px 30px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

/* ── Badges ───────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.badge-admin  { background: var(--blue-bg); color: var(--blue); }
.badge-viewer { background: var(--surface-3); color: var(--text-dim); }
.badge-agent  { background: var(--amber-bg); color: var(--amber); }
.badge-prio-high   { background: var(--danger-bg); color: var(--danger); }
.badge-prio-normal { background: var(--amber-bg); color: var(--amber); }
.badge-prio-low    { background: var(--surface-3); color: var(--text-dim); }
.badge-invited { background: var(--amber-bg); color: var(--amber); }
.badge-invite-expired { background: var(--danger-bg); color: var(--danger); }
.badge-active  { background: var(--success-bg); color: var(--success); }
.badge-date    { color: var(--text-dim); font-size: 11px; margin-left: 4px; }
.btn.resend-invite-btn { padding: 2px 8px; font-size: 10px; margin-left: 6px; }

/* Provider (supplier) type badges */
.badge-type-standard { background: var(--success-bg); color: var(--success); }
.badge-type-network  { background: var(--blue-bg);    color: var(--blue); }

/* ── Toast ────────────────────────────────────── */
#toasts {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* T36: each toast keeps its own width — one leaving never moves another from under the pointer */
  gap: 8px;
  z-index: 1300;   /* above #modal-overlay — save errors toast while a modal is open */
  pointer-events: none;
}

.toast {
  padding: 11px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  max-width: 300px;
  overflow-wrap: anywhere;
  backdrop-filter: blur(8px);
  animation: toast-in .18s ease;
  pointer-events: auto;   /* T36: hovering a toast pauses its timer (#toasts itself stays click-through) */
}

.toast-success { background: var(--success-bg); border: 1px solid rgba(var(--accent-rgb),.3); color: var(--accent); }
.toast-error   { background: var(--danger-bg); border: 1px solid rgba(var(--danger-rgb),.3); color: var(--danger); }

@keyframes toast-in {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── Misc ─────────────────────────────────────── */
.empty-state {
  padding: 48px 20px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
}

.error-msg { color: var(--danger); font-size: 13px; margin-bottom: 14px; }

.otp-hint { color: var(--text-muted); font-size: 13px; margin-bottom: 16px; }
/* Accept invite (users redesign U10) */
.accept-readonly { font-size: 13.5px; color: var(--text); padding: 2px 0 4px; word-break: break-all; }
.accept-optional { color: var(--text-dim); font-weight: 400; }
.accept-check { font-size: 11.5px; color: var(--text-quiet); margin-top: 6px; }
.accept-check.ok, .accept-check.accept-good { color: var(--accent); }
.accept-check.short { color: var(--amber); }
.accept-check.accept-bad { color: var(--danger); }
.accept-note { font-size: 11.5px; color: var(--text-dim); margin-top: 12px; text-align: center; line-height: 1.5; }
.accept-foot { font-size: 11.5px; color: var(--text-dim); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); text-align: center; }
.accept-title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
#accept-submit:disabled { opacity: .55; cursor: default; box-shadow: none; }
.otp-hint span { color: var(--text); }

/* ── Tag input (attribute multi-select) ───────── */
.tag-input {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 38px;
  padding: 4px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  cursor: text;
}


.passenger-filter { width: 200px; flex: 0 0 auto; }

/* Driver/vehicle toolbar comboboxes (client-side filtered — see setupListFilter). */
.list-filter { width: 180px; flex: 0 0 auto; }

/* Cross-record links: routed booking → its trip, trip's booking chips → bookings. */
.cell-link { color: var(--accent); text-decoration: none; }
.cell-link:hover { text-decoration: underline; }
.link-field { padding: 6px 0; font-size: 13px; }
.tag-chip-open { margin-left: 2px; font-size: 12px; }

.tag-chips { display: contents; }

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 10px;
  background: var(--surface-3);
  border-radius: 5px;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
}

.tag-chip-remove {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0;
}

.tag-chip-remove:hover { color: var(--danger); }

.tag-search {
  flex: 1;
  min-width: 80px;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 2px 0 !important;
  font-size: 13px;
  color: var(--text);
  width: auto !important;
}

.tag-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  max-height: 200px;
  overflow-y: auto;
  z-index: 20;
  box-shadow: 0 8px 24px rgba(var(--shadow-rgb),calc(.5*var(--shadow-k)));
}

.tag-option {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.tag-option:hover { background: var(--surface-2); }

/* ── Attribute chips (table cell) ─────────────── */
.attr-chip {
  display: inline-block;
  padding: 1px 7px;
  background: var(--surface-3);
  border-radius: 5px;
  font-size: 11px;
  color: var(--text-dim);
  margin: 1px 2px 1px 0;
}

/* ── Select-all bar ───────────────────────────── */
#select-all-bar {
  font-size: 12px;
  color: var(--text-dim);
  padding: 0 2px 10px;
}

#select-all-bar a {
  color: var(--accent);
  text-decoration: none;
}

#select-all-bar a:hover { text-decoration: underline; }

/* One-line notice above the table (e.g. "showing trips from the last plan run"). */
.select-note {
  font-size: 12px;
  color: var(--text-dim);
  padding: 0 2px 10px;
}
.select-note a { color: var(--accent); text-decoration: none; }
.select-note a:hover { text-decoration: underline; }

/* ── Plan-run result (inside the progress overlay card) ── */
.plan-reasons {
  margin: 0 0 4px;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.6;
}
.plan-reasons strong { color: var(--text); font-family: var(--fm); }
.plan-note {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 8px 0 4px;
}
.plan-actions { display: flex; gap: 10px; }

/* ── Search toolbar ───────────────────────────── */
.toolbar input[type="text"] {
  width: 240px;
}

.site-filter-select {
  width: auto;
  min-width: 140px;
}

/* Date-range filter inputs — narrower than the search box (whose 240px width
   the .toolbar input[type="text"] rule would otherwise impose). */
.toolbar input[type="text"].date-filter-input {
  width: 185px;
}

/* Date/time input with the 📅 picker tucked inside the input's right edge
   (like a native calendar icon), not as a separate framed button. `.dt-field`
   is the full-width form wrapper; `.date-filter` is the inline toolbar wrapper. */
.dt-field    { position: relative; }
.date-filter { position: relative; display: inline-flex; align-items: center; }

/* Leave room on the right so the value never sits under the icon. */
.dt-field input[type="text"],
.date-filter .date-filter-input { padding-right: 32px; }

/* The calendar button: no border/background of its own — just the icon,
   overlaid on the input's right edge and vertically centred. */
.dt-picker-btn {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  opacity: .6;
  transition: opacity .15s;
}
.dt-picker-btn:hover { opacity: 1; }

/* Small grey record-id suffix in an edit-modal title (non-jobs/trips modules). */
.modal-title-id {
  margin-left: 6px;
  font-size: .72em;
  font-weight: 400;
  color: var(--text-dim);
}

/* Read-only display field (e.g. record id shown in the form, never submitted). */
.readonly-field {
  color: var(--text-muted);
  background: var(--surface-3);
  cursor: default;
}

/* ── Location group (address + lat/lon, framed together) ── */
.geo-group {
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 8px;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.geo-group .input-with-btn input,
.geo-group .af-input,
.geo-coords input { background: var(--surface); }
.geo-group .af-input { width: 100%; box-sizing: border-box; }
.geo-coords { display: flex; gap: 6px; }
.geo-coords input { flex: 1; min-width: 0; font-size: 12px; }

/* ── Supplier KPI editor (name → 0-100 score rows) ─────── */
.kpi-rows { display: flex; flex-direction: column; gap: 6px; }
.kpi-row  { display: flex; align-items: center; gap: 8px; }
.kpi-row .kpi-name { flex: 1; min-width: 0; font-size: 12px; color: var(--text-dim); overflow-wrap: anywhere; }
.kpi-row input { width: 90px; flex: none; font-size: 12px; }
.kpi-empty { font-size: 11px; color: var(--text-dim); line-height: 1.4; }

/* ── Trip jobs editor (chips) + plan table ─────── */
.tj-editor { display: flex; flex-direction: column; gap: 10px; }
.tj-search { position: relative; }
.tj-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.attr-display { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--text-dim); }

/* Inline passenger quick-create (job form): framed like the location group. */
.passenger-quickcreate {
  margin-top: 6px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 8px;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.passenger-quickcreate input { background: var(--surface); }
.pqc-actions { display: flex; gap: 8px; }
.tag-option-new { color: var(--accent); font-weight: 500; border-top: 1px solid var(--border); }
.tj-chips:empty { display: none; }
.tj-preview-empty { color: var(--text-dim); font-size: 12px; }

/* ⓘ hover details in the trip plan table. The bubble is a fixed-position
   singleton appended to <body> (see app.js) so table overflow can't clip it. */
.info-tip {
  cursor: help;
  color: var(--text-dim);
  font-size: 11px;
  margin-left: 3px;
  user-select: none;
}
.info-tip:hover { color: var(--accent); }
.info-tooltip {
  position: fixed;
  z-index: 1300;   /* above #modal-overlay — info-tips live inside modal forms */
  max-width: 320px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(var(--shadow-rgb),calc(.5*var(--shadow-k)));
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);   /* soft gray, as in the v22 mock's info tips */
  white-space: pre-line;
  pointer-events: none;
}

/* Job-type indicator next to a reservation's time: P = the date is the
   requested pickup time, A = an appointment (drop-off) time. Combined with
   .info-tip so hovering shows the shared bubble; declared after it so these
   sizes win. */
.time-kind {
  display: inline-block;
  min-width: 15px;
  padding: 0 3px;
  margin-left: 5px;
  border-radius: 4px;
  border: 1px solid rgba(var(--accent-rgb), .22);   /* P — pickup: subtle green */
  background: rgba(var(--accent-rgb), .07);
  color: rgba(var(--accent-rgb), .75);
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
  text-align: center;
  vertical-align: 1px;
}
.time-kind-drop {                              /* A — appointment: subtle blue */
  border-color: rgba(var(--blue-rgb), .28);
  background: rgba(var(--blue-rgb), .09);
  color: rgba(var(--blue-rgb), .8);
}
/* Keeps a reservation's time and its P/A chip on one line in list cells. */
.nowrap { white-space: nowrap; }

.trip-plan table { font-size: 12px; }
.trip-plan th, .trip-plan td { padding: 6px 8px; white-space: nowrap; }
.trip-plan td:nth-child(2) { white-space: normal; }

/* Numbered stop marker on the trip route map. Deliberately darker than
   --accent: the white number needs ≥4.5:1 contrast (var(--accent) gives ~1.9:1). */
.trip-stop-marker {
  background: #00845F;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(var(--shadow-rgb),calc(.4*var(--shadow-k)));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* The native date/time picker that backs the 📅 button: kept in the DOM and
   rendered (so showPicker() is allowed to open) but invisible. Not
   display:none — some browsers refuse showPicker() on an unrendered element.
   Parked under the icon so the popup opens beneath it; pointer-events:none so
   the click falls through to the button. */
.dt-picker-native {
  position: absolute;
  right: 5px;
  bottom: 0;
  width: 24px;
  height: 24px;
  opacity: 0;
  padding: 0;
  border: 0;
  margin: 0;
  pointer-events: none;
}

/* ── Sortable columns ─────────────────────────── */
th.sortable {
  cursor: pointer;
  user-select: none;
}

th.sortable:hover { color: var(--text-muted); }

th.sorted { color: var(--text); }

.sort-icon {
  font-size: 10px;
  opacity: .5;
  margin-left: 2px;
}

th.sorted .sort-icon { opacity: 1; color: var(--accent); }

/* ── Pagination ───────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

.pagination-info {
  font-family: var(--fm);
  font-size: 11.5px;
  color: var(--text-dim);
}

.page-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.page-gap {
  font-size: 12px;
  color: var(--text-dim);
  padding: 0 2px;
}

/* ── Import page ──────────────────────────────── */
/* Centered full-screen overlay shown while an import runs (also used by the
   dispatch board's long jobs). The page itself lives in the "Import v2"
   section at the end of this file. */
.import-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay);
  backdrop-filter: blur(3px);
  z-index: 1000;
}
.import-overlay-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  padding: 28px 32px;
  width: min(440px, 90vw);
  box-shadow: 0 24px 64px rgba(var(--shadow-rgb),calc(.6*var(--shadow-k)));
}
.import-progress-label { font-size: 13px; color: var(--text); margin-bottom: 10px; }
.progress-track {
  height: 8px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 999px;
  transition: width .2s ease;
}
.import-progress-count { margin-top: 8px; font-family: var(--fm); font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* Result line in the planner overlay (front/js/planRun.js). */
.import-summary {
  display: flex;
  gap: 18px;
  align-items: baseline;
  margin: 20px 0 12px;
  flex-wrap: wrap;
}
.import-stat { font-size: 13px; color: var(--text-dim); }
.import-stat strong { color: var(--text); font-family: var(--fm); font-size: 16px; margin-right: 4px; }
.import-stat.muted { color: var(--text-dim); }

/* ── Analytics ────────────────────────────────── */
.analytics { display: flex; flex-direction: column; min-height: calc(100% - 8px); }

.analytics-feed { flex: 1; display: flex; flex-direction: column; gap: 16px; padding-bottom: 16px; }

.analytics-empty { color: var(--text-dim); margin-top: 4px; }
.analytics-empty p { margin-bottom: 12px; }
.analytics-examples { display: flex; flex-wrap: wrap; gap: 8px; }
.analytics-example {
  background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text);
  border-radius: 20px; padding: 6px 14px; font-size: 12.5px; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.analytics-example:hover { background: var(--surface-3); border-color: rgba(var(--accent-rgb),.3); }

.analytics-msg { max-width: 900px; }
.analytics-user {
  align-self: flex-end; background: var(--accent); color: var(--accent-ink);
  font-weight: 500;
  padding: 9px 14px; border-radius: 14px 14px 4px 14px;
  white-space: pre-wrap; max-width: 75%;
}
.analytics-assistant { align-self: stretch; }

.analytics-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px 18px;
}
.analytics-card-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.analytics-explain { color: var(--text-dim); margin-bottom: 12px; }
.analytics-progress { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.analytics-progress-line {
  color: var(--text-dim); font-size: 12px; font-family: ui-monospace, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.analytics-progress-err { color: var(--danger); }
.analytics-answer p { margin-bottom: 8px; line-height: 1.5; }
.analytics-answer p:last-child { margin-bottom: 0; }
.analytics-block { margin-top: 14px; }
.analytics-chart { position: relative; height: 340px; }
.analytics-map { height: 380px; border-radius: 8px; overflow: hidden; }
.analytics-map .leaflet-container { width: 100%; height: 100%; background: var(--surface-2); }
.analytics-popup-title { font-weight: 600; margin-bottom: 4px; }
.analytics-popup .k { color: var(--text-dim); margin-right: 4px; }
.analytics-output .table-wrap { overflow-x: auto; }
.analytics-note { color: var(--text-dim); font-size: 12px; margin-top: 8px; }
.analytics-error { color: var(--danger); }
.analytics-loading { color: var(--text-dim); display: flex; align-items: center; gap: 8px; }

.analytics-sql { margin-top: 12px; }
.analytics-sql summary { cursor: pointer; color: var(--text-dim); font-size: 12px; }
.analytics-sql pre {
  margin-top: 8px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px; overflow-x: auto;
  font: 12px/1.5 var(--fm);
  white-space: pre-wrap; word-break: break-word;
}

.spinner {
  width: 14px; height: 14px; display: inline-block;
  border: 2px solid var(--surface-3); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Live map page ───────────────────────────── */
/* Fills the content area; dvh-derived flex height (not vh) so Android
   browsers with dynamic toolbars don't overflow. */
.live-map-page {
  position: relative;
  height: 100%;
  min-height: 420px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.live-map { position: absolute; inset: 0; }
.live-map .leaflet-container, .live-map.leaflet-container { width: 100%; height: 100%; background: var(--surface-2); }

.live-panel {
  position: absolute; top: 12px; right: 12px; z-index: 800;
  width: 300px; max-width: calc(100% - 24px); max-height: calc(100% - 24px);
  overflow-y: auto;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(var(--shadow-rgb),calc(.45*var(--shadow-k)));
}
.live-panel-head {
  position: sticky; top: 0;
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 10px 12px;
  background: var(--glass);
  border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: 13px;
}
.live-status { color: var(--text-dim); font-size: 11px; font-weight: 400; text-align: right; }

.live-trip { padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
.live-trip:last-child { border-bottom: none; }
.live-trip:hover { background: var(--accent-bg-2); }
.live-trip-active { background: var(--accent-bg); }
.live-trip-head { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.live-trip-sub { color: var(--text-dim); font-size: 11px; margin: 3px 0 6px 16px; }
.live-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-left: 16px; }
.live-chip {
  font-size: 10px; padding: 2px 7px;
  border: 1px solid; border-radius: 999px;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.live-empty { padding: 16px 12px; color: var(--text-dim); font-size: 12px; }
.live-filter-note { padding: 8px 12px; color: var(--text-dim); font-size: 11px; border-bottom: 1px solid var(--border); }
.live-trip-head .badge { margin-left: auto; }
.live-trip-open { padding: 4px 6px; margin: -4px 0; }   /* widen the tap target without growing the row */

/* Stop progress, on top of the per-trip fill (set inline by mapPage.js):
   cleared stops dim out, a no-show pickup flags with a red ring. */
.live-stop-cleared { opacity: .55; filter: grayscale(.4); }
.live-stop-noshow  { border-color: var(--danger); box-shadow: 0 0 0 2px var(--danger), 0 1px 4px rgba(var(--shadow-rgb),calc(.4*var(--shadow-k))); }

/* Markers of non-selected trips while one trip is emphasized from the panel.
   Kept after .live-stop-cleared so it wins when both classes apply; no
   pointer events, so ghosts don't steal tooltips from the selected trip. */
.live-faded { opacity: .12; pointer-events: none; }

/* Driver pin: a car glyph in the trip's color with a soft pulse behind it.
   No `position` here: leaflet.css already makes marker icons position:absolute
   (which also anchors the ::before) — overriding it to relative puts the pin
   back into the marker pane's flow, so each car stacks 15px below the previous
   one's spot and drifts off its coordinates. */
.live-driver-marker::before {
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  animation: live-pulse 2s ease-out infinite;
}
.live-driver-marker svg {
  position: relative; display: block;
  filter: drop-shadow(0 1px 4px rgba(var(--shadow-rgb),calc(.55*var(--shadow-k))));
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.45); }
  70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

.live-tip { font-size: 12px; }
.live-tip-title { font-weight: 600; margin-bottom: 2px; }

/* ── Command Center (home) ─────────────────────────
   The tabbed operational home page (commandCenter.js),
   styled after the orqestra-v13 command-center mock.  */
/* Full-bleed: the content area drops its padding so the command center gets
   every available pixel; the tab strip lives up in #topbar next to the title. */
#page-content.cc-full { padding: 5px 0 0; overflow: hidden; }
.cc {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

/* tab strip — injected into #topbar, same row as the page title */
.cc-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  flex: 1;
  min-width: 0;
  margin-left: 10px;
}
/* CC spec C3: segmented Overview · Now · Predictions (the Drivers tabs
   pattern), then LIVE + clock (Now only), then Ask Orqi at a fixed width. */
.cc-seg { flex: none; }
.cc-seg .drv-tab { border: none; background: none; font-family: var(--fn); }
.cc-seg .drv-tab.on { background: var(--surface-4); }
.cc-seg .drv-tab:not(.on):hover { color: var(--text-muted); }
.cc-strip-gap { flex: 1; min-width: 8px; }
/* QA 5 Oct Q11: the mock's proportions — the pill shrinks (down to 220px
   basis, then further) before the tabs do; flat accent label, no glow. */
.cc-topbar .cc-ask { flex: 1 1 220px; width: auto; max-width: 440px; min-width: 0; margin: 0; padding: 6px 12px; border-radius: 8px; gap: 8px; box-shadow: none; }
.cc-topbar .cc-ask:focus-within { box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.1); }
.cc-topbar .cc-ask .nt-kbd { flex: none; font: 500 11px var(--fm); }
.cc-topbar .cc-ask-spark { width: 15px; height: 15px; filter: none; animation: none; }
.cc-topbar .cc-ask-label { font: 600 12px var(--fn); background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--accent); }
.cc-topbar .cc-ask input { font: 500 12.5px var(--fn); padding: 0; height: auto; }
/* QA 19 Oct #1: Ask Orqi in the strip is the Bookings pill (.drv-ask) — a
   tap or ⌘K opens the tab's thread. It shrinks (text truncates) before the
   tabs do; under 1080 px it is the Orqi mark with ⌘K only. */
.cc-topbar .cc-orqi { flex: 0 1 300px; width: auto; min-width: 0; margin: 0; }
.cc-orqi-text { font-size: 12.5px; color: var(--accent); flex: 1; white-space: nowrap; text-align: left; }
.cc-orqi:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.18); }
@media (max-width: 1080px) { .cc-topbar .cc-orqi { flex: none; } .cc-topbar .cc-orqi-text { display: none; } }
/* QA 5 Oct Q6: the rail has its own expand control; on the Command Center
   the strip starts flush left. */
body:has(#page-content.cc-full) #sidebar-expand { display: none !important; }
.cc-topbar .cc-tabs-right { margin-left: 0; padding: 0 12px 0 0; }
.cc-topbar .cc-tabs-right[hidden] { display: none; }
.cc-ask {
  flex: 1;
  max-width: 460px;
  margin: 0 auto;   /* centered in the space between the tabs and the LIVE chip */
  display: flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(180deg, rgba(var(--blue2-rgb),.13), rgba(var(--accent-rgb),.09));
  border: 1px solid rgba(var(--accent-rgb),.26);
  border-radius: 9px;
  padding: 7px 12px;
  color: var(--text-dim);
  min-width: 0;
}
.cc-ask { border-color: rgba(var(--accent-rgb),.45); box-shadow: 0 0 14px rgba(var(--accent-rgb),.08); cursor: text; }
.cc-ask:hover { border-color: rgba(var(--accent-rgb),.6); }
.cc-ask:focus-within { border-color: rgba(var(--accent-rgb),.7); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.1), 0 0 20px rgba(var(--accent-rgb),.16); }
.cc-ask-spark { flex-shrink: 0; color: var(--accent); }
.cc-ask-label {
  flex-shrink: 0;
  font: 700 13px var(--fn);
  background: linear-gradient(90deg, var(--accent), var(--blue) 55%, var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}
.cc-ask input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  font: 600 13px var(--fn);
  color: var(--text);
}
.cc-ask input::placeholder { color: var(--text-dim); font-weight: 500; }

.cc-ask { position: relative; }
.cc-tabs-right { margin-left: auto; display: flex; align-items: center; gap: 10px; padding-left: 10px; }
/* Guided tour demo snapshot is on (commandCenter.js ccTourDemo). */
.cc-demo-tag {
  flex: none; align-self: center; margin-right: 10px;
  padding: 3px 10px; border-radius: 20px;
  font: 600 10.5px/1.4 var(--fm); letter-spacing: .1em; text-transform: uppercase;
  color: var(--amber); background: rgba(var(--amber-rgb), .10); border: 1px solid rgba(var(--amber-rgb), .35);
}
.cc-demo-tag[hidden] { display: none; }
.cc-live-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 20px;
  background: var(--accent-bg); border: 1px solid rgba(var(--accent-rgb),.2);
  font: 600 10.5px var(--fm); color: var(--accent);
}
.cc-pulse { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: cc-glow 2s ease-in-out infinite; }
@keyframes cc-glow {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.4); }
  50%      { opacity: .5; box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0); }
}
.cc-clock { font: 12px var(--fm); color: var(--text-muted); }

/* screens */
.cc-screens { position: relative; flex: 1; overflow: hidden; min-height: 0; }
.cc-screen { position: absolute; inset: 0; display: none; overflow: hidden; }
.cc-screen.on { display: block; animation: cc-fi .2s ease both; }
@keyframes cc-fi { from { opacity: 0; } to { opacity: 1; } }
.cc-loading { padding: 18px; font-size: 12px; color: var(--text-dim); }

/* ── Now (CC spec C7, 4 Oct 2026) ──
   One screen, no page scroll: left rail 272 px · map · right rail 272 px; the
   rails scroll on their own. Cards on the page background, tokens only. */
.now { height: 100%; box-sizing: border-box; padding: 14px 20px 16px; display: flex; gap: 14px; align-items: stretch; min-height: 420px; }
.now-rail { flex: 0 0 272px; min-width: 0; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
.now-rail-l { padding-right: 2px; }
.now-rail-r { padding-left: 2px; }
.now-rail::-webkit-scrollbar { width: 3px; }
.now-rail::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 2px; }
.now-map { flex: 1 1 0; min-width: 0; position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); display: flex; }
.now-map .cc-mapzone { flex: 1; min-height: 0; }

.now-greet { font-size: 12.5px; color: var(--text-mid); padding: 2px 2px 0; flex: none; }
.now-box { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; flex: none; }
.now-grow { flex: 1 0 auto; }
.now-a { background: none; border: none; padding: 0; font: 600 11.5px var(--fn); color: var(--accent); cursor: pointer; white-space: nowrap; }
.now-a:hover { color: var(--accent-hover); }
.now-cap { font: 600 11px var(--fn); color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.now-empty { font-size: 12px; color: var(--text-dim); padding: 4px 2px; }
.now-note { font-size: 11.5px; color: var(--text-dim); }

/* Network health */
.now-health { padding: 12px 14px 10px; }
.now-health-top { display: flex; align-items: center; gap: 12px; }
.now-health-head { flex: 1; min-width: 0; }
.now-health-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--text-mid); }
.now-health-label > span:first-child { flex: 1; }
.now-i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--border-3); color: var(--text-dim); font: italic 600 9.5px Georgia, serif; display: inline-flex; align-items: center; justify-content: center; cursor: help; }
.now-health-sub { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; font-size: 11px; color: var(--text-dim); }
/* The gauge scales as one unit (QA 6 Oct #4): --gauge-w is its width in px
   (unitless) and everything inside derives from it, in the Overview's
   proportions — score 20 % of the width, band word 8 %, 2 % between them,
   the value block on the bottom edge (Overview's offset is 0). Set
   --gauge-w per instance: Now 104, Overview 150. */
.now-gauge { --gauge-w: 104; position: relative; width: calc(var(--gauge-w) * 1px); height: calc(var(--gauge-w) * .6px); flex: none; }
.now-gauge svg { display: block; overflow: visible; width: 100%; height: 100%; }
.now-arc-bg, .now-arc { fill: none; stroke-width: 10; stroke-linecap: round; }
.now-arc-bg { stroke: var(--surface-3); }
.now-arc { stroke: var(--accent); transition: stroke-dasharray .5s ease; }
.now-arc-tick { stroke: var(--surface); stroke-width: 2; }
.now-gauge-val { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; }
.now-gauge-val > span { font-size: calc(var(--gauge-w) * .2px); font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.now-gauge-val > div { font-size: calc(var(--gauge-w) * .08px); line-height: 1.2; color: var(--text-dim); margin-top: calc(var(--gauge-w) * .02px); white-space: nowrap; }
.now-health-parts { display: flex; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
.now-health-parts > div, .now-snap-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.now-health-parts b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.now-health-parts span, .now-snap-row span { font-size: 11px; color: var(--text-dim); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* KPI link cards */
.now-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: none; }
.now-kpi { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; min-width: 0; color: var(--text); text-decoration: none; transition: border-color .12s; }
.now-kpi:hover { border-color: var(--border-4); color: var(--text); }
.now-kpi.alert { border-color: rgba(var(--danger-rgb),.3); }
.now-kpi.alert .now-kpi-val { color: var(--danger); }
.now-kpi-top { display: flex; justify-content: space-between; gap: 6px; align-items: center; font-size: 11px; font-weight: 500; color: var(--text-mid); }
.now-kpi-top > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-chev { font-size: 12px; color: var(--text-low); }
.now-kpi-val { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1; margin-top: 5px; font-variant-numeric: tabular-nums; }
.now-kpi-sub { font-size: 10.5px; color: var(--text-dim); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Predictions today */
.now-snap { padding: 10px 12px; margin-top: 4px; }
.now-snap-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.now-snap-row { display: flex; gap: 12px; margin-top: 8px; }
.now-snap-row b { font-size: 16px; font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.now-snap-row span { font-size: 10.5px; margin-top: 3px; }

/* Decisions / Done for you */
.now-sec { display: flex; align-items: center; gap: 8px; font: 600 11px var(--fn); color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; padding: 6px 2px 0; flex: none; }
.now-count { font: 10.5px var(--fm); color: var(--accent); background: var(--accent-bg); border-radius: 20px; padding: 1px 7px; }
.now-count.amber { color: var(--amber); background: var(--amber-bg); }
.now-list { display: flex; flex-direction: column; gap: 8px; flex: none; }
.now-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; transition: box-shadow .2s; }
.now-card.auto { background: var(--accent-bg-2); border-color: rgba(var(--accent-rgb),.18); }
.now-card.pc-hi { box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.5); }
.now-card-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.now-tag { flex: none; font: 600 9.5px var(--fm); letter-spacing: .04em; }
.now-when { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 10.5px; color: var(--text-dim); }
.now-when > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-live { flex: none; font: 600 9px var(--fm); letter-spacing: .06em; color: var(--accent); background: var(--accent-bg); border-radius: 4px; padding: 1px 5px; }
.now-card-title { font-size: 13px; font-weight: 600; margin-top: 5px; line-height: 1.35; text-wrap: pretty; }
.now-card-body { font-size: 11.5px; color: var(--text-mid); margin-top: 3px; line-height: 1.45; text-wrap: pretty; }
.now-deadline { font-size: 10.5px; font-weight: 600; margin-top: 6px; color: var(--text-dim); }
.now-deadline.urgent { color: var(--amber); }
.now-card-btns { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.now-btn { flex: none; white-space: nowrap; background: none; color: var(--text-mid); border: 1px solid var(--border-2); border-radius: 7px; padding: 5px 10px; font: 500 12px var(--fn); cursor: pointer; }
.now-btn:hover { background: var(--surface-2); }
.now-btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.now-btn.primary:hover { background: var(--accent-hover); }
.now-btn:disabled { opacity: .5; cursor: default; }
.now-card-links { display: flex; gap: 12px; margin-top: 8px; }
.now-link { background: none; border: none; padding: 0; font: 600 12px var(--fn); color: var(--text-mid); cursor: pointer; }
.now-link.amber { color: var(--amber); }
.now-link:disabled { opacity: .5; cursor: default; }
.now-handled { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-dim); padding: 2px 2px; min-width: 0; }
.now-handled-tag { flex: none; font: 600 9px var(--fm); letter-spacing: .06em; color: var(--text-mid); background: var(--surface-3); border-radius: 4px; padding: 1px 5px; }
.now-handled-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-handled-at { flex: none; font: 10px var(--fm); }

/* Right rail */
.now-box-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.now-box-title { font-size: 12.5px; font-weight: 600; }
.now-box-aside { display: flex; align-items: baseline; gap: 8px; font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.now-cost-big { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.now-cost-big > span:first-child { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.now-cost-delta { font-size: 11.5px; font-weight: 600; }
.now-rows { margin-top: 8px; }
.now-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--border-soft); font-size: 12px; }
.now-row span { color: var(--text-mid); }
.now-row b { font-weight: 500; font-variant-numeric: tabular-nums; }
.now-row b.dim { color: var(--text-mid); }
.now-pw { padding: 7px 0; border-top: 1px solid var(--border-soft); }
.now-pw:first-child { margin-top: 4px; }
.now-pw-top { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.now-pw-n { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-pw-top b { font-weight: 600; font-variant-numeric: tabular-nums; }
.now-pw-bot { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.now-pw-bar { flex: 1; height: 4px; background: var(--surface-3); border-radius: 2px; overflow: hidden; }
.now-pw-bar > div { height: 100%; }
.now-pw-bot span { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.now-log { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border-soft); }
.now-log:first-child { margin-top: 4px; }
.now-log-at { font: 10.5px var(--fm); color: var(--text-dim); flex: none; width: 36px; padding-top: 2px; }
.now-log-main { min-width: 0; }
.now-log-t { font-size: 12px; line-height: 1.4; text-wrap: pretty; overflow-wrap: anywhere; }
.now-log-b { font: 600 9.5px var(--fm); letter-spacing: .04em; }

.cc-q { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 13px; margin-bottom: 8px; }
.cc-q.warn { border-color: rgba(var(--amber-rgb),.25); background: rgba(var(--amber-rgb),.04); }
.cc-q.opt { border-color: rgba(var(--accent-rgb),.18); background: var(--accent-bg-2); }
.cc-q-type { font: 700 9.5px var(--fm); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px; }
.cc-q-title { font-size: 12.5px; font-weight: 600; line-height: 1.45; margin-bottom: 4px; }
.cc-q-body { font-size: 11.5px; color: var(--text-muted); line-height: 1.55; margin-bottom: 10px; }
.cc-q-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.cc-qb {
  padding: 5px 11px;
  border-radius: 7px;
  font: 600 11.5px var(--fn);
  cursor: pointer;
  border: none;
  transition: opacity .12s;
}
.cc-qb:hover { opacity: .85; }
.cc-qb-t { background: var(--accent); color: var(--accent-ink); }
.cc-qb-a { background: var(--amber); color: var(--accent-ink); }
.cc-qb-g { background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border-2); }
.cc-q.resolved { animation: cc-qout .35s ease forwards; }
@keyframes cc-qout {
  to { opacity: 0; transform: scale(.97) translateY(-4px); height: 0; margin: 0; padding: 0; border-width: 0; }
}

/* center map */
.cc-mapzone { flex: 1; position: relative; overflow: hidden; background: var(--map-bg); min-height: 200px; }
#cc-map { position: absolute; inset: 0; }
#cc-map.leaflet-container { background: var(--map-bg); }
.cc-mapzone .leaflet-tile { filter: grayscale(85%) brightness(.62) contrast(1.15) sepia(6%) hue-rotate(178deg) saturate(120%); }
/* One controls row across the top of the map: the National/Regional scope
   toggle first, then the combined bar (Filters · view toggle · LIVE · motion
   stat). One line always — when the map runs narrow the bar's badge and
   motion stat ellipsize instead of the row wrapping. */
.cc-map-controls {
  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 1000;
  /* stretch, not flex-start: every bar in the row gets the same height */
  display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap;   /* a narrow pane wraps the scope toggle instead of truncating */
  pointer-events: none;
}
.cc-map-controls > * { pointer-events: auto; }
.cc-map-topbar {
  display: flex; align-items: center; gap: 10px;
  /* fixed height (matched by .cc-scope) so the row doesn't slim down when
     the regional-only controls hide in national mode */
  height: 42px;
  min-width: 0;
  background: var(--glass);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 7px 10px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(var(--shadow-rgb),calc(.3*var(--shadow-k)));
}
.cc-mt-live { display: flex; align-items: center; gap: 6px; font: 700 10.5px var(--fm); color: var(--accent); letter-spacing: .6px; flex-shrink: 0; }
.cc-livedot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: cc-glow 2s ease-in-out infinite; }
.cc-mt-div { width: 1px; height: 16px; background: var(--border-2); flex-shrink: 0; }
.cc-map-toggle { flex-shrink: 0; }
/* the stat and the Filters badge give way first when the bar runs tight */
.cc-mt-stat { font: 600 13px var(--fm); color: var(--text); white-space: nowrap; flex: none; }
.cc-mt-stat small { font-size: 10.5px; color: var(--text-dim); font-weight: 500; }
.cc-mt-label { font: 500 11.5px var(--fn); color: var(--text-muted); background: none; border: none; padding: 0; cursor: pointer; white-space: nowrap; flex: none; }
.cc-mt-label:hover { color: var(--text); }
.cc-mt-label[hidden] { display: none; }

/* Filters trigger — a flat item inside the combined map bar; its full-height
   panel stays anchored to the LEFT of the map, not a small dropdown —
   a 340px popover cannot hold 8+ attribute types with real checkbox lists. */
.cc-filter-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: 600 12px var(--fn);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
}
.cc-filter-btn:hover { color: var(--accent); }
/* badge ellipsizes so the united bar never outgrows the map */
.cc-filter-badge { font: 500 9.5px var(--fm); color: var(--text-dim); white-space: nowrap; }

/* Live Map ↔ Map Statistics segmented switch, leftmost in the map topbar */
.cc-map-toggle {
  display: flex; gap: 2px;
  background: var(--surface-3);
  border-radius: 7px;
  padding: 2px;
}
.cc-map-toggle button {
  border: none; background: none; cursor: pointer;
  font: 600 11px var(--fn); color: var(--text-dim);
  padding: 4px 10px; border-radius: 6px; white-space: nowrap;
}
.cc-map-toggle button:hover { color: var(--text); }
.cc-map-toggle button.on { background: var(--accent-bg); color: var(--accent); }

/* National ↔ Regional scope switch — the first control in the map controls
   row. National is a concept view — metro clusters + scaled statistics; only
   Regional shows the real Delaware operation. */
.cc-scope {
  flex-shrink: 0;
  margin-left: auto;   /* pins the toggle to the map's top right */
  height: 42px;   /* same fixed height as .cc-map-topbar */
  display: flex; gap: 2px;
  background: var(--glass);
  border: 1px solid var(--border-2);
  border-radius: 9px;
  padding: 3px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(var(--shadow-rgb),calc(.3*var(--shadow-k)));
}
.cc-scope button {
  border: none; background: none; cursor: pointer;
  font: 600 11.5px var(--fn);
  color: var(--text-dim);
  padding: 6px 14px; border-radius: 6px; white-space: nowrap;
}
.cc-scope button:hover { color: var(--text); }
.cc-scope button.on { background: var(--accent-bg); color: var(--accent); }

/* National metro labels that map to a real site focus that region on click. */
.cc-zone-focus:hover { filter: brightness(1.35); }

/* Region chooser — pops under the scope toggle when Regional is clicked:
   regional focus is one site at a time. */
.cc-region-pop {
  position: absolute; top: 50px; right: 0; z-index: 1100;   /* under the right-pinned toggle */
  display: flex; flex-direction: column; gap: 2px;
  min-width: 150px;
  background: var(--glass);
  border: 1px solid var(--border-2);
  border-radius: 9px;
  padding: 4px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(var(--shadow-rgb),calc(.4*var(--shadow-k)));
}
.cc-region-title {
  font: 700 10px var(--fm); color: var(--text-dim);
  letter-spacing: .8px; text-transform: uppercase;
  padding: 5px 10px 3px;
}
.cc-region-pop button {
  border: none; background: none; cursor: pointer;
  font: 600 11.5px var(--fn); color: var(--text-dim);
  padding: 7px 12px; border-radius: 6px;
  text-align: left; white-space: nowrap;
}
.cc-region-pop button:hover { color: var(--text); background: var(--border-soft); }
.cc-region-pop button.on { background: var(--accent-bg); color: var(--accent); }

.cc-fpanel {
  /* top clears the map controls row (~38px at top:12px) so the scope/view
     switches stay clickable while the panel is open; bottom clears the
     tracking-tier pills bar (~48px tall at bottom:12px) so the panel never
     covers the vehicle counters */
  position: absolute; top: 58px; left: 12px; bottom: 72px; width: 340px; max-width: calc(94% - 12px); z-index: 1400;
  display: flex; flex-direction: column;
  background: var(--glass);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  overflow: hidden;   /* keep section hover fills inside the rounded corners */
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(var(--shadow-rgb),calc(.5*var(--shadow-k)));
}
/* Live-view legend: the in-route trip list (same .live-trip rows as the live
   map page's panel), sitting where the Filters panel lives in the stats view.
   Auto-height up to the tracking-tier pills so a short list doesn't stretch. */
.cc-legend {
  /* anchored exactly like .cc-fpanel so the two views mirror each other;
     z stays below the map controls row (1000) so the switches win where a
     narrow map makes them overlap */
  position: absolute; top: 58px; left: 12px; width: 300px;
  max-width: calc(94% - 12px); max-height: calc(100% - 130px); z-index: 900;
  display: flex; flex-direction: column;
  background: var(--glass);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(var(--shadow-rgb),calc(.5*var(--shadow-k)));
}
.cc-legend-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 700; color: var(--text);
  flex-shrink: 0;
}
.cc-legend-list { flex: 1; overflow-y: auto; }

.cc-fpanel-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.cc-fpanel-title { font-size: 13.5px; font-weight: 700; color: var(--text); }
.cc-fpanel-reset { margin-left: auto; background: none; border: none; color: var(--accent); font: 600 11px var(--fn); cursor: pointer; }
.cc-fpanel-reset:hover { text-decoration: underline; }
.cc-fpanel-close {
  width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border-2);
  display: flex; align-items: center; justify-content: center;
  background: none; color: var(--text-dim); cursor: pointer; flex-shrink: 0;
}
.cc-fpanel-close:hover { color: var(--text); background: var(--surface-2); }
.cc-fpanel-body { flex: 1; overflow-y: auto; }

/* subtle 4px scrollbars on the panel and its value lists, as in the mock —
   near-invisible gray thumb on the dark surface, no track, no buttons */
.cc-fpanel-body, .cc-fs-list, .cc-legend-list { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
.cc-fpanel-body::-webkit-scrollbar, .cc-fs-list::-webkit-scrollbar, .cc-legend-list::-webkit-scrollbar { width: 4px; }
.cc-fpanel-body::-webkit-scrollbar-track, .cc-fs-list::-webkit-scrollbar-track, .cc-legend-list::-webkit-scrollbar-track { background: transparent; }
.cc-fpanel-body::-webkit-scrollbar-thumb, .cc-fs-list::-webkit-scrollbar-thumb, .cc-legend-list::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 3px; }
.cc-fpanel-body::-webkit-scrollbar-thumb:hover, .cc-fs-list::-webkit-scrollbar-thumb:hover, .cc-legend-list::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* one accordion section per facet */
.cc-fsec { border-bottom: 1px solid var(--border); }
.cc-fsec-head { display: flex; align-items: center; gap: 8px; padding: 11px 16px; cursor: pointer; user-select: none; }
.cc-fsec-head:hover { background: var(--surface-2); }
.cc-fsec-title { font-size: 12px; font-weight: 600; color: var(--text); }
.cc-fsec-badge { font: 500 9.5px var(--fm); color: var(--text-dim); margin-left: auto; }
.cc-fsec-chevron { width: 14px; height: 14px; color: var(--text-dim); flex-shrink: 0; transition: transform .15s; }
.cc-fsec.open .cc-fsec-chevron { transform: rotate(90deg); }
.cc-fsec-body { display: none; padding: 0 16px 12px; }
.cc-fsec.open .cc-fsec-body { display: block; }

.cc-fs-search {
  width: 100%;
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  padding: 6px 9px;
  font: 400 11.5px var(--fn);
  color: var(--text);
  margin-bottom: 7px;
  outline: none;
}
.cc-fs-search::placeholder { color: var(--text-faint); }
.cc-fs-bulk { display: flex; gap: 10px; margin-bottom: 6px; }
.cc-fs-bulk button { background: none; border: none; color: var(--accent); font: 600 10.5px var(--fn); cursor: pointer; padding: 0; }
.cc-fs-bulk button:hover { text-decoration: underline; }
.cc-fs-list { overflow-y: auto; padding-right: 2px; }
.cc-fs-opt, .cc-fp-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}
.cc-fs-opt:hover, .cc-fp-opt:hover { background: var(--surface-2); }
.cc-fs-opt input, .cc-fp-opt input { accent-color: var(--accent); flex-shrink: 0; }
.cc-fs-empty { font-size: 11px; color: var(--text-faint); padding: 6px; }

.cc-fp-row { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-fp-pill {
  font: 500 11.5px var(--fn);
  color: var(--text-muted);
  background: var(--surface-3);
  border-radius: 6px;
  padding: 6px 11px;
  cursor: pointer;
  user-select: none;
}
.cc-fp-pill:hover { color: var(--text); }
.cc-fp-pill.sel { background: var(--accent-bg); color: var(--accent); font-weight: 700; }
.cc-lbdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* QA 5 Oct Q7: + − ⟲ at the bottom right, above the tracking-tier pills,
   in the map controls' glass style. */
.cc-zoomctl {
  position: absolute; right: 12px; bottom: 66px; z-index: 1000;
  display: flex; flex-direction: column;
  background: var(--glass); border: 1px solid var(--border-2); border-radius: 9px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(var(--shadow-rgb),calc(.3*var(--shadow-k)));
  overflow: hidden;
}
.cc-zoomctl button {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: none; background: none; cursor: pointer; color: var(--text-muted);
}
.cc-zoomctl button + button { border-top: 1px solid var(--border-2); }
.cc-zoomctl button:hover { color: var(--text); background: var(--surface-3); }
.cc-zoomctl button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cc-legend-all { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-muted); cursor: pointer; }
.cc-legend-all input { accent-color: var(--accent); margin: 0; }
.cc-tiers { position: absolute; bottom: 12px; left: 12px; right: 12px; z-index: 1000; display: flex; gap: 8px; flex-wrap: wrap; pointer-events: none; }
.cc-tiers > * { pointer-events: auto; }
.cc-tier {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--glass);
  border: 1px solid var(--border-2);
  border-radius: 9px;
  padding: 7px 11px;
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: all .12s;
  opacity: .45;
  font-family: var(--fn);
  text-align: left;
}
.cc-tier.on { opacity: 1; }
.cc-tier:hover { border-color: var(--border-4); }
/* the ⓘ badge riding the first pill's corner, as in the mock */
.cc-tier-info {
  position: absolute; top: -8px; left: -8px;
  width: 14px; height: 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border-2);
  font: 400 9.5px var(--fm); color: var(--text-dim);
  margin: 0;
}
.cc-glyph { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-sizing: border-box; }
.cc-glyph-live { background: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb),.5); }
.cc-glyph-status { border: 2px dashed var(--blue); background: transparent; }
.cc-glyph-unknown { border: 1.5px solid var(--text-dim); background: transparent; position: relative; }
.cc-glyph-unknown::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--text-dim); animation: cc-ghost 1.8s ease-in-out infinite; }
@keyframes cc-ghost { 0%, 100% { opacity: .25; } 50% { opacity: .75; } }
.cc-tier-n { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.cc-tier-l { font-size: 11px; color: var(--text-mid); font-weight: 500; white-space: nowrap; }

.cc-tick { animation: cc-tickup .4s ease; }
@keyframes cc-tickup { 0% { color: var(--accent); } 100% { color: var(--text); } }

.cc-log-item { padding: 8px 0; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 8px; animation: cc-login .3s ease both; }
.cc-log-item:last-child { border-bottom: none; }
@keyframes cc-login { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; } }
.cc-log-body { font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }
.cc-log-ts { font: 10px var(--fm); color: var(--text-faint); margin-top: 2px; }

/* narrow screens (incl. Samsung DeX windows): Now stacks its columns and
   scrolls as one page (the rails stop scrolling on their own). */
@media (max-width: 1080px) {
  .now { flex-direction: column; overflow-y: auto; height: 100%; }
  .now-rail { flex: none; overflow-y: visible; padding: 0; }
  .now-map { flex: none; height: 360px; }
  .cc-ask { display: none; }
  .list-ask { display: none; }
  .cc-topbar { overflow-x: auto; scrollbar-width: none; }
  .cc-topbar::-webkit-scrollbar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-pulse, .cc-livedot, .cc-glyph-unknown::after { animation: none; }
}

/* ── Integrations (demo page, static copy of the v21 mock) ─────────────── */
.int-page { position: relative; }
.int-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.int-sub { font-size: 13px; color: var(--text-dim); }
.int-toolbar .int-btn { margin-left: auto; flex: none; width: auto; padding: 8px 16px; }

.int-hero-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 24px; }
.int-hero-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; min-width: 0; }
.int-hero-card .int-hero-lbl { font: 600 10.5px var(--fm); color: var(--text-dim); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px; }
.int-hero-card .int-hero-val { font-size: 28px; font-weight: 700; letter-spacing: -1.2px; color: var(--text); }
.int-hero-card .int-hero-sub { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.int-hero-card.teal { background: rgba(var(--accent-rgb),.05); border-color: rgba(var(--accent-rgb),.18); }
.int-hero-card.teal .int-hero-lbl { color: rgba(var(--accent-rgb),.5); }
.int-hero-card.teal .int-hero-val, .int-hero-card.teal .int-hero-sub { color: var(--accent); }
.int-hero-card.amber { background: rgba(var(--amber-rgb),.06); border-color: rgba(var(--amber-rgb),.2); }
.int-hero-card.amber .int-hero-lbl { color: rgba(var(--amber-rgb),.6); }
.int-hero-card.amber .int-hero-val, .int-hero-card.amber .int-hero-sub { color: var(--amber); }
.int-hero-card.red { background: rgba(var(--danger-rgb),.06); border-color: rgba(var(--danger-rgb),.2); }
.int-hero-card.red .int-hero-lbl { color: rgba(var(--danger-rgb),.55); }
.int-hero-card.red .int-hero-val, .int-hero-card.red .int-hero-sub { color: var(--danger); }

.int-cat { margin-top: 26px; }
.int-cat-title { font: 700 11px var(--fm); color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px; }
.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 14px; }
.int-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px;
  cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s;
  display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden;
}
.int-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: transparent; }
.int-card.connected::before { background: linear-gradient(90deg, var(--accent), transparent); }
.int-card.error::before { background: linear-gradient(90deg, var(--danger), transparent); }
.int-card.attention::before { background: linear-gradient(90deg, var(--amber), transparent); }
.int-card:hover { border-color: var(--border-2); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(var(--shadow-rgb),calc(.35*var(--shadow-k))); }
.int-card-top { display: flex; align-items: center; gap: 12px; }
.int-logo {
  width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  font: 800 13px var(--fm); flex-shrink: 0; box-shadow: inset 0 0 0 1px var(--border);
}
.int-name { font-size: 14px; font-weight: 700; color: var(--text); }
.int-cat-label { font-size: 10.5px; color: var(--text-faint); margin-top: 1px; }
.int-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.int-badge { font: 700 9px var(--fm); padding: 3px 8px; border-radius: 20px; letter-spacing: .3px; }
.int-badge.dir { background: var(--blue-bg); color: var(--blue); }
.int-status { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; }
.int-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.int-status.connected { color: var(--accent); }    .int-status.connected .int-status-dot { background: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb),.5); }
.int-status.notconnected { color: var(--text-faint); } .int-status.notconnected .int-status-dot { background: var(--text-faint); }
.int-status.attention { color: var(--amber); }     .int-status.attention .int-status-dot { background: var(--amber); }
.int-status.error { color: var(--danger); }        .int-status.error .int-status-dot { background: var(--danger); }

/* Detail panel — anchored right (the map's Filters panel is left, this is its mirror) */
.int-overlay { display: none; position: fixed; inset: 0; background: var(--overlay); z-index: 1500; }
.int-overlay.open { display: block; }
.int-panel {
  position: fixed; top: 0; right: -420px; bottom: 0; width: 420px; max-width: 94vw;
  background: var(--surface); border-left: 1px solid var(--border-2);
  box-shadow: -16px 0 40px rgba(var(--shadow-rgb),calc(.5*var(--shadow-k))); z-index: 1501; transition: right .22s ease;
  display: flex; flex-direction: column;
}
.int-panel.open { right: 0; }
.int-panel-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.int-panel-name { font-size: 14px; font-weight: 700; color: var(--text); }
.int-panel-cat { font-size: 10.5px; color: var(--text-faint); }
.int-panel-body { flex: 1; overflow-y: auto; padding: 18px 20px; scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
.int-panel-body::-webkit-scrollbar { width: 4px; }
.int-panel-body::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 3px; }
.int-panel-close {
  margin-left: auto; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border-2);
  display: flex; align-items: center; justify-content: center; color: var(--text-dim); cursor: pointer; flex-shrink: 0;
}
.int-panel-close:hover { color: var(--text); background: var(--surface-2); }
.int-desc { font-size: 12px; color: var(--text-dim); line-height: 1.55; margin-top: 10px; }
.int-field-lbl { font-size: 11px; font-weight: 600; color: var(--text-dim); margin: 16px 0 6px; }
.int-lbl-note { font-weight: 400; color: var(--text-faint); }
.int-lastsync { font: 400 10px var(--fm); color: var(--text-faint); float: right; }
.int-input {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 7px;
  padding: 9px 11px; font: 400 12.5px var(--fm); color: var(--text);
}
.int-input::placeholder { color: var(--text-faint); font-family: var(--fn); }
.int-input[readonly] { color: var(--text-dim); cursor: text; }
.int-input-sm { padding: 5px 8px; font-size: 11px; }
.int-token { font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; padding: 9px 11px; }
.int-copy-row { display: flex; gap: 6px; }
.int-copy-row .int-input { flex: 1; }
.int-copy-btn { background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 7px; padding: 0 12px; color: var(--text-muted); font: 600 11px var(--fn); cursor: pointer; }
.int-copy-btn:hover { color: var(--text); }
.int-scopes { display: flex; flex-direction: column; gap: 7px; }
.int-scope-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.int-scope-row input { accent-color: var(--accent); }
.int-env-row { display: flex; gap: 6px; }
.int-env-btn { flex: 1; text-align: center; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 7px; padding: 7px; font-size: 11.5px; font-weight: 600; color: var(--text-dim); cursor: pointer; }
.int-env-btn.on { background: var(--accent-bg); color: var(--accent); border-color: transparent; }
.int-actions { display: flex; gap: 8px; margin-top: 20px; }
.int-btn { flex: 1; padding: 9px; border-radius: 8px; font: 600 12.5px var(--fn); cursor: pointer; border: none; transition: opacity .12s; }
.int-btn:hover { opacity: .85; }
.int-btn.primary { background: var(--accent); color: var(--accent-ink); }
.int-btn.primary:disabled { background: var(--surface-3); color: var(--text-faint); cursor: not-allowed; }
.int-btn.ghost { background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border-2); }
.int-btn.danger { background: var(--danger-bg); color: var(--danger); }
.int-btn-full { flex: none; width: 100%; }
.int-btn-sm { flex: none; padding: 6px 12px; }
.int-test-result { font-size: 11.5px; margin-top: 8px; display: none; padding: 8px 10px; border-radius: 7px; color: var(--text-dim); }
.int-test-result.show { display: block; }
.int-test-result.ok { background: rgba(var(--accent-rgb),.08); color: var(--accent); border: 1px solid rgba(var(--accent-rgb),.2); }
.int-test-result.fail { background: rgba(var(--danger-rgb),.08); color: var(--danger); border: 1px solid rgba(var(--danger-rgb),.2); }
.int-test-result.warn { background: rgba(var(--amber-rgb),.08); color: var(--amber); border: 1px solid rgba(var(--amber-rgb),.25); }
.int-health { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.int-health-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; }
.int-health-lbl { font: 400 9px var(--fm); color: var(--text-faint); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px; }
.int-health-val { font-size: 15px; font-weight: 700; color: var(--text); }
.int-statusmap-row { display: grid; grid-template-columns: 1fr 20px 1fr; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 11.5px; color: var(--text-muted); }
.int-statusmap-arrow { color: var(--text-faint); text-align: center; }
.int-2way { display: flex; align-items: center; gap: 10px; font-size: 11.5px; }
.int-switch { position: relative; display: inline-block; width: 38px; height: 20px; }
.int-switch input { opacity: 0; width: 0; height: 0; }
.int-switch-track { position: absolute; inset: 0; background: var(--surface-3); border-radius: 20px; transition: .15s; }
.int-switch input:checked + .int-switch-track { background: var(--accent); }
.int-switch-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: .15s; pointer-events: none; }
.int-switch input:checked ~ .int-switch-knob { left: 20px; }
.int-sync-rows { display: flex; flex-direction: column; gap: 8px; }
.int-sync-row { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.int-sync-main { flex: 1; }
.int-sync-t { font-size: 12px; font-weight: 600; color: var(--text); }
.int-sync-s { font-size: 10.5px; color: var(--text-faint); }
.int-log { margin-top: 8px; }
.int-log-item { display: flex; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 11px; }
.int-log-item:last-child { border-bottom: none; }
.int-log-time { color: var(--text-faint); font-family: var(--fm); flex-shrink: 0; }
.int-log-text { color: var(--text-muted); }
.int-log-text b { color: var(--text-dim); font-weight: 600; }
.int-log-empty { color: var(--text-faint); }
.int-security-note { font-size: 10.5px; color: var(--text-faint); line-height: 1.5; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.int-add-modal {
  display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 420px; max-width: 94vw; max-height: 85dvh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(var(--shadow-rgb),calc(.5*var(--shadow-k))); z-index: 1601;
}
.int-add-modal.open { display: block; }
.int-add-body { padding: 18px 20px; }
/* Wired page (integrations-gap note, 6 Oct 2026) */
.int-demo-tag { display: inline-block; margin-left: 7px; vertical-align: 1px; font: 700 8.5px var(--fm); letter-spacing: .4px; text-transform: uppercase; padding: 2px 6px; border-radius: 10px; background: var(--surface-3); color: var(--text-dim); border: 1px solid var(--border-2); }
.int-card-note { margin-left: auto; font: 400 10px var(--fm); color: var(--text-faint); }
.int-empty { font-size: 13px; color: var(--text-dim); padding: 28px 0; }
.int-field-lbl.int-sublbl { margin: 10px 0 5px; font-weight: 500; }
.int-payer-row { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; flex-wrap: wrap; }
.int-payer-main { flex: 1; min-width: 160px; }
.int-payer-form { background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 8px; padding: 12px; }
.int-payer-form .int-input { background: var(--surface); }
.int-payer-accts { max-height: 160px; overflow-y: auto; }
.int-run-ok { color: var(--accent); font-weight: 600; }
.int-run-failed { color: var(--danger); font-weight: 600; }
.int-run-running { color: var(--amber); font-weight: 600; }
.int-run-err { color: var(--danger); }
.int-btn:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 900px) {
  .int-hero-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .int-toolbar { flex-wrap: wrap; }
  .int-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .int-hero-card { padding: 12px 14px; }
  .int-hero-card .int-hero-val { font-size: 22px; }
  .int-panel { width: 100vw; max-width: 100vw; }
}

/* ── Drivers v2 (d1/d2 handoff, 31 Aug 2026): list + record pattern ─────────
   First entity of the admin redesign. Rows are hairlines on the page
   background (no table card); names regular weight; teal = selection/active. */
#topbar.drv-hidden { display: none; }
#page-content.drv-full { padding: 0; display: flex; flex-direction: column; overflow: hidden; }

.drv-page { display: flex; flex-direction: column; height: 100%; min-height: 0; position: relative; }
.drv-head { padding: 20px 30px 0; flex-shrink: 0; }
.drv-title { font-size: 22px; font-weight: 700; letter-spacing: -.4px; }
.drv-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 5px; }

.drv-ask { display: flex; align-items: center; gap: 9px; background: linear-gradient(180deg, rgba(var(--blue2-rgb),.13), rgba(var(--accent-rgb),.09)); border: 1px solid rgba(var(--accent-rgb),.26); border-radius: 9px; padding: 7px 11px; width: 286px; cursor: pointer; }
.drv-ask:hover { border-color: rgba(var(--accent-rgb),.55); }
/* QA 4 Oct #25: the ⌘K badge always sits inside the field at its trailing
   edge; a prompt too long for the field truncates instead of pushing it out
   (a page with a long prompt widens its own field, e.g. Developers). */
.drv-ask { box-sizing: border-box; max-width: 100%; }
/* QA 19 Oct #6: the pill is 32 px like the search box and icon buttons beside it. */
.drv-ask { height: 32px; padding-top: 0; padding-bottom: 0; }
.drv-ask > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.drv-ask > span:last-child:not(:first-of-type) { flex: none; }
.drv-iconbtn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border-2); background: none; display: flex; align-items: center; justify-content: center; color: var(--text-muted); cursor: pointer; flex-shrink: 0; }
.drv-iconbtn:hover { background: var(--surface-2); color: var(--text); }
.drv-primary { background: var(--accent); color: var(--accent-ink); font: 600 13px/1 var(--fn); padding: 0 14px; height: 32px; border: none; border-radius: 9px; display: flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; box-shadow: 0 6px 18px -6px rgba(var(--accent-rgb),.7); }
.drv-primary:hover { background: var(--accent-hover); }

.drv-tabs { display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 3px; gap: 2px; }
.drv-tab { display: flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 6px; cursor: pointer; font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }
.drv-tab.on { background: var(--surface-4); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(var(--shadow-rgb),calc(.4*var(--shadow-k))); }
.drv-tab .ct { font: 11px var(--fm); color: var(--text-low); }
.drv-tab.on .ct { color: var(--accent); }

.drv-pill { display: flex; align-items: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.drv-pill.filtered { background: rgba(var(--accent-rgb),.10); border-color: rgba(var(--accent-rgb),.3); color: var(--accent); }
.drv-pill.dashed { background: none; border-style: dashed; border-color: var(--border-3); }
.drv-pill.dashed:hover { border-color: rgba(var(--accent-rgb),.5); color: var(--accent); }

.drv-pop { position: absolute; top: 36px; left: 0; width: 220px; background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 10px; padding: 6px; box-shadow: 0 16px 40px rgba(var(--shadow-rgb),calc(.6*var(--shadow-k))); z-index: 30; }
.drv-pop.flip { left: auto; right: 0; }
.drv-pop-head { font-size: 10.5px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.drv-pop input[type=text] { width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 12px; border-radius: 6px; padding: 6px 8px; margin: 2px 0 5px; outline: none; }
.drv-opt { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 6px; font-size: 12.5px; cursor: pointer; color: var(--text-muted); }
.drv-opt:hover { background: var(--surface-4); }
.drv-check { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--border-4); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.drv-check.on { border-color: var(--accent); background: var(--accent); }
/* Multi-pick dropdown (multiPick.js, QA 18 Oct part 2 #13) */
.mp { position: relative; min-width: 0; }
.mp-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; cursor: pointer; }
.mp-btn:disabled { cursor: default; opacity: .6; }
.mp-btn-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-btn-label.empty { color: var(--text-dim); }
.mp-pop { top: calc(100% + 4px); left: 0; width: 100%; min-width: 220px; box-sizing: border-box; z-index: 40; }
.mp-pop.right { left: auto; right: 0; }
.mp-list { max-height: 240px; overflow-y: auto; }
.mp-opt[hidden], .mp-none[hidden] { display: none; }
.mp-opt-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-opt-sub { margin-left: auto; font-size: 11px; color: var(--text-dim); flex: none; }
.mp-none { padding: 9px 8px; font-size: 12px; color: var(--text-dim); }
.mp-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); margin-top: 5px; padding: 7px 8px 3px; }
.mp-link { background: none; border: none; padding: 0; font: inherit; font-size: 12px; cursor: pointer; }
.drv-link { font-size: 11.5px; color: var(--accent); cursor: pointer; }

.drv-scroll { flex: 1; overflow: auto; padding: 0 30px 6px; min-height: 0; }
.drv-table { border-top: 1px solid var(--border); }
.drv-thead { display: flex; align-items: center; padding: 0 14px; height: 38px; border-bottom: 1px solid var(--border); font-size: 11.5px; font-weight: 500; color: var(--text-dim); }
.drv-th-sort { cursor: pointer; display: flex; align-items: center; gap: 5px; }
.drv-row { display: flex; align-items: center; padding: 0 14px; border-bottom: 1px solid var(--border-soft); cursor: pointer; }
.drv-row:hover { background: var(--row-hover); }
.drv-row.sel { background: rgba(var(--accent-rgb),.05); box-shadow: inset 2px 0 0 var(--accent); }
.drv-row.row-flash { animation: bkbflash 3s ease-out 1; }   /* a just-created record (QA 19 Oct #11, recordCreate.js) */
.drv-row input[type=checkbox], .drv-thead input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; }
.drv-chip { font-size: 10.5px; padding: 2px 8px; border-radius: 20px; background: var(--surface-3); color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.drv-chip.dim { background: var(--surface-2); color: var(--text-dim); }
.drv-dots { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.drv-dots:hover { background: var(--surface-4); color: var(--text); }

.drv-menu { position: fixed; width: 196px; background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 10px; padding: 5px; box-shadow: 0 20px 50px rgba(var(--shadow-rgb),calc(.7*var(--shadow-k))); z-index: 80; }
.drv-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px; border-radius: 6px; font-size: 12.5px; color: var(--text-muted); cursor: pointer; }
.drv-menu-item:hover { background: var(--surface-4); }
.drv-chooser input[type=text] { width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 12px; border-radius: 6px; padding: 6px 8px; margin: 2px 0 5px; outline: none; }

.drv-foot { flex-shrink: 0; padding: 12px 30px; display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-dim); }
.drv-foot select { width: auto; }
.drv-pagebtn { font-size: 12px; min-width: 28px; text-align: center; padding: 6px 8px; border-radius: 6px; cursor: pointer; color: var(--text-muted); }
.drv-pagebtn.on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }

.drv-selbar { position: absolute; bottom: 66px; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; z-index: 20; }
.drv-selbar > div { pointer-events: auto; display: flex; align-items: center; gap: 12px; background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 12px; padding: 9px 14px; box-shadow: 0 18px 44px rgba(var(--shadow-rgb),calc(.65*var(--shadow-k))); font-size: 12.5px; }
.drv-selbar .act { color: var(--text-muted); cursor: pointer; }
.drv-selbar .act:hover { color: var(--text); }
/* T37: a long action's progress over the selection bar (bulkProgress.js); the bar's actions wait */
.bulk-running .drv-selbar .act, .bulk-running .drv-selbar [data-selallresults] { pointer-events: none; opacity: .45; }
.bulk-busy { position: fixed; z-index: 60; transform: translate(-50%, -50%); display: flex; justify-content: center; pointer-events: auto; }
.bulk-busy > div, .bkb-busy { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-soft); white-space: nowrap; }
.bulk-busy > div { width: 100%; justify-content: center; background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 12px; padding: 9px 14px; box-shadow: 0 18px 44px rgba(var(--shadow-rgb),calc(.65*var(--shadow-k))); box-sizing: border-box; }
.bulk-busy .dot, .bkb-busy .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: bkbpulse 1.6s ease-in-out infinite; flex: none; }
.bulk-busy .track, .bkb-busy .track { position: relative; width: 140px; height: 4px; border-radius: 2px; background: var(--surface); overflow: hidden; flex: none; }
.bulk-busy .bar, .bkb-busy .bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); border-radius: 2px; transition: width .3s; }
.bulk-busy .bar.ind, .bkb-busy .bar.ind { width: 35%; animation: bulkind 1.2s ease-in-out infinite; }
.bulk-busy .cnt, .bkb-busy .cnt { font: 11px var(--fm); color: var(--text-dim); }
@keyframes bulkind { 0% { left: -35%; } 100% { left: 100%; } }

/* record page */
.drv-card { background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 18px; }
.drv-card-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin-bottom: 14px; }
.drv-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.drv-flabel { font-size: 11.5px; color: var(--text-mid); margin-bottom: 6px; }
.drv-input { width: 100%; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 8px; padding: 9px 11px; color: var(--text); font-size: 13px; outline: none; font-family: inherit; }
.drv-input.err { border-color: rgba(var(--danger-rgb),.55); }
.drv-input.mono { font-family: var(--fm); font-size: 12.5px; }
.drv-ferr { font-size: 11px; color: var(--danger-soft); margin-top: 5px; }
.drv-fhint { font-size: 11px; color: var(--text-dim); margin-top: 5px; }
select.drv-input { appearance: none; }
.drv-rectabs { display: flex; gap: 22px; border-bottom: 1px solid var(--border); }
.drv-rectab { font-size: 13px; padding-bottom: 10px; border-bottom: 2px solid transparent; color: var(--text-mid); cursor: pointer; }
.drv-rectab.on { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.drv-rectab.off { color: var(--text-quiet); cursor: default; }
.drv-savebar { flex-shrink: 0; padding: 13px 30px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 12px; background: var(--surface); }
.drv-ghostbtn { font-size: 12.5px; font-weight: 600; color: var(--text-muted); padding: 8px 14px; border-radius: 8px; cursor: pointer; border: none; background: none; }
.drv-ghostbtn:hover { background: var(--surface-3); color: var(--text); }
.drv-secbtn { font-size: 12px; font-weight: 600; padding: 7px 13px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; white-space: nowrap; color: var(--text); }
.drv-secbtn:hover { background: var(--surface-3); }
.drv-toggle { width: 30px; height: 17px; border-radius: 20px; background: var(--border-2); position: relative; flex-shrink: 0; transition: background .12s; }
.drv-toggle .knob { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--text-dim); transition: left .12s, background .12s; }
.drv-toggle.on { background: rgba(var(--accent-rgb),.5); }
.drv-toggle.on .knob { left: 15px; background: var(--accent); }

/* searchable multi-select */
.msel-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.msel-pill { display: flex; align-items: center; gap: 7px; font-size: 12px; padding: 5px 9px 5px 11px; border-radius: 20px; background: rgba(var(--accent-rgb),.10); border: 1px solid rgba(var(--accent-rgb),.28); color: var(--accent); }
.msel-pill.red { background: rgba(var(--danger-rgb),.09); border-color: rgba(var(--danger-rgb),.26); color: var(--danger-soft); }
.msel-pill .x { opacity: .6; cursor: pointer; }
.msel-overflow { font-size: 12px; padding: 5px 11px; border-radius: 20px; background: var(--surface-3); color: var(--text-mid); cursor: pointer; }
.msel-pop { position: absolute; left: 0; top: 100%; margin-top: 6px; width: 320px; background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 10px; padding: 7px; box-shadow: 0 18px 44px rgba(var(--shadow-rgb),calc(.65*var(--shadow-k))); z-index: 40; }
.msel-pop input { width: 100%; background: var(--surface); border: 1px solid var(--border-2); color: var(--text); font-size: 12px; border-radius: 6px; padding: 7px 9px; outline: none; margin-bottom: 5px; }
.msel-list { max-height: 236px; overflow-y: auto; }
.msel-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--border); margin-top: 5px; padding: 8px 8px 4px; }
.msel-scope { font: 10.5px var(--fm); color: var(--text-dim); }

/* ask-orqi modal */
.drv-orqi-overlay { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: flex-start; justify-content: center; padding-top: 110px; z-index: 100; }
.drv-orqi { width: 580px; background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 14px; box-shadow: 0 30px 80px rgba(var(--shadow-rgb),calc(.7*var(--shadow-k))); overflow: hidden; }
.drv-orqi textarea { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 15px; line-height: 1.45; resize: none; font-family: inherit; }
.drv-orqi-sug { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-muted); padding: 8px; margin: 0 -8px; border-radius: 7px; cursor: pointer; }
.drv-orqi-sug:hover { background: var(--surface-4); color: var(--text); }

/* Ask Orqi hover, unified with the drivers page pill */
.list-ask:hover, .cc-ask:hover, .drv-ask:hover { border-color: rgba(var(--accent-rgb),.55); }
.list-ask .cc-ask-label, .cc-ask .cc-ask-label { color: var(--accent); }

/* Record-form tabs (design alignment with the driver record) */
.modal-tabs { display: flex; gap: 22px; padding: 10px 30px 0; border-bottom: 1px solid var(--border); background: var(--bg); }
.modal-tabs .drv-rectab.off { cursor: not-allowed; }

/* ── Booking record page (jobs handoff) ──────────────────────────────────────
   Shares the drv-* shell; only the summary map bits are new. Tile filter
   matches the command center's dark map. */
.bkg-map.leaflet-container { background: var(--map-bg); }
.bkg-map .leaflet-tile { filter: grayscale(85%) brightness(.62) contrast(1.15) sepia(6%) hue-rotate(178deg) saturate(120%); }
.bkg-pd { display: flex; align-items: center; justify-content: center; border-radius: 50%; font: 700 11px var(--fn); color: var(--accent-ink); }
.bkg-pd-p { background: var(--accent); box-shadow: 0 0 0 5px rgba(var(--accent-rgb),.14); }
.bkg-pd-d { background: var(--blue2); box-shadow: 0 0 0 5px rgba(var(--blue2-rgb),.14); }
.bkg-pd-tip { background: var(--glass); border: 1px solid var(--border-2); color: var(--text-soft); font-size: 10.5px; border-radius: 7px; padding: 3px 9px; }
.bkg-pd-tip::before { display: none; }

/* ── Dispatch board (#bookings, Trips v4.5 handoff) ──────────────────────────
   Shares the drv-* shell + bkg-map dark tiles; only board-specific bits here. */
@keyframes bkbpulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.bkb-row:hover { background: var(--row-hover) !important; }
#bkb-map.leaflet-container, #tp-map.leaflet-container { background: var(--map-bg); }
#bkb-map .leaflet-tile, #tp-map .leaflet-tile { filter: grayscale(85%) brightness(.62) contrast(1.15) sepia(6%) hue-rotate(178deg) saturate(120%); }
#bkb-mapbox .leaflet-control-zoom a { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); }
/* Focus on the board map dims per trip: the focused trip stays at full
   strength, every other one drops to 32% (polylines via fadeOpacity in
   liveTrips, markers via .live-faded). Nothing focused = everything shown. */
#bkb-mapbox .live-faded { opacity: .32; }
/* Vehicles pill off: every car goes but the focused trip's (driverMarker.js,
   .dm-own in its own pane) and those of trips drawn by Show on map (QA 19 Oct #4). */
#bkb-mapbox.bkb-hide-veh .live-driver-marker:not(.dm-own):not(.live-car-keep) { display: none; }
/* Selection-driven map (bookings round B1/B2): routes and stops of trips that
   are neither hovered nor selected are not drawn at all. */
.live-hidden { display: none !important; }
.bkb-mappills { position: absolute; top: 10px; right: 12px; display: flex; gap: 6px; z-index: 500; }
.bkb-mappill { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); font-size: 11.5px; color: var(--text-mid); cursor: pointer; white-space: nowrap; user-select: none; }
.bkb-mappill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-quiet); flex: none; }
.bkb-mappill.on { color: var(--accent); }
.bkb-mappill.on .dot { background: var(--accent); }
.bkb-mappill.legend { cursor: default; }
/* "New bookings arrived" pill (round B9): a solid, elevated surface above the table. */
.bkb-livepill { pointer-events: auto; display: flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--border-3); border-radius: 20px; padding: 5px 12px; cursor: pointer; box-shadow: 0 8px 24px rgba(10, 22, 40, .14); position: relative; z-index: 31; }
:root:not([data-theme="light"]) .bkb-livepill { box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
:root[data-theme="light"] .bkb-livepill { background: #FFFFFF; }
/* Bulk bar More ▾ menu (round B7): drawn outside the bar, fixed, placed from
   the More button by paintFloat — no parent can clip it (QA 19 Oct #14). */
.bkb-more { position: fixed; pointer-events: auto; min-width: 180px; background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 9px; padding: 5px; box-shadow: 0 16px 40px rgba(var(--shadow-rgb), calc(.6 * var(--shadow-k))); z-index: 1100; }
.bkb-more-item { font-size: 12.5px; padding: 7px 9px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.bkb-more-item:hover { background: var(--surface-4); }
/* QA 20 Oct #4: why Route can't run, on the More menu's surface, above Route. */
.bkb-routepop { min-width: 0; width: max-content; max-width: min(280px, calc(100vw - 16px)); padding: 10px 12px; font-size: 12.5px; line-height: 1.45; color: var(--text); display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.bkb-row { user-select: none; }
/* Focused booking: pickup / drop-off pins with their place labels. */
.bkb-pd { display: flex; align-items: center; justify-content: center; border-radius: 50%; font: 700 11px var(--fn); color: var(--accent-ink); }
.bkb-pd-p { background: var(--accent); box-shadow: 0 0 0 6px rgba(var(--accent-rgb),.18); }
.bkb-pd-d { background: var(--blue2); box-shadow: 0 0 0 6px rgba(var(--blue2-rgb),.18); }
.bkb-pd-tip { background: var(--glass); border: 1px solid var(--border-2); color: var(--text-soft); font-size: 11px; border-radius: 7px; padding: 3px 9px; box-shadow: none; }
.bkb-pd-tip::before { display: none; }
/* Booking rows drag onto trip rows to move between trips. */
.bkb-row[data-drag-bk] { cursor: grab; }
.bkb-row.bkb-droptarget { box-shadow: inset 0 0 0 1.5px var(--accent) !important; background: rgba(var(--accent-rgb),.08) !important; }
/* QA 18 Oct part 2: the selection bar keeps one height in every state (#20).
   One line, never scrolled: what doesn't fit moves into More (QA 19 Oct #14). */
.bkb-selbar { pointer-events: auto; position: relative; display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; height: 40px; box-sizing: border-box; background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 12px; padding: 0 10px 0 14px; box-shadow: 0 18px 44px rgba(var(--shadow-rgb),calc(.65*var(--shadow-k))); max-width: calc(100% - 32px); white-space: nowrap; }
.bkb-selbar > * { flex: none; }
.bkb-tip { position: fixed; z-index: 2000; max-width: 280px; padding: 6px 9px; border-radius: 7px; background: var(--surface-4); border: 1px solid var(--border-2); color: var(--text); font-size: 11.5px; line-height: 1.4; box-shadow: 0 10px 28px rgba(var(--shadow-rgb),calc(.5*var(--shadow-k))); pointer-events: none; display: none; }
/* #11: the focus card's "no location" note. */
.bkb-carnote { font-size: 11px; color: var(--amber); background: rgba(var(--amber-rgb),.1); border-radius: 5px; padding: 2px 7px; flex: none; white-space: nowrap; }
/* #24: a driver's day on the board map, with the Shifts › Open navigator. */
/* QA 19 Oct #9: the day map's navigator (dayMap.js) over the board map —
   Dock right: across the bottom, up to 560 px (clear of the zoom control);
   Dock top: a 380 px card on the left. */
.bkb-daynav { position: absolute; z-index: 500; left: 12px; right: 52px; bottom: 16px; max-width: 560px; }
.bkb-daynav.top { right: auto; bottom: auto; top: 10px; width: 380px; max-width: calc(100% - 24px); }
.bkb-daynav .dd-nav { box-shadow: 0 8px 24px rgba(var(--shadow-rgb),calc(.3*var(--shadow-k))); }
/* #21: the drop target breakdown. */
#trip-panel.bkb-droptarget { outline: 2px solid var(--accent); outline-offset: -2px; }
/* T34: the board's popovers (assign / Move to trip picker, menus) open above
   the trip panel (z 900) too — its Move to trip… opened the picker under it. */
#bkb-pop { position: relative; z-index: 950; }
/* Map layer checkboxes reuse the command-center option row. */
#bkb-mapui .cc-fp-opt { padding: 3px 4px; font-size: 11.5px; }
/* Contain each Leaflet map's internal z-indexes (panes reach ~1000) so the
   board's popovers/menus and the trip panel's floating bar stack above them. */
#bkb-mapbox { z-index: 0; }
#tp-map { z-index: 0; position: relative; }

/* ── Light mode: maps ─────────────────────────────
   The dark tile filter (grayscale + darken + hue-rotate) exists only to sink
   OSM's light tiles into the dark UI; light mode shows the tiles as they are. */
:root[data-theme="light"] .cc-mapzone .leaflet-tile,
:root[data-theme="light"] .bkg-map .leaflet-tile,
:root[data-theme="light"] #bkb-map .leaflet-tile,
:root[data-theme="light"] #tp-map .leaflet-tile { filter: saturate(.85); }

/* ── Call-center call-center home (call-center handoff, 1 Sep 2026) ─────────────
   js/callCenter.js (rail, alias card, badge) + js/callCenterHome.js (the page). */
@keyframes clc-ticker { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes clc-pulse  { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

.call-center-badge { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--amber); background: var(--amber-bg); border: 1px solid rgba(var(--amber-rgb),.25); border-radius: 5px; padding: 2px 6px; white-space: nowrap; }
#sidebar.collapsed .call-center-badge { display: none; }
#sidebar.call-center > nav.sidebar-nav:not(#call-center-nav) { display: none; }
.call-center-alias { background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px; padding: 11px 12px; margin-bottom: 10px; flex-shrink: 0; }
.call-center-alias-h { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); margin-bottom: 6px; }
.call-center-alias-n { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-center-alias-o { font-size: 11px; color: var(--text-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sidebar.collapsed .call-center-alias { display: none; }

.clc-page { background: var(--bg); }
.clc-scroll { flex: 1; overflow: auto; padding: 26px 34px 34px; }
.clc-wrap { max-width: 1120px; margin: 0 auto; }
.clc-page kbd { font: 9.5px var(--fm); color: var(--text-dim); border: 1px solid var(--border-2); border-radius: 4px; padding: 1px 6px; flex: none; }
.clc-page .mono { font-family: var(--fm); }
.clc-link { font-size: 11.5px; color: var(--accent); cursor: pointer; white-space: nowrap; }
.clc-link:hover { color: var(--accent-hover); }
.clc-empty { font-size: 12px; color: var(--text-dim); padding: 10px 0 4px; line-height: 1.5; }
.clc-empty kbd { color: var(--text-mid); }

/* ticker */
.clc-tk { flex: none; display: flex; align-items: center; background: var(--surface); border-bottom: 1px solid rgba(var(--amber-rgb),.2); overflow: hidden; }
.clc-tk-label { flex: none; display: flex; align-items: center; gap: 7px; padding: 7px 14px; background: rgba(var(--amber-rgb),.08); border-right: 1px solid rgba(var(--amber-rgb),.2); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--amber); white-space: nowrap; }
.clc-tk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); animation: clc-pulse 1.8s ease-in-out infinite; }
.clc-tk-track { flex: 1; overflow: hidden; position: relative; }
.clc-tk-run { display: flex; width: max-content; animation: clc-ticker 42s linear infinite; }
.clc-tk-track:hover .clc-tk-run { animation-play-state: paused; }
.clc-tk-item { font-size: 12px; color: var(--text-soft); white-space: nowrap; padding: 7px 0; }
.clc-tk-item i { font-style: normal; color: var(--text-quiet); padding: 0 18px; }
.clc-tk-hide { flex: none; width: 26px; height: 26px; margin: 0 8px; border-radius: 6px; border: 0; background: none; color: var(--text-dim); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.clc-tk-hide:hover { background: var(--surface-3); color: var(--text); }

/* header */
.clc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; row-gap: 10px; }
.clc-greet { font-size: 22px; font-weight: 700; letter-spacing: -.4px; color: var(--text); }
.clc-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 5px; }
.clc-new { background: var(--accent); color: var(--accent-ink); font: 600 13.5px var(--fn); padding: 10px 18px; border: 0; border-radius: 10px; display: flex; align-items: center; gap: 7px; cursor: pointer; flex-shrink: 0; white-space: nowrap; box-shadow: 0 6px 18px -6px rgba(var(--accent-rgb),.7); }
.clc-new:hover { background: var(--accent-hover); }
.clc-new kbd { color: inherit; opacity: .65; border-color: rgba(8,17,15,.3); }

/* search + orqi */
.clc-toolrow { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.clc-search { position: relative; flex: 2.2; min-width: 360px; }
.clc-searchbox { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 11px; padding: 0 14px; color: var(--text-dim); }
.clc-searchbox.open { border-color: rgba(var(--accent-rgb),.45); }   /* focus: the shared search rule (T9) */
.clc-searchbox input { flex: 1; background: none; border: 0; outline: none; color: var(--text); font: 13.5px var(--fn); padding: 12px 0; min-width: 0; }
.clc-dropdown { position: absolute; left: 0; right: 0; top: 100%; margin-top: 5px; background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 11px; padding: 6px; box-shadow: 0 20px 50px rgba(var(--shadow-rgb),calc(.65*var(--shadow-k))); z-index: 40; max-height: 60vh; overflow: auto; }
.clc-res-title { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); padding: 6px 10px 4px; }
.clc-res-empty { padding: 11px; font-size: 12px; color: var(--text-dim); }
.clc-res-foot { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--border); margin-top: 4px; padding: 7px 10px 3px; font-size: 10.5px; color: var(--text-dim); }
.clc-row { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 8px; cursor: pointer; min-width: 0; }
.clc-res:hover, .clc-res.hl { background: var(--surface-4); }
.clc-res-main { flex: 1; min-width: 0; }
.clc-res-name { font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clc-res-name span { color: var(--text-dim); }
.clc-res-sub { font-size: 11px; color: var(--text-dim); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clc-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
.clc-code { font: 11.5px var(--fm); color: var(--accent); flex: none; width: 74px; }
.clc-status { font-size: 10.5px; flex: none; text-align: right; white-space: nowrap; }
.clc-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--border-soft); color: var(--blue2); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex: none; }
.clc-avatar.lg { width: 34px; height: 34px; font-size: 12px; }
.clc-orqi { flex: 1; min-width: 250px; display: flex; align-items: center; gap: 9px; background: linear-gradient(180deg, rgba(var(--blue2-rgb),.13), rgba(var(--accent-rgb),.09)); border: 1px solid rgba(var(--accent-rgb),.26); border-radius: 11px; padding: 0 14px; cursor: pointer; }
.clc-orqi:hover, .clc-orqi.open { border-color: rgba(var(--accent-rgb),.55); }
.clc-orqi-text { font-size: 12.5px; color: var(--accent); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clc-orqi input { flex: 1; background: none; border: 0; outline: none; color: var(--text); font: 12.5px var(--fn); padding: 12px 0; min-width: 0; }
.clc-orqi kbd { color: rgba(var(--accent-rgb),.7); border-color: rgba(var(--accent-rgb),.28); }

/* kpis */
.clc-kpis { display: flex; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.clc-kpi { flex: 1; min-width: 130px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 15px; }
.clc-kpi.clickable { cursor: pointer; }
.clc-kpi.clickable:hover { border-color: var(--border-3); }
.clc-kpi-v { font: 19px var(--fm); }
.clc-kpi-l { font-size: 11px; color: var(--text-dim); margin-top: 3px; white-space: nowrap; }

/* grid + cards */
.clc-grid { display: grid; grid-template-columns: minmax(0,1fr) 296px; gap: 16px; align-items: start; }
@media (max-width: 980px) { .clc-grid { grid-template-columns: minmax(0,1fr); } }
.clc-main, .clc-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.clc-card { background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 16px 18px; }
.clc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.clc-card-title { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.clc-card-hint { font-size: 10.5px; color: var(--text-dim); }
.clc-pill-amber { font-size: 10px; color: var(--amber); background: var(--amber-bg); border: 1px solid rgba(var(--amber-rgb),.22); border-radius: 20px; padding: 2px 8px; white-space: nowrap; }
.clc-rows { display: flex; flex-direction: column; }
.clc-bk { gap: 12px; padding: 10px 8px; margin: 0 -8px; border-top: 1px solid var(--border-soft); border-radius: 7px; overflow: hidden; }
.clc-bk:hover { background: var(--surface-2); }
.clc-bk-name { font-size: 12.5px; color: var(--text); flex: 2 1 90px; min-width: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clc-bk-route { font-size: 11.5px; color: var(--text-mid); flex: 3 1 60px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clc-bk-when { font: 11px var(--fm); color: var(--text-soft); flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* weather */
.clc-wx { background: linear-gradient(180deg, var(--surface-2), var(--surface)); border-color: var(--border-2); }
.clc-wx-main { display: flex; align-items: center; gap: 14px; margin: 5px 0 12px; }
.clc-wx-temp { font-size: 22px; font-weight: 600; letter-spacing: -.4px; color: var(--text); }
.clc-wx-temp span { font-size: 12px; color: var(--text-dim); font-weight: 400; }
.clc-wx-label { font-size: 11.5px; color: var(--text-mid); margin-top: 1px; }
.clc-wx-time { text-align: right; flex: none; }
.clc-wx-clock { font: 17px var(--fm); color: var(--text); }
.clc-wx-you { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; white-space: nowrap; }
.clc-wx-hours { display: flex; gap: 6px; margin-bottom: 12px; }
.clc-wx-hours > div { flex: 1; background: var(--border-soft); border-radius: 7px; padding: 7px 4px; text-align: center; }
.clc-wx-hours .t { font-size: 9.5px; color: var(--text-dim); }
.clc-wx-hours .v { font: 11.5px var(--fm); color: var(--text-soft); margin-top: 3px; }
.clc-talk { background: var(--accent-bg-2); border: 1px solid rgba(var(--accent-rgb),.16); border-radius: 8px; padding: 8px 11px; }
.clc-talk-h { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--accent); margin-bottom: 3px; }
.clc-talk-b { font-size: 11.5px; color: var(--text-soft); line-height: 1.5; text-wrap: pretty; }

/* notes + callbacks */
.clc-notes { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.clc-note { display: flex; gap: 9px; align-items: flex-start; }
.clc-note-t { font-size: 12px; color: var(--text-soft); line-height: 1.45; text-wrap: pretty; }
.clc-note-m { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
.clc-note.editing { background: var(--accent-bg-2); border-radius: 7px; margin: 0 -6px; padding: 4px 6px; }
.clc-note-acts { display: flex; gap: 3px; flex: none; opacity: .55; }
.clc-note:hover .clc-note-acts { opacity: 1; }
.clc-note-acts button { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border); background: none; color: var(--text-mid); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.clc-note-acts button:hover { background: var(--surface-3); color: var(--text); }
.clc-note-acts button.on { color: var(--amber); border-color: rgba(var(--amber-rgb),.4); }
.clc-noteform { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 8px; }
.clc-noteform textarea { width: 100%; box-sizing: border-box; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 8px; color: var(--text); font: 12.5px var(--fn); padding: 8px 10px; outline: none; resize: vertical; }
.clc-noteform textarea:focus { border-color: rgba(var(--accent-rgb),.5); }
.clc-noteform-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.clc-noteform-row .clc-input { padding: 5px 8px; font-size: 12px; }
.clc-check { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
.clc-cbs { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.clc-cb { display: flex; align-items: center; gap: 10px; }
.clc-cb-time { font: 11px var(--fm); flex: none; }
.clc-cb-main { flex: 1; min-width: 0; cursor: pointer; }
.clc-cb-name { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clc-cb-why { font-size: 10.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clc-iconbtn { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border-2); background: none; display: flex; align-items: center; justify-content: center; color: var(--text-muted); cursor: pointer; flex: none; text-decoration: none; }
.clc-iconbtn:hover { background: var(--surface-3); color: var(--accent); }

/* peek sheet */
.clc-peek-scrim { position: absolute; inset: 0; z-index: 100; display: flex; justify-content: flex-end; background: var(--overlay); }
.clc-peek { width: 460px; max-width: 92%; background: var(--bg); border-left: 1px solid var(--border-2); box-shadow: -20px 0 60px rgba(var(--shadow-rgb),calc(.7*var(--shadow-k))); display: flex; flex-direction: column; overflow: hidden; }
.clc-peek-head { padding: 15px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.clc-peek-sub { font-size: 12px; color: var(--text-dim); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clc-stpill { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 20px; padding: 2px 9px; font-size: 11px; color: var(--text-soft); }
.clc-stpill .clc-dot { width: 6px; height: 6px; }
.clc-peek-body { flex: 1; overflow: auto; padding: 16px 18px 24px; display: flex; flex-direction: column; gap: 12px; }
.clc-pd { background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px; padding: 13px 14px; display: flex; gap: 11px; }
.clc-pd-rail { display: flex; flex-direction: column; align-items: center; flex: none; padding-top: 2px; }
.clc-pd-p, .clc-pd-d { width: 18px; height: 18px; border-radius: 50%; color: var(--accent-ink); font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.clc-pd-p { background: var(--accent); }
.clc-pd-d { background: var(--blue2); }
.clc-pd-line { width: 1px; flex: 1; border-left: 1.5px dashed var(--border-3); margin: 4px 0; }
.clc-pd-stops { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 13px; }
.clc-pd-name { font-size: 12.5px; color: var(--text); }
.clc-pd-line2 { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.clc-facts { background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px; padding: 13px 14px; display: flex; flex-direction: column; gap: 8px; }
.clc-fact { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.clc-fact > span:first-child { font-size: 11.5px; color: var(--text-dim); flex: none; }
.clc-fact > span:last-child { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clc-note-box { background: var(--surface-2); border: 1px solid rgba(var(--amber-rgb),.18); border-radius: 8px; padding: 9px 11px; }
.clc-note-box-h { font-size: 10.5px; color: var(--amber); margin-bottom: 5px; }
.clc-attr { font-size: 10.5px; padding: 3px 9px; border-radius: 20px; background: rgba(var(--purple-rgb),.12); color: var(--purple); }
.clc-cbform { background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 8px; padding: 9px 11px; display: flex; flex-direction: column; gap: 7px; }
.clc-input { background: var(--surface); border: 1px solid var(--border-2); border-radius: 7px; color: var(--text); font: 12.5px var(--fn); padding: 7px 9px; outline: none; }
.clc-input:focus { border-color: rgba(var(--accent-rgb),.5); }
.clc-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.clc-btn { font: 12px var(--fn); padding: 8px 13px; border-radius: 8px; border: 1px solid var(--border-2); background: none; color: var(--text-soft); cursor: pointer; text-decoration: none; white-space: nowrap; }
.clc-btn:hover { border-color: rgba(var(--accent-rgb),.5); }
.clc-btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.clc-btn.primary:hover { background: var(--accent-hover); }
.clc-btn.warn { border-color: rgba(var(--amber-rgb),.4); color: var(--amber); }
.clc-btn.disabled { opacity: .45; cursor: not-allowed; }

/* ── API reference (front/api-docs.html, js/apiDocs.js) ─────────────────── */
/* Stand-alone document on the developers.make.com structure: 48 px top bar,
   256 px sticky nav, guide pages (760 px column + "On this page" rail) and
   resource pages (endpoint blocks, sticky sample / response / Try it panel).
   Tokens only; the code panel is dark in both themes. The page itself
   scrolls (the console's body is overflow hidden, so override it here). */
body.apid-body { overflow: auto; height: auto; min-height: 100%; background: var(--bg); }
.apid-top {
  position: sticky; top: 0; z-index: 5; height: 48px;
  display: flex; align-items: center; gap: 16px; padding: 0 20px;
  background: var(--surface); border-bottom: 1px solid var(--border-2);
}
.apid-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 500; white-space: nowrap; }
.apid-brand .brand-mark { width: 22px; height: 22px; }
.apid-brand .brand-mark svg { width: 14px; height: 14px; }
.apid-brand-sep { color: var(--text-dim); }
.apid-brand-title { color: var(--text-mid); font-weight: 400; }
.apid-top-search { flex: 1; display: flex; justify-content: center; min-width: 0; }
.apid-search-box { width: 100%; max-width: 440px; height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: var(--surface-2); border-radius: 6px; color: var(--text-dim); }
.apid-search-box input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; font: inherit; font-size: 13px; color: var(--text); }
.apid-search-box input::-webkit-search-cancel-button { display: none; }
.apid-search-box kbd { font: 11px var(--fn); color: var(--text-dim); border: 1px solid var(--border-2); border-radius: 4px; padding: 0 5px; line-height: 18px; }
.apid-top-right { display: flex; align-items: center; gap: 18px; font-size: 13px; white-space: nowrap; }
.apid-top-link { color: var(--text-mid); text-decoration: none; }
.apid-top-link:hover { color: var(--text); }

.apid { display: grid; grid-template-columns: 256px minmax(0, 1fr); align-items: start; }
.apid-main { min-width: 0; }

/* Left nav */
.apid-nav { position: sticky; top: 48px; height: calc(100vh - 48px); height: calc(100dvh - 48px); overflow: auto; padding: 20px 12px 24px 16px; border-right: 1px solid var(--border-2); font-size: 13px; }
.apid-nav-h { font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); padding: 22px 8px 6px; }
.apid-nav-h:first-child, .apid-nav-h.first { padding-top: 0; }
.apid-nav-list { display: flex; flex-direction: column; gap: 1px; }
.apid-nav-row, .apid-nav-child, .apid-nav-sub, .apid-nav-ep { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; color: var(--text-soft); text-decoration: none; }
.apid-nav-row:hover, .apid-nav-child:hover, .apid-nav-sub:hover, .apid-nav-ep:hover { background: var(--surface-2); }
.apid-nav-row.on, .apid-nav-child.on, .apid-nav-sub.on, .apid-nav-ep.on { background: var(--surface-3); color: var(--text); font-weight: 500; }
.apid-nav-group { justify-content: space-between; }
.apid-nav-row-l { display: flex; align-items: center; gap: 6px; min-width: 0; }
.apid-nav-n { color: var(--text-dim); font-size: 12px; font-weight: 400; }
.apid-chev { flex: none; color: var(--text-dim); transition: transform .15s; }
.apid-chev.open { transform: rotate(90deg); }
.apid-nav-children { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 12px; border-left: 1px solid var(--border-2); padding-left: 6px; }
.apid-nav-children-sub { margin-top: 0; }
.apid-nav-child, .apid-nav-sub { font-size: 12.5px; padding: 4px 8px; }
.apid-nav-sub { justify-content: space-between; }
.apid-nav-ep { font-size: 12px; padding: 4px 8px; gap: 8px; }
.apid-nav-ep.on { font-weight: 400; }
.apid-nav-ep-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apid-nav-ep .apid-m-txt { width: 44px; flex: none; font-size: 10px; }
.apid-nav-empty { padding: 4px 8px; color: var(--text-dim); margin: 0; }
.apid-nav-foot { margin-top: 28px; padding: 0 8px; font-size: 11px; color: var(--text-dim); line-height: 1.6; }

/* Methods: coloured text (nav, index) and white-on-colour badges */
.apid-m-txt { font-family: var(--fm); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.apid-m-txt.apid-m-get { color: var(--blue2); }
.apid-m-txt.apid-m-post { color: var(--accent); }
.apid-m-txt.apid-m-put { color: var(--amber); }
.apid-m-txt.apid-m-delete { color: var(--danger); }
.apid-m { display: inline-block; flex: none; font: 600 11px var(--fm); letter-spacing: .03em; color: #fff; padding: 3px 7px; border-radius: 5px; }
.apid-m.apid-m-get { background: var(--blue2); }
.apid-m.apid-m-post { background: var(--accent); color: var(--accent-ink); }
.apid-m.apid-m-put { background: var(--amber); color: var(--accent-ink); }
.apid-m.apid-m-delete { background: var(--danger); }
:root[data-theme="light"] .apid-m.apid-m-post, :root[data-theme="light"] .apid-m.apid-m-put { color: #fff; }
.apid-badge { font-size: 11px; font-weight: 500; letter-spacing: .02em; padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor; flex: none; }
.apid-badge.sm { font-size: 10px; padding: 0 6px; }
.apid-badge-beta { color: var(--blue2); }
.apid-badge-deprecated { color: var(--amber); }

/* Shared page pieces */
.apid-crumb { display: flex; gap: 6px; font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.apid-h1 { font-size: 28px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 10px; color: var(--text); }
.apid-lead { font-size: 16px; color: var(--text-soft); margin: 0 0 32px; max-width: 720px; text-wrap: pretty; line-height: 1.55; }
.apid-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--border-2); font-size: 13px; }
.apid-pager a { color: var(--text); text-decoration: none; }
.apid-pager a:hover { color: var(--accent); }
.apid-pager a.r { text-align: right; }
.apid-pager-k { font-size: 11px; color: var(--text-dim); }
.apid-foot { margin-top: 16px; font-size: 12px; color: var(--text-dim); display: flex; gap: 12px; flex-wrap: wrap; }
.apid-foot a { color: var(--text-mid); }
.apid-foot a:hover { color: var(--text); }
.apid-code, .apid-sample { background: var(--surface-3); color: var(--text); }
:root[data-theme="light"] .apid-code, :root[data-theme="light"] .apid-sample { background: var(--text); color: var(--bg); }
.apid-code { margin: 0; padding: 12px 14px; border-radius: 8px; font: 13px/1.55 var(--fm); overflow: auto; white-space: pre; }

/* Guide pages */
.apid-guide { display: grid; grid-template-columns: minmax(0, 1fr) 180px; align-items: start; }
.apid-guide-col { max-width: 760px; padding: 40px 48px 96px; min-width: 0; }
.apid-rail { position: sticky; top: 48px; max-height: calc(100vh - 48px); overflow: auto; padding: 44px 20px 24px 0; font-size: 12.5px; }
.apid-rail .apid-nav-h { padding: 0 0 8px; }
.apid-rail-list { display: flex; flex-direction: column; border-left: 1px solid var(--border-2); }
.apid-rail-list a { padding: 4px 12px; margin-left: -1px; border-left: 1px solid transparent; color: var(--text-soft); text-decoration: none; transition: color .15s, border-color .15s; }
.apid-rail-list a:hover { color: var(--text); }
.apid-rail-list a.on { color: var(--text); font-weight: 500; border-left-color: var(--text); }
@media (max-width: 1180px) { .apid-guide { grid-template-columns: minmax(0, 1fr); } .apid-rail { display: none; } }
.apid-md { color: var(--text-soft); line-height: 1.6; }
.apid-md-h2 { font-size: 16px; font-weight: 600; margin: 32px 0 8px; color: var(--text); scroll-margin-top: 72px; }
.apid-md > .apid-md-h2:first-child { margin-top: 0; }
.apid-md-h3 { font-size: 14px; font-weight: 600; margin: 20px 0 6px; color: var(--text); }
.apid-md-p { margin: 0 0 12px; }
.apid-md-p + .apid-code, .apid-code + .apid-md-p, .apid-code + .apid-callout { margin-top: 10px; }
.apid-md-list { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.apid-md b { font-weight: 500; color: var(--text); }
.apid-md code, .apid-def-desc code, .apid-summary code { font: 12.5px var(--fm); background: var(--surface-3); padding: 1px 5px; border-radius: 4px; }
.apid-md .apid-code code { background: none; padding: 0; }
.apid-md a { color: var(--accent); }
.apid-callout { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; padding: 12px 14px; background: var(--surface-3); border-radius: 8px; font-size: 13px; color: var(--text-soft); }
.apid-callout svg { flex: none; color: var(--blue2); margin-top: 3px; }
.apid-md-table-wrap { margin: 0 0 14px; }
.apid-md-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.apid-md-table th { text-align: left; font-weight: 500; color: var(--text-dim); padding: 6px 10px 6px 0; border-bottom: 1px solid var(--border-2); }
.apid-md-table td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--border); vertical-align: top; }

/* Resource page */
.apid-res { padding: 40px 48px 96px; max-width: 1240px; min-width: 0; }
.apid-res-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.apid-res-head .apid-h1 { margin: 0; }
.apid-res-path { font: 14px var(--fm); color: var(--text-mid); }
.apid-res-lead { margin: 10px 0 28px; }
.apid-index { border-top: 1px solid var(--border-2); max-width: 820px; }
.apid-index-row { display: grid; grid-template-columns: 56px auto minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 9px 4px; border-bottom: 1px solid var(--border-2); color: var(--text); text-decoration: none; }
.apid-index-row:hover { background: var(--surface-2); }
.apid-index-row code { font: 13px var(--fm); }
.apid-index-t { display: flex; align-items: baseline; gap: 8px; min-width: 0; color: var(--text-mid); font-size: 13px; }
.apid-index-t > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apid-ep { padding-top: 56px; scroll-margin-top: 72px; }
.apid-ep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 32px 40px; align-items: start; }
.apid-ep-left { min-width: 0; }
.apid-ep-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.apid-ep-grid.two .apid-ep-right { position: sticky; top: 64px; }
.apid-ep-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.apid-path { font: 500 17px var(--fm); letter-spacing: -.01em; color: var(--text); word-break: break-all; }
.apid-param { color: var(--blue2); }
.apid-link { color: var(--text-dim); font-size: 15px; text-decoration: none; }
.apid-link:hover { color: var(--text-mid); }
.apid-ep-title { font-size: 20px; font-weight: 600; margin: 14px 0 6px; letter-spacing: -.01em; color: var(--text); }
.apid-summary { color: var(--text-soft); margin: 0; text-wrap: pretty; line-height: 1.55; }
.apid-remarks { color: var(--text-mid); margin: 8px 0 0; font-size: 13px; line-height: 1.5; }
.apid-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; margin: 18px 0 0; padding: 12px 0; border-top: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2); font-size: 13px; color: var(--text-soft); }
.apid-meta-k { color: var(--text-dim); }
.apid-access { display: flex; gap: 14px; flex-wrap: wrap; }
.apid-role { color: var(--text-soft); cursor: default; }
.apid-role-full { color: var(--accent); }
.apid-role-part { color: var(--amber); }
.apid-role-none { color: var(--text-dim); }
.apid-defs { margin-top: 24px; }
.apid-resp-fields { margin-top: 28px; }
.apid-defs-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.apid-defs-h h3 { font-size: 14px; font-weight: 600; margin: 0; color: var(--text); }
.apid-defs-h span { font-size: 12px; color: var(--text-dim); }
.apid-def { padding: 11px 0; border-bottom: 1px solid var(--border-2); }
.apid-def.sm { padding: 9px 0; }
.apid-def-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.apid-def-name { font: 500 13px var(--fm); color: var(--text); }
.apid-def-type { font-size: 12.5px; color: var(--text-mid); }
.apid-def-req { font-size: 12px; color: var(--text-dim); }
.apid-def-req.required { color: var(--amber); font-weight: 500; }
.apid-def-desc { color: var(--text-soft); font-size: 13px; margin-top: 3px; text-wrap: pretty; }
.apid-enum { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.apid-enum code { font: 12px var(--fm); background: var(--surface-3); color: var(--text-soft); padding: 1px 6px; border-radius: 4px; }
.apid-none { margin-top: 24px; color: var(--text-dim); font-size: 13px; }
.apid-empty { color: var(--text-dim); margin-top: 32px; }

/* Right column: sample, response, Try it */
.apid-sample { border-radius: 10px; overflow: hidden; }
.apid-sample-bar, .apid-resp-bar { display: flex; align-items: center; gap: 2px; padding: 6px 8px; font-size: 12px; }
.apid-sample-bar { border-bottom: 1px solid rgba(255,255,255,.08); }
.apid-sample-bar .sp { flex: 1; }
.apid-tab { border: 0; background: transparent; font: inherit; font-size: 12px; padding: 4px 9px; border-radius: 5px; cursor: pointer; color: var(--text-mid); }
.apid-sample .apid-tab { color: inherit; opacity: .6; }
.apid-sample .apid-tab.on { opacity: 1; background: rgba(255,255,255,.12); color: inherit; font-weight: 400; }
.apid-copy { border: 0; background: transparent; color: inherit; opacity: .6; font: inherit; font-size: 12px; cursor: pointer; padding: 4px 8px; }
.apid-copy:hover { opacity: 1; }
.apid-sample-pre { margin: 0; padding: 12px 14px; font: 12.5px/1.55 var(--fm); overflow: auto; white-space: pre; }
.apid-sample-alt { border-top: 1px solid rgba(255,255,255,.08); padding: 8px 14px 12px; font-size: 12px; }
.apid-sample-alt span { opacity: .6; }
.apid-sample-alt pre { margin: 6px 0 0; font: 12.5px/1.5 var(--fm); white-space: pre; overflow: auto; }
.apid-resp, .apid-try { background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px; overflow: hidden; }
.apid-resp-bar { border-bottom: 1px solid var(--border-2); }
.apid-resp-k { color: var(--text-dim); padding: 4px 6px 4px 4px; }
.apid-tab.mono { font-family: var(--fm); padding: 4px 8px; color: var(--text-dim); }
.apid-tab.mono.ok { color: var(--accent); }
.apid-tab.on, .apid-tab.mono.on { background: var(--surface-3); color: var(--text); font-weight: 500; }
.apid-resp-text { padding: 10px 14px 4px; font-size: 12.5px; color: var(--text-mid); line-height: 1.5; }
.apid-resp-text:last-child { padding-bottom: 14px; }
.apid-resp-pre { margin: 0; padding: 6px 14px 14px; font: 12.5px/1.55 var(--fm); color: var(--text); overflow: auto; white-space: pre; max-height: 420px; }
.apid-try-head { width: 100%; display: flex; align-items: center; justify-content: space-between; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 500; color: var(--text); padding: 10px 14px; cursor: pointer; }
.apid-try-head:hover { background: var(--surface-2); }
.apid-try-hint { font-size: 12px; color: var(--text-dim); font-weight: 400; }
.apid-try-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.apid-try-body[hidden], .apid-token[hidden] { display: none; }
.apid-try-url { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--surface-2); border-radius: 6px; min-width: 0; }
.apid-try-url .apid-m { font-size: 10px; padding: 2px 6px; border-radius: 4px; }
.apid-try-url code { font: 12px var(--fm); color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apid-try-param { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.apid-try-param code { color: var(--text-mid); font-family: var(--fm); }
.apid-try-param input, .apid-token input { height: 30px; border: 1px solid var(--border-2); border-radius: 6px; padding: 0 10px; font: 13px var(--fm); background: var(--surface-2); color: var(--text); outline: 0; }
.apid-try-param input { width: 100px; }
.apid-try-label { font-size: 12px; color: var(--text-dim); }
.apid-try-input { width: 100%; border: 1px solid var(--border-2); border-radius: 6px; padding: 8px 10px; font: 12.5px/1.5 var(--fm); background: var(--surface-2); color: var(--text); resize: vertical; outline: 0; }
.apid-try-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.apid-try-session { font-size: 12px; color: var(--text-dim); }
.apid-try-session a { color: var(--text-mid); }
.apid-token { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim); }
.apid-try-status { font: 12px var(--fm); color: var(--text-dim); }
.apid-try-status:empty { display: none; }
.apid-try-status.ok { color: var(--accent); }
.apid-try-status.bad { color: var(--danger); }
.apid-try-out { margin: 0; padding: 10px 12px; background: var(--surface-2); border-radius: 6px; font: 12px/1.5 var(--fm); color: var(--text); overflow: auto; max-height: 360px; white-space: pre; }

.apid-gate { max-width: 420px; margin: 96px auto; text-align: center; color: var(--text-soft); }
.apid-gate h2 { color: var(--text); }

@media (max-width: 900px) {
  .apid { grid-template-columns: minmax(0, 1fr); }
  .apid-nav { position: static; height: auto; max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--border-2); }
  .apid-guide-col, .apid-res { padding: 28px 16px 72px; }
  .apid-top { padding: 0 16px; gap: 10px; }
  .apid-brand-name, .apid-brand-sep, .apid-brand-title { display: none; }
  .apid-top-link:not(:last-of-type) { display: none; }
  .apid-search-box kbd { display: none; }
}

/* ── Import v2 ─────────────────────────────────────────────────────────────────
   The import flow (front/js/importPage.js): upload → what is in it → match →
   review → History. Tokens only — see the light-mode rules. Mapping table
   column widths come from the handoff design: 232 / 268 / 336 / 190 / 148. */
.imp-page { height: 100%; }
.imp-head { height: 54px; flex-shrink: 0; display: flex; align-items: center; gap: 16px; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--border); position: relative; z-index: 20; }
.imp-head-title { font-size: 20px; font-weight: 700; letter-spacing: -.5px; flex-shrink: 0; }
.imp-head-mid { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; }
.imp-head-right { flex-shrink: 0; min-width: 60px; text-align: right; }
.imp-cancel { font-size: 12.5px; color: var(--text-dim); cursor: pointer; }
.imp-cancel:hover { color: var(--text); }
.imp-tabs { display: flex; padding: 0 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--bg); }
.imp-tab { padding: 8px 2px; margin-right: 26px; font-size: 13px; cursor: pointer; white-space: nowrap; color: var(--text-muted); border-bottom: 2px solid transparent; }
.imp-tab.on { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.imp-body { flex: 1; min-height: 0; overflow: auto; padding: 24px; }
.imp-spacer { flex: 1; }
.imp-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-low); display: inline-block; flex-shrink: 0; }
.imp-mono { font-family: var(--fm); font-size: 11px; color: var(--text-mid); }
.imp-amber { color: var(--amber); }
.amber { color: var(--amber); }
.imp-link { font-size: 11.5px; color: var(--accent); cursor: pointer; white-space: nowrap; }
.imp-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.imp-link.danger { color: var(--danger-soft); }
.imp-link.quiet { color: var(--text-dim); }
.imp-error { margin-top: 12px; font-size: 12.5px; color: var(--danger-soft); }
.imp-warn { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 12px; line-height: 1.5; color: var(--amber-soft); background: var(--amber-bg); border-radius: 7px; padding: 7px 11px; margin: 8px 0; }
.imp-warn strong { font-weight: 500; }
.imp-quiet { font-size: 12px; line-height: 1.5; color: var(--text-dim); margin: 8px 0; }
.imp-dangerbtn { font-size: 12.5px; font-weight: 600; color: var(--danger-soft); background: none; border: 1px solid rgba(var(--danger-rgb),.35); border-radius: 8px; padding: 7px 13px; cursor: pointer; white-space: nowrap; }
.imp-dangerbtn:hover { background: var(--danger-bg); }
.imp-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Rail: the position pill in the header and its queue dropdown */
.imp-rail { position: relative; }
.imp-rail-pill { display: flex; align-items: center; gap: 10px; padding: 5px 12px; border: 1px solid var(--border-2); border-radius: 20px; background: var(--surface-2); cursor: pointer; white-space: nowrap; }
.imp-rail-pill:hover { border-color: var(--border-3); }
.imp-rail-name { font-size: 12.5px; font-weight: 600; color: var(--text); }
.imp-rail-pos { font: 11px var(--fm); color: var(--text-dim); }
.imp-rail-segs { display: flex; gap: 4px; align-items: center; }
.imp-seg { width: 16px; height: 3px; border-radius: 2px; background: var(--border-2); flex-shrink: 0; }
.imp-seg.done { background: var(--accent); }
.imp-seg.here { background: var(--accent); opacity: .5; }
.imp-rail-chev { display: flex; color: var(--text-low); transition: transform .12s; }
.imp-rail-chev.open { transform: rotate(180deg); }
.imp-queue { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); width: 320px; max-width: calc(100vw - 32px); background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 10px; padding: 8px; box-shadow: 0 16px 40px rgba(var(--shadow-rgb),calc(.6*var(--shadow-k))); z-index: 40; }
.imp-queue-title { font-size: 10.5px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; padding: 4px 11px 8px; }
.imp-queue-row { display: flex; align-items: center; gap: 10px; padding: 7px 11px; border-radius: 7px; }
.imp-queue-row.can { cursor: pointer; }
.imp-queue-row.can:hover { background: var(--surface-4); }
.imp-queue-row.now { background: var(--surface-4); }
.imp-queue-dot { width: 19px; height: 19px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 10px var(--fm); border: 1.5px solid var(--border-2); color: var(--text-low); }
.imp-queue-dot.done { border-color: var(--accent); color: var(--accent); }
.imp-queue-dot.now { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.imp-queue-text { flex: 1; min-width: 0; }
.imp-queue-name { font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-queue-row.now .imp-queue-name { font-weight: 600; }
.imp-queue-sub { font-size: 11px; color: var(--text-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-queue-state { font-size: 11px; color: var(--text-quiet); }
.imp-queue-state.done { color: var(--accent); }
.imp-queue-foot { margin: 6px 3px 0; padding: 9px 8px 4px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); cursor: pointer; }
.imp-queue-foot:hover { color: var(--text); }

/* Upload */
.imp-center { display: flex; justify-content: center; }
.imp-center.wide > * { width: 100%; max-width: 960px; }
.imp-upload { width: 100%; max-width: 640px; padding-top: 24px; }
.imp-upload-title { font-size: 20px; font-weight: 700; letter-spacing: -.4px; }
.imp-upload-lead { font-size: 13px; color: var(--text-muted); line-height: 1.55; margin: 6px 0 22px; }
.imp-drop { border: 1.5px dashed var(--border-2); border-radius: 12px; background: var(--surface); padding: 36px 24px; text-align: center; cursor: pointer; color: var(--text-dim); transition: border-color .15s, background .15s; }
.imp-drop:hover, .imp-drop.dragover { border-color: var(--accent); background: var(--surface-2); }
.imp-drop.busy { cursor: progress; border-color: rgba(var(--accent-rgb),.5); }
.imp-drop-icon { color: var(--text-low); display: flex; justify-content: center; margin-bottom: 10px; }
.imp-drop-main { font-size: 15px; font-weight: 600; color: var(--text); }
.imp-drop-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; }
.imp-hints { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-dim); margin: 14px 2px 0; }
.imp-templates { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 22px 2px 0; padding-top: 18px; border-top: 1px solid var(--border); font-size: 12.5px; }
.imp-templates-lead { color: var(--text-dim); }
.imp-tpl { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); cursor: pointer; padding: 3px 9px; border-radius: 20px; border: 1px solid transparent; }
.imp-tpl:hover { color: var(--text); }
.imp-tpl.on { color: var(--accent); border-color: rgba(var(--accent-rgb),.4); background: rgba(var(--accent-rgb),.1); }
.imp-tpl-star { display: inline-flex; }
.imp-tpl-more, .imp-tpl-clear { color: var(--text-dim); cursor: pointer; }
.imp-tpl-more:hover, .imp-tpl-clear:hover { color: var(--text); }

/* Plan: what is in it */
.imp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 22px 24px; }
.imp-fileline { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-height: 26px; }
.imp-fileicon { display: flex; color: var(--text-dim); }
.imp-filename { font-size: 14px; font-weight: 600; color: var(--text); }
.imp-filemeta { font-size: 12px; color: var(--text-dim); }
.imp-planline { font-size: 18px; font-weight: 700; letter-spacing: -.3px; margin-top: 14px; }
.imp-lead { font-size: 13px; color: var(--text-muted); line-height: 1.55; margin-top: 5px; }
.imp-sheets { margin-top: 16px; border-top: 1px solid var(--border); }
.imp-sheet { display: flex; align-items: center; gap: 14px; padding: 13px 4px; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.imp-sheet.off { opacity: .55; }
.imp-tick { width: 18px; height: 18px; flex-shrink: 0; border-radius: 5px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--border-2); color: transparent; cursor: pointer; }
.imp-tick.on { border-color: var(--accent); background: rgba(var(--accent-rgb),.12); color: var(--accent); }
.imp-sheet-name { min-width: 160px; flex: 0 1 220px; cursor: pointer; }
.imp-sheet-title { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-sheet-size { font: 11px var(--fm); color: var(--text-dim); margin-top: 2px; }
.imp-sheet-arrow { display: flex; color: var(--text-low); flex-shrink: 0; }
.imp-sheet-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 200px; }
.imp-chip { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 20px; font-size: 11.5px; white-space: nowrap; }
.imp-chip.main { font-weight: 600; color: var(--accent); background: rgba(var(--accent-rgb),.12); }
.imp-chip.side { cursor: pointer; color: var(--text-soft); border: 1px solid var(--border-2); }
.imp-chip.off { cursor: pointer; color: var(--text-quiet); border: 1px dashed var(--border-2); }
.imp-chip.dead { color: var(--text-low); background: var(--surface-3); }
.imp-sheet-action { font-size: 11.5px; color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.imp-sheet-action:hover { color: var(--text); }
.imp-plan-foot { display: flex; align-items: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.imp-order { flex: 1; min-width: 240px; font-size: 12px; color: var(--text-dim); line-height: 1.5; }

/* Match / review frame */
.imp-match { display: flex; flex-direction: column; gap: 14px; max-width: 1240px; margin: 0 auto; }
.imp-match-top { display: flex; flex-direction: column; gap: 10px; }
.imp-did { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-soft); background: rgba(var(--accent-rgb),.08); border: 1px solid rgba(var(--accent-rgb),.25); border-radius: 8px; padding: 8px 12px; }
.imp-did-icon { display: inline-flex; color: var(--accent); }
.imp-failed { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--danger-soft); background: var(--danger-bg); border: 1px solid rgba(var(--danger-rgb),.3); border-radius: 8px; padding: 10px 12px; }
.imp-failed > span { flex: 1; min-width: 200px; line-height: 1.5; }
.imp-saved { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--accent); }
.imp-savetpl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 9px; padding: 10px 12px; }
.imp-savetpl-verb { font-size: 12px; color: var(--text-dim); }
.imp-savetpl-name { width: 240px; padding: 6px 10px; font-size: 13px; }
.imp-savetpl-fav { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.imp-savetpl-fav.on { color: var(--amber); }
.imp-savetpl-note { flex: 1; min-width: 200px; font-size: 11.5px; color: var(--text-dim); line-height: 1.45; }
.imp-warnings { display: flex; flex-direction: column; gap: 4px; }
.imp-warnings .imp-warn { margin: 0; }

/* Mapping table — a fixed-column grid that scrolls sideways when narrow */
.imp-table-wrap { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow-x: auto; }
.imp-table { min-width: 990px; }
.imp-thead, .imp-row, .imp-sec { display: flex; align-items: center; }
.imp-thead { padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 10.5px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.imp-thead > div, .imp-row > div { padding: 0 13px; flex-shrink: 0; min-width: 0; }
.imp-c-field { width: 232px; display: flex; align-items: center; gap: 6px; }
.imp-c-col   { width: 268px; }
.imp-c-how   { width: 336px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.imp-c-def   { width: 148px; }
.imp-row { padding: 6px 0; border-bottom: 1px solid var(--border-soft); }
.imp-row:last-child { border-bottom: none; }
.imp-row.sub { background: var(--row-hover); }
.imp-row.sub .imp-c-field { padding-left: 30px; }
.imp-row.warn { background: var(--amber-bg); padding: 8px 0; }
.imp-row.note { background: rgba(var(--accent-rgb),.06); padding: 8px 0; }
.imp-warn-text { flex: 1; padding: 0 13px; font-size: 11.5px; color: var(--amber-soft); line-height: 1.5; }
.imp-note-text { flex: 1; padding: 0 13px; font-size: 11.5px; color: var(--text-soft); line-height: 1.5; }
.imp-sec { padding: 12px 0 10px; margin-top: 10px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); cursor: pointer; gap: 8px; padding-left: 13px; padding-right: 13px; }
.imp-sec:first-of-type { margin-top: 0; border-top: none; }
.imp-caret { display: inline-flex; color: var(--text-low); transition: transform .12s; flex-shrink: 0; }
.imp-caret.open { transform: rotate(90deg); }
.imp-sec-title { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.imp-sec-note { font-size: 11.5px; color: var(--text-low); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-sec-summary { margin-left: auto; font-size: 11.5px; color: var(--text-mid); white-space: nowrap; }
.imp-label { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-sublabel { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-arrow { color: var(--text-quiet); font-size: 11px; margin-right: 1px; }
.imp-req { color: var(--danger-soft); font-weight: 700; }
.imp-tag { padding: 1px 7px; border-radius: 5px; font-size: 10px; font-weight: 600; white-space: nowrap; background: rgba(var(--purple-rgb),.12); color: var(--purple); }
.imp-how { font-size: 12px; color: var(--text-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.imp-exnote { font-size: 11px; color: var(--text-low); font-family: var(--fn); }
.imp-plain { font-size: 12px; color: var(--text-low); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.imp-plain.soft { color: var(--text-soft); }
.imp-extra { margin-top: 3px; display: flex; gap: 6px; font-size: 11px; }
.imp-extra .imp-link { font-size: 11px; }
.imp-inline { display: flex; align-items: center; gap: 6px; min-width: 0; }
.imp-inline.wrap { flex-wrap: wrap; row-gap: 4px; }
.imp-select, .imp-input { width: 100%; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 7px; padding: 5px 9px; color: var(--text); font-size: 12px; font-family: inherit; outline: none; min-width: 0; }
.imp-select:focus, .imp-input:focus { border-color: rgba(var(--accent-rgb),.55); }
.imp-select.sm, .imp-input.sm { width: auto; max-width: 150px; padding: 4px 7px; font-size: 11.5px; }
.imp-select.xs, .imp-input.xs { width: auto; max-width: 110px; padding: 2px 6px; font-size: 11px; }
.imp-select option { background: var(--surface-3); color: var(--text); }
.imp-ctl { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 7px; padding: 5px 10px; cursor: pointer; font-size: 12px; color: var(--text); white-space: nowrap; }
.imp-ctl-chev { display: inline-flex; opacity: .5; }
.imp-segs { display: inline-flex; }
.imp-segbtn { padding: 3px 8px; font-size: 10.5px; font-weight: 500; cursor: pointer; white-space: nowrap; color: var(--text-low); border: 1px solid var(--border-2); border-left: none; }
.imp-segbtn:first-child { border-left: 1px solid var(--border-2); border-radius: 7px 0 0 7px; }
.imp-segbtn:last-child { border-radius: 0 7px 7px 0; }
.imp-segbtn.on { background: var(--surface-3); color: var(--text); font-weight: 600; }
.imp-segs.tiny .imp-segbtn { padding: 1px 6px; font-size: 9.5px; }
.imp-def { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.imp-checklbl { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-mid); white-space: nowrap; cursor: pointer; }
.imp-unused { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-dim); }
.imp-unused-list { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 13px 12px; }
.imp-pop { flex-basis: 100%; margin-top: 6px; background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 10px; padding: 10px 12px; box-shadow: 0 8px 24px rgba(var(--shadow-rgb),calc(.4*var(--shadow-k))); }
.imp-pop-note { font-size: 11.5px; color: var(--text-dim); margin: 4px 0 8px; line-height: 1.45; }
.imp-pop-list { max-height: 280px; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.imp-pop-row { display: flex; align-items: center; gap: 8px; }
.imp-pop-raw { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.imp-pop-count { font: 10.5px var(--fm); color: var(--text-low); }
.imp-pop-arrow { color: var(--text-low); }
.imp-pop-row .imp-select.sm, .imp-pop-row .imp-input.sm { width: 190px; max-width: 190px; }
.imp-pop-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.imp-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 4px 2px 12px; }
.imp-foot-icon { display: inline-flex; color: var(--accent); }
.imp-foot-icon.hide { display: none; }
.imp-foot-text { font-size: 12.5px; color: var(--text-muted); }
.imp-foot-text.bad { color: var(--danger-soft); }
.imp-ask { width: auto; padding: 5px 10px; }
.imp-ask-text { font-size: 12px; color: var(--text-muted); }
.imp-kbd { font: 10px var(--fm); color: var(--text-dim); border: 1px solid var(--border-2); border-radius: 4px; padding: 1px 5px; }

/* Review */
.imp-review { display: flex; flex-direction: column; gap: 16px; }
.imp-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.imp-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; min-width: 150px; flex: 1 1 150px; }
.imp-stat-n { font: 500 25px var(--fm); letter-spacing: -.8px; }
.imp-stat-n.accent { color: var(--accent); }
.imp-stat-n.blue { color: var(--blue); }
.imp-stat-n.amber { color: var(--amber); }
.imp-stat-n.mid { color: var(--text-mid); }
.imp-stat-of { font-size: 13px; color: var(--text-low); }
.imp-stat-l { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.imp-newblock, .imp-leftout { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.imp-block-title { font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.imp-block-note { font-size: 11.5px; color: var(--text-dim); margin-top: 10px; line-height: 1.5; }
.imp-newcounts { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); }
.imp-newn { font: 500 18px var(--fm); color: var(--accent); margin-right: 6px; }
.imp-newchips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.imp-newchip { font-size: 11.5px; color: var(--text-mid); border: 1px solid var(--border-2); border-radius: 20px; padding: 2px 10px; white-space: nowrap; }
.imp-newchip strong { color: var(--text-soft); font-weight: 500; }
.imp-newchip.one { border-color: rgba(var(--amber-rgb),.4); }
.imp-sample { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow-x: auto; }
.imp-sample-row { display: flex; align-items: center; padding: 7px 8px; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; color: var(--text-muted); min-width: 760px; }
.imp-sample-row.head { font-size: 10.5px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; border-bottom-color: var(--border); }
.imp-sample-row.bad { background: var(--danger-bg); }
.imp-sample-row > div { padding: 0 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-s-row { width: 56px; flex-shrink: 0; }
.imp-s-act { width: 84px; flex-shrink: 0; }
.imp-s-cell { flex: 1 1 140px; display: flex; gap: 4px; }
.imp-badge { display: inline-block; padding: 1px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 600; }
.imp-badge.create { background: rgba(var(--accent-rgb),.12); color: var(--accent); }
.imp-badge.update { background: var(--blue-bg); color: var(--blue); }
.imp-badge.exists { background: var(--surface-3); color: var(--text-dim); }
.imp-badge.skip { background: var(--danger-bg); color: var(--danger-soft); }
.imp-sample-foot { padding: 8px 14px; font-size: 11.5px; color: var(--text-dim); }
.imp-leftout-head { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.imp-reason { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border-soft); font-size: 12.5px; color: var(--text-muted); flex-wrap: wrap; }
.imp-reason > span:first-child { flex: 1; min-width: 200px; }
.imp-reason-vals { margin-left: 6px; }

/* Pills / popovers with row-relative anchors */
.imp-pill { display: inline-block; padding: 2px 9px; border-radius: 20px; font: 700 9.5px var(--fm); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.imp-pill.ok { background: rgba(var(--accent-rgb),.12); color: var(--accent); }
.imp-pill.amber { background: var(--amber-bg); color: var(--amber); }
.imp-pill.bad { background: var(--danger-bg); color: var(--danger); }
.imp-pill.grey { background: var(--surface-3); color: var(--text-dim); }
.imp-pill.blue { background: var(--blue-bg); color: var(--blue); }
.imp-runbar { display: inline-block; vertical-align: middle; width: 70px; height: 4px; margin-left: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.imp-runbar > span { display: block; height: 100%; background: var(--blue); border-radius: 999px; transition: width .25s ease; }

/* History */
.imp-history { display: flex; flex-direction: column; gap: 14px; max-width: 1240px; margin: 0 auto; }
.imp-hfilters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.imp-hfilters .imp-select { width: auto; }
.imp-hsearch { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 8px; padding: 0 10px; color: var(--text-dim); flex: 1 1 240px; max-width: 360px; }
.imp-hsearch input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 12.5px; padding: 7px 0; min-width: 0; font-family: inherit; }
.imp-htable { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow-x: auto; }
.imp-hrow { display: flex; align-items: center; padding: 10px 10px; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; color: var(--text-muted); cursor: pointer; min-width: 720px; }
.imp-hrow:hover { background: var(--row-hover); }
.imp-hrow.head { font-size: 10.5px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; cursor: default; border-bottom-color: var(--border); }
.imp-hrow.head:hover { background: none; }
.imp-hrow > div { padding: 0 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-h-chev { width: 26px; flex-shrink: 0; display: flex; }
.imp-h-when { width: 140px; flex-shrink: 0; font-family: var(--fm); font-size: 11.5px; }
.imp-h-file { flex: 1 1 200px; color: var(--text); }
.imp-h-what { flex: 1 1 200px; }
.imp-h-by { width: 140px; flex-shrink: 0; }
.imp-h-res { width: 190px; flex-shrink: 0; display: flex; align-items: center; }
.imp-hdetail { padding: 10px 16px 14px 42px; background: var(--row-hover); border-bottom: 1px solid var(--border-soft); }
.imp-hsrc { display: flex; align-items: center; gap: 14px; padding: 5px 0; font-size: 12.5px; flex-wrap: wrap; }
.imp-hsrc-name { color: var(--text); font-weight: 500; min-width: 160px; }
.imp-hsrc-what { flex: 1; color: var(--text-muted); min-width: 200px; }
.imp-hsrc-state { font-size: 11px; white-space: nowrap; }
.imp-hsrc-state.ok { color: var(--accent); }
.imp-hsrc-state.bad { color: var(--amber-soft); }
.imp-hsrc-state.grey { color: var(--text-low); }
.imp-hdetail-text { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin-top: 8px; max-width: 760px; }
.imp-hdetail-text.amber { color: var(--amber-soft); }
.imp-hlinks { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.imp-hlinks .imp-link { font-size: 12px; }
.imp-hfoot { padding: 10px 16px; font-size: 11.5px; color: var(--text-dim); }

/* Import v2 fixes (2026-09-16): upload progress, header-row picker, review table tools, row editor, address fixes, undo panel, zones */
.imp-drop-progress { display: flex; align-items: center; gap: 10px; margin: 14px auto 0; max-width: 320px; }
.imp-drop-progress .progress-track { flex: 1; }
.imp-headpick { flex-basis: 100%; margin-top: 6px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 9px; padding: 8px 10px; }
.imp-headpick-lead { font-size: 11.5px; color: var(--text-dim); margin-bottom: 6px; }
.imp-headpick-row { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 6px; cursor: pointer; }
.imp-headpick-row:hover { background: var(--surface-3); }
.imp-headpick-row.on { background: rgba(var(--accent-rgb),.08); }
.imp-headpick-no { font: 11px var(--fm); color: var(--text-dim); width: 54px; flex-shrink: 0; }
.imp-headpick-cells { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; min-width: 0; }
.imp-headpick-cells .imp-chip { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.imp-headpick-cur { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--accent); white-space: nowrap; }
.imp-link.off { color: var(--text-low); pointer-events: none; }
.imp-select.xs.imp-fmt { max-width: 190px; }
.imp-sample-tools { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.imp-pager { display: inline-flex; align-items: center; gap: 10px; }
.imp-s-fix { width: 84px; flex-shrink: 0; text-align: right; }
.imp-sample-row.user { opacity: .6; }
.imp-rowedit { background: var(--surface-2); border-bottom: 1px solid var(--border-soft); padding: 10px 14px 12px; }
.imp-rowedit-why { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--danger-soft); margin-bottom: 8px; }
.imp-rowedit-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 12px; }
.imp-rowedit-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.imp-rowedit-lbl { font-size: 10.5px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-rowedit-cell .imp-input.sm { width: 100%; max-width: none; }
.imp-rowedit-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.imp-addrfix { background: var(--surface); border: 1px solid rgba(var(--amber-rgb),.4); border-radius: 10px; padding: 14px 16px; }
.imp-addr-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-top: 1px solid var(--border-soft); flex-wrap: wrap; }
.imp-addr-orig { flex: 1 1 220px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 12px; }
.imp-addr-rows { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.imp-addr-input { flex: 1 1 260px; }
.imp-undo { background: var(--surface); border: 1px solid rgba(var(--danger-rgb),.35); border-radius: 10px; padding: 12px 14px; margin-top: 10px; max-width: 760px; }
.imp-undo-line { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.imp-undo-line strong { color: var(--text); font-weight: 600; }
.imp-undo-warn { font-size: 12px; color: var(--amber-soft); background: var(--amber-bg); border-radius: 7px; padding: 6px 10px; margin-top: 6px; line-height: 1.45; }
.imp-pill-counts { font: 11px var(--fm); color: var(--text-dim); margin-left: 8px; white-space: nowrap; }
.imp-hsrc-state.amber { color: var(--amber); }
.imp-zones { margin-top: 14px; border-top: 1px solid var(--border); }
.imp-zone { display: flex; align-items: center; gap: 14px; padding: 10px 4px; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.imp-zone.off { opacity: .55; }
.imp-zone-name { width: 240px; max-width: 100%; }
.imp-zone-meta { flex: 1; min-width: 200px; font-size: 12px; color: var(--text-dim); }
.imp-zone-shape { display: inline-flex; flex-shrink: 0; }

@media (max-width: 720px) {
  .imp-body { padding: 14px 16px; }
  .imp-head { padding: 0 16px; gap: 10px; }
  .imp-head-mid { justify-content: flex-end; }
  .imp-rail-name { max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
  .imp-tabs { padding: 0 16px; }
  .imp-card { padding: 16px; }
  .imp-h-by, .imp-h-when { width: 110px; }
}

/* Orqi on a finished run (History detail) */
.imp-ask-run { display: flex; gap: 8px; align-items: center; margin: 10px 0 4px; max-width: 720px; }
.imp-ask-run .imp-input { flex: 1; }
.imp-ask-answer { white-space: pre-wrap; border-left: 2px solid var(--accent); padding-left: 10px; }

/* ── Planner Settings v2 (#settings, js/settingsPage.js) ─────────────────────
   Registry-driven settings home. Indigo marks values overridden at the
   current scope; defaults carry no chip. All colors are theme tokens. */
.sp-page { max-width: 1180px; margin: 0 auto; }
.sp-loading, .sp-empty { padding: 40px 0; text-align: center; color: var(--text-dim); font-size: 13.5px; }
.sp-error { margin-bottom: 12px; padding: 8px 12px; border-radius: 8px; background: var(--danger-bg); color: var(--danger-soft); font-size: 12.5px; }
.sp-muted { color: var(--text-dim); font-weight: 500; }
.sp-small { font-size: 11.5px; }
.sp-caret { color: var(--text-dim); font-size: 10px; }
.sp-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--indigo); flex-shrink: 0; }
.sp-link { background: none; border: none; color: var(--indigo); font-size: 11.5px; font-weight: 500; cursor: pointer; padding: 0; font-family: inherit; }
.sp-link:hover { text-decoration: underline; }
.sp-link.danger { color: var(--text-dim); }
.sp-link.danger:hover { color: var(--danger-soft); text-decoration: none; }
.sp-x { background: none; border: none; color: var(--text-dim); font-size: 11px; cursor: pointer; padding: 2px 4px; line-height: 1; font-family: inherit; }
.sp-x:hover { color: var(--danger-soft); }
.sp-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text);
  font-size: 12.5px; font-weight: 500; padding: 7px 12px; border-radius: 8px; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.sp-btn:hover:not(:disabled) { border-color: var(--border-4); }
.sp-btn:disabled { opacity: .5; cursor: not-allowed; }
.sp-btn.on { background: rgba(var(--indigo-rgb), .14); border-color: rgba(var(--indigo-rgb), .5); color: var(--indigo-soft); }
.sp-btn.sp-sm { font-size: 11.5px; padding: 5px 11px; border-radius: 7px; background: none; color: var(--text-mid); }
.sp-btn.sp-sm:hover:not(:disabled) { color: var(--text); border-color: var(--border-4); }
.sp-btn.sp-sm.primary { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.sp-input {
  width: 100%; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border-2); border-radius: 8px;
  color: var(--text); font-size: 12.5px; padding: 7px 10px; outline: none; font-family: inherit;
}
.sp-input:focus { border-color: rgba(var(--indigo-rgb), .6); }
.sp-select {
  background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); font-size: 12.5px; font-weight: 500;
  padding: 7px 10px; border-radius: 8px; cursor: pointer; font-family: inherit; max-width: 220px;
}

/* Header + scope bar */
.sp-head { border-bottom: 1px solid var(--border); margin: -4px -4px 0; padding: 4px 4px 0; }
.sp-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* QA 6 Oct R31: the title block keeps its width, the action group stays on one
   line above 1100 px, and the Orqi pill is what shrinks first. */
.sp-head-title { flex: none; min-width: 0; }
@media (min-width: 1100px) {
  .sp-head-row { flex-wrap: nowrap; }
  .sp-head-actions { flex-wrap: nowrap; flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
}
.sp-head-actions .sp-ask { flex: 1 1 220px; max-width: 440px; min-width: 0; }
.sp-head-actions .sp-ask .sp-ask-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sp-head-actions > :not(.sp-ask) { flex: none; }
/* QA 19 Oct #13: Orqi · Search · Template · Effective settings; every control
   32 px on one centre line. The pill shrinks first (text truncates), then is
   the Orqi mark with ⌘K only (container query on the row), then — under
   1100 px — the group takes its own line under the title (rule above). */
.sp-head-row { container-type: inline-size; container-name: sphead; }
.sp-head-actions .sp-btn { height: 32px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
.sp-head-actions .sp-ask { flex-basis: 260px; }
.sp-head-row > .sp-head-actions { flex-wrap: nowrap; min-width: 0; }   /* the later .sp-head-actions rule's wrap undid R31 */
@media (max-width: 1099px) { .sp-head-row > .sp-head-actions { flex: 1 1 100%; justify-content: flex-start; } }
@container sphead (max-width: 760px) {
  .sp-head-actions .sp-ask { flex: none; }
  .sp-head-actions .sp-ask .sp-ask-text { display: none; }
}
@media (min-width: 861px) and (max-width: 1099px) {
  .sp-head-actions .sp-ask { flex: 1 1 220px; }
  .sp-head-actions .sp-ask .sp-ask-text { display: inline; }
}
/* Filter row: scope pickers · Modified only (a filter pill) · Reset all. */
.sp-scopebar .sp-modpill { height: 34px; box-sizing: border-box; padding: 0 12px; font: 500 13px var(--fn); }
.sp-scopebar .sp-modpill:not(.filtered) .sp-dot { background: var(--text-dim); }
.sp-resetall { background: none; border: none; padding: 0 2px; font: 12px var(--fn); color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.sp-resetall:hover { color: var(--text); }
.sp-title { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.sp-sub { font-size: 13px; color: var(--text-mid); margin-top: 3px; text-wrap: pretty; }
.sp-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-scopebar { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-bottom: 6px; flex-wrap: wrap; }
.sp-scopenote { font-size: 11.5px; color: var(--text-dim); margin: -2px 0 6px 2px; }
.sp-scope {
  display: inline-flex; align-items: center; gap: 7px; background: none; border: 1px solid var(--border);
  color: var(--text-mid); font-size: 13px; font-weight: 500; padding: 8px 13px; border-radius: 9px; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.sp-scope:hover { border-color: var(--border-3); color: var(--text); }
.sp-scope.on { background: var(--surface-3); border-color: var(--border-3); color: var(--text); font-weight: 600; }
.sp-picker { display: inline-flex; align-items: center; gap: 3px; }
.sp-job { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-mid); margin-left: 6px; }
.sp-job-input { width: 84px; }
.sp-hint { font-size: 12px; color: var(--text-dim); padding-bottom: 12px; min-height: 16px; text-wrap: pretty; }
.sp-hint.eff { color: var(--indigo-soft); }

/* Popovers (pickers, template menu, selects) */
.sp-pop-wrap { position: relative; }
.sp-pop {
  position: absolute; top: calc(100% + 4px); left: 0; width: 300px; z-index: 40; padding: 6px;
  background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(var(--shadow-rgb), calc(.5 * var(--shadow-k)));
}
.sp-pop-right { left: auto; right: 0; width: 250px; }
.sp-pop .sp-input { margin-bottom: 5px; }
.sp-pop-list { max-height: 260px; overflow-y: auto; }
.sp-pop-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; background: none; border: none;
  color: var(--text-soft); font-size: 12.5px; font-weight: 500; padding: 8px 10px; border-radius: 7px; cursor: pointer; text-align: left; font-family: inherit;
}
.sp-pop-btn:hover { background: var(--surface-4); }
.sp-pop-btn.on { background: rgba(var(--indigo-rgb), .12); color: var(--indigo-soft); }
.sp-pop-item { display: flex; align-items: center; }
.sp-pop-item .sp-pop-btn { flex: 1; min-width: 0; }
.sp-pop-empty { padding: 10px; font-size: 12px; color: var(--text-dim); }
.sp-pop-action { border-top: 1px solid var(--border); margin-top: 4px; border-radius: 0 0 7px 7px; color: var(--text-mid); }
.sp-count { background: rgba(var(--indigo-rgb), .14); color: var(--indigo-soft); font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 6px; font-variant-numeric: tabular-nums; }

/* Body: nav + main */
.sp-body { display: flex; gap: 36px; align-items: flex-start; padding-top: 22px; }
.sp-nav { width: 200px; flex-shrink: 0; position: sticky; top: 12px; display: flex; flex-direction: column; gap: 2px; }
.sp-nav-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; background: none; border: none;
  color: var(--text-mid); font-size: 13.5px; font-weight: 500; padding: 9px 12px; border-radius: 8px; cursor: pointer; text-align: left; font-family: inherit;
}
.sp-nav-item:hover { color: var(--text); }
.sp-nav-item.on { background: var(--surface-3); color: var(--text); font-weight: 600; }
.sp-nav-meta { display: flex; align-items: center; gap: 6px; }
.sp-nav-count { color: var(--text-quiet); font-size: 11px; font-variant-numeric: tabular-nums; }
.sp-main { flex: 1; min-width: 0; max-width: 820px; }
.sp-search { flex: 1; position: relative; }
.sp-search-ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-low); display: flex; pointer-events: none; }
.sp-search .sp-input { padding: 9px 12px 9px 32px; border-radius: 9px; font-size: 13px; }
.sp-result-count { font-size: 12.5px; color: var(--text-mid); margin-bottom: 8px; }
.sp-group { margin-bottom: 26px; }
.sp-group-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.sp-group-title { font-size: 15px; font-weight: 600; }
.sp-group-desc { font-size: 12px; color: var(--text-dim); }
.sp-subhead { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); margin: 16px 0 2px; }
.sp-foot { margin-top: 8px; font-size: 12px; color: var(--text-dim); line-height: 1.5; text-wrap: pretty; }
.sp-foot b { color: var(--text-muted); font-weight: 500; }

/* Canonical row */
.sp-row { border-bottom: 1px solid var(--border-soft); }
.sp-row-main { display: flex; align-items: center; gap: 16px; padding: 10px 0; min-height: 34px; }
.sp-row-label {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; background: none; border: none; color: var(--text);
  cursor: pointer; text-align: left; padding: 0; font-size: 13.5px; font-weight: 500; font-family: inherit;
}
.sp-chev { color: var(--text-quiet); font-size: 10px; width: 10px; flex-shrink: 0; }
.sp-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-info {
  color: var(--text-low); font-size: 9px; flex-shrink: 0; border: 1px solid var(--border-3); border-radius: 50%; width: 13px; height: 13px;
  display: inline-flex; align-items: center; justify-content: center; font-family: Georgia, serif; font-style: italic; margin: 0;
}
.sp-chip { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 6px; flex-shrink: 0; letter-spacing: .02em; white-space: nowrap; }
.sp-chip.here { background: rgba(var(--indigo-rgb), .14); color: var(--indigo-soft); }
.sp-chip.from { background: var(--surface-3); color: var(--text-mid); }
.sp-chip.rule { background: var(--amber-bg); color: var(--amber-soft); }
.sp-chip.band { background: rgba(var(--blue-rgb), .10); color: var(--sky-3); }
.sp-chip.unwired { background: none; border: 1px dashed var(--border-3); color: var(--text-dim); font-weight: 500; }
.sp-lock { font-size: 11.5px; color: var(--text-dim); font-style: italic; flex-shrink: 0; }
.sp-eff { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sp-eff-val { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; }
.sp-eff-src { font-size: 11px; color: var(--text-mid); background: var(--surface-2); padding: 3px 9px; border-radius: 6px; white-space: nowrap; }

/* Toggle */
.sp-toggle { width: 38px; height: 21px; border-radius: 11px; border: 1px solid var(--border-3); background: var(--surface-3); position: relative; cursor: pointer; flex-shrink: 0; padding: 0; }
.sp-toggle .sp-knob { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--text-mid); transition: left .15s ease; }
.sp-toggle.on { background: var(--indigo); border-color: var(--indigo); }
.sp-toggle.on .sp-knob { left: 18px; background: #fff; }
.sp-toggle:disabled { opacity: .5; cursor: not-allowed; }

/* Range: off · track · value box · stretch */
.sp-range { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sp-off { background: none; border: none; color: var(--text-low); font-size: 10.5px; cursor: pointer; padding: 0; min-width: 18px; text-align: right; font-family: inherit; }
.sp-off:hover:not(:disabled) { color: var(--text-muted); }
.sp-off.on { color: var(--text-mid); font-weight: 600; }
.sp-track { position: relative; width: 126px; height: 28px; flex-shrink: 0; }
.sp-track::before { content: ''; position: absolute; top: 12px; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--surface-4); }
.sp-fill { position: absolute; top: 12px; left: 0; height: 4px; border-radius: 2px; background: var(--text-low); }
.sp-fill.stretch { background: var(--border-4); }
.sp-range.here .sp-fill { background: rgba(var(--indigo-rgb), .9); }
.sp-range.here .sp-fill.stretch { background: rgba(var(--indigo-rgb), .3); }
.sp-track input[type=range] { position: absolute; left: 0; top: 0; width: 100%; height: 28px; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.sp-track input[type=range]:disabled { cursor: not-allowed; }
.sp-thumb { position: absolute; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-muted); border: 2px solid var(--bg); box-sizing: border-box; pointer-events: none; }
.sp-range.here .sp-thumb { background: var(--indigo); }
.sp-range.off .sp-thumb { background: var(--text-dim); }
.sp-valbox { display: flex; align-items: center; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 8px; padding: 0 8px; height: 28px; box-sizing: border-box; }
.sp-range.here .sp-valbox { border-color: rgba(var(--indigo-rgb), .5); }
.sp-val { width: 36px; background: none; border: none; outline: none; color: var(--text); font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: center; padding: 0; font-family: inherit; }
.sp-valbox.dim .sp-val { color: var(--text-dim); }
.sp-unit { color: var(--text-dim); font-size: 10.5px; }
.sp-stretchbox {
  display: flex; align-items: center; gap: 3px; color: var(--text-mid); border: 1px solid var(--border-2); background: var(--surface);
  border-radius: 8px; padding: 0 8px; height: 28px; font-size: 11px; white-space: nowrap; flex-shrink: 0; box-sizing: border-box; cursor: help;
}
.sp-sval { width: 30px; color: var(--text-muted); font-size: 11.5px; }

/* Choice (segmented), select, KPI */
.sp-seg { display: inline-flex; align-items: center; background: var(--surface); border: 1px solid var(--border-2); border-radius: 8px; padding: 2px; flex-shrink: 0; }
.sp-seg.here { border-color: rgba(var(--indigo-rgb), .5); }
.sp-seg-btn { background: none; border: none; color: var(--text-dim); font-size: 11.5px; font-weight: 500; padding: 5px 11px; border-radius: 6px; cursor: pointer; font-family: inherit; }
.sp-seg-btn:hover:not(:disabled) { color: var(--text); }
.sp-seg-btn.on { background: var(--surface-4); color: var(--text); }
.sp-selbtn.here { border-color: rgba(var(--indigo-rgb), .5); }
.sp-kpis { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end; max-width: 300px; }
.sp-kpi { display: inline-flex; align-items: center; gap: 2px; background: var(--surface-3); border: 1px solid var(--border-2); color: var(--text-soft); font-size: 11.5px; font-weight: 500; padding: 2px 4px 2px 9px; border-radius: 6px; }
.sp-kpi-add { background: none; border: 1px solid var(--border-3); color: var(--text-dim); font-size: 11.5px; padding: 3px 9px; border-radius: 6px; cursor: pointer; font-family: inherit; }
.sp-kpi-add:hover { color: var(--text-muted); }

/* Stretch triggers (under Stretch policy = On triggers) */
.sp-triggers { padding: 0 0 12px 19px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sp-trig { background: none; border: 1px solid var(--border-2); color: var(--text-dim); font-size: 11.5px; font-weight: 500; padding: 5px 11px; border-radius: 7px; cursor: pointer; font-family: inherit; }
.sp-trig.on { background: rgba(var(--indigo-rgb), .12); border-color: rgba(var(--indigo-rgb), .4); color: var(--indigo-soft); }
.sp-trig.ghost:hover { color: var(--text); }

/* Expanded area */
.sp-expanded { padding: 0 0 14px 19px; }
.sp-desc { font-size: 12.5px; color: var(--text-mid); line-height: 1.5; max-width: 560px; text-wrap: pretty; }
.sp-also { font-size: 11.5px; color: var(--text-dim); margin-top: 6px; }
.sp-also span { color: var(--text-mid); }
.sp-rules, .sp-bands { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.sp-rule, .sp-band { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
.sp-rule b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.sp-tag { font-size: 10px; font-weight: 600; letter-spacing: .06em; }
.sp-tag.rule { color: var(--amber-soft); }
.sp-tag.band { color: var(--sky-3); }
.sp-mini { width: 44px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 6px; color: var(--text); font-size: 12px; padding: 3px 5px; text-align: center; outline: none; font-family: inherit; }
.sp-mini.wide { width: 150px; text-align: left; }
.sp-mini:focus { border-color: rgba(var(--indigo-rgb), .6); }
.sp-mini-select { background: var(--surface); border: 1px solid var(--border-2); color: var(--text); border-radius: 7px; padding: 4px 6px; font-size: 12px; font-family: inherit; max-width: 180px; }
.sp-draft { display: flex; align-items: center; gap: 7px; margin-top: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }
.sp-draft .sp-small { flex-basis: 100%; }
.sp-cond { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sp-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }
.sp-actions b { color: var(--text); font-weight: 500; }

/* Record forms: the contextual settings card (modal.js linked-settings) */
.linked-setting { font-size: 12.5px; padding: 2px 0; }

@media (max-width: 860px) {
  .sp-body { flex-direction: column; gap: 14px; }
  .sp-nav { position: static; width: auto; flex-direction: row; flex-wrap: wrap; }
  .sp-row-main { flex-wrap: wrap; }
  .sp-row-label { flex-basis: 100%; }
  .sp-range { flex-wrap: wrap; }
}

/* ── Planner Settings v2 — gaps round (G5–G12) ─────────────────────────────── */
.sp-ask { width: auto; padding: 6px 11px; }
.sp-ask-text { font-size: 12.5px; color: var(--accent); white-space: nowrap; }
.sp-ask-kbd { font: 9.5px var(--fm); color: rgba(var(--accent-rgb), .6); border: 1px solid rgba(var(--accent-rgb), .28); border-radius: 4px; padding: 1px 5px; flex: none; }
.sp-orqi-head { display: flex; align-items: flex-start; gap: 11px; padding: 15px 16px; border-bottom: 1px solid var(--border); }
.sp-orqi-head .sp-ask-kbd { color: var(--text-dim); border-color: var(--border-2); margin-top: 3px; }
.sp-orqi-body { padding: 9px 16px 14px; }
.sp-orqi-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 3px; }
.sp-orqi-answer { font-size: 13px; line-height: 1.55; color: var(--text-soft); padding: 8px 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 8px; text-wrap: pretty; }
.sp-orqi-answer b { color: var(--text); font-weight: 600; }
.sp-row.flash { animation: sp-flash 2.4s ease-out; }
@keyframes sp-flash { 0%, 40% { background: rgba(var(--indigo-rgb), .16); } 100% { background: transparent; } }
.sp-pop.wide { width: 380px; }
.sp-pop-group { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); padding: 8px 10px 2px; }
.sp-pop-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sp-chip.info { background: none; border: 1px solid var(--border-3); color: var(--text-dim); font-weight: 500; margin-left: 6px; text-transform: lowercase; }
.sp-btn.sp-sm.primary.danger { background: var(--danger); border-color: var(--danger); }

/* In-page dialog */
.sp-dialog-overlay { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: flex-start; justify-content: center; padding-top: 140px; z-index: 120; }
.sp-dialog { width: 420px; max-width: calc(100vw - 32px); background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 14px; padding: 18px 20px; box-shadow: 0 30px 80px rgba(var(--shadow-rgb), calc(.7 * var(--shadow-k))); }
.sp-dialog-title { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.sp-dialog-body { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; line-height: 1.5; }
.sp-dialog-label { display: block; font-size: 12px; color: var(--text-mid); margin-top: 6px; }
.sp-dialog-label .sp-input { margin-top: 5px; font-size: 13px; padding: 8px 10px; }
.sp-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.sp-dialog-actions .sp-btn.sp-sm { font-size: 12.5px; padding: 7px 12px; }

/* Attribute block */
.sp-attr { border: 1px solid var(--border-2); border-radius: 10px; padding: 12px 14px; margin-bottom: 18px; background: var(--surface); }
.sp-attr-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sp-attr-title { font-size: 13.5px; font-weight: 500; }
.sp-attr-title b { font-weight: 600; }
.sp-attr-toggle { display: flex; align-items: center; gap: 14px; font-size: 13px; cursor: default; }
.sp-attr-note { margin-top: 10px; font-size: 12px; color: var(--amber-soft); background: var(--amber-bg); border-radius: 7px; padding: 6px 10px; }

/* Review banner */
.sp-review { border: 1px solid rgba(var(--amber-rgb), .4); background: var(--amber-bg); border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; font-size: 12.5px; }
.sp-review-head { font-weight: 600; color: var(--amber-soft); margin-bottom: 6px; }
.sp-review-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; color: var(--text-muted); flex-wrap: wrap; }
.sp-review-row b { color: var(--text); font-weight: 500; }
.sp-review-actions { display: flex; gap: 12px; flex-shrink: 0; }

/* Recent changes */
.sp-recent { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--border); }
.sp-recent-row { display: grid; grid-template-columns: 110px 130px 1fr auto; gap: 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; color: var(--text-muted); }
.sp-recent-when { color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-recent-who { color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-recent-what b { color: var(--text); font-weight: 500; }
.sp-recent-diff { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-recent-diff b { color: var(--text); font-weight: 500; }
.sp-recent .sp-link { margin-top: 10px; }

/* System section */
.sp-mono { font-family: var(--fm); font-size: 12.5px; }
.sp-valbox.wide { width: 300px; max-width: 45vw; }
.sp-valbox.wide .sp-val { width: 100%; text-align: left; font-family: var(--fm); font-size: 12px; }

@media (max-width: 860px) {
  .sp-recent-row { grid-template-columns: 1fr 1fr; }
  .sp-ask-text { display: none; }
}

/* ── Command Center › Network tab (network-tab-tasks-for-sondak.md, mocks
   "Network Overview[ Dark].dc.html"). Tokens only; both themes share markup. */
.nt { height: 100%; overflow-y: auto; overflow-x: hidden; position: relative; background: var(--bg); }
.nt::-webkit-scrollbar { width: 3px; }
.nt::-webkit-scrollbar-thumb { background: var(--surface-3); }
.nt-band { position: relative; z-index: 30; }   /* CC revamp C4: the period row is the content's first row, not a grey band */
.nt-head { max-width: 1280px; margin: 0 auto; padding: 14px 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.nt-crumb { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 12.5px; }
.nt-crumb-link { background: none; border: none; padding: 0; font: inherit; color: var(--text-dim); cursor: pointer; }
.nt-crumb-link:hover { color: var(--text); }
.nt-crumb-sep { color: var(--text-quiet); }
.nt-crumb-cur { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-title { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.nt-sub { font-size: 12.5px; color: var(--text-mid); margin-top: 3px; }
.nt-ask-label { font-size: 12.5px; color: var(--accent); white-space: nowrap; }
.nt-kbd { font: 9.5px var(--fm); color: rgba(var(--accent-rgb), .6); border: 1px solid rgba(var(--accent-rgb), .28); border-radius: 4px; padding: 1px 5px; }
.nt-filters { max-width: 1280px; margin: 0 auto; padding: 22px 28px 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nt-popwrap { position: relative; }
.nt-date { display: flex; align-items: center; gap: 8px; height: 32px; padding: 6px 11px; border-radius: 9px; border: 1px solid var(--border-2); background: var(--surface-2); cursor: pointer; font-family: inherit; color: var(--text); }
.nt-date.on { background: var(--surface-3); border-color: rgba(var(--accent-rgb), .4); }
.nt-date-label { font-size: 12.5px; font-weight: 550; white-space: nowrap; }
.nt-date-range { font: 11px var(--fm); color: var(--text-dim); white-space: nowrap; }
.nt-pill { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 8px 0 11px; border-radius: 9px; border: 1px solid rgba(var(--accent-rgb), .32); background: var(--surface-2); flex: none; }
.nt-pill button { background: none; border: none; padding: 0; font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.nt-pill-k { color: var(--text-mid); }
.nt-pill-v { color: var(--text); max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.nt-pill-x { width: 17px; height: 17px; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.nt-pill-x:hover { color: var(--danger); }
.nt-clear { width: 30px; height: 32px; border-radius: 8px; border: none; background: none; display: flex; align-items: center; justify-content: center; color: var(--text-mid); cursor: pointer; }
.nt-clear:hover { color: var(--text); }
.nt-backdrop { position: fixed; inset: 0; z-index: 25; }
.nt-pop { position: absolute; left: 0; top: 100%; margin-top: 6px; z-index: 50; background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 11px; box-shadow: 0 18px 46px rgba(var(--shadow-rgb), calc(.55 * var(--shadow-k))); box-sizing: border-box; }
.nt-datepop { display: flex; overflow: hidden; border-radius: 12px; }
.nt-presets { width: 126px; flex: none; border-right: 1px solid var(--border); padding: 7px; }
.nt-preset { display: block; width: 100%; text-align: left; border: none; padding: 7px 9px; border-radius: 6px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--text-soft); background: transparent; white-space: nowrap; }
.nt-preset.on { color: var(--accent); background: rgba(var(--accent-rgb), .1); }
.nt-cal { padding: 11px 13px 12px; }
.nt-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; font-size: 12.5px; font-weight: 600; }
.nt-cal-nav { width: 22px; height: 22px; border-radius: 5px; border: none; background: none; display: flex; align-items: center; justify-content: center; color: var(--text-mid); cursor: pointer; padding: 0; flex: none; }
.nt-cal-grid { display: grid; grid-template-columns: repeat(7, 28px); gap: 2px; }
.nt-cal-dow { margin-bottom: 4px; }
.nt-cal-dow span { font-size: 10px; color: var(--text-quiet); text-align: center; }
.nt-cal-day { height: 26px; border-radius: 5px; border: none; display: flex; align-items: center; justify-content: center; font: 11.5px var(--fm); cursor: pointer; padding: 0; color: var(--text-mid); background: transparent; }
.nt-cal-day.today { color: var(--accent); }
.nt-cal-day.in { color: var(--text); background: rgba(var(--accent-rgb), .14); }
.nt-cal-day.edge { color: var(--accent-ink); background: var(--accent); }
.nt-cal-foot { display: flex; align-items: center; gap: 7px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-dim); }
.nt-fpop { width: 276px; padding: 7px; }
.nt-pop-title { font-size: 10.5px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; padding: 4px 8px 7px; }
.nt-frow { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border-radius: 7px; border: none; background: none; cursor: pointer; text-align: left; font: inherit; font-size: 12.5px; color: var(--text-soft); }
.nt-frow:hover { background: var(--surface-4); }
.nt-count { font: 10.5px var(--fm); color: var(--accent); background: rgba(var(--accent-rgb), .12); border-radius: 20px; padding: 1px 7px; }
.nt-fhead { display: flex; align-items: center; gap: 7px; padding: 3px 4px 8px; border-bottom: 1px solid var(--border); margin-bottom: 6px; font-size: 12.5px; font-weight: 600; }
.nt-search { display: flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; height: 30px; box-sizing: border-box; }
.nt-search input { background: none; border: none; outline: none; color: var(--text); font: inherit; font-size: 12px; width: 100%; min-width: 0; padding: 0; height: 100%; }
/* QA 19 Oct #6: these are <label>s — no global label margin (a popover's own inline margin still wins). */
label.nt-search { margin: 0; }
.nt-fvals { max-height: 264px; overflow-y: auto; }
.nt-fopt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 8px; border-radius: 6px; border: none; background: none; cursor: pointer; text-align: left; font: inherit; }
.nt-fopt:hover { background: var(--surface-4); }
.nt-fname { font-size: 12.5px; color: var(--text-muted); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-fopt.on .nt-fname { color: var(--text); }
.nt-check { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--text-quiet); display: flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; }
.nt-check.on { border-color: var(--accent); background: var(--accent); }
.nt-ffoot { display: flex; gap: 12px; padding: 8px 8px 3px; border-top: 1px solid var(--border); margin-top: 5px; }
.nt-link { background: none; border: none; padding: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--accent); cursor: pointer; white-space: nowrap; }
.nt-link.muted { color: var(--text-mid); font-weight: 500; }
.nt-empty { padding: 10px 8px; font-size: 12px; color: var(--text-dim); }

.nt-body { min-height: 0; }
.nt-wrap { max-width: 1280px; margin: 0 auto; padding: 22px 28px 64px; display: flex; flex-direction: column; gap: 20px; }
.nt-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; min-width: 0; }
.nt-msg { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.nt-msg code { font: 11.5px var(--fm); background: var(--surface-3); padding: 1px 5px; border-radius: 4px; }
.nt-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.nt-card-title { font-size: 14px; font-weight: 600; }
.nt-card-sub { font-size: 12.5px; color: var(--text-mid); margin-top: 2px; }
.nt-card-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nt-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0 6px; border-top: 1px solid var(--border-soft); }
.nt-foot-note { font-size: 11.5px; color: var(--text-dim); padding: 10px 0 4px; line-height: 1.5; }
.nt-mono { font: 10.5px var(--fm); color: var(--text-dim); }
.nt-dim { color: var(--text-dim); }
.nt-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px; }
.nt-kpi { padding: 16px 18px 14px; }
/* QA 5 Oct Q14: Overview hero = the Now health box (2 columns) + four compact cells. */
.nt-hero2 { display: grid; grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); gap: 12px; }
.nt-hero2 > .nt-hcell { padding: 14px 18px 12px; min-width: 0; }
.nt-hcell .now-gauge { --gauge-w: 150; }
.nt-hcell .now-health-label { font-size: 12.5px; }
.nt-hcell .now-health-sub { font-size: 11.5px; }
.nt-hcell .now-health-parts { margin-top: 10px; padding-top: 10px; }
.nt-hcell .now-health-parts b { font-size: 15px; }
.nt-kcell { padding: 16px 16px 14px; min-width: 0; display: flex; flex-direction: column; }
.nt-kcell-row { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.nt-kcell-val { font: 600 28px/1 var(--fm); letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nt-kcell-delta { font-size: 12px; font-weight: 600; line-height: 1.35; margin-top: auto; padding-top: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-kcell-label { font-size: 12px; font-weight: 500; color: var(--text-mid); margin-top: 8px; }
.nt-kcell-note { font-size: 11.5px; color: var(--text-low); margin-top: 4px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) {
  .nt-hero2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nt-hero2 > .nt-hcell { grid-column: 1 / -1; }
}
/* QA 5 Oct Q17: tiles whose data source is young read COLLECTING. */
.nt-tag.nt-tag-collect { background: none; border: 1px solid var(--accent); color: var(--accent); padding: 2px 6px; }
.nt-tile-val .nt-tag-collect { font-size: 9px; letter-spacing: .06em; }
.nt-tile-val.tagged { height: 22px; display: flex; align-items: center; }
/* QA 5 Oct Q18.1: admins record safeguards inline in the Safeguard coverage card. */
.nt-sec-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.nt-sec-edit { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; max-width: 520px; }
.nt-sec-edit select.drv-input { width: auto; min-width: 180px; align-self: flex-start; }
.nt-sec-edit textarea.drv-input { resize: vertical; min-height: 54px; font: inherit; font-size: 12.5px; }
.nt-sec-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.nt-kpi-label { font-size: 12px; font-weight: 500; color: var(--text-mid); }
.nt-kpi-row { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.nt-kpi-val { font-size: 28px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.nt-kpi-delta { font-size: 12px; font-weight: 600; }
.nt-kpi-note { font-size: 11.5px; color: var(--text-dim); margin-top: 8px; line-height: 1.45; }
.nt-pred { padding: 14px 20px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; row-gap: 12px; }
.nt-pred-main { display: flex; align-items: baseline; gap: 10px; }
.nt-pred-big { font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.nt-pred-txt { font-size: 12.5px; color: var(--text-mid); }
.nt-vsep { width: 1px; height: 24px; background: var(--border); }
.nt-pred-next { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.nt-eyebrow { font-size: 12px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.nt-strong { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nt-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 720px) { .nt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nt-tile-unit { font-size: 11.5px; font-weight: 500; color: var(--text-dim); letter-spacing: 0; }
.nt-ig-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; }
.nt-ig-sig { padding: 6px 0; }
.nt-ig-sigtop { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.nt-ig-n { font: 12px var(--fm); color: var(--text-mid); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nt-ig-bar { height: 3px; border-radius: 2px; background: var(--border); margin-top: 5px; overflow: hidden; }
.nt-ig-bar > div { height: 100%; background: var(--amber); border-radius: 2px; }
.nt-ig-prov { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft); min-width: 0; }
.nt-ig-prov .nt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .nt-ig-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
.nt-tile { text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px 12px; cursor: pointer; min-width: 0; font-family: inherit; color: var(--text); }
.nt-tile:hover { border-color: var(--border-4); }
.nt-tile.on { background: var(--surface-3); border-color: var(--border-4); }
.nt-tile-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--text-mid); }
.nt-tile-chev { font-size: 11px; color: var(--text-low); }
.nt-tile-val { font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; margin-top: 8px; }
.nt-tile-sub { font-size: 11px; color: var(--text-dim); margin-top: 6px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-krow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border-soft); }
.nt-kval { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nt-held { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0 2px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.nt-tag { display: inline-block; font: 600 9.5px var(--fm); letter-spacing: .04em; padding: 3px 7px; border-radius: 5px; background: var(--surface-4); color: var(--text-mid); white-space: nowrap; flex: none; }
.nt-tag.ok { background: rgba(var(--accent-rgb), .12); color: var(--accent); }
.nt-tag.warn { background: rgba(var(--amber-rgb), .12); color: var(--amber); }
.nt-tag.phi { font-size: 10px; background: none; border: 1px solid var(--amber); color: var(--amber); }
.nt-grid { display: grid; gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid var(--border-soft); text-align: right; font-variant-numeric: tabular-nums; }
.nt-thead { padding: 8px 20px; font-size: 10.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
.nt-thead.plain { padding: 12px 0 6px; border: none; background: none; }
.nt-grid-lines { grid-template-columns: minmax(200px, 1.6fr) minmax(90px, .9fr) 80px 100px 80px 88px 80px 18px; }
.nt-row { padding: 11px 20px; cursor: pointer; }
.nt-row:hover { background: var(--surface-3); }
.nt-row.static { cursor: default; }
.nt-row.static:hover { background: none; }
.nt-group { padding: 12px 20px 4px; font-size: 10.5px; font-weight: 700; color: var(--text-mid); text-transform: uppercase; letter-spacing: .08em; display: flex; gap: 8px; align-items: baseline; }
.nt-group-desc { font-weight: 500; color: var(--text-dim); text-transform: none; letter-spacing: 0; }
.nt-cell-name { display: flex; align-items: center; gap: 10px; min-width: 0; text-align: left; }
.nt-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.nt-name { font-size: 13.5px; font-weight: 500; }
.nt-note { font-size: 10.5px; color: var(--text-dim); margin-top: 1px; }
.nt-grid-prov .nt-note, .nt-grid-place .nt-note { font-size: 11px; }
.nt-share { display: flex; align-items: center; gap: 8px; }
.nt-share span { font-size: 11.5px; color: var(--text-mid); min-width: 32px; text-align: right; }
.nt-bar { flex: 1; height: 6px; background: var(--surface-4); border-radius: 3px; overflow: hidden; }
.nt-bar div { height: 100%; border-radius: 3px; }
.nt-chev { color: var(--text-low); font-size: 14px; }
.nt-grid-prov { grid-template-columns: minmax(0, 1fr) 60px 76px 80px; }
.nt-grid-prov > :first-child { text-align: left; }
.nt-grid-prov .nt-name { font-size: 13px; }
.nt-grid-place { grid-template-columns: minmax(0, 1fr) 60px 64px 72px; padding: 10px 0; }
.nt-grid-place .nt-name { font-size: 13px; }
.nt-grid-mix { grid-template-columns: minmax(0, 1fr) 52px 64px 72px; padding: 9px 0; }
.nt-grid-mix .nt-name { font-size: 13px; }
.nt-mixbar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin: 14px 0 10px; background: var(--surface-4); }
.nt-two { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.nt-three { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; align-items: start; }
.nt-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; height: 110px; margin-top: 16px; }
.nt-week-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; min-width: 0; }
.nt-week-n { font-size: 11px; font-weight: 600; color: var(--text-mid); font-variant-numeric: tabular-nums; }
.nt-week-bar { width: 100%; max-width: 38px; border-radius: 5px 5px 2px 2px; }
.nt-week-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.nt-week-days span { font-size: 11px; color: var(--text-dim); text-align: center; }
.nt-risk { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px 0; border-top: 1px solid var(--border-soft); }
.nt-risk-when { font-size: 12px; color: var(--text-mid); font-variant-numeric: tabular-nums; padding-top: 1px; }
.nt-phi { display: flex; align-items: center; gap: 14px; background: rgba(var(--amber-rgb), .12); border: 1px solid var(--amber); border-radius: 12px; padding: 12px 18px; flex-wrap: wrap; font-size: 12.5px; }
@media (max-width: 900px) { .nt-two { grid-template-columns: 1fr; } .nt-head { padding: 12px 16px; } .nt-filters { padding: 0 16px 12px; } .nt-wrap { padding: 16px 16px 48px; } }
.nt-grid-mem { grid-template-columns: minmax(200px, 1.4fr) 90px 80px 84px 90px 80px minmax(140px, 1fr); padding: 10px 20px; }
.nt-grid-mem.nt-thead { padding: 8px 20px; }
.nt-tag.danger { background: rgba(var(--danger-rgb), .12); color: var(--danger); }
/* CC revamp C4–C6: Overview first row, Impact card, safeguard inventory */
.nt-band + .nt-body .nt-wrap { padding-top: 16px; }
.nt-crumbrow { max-width: 1280px; margin: 0 auto; padding: 18px 28px 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.nt-crumbrow .nt-crumb { margin-bottom: 0; }
.nt-crumbrow + .nt-filters { padding-top: 12px; }
.nt-crumb-sub { font-size: 12px; color: var(--text-dim); }
.nt-scope { font-size: 12px; color: var(--text-dim); margin-left: 4px; }
a.nt-row { color: inherit; text-decoration: none; }
.nt-impact { display: flex; flex-direction: column; gap: 18px; padding-bottom: 18px; }
.nt-impact .nt-eyebrow { font-size: 11px; }
.nt-imp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; align-items: start; }
.nt-imp-row { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.nt-imp-big { font-size: 30px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.nt-imp-delta { font-size: 13px; font-weight: 600; }
.nt-imp-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.nt-imp-grid { display: grid; grid-template-columns: minmax(190px, 1.3fr) 130px 120px minmax(240px, 2fr); gap: 14px; align-items: center; }
.nt-imp-th { padding: 6px 0; font-size: 10.5px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; align-items: baseline; }
.nt-imp-line { padding: 10px 0; border-top: 1px solid var(--border-soft); }
.nt-imp-total { padding: 10px 0 0; border-top: 1px solid var(--border); align-items: baseline; }
.nt-imp-cap .nt-imp-sub { white-space: normal; }
/* Saved opens the Savings by decision table (spec 19 Oct B3) — a tile-like toggle. */
.nt-imp-saved { text-align: left; font-family: inherit; color: var(--text); background: transparent; border: 1px solid transparent; border-radius: 12px; padding: 10px 12px; margin: -11px 0 -11px -13px; cursor: pointer; min-width: 0; }
.nt-imp-saved:hover { border-color: var(--border-4); }
.nt-imp-saved.on { background: var(--surface-3); border-color: var(--border-4); }
.nt-imp-saved-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.nt-imp-n { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nt-imp-sub { font-size: 10.5px; color: var(--text-dim); margin-top: 1px; white-space: nowrap; }
.nt-imp-how { font-size: 12px; color: var(--text-mid); line-height: 1.45; }
.nt-imp-quality { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; background: var(--surface-3); border-radius: 9px; padding: 12px 14px; }
.nt-imp-qlabel { font-size: 11.5px; color: var(--text-mid); }
.nt-imp-q { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nt-imp-qd { font-size: 11.5px; font-weight: 600; }
.nt-sec { display: flex; flex-direction: column; gap: 16px; }
.nt-sec-stats { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.nt-sec-stat { display: flex; align-items: baseline; gap: 8px; }
.nt-sec-stat span:first-child { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.nt-sec-stat span:last-child { font-size: 12.5px; color: var(--text-mid); }
.nt-sec-legend { display: flex; align-items: center; gap: 14px; font-size: 11px; color: var(--text-dim); flex-wrap: wrap; }
.nt-sec-legend span { display: flex; align-items: center; gap: 5px; }
.nt-sec-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.nt-sec-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.nt-sec-gname { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; padding-bottom: 6px; }
.nt-sec-row { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--border-soft); }
.nt-sec-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 5px; }
/* Settings › Security */
.sec-set .sec-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 10px; }
.sec-sub { font-size: 12.5px; color: var(--text-mid); margin-top: 4px; max-width: 640px; line-height: 1.5; }
.sec-cov { font-size: 12.5px; color: var(--text-mid); white-space: nowrap; }
.sec-cov span { font-size: 22px; font-weight: 600; color: var(--text); margin-right: 4px; }
.sec-gname { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; margin: 18px 0 4px; }
.sec-row { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--border-soft); }
.sec-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 6px; }
.sec-main { flex: 1; min-width: 0; }
.sec-name { font-size: 13.5px; font-weight: 500; }
.sec-sec { font: 10.5px var(--fm); color: var(--text-dim); margin-left: 6px; }
.sec-note { font-size: 12px; color: var(--text-mid); margin-top: 2px; line-height: 1.45; }
.sec-meta { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.sec-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.sec-edit { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; max-width: 560px; }
.sec-edit select { max-width: 220px; }
.sec-edit textarea { resize: vertical; min-height: 54px; font: inherit; }
.sec-actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.sec-foot { font-size: 11.5px; color: var(--text-dim); margin-top: 14px; }
@media (max-width: 900px) { .nt-crumbrow { padding: 14px 16px 0; } .nt-filters { padding: 16px 16px 0; } }
.nt-chip { font: 600 11.5px var(--fn); padding: 5px 10px; border-radius: 7px; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-mid); cursor: pointer; }
.nt-chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.nt-names { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 8px; padding: 6px 11px; cursor: pointer; font: 600 12px var(--fn); color: var(--text); }
.nt-switch { width: 30px; height: 18px; border-radius: 9px; background: var(--surface-4); position: relative; display: inline-block; transition: background .15s; }
.nt-switch span { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text); transition: left .15s; }
.nt-names.on .nt-switch { background: var(--accent); }
.nt-names.on .nt-switch span { left: 14px; background: var(--accent-ink); }

/* ── QA 30 Sep board ─────────────────────────────────────────────────────── */
/* Plan-run summary card (planSummary.js, mocks 1a/1b) */
.pls-overlay { position: fixed; inset: 0; z-index: 1200; background: var(--overlay); display: flex; align-items: center; justify-content: center; padding: 20px; }
.pls-card { width: min(94vw, 392px); background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px; box-shadow: 0 20px 50px rgba(var(--shadow-rgb), calc(.6 * var(--shadow-k))); padding: 18px 20px 16px; display: flex; flex-direction: column; color: var(--text); }
.pls-sw { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 5px; }
.pls-btn { background: none; border: none; display: inline-flex; align-items: center; height: 32px; line-height: 1; text-decoration: none; box-sizing: border-box; padding: 0 10px; font: 500 12.5px var(--fn); color: var(--text-mid); cursor: pointer; border-radius: 7px; }   /* <a> and <button> render alike (R9) */
.pls-btn:hover { background: var(--surface-2); }
.pls-btn.pls-primary { background: var(--text); color: var(--bg); padding: 0 12px; }
.pls-btn.pls-primary:hover { background: var(--text-soft); }
.pls-btn[disabled] { opacity: .45; cursor: default; }
/* Newly routed rows after a plan run (Close keeps the board, flashes them) */
@keyframes bkbflash { 0% { background: rgba(var(--accent-rgb), .28); } 100% { background: transparent; } }
.bkb-row.bkb-flash { animation: bkbflash 3s ease-out 1; }
/* Live updates (realtime F1, mock 1a): only the cells a socket message changed flash once, ~1.5 s — accent, red for no-show / cancelled */
@keyframes bkbcellflash { 0%, 35% { background: rgba(var(--accent-rgb), .10); } 100% { background: transparent; } }
@keyframes bkbcellflashbad { 0%, 35% { background: rgba(var(--danger-rgb), .12); } 100% { background: transparent; } }
.bkb-cflash { animation: bkbcellflash 1.5s ease-out 1 both; border-radius: 6px; }
.bkb-cflash.bad { animation-name: bkbcellflashbad; }
/* Connection state (realtime E5, mock 1b): one quiet amber line after the page title, only after 10 s offline */
.rt-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--amber); white-space: nowrap; cursor: default; }
.rt-status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--amber); flex: none; }
/* Slim progress bar while a planner run started from the board is going */
.bkb-planbar { position: absolute; bottom: 58px; left: 0; right: var(--bkb-float-right, 0px); display: flex; justify-content: center; pointer-events: none; z-index: 29; }
.bkb-planbar > div { pointer-events: auto; display: flex; align-items: center; gap: 10px; background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 12px; padding: 8px 14px; font-size: 12px; color: var(--text-soft); box-shadow: 0 18px 44px rgba(var(--shadow-rgb), calc(.65 * var(--shadow-k))); }
.bkb-planbar .track { width: 140px; height: 4px; border-radius: 2px; background: var(--surface); overflow: hidden; }
.bkb-planbar .bar { height: 100%; background: var(--accent); border-radius: 2px; transition: width .3s; }
/* Typed time fields in the date popover (text inputs, not browser time pickers) */
.bkb-time { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--text-soft); font: 11.5px var(--fm); padding: 4px 6px; outline: none; width: 58px; text-align: center; }
.bkb-time:focus { border-color: rgba(var(--accent-rgb), .55); }
.bkb-time.err { border-color: var(--danger); }

/* ── QA 30 Sep · import site rule (#23) ─────────────────────────────────────── */
.imp-sitecard { padding: 16px 18px; margin: 14px 0 6px; }
.imp-sitecard .drv-card-label { margin-bottom: 10px; }
.imp-siteline { font-size: 12px; color: var(--accent); margin: 12px 0 6px; display: flex; align-items: center; gap: 6px; }
.imp-siteline::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.imp-sitechip { color: var(--accent); }
.imp-drop.disabled { opacity: .55; cursor: not-allowed; }

/* ── QA 30 Sep attribute types (Settings › Attribute types, front/js/attributeTypesSettings.js) ── */
.at-list { display: flex; flex-direction: column; }
.at-row { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border-soft); }
.at-row:first-child { border-top: none; }
.at-order { display: flex; flex-direction: column; gap: 2px; width: 22px; flex: none; }
.at-ib { width: 22px; height: 18px; border: 1px solid var(--border); background: none; color: var(--text-mid); border-radius: 5px; font-size: 11px; cursor: pointer; padding: 0; }
.at-ib:hover { background: var(--surface-3); color: var(--text); }
.at-ib:disabled { opacity: .3; cursor: default; }
.at-main { flex: 1; min-width: 0; }
.at-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.at-name { font-size: 13px; font-weight: 500; }
.at-rename { width: 220px; }
.at-chip { font-size: 10.5px; padding: 1px 7px; border-radius: 20px; background: var(--surface-3); color: var(--text-dim); }
.at-chip.global { background: rgba(var(--indigo-rgb), .12); color: var(--indigo-soft); }
.at-count, .at-dim { font-size: 11.5px; color: var(--text-dim); }
.at-attrs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.at-attr { font-size: 11px; padding: 2px 8px; border-radius: 20px; background: var(--surface-3); color: var(--text-mid); }
.at-attr.rel { background: rgba(var(--accent-rgb), .12); color: var(--accent); }
.at-none { font-size: 11.5px; color: var(--text-quiet); }
.at-add { display: flex; align-items: center; gap: 10px; padding-top: 10px; flex-wrap: wrap; }
.at-add .sp-input { width: 260px; }
.at-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-mid); }
.at-addlink { margin-top: 8px; display: inline-block; }
.at-untyped { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); font-size: 12px; }
.at-grouprow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.at-select { width: 240px; }
.at-empty { padding: 20px; font-size: 12.5px; color: var(--text-dim); }
.sp-link.danger { color: var(--danger); }
.sp-link.dim { color: var(--text-dim); }

/* ── QA 30 Sep pickers / settings (js/datePicker.js, multiselect.js mountPickSelect, settings draft) ── */
.dp-pop { position: fixed; z-index: 1200; width: 268px; background: var(--surface-3); border: 1px solid var(--border-3); border-radius: 10px; box-shadow: 0 18px 46px rgba(var(--shadow-rgb), calc(.6 * var(--shadow-k))); padding: 8px; font: 12.5px var(--fn); color: var(--text); }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dp-title { font-weight: 600; font-size: 12.5px; }
.dp-nav { width: 24px; height: 24px; border: none; background: none; color: var(--text-mid); border-radius: 6px; cursor: pointer; font-size: 16px; line-height: 1; }
.dp-nav:hover { background: var(--row-hover); color: var(--text); }
.dp-dow, .dp-grid { display: grid; grid-template-columns: repeat(7, 34px); gap: 2px; }
.dp-dow span { font-size: 10px; color: var(--text-quiet); text-align: center; padding: 2px 0 4px; }
.dp-day { height: 28px; border: none; border-radius: 6px; background: none; color: var(--text); font: 11.5px var(--fm); cursor: pointer; }
.dp-day:hover { background: var(--row-hover); }
.dp-day.today { color: var(--accent); font-weight: 600; }
.dp-day.cur { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .55); }
.dp-day.on { background: var(--accent); color: var(--accent-ink); }
.dp-time { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
.dp-time label { font-size: 11.5px; color: var(--text-mid); }
.dp-time-in { width: 76px; background: var(--surface); border: 1px solid var(--border-3); color: var(--text); border-radius: 6px; padding: 5px 8px; font: 12px var(--fm); outline: none; }
.dp-time-in:focus { border-color: rgba(var(--accent-rgb), .6); }
.dp-hint { font-size: 10.5px; color: var(--text-quiet); }
.dp-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
.dp-link { background: none; border: none; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 4px; }
.dp-ok { background: var(--text); color: var(--bg); border: none; border-radius: 6px; height: 26px; padding: 0 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.pks { position: relative; }
.pks-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--surface); border: 1px solid var(--border-3); border-radius: 6px; padding: 8px 10px; color: var(--text); font: 13px var(--fn); cursor: pointer; text-align: left; }
.pks-btn.open, .pks-btn:focus { border-color: rgba(var(--accent-rgb), .6); outline: none; }
.pks-btn.ro { opacity: .6; cursor: default; }
.pks-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pks-label.ph { color: var(--text-dim); }
.pks-chev { color: var(--text-dim); font-size: 10px; }
.pks-pop { left: 0; right: 0; width: auto; min-width: 240px; }
.pks-opt { display: flex; justify-content: space-between; gap: 10px; }
.pks-opt.on { background: rgba(var(--accent-rgb), .10); }
.pks-sub, .pks-more { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.pks-more { padding: 6px 8px; }
.field-site-card { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px 14px; }
.field-hint { font-size: 11.5px; color: var(--text-dim); margin-top: 6px; }
/* settings: draft rows + sticky save footer (mock 1c) + leave dialog (1d) */
.sp-row.draft .sp-toggle, .sp-row.draft .sp-val, .sp-row.draft .sp-seg, .sp-row.draft .sp-selbtn { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .5); }
/* Dispatch review 20 Oct T12 (mock 1b): a changed value gets a dot beside it
   ("Was …" on hover, .info-tip bubble) — the row never grows. */
.sp-valwrap { display: flex; align-items: center; gap: 8px; flex-shrink: 0; min-width: 0; }
.sp-wasdot { flex: none; width: 14px; height: 14px; margin: 0; display: inline-flex; align-items: center; justify-content: center; cursor: help; }
.sp-wasdot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.sp-wasdot.err::before { background: var(--danger); }
.sp-row.draft-error .sp-val, .sp-row.draft-error .sp-seg { box-shadow: 0 0 0 1px rgba(var(--danger-rgb), .6); }
.sp-savebar { position: sticky; bottom: 0; z-index: 12; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px; margin: 14px -20px -20px; background: var(--surface); border-top: 1px solid var(--border-3); }
.sp-savebar .n { font-size: 12.5px; font-weight: 500; color: var(--text); white-space: nowrap; }
.sp-savebar .names { font-size: 12px; color: var(--text-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ── Settings, QA 18 Oct part 2 #13–#16 ──────────────────────────────────────
   #15: a full-height column — the header and the section list stay put, only
   .sp-main scrolls (and the section list on its own when it is taller). */
#page-content.sp-full { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
#page-content.sp-full .sp-page { flex: 1; min-height: 0; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; padding: 30px 32px 0; }
#page-content.sp-full .sp-head { flex: none; }
#page-content.sp-full .sp-body { flex: 1; min-height: 0; align-items: stretch; }
#page-content.sp-full .sp-nav { position: static; align-self: flex-start; max-height: 100%; overflow-y: auto; padding-bottom: 20px; box-sizing: border-box; }
#page-content.sp-full .sp-main { overflow-y: auto; min-height: 0; max-width: none; padding-bottom: 24px; }
#page-content.sp-full .sp-main > * { max-width: 820px; }
/* T12: the save bar is the page's last row, under the scroller — it takes its
   own height instead of covering the last setting. */
#page-content.sp-full .sp-page > .sp-savebar { position: static; flex: none; margin: 0 -32px; padding: 0 32px; }
#page-content.sp-full .sp-loading { flex: 1; }
@media (max-width: 860px) {
  #page-content.sp-full .sp-page { padding: 16px 16px 0; }
  #page-content.sp-full .sp-head-title { flex: 1 1 auto; min-width: 0; }
  #page-content.sp-full .sp-body { flex-direction: column; gap: 10px; }
  #page-content.sp-full .sp-nav { flex: none; max-height: 30vh; padding-bottom: 0; align-self: stretch; }
  #page-content.sp-full .sp-main { flex: 1; }
  #page-content.sp-full .sp-page > .sp-savebar { margin: 0 -16px; padding: 0 16px; }
}
/* #14: rows don't expand — label · value · badges · ⋯ */
.sp-row-label { cursor: default; }
.sp-menu-wrap { flex: none; }
.sp-dots { width: 28px; height: 28px; border-radius: 7px; border: none; background: none; color: var(--text-mid); font-size: 16px; line-height: 1; cursor: pointer; padding: 0; font-family: inherit; }
.sp-dots.sm { width: 24px; height: 24px; font-size: 14px; color: var(--text-dim); }
.sp-dots:hover, .sp-dots.on { background: var(--surface-3); color: var(--text); }
.sp-menu { width: 210px; padding: 5px; top: 32px; }
.sp-menu-item { display: block; width: 100%; text-align: left; border: none; background: none; padding: 7px 9px; border-radius: 6px; font-size: 12.5px; color: var(--text); cursor: pointer; font-family: inherit; }
.sp-menu-item:hover { background: var(--surface-4); }
.sp-menu-item.danger { color: var(--danger-soft); }
.sp-more { display: flex; align-items: center; gap: 5px; margin: -4px 0 10px; border: none; background: none; padding: 0; font-size: 12px; color: var(--text-mid); cursor: pointer; font-family: inherit; }
.sp-more:hover { color: var(--text); }
.sp-more svg { color: var(--text-dim); transition: transform .15s; }
.sp-more.open svg { transform: rotate(90deg); }
.sp-details { margin: -2px 0 12px 14px; display: flex; flex-direction: column; }
.sp-ruleline { display: flex; align-items: center; gap: 10px; min-height: 32px; border-top: 1px solid var(--border-soft); }
.sp-ruletext { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-soft); text-wrap: pretty; }
.sp-alsolink { background: none; border: none; padding: 0; text-align: left; cursor: pointer; font-family: inherit; }
.sp-alsolink:hover { color: var(--text); text-decoration: underline; }
.sp-ruleval { font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-details .sp-bands { margin: 6px 0 4px; }
.sp-scoring { padding: 4px 0 6px; }
.sp-refpick { width: 260px; flex-shrink: 0; }
.sp-refpick .mp-btn { padding: 6px 10px; font-size: 12.5px; }
.sp-refpick.here .mp-btn { border-color: rgba(var(--indigo-rgb), .5); }
/* #16: the combination-rule editor card */
.sp-rulecard { margin: 2px 0 14px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 12px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(var(--shadow-rgb), calc(.15 * var(--shadow-k))); }
.sp-rc-title { font-size: 13px; font-weight: 600; }
.sp-rc-when { display: block; margin-top: 14px; font-size: 11.5px; color: var(--text-mid); width: 34px; text-align: right; }
.sp-rc-conds { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.sp-rc-row { display: grid; grid-template-columns: 34px 140px minmax(0, 1fr) 28px; gap: 8px; align-items: center; }
.sp-rc-join { font-size: 11.5px; color: var(--text-dim); text-align: right; }
.sp-rc-scope { height: 34px; padding: 0 28px 0 10px; cursor: pointer; }
/* QA 19 Oct #12: one chevron for native selects and the select-like buttons
   beside them — two strokes drawn in --text-dim (follows the theme, the same
   in every browser): a 14 px icon, 10 px from the right edge, centred. */
select.drv-input, select.sp-rc-scope, select.sp-hsel, .sp-chev {
  background-image:
    linear-gradient(45deg, transparent calc(50% - .8px), var(--text-dim) calc(50% - .8px), var(--text-dim) calc(50% + .8px), transparent calc(50% + .8px)),
    linear-gradient(-45deg, transparent calc(50% - .8px), var(--text-dim) calc(50% - .8px), var(--text-dim) calc(50% + .8px), transparent calc(50% + .8px));
  background-size: 4px 4px; background-repeat: no-repeat;
  background-position: right 17px center, right 13px center;
}
select.drv-input, select.sp-rc-scope, select.sp-hsel { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 28px; }
select.sp-hsel { padding-left: 10px; }
.sp-chev { flex: none; width: 14px; height: 14px; background-position: 3px center, 7px center; }
.sp-rc-text { height: 34px; }
.sp-rc-text.warn, .sp-rc-btn.warn { border-color: rgba(var(--amber-rgb), .55); }
.sp-rc-pick { position: relative; min-width: 0; }
.sp-rc-btn { width: 100%; height: 34px; box-sizing: border-box; display: flex; align-items: center; gap: 6px; border-radius: 8px; border: 1px solid var(--border-2); background: var(--surface); padding: 0 10px; font-size: 12.5px; color: var(--text); text-align: left; cursor: pointer; font-family: inherit; }
.sp-rc-btn > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-rc-pop { left: 0; right: 0; top: 38px; width: auto; z-index: 30; }
.sp-check { color: var(--accent); font-size: 12px; }
.sp-rc-x { width: 28px; height: 28px; font-size: 14px; border-radius: 6px; }
.sp-rc-x:hover { background: var(--surface-3); }
.sp-rc-add { display: block; margin: 8px 0 0 42px; font-size: 12.5px; color: var(--accent); }
.sp-rc-then { margin-top: 16px; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center; }
.sp-rc-then .sp-rc-when { margin-top: 0; }
.sp-rc-thenrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.sp-rc-label { font-size: 12.5px; color: var(--text-soft); }
.sp-rc-range { flex: 0 1 300px; min-width: 200px; }
.sp-rc-preview { margin-top: 16px; padding: 10px 12px; border-radius: 8px; background: var(--surface-3); font-size: 12.5px; color: var(--text-soft); text-wrap: pretty; }
.sp-rc-preview.warn { color: var(--amber-soft); }
.sp-rc-foot { margin-top: 14px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.sp-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.sp-btn.primary:disabled { background: var(--surface-3); border-color: var(--border-2); color: var(--text-dim); opacity: 1; }
@media (max-width: 640px) { .sp-rc-row { grid-template-columns: 30px minmax(0, 1fr) 28px; } .sp-rc-row > .sp-rc-scope { grid-column: 2; } .sp-rc-row > .sp-rc-pick, .sp-rc-row > .sp-rc-text { grid-column: 2; } }
/* #14: History tab — the list header and filters stay, the rows scroll */
.sp-history { padding-bottom: 8px; }
.sp-hbar { position: sticky; top: 0; z-index: 5; background: var(--bg); padding-bottom: 2px; }
.sp-hfilters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 10px; }
.sp-hsearch { flex: 1 1 180px; min-width: 150px; }
.sp-hsel { max-width: 150px; }
.sp-hchip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 4px 4px 4px 9px; border-radius: 7px; background: rgba(var(--indigo-rgb), .14); color: var(--indigo-soft); }
.sp-hhead, .sp-hrow { display: grid; grid-template-columns: 110px 120px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: baseline; }
.sp-hhead { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; padding: 6px 0; border-bottom: 1px solid var(--border); }
.sp-hrow { padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; color: var(--text-muted); }
.sp-hwhen { color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-hwho, .sp-hscope { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-hwhat { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.sp-hdiff { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sp-hdiff b { color: var(--text); font-weight: 500; }
.sp-hpager { display: flex; align-items: center; gap: 8px; padding: 12px 0 4px; }
@media (max-width: 860px) {
  .sp-hhead { display: none; }
  .sp-hrow { grid-template-columns: 1fr 1fr; row-gap: 3px; }
}
.sp-savebar .discard { background: none; border: none; color: var(--text-mid); font-size: 12.5px; font-weight: 500; cursor: pointer; padding: 0 10px; height: 30px; }
.sp-savebar .save { background: var(--text); color: var(--bg); border: none; border-radius: 7px; height: 30px; padding: 0 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.sp-savebar .save[disabled] { opacity: .6; cursor: default; }
.sp-leave-discard { background: none; border: none; color: var(--danger); font-size: 12.5px; font-weight: 500; cursor: pointer; padding: 0 10px; height: 30px; margin-left: -10px; }
.pr-savebar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-top: 12px; background: var(--surface); border: 1px solid var(--border-3); border-radius: 10px; position: sticky; bottom: 8px; z-index: 11; }
.shf-stepper > button.shf-datebtn { flex: 1; width: auto; height: 100%; color: var(--text); font: 500 13px var(--fn); white-space: nowrap; }
.shf-stepper > button.shf-datebtn:hover { background: var(--row-hover); }

/* ── QA 30 Sep · booking form (#18–#22) ───────────────────────────────────── */
.bkg-head .drv-rectabs { margin-top: 2px; }
.bkg-card { padding: 16px; }
.bkg-card .drv-card-label { margin-bottom: 12px; }
.bkg-ab { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font: 700 9px var(--fn); color: var(--accent-ink); flex: none; }
.bkg-ab.a { background: var(--text); color: var(--bg); }
.bkg-ab.b { background: var(--accent); }
.bkg-chip { display: inline-flex; align-items: center; font-size: 12px; padding: 4px 10px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); }
.bkg-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; font-size: 12.5px; color: var(--text-dim); line-height: 1.5; background: var(--surface-2) repeating-linear-gradient(135deg, rgba(var(--shadow-rgb),.06) 0 8px, transparent 8px 16px); z-index: 500; pointer-events: none; }
.bkg-side { max-height: calc(100dvh - 20px); }
.bkg-pd.bkg-pd-p { background: var(--text); color: var(--bg); box-shadow: 0 0 0 5px rgba(var(--shadow-rgb),.14); }
.bkg-toast { display: flex; align-items: center; gap: 10px; pointer-events: auto; }   /* #toasts is pointer-events:none; the links must click */
.bkg-toast-link { font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.bkg-toast-x { cursor: pointer; opacity: .6; }
.bkg-toast-x:hover { opacity: 1; }
/* Address field (QA 19 Oct #17, addressField.js): suggestions under the input,
   a quiet "✓ Confirmed" at its right end, amber + "Pick an address from the
   list" once the field is left with text that wasn't picked. */
.af { position: relative; min-width: 0; }
.af-box { position: relative; }
.af-check { display: none; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); align-items: center; gap: 4px; font-size: 11px; color: var(--text-dim); pointer-events: none; white-space: nowrap; }
.af-frame .af-check { position: static; transform: none; flex: none; }
.af.af-ok .af-check { display: inline-flex; }
.af.af-ok .af-box > .af-input { padding-right: 92px; }
.af.af-ok.af-compact .af-box > .af-input { padding-right: 28px; }
.af.af-pending:not(:focus-within) .af-input, .af.af-pending:not(:focus-within) .af-frame,
.af.af-pending.af-show .af-input, .af.af-pending.af-show .af-frame { border-color: rgba(var(--amber-rgb), .75); }
.af-frame .af-input, .af-frame .af-input:focus { border: none; }
.af .af-input:focus { box-shadow: none; outline: none; }   /* T10: focus shows as the border colour only, as the search fields (T9) */
.af-msg { display: none; font-size: 11px; color: var(--amber); margin-top: 5px; }
.af.af-pending:not(:focus-within) .af-msg, .af.af-pending.af-show .af-msg { display: block; }
/* Suggestions (Dispatch review 20 Oct T10, mock 1a): pin in the field, two-line
   rows with the typed words in bold, the passenger's places first, attribution
   line at the bottom. White list in light (as the mock), --surface in dark. */
.af-pin { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); display: flex; pointer-events: none; }
.af.af-pinned .af-box > .af-input { padding-left: 32px; }
.af-pop { --af-bg: var(--surface); --af-hov: var(--surface-3); position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--af-bg); border: 1px solid var(--border-2); border-radius: 10px; box-shadow: 0 12px 32px rgba(var(--shadow-rgb), calc(.5 * var(--shadow-k))); z-index: 60; overflow: hidden; text-align: left; }
:root[data-theme="light"] .af-pop { --af-bg: #FFFFFF; --af-hov: var(--surface); }
/* Passenger › Places (T38): label · address · Default · × on one line; when
   the card (not the window) is too narrow, the label takes its own line and
   address, Default and × share the next. Buttons line up with the input, not
   with the hint under it. */
.psg-places { container-type: inline-size; display: flex; flex-direction: column; gap: 8px; }
.psg-place-row { display: grid; grid-template-columns: 130px minmax(0,1fr) auto 28px; gap: 8px; align-items: start; }
.psg-place-row > * { min-width: 0; }
.psg-place-row > .drv-secbtn { margin-top: 2px; }    /* centred on the 39px address input */
.psg-place-row > .drv-iconbtn { margin-top: 5px; }
@container (max-width: 480px) {
  .psg-place-row { grid-template-columns: minmax(0,1fr) auto 28px; row-gap: 6px; }
  .psg-place-row > [data-place] { grid-column: 1 / -1; }
}
@container (max-width: 320px) {   /* phone: the tick alone, so the address keeps room beside the buttons */
  .psg-place-row .af.af-ok .af-box > .af-input { padding-right: 28px; }
  .psg-place-row .af-check > span { display: none; }
}
.af-list { max-height: 300px; overflow-y: auto; padding: 4px 0; }
.af-head { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); padding: 6px 12px 4px; }
.af-sep { height: 1px; background: var(--border); margin: 4px 0; }
.af-opt { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; }
.af-opt:hover, .af-opt.hi { background: var(--af-hov); }
.af-ico { width: 26px; height: 26px; border-radius: 50%; background: var(--af-hov); display: flex; align-items: center; justify-content: center; flex: none; }
.af-opt.af-local .af-ico { background: rgba(var(--accent-rgb), .10); }
.af-opt-t { min-width: 0; flex: 1; }
.af-opt .t { display: block; font-size: 13px; font-weight: 400; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-opt .t b { font-weight: 600; }
.af-opt .s { display: block; font-size: 12px; color: var(--text-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-tag { font-size: 11px; color: var(--text-dim); flex: none; }
.af-empty { padding: 14px 12px; font-size: 12.5px; color: var(--text-mid); }
.af-credit { display: flex; justify-content: flex-end; padding: 6px 12px 7px; border-top: 1px solid var(--border); font-size: 10.5px; color: var(--text-dim); }
/* Booking form (bookings round B10): 48px header, three cards, 32px inputs,
   11px labels, 1120px content; one picker component for every record field. */
.bkg-topbar { height: 48px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 24px; border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 30; }
.bkg-form { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.bkg-form .drv-card.bkg-card { padding: 14px 16px 16px; border-radius: 10px; }
.bkg-form .drv-card-label { font-size: 11px; margin-bottom: 10px; }
.bkg-grid { display: grid; gap: 10px; }
.bkg-lbl { font-size: 11px; color: var(--text-mid); margin-bottom: 4px; display: flex; justify-content: space-between; gap: 6px; white-space: nowrap; }
.bkg-in { width: 100%; height: 32px; box-sizing: border-box; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 7px; padding: 0 10px; color: var(--text); font: 13px var(--fn); outline: none; }
.bkg-in.mono { font: 12.5px var(--fm); }
.bkg-in.area { height: auto; min-height: 32px; padding: 7px 10px; font-size: 12.5px; line-height: 1.45; resize: vertical; display: block; }
.bkg-in:focus, .bkg-inwrap:focus-within, .bkg-pickbtn:focus, .bkg-pickbtn.open { border-color: rgba(var(--accent-rgb), .55); }
.bkg-in.err, .bkg-inwrap.err, .bkg-pickbtn.err, .bkg-stepper.err { border-color: rgba(var(--danger-rgb), .6); }
.bkg-inwrap { height: 32px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 7px; padding: 0 8px 0 10px; }
.bkg-inwrap input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text); font: 13px var(--fn); padding: 0; }
.bkg-tag { font-size: 10.5px; color: var(--text-dim); white-space: nowrap; }
.bkg-idtag { font: 10px var(--fm); color: var(--accent); border: 1px solid rgba(var(--accent-rgb), .3); border-radius: 4px; padding: 1px 6px; white-space: nowrap; background: none; cursor: pointer; }
.bkg-pickbtn { width: 100%; height: 32px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 7px; padding: 0 10px; color: var(--text); font: 13px var(--fn); cursor: pointer; text-align: left; outline: none; }
.bkg-pickbtn .v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bkg-pickbtn .v.ph { color: var(--text-dim); }
.bkg-pickbtn .chev { width: 6px; height: 6px; border-right: 1.5px solid var(--text-mid); border-bottom: 1.5px solid var(--text-mid); transform: rotate(45deg); margin: -3px 3px 0 0; flex: none; }
.bkg-pickbtn.ro { cursor: default; opacity: .8; }
.bkg-pop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 9px; box-shadow: 0 16px 40px rgba(var(--shadow-rgb), calc(.6 * var(--shadow-k))); padding: 5px; z-index: 50; }
.bkg-popq { width: 100%; height: 28px; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border-2); border-radius: 6px; padding: 0 8px; font-size: 12px; color: var(--text); outline: none; margin-bottom: 4px; }
.bkg-poplist { max-height: 240px; overflow: auto; }
.bkg-poprow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px; border-radius: 6px; cursor: pointer; }
.bkg-poprow:hover, .bkg-poprow.hi { background: var(--surface-4); }
.bkg-poprow.on { background: rgba(var(--accent-rgb), .08); }
.bkg-poprow .t { display: block; font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bkg-poprow .s { display: block; font-size: 11px; color: var(--text-dim); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bkg-poprow .ck { font-size: 11px; color: var(--accent); flex: none; }
.bkg-poprow .id { font: 10.5px var(--fm); color: var(--text-dim); flex: none; }
.bkg-poprow .av { width: 26px; height: 26px; border-radius: 50%; background: rgba(var(--accent-rgb), .12); color: var(--accent); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.bkg-popempty, .bkg-pophint { padding: 8px 9px; font-size: 12px; color: var(--text-dim); }
.bkg-popsection { padding: 7px 9px 3px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.bkg-popclear { padding: 7px 9px; font-size: 12px; color: var(--text-dim); border-top: 1px solid var(--border); margin-top: 3px; cursor: pointer; border-radius: 0 0 6px 6px; }
.bkg-popclear:hover { background: var(--surface-4); }
.bkg-popnew { display: flex; align-items: center; gap: 10px; padding: 8px 9px; border-top: 1px solid var(--border); margin-top: 3px; font-size: 12.5px; color: var(--text); cursor: pointer; }
.bkg-popnew .plus { width: 26px; height: 26px; border-radius: 50%; border: 1px dashed var(--border-4); display: flex; align-items: center; justify-content: center; color: var(--text-dim); flex: none; }
.bkg-popnew .s { font-size: 11px; color: var(--text-dim); }
.bkg-chips { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.bkg-chipbtn { font-size: 11px; color: var(--text-muted); border: 1px solid var(--border-2); background: none; border-radius: 5px; padding: 2px 7px; cursor: pointer; white-space: nowrap; }
.bkg-chipbtn:hover { border-color: rgba(var(--accent-rgb), .5); }
.bkg-chipbtn.on { color: var(--accent); border-color: rgba(var(--accent-rgb), .35); background: rgba(var(--accent-rgb), .06); }
.bkg-seats { height: 32px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 7px; padding: 0 3px; font: 13px var(--fm); color: var(--text); }
.bkg-seats button, .bkg-stepper button { width: 24px; height: 24px; border-radius: 5px; border: none; background: none; color: var(--text-mid); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; flex: none; }
.bkg-seats button:hover, .bkg-stepper button:hover { background: var(--surface-4); }
.bkg-seg { height: 32px; box-sizing: border-box; display: flex; background: var(--surface); border: 1px solid var(--border-2); border-radius: 7px; padding: 2px; gap: 2px; }
.bkg-seg button { font: 12px var(--fn); padding: 0 11px; border-radius: 5px; border: none; cursor: pointer; white-space: nowrap; color: var(--text-dim); background: transparent; }
.bkg-seg button.on { color: var(--text); background: var(--surface-4); font-weight: 500; }
.bkg-stepper { width: 176px; height: 32px; box-sizing: border-box; display: flex; align-items: center; gap: 2px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 7px; padding: 0 3px; }
.bkg-stepper button.lbl { flex: 1; width: auto; font: 500 12.5px var(--fn); color: var(--text); white-space: nowrap; }
.bkg-switch { width: 30px; height: 16px; border-radius: 8px; background: var(--border-4); position: relative; flex: none; border: none; cursor: pointer; padding: 0; }
.bkg-switch span { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 6px; background: #FFFFFF; transition: left .15s; }
.bkg-switch.on { background: var(--accent); }
.bkg-switch.on span { left: 16px; }
.bkg-journey { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: stretch; }
.bkg-strip { background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; overflow: hidden; display: flex; flex-direction: column; min-height: 150px; }
.bkg-strip.big { position: fixed; inset: 60px 40px; z-index: 60; box-shadow: 0 24px 60px rgba(var(--shadow-rgb), calc(.7 * var(--shadow-k))); }
.bkg-strip-foot { padding: 8px 12px; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-mid); white-space: nowrap; }
.bkg-primary { background: var(--text); color: var(--bg); border: none; border-radius: 7px; height: 30px; padding: 0 14px; font: 500 12.5px var(--fn); cursor: pointer; white-space: nowrap; }
.bkg-primary[disabled] { opacity: .55; cursor: default; }
.bkg-secondary { background: var(--surface); border: 1px solid var(--border-3); border-radius: 7px; height: 30px; padding: 0 12px; font: 500 12.5px var(--fn); color: var(--text); cursor: pointer; white-space: nowrap; }
.bkg-ghost { background: none; border: none; height: 30px; padding: 0 10px; font: 500 12.5px var(--fn); color: var(--text-mid); cursor: pointer; white-space: nowrap; border-radius: 7px; }
.bkg-ghost:hover { background: var(--surface-3); }
.bkg-ghost.sm { height: 24px; font-size: 11.5px; padding: 0 6px; }
.bkg-orqipill { display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 11px; box-sizing: border-box; background: linear-gradient(180deg, rgba(var(--blue2-rgb), .13), rgba(var(--accent-rgb), .09)); border: 1px solid rgba(var(--accent-rgb), .26); border-radius: 9px; cursor: pointer; font: 12.5px var(--fn); color: var(--accent); white-space: nowrap; }
.bkg-orqipill:hover { border-color: rgba(var(--accent-rgb), .55); }
.bkg-orqipill .kbd { font: 9.5px var(--fm); color: rgba(var(--accent-rgb), .6); border: 1px solid rgba(var(--accent-rgb), .28); border-radius: 4px; padding: 1px 5px; }
.drv-orqi.bkg-orqi { width: min(92vw, 560px); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.bkg-orqi-head { display: flex; align-items: center; gap: 9px; }
.bkg-starter { font-size: 11.5px; color: var(--text-muted); border: 1px solid var(--border-2); background: none; border-radius: 6px; padding: 4px 9px; cursor: pointer; white-space: nowrap; }
.bkg-starter:hover { border-color: rgba(var(--accent-rgb), .5); }
@media (max-width: 860px) { .bkg-journey { grid-template-columns: 1fr; } .bkg-form .bkg-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 900px) { .bkg-details > div { flex-direction: column; } .bkg-side { width: 100% !important; position: static !important; } }

/* ── Zones record map (front/js/zoneRecord.js) ─────────────────────────────── */
.zone-vtx { width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--accent); box-sizing: border-box; box-shadow: 0 1px 3px rgba(var(--shadow-rgb),.25); cursor: move; }
.zone-lbl { background: none; border: none; box-shadow: none; color: var(--text-mid); font-size: 11px; font-weight: 500; letter-spacing: .01em; text-shadow: 0 0 3px var(--surface), 0 0 3px var(--surface); padding: 0; }
.zone-lbl::before { display: none; }
.zone-map .leaflet-container { font-family: inherit; background: var(--surface-2); }
.zone-map.drawing .leaflet-container, .zone-map.drawing .leaflet-interactive { cursor: crosshair; }
.zone-map .leaflet-bar { border: 1px solid var(--border-2) !important; box-shadow: 0 6px 18px rgba(var(--shadow-rgb),.12) !important; border-radius: 8px !important; overflow: hidden; }
.zone-map .leaflet-bar a { color: var(--text-muted) !important; background: var(--surface) !important; border-bottom-color: var(--border) !important; }
.zone-map .leaflet-top.leaflet-left { top: 10px; left: 10px; }

/* ── Rate card record (rates spec 4 Oct 2026, rateRecord.js) ─────────────── */
.rr-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 720px) { .rr-grid3 { grid-template-columns: 1fr; } }
.drv-allsel.bkg-pickbtn { height: 36px; border-radius: 8px; }
.drv-allsel.bkg-pickbtn .v.ph { color: var(--text-mid); }
.rr-affix { display: flex; align-items: center; gap: 6px; height: 36px; box-sizing: border-box; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 8px; padding: 0 11px; min-width: 0; }
.rr-affix:focus-within { border-color: rgba(var(--accent-rgb), .55); }
.rr-affix.err { border-color: rgba(var(--danger-rgb), .55); }
.rr-affix input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text); font: 12.5px var(--fm); padding: 0; }
.rr-affix input:disabled { color: var(--text-mid); }
.rr-affix .pre, .rr-affix .post { font: 12px var(--fm); color: var(--text-dim); flex: none; white-space: nowrap; }
.rr-price { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr) 76px; gap: 10px 12px; align-items: center; max-width: 620px; }
.rr-sur { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr) 76px 26px; gap: 10px 12px; align-items: center; max-width: 620px; }
.rr-colh { font-size: 11.5px; color: var(--text-mid); }
.rr-hair { grid-column: 1 / -1; height: 1px; background: var(--border-soft); margin: 2px 0; }
.rr-seg { display: inline-flex; padding: 2px; }
.rr-seg .drv-tab { padding: 4px 0; width: 34px; justify-content: center; font-size: 12px; }
@media (max-width: 720px) { .rr-price { grid-template-columns: 1fr 1fr; } .rr-price > div:first-child, .rr-price > .rr-colh { display: none; } .rr-sur { grid-template-columns: 1fr 1fr; } }

/* QA 5 Oct Q2: Developers header stays on one row above 1100 px. */
.dev-headrow { flex-wrap: nowrap; }
.dev-headtools > * { flex-shrink: 0; }
.dev-headtools > .drv-ask { flex-shrink: 1; }
@media (max-width: 1100px) { .dev-headrow, .dev-headtools { flex-wrap: wrap; } }

/* ── Eligibility line (booking form / record, integrations-gap step 02) ── */
.bkg-elig { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border); min-width: 0; flex-wrap: wrap; row-gap: 6px; }
.bkg-elig-lbl { font-size: 11px; color: var(--text-dim); flex: none; }
.bkg-elig-chip { font-size: 11.5px; padding: 2px 9px; border-radius: 20px; border: 1px solid; white-space: nowrap; flex: none; }
.bkg-elig-detail { font-size: 11.5px; color: var(--text-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.bkg-elig-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
button.bkg-elig-link:disabled { opacity: .6; cursor: default; }

/* ── Analytics boards (Analytics Boards spec, 7 Oct 2026; front/js/analyticsPage.js) ──
   Mock: "Analytics Boards.dc.html". Tokens only — both themes share the markup.
   Popovers, filter rows, checks and links reuse the .nt-* (Network) pieces. */
.ab { height: 100%; display: flex; flex-direction: column; position: relative; overflow: hidden; background: var(--bg); color: var(--text); }
.ab-backdrop { position: fixed; inset: 0; z-index: 25; }
.ab-head { padding: 20px 30px 0; flex-shrink: 0; position: relative; z-index: 26; }
.ab-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; row-gap: 10px; gap: 12px; }
.ab-title { font-size: 22px; font-weight: 700; letter-spacing: -.4px; }
.ab-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 5px; }
.ab-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.ab-ask { display: flex; align-items: center; gap: 9px; width: 360px; max-width: 100%; height: 32px; padding: 0 11px; border-radius: 9px; box-sizing: border-box; cursor: pointer; position: relative; z-index: 27;
  background: linear-gradient(180deg, rgba(var(--blue2-rgb), .13), rgba(var(--accent-rgb), .09)); border: 1px solid rgba(var(--accent-rgb), .26); }
.ab-ask:focus-within { border-color: rgba(var(--accent-rgb), .6); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .1); }
.ab-ask:focus:not(:focus-visible) { box-shadow: none; border-color: rgba(var(--accent-rgb), .26); outline: none; }
.ab-ask-text { font-size: 12.5px; color: var(--accent); flex: 1; white-space: nowrap; text-align: left; }
.ab-ask.thinking { animation: orqi-think 1.1s ease-in-out infinite; }
.ab-ask.thinking .ab-ask-spark svg { animation: orqi-spin 1s linear infinite; }
.ab-ask-spark { display: flex; flex: none; }
.ab-ask input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text); font: inherit; font-size: 12.5px; padding: 0; }
.ab-ask input::placeholder { color: var(--text-dim); }
.ab-ask-badge { display: flex; align-items: center; background: rgba(var(--accent-rgb), .12); border: none; border-radius: 5px; padding: 2px 7px; font: 600 10px var(--fm); color: var(--accent); cursor: pointer; flex: none; }
.ab-ask-badge[hidden] { display: none; }
.ab-iconbtn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border-2); background: none; display: flex; align-items: center; justify-content: center; color: var(--text-mid); cursor: pointer; flex-shrink: 0; padding: 0; }
.ab-iconbtn:hover { background: var(--surface-3); color: var(--text); }
.ab-iconbtn.sm { width: 24px; height: 24px; border: none; border-radius: 6px; color: var(--text-dim); }
.ab-btn { height: 32px; border-radius: 8px; border: 1px solid var(--border-2); background: none; display: flex; align-items: center; gap: 7px; padding: 0 10px; font: inherit; font-size: 12.5px; color: var(--text-mid); cursor: pointer; white-space: nowrap; }
.ab-btn:hover, .ab-btn.open { background: var(--surface-3); color: var(--text); }
.ab-btn.on { color: var(--accent); background: rgba(var(--accent-rgb), .10); border-color: rgba(var(--accent-rgb), .3); }
.ab-editbtn { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 9px; border: 1px solid var(--border-2); background: none; color: var(--text-soft); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ab-editbtn:hover { background: var(--surface-3); }
.ab-editbtn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 18px -6px rgba(var(--accent-rgb), .7); }
.ab-popwrap { position: relative; }
.ab-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 10px; padding: 6px; box-shadow: 0 16px 40px rgba(var(--shadow-rgb), calc(.5 * var(--shadow-k))); box-sizing: border-box; text-align: left; cursor: default; color: var(--text); }
.ab-actions .ab-pop, .ab-tile .ab-pop, .ab-block .ab-pop { left: auto; right: 0; }
.ab-sep { height: 1px; background: var(--border); margin: 4px 0; }
.ab-menurow { display: flex; align-items: center; justify-content: space-between; gap: 9px; width: 100%; padding: 7px 9px; border-radius: 6px; border: none; background: none; cursor: pointer; text-align: left; font: inherit; font-size: 12.5px; color: var(--text-soft); white-space: nowrap; }
.ab-menurow:hover { background: var(--surface-4); }
.ab-menurow.strong { color: var(--text); font-weight: 500; }
.ab-menurow.sel { color: var(--accent); font-weight: 600; }
.ab-menurow.danger { color: var(--danger); }
.ab-menurow.accent { color: var(--accent); }
.ab-mono-dim { font: 10.5px var(--fm); color: var(--text-dim); }
.ab-switch { width: 26px; height: 15px; border-radius: 8px; background: var(--text-quiet); position: relative; flex: none; transition: background .15s; }
.ab-switch > span { position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent-ink); transition: left .15s; }
.ab-switch.on { background: var(--accent); }
.ab-switch.on > span { left: 13px; }
:root:not([data-theme="light"]) .ab-switch > span { background: var(--text); }
:root:not([data-theme="light"]) .ab-switch.on > span { background: var(--accent-ink); }
.ab-schedpop { width: 292px; }
.ab-schedgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px 8px; }
.ab-flabel { display: block; font-size: 11px; color: var(--text-dim); margin-bottom: 4px; }
.ab-select, .ab-input { width: 100%; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border-2); color: var(--text); font: inherit; font-size: 12px; border-radius: 6px; padding: 5px 7px; outline: none; min-width: 0; }
.ab-input:focus, .ab-select:focus { border-color: rgba(var(--accent-rgb), .5); }
.ab-input.mono { font-family: var(--fm); }
.ab-schedrow { padding: 2px 8px 8px; }
.ab-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ab-chip { font: inherit; font-size: 12px; padding: 4px 9px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border-2); color: var(--text-mid); cursor: pointer; }
.ab-chip.on { border-color: rgba(var(--accent-rgb), .4); color: var(--accent); }
.ab-chip:disabled { opacity: .55; cursor: not-allowed; }
.ab-recip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 4px 3px 8px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border-2); color: var(--text-soft); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ab-recip button { border: none; background: none; padding: 1px; display: flex; color: var(--text-dim); cursor: pointer; }
.ab-recip button:hover { color: var(--danger); }
.ab-recip-in { flex: 1 1 120px; min-width: 0; background: none; border: none; outline: none; color: var(--text); font: inherit; font-size: 12px; padding: 3px 2px; }
.ab-schedfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 8px 4px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-dim); }

.ab-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; row-gap: 8px; }
.ab-tabs { display: flex; align-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 3px; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ab-tab { display: flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 6px; border: none; background: none; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--text-mid); white-space: nowrap; }
.ab-tab:hover { color: var(--text); }
.ab-tab.on { color: var(--text); background: var(--bg); font-weight: 600; box-shadow: inset 0 0 0 1px var(--border); }
.ab-tab-n { font: 10.5px var(--fm); color: var(--text-quiet); }
.ab-tab.on .ab-tab-n { color: rgba(var(--accent-rgb), .75); }
.ab-tab-add { width: 26px; height: 26px; padding: 0; border-radius: 6px; border: none; background: none; cursor: pointer; color: var(--text-dim); display: flex; align-items: center; justify-content: center; }
.ab-tab-add:hover { background: var(--surface-3); color: var(--text); }
.ab-vsep { width: 1px; height: 22px; background: var(--border); }
.ab-fbtn { display: flex; align-items: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 12.5px; color: var(--text); cursor: pointer; white-space: nowrap; height: 32px; box-sizing: border-box; }
.ab-fbtn svg { color: var(--text-dim); flex: none; }
.ab-fbtn.open { background: var(--surface-3); }
.ab-fbtn.set { border-color: rgba(var(--accent-rgb), .3); }
.ab-fbtn-range { font: 11px var(--fm); color: var(--text-dim); }
.ab-fbtn-cmp { font-size: 11px; color: var(--text-dim); }
.ab-fbtn.dashed { background: none; border-style: dashed; border-color: var(--border-3); color: var(--text-mid); }
.ab-fbtn.dashed:hover { border-color: rgba(var(--accent-rgb), .5); color: var(--accent); }
.ab-pill { display: flex; align-items: center; height: 32px; box-sizing: border-box; background: rgba(var(--accent-rgb), .10); border: 1px solid rgba(var(--accent-rgb), .3); border-radius: 8px; padding: 0 6px 0 10px; gap: 4px; }
.ab-pill > button:first-child { display: flex; gap: 7px; background: none; border: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--accent); cursor: pointer; white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.ab-pill-k { color: var(--text-mid); }
.ab-pill-x { width: 18px; height: 18px; border: none; background: none; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: var(--text-dim); cursor: pointer; padding: 0; }
.ab-pill-x:hover { color: var(--danger); }
.ab-textbtn { background: none; border: none; padding: 0; font: inherit; font-size: 12px; color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.ab-textbtn:hover { color: var(--text); }
.ab-textbtn.accent { color: var(--accent); }
.ab-spacer { flex: 1; }
.ab-edithint { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--accent); }
.ab-edithint > span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ab-datepop { width: 430px; max-width: calc(100vw - 40px); display: flex; gap: 6px; }
.ab-datepresets { width: 160px; flex: none; border-right: 1px solid var(--border); padding-right: 6px; }
.ab-preset { display: flex; width: 100%; padding: 7px 8px; border-radius: 6px; border: none; background: none; cursor: pointer; text-align: left; font: inherit; font-size: 12.5px; color: var(--text-soft); }
.ab-preset:hover { background: var(--surface-4); }
.ab-preset.on { background: var(--bg); color: var(--accent); font-weight: 600; }
.ab-datecustom { flex: 1; min-width: 0; padding: 4px 6px; }
.ab-daterow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ab-note { font-size: 11px; color: var(--text-dim); padding: 0 2px; line-height: 1.45; }
.ab-listpop { width: 240px; }
.ab-pophead { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.ab-newpop { width: 250px; display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.ab-newpop .ab-menurow { padding: 6px 2px; }
.ab-popfoot { display: flex; justify-content: flex-end; gap: 14px; padding: 4px 2px 2px; }
.ab-dim { color: var(--text-dim); font-size: 12px; }
.nowrap { white-space: nowrap; }

.ab-scroll { flex: 1; min-height: 0; overflow: auto; padding: 0 30px 24px; }
.ab-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 84px; gap: 12px; grid-auto-flow: dense; border-radius: 12px; }
.ab-grid.edit { padding: 12px; margin: -12px; background-image: linear-gradient(rgba(var(--accent-rgb), .07) 1px, transparent 1px); background-size: 100% 96px; }
.ab-tile { position: relative; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 14px 16px; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: visible; box-sizing: border-box; }
.ab-tile:hover { border-color: var(--border-2); }
.ab-tile.fresh { border-color: rgba(var(--accent-rgb), .5); }
.ab-grid.edit .ab-tile { cursor: grab; border-color: rgba(var(--accent-rgb), .28); }
.ab-grid.edit .ab-tile:hover { border-color: var(--accent); }
.ab-tile.dragging { opacity: .45; }
.ab-tile.resizing { box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .3); }
.ab-tile-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; min-height: 0; }
.ab-tile.kpi .ab-tile-head { margin-bottom: 0; }
.ab-tile-titles { flex: 1; min-width: 0; }
.ab-tile-title { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-tile.kpi .ab-tile-title { font-weight: 500; color: var(--text-mid); }
.ab-tile-meta { font-size: 11px; color: var(--text-low); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-tile.fresh .ab-tile-meta { color: var(--accent); }
.ab-tilemenu { width: 24px; height: 24px; border-radius: 6px; border: none; background: none; display: flex; align-items: center; justify-content: center; color: var(--text-dim); cursor: pointer; padding: 0; margin: -4px -6px 0 0; }
.ab-tilemenu:hover, .ab-tilemenu.on { background: var(--surface-4); color: var(--text); }
.ab-tilemenu:disabled { opacity: .35; cursor: default; background: none; }
.ab-tilepop { width: 200px; padding: 5px; z-index: 31; }
.ab-showas { display: flex; gap: 3px; padding: 0 5px 3px; }
.ab-showas button { flex: 1; padding: 5px 0; border-radius: 6px; border: 1px solid var(--border-2); background: none; cursor: pointer; font: inherit; font-size: 11.5px; color: var(--text-mid); }
.ab-showas button.on { background: var(--bg); border-color: rgba(var(--accent-rgb), .4); color: var(--accent); font-weight: 600; }
.ab-tile-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ab-tile-msg { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-dim); text-align: center; }
.ab-tile-msg.danger { color: var(--danger); }
.ab-sql { margin: 0; flex: 1; min-height: 0; overflow: auto; background: var(--surface); border-radius: 8px; padding: 10px 12px; font: 11px/1.5 var(--fm); color: var(--text-soft); white-space: pre-wrap; max-width: none; }
.ab-resize { position: absolute; right: 3px; bottom: 3px; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; color: var(--accent); cursor: nwse-resize; touch-action: none; border-radius: 4px; }
.ab-resize:hover { background: rgba(var(--accent-rgb), .12); }
.ab-spin { width: 13px; height: 13px; border: 2px solid rgba(var(--accent-rgb), .25); border-top-color: var(--accent); border-radius: 50%; animation: orqi-spin .8s linear infinite; flex: none; display: inline-block; box-sizing: border-box; }
.ab-spin.sm { width: 11px; height: 11px; margin-top: 3px; }

.ab-kpi { display: flex; align-items: baseline; gap: 10px; margin-top: auto; min-width: 0; overflow: hidden; }
.ab-kpi-val { font-size: 26px; font-weight: 600; letter-spacing: -.6px; line-height: 1; white-space: nowrap; flex: none; font-variant-numeric: tabular-nums; }
.ab-kpi-delta { font-size: 12px; font-weight: 500; white-space: nowrap; flex: none; }
.ab-kpi-sub { font-size: 11px; color: var(--text-low); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ab-chart { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ab-bars { flex: 1; min-height: 0; display: flex; align-items: flex-end; gap: 3px; border-bottom: 1px solid var(--border); padding-bottom: 1px; position: relative; }
.ab-bar-col { flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
.ab-bar-stack { width: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; min-height: 1px; }
.ab-bar-stack > div { border-radius: 2px; min-height: 0; }
.ab-bar-col:hover .ab-bar-stack { filter: brightness(1.08); }
.ab-bar-prev { position: absolute; inset: 0 0 1px; width: 100%; height: calc(100% - 1px); pointer-events: none; overflow: visible; }
.ab-axis { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; font: 10.5px var(--fm); color: var(--text-dim); }
.ab-legend { display: flex; gap: 12px; font: 11px var(--fn, inherit); flex-wrap: wrap; justify-content: center; min-width: 0; }
.ab-legend span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.ab-legend i { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }
.ab-legend i.dash { width: 12px; height: 0; border-top: 1.5px dashed var(--text-dim); border-radius: 0; }
.ab-linewrap { flex-direction: row; gap: 10px; }
.ab-line-plot { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ab-line-svg { flex: 1; min-height: 0; border-bottom: 1px solid var(--border); }
.ab-line-svg svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ab-yaxis { flex: none; display: flex; flex-direction: column; justify-content: space-between; font: 10.5px var(--fm); color: var(--text-dim); padding-bottom: 22px; text-align: right; }
.ab-yaxis .last { color: var(--accent); font-weight: 600; }
.ab-donutwrap { flex: 1; min-height: 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; overflow: hidden; }
.ab-donut { width: 112px; height: 112px; border-radius: 50%; position: relative; flex: none; }
.ab-donut > div { position: absolute; inset: 15px; border-radius: 50%; background: var(--surface-2); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ab-donut span { font-size: 16px; font-weight: 600; letter-spacing: -.3px; }
.ab-donut small { font-size: 10.5px; color: var(--text-dim); }
.ab-donut-legend { flex: 1; min-width: 120px; display: flex; flex-direction: column; gap: 5px; }
.ab-donut-legend > div { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-soft); }
.ab-donut-legend i { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.ab-donut-legend .lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-donut-legend .pct { font: 10.5px var(--fm); color: var(--text-dim); }
.ab-hbars { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 7px; overflow: hidden; }
.ab-hbar { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.ab-hbar .lbl { width: 110px; flex: none; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-hbar .track { flex: 1; height: 12px; background: var(--surface); border-radius: 3px; overflow: hidden; position: relative; }
.ab-hbar .track > div { height: 100%; border-radius: 3px; }
.ab-hbar .track .prev { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px dashed var(--text-dim); }
.ab-hbar .val { width: 52px; flex: none; text-align: right; font: 11.5px var(--fm); color: var(--text); }
.ab-table { flex: 1; min-height: 0; overflow: auto; border-top: 1px solid var(--border); }
.ab-thead, .ab-trow { display: flex; gap: 8px; }
.ab-thead { padding: 6px 0; font-size: 11px; color: var(--text-dim); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface-2); z-index: 1; }
.ab-trow { padding: 7px 0; font-size: 12.5px; border-bottom: 1px solid var(--border-soft); }
.ab-thead > span, .ab-trow > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-thead > span:first-child, .ab-trow > span.first { flex: 2; }
.ab-trow > span { color: var(--text); }
.ab-trow > span.first { color: var(--text-soft); }
.ab-thead .r, .ab-trow .r { text-align: right; }
.ab-trow .mono { font-family: var(--fm); font-size: 12px; }
.ab-trow .dim { color: var(--text-dim); }
.ab-map { flex: 1; min-height: 0; border-radius: 8px; position: relative; overflow: hidden; background-color: var(--map-bg); background-image: repeating-linear-gradient(135deg, rgba(var(--shadow-rgb), .035) 0 1px, transparent 1px 9px); }
.ab-blob { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--amber-rgb), .42), rgba(var(--accent-rgb), .14) 60%, transparent); pointer-events: none; }
.ab-blob.hot { background: radial-gradient(closest-side, rgba(var(--danger-rgb), .55), rgba(var(--amber-rgb), .28) 45%, rgba(var(--accent-rgb), .12) 70%, transparent); }
.ab-map-tag { position: absolute; left: 10px; bottom: 8px; font: 10px var(--fm); color: var(--text-mid); background: var(--surface-2); border-radius: 4px; padding: 2px 6px; opacity: .9; }
.ab-text { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.ab-text p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-soft); text-wrap: pretty; max-width: none; }
.ab-text.insight { border-left: 2px solid rgba(var(--blue2-rgb), .5); padding-left: 12px; }
.ab-text-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 11px; color: var(--text-low); }

.ab-empty { padding: 64px 24px; text-align: center; border: 1px dashed var(--border-3); border-radius: 12px; }
.ab-empty-t { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.ab-empty-s { font-size: 12.5px; color: var(--text-dim); margin-bottom: 16px; }
.ab-empty-sugs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ab-sug { background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 8px; padding: 7px 11px; font: inherit; font-size: 12.5px; color: var(--text-soft); cursor: pointer; }
.ab-sug:hover { border-color: rgba(var(--accent-rgb), .5); color: var(--accent); }
.ab-foot { flex-shrink: 0; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 30px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-dim); }

.ab-thread { position: fixed; top: 60px; right: 30px; width: 620px; max-width: calc(100vw - 40px); max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); display: flex; flex-direction: column; background: var(--surface-2); border: 1px solid rgba(var(--accent-rgb), .26); border-radius: 12px; box-shadow: 0 24px 60px rgba(var(--shadow-rgb), calc(.7 * var(--shadow-k))); z-index: 30; text-align: left; }
.ab-thread.wide { width: 920px; }
.ab-thread-head { display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex: none; }
.ab-thread-name { font-size: 12.5px; font-weight: 600; color: var(--accent); }
.ab-thread-body { flex: 1; min-height: 0; overflow: auto; padding: 0 16px; }
.ab-trysug { display: block; width: calc(100% + 16px); padding: 8px; margin: 0 -8px; border-radius: 6px; border: none; background: none; cursor: pointer; text-align: left; font: inherit; font-size: 12.5px; color: var(--text-soft); }
.ab-trysug:hover { background: var(--surface-3); }
.ab-thread-foot { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--border); padding: 12px 16px; flex: none; }
.ab-thread-foot .ab-input { flex: 1; padding: 8px 11px; font-size: 12.5px; border-radius: 8px; }
.ab-turn { padding: 12px 0 14px; border-top: 1px solid var(--border); }
.ab-turn:first-child { border-top: none; }
.ab-turn-q { font-size: 13.5px; font-weight: 500; letter-spacing: -.1px; margin-bottom: 8px; }
.ab-turn-status { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-mid); padding: 4px 0; }
.ab-turn-log { font: 11px var(--fm); color: var(--text-dim); padding: 2px 0 0 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-turn-err { font-size: 12.5px; color: var(--danger); margin-top: 6px; }
.ab-turn-p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--text-soft); max-width: none; text-wrap: pretty; }
.ab-blocks { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.ab-block { flex: 1 1 340px; min-width: 0; max-width: 560px; border: 1px solid var(--border-2); border-radius: 10px; padding: 12px 14px; background: var(--bg); }
.ab-thread.wide .ab-block { max-width: none; }
.ab-block-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ab-block-title { font-size: 12.5px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-block-body { height: 168px; display: flex; flex-direction: column; min-height: 0; }
.ab-block-body.tall { height: 140px; }
.ab-block-body .ab-table { max-height: 168px; }
.ab-block .ab-thead { background: var(--bg); }
.ab-block .ab-donut > div { background: var(--bg); }
.ab-typebtn { display: flex; align-items: center; gap: 5px; background: none; border: 1px solid var(--border-2); border-radius: 6px; padding: 3px 7px; font: inherit; font-size: 11.5px; color: var(--text-mid); cursor: pointer; white-space: nowrap; }
.ab-typebtn:hover { background: var(--surface-3); }
.ab-typepop { width: 130px; padding: 5px; }
.ab-pinsplit { display: flex; }
.ab-pinbtn { display: flex; align-items: center; gap: 5px; background: var(--accent); color: var(--accent-ink); border: none; border-radius: 6px 0 0 6px; padding: 4px 9px; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap; max-width: 220px; overflow: hidden; }
.ab-pinbtn span { overflow: hidden; text-overflow: ellipsis; }
.ab-pinbtn.chev { border-radius: 0 6px 6px 0; border-left: 1px solid rgba(var(--shadow-rgb), .2); padding: 4px 6px; }
.ab-pinbtn:hover { background: var(--accent-hover); }
.ab-pinpop { width: 200px; padding: 5px; z-index: 40; }
.ab-pinned { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--accent); white-space: nowrap; }
.ab-turn-tools { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.ab-sqltoggle { background: none; border: none; padding: 0; font: 11.5px var(--fm); color: var(--text-dim); cursor: pointer; }
.ab-sqltoggle:hover { color: var(--text); }
.ab-turn .ab-sql { margin-top: 8px; max-height: 260px; }

@media (max-width: 720px) {
  .ab-head { padding: 14px 16px 0; }
  .ab-scroll { padding: 0 16px 20px; }
  .ab-foot { padding: 8px 16px; }
  .ab-ask { width: 100%; }
  .ab-actions { width: 100%; justify-content: flex-start; }
  .ab-actions > .ab-ask { flex: 1 1 100%; }
  .ab-grid { grid-template-columns: minmax(0, 1fr); }
  .ab-tile { grid-column: auto !important; }
  .ab-thread, .ab-thread.wide { top: 12px; right: 8px; left: 8px; width: auto; max-width: none; }
  .ab-datepop { flex-direction: column; width: calc(100vw - 32px); }
  .ab-datepresets { width: auto; border-right: none; border-bottom: 1px solid var(--border); padding: 0 0 6px; display: flex; flex-wrap: wrap; }
  .ab-datepresets .ab-preset { width: auto; }
  .ab-bar .ab-pop { max-width: calc(100vw - 32px); }
  .ab-vsep { display: none; }
  .ab-tabs { width: 100%; }
  .ab-fbtn { max-width: 100%; overflow: hidden; }
  .ab-fbtn-range, .ab-fbtn-cmp { display: none; }
  .ab-kpi { flex-wrap: wrap; row-gap: 4px; }
}

/* Developers: the global site scope narrows keys/webhooks (QA 6 Oct R20) */
.dev-scope-banner { font-size: 12px; color: var(--text-dim); margin: -6px 0 12px; }
.dev-scope-link { background: none; border: none; padding: 0; font: inherit; color: var(--accent); cursor: pointer; }
.dev-scope-link:hover { text-decoration: underline; }

/* ── Import: side-entity cards (QA 6 Oct R24) + warnings row (R22) ── */
.imp-sidecards { padding: 14px 13px 6px; border-top: 1px solid var(--border); }
.imp-sidecards-title { font-size: 10.5px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.imp-sidecard { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); margin-bottom: 10px; overflow: hidden; }
.imp-sidecard.needs { border-color: rgba(var(--amber-rgb), .45); }
.imp-sidecard.off .imp-sec-title { color: var(--text-mid); }
.imp-sidecard-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; min-width: 0; }
.imp-sidecard.off .imp-sidecard-head { cursor: default; }
.imp-sidecard-head .imp-segs { flex: none; }
.imp-sidecard-status { font-size: 11.5px; color: var(--text-low); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.imp-sidecard-status.bad { color: var(--amber); }
.imp-sidecard > .imp-row:first-of-type { border-top: 1px solid var(--border-soft); }
.imp-sidecard > .imp-row:last-child { border-bottom: none; }
.imp-caret.hide { visibility: hidden; }
.imp-warnrow { margin: 8px 0 0; }
.imp-warnrow-chev { display: inline-flex; color: var(--shf-orqi-dim); transition: transform .15s; }
.imp-warnrow-chev.open { transform: rotate(90deg); }
.imp-h-site { margin-left: 8px; font-size: 11px; color: var(--text-dim); white-space: nowrap; }

/* ── Bookings board: anchored assign popover caret (QA 6 Oct R6) ── */
.bkb-assign .bkb-caret { position: absolute; top: -6px; left: 14px; width: 10px; height: 10px; background: var(--surface-3); border-left: 1px solid rgba(var(--accent-rgb),.3); border-top: 1px solid rgba(var(--accent-rgb),.3); transform: rotate(45deg); pointer-events: none; }
.bkb-assign.above .bkb-caret { top: auto; bottom: -6px; border: none; border-right: 1px solid rgba(var(--accent-rgb),.3); border-bottom: 1px solid rgba(var(--accent-rgb),.3); }

/* An input set beside a .pks-btn picker takes the picker's box (QA 6 Oct R29:
   Member ID next to Account) — same height, padding, font, radius, colours. */
.drv-input.pks-twin { box-sizing: border-box; height: 34px; background: var(--surface); border: 1px solid var(--border-3); border-radius: 6px; padding: 8px 10px; font: 13px var(--fn); color: var(--text); }
.drv-input.pks-twin:focus { border-color: rgba(var(--accent-rgb), .6); outline: none; }
.drv-input.pks-twin.err { border-color: var(--danger); }

/* Prediction action rows never push a card wider than itself (QA 6 Oct R35):
   the primary label truncates with an ellipsis, the full text is its title. */
.now-card { overflow-x: hidden; }
.now-card-btns { min-width: 0; }
.now-card-btns .now-btn.primary { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.now-card-btns .now-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-qb-a, .pc-act-btn.primary { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-hsrc-time { font: 11px var(--fm); color: var(--text-dim); margin: -2px 0 6px; padding-left: 2px; }

/* ── Live map car labels + reported cars (QA 6 Oct R5 / R18) ── */
/* Centred above the car (QA 18 Oct part 2 #12); a label that would overlap
   one already placed gets .live-label-hidden (liveTrips.js › paintLabels) —
   never the selected or hovered car's. */
.live-car-label { display: none; position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%); font: 600 10.5px/1 var(--fm); padding: 2px 5px; border-radius: 5px; background: var(--glass); border: 1px solid var(--border-2); white-space: nowrap; pointer-events: none; backdrop-filter: blur(6px); }
.live-car-label.live-label-hidden { visibility: hidden; }
.live-labels-vehicle .live-car-label { display: block; }
.live-labels-vehicle .live-car-label::after { content: attr(data-v); }
.live-labels-driver .live-car-label { display: block; }
.live-labels-driver .live-car-label::after { content: attr(data-d); }
/* Selected / hovered car: the full "Vehicle · Driver" label, whatever the mode or zoom. */
.live-car-full .live-car-label, .live-car-hover .live-car-label { display: block; visibility: visible; }
.live-car-full .live-car-label::after, .live-car-hover .live-car-label::after { content: attr(data-full); }
.live-car-reported::before { animation: none; }

/* ── Import footer, guest bookings, booking form hints ── */
.imp-foot-info { color: var(--text-dim); margin-left: 6px; }
.bkg-idtag.guest { color: var(--text-dim); border-color: var(--border-2); }
.bkg-createpsg { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.bkg-orqihint { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(var(--accent-rgb), .06); border: 1px solid rgba(var(--accent-rgb), .2); font-size: 12px; color: var(--text-soft); }
.bkg-secondary.sm { height: 24px; font-size: 11.5px; padding: 0 8px; }

/* ── Integrity (Integrity spec, 7 Oct 2026) — integrityPage.js / integrityRecord.js ── */
.ig-headright { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.ig-headright .drv-ask { width: 290px; max-width: 100%; }
.ig-search { display: flex; align-items: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 9px; padding: 0 10px; width: 148px; height: 32px; flex-shrink: 0; }
.ig-search input { background: none; border: none; outline: none; color: var(--text); font-size: 12.5px; width: 100%; min-width: 0; }
.ig-modes .drv-tab { padding: 4px 11px; }
.ig-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
.ig-status { display: inline-flex; align-items: center; font-size: 11px; font-weight: 500; padding: 1px 7px; border-radius: 5px; border: 1px solid; line-height: 1.5; }
.ig-tabn { font: 10.5px var(--fm); color: var(--text-dim); }
.ig-sigpop { width: 300px; }
.ig-siggroup { font-size: 10.5px; color: var(--text-dim); padding: 8px 8px 3px; }
.ig-tag { font: 9.5px var(--fm); color: var(--text-dim); border: 1px solid var(--border-2); border-radius: 4px; padding: 0 5px; white-space: nowrap; flex: none; }
.ig-sigcount { font: 10.5px var(--fm); color: var(--text-dim); margin-left: 6px; min-width: 14px; text-align: right; flex: none; }
.ig-row { height: 56px; }
.ig-cell { flex: none; box-sizing: border-box; padding-right: 12px; min-width: 0; }
.ig-l1 { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-l2 { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ig-mono { font-family: var(--fm); font-size: 11px; }
.ig-l2 .ig-mono { font-size: 10.5px; }
.ig-note { width: 100%; box-sizing: border-box; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 8px; padding: 9px 11px; color: var(--text); font: 12.5px/1.45 var(--fn); resize: vertical; outline: none; }
.ig-note:focus { border-color: rgba(var(--accent-rgb), .5); }
.ig-empty { padding: 14px 2px; font-size: 12.5px; color: var(--text-dim); }

/* Insights */
.ig-ins { flex: 1; overflow: auto; min-height: 0; padding: 0 30px 30px; }
.ig-ins-inner { max-width: 1240px; }
.ig-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.ig-kpi { padding: 18px 18px 16px; border-left: 1px solid var(--border); min-width: 0; }
.ig-kpi:first-child { border-left: none; }
.ig-kpi-l { font-size: 11.5px; color: var(--text-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-kpi-v { font-size: 24px; font-weight: 600; letter-spacing: -.02em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.ig-kpi-s { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-ins-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ig-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px 14px; min-width: 0; }
.ig-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ig-card-title { font-size: 13.5px; font-weight: 600; }
.ig-card-aside { font-size: 11.5px; color: var(--text-dim); text-align: right; }
.ig-chart { width: 100%; height: 200px; display: block; overflow: visible; }
.ig-grid { stroke: var(--border); stroke-width: 1; }
.ig-axis { fill: var(--text-dim); font: 10px var(--fm); }
.ig-area { fill: rgba(var(--accent-rgb), .1); }
.ig-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ig-pt { fill: var(--surface-2); stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ig-note-line { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin-top: 10px; }
.ig-tgrid { display: grid; align-items: center; gap: 10px; }
.ig-tg-sig { grid-template-columns: minmax(0, 1fr) 50px 70px; }
.ig-tg-prov { grid-template-columns: minmax(0, 1fr) 64px 50px 44px 80px; }
.ig-tg-drv { grid-template-columns: minmax(0, 1fr) 46px 74px minmax(0, 150px); }
.ig-tg-stamps { grid-template-columns: minmax(110px, 1.1fr) 70px 74px minmax(0, 1.4fr) minmax(0, 1.2fr); }
.ig-tg-bill { grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, .8fr); }
.ig-th { font: 600 10px var(--fm); letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); padding: 0 0 8px; border-bottom: 1px solid var(--border); }
.ig-th > span:not(:first-child) { text-align: right; }
.ig-tg-drv.ig-th > span:last-child, .ig-tg-stamps.ig-th > span, .ig-tg-bill.ig-th > span { text-align: left; }
.ig-trow { padding: 10px 0; border-bottom: 1px solid var(--border-soft); cursor: pointer; font-size: 12.5px; }
.ig-trow:hover:not(.static) { background: var(--surface-3); }
.ig-trow.static { cursor: default; }
.ig-trow:last-child { border-bottom: none; }
.ig-name { font-size: 12.5px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-sub { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ig-num { text-align: right; font: 12px var(--fm); color: var(--text); font-variant-numeric: tabular-nums; }
.ig-bar { height: 3px; border-radius: 2px; background: var(--border); margin-top: 6px; overflow: hidden; }
.ig-bar > div { height: 100%; background: var(--accent); border-radius: 2px; }

/* Record */
.ig-rgrid { display: grid; grid-template-columns: minmax(0, 820px) 256px; gap: 22px; align-items: start; }
.ig-rmain, .ig-rside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ig-rcard { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; min-width: 0; }
.ig-rcard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ig-eyebrow { font: 600 10px var(--fm); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.ig-rcard-aside { font-size: 11.5px; color: var(--text-dim); }
.ig-sigrow { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border-soft); }
.ig-sigrow:first-of-type { border-top: 1px solid var(--border); }
.ig-thr { font: 11px var(--fm); color: var(--text-dim); white-space: nowrap; flex: none; }
.ig-map { position: relative; height: 330px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--map-bg, var(--surface-3)); }
.ig-map .leaflet-tile { filter: grayscale(85%) brightness(.62) contrast(1.15) sepia(6%) hue-rotate(178deg) saturate(120%); }
:root[data-theme="light"] .ig-map .leaflet-tile { filter: saturate(.85); }
.ig-maplegend { position: absolute; right: 10px; bottom: 10px; z-index: 500; display: flex; gap: 14px; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 8px; padding: 6px 10px; font-size: 11px; color: var(--text-muted); max-width: calc(100% - 20px); box-sizing: border-box; }
.ig-maplegend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ig-lg-line { width: 16px; height: 3px; border-radius: 2px; background: var(--blue); display: inline-block; }
.ig-lg-ring { width: 10px; height: 10px; border-radius: 50%; border: 1.5px dashed var(--accent); display: inline-block; }
.ig-lg-tap { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--surface-2); display: inline-block; }
.ig-stopicon span { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid; background: var(--surface-2); font: 700 10px var(--fn); box-sizing: border-box; }
.leaflet-tooltip.ig-maptip { background: var(--surface-2); color: var(--text); border: 1px solid var(--border-2); border-radius: 6px; box-shadow: 0 6px 18px rgba(var(--shadow-rgb), calc(.4*var(--shadow-k))); font: 11px/1.45 var(--fn); padding: 5px 8px; }
.leaflet-tooltip.ig-maptip::before { display: none; }
.ig-mapstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-top: 14px; }
.ig-stat-v { font-size: 17px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
.ig-foot-note { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--border-soft); }
.ig-check { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--border-soft); font-size: 12.5px; }
.ig-check:first-of-type { border-top: 1px solid var(--border); }
.ig-other { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border-soft); font-size: 12.5px; cursor: pointer; }
.ig-other:hover { color: var(--accent); }
.ig-other.compact { padding: 6px 0; font-size: 12px; gap: 8px; }
.ig-hist { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border-soft); font-size: 12.5px; }
.ig-kv { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 12.5px; color: var(--text-muted); }
.ig-kv span:last-child { text-align: right; font-weight: 500; }
.ig-decide { width: 100%; height: 36px; border-radius: 8px; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text); font: 600 12.5px var(--fn); cursor: pointer; }
.ig-decide:hover { background: var(--surface-3); }
.ig-decide.clear { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ig-decide.clear.on { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .3); }
.ig-decide.confirm { background: rgba(var(--danger-rgb), .08); border-color: rgba(var(--danger-rgb), .45); color: var(--danger); }
.ig-decide.confirm.on { background: var(--danger); color: #fff; }
.ig-hero-dot { width: 46px; height: 46px; border-radius: 50%; background: var(--border-soft); display: flex; align-items: center; justify-content: center; flex: none; }
.ig-hero-dot span { width: 10px; height: 10px; border-radius: 50%; }
.ig-hero-title { font-size: 19px; font-weight: 600; letter-spacing: -.3px; }
.ig-hero-meta { font-size: 12px; color: var(--text-dim); margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; }
.ig-hero-meta .drv-link { font-size: 12px; }
.ig-sep { margin: 0 7px; color: var(--text-quiet); }

@media (max-width: 1100px) {
  .ig-ins-grid { grid-template-columns: minmax(0, 1fr); }
  .ig-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ig-kpi:nth-child(4) { border-left: none; }
  .ig-kpi:nth-child(n+4) { border-top: 1px solid var(--border); }
  .ig-rgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .ig-headright .drv-ask { width: 100%; }
  .ig-ins { padding: 0 16px 24px; }
  .ig-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ig-kpi { border-left: none !important; border-top: 1px solid var(--border); }
  .ig-kpi:nth-child(-n+2) { border-top: none; }
  .ig-kpi:nth-child(even) { border-left: 1px solid var(--border) !important; }
  .ig-mapstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ig-tg-prov { grid-template-columns: minmax(0, 1fr) 54px 40px 36px 66px; }
  .ig-tg-drv { grid-template-columns: minmax(0, 1fr) 40px 60px; }
  .ig-tg-drv > :nth-child(4) { display: none; }
  .ig-tg-stamps { grid-template-columns: minmax(0, 1fr) 54px 58px minmax(0, 1fr); }
  .ig-tg-stamps > :nth-child(5) { display: none; }
  .ig-map { height: 260px; }
  .ig-maplegend { display: none; }
}

/* ── Orqi thread (QA 18 Oct #3): orqiThread.js, the one Orqi surface ─────── */
.oq-mark { flex: none; overflow: visible; }
.oq-mark .oq-dot { transform-origin: 7px 7px; transform-box: view-box; }
.oq-working .oq-mark .oq-dot, .oq-status .oq-mark .oq-dot, .oq-thread.busy .oq-head .oq-mark .oq-dot { animation: oq-orbit 1.1s linear infinite; }
.oq-working { animation: orqi-think 1.1s ease-in-out infinite; }
@keyframes oq-orbit { to { transform: rotate(360deg); } }
@keyframes oq-fade { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .oq-working .oq-mark .oq-dot, .oq-status .oq-mark .oq-dot, .oq-thread.busy .oq-head .oq-mark .oq-dot, .oq-working, .oq-status-text { animation: none; }
}
.oq-badge { display: flex; align-items: center; background: rgba(var(--accent-rgb), .12); border: none; border-radius: 5px; padding: 2px 7px; font: 600 10px var(--fm); color: var(--accent); cursor: pointer; flex: none; }
.oq-badge[hidden] { display: none; }
.oq-thread { position: fixed; top: 60px; right: 30px; width: 620px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 90px); display: flex; flex-direction: column; background: var(--surface-2); border: 1px solid rgba(var(--accent-rgb), .26); border-radius: 12px; box-shadow: 0 24px 60px rgba(var(--shadow-rgb), calc(.7 * var(--shadow-k))); z-index: 300; text-align: left; color: var(--text); font: 13px var(--fn); cursor: default; }
.oq-head { display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex: none; min-width: 0; }
.oq-name { font-size: 12.5px; font-weight: 600; color: var(--accent); }
.oq-dim { color: var(--text-dim); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oq-nowrap { white-space: nowrap; flex: none; }
.oq-textbtn { background: none; border: none; padding: 0; font: inherit; font-size: 12px; color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.oq-textbtn:hover { color: var(--text); }
.oq-textbtn.accent { color: var(--accent); }
.oq-iconbtn { width: 24px; height: 24px; border-radius: 6px; border: none; background: none; display: flex; align-items: center; justify-content: center; color: var(--text-dim); cursor: pointer; padding: 0; flex: none; }
.oq-iconbtn:hover { background: var(--surface-3); color: var(--text); }
.oq-body { flex: 1; min-height: 0; overflow: auto; padding: 0 16px; }
.oq-sughead { font-size: 10.5px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; padding: 12px 0 6px; }
.oq-sug { display: block; width: calc(100% + 16px); padding: 8px; margin: 0 -8px; border-radius: 6px; border: none; background: none; cursor: pointer; text-align: left; font: inherit; font-size: 12.5px; color: var(--text-soft); }
.oq-sug:hover { background: var(--surface-3); }
.oq-turn { padding: 12px 0 14px; border-top: 1px solid var(--border); }
.oq-turn:first-child { border-top: none; }
.oq-re, .oq-replying { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-dim); margin-bottom: 5px; min-width: 0; }
.oq-replying { color: var(--text-mid); margin-bottom: 7px; }
.oq-bar { width: 2px; height: 11px; background: var(--border-2); border-radius: 1px; flex: none; }
.oq-replying .oq-bar { background: var(--accent); }
.oq-ell { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oq-x { background: none; border: none; padding: 0; color: var(--text-dim); cursor: pointer; font-size: 12px; }
.oq-q { font-size: 13.5px; font-weight: 500; letter-spacing: -.1px; margin-bottom: 8px; overflow-wrap: anywhere; }
.oq-status { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.oq-status-text { font-size: 12.5px; color: var(--text-mid); animation: oq-fade 1.6s ease-in-out infinite; }
.oq-p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--text-soft); max-width: none; text-wrap: pretty; overflow-wrap: anywhere; }
.oq-note { font: 11px var(--fm); color: var(--text-dim); margin-top: 2px; line-height: 1.5; }
.oq-err { font-size: 12.5px; color: var(--danger); }
.oq-result { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; padding: 8px 11px; border-radius: 8px; background: rgba(var(--accent-rgb), .07); border: 1px solid rgba(var(--accent-rgb), .18); font-size: 12.5px; color: var(--text); }
.oq-result > span:first-child { flex: 1; min-width: 0; }
.oq-result.off { background: none; border-color: var(--border); color: var(--text-dim); }
.oq-confirm { margin-top: 10px; padding: 11px 13px; border-radius: 10px; border: 1px solid rgba(var(--accent-rgb), .3); background: var(--bg); }
.oq-confirm.done { border-color: var(--border); }
.oq-confirm-title { font-size: 13px; font-weight: 600; }
.oq-confirm-row { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.oq-confirm-state { margin-top: 6px; font-size: 12px; color: var(--text-mid); }
.oq-primary { background: var(--accent); color: var(--accent-ink); border: none; border-radius: 7px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.oq-primary:hover { background: var(--accent-hover); }
.oq-tools { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.oq-tool { background: none; border: none; padding: 0; font: inherit; font-size: 11.5px; color: var(--text-mid); cursor: pointer; }
.oq-tool:hover { color: var(--text); }
.oq-tool.accent { color: var(--accent); }
.oq-thumb { background: none; border: none; padding: 0; color: var(--text-dim); cursor: pointer; display: flex; }
.oq-thumb.down svg { transform: rotate(180deg); }
.oq-thumb:hover, .oq-thumb.up { color: var(--accent); }
.oq-thumb.down:hover, .oq-thumb.down.on { color: var(--danger); }
.oq-foot { border-top: 1px solid var(--border); padding: 12px 16px; flex: none; }
.oq-footrow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.oq-footrow .oq-dim { flex: 0 1 auto; }
.oq-input { flex: 1; min-width: 0; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border-2); color: var(--text); font: inherit; font-size: 12.5px; border-radius: 8px; padding: 8px 11px; outline: none; }
.oq-input:focus { border-color: rgba(var(--accent-rgb), .5); }
@media (max-width: 640px) { .oq-footrow .oq-dim { display: none; } }
/* Empty thread (#25): starters right under where you type. */
.oq-thread.starters { padding: 6px 0 8px; }
.oq-starters { padding: 0 12px; }
.oq-starters .oq-sughead { padding: 6px 0 4px; }
.oq-starters .oq-sug { width: calc(100% + 8px); margin: 0 -4px; padding: 7px 4px; }
.oq-emptytop { display: flex; align-items: center; gap: 9px; padding: 6px 12px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.oq-emptytop .oq-input { padding: 7px 10px; }

/* Resizable list columns (colResize.js, QA 18 Oct part 2 #17) */
[data-colsizer] [data-col] { position: relative; }
.col-resize { position: absolute; right: -3px; top: -6px; bottom: -6px; width: 7px; cursor: col-resize; z-index: 2; }
.col-resize::after { content: ''; position: absolute; left: 3px; top: 25%; bottom: 25%; width: 1px; background: transparent; }
[data-col]:hover > .col-resize::after { background: var(--border-2); }
.col-resize:hover::after, body.col-resizing .col-resize::after { background: var(--accent); }
body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-select: none !important; }
/* Driver · Vehicle · Off on the Command Center and Map page live maps. */
.live-label-toggle button { font: 500 11.5px var(--fn); color: var(--text-muted); background: var(--glass); border: 1px solid var(--border-2); border-radius: 7px; padding: 4px 9px; cursor: pointer; backdrop-filter: blur(6px); }
.live-label-toggle button:hover { color: var(--text); border-color: rgba(var(--accent-rgb), .5); }

/* ── Dispatch model 20 Oct: lock mark (plannerWords.js lockMarkHtml) ── */
.lock-mark { display: inline-flex; align-items: center; color: var(--text-dim); flex: none; cursor: default; }
/* The lock's quick tooltip rides on .info-tip (T1); keep the mark's own look. */
.lock-mark.info-tip { margin-left: 0; font-size: inherit; cursor: default; }
.lock-mark.info-tip:hover { color: var(--text-mid); }
/* Trip panel: ⋯ menu (lock / driver declined) and the answers line (stages 1.1, 3) */
.drv-menu.tp-more { position: absolute; right: 0; top: 34px; width: 258px; z-index: 30; }
.tp-answers { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 6px; font-size: 11.5px; color: var(--text-dim); min-width: 0; }
/* Trip page: the planner's alert on a hand-set trip (trips.plan_issue, T3 / T18). */
.tp-planissue { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.45; color: var(--amber-soft); background: rgba(var(--amber-rgb),.1); border: 1px solid rgba(var(--amber-rgb),.28); border-radius: 8px; padding: 7px 10px; }

/* ── Booking record: Why here / Why not / assign by hand (dispatch model 20 Oct, jobRecord.js) ── */
.bkg-why-text { font-size: 13px; color: var(--text-soft); line-height: 1.5; }
.bkg-why-text.warn { color: var(--amber); }
.bkg-why-text.quiet, .bkg-why-quiet { font-size: 12.5px; color: var(--text-dim); }
.bkg-why-meta { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; margin-top: 6px; font-size: 11.5px; color: var(--text-dim); }
.bkg-why-tag { font-size: 11px; color: var(--indigo-soft); background: rgba(var(--indigo-rgb), .12); border-radius: 20px; padding: 2px 9px; white-space: nowrap; }
.bkg-why-cmp { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 5px 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); max-width: 520px; }
.bkg-why-cmp > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bkg-why-cmp > span:nth-child(-n+3) { font-size: 11px; color: var(--text-dim); }
.bkg-why-cmp > span:nth-child(3n+2), .bkg-why-cmp > span:nth-child(3n) { font-family: var(--fm); }
.bkg-whynot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.bkg-whynot-l { font-size: 12px; color: var(--text-mid); flex: none; }
.bkg-whynot-pick { flex: 0 1 260px; min-width: 160px; }
.bkg-assignpick { flex: 0 1 170px; min-width: 130px; }
.bkg-assignpick .pks-btn, .bkg-whynot-pick .pks-btn { padding: 5px 9px; font-size: 12px; }

/* ── Plan run scope + preview (planScope.js, dispatch model stage 4.3) ── */
.psc-overlay { align-items: flex-start; overflow-y: auto; }
.psc-overlay { padding: 16px; }
.psc-card { width: 100%; max-width: 560px; min-width: 0; margin: auto 0; box-sizing: border-box; }
.psc-sec { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); min-width: 0; }
.psc-h { font-size: 10.5px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 7px; }
.psc-radio { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: 12.5px; color: var(--text-soft); cursor: pointer; }
.psc-radio input { accent-color: var(--accent); margin: 2px 0 0; flex: none; width: auto; height: auto; padding: 0; }
.psc-radio > span { flex: 1; min-width: 0; }
.psc-radio.off { color: var(--text-quiet); cursor: default; }
.psc-sub { display: block; font-size: 11px; color: var(--text-dim); margin-top: 1px; line-height: 1.4; }
.psc-msel { margin: 6px 0 2px 22px; min-width: 0; }
.psc-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 4px; }
.psc-order { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.psc-order li { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; background: var(--surface-2); font-size: 12.5px; min-width: 0; }
.psc-n { font: 600 11px var(--fm); color: var(--text-dim); width: 14px; text-align: right; flex: none; }
.psc-g { flex: 1; min-width: 0; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.psc-mv { width: 26px; height: 24px; border-radius: 6px; border: 1px solid var(--border-2); background: var(--surface); color: var(--text-mid); cursor: pointer; font-size: 12px; flex: none; }
.psc-mv:hover:not([disabled]), .psc-mv:focus-visible { color: var(--accent); border-color: rgba(var(--accent-rgb), .5); outline: none; }
.psc-mv[disabled] { opacity: .35; cursor: default; }
.psc-prev { margin-top: 14px; padding: 11px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.psc-prev.stale { opacity: .7; }
.psc-track { height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin-top: 7px; }
.psc-bar { height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s; }
.psc-reason { display: flex; gap: 10px; font-size: 12px; color: var(--text-soft); padding: 4px 0; border-bottom: 1px solid var(--border-soft); }
.psc-reason:last-child { border-bottom: none; }
.psc-rn { font: 500 12px var(--fm); width: 22px; text-align: right; flex: none; color: var(--text); }
.psc-cmp { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12px; table-layout: fixed; }
.psc-cmp th, .psc-cmp td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--border-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psc-cmp th { font-weight: 400; color: var(--text-dim); width: 34%; }
.psc-cmp thead td { font-size: 11px; font-weight: 600; color: var(--text-mid); }
.psc-cmp tbody td { font-family: var(--fm); color: var(--text-soft); }
.psc-cmp td.better { color: var(--accent); background: rgba(var(--accent-rgb), .08); }
.psc-cmp tfoot th, .psc-cmp tfoot td { border-bottom: none; padding-top: 9px; }
.psc-plan { height: 28px; }
.pls-cmp td.diff { color: var(--amber); }
.psc-foot { display: flex; align-items: center; gap: 6px; margin-top: 16px; flex-wrap: wrap; row-gap: 6px; }
.psc-why { flex: 1; min-width: 120px; font-size: 11px; color: var(--text-dim); }
.psc-sec-btn { border: 1px solid var(--border-2); }
.psc-why:empty { display: none; }
.psc-foot [data-psc="cancel"] { margin-left: auto; }

/* ── Dispatch model stage 4 (2026-10-20): Settings goals list + Results, Import row notes ── */
.sp-order-n { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 600 11px var(--fm); color: var(--accent); background: rgba(var(--accent-rgb), .12); }
/* Goals (dispatch review 20 Oct T26, mock 1d): every goal, on ones on top in
   order (drag the grip), off ones below greyed; fixed tie-breakers after. */
.sp-goals { padding: 0 0 14px; max-width: 640px; }
.sp-goals-desc { font-size: 12px; color: var(--text-mid); line-height: 1.5; margin: -2px 0 6px; text-wrap: pretty; }
.sp-goal-list { list-style: none; margin: 0; padding: 0; }
.sp-goal { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 4px 6px 0; border-bottom: 1px solid var(--border-soft); box-sizing: border-box; background: var(--bg); border-radius: 6px; }
.sp-goal.dragging { background: var(--surface-3); box-shadow: 0 6px 18px rgba(var(--shadow-rgb), calc(.35 * var(--shadow-k))); position: relative; z-index: 2; }
.sp-goal-grip { flex: none; width: 24px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; padding: 0; color: var(--text-quiet); cursor: grab; touch-action: none; border-radius: 6px; }
.sp-goal-grip:hover, .sp-goal-grip:focus-visible { color: var(--text-mid); background: var(--surface-3); }
.sp-goal.dragging .sp-goal-grip { cursor: grabbing; }
.sp-goal-grip.none { cursor: default; }
.sp-goal .sp-goal-n { flex: none; width: 14px; font: 12px var(--fm); color: var(--text-dim); }
.sp-goal-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sp-goal-label { font-size: 13px; font-weight: 500; color: var(--text); }
.sp-goal-desc { font-size: 12px; color: var(--text-mid); line-height: 1.4; text-wrap: pretty; }
.sp-goal.off .sp-goal-label, .sp-goal.off .sp-goal-desc { color: var(--text-dim); }
.sp-goal-sw.locked { opacity: .45; cursor: not-allowed; }
.sp-row.draft .sp-goal-sw { box-shadow: none; }
.sp-goal-then { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); margin: 16px 0 4px; }
.sp-goal-ties { font-size: 12.5px; color: var(--text-mid); line-height: 1.6; }
/* T13: dependent settings in one row — Off | after [X] h for [Y] min */
.sp-pair { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.sp-pair-word { font-size: 12.5px; color: var(--text-mid); }
.sp-stepper { display: inline-flex; align-items: center; height: 28px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 8px; box-sizing: border-box; }
.sp-stepper .sp-val { width: 34px; }
.sp-stepper .sp-unit { margin-right: 2px; }
.sp-step { width: 26px; height: 26px; border: none; background: none; color: var(--text-mid); font: 15px var(--fn); cursor: pointer; padding: 0; border-radius: 7px; }
.sp-step:hover:not(:disabled) { color: var(--text); background: var(--surface-3); }
.sp-step:disabled { opacity: .35; cursor: default; }
.sp-row.draft .sp-stepper { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .5); }
.sp-row.draft .sp-stepper .sp-val { box-shadow: none; }
.sp-results { margin: 10px 0 6px; padding: 12px 14px; border: 1px solid var(--border-2); border-radius: 10px; background: var(--surface-2); }
.sp-results-head { font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 10px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.sp-results-head .sp-small { font-weight: 400; }
.sp-results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.sp-results-cell { min-width: 0; }
.sp-results-label { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.sp-results-val { font: 600 18px var(--fm); color: var(--text); margin-top: 3px; }
.sp-results-prev { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.sp-results-chg { font-weight: 600; color: var(--text-mid); }
.sp-results-chg.good { color: var(--accent); }
.sp-results-chg.bad { color: var(--danger-soft); }
.imp-sample-why { display: flex; flex-direction: column; gap: 2px; padding: 0 14px 7px 14px; font-size: 11.5px; color: var(--text-dim); border-bottom: 1px solid var(--border-soft); min-width: 760px; }
.imp-sample-why .err { color: var(--danger-soft); }
.imp-rowedit .imp-sample-why { padding: 0 0 8px; border-bottom: none; min-width: 0; }
/* Board: the assign popover's "Group into one trip". */
.bkb-together { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-soft); padding: 2px 4px 7px; cursor: pointer; }
.bkb-together input { accent-color: var(--accent); width: 13px; height: 13px; margin: 0; }

/* ── Driver's day map (dayMap.js · QA 19 Oct #9 / #16, mock "Driver Day Map") ──
   Shared by the Bookings board map and Shifts › Open. Tokens for both themes;
   the mock's colours: casing / tag ground white in light, #12161F in dark. */
:root { --dd-case: #12161F; --dd-tag-bg: #12161F; --dd-empty: #7C8696; --dd-hatch: rgba(124,134,150,.25); --dd-dhl-bg: rgba(18,22,31,.92); --dd-past: #3A4456; --dd-nav-bg: rgba(18,22,31,.96); --dd-axis: #161B25; }
:root[data-theme="light"] { --dd-case: #FFFFFF; --dd-tag-bg: #FFFFFF; --dd-hatch: rgba(124,134,150,.18); --dd-dhl-bg: rgba(255,255,255,.92); --dd-past: #AEB7C4; --dd-nav-bg: rgba(247,248,250,.96); --dd-axis: #DFE3EA; }
.dd-pin { background: none; border: none; }
.dd-tagbox { position: absolute; box-sizing: border-box; }
.dd-tag { height: 100%; display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; background: var(--dd-tag-bg); border: 1.5px solid rgba(var(--accent-rgb),.55); border-radius: 6px; font: 600 11px var(--fn); color: var(--accent); box-shadow: 0 1px 3px rgba(var(--shadow-rgb),.18); box-sizing: border-box; padding: 0 6px; }
.dd-tag.cur { background: var(--accent); color: var(--accent-ink); border-color: var(--dd-case); font: 700 12px var(--fn); box-shadow: 0 1px 4px rgba(var(--shadow-rgb),.25); padding: 0; }
.dd-tag.dd-place { color: var(--text); border-color: var(--border-4); }
.dd-tag .dd-time { font: 500 10.5px var(--fm); color: var(--text-mid); }
.dd-dhl { height: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap; background: var(--dd-dhl-bg); border-radius: 5px; font: 500 10.5px var(--fm); color: var(--text-soft); }
.dd-dot { position: absolute; box-sizing: content-box; border-radius: 50%; background: var(--accent); border: 2px solid var(--dd-case); box-shadow: 0 0 0 1px var(--border-2); }
.dd-dot.sq { border-radius: 2px; background: var(--text); }
.dd-dot.faded { opacity: .45; }
.dd-arrow { position: absolute; left: -3.5px; top: -3px; width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-bottom: 6px solid var(--dd-case); transform-origin: 3.5px 3px; opacity: .95; }
/* the navigator */
.dd-nav { display: flex; flex-direction: column; gap: 8px; background: var(--dd-nav-bg); border: 1px solid rgba(var(--accent-rgb),.25); border-radius: 10px; padding: 10px 12px 8px; box-sizing: border-box; font-family: var(--fn); min-width: 0; }
.dd-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; min-width: 0; }
.dd-head .dd-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dd-head .dd-day { color: var(--text-mid); white-space: nowrap; }
.dd-head .dd-clear { font-size: 12px; color: var(--text-dim); cursor: pointer; flex: none; }
.dd-head .dd-clear:hover { color: var(--text); }
.dd-sum { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--text-soft); }
.dd-sep { color: var(--text-quiet); }
.dd-key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dd-sw-trip { width: 14px; height: 3px; border-radius: 2px; background: var(--accent); flex: none; }
.dd-sw-empty { width: 14px; height: 0; border-top: 2.5px dotted var(--dd-empty); flex: none; }
.dd-strip { display: flex; flex-direction: column; gap: 3px; }
.dd-track { position: relative; height: 22px; }
.dd-axis { position: absolute; left: 0; right: 0; top: 10.5px; height: 1px; background: var(--dd-axis); }
.dd-blk { position: absolute; top: 0; height: 22px; border-radius: 3px; min-width: 3px; box-sizing: border-box; overflow: hidden; display: flex; align-items: center; justify-content: center; font: 600 10px var(--fn); color: var(--accent-ink); }
.dd-blk-trip { background: var(--accent); cursor: pointer; }
.dd-blk-trip.past { background: var(--dd-past); }
.dd-blk-trip.next { opacity: .4; }
.dd-blk-trip.cur { box-shadow: 0 0 0 2px var(--dd-case), 0 0 0 3.5px var(--accent); z-index: 2; }
.dd-blk-trip.hov:not(.cur) { box-shadow: 0 0 0 1.5px var(--text); z-index: 1; }
.dd-blk-empty { top: 6px; height: 10px; background: repeating-linear-gradient(135deg, var(--dd-empty) 0 2px, var(--dd-hatch) 2px 5px); cursor: default; }
.dd-blk-empty.dim { opacity: .45; }
.dd-blk-empty.hov { opacity: 1; box-shadow: 0 0 0 1.5px var(--text-soft); z-index: 1; }
.dd-ticks { position: relative; height: 13px; font: 500 10px var(--fm); color: var(--text-dim); }
.dd-ticks span { position: absolute; transform: translateX(-50%); }
.dd-foot { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--border); padding-top: 7px; }
.dd-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dd-step { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border-2); display: flex; align-items: center; justify-content: center; color: var(--text-soft); background: var(--dd-tag-bg); cursor: pointer; flex: none; padding: 0; font: 14px/1 var(--fn); }
.dd-step:hover:not(:disabled) { border-color: var(--border-4); }
.dd-step:disabled { color: var(--text-quiet); cursor: default; }
.dd-title { font-size: 12px; color: var(--text); font-weight: 500; white-space: nowrap; }
.dd-row .dd-time { font: 500 11.5px var(--fm); color: var(--text-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dd-whole { font: 500 12px var(--fn); height: auto; padding: 3px 9px; border-radius: 6px; border: none; background: none; color: var(--text-mid); cursor: pointer; white-space: nowrap; flex: none; }
.dd-whole:hover { color: var(--text); }
.dd-whole.on { color: var(--accent); background: rgba(var(--accent-rgb),.10); }
.dd-meta { font-size: 11.5px; color: var(--text-mid); padding-left: 60px; min-height: 17px; }
/* Shifts › Open: the navigator sits under the map inside the route panel */
.shf-rt-daynav .dd-nav { background: var(--surface); border-color: var(--border-2); padding: 8px 10px 6px; gap: 7px; }
/* ── end driver's day map ── */

/* ── Edits that collide (realtime F4, mocks 1c–1d; js/editConflict.js) ── */
/* One flash for a value taken in place (inset shadow: paints over the field's own background). */
@keyframes rtc-flash { 0% { box-shadow: inset 0 0 0 999px rgba(var(--accent-rgb), .20); } 100% { box-shadow: inset 0 0 0 999px rgba(var(--accent-rgb), 0); } }
.rtc-flash { animation: rtc-flash 1.5s ease-out 1; }
.rtc-amber, .rtc-amber:focus, .rtc-amber:focus-within { border-color: var(--amber) !important; }
.rtc-note { font-size: 11px; line-height: 1.35; color: var(--text-dim); margin-top: 4px; min-width: 0; overflow-wrap: anywhere; }
.rtc-note.rtc-warn { color: var(--amber); }
.rtc-note.rtc-full { flex-basis: 100%; margin-top: -4px; }
.rtc-line { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-mid); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rtc-line .rtc-sep, .rtc-foot .rtc-sep { color: var(--text-quiet); }
.rtc-line.rtc-gone { color: var(--danger-soft); }
.rtc-review { background: none; border: none; padding: 0 2px; font: 600 11.5px var(--fn); color: var(--accent); cursor: pointer; }
.rtc-review:hover { text-decoration: underline; }
.rtc-pop { position: fixed; z-index: 1200; background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 12px; box-shadow: 0 20px 50px rgba(var(--shadow-rgb), calc(.7 * var(--shadow-k))); padding: 14px 14px 12px; box-sizing: border-box; max-height: calc(100dvh - 90px); overflow: auto; }
.rtc-pop-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.rtc-pop-sub { font-size: 11.5px; color: var(--text-mid); margin-top: 2px; line-height: 1.4; }
.rtc-grid { display: grid; grid-template-columns: minmax(70px, auto) minmax(0, 1fr) minmax(0, 1fr); gap: 7px 8px; align-items: center; margin-top: 12px; }
.rtc-colh { font-size: 10.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 2px; }
.rtc-lbl { font-size: 12px; color: var(--text-soft); }
.rtc-opt { display: flex; align-items: center; gap: 8px; min-width: 0; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border-2); background: var(--surface); color: var(--text); font: 12px var(--fm); cursor: pointer; text-align: left; }
.rtc-opt.on { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .35); }
.rtc-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rtc-radio { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--border-4); flex: none; box-sizing: border-box; }
.rtc-opt.on .rtc-radio { border: 3.5px solid var(--accent); }
.rtc-foot { display: flex; align-items: center; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.rtc-link { background: none; border: none; padding: 0; font: 500 12px var(--fn); color: var(--accent); cursor: pointer; white-space: nowrap; }
.rtc-link:hover { text-decoration: underline; }
/* ── end edits that collide ── */