/* ─────────────────────────────────────────────────────────────
   8 SECONDS RIDE MANAGEMENT — stylesheet (8 Seconds design system)
   Tokens + components lifted from 8secondsevents.com css/style.css
   Brand: Orange #EF7622 · Deep Navy #002E5D · Sky #eef2f9
───────────────────────────────────────────────────────────── */
:root {
  --bg:#eef2f9; --surface:#ffffff; --surface2:#f5f7fb; --surface3:#e8edf5;
  --border:rgba(0,46,93,0.09); --border2:rgba(0,46,93,0.16);
  --text:#0a1628; --muted:#2e4a62; --muted2:#5a7590;
  --orange:#EF7622; --orange2:#d4651a; --orangeglow:rgba(239,118,34,0.14);
  --navy:#002E5D; --silver:#D1D3D4; --gold:#f5a623;
  --accent:#EF7622; --accent2:#d4651a; --accentglow:rgba(239,118,34,0.14);
  --blue:#0076A9; --bluebg:rgba(0,118,169,0.10);
  --green:#1a8a4a; --greenbg:rgba(26,138,74,0.10);
  --red:#c0303a; --redbg:rgba(192,48,58,0.10);
  --amber:#b87010; --amberbg:rgba(184,112,16,0.10);
  --r:10px; --r2:14px; --r3:20px; --r4:24px;
  --card-shadow:0 2px 4px rgba(0,0,0,0.04),0 8px 24px rgba(0,46,93,0.10),0 20px 48px rgba(0,46,93,0.07);
  --card-shadow-hover:0 4px 8px rgba(0,0,0,0.06),0 16px 40px rgba(0,46,93,0.16),0 0 0 1px rgba(239,118,34,0.14);
  --fs-3xs:9px; --fs-2xs:10px; --fs-xs:11px; --fs-sm:13px; --fs-base:15px; --fs-md:15px;
  --fs-lg:17px; --fs-xl:20px; --fs-2xl:24px;
  --fw-base:400; --fw-med:500; --fw-bold:600; --fw-xbold:700;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;min-height:100%;scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:'Inter','DM Sans',system-ui,sans-serif;color:var(--text);min-height:100vh;
  font-size:var(--fs-base);font-weight:var(--fw-base);line-height:1.65;
  background:
    radial-gradient(ellipse 60% 45% at 80% 8%, rgba(239,118,34,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 12% 90%, rgba(0,46,93,0.12) 0%, transparent 55%),
    radial-gradient(ellipse 45% 40% at 90% 85%, rgba(0,118,169,0.08) 0%, transparent 60%),
    var(--bg);
  background-attachment:fixed;
  overflow-x:hidden;
}
a{color:var(--orange);text-decoration:none} a:hover{text-decoration:underline}
::-webkit-scrollbar{width:5px;height:5px} ::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:3px}

/* ── Mockup persona switcher strip (not part of the product UI) ── */
.mock-strip{
  position:sticky;top:0;z-index:900;display:flex;align-items:center;gap:4px;
  background:#0b0f16;border-bottom:1px solid rgba(255,255,255,0.10);
  padding:7px 14px;overflow-x:auto;scrollbar-width:none;
}
.mock-strip::-webkit-scrollbar{display:none}
.mock-strip-label{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.38);white-space:nowrap;margin-right:8px;flex-shrink:0}
.mock-tab{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;flex-shrink:0;
  padding:6px 13px;border-radius:100px;border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.66);
  font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;
}
.mock-tab i{font-size:11px;opacity:.8}
.mock-tab:hover{background:rgba(255,255,255,0.10);color:#fff}
.mock-tab.active{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 2px 12px rgba(239,118,34,0.5)}

/* ── Views ── */
.view{display:none} .view.active{display:block}
.shell{display:flex;flex-direction:column;min-height:100vh}

/* ── Glass top nav (from 8 Seconds) ── */
.topnav{
  flex-shrink:0;display:flex;align-items:center;
  background:linear-gradient(90deg,#1a0d00 0%,#001433 55%,#00091f 100%);
  backdrop-filter:blur(32px) saturate(180%);-webkit-backdrop-filter:blur(32px) saturate(180%);
  border-bottom:2px solid var(--orange);
  box-shadow:0 2px 0 rgba(0,0,0,0.50),0 8px 48px rgba(0,0,0,0.60),0 14px 40px rgba(239,118,34,0.30);
  padding:0 20px;height:62px;position:relative;z-index:100;gap:0;
}
.topnav-brand{display:flex;align-items:center;gap:11px;padding-right:20px;border-right:1px solid rgba(255,255,255,0.10);flex-shrink:0;height:100%}
.brand-mark{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--orange),var(--orange2));
  display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Oswald',sans-serif;font-weight:700;font-size:17px;
  box-shadow:0 2px 14px rgba(239,118,34,0.55);letter-spacing:.02em;overflow:hidden}
.brand-mark img{width:100%;height:100%;object-fit:contain;display:block}
/* When the mark is the badge itself, the orange tile behind it fights the
   artwork — drop the gradient and the padding it needed. */
.brand-mark:has(img){background:none;box-shadow:none;padding:0}
/* The two lines were set at 1.15 with no gap, which reads as one crowded
   block at a glance rather than a name with a subtitle under it. */
.brand-word{display:flex;flex-direction:column;justify-content:center;line-height:1.25;gap:3px}
.brand-word b{font-family:'Oswald',sans-serif;font-weight:600;color:#fff;font-size:15px;letter-spacing:.05em}
.brand-word span{font-size:9px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,0.45);line-height:1.1}
.topnav-links{display:flex;align-items:center;gap:2px;flex:1;overflow:visible;padding:0 12px;height:100%}
.nav-group{position:relative;height:100%;display:flex;align-items:center;flex-shrink:0}
.topnav .nav-item{
  display:inline-flex;align-items:center;gap:7px;padding:0 14px;white-space:nowrap;
  font-size:var(--fs-sm);font-weight:500;color:rgba(255,255,255,0.78);border:none;background:none;
  font-family:inherit;cursor:pointer;transition:background .15s,color .15s,border-color .15s;
  height:100%;border-bottom:2px solid transparent;
}
.topnav .nav-item:hover{background:rgba(255,255,255,0.08);color:#fff;border-bottom-color:var(--orange)}
.topnav .nav-item.active{border-bottom-color:var(--orange);color:#fff;background:rgba(239,118,34,0.18)}
.topnav-alert{
  display:flex;align-items:center;gap:6px;background:var(--orange);color:#fff;
  font-size:var(--fs-xs);font-weight:700;padding:5px 12px 5px 10px;border-radius:20px;cursor:pointer;
  flex-shrink:0;margin-right:10px;border:none;font-family:inherit;
  box-shadow:0 2px 12px rgba(239,118,34,0.45);animation:alertPulse 2.2s ease-in-out infinite;
}
@keyframes alertPulse{0%,100%{box-shadow:0 2px 12px rgba(239,118,34,0.45)}50%{box-shadow:0 2px 22px rgba(239,118,34,0.80)}}
.topnav-user{display:flex;align-items:center;gap:10px;padding-left:16px;border-left:1px solid rgba(255,255,255,0.10);flex-shrink:0;height:100%}
.avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-xs);font-weight:700;flex-shrink:0;background:rgba(239,118,34,0.20);color:var(--orange);border:1.5px solid rgba(239,118,34,0.35)}
.topnav-user .user-name{color:#fff;font-size:var(--fs-sm);font-weight:600;white-space:nowrap}
.topnav-user .user-role-label{color:rgba(255,255,255,0.48);font-size:var(--fs-2xs)}

/* ── Topbar + panel ── */
.content{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{padding:14px 28px;border-bottom:1px solid rgba(0,46,93,0.10);display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,0.72);backdrop-filter:blur(14px);position:sticky;top:0;z-index:10;flex-shrink:0;
  box-shadow:0 1px 0 rgba(0,46,93,0.10);gap:8px}
.page-title{font-size:var(--fs-xl);font-weight:800;color:#0d1b2e;letter-spacing:-0.4px;line-height:1.2}
.page-sub{font-size:var(--fs-xs);color:#4e6278;margin-top:1px}
.topbar-actions{display:flex;gap:8px;align-items:center}
.main-panel{padding:28px 28px 40px;flex:1;max-width:1280px;width:100%;margin:0 auto}
.main-panel.narrow{max-width:520px}

/* Pages that carry their own heading instead of the sticky .topbar
   (currently Loanees). These class names were in the markup but had no
   rules at all, so the heading sat flush against the nav and the action
   buttons ran into the card below them. */
.page{padding:32px 28px 40px;flex:1;max-width:1280px;width:100%;margin:0 auto}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:18px;flex-wrap:wrap;margin-bottom:24px}
.page-head .page-title{font-size:var(--fs-2xl);margin-bottom:6px;line-height:1.25}
.page-head .small{line-height:1.5}
.page-head .pill-row{flex-shrink:0;gap:8px;padding-top:4px}

/* ── Buttons ── */
.btn{padding:8px 16px;border-radius:9px;font-size:var(--fs-sm);font-weight:500;border:1px solid var(--border2);
  background:var(--surface);cursor:pointer;color:var(--text);font-family:inherit;
  transition:transform .18s ease,box-shadow .18s ease,background .14s;display:inline-flex;align-items:center;gap:6px;
  box-shadow:0 1px 2px rgba(0,46,93,0.06)}
.btn:hover{background:var(--surface2);transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,46,93,0.10)}
.btn-primary{background:linear-gradient(135deg,var(--orange) 0%,var(--orange2) 100%);border-color:var(--orange2);color:#fff;font-weight:600;box-shadow:0 2px 10px var(--orangeglow)}
.btn-primary:hover{background:linear-gradient(135deg,#f5852e 0%,var(--orange) 100%);box-shadow:0 6px 20px rgba(239,118,34,0.35)}
.btn-sm{padding:5px 12px;font-size:var(--fs-xs)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted);box-shadow:none}
.btn-ghost:hover{background:var(--surface2);color:var(--text);transform:none;box-shadow:none}
.btn-success{background:var(--greenbg);border-color:rgba(26,138,74,0.30);color:var(--green)}
.btn-success:hover{background:rgba(26,138,74,0.18)}
.btn-danger{background:var(--redbg);border-color:rgba(192,48,58,0.30);color:var(--red)}
.btn-danger:hover{background:rgba(192,48,58,0.18)}
.btn-block{width:100%;justify-content:center;padding:13px;font-size:var(--fs-md);font-weight:700}

/* ── Cards / stats / badges (8 Seconds glass) ── */
.card{background:rgba(255,255,255,0.82);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,0.80);border-radius:var(--r3);padding:20px 22px;box-shadow:var(--card-shadow);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s}
.card:hover{transform:translateY(-3px);box-shadow:var(--card-shadow-hover);border-color:rgba(239,118,34,0.25)}
/* A card with a type-ahead dropdown open has to paint above its siblings.
   .card sets backdrop-filter, which creates a stacking context, so the
   dropdown's own z-index is trapped inside this card and the NEXT card in
   the DOM covers it — which is what hid the lower half of the person
   picker behind "2 · What are they taking?". Raising the card itself is
   the only thing that escapes that trap. js/picker.js adds the class. */
.card.pk-open{position:relative;z-index:40}
.card+.card{margin-top:12px}
.card-sm{padding:13px 16px}
.section-title{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.3px;margin-bottom:12px;display:flex;align-items:center;gap:9px}
.section-title i{color:var(--orange);font-size:var(--fs-md)}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:24px}
.stat-card{background:rgba(255,255,255,0.82);backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(255,255,255,0.80);
  border-radius:var(--r3);padding:20px 20px 18px;border-top:3px solid var(--orange);box-shadow:var(--card-shadow);
  transition:transform .22s ease,box-shadow .22s ease}
.stat-card:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover)}
.stat-num{font-size:38px;font-weight:800;letter-spacing:-2px;color:var(--text);line-height:1;margin-top:4px}
.stat-label{font-size:var(--fs-xs);font-weight:600;color:var(--muted);margin-top:6px;text-transform:uppercase;letter-spacing:.06em}
.stat-delta{font-size:var(--fs-xs);margin-top:8px}
.delta-up{color:var(--green)} .delta-pending{color:var(--amber)}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.02em}
.badge-approved,.badge-yes{background:var(--greenbg);color:var(--green);border:1px solid rgba(26,138,74,0.25)}
.badge-no{background:var(--redbg);color:var(--red);border:1px solid rgba(192,48,58,0.25)}
.badge-pending{background:var(--amberbg);color:var(--amber);border:1px solid rgba(184,112,16,0.25)}
.badge-review,.badge-active{background:var(--bluebg);color:var(--blue);border:1px solid rgba(0,118,169,0.25)}
.badge-live{background:rgba(239,118,34,0.12);color:var(--orange);border:1px solid rgba(239,118,34,0.30)}
.badge-live i{animation:blink 1.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.badge-neutral{background:var(--surface2);color:var(--muted);border:1px solid var(--border2)}
.class-chip{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-2xs);padding:2px 9px;border-radius:100px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.class-vip{background:rgba(245,166,35,0.14);color:#8a6207;border:1px solid rgba(245,166,35,0.35)}
.class-exec{background:rgba(0,46,93,0.10);color:var(--navy);border:1px solid rgba(0,46,93,0.22)}
.class-performer{background:rgba(0,118,169,0.10);color:var(--blue);border:1px solid rgba(0,118,169,0.25)}

/* ── Ride cards (event-card pattern) ── */
.event-card{background:rgba(255,255,255,0.82);backdrop-filter:blur(22px) saturate(190%);border:1px solid rgba(255,255,255,0.92);
  border-radius:var(--r3);margin-bottom:14px;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s;
  box-shadow:var(--card-shadow)}
.event-card:hover{transform:translateY(-3px);border-color:rgba(239,118,34,0.22);box-shadow:var(--card-shadow-hover)}
.ec-strip{height:4px;background:var(--navy)}
.ec-body{padding:18px 22px 16px}
.event-title{font-size:var(--fs-md);font-weight:700;color:var(--text);letter-spacing:-.3px;line-height:1.25}
.event-meta{font-size:var(--fs-sm);color:var(--muted2);margin-top:7px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.event-meta-item{display:inline-flex;align-items:center;gap:5px}
.event-meta-item i{opacity:.75;font-size:var(--fs-xs)}
.event-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(0,46,93,0.07)}
.event-actions{display:flex;gap:8px;flex-wrap:wrap}
.route-line{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:var(--fs-sm);font-weight:600}
.route-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.route-arrow{color:var(--muted2);font-size:var(--fs-xs)}

/* ── Forms ── */
.form-group{margin-bottom:14px;min-width:0}
.form-label{font-size:var(--fs-xs);font-weight:600;color:var(--muted);display:block;margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
.form-input{width:100%;padding:9px 13px;border-radius:9px;border:1px solid var(--border2);background:var(--surface2);
  color:var(--text);font-size:var(--fs-sm);font-family:inherit;transition:border-color .15s,box-shadow .15s}
.form-input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--orangeglow);background:var(--surface)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.switch{position:relative;width:40px;height:22px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:var(--surface3);border-radius:22px;cursor:pointer;transition:.2s}
.slider::before{content:'';position:absolute;height:16px;width:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,0.25)}
.switch input:checked + .slider{background:var(--orange)}
.switch input:checked + .slider::before{transform:translateX(18px)}

/* ── Bento ── */
/* min-width:0 on every grid item — without it, grid tracks default to
   min-width:auto and size themselves to fit their widest child's
   min-content (e.g. the Users table's Actions column), which pushes the
   whole column — and on narrow/PWA viewports, the whole page — wider
   than the screen instead of letting a card's own overflow-x:auto
   contain the scroll. */
.bento-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-bottom:24px}
.bento-grid>*{min-width:0}
.bento-4{grid-column:span 4}.bento-5{grid-column:span 5}.bento-6{grid-column:span 6}
.bento-7{grid-column:span 7}.bento-8{grid-column:span 8}.bento-12{grid-column:span 12}
@media(max-width:900px){.bento-grid{grid-template-columns:1fr}[class*="bento-"]{grid-column:span 1}}

/* ── Admin dashboard: sticky vertical section nav + stacked sections ── */
.admin-layout{display:flex;gap:20px;align-items:flex-start}
.admin-sidenav{position:sticky;top:78px;display:flex;flex-direction:column;gap:2px;width:180px;flex-shrink:0;
  background:rgba(255,255,255,0.82);backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(255,255,255,0.80);
  border-radius:var(--r3);padding:10px;box-shadow:var(--card-shadow)}
.admin-sidenav-item{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:10px;font-size:var(--fs-sm);
  font-weight:600;color:var(--muted);text-decoration:none;transition:background .15s,color .15s}
.admin-sidenav-item i{width:16px;text-align:center;color:var(--orange);font-size:var(--fs-sm)}
.admin-sidenav-item:hover{background:var(--surface2);color:var(--text);text-decoration:none}
.admin-sidenav-item.active{background:rgba(239,118,34,0.12);color:var(--orange)}
.admin-sections{flex:1;min-width:0;display:flex;flex-direction:column;gap:20px}
.admin-section{scroll-margin-top:78px}
.admin-map{height:300px;position:relative;border-radius:var(--r2);overflow:hidden;transition:height .25s ease}
.admin-map.expanded{height:50vh}
/* Fullscreen API — fills the viewport in place (no popup/new window).
   Browsers already size the top-layer fullscreen element to 100%/100%,
   but we pin it explicitly and drop the rounded corners so it reads as
   "the whole screen", not just a big card. */
.admin-map:fullscreen{width:100vw;height:100vh;border-radius:0}
.admin-map:-webkit-full-screen{width:100vw;height:100vh;border-radius:0}
.admin-map-size-controls{position:absolute;top:12px;right:12px;z-index:5;display:flex;gap:8px}
.admin-map-demo-btn{background:rgba(4,11,22,0.78)}
#admin-map-demo-btn.on{background:rgba(192,48,58,0.55);border-color:var(--red);box-shadow:0 0 0 1px rgba(192,48,58,0.35)}
/* Fixed banner over the whole map while demo mode is on, so synthetic
   vehicle motion can never be mistaken for real dispatch traffic. */
.admin-map-demo-banner{position:absolute;left:0;right:0;bottom:0;z-index:6;display:none;align-items:center;justify-content:center;gap:8px;
  padding:7px 10px;background:repeating-linear-gradient(45deg,#7a1f0a,#7a1f0a 12px,#5c1607 12px,#5c1607 24px);
  color:#fff;font-family:'DM Mono',monospace;font-weight:700;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;
  animation:demoBannerPulse 1.6s ease-in-out infinite}
@keyframes demoBannerPulse{0%,100%{opacity:1}50%{opacity:.74}}
@media(max-width:900px){
  .admin-layout{flex-direction:column}
  .admin-sidenav{position:static;width:100%;flex-direction:row;overflow-x:auto;top:auto}
}

/* ── Tables ── */
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.tbl th{text-align:left;font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted2);
  padding:8px 10px;border-bottom:1px solid var(--border2);white-space:nowrap}
.tbl td{padding:10px;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tr:hover td{background:rgba(239,118,34,0.03)}

/* ── Live map (shared SVG) ── */
.map-wrap{position:relative;border-radius:var(--r2);overflow:hidden;background:#071120;border:1px solid rgba(255,255,255,0.06)}
.map-wrap svg{display:block;width:100%;height:auto}
.map-road{stroke:#16283f;stroke-linecap:round;fill:none}
.map-road-major{stroke:#1d3350}
.map-bldg{fill:#0e1e33;stroke:#23405f;stroke-width:1.5}
.map-lot{fill:#0a1830;stroke:#182c47;stroke-width:1}
.map-label{fill:#3d5a7c;font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.map-label-sm{fill:#2e4763;font-size:8.5px;letter-spacing:.14em}
.veh{transition:opacity .3s}
.veh-dot{fill:var(--orange);stroke:#fff;stroke-width:2}
.veh-idle .veh-dot{fill:#8a93a3}
.veh-stale .veh-dot{fill:#5a7590;animation:blink 1.2s ease-in-out infinite}
.veh-ring{fill:none;stroke:rgba(239,118,34,0.5);stroke-width:2;animation:ring 2s ease-out infinite}
@keyframes ring{0%{r:8;opacity:.9}100%{r:22;opacity:0}}
.veh-tag{fill:#fff;font-family:'DM Mono',monospace;font-size:9.5px;font-weight:500}
.veh-tag-bg{fill:rgba(4,10,20,0.85);stroke:rgba(255,255,255,0.14);stroke-width:.5;rx:4}
.route-path{stroke:var(--orange);stroke-width:2.5;stroke-dasharray:7 6;fill:none;opacity:.75;animation:dashmove 1.2s linear infinite}
@keyframes dashmove{to{stroke-dashoffset:-13}}
.pin-pickup{fill:#1a8a4a} .pin-drop{fill:#c0303a}

/* ── ETA hero (VIP live ride) ── */
.eta-hero{display:flex;align-items:baseline;gap:8px}
.eta-num{font-size:52px;font-weight:800;letter-spacing:-3px;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.eta-unit{font-size:var(--fs-md);font-weight:600;color:var(--muted)}
.driver-chip{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r2);background:var(--surface2);border:1px solid var(--border)}
.driver-chip .avatar{width:42px;height:42px;font-size:var(--fs-md)}
.avatar-photo{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid rgba(239,118,34,0.55);box-shadow:0 2px 10px rgba(239,118,34,0.25);flex-shrink:0}

/* ── Timeline (ride events) ── */
.tline{list-style:none;position:relative;padding-left:22px}
.tline::before{content:'';position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--surface3);border-radius:2px}
.tline li{position:relative;padding:0 0 14px 8px;font-size:var(--fs-sm);color:var(--muted)}
.tline li::before{content:'';position:absolute;left:-20px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--surface3);border:2px solid #fff;box-shadow:0 0 0 1.5px var(--border2)}
.tline li.done::before{background:var(--green)}
.tline li.now::before{background:var(--orange);box-shadow:0 0 0 4px var(--orangeglow)}
.tline li.now{color:var(--text);font-weight:600}
.tline .t-time{font-family:'DM Mono',monospace;font-size:var(--fs-2xs);color:var(--muted2);margin-left:6px}

/* ── Toasts ── */
.toast-stack{position:fixed;right:18px;bottom:18px;z-index:999;display:flex;flex-direction:column;gap:10px;max-width:360px}
.toast{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;border-radius:14px;
  background:rgba(8,14,36,0.94);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.14);
  border-left:3px solid var(--orange);color:#fff;box-shadow:0 12px 40px rgba(0,0,0,0.45);
  animation:toastIn .35s cubic-bezier(.21,1.02,.73,1) both}
.toast i{color:var(--orange);margin-top:2px}
.toast .t-title{font-size:var(--fs-sm);font-weight:700}
.toast .t-body{font-size:var(--fs-xs);color:rgba(255,255,255,0.72);margin-top:2px;line-height:1.5}
.toast .t-chan{font-family:'DM Mono',monospace;font-size:9px;color:rgba(255,255,255,0.40);margin-top:5px;letter-spacing:.1em;text-transform:uppercase}
@keyframes toastIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
.toast.out{animation:toastOut .3s ease both}
@keyframes toastOut{to{opacity:0;transform:translateX(30px)}}

/* ── Driver (phone ergonomics) ── */
.drive-action{width:100%;padding:22px;border-radius:var(--r3);border:none;font-family:inherit;cursor:pointer;
  font-size:19px;font-weight:800;letter-spacing:.02em;color:#fff;display:flex;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(135deg,var(--orange) 0%,var(--orange2) 100%);
  box-shadow:0 6px 24px rgba(239,118,34,0.45),inset 0 1px 0 rgba(255,255,255,0.25);transition:transform .15s,box-shadow .15s}
.drive-action:active{transform:scale(.98)}
.drive-action.green{background:linear-gradient(135deg,#22a75d,#157a41);box-shadow:0 6px 24px rgba(26,138,74,0.40)}
.drive-action.navy{background:linear-gradient(135deg,#00458c,#002E5D);box-shadow:0 6px 24px rgba(0,46,93,0.45)}
.offline-banner{display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:10px;background:var(--amberbg);
  border:1px solid rgba(184,112,16,0.30);color:var(--amber);font-size:var(--fs-xs);font-weight:600;margin-bottom:14px}
.shift-chip{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--r2);
  background:rgba(0,46,93,0.06);border:1px solid rgba(0,46,93,0.14);margin-bottom:16px}
.shift-chip i{color:var(--navy);font-size:18px}

/* ── Login / auth ── */
.auth-wrap{position:relative;min-height:100vh;overflow:hidden;background:#040507;
  display:flex;align-items:center;justify-content:center;padding:32px 24px}
.auth-wrap::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 70% 55% at 50% 0%,rgba(0,46,93,0.38) 0%,transparent 60%),
  radial-gradient(ellipse 60% 45% at 50% 100%,rgba(239,118,34,0.10) 0%,transparent 60%)}
.auth-shell{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%;max-width:440px}

/* Pulsing rings + emblem — kept as its own element, above/apart from the
   card below, so the card's gradient headline animation never visually
   touches or blends with the ring pulse. */
.auth-orb{position:relative;width:285px;height:285px;margin-bottom:30px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.auth-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(245,166,35,0.42);animation:authRingPulse 3.6s ease-out infinite}
.auth-ring-2{border-color:rgba(239,118,34,0.30);animation-delay:1.2s}
.auth-ring-3{border-color:rgba(0,46,93,0.60);animation-delay:2.4s}
@keyframes authRingPulse{0%{transform:scale(0.68);opacity:0.85}75%{opacity:0}100%{transform:scale(1.28);opacity:0}}
.auth-orb-core{position:relative;z-index:1;width:192px;height:192px;border-radius:50%;
  background:radial-gradient(circle at 35% 28%,#191d25 0%,#0a0c11 72%);
  box-shadow:0 0 0 1px rgba(245,166,35,0.22),0 0 60px rgba(239,118,34,0.24),inset 0 2px 12px rgba(0,0,0,0.55);
  display:flex;align-items:center;justify-content:center;overflow:hidden;animation:authOrbBreathe 3.6s ease-in-out infinite}
@keyframes authOrbBreathe{0%,100%{box-shadow:0 0 0 1px rgba(245,166,35,0.22),0 0 60px rgba(239,118,34,0.24),inset 0 2px 12px rgba(0,0,0,0.55)}
  50%{box-shadow:0 0 0 1px rgba(245,166,35,0.36),0 0 80px rgba(239,118,34,0.36),inset 0 2px 12px rgba(0,0,0,0.55)}}
.auth-orb-logo{width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 2px 10px rgba(0,0,0,0.5))}

/* ── Login badge ──────────────────────────────────────────────
   The crest replaces the old circular orb. Two stacked drop-shadows,
   both offset down and to the right: a tight dark one to seat the badge
   against the page, and a wider soft one for depth. drop-shadow rather
   than box-shadow because the artwork has transparency — box-shadow would
   trace the bounding rectangle instead of the badge's outline. */
.auth-logo{display:flex;align-items:center;justify-content:center;margin-bottom:26px;flex-shrink:0}
.auth-logo-img{
  width:min(280px, 62vw); height:auto; display:block;
  filter:
    drop-shadow(6px 8px 10px rgba(0,0,0,0.55))
    drop-shadow(14px 18px 30px rgba(0,0,0,0.38));
  animation:authLogoIn .6s cubic-bezier(.21,1.02,.73,1) both;
}
@keyframes authLogoIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}

.auth-card{position:relative;z-index:1;width:100%;background:#0c0e13;border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--r4);padding:40px 36px;box-shadow:0 24px 64px rgba(0,0,0,0.55),inset 0 1px 0 rgba(255,255,255,0.05);
  animation:fadeSlideUp .55s ease both}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Everything in the card reads down the centre line, under the badge.
   The one exception is what someone TYPES: a centred email address jumps
   around as you type it, so the inputs keep their text left-aligned. */
.auth-card{text-align:center}
.auth-input{text-align:left}

.auth-eyebrow{font-size:var(--fs-xs);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,0.42);margin-bottom:14px}
.auth-heading{font-size:32px;font-weight:800;color:#fff;line-height:1.18;letter-spacing:-.5px;margin-bottom:10px;font-family:'Oswald',sans-serif;text-align:center}
/* The "pulsing gradient" lives only on this inline span, inside the card
   — physically separate from the ring/orb animation above it. */
.auth-heading-accent{background:linear-gradient(90deg,#f5a623,#EF7622,#f5a623);background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:authHeadingPulse 4.2s ease-in-out infinite alternate}
@keyframes authHeadingPulse{0%{background-position:0% center}100%{background-position:100% center}}
.auth-sub{font-size:var(--fs-sm);color:rgba(255,255,255,0.55);margin-bottom:28px}

.auth-field-label{display:block;font-size:var(--fs-xs);font-weight:600;letter-spacing:.05em;color:rgba(255,255,255,0.55);margin-bottom:8px}
.auth-input{width:100%;padding:13px 15px;border-radius:10px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.045);
  color:#fff;font-size:16px;font-family:inherit;margin-bottom:18px}
.auth-input:focus{outline:none;border-color:rgba(245,166,35,0.55);background:rgba(255,255,255,0.07);box-shadow:0 0 0 3px rgba(245,166,35,0.14)}
.auth-input::placeholder{color:rgba(255,255,255,0.30)}

/* Password show/hide — wrapper carries the field's usual margin-bottom
   so the input itself can drop its own (auth-input-pw), keeping the
   eye button's absolute positioning centered on just the input box. */
.auth-pw-wrap{position:relative;margin-bottom:18px}
.auth-input-pw{margin-bottom:0;padding-right:44px}
.auth-pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;
  background:none;border:none;color:rgba(255,255,255,0.45);cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:8px;transition:color .15s,background .15s}
.auth-pw-toggle:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.08)}

/* The button carries the same travelling yellow→orange gradient as the
   "Sign in." heading above it. Same stops, same 4.2s cycle, so the two
   move together instead of looking like two separate animations that
   happen to share a colour. The heading paints the gradient into the
   TEXT; the button paints it into the fill, so the label is dark. */
.auth-btn{width:100%;padding:15px;border-radius:10px;border:none;color:#20140a;
  background:linear-gradient(90deg,#f5a623,#EF7622,#f5a623);background-size:220% auto;
  animation:authHeadingPulse 4.2s ease-in-out infinite alternate;
  font-size:var(--fs-sm);font-weight:800;font-family:inherit;letter-spacing:.02em;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:9px;
  box-shadow:0 4px 18px rgba(239,118,34,0.30);
  transition:transform .18s,box-shadow .18s,filter .18s}
.auth-btn:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 10px 28px rgba(239,118,34,0.45)}
.auth-btn:disabled{opacity:0.6;cursor:default;transform:none}
.auth-btn i{font-size:13px}

.auth-error{margin-bottom:18px;padding:11px 14px;border-radius:10px;background:rgba(192,48,58,0.16);
  border:1px solid rgba(192,48,58,0.40);color:#ff9ea3;font-size:var(--fs-sm)}
.auth-link{color:rgba(255,255,255,0.55);font-size:var(--fs-xs);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.auth-link:hover{color:#f5a623}

.auth-kiosk-link{text-align:center;margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.08)}
.auth-kiosk-link a{color:rgba(255,255,255,0.45);font-size:13px;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.auth-kiosk-link a:hover{color:rgba(255,255,255,0.75)}

.auth-copyright{margin-top:22px;text-align:center;font-size:var(--fs-xs);color:rgba(255,255,255,0.32);letter-spacing:.02em}

@media(max-width:480px){
  .auth-orb{width:225px;height:225px;margin-bottom:24px}
  .auth-logo-img{width:min(220px, 58vw)}
  .auth-logo{margin-bottom:20px}
  .auth-orb-core{width:150px;height:150px}
  .auth-card{padding:30px 24px}
  .auth-heading{font-size:26px}
}
@media(prefers-reduced-motion:reduce){
  .auth-ring,.auth-orb-core,.auth-heading-accent,.auth-btn,.auth-logo-img{animation:none}
}

/* ── Command room ── */
.cmd-wrap{background:#040b16;min-height:100vh;display:flex;flex-direction:column;color:#e6edf6}
.cmd-top{display:flex;align-items:center;gap:18px;padding:14px 24px;border-bottom:2px solid var(--orange);
  background:linear-gradient(90deg,#1a0d00 0%,#001433 55%,#00091f 100%)}
.cmd-title{font-family:'Oswald',sans-serif;font-weight:600;font-size:20px;letter-spacing:.10em;text-transform:uppercase;color:#fff}
.cmd-title span{color:var(--orange)}
.cmd-clock{margin-left:auto;font-family:'DM Mono',monospace;font-size:22px;font-weight:500;color:#fff;letter-spacing:.05em}
.cmd-date{font-size:var(--fs-xs);color:rgba(255,255,255,0.5);text-align:right}
.cmd-stats{display:flex;gap:12px;padding:14px 24px 0}
.cmd-stat{flex:1;background:rgba(255,255,255,0.045);border:1px solid rgba(255,255,255,0.09);border-radius:14px;padding:12px 16px}
.cmd-stat .n{font-size:30px;font-weight:800;letter-spacing:-1px;line-height:1.1;font-variant-numeric:tabular-nums}
.cmd-stat .l{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:rgba(255,255,255,0.45);margin-top:2px}
.cmd-stat.hot{border-color:rgba(239,118,34,0.45);background:rgba(239,118,34,0.08)}
.cmd-stat.hot .n{color:var(--orange)}
.cmd-main{display:flex;gap:16px;padding:16px 24px 24px;flex:1;min-height:0}
.cmd-map{flex:1.9;min-width:0;position:relative}
.cmd-map-controls{position:absolute;top:12px;left:12px;z-index:5;display:flex;gap:8px}
.cmd-map-btn{background:rgba(4,11,22,0.78);border:1px solid rgba(255,255,255,0.22);color:#fff;backdrop-filter:blur(6px)}
.cmd-map-btn:hover{background:rgba(4,11,22,0.92);border-color:rgba(255,255,255,0.38)}
.cmd-map-btn.on{background:rgba(239,118,34,0.35);border-color:var(--orange);box-shadow:0 0 0 1px rgba(239,118,34,0.25)}
.cmd-map-secs-input{width:52px;text-align:center;background:rgba(4,11,22,0.78);border:1px solid rgba(255,255,255,0.22);
  color:#fff;border-radius:9px;font-family:'DM Mono',monospace;font-size:var(--fs-sm);backdrop-filter:blur(6px);padding:5px 4px}
.cmd-map-secs-input:focus{outline:none;border-color:var(--orange)}
.cmd-rail{flex:1;min-width:300px;max-width:420px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.cmd-ride{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.09);border-left:3px solid var(--orange);
  border-radius:12px;padding:12px 14px}
.cmd-ride.idle{border-left-color:#3d5a7c}
.cmd-ride.stale{border-left-color:#5a7590}
.cmd-ride .r-top{display:flex;align-items:center;gap:8px;justify-content:space-between}
.cmd-ride .r-name{font-weight:700;font-size:var(--fs-sm);color:#fff}
.cmd-ride .r-route{font-size:var(--fs-xs);color:rgba(255,255,255,0.60);margin-top:4px;display:flex;align-items:center;gap:6px}
.cmd-ride .r-eta{font-family:'DM Mono',monospace;font-size:var(--fs-sm);color:var(--orange);font-weight:600;font-variant-numeric:tabular-nums}
.cmd-ride .r-meta{display:flex;gap:10px;margin-top:6px;font-size:var(--fs-2xs);color:rgba(255,255,255,0.40);font-family:'DM Mono',monospace}
.rail-hdr{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,0.40);margin:6px 2px 0}
.cmd-ride .class-chip{background:rgba(255,255,255,0.08);color:#9fb8d4;border:1px solid rgba(255,255,255,0.18)}
@media(max-width:980px){.cmd-main{flex-direction:column}.cmd-rail{max-width:none}}

/* ── Command Center real map (Mapbox GL) marker ── */
/* pointer-events:auto (not the old none) so hovering a vehicle can
   show its title tooltip — see js/livemap.js vehTooltip(). */
.mb-veh-marker{display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:auto;cursor:default}
.mb-veh-dot{width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 5px rgba(255,255,255,0.10)}
.mb-veh-dot.stale{animation:blink 1.2s ease-in-out infinite}
.mb-veh-label{font-family:'DM Mono',monospace;font-size:10px;font-weight:600;color:#fff;background:rgba(4,10,20,0.85);
  border:1px solid rgba(255,255,255,0.16);border-radius:5px;padding:2px 6px;white-space:nowrap}
.mb-veh-tag{font-family:'DM Mono',monospace;font-size:8px;font-weight:700;letter-spacing:.05em;color:#fff;
  border-radius:5px;padding:1px 6px;white-space:nowrap}
.mb-veh-rider{font-family:'DM Mono',monospace;font-size:9px;font-weight:600;color:#fff;background:rgba(4,10,20,0.85);
  border:1px solid rgba(255,255,255,0.16);border-radius:5px;padding:2px 6px;white-space:nowrap}

/* ── Command Center kiosk PIN sign-in (pages/kiosk.html) ── */
.kiosk-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#040b16;
  background-image:radial-gradient(ellipse 60% 40% at 50% 0%, rgba(239,118,34,0.14) 0%, transparent 60%);padding:20px}
.kiosk-card{width:100%;max-width:340px;text-align:center}
.kiosk-title{font-family:'Oswald',sans-serif;font-weight:600;font-size:26px;letter-spacing:.10em;text-transform:uppercase;color:#fff}
.kiosk-title span{color:var(--orange)}
.kiosk-sub{color:rgba(255,255,255,0.55);font-size:var(--fs-sm);margin:6px 0 22px}
.kiosk-dots{display:flex;justify-content:center;gap:10px;margin-bottom:14px;min-height:16px}
.kiosk-dot{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,0.30);transition:border-color .15s}
.kiosk-dot.filled{background:var(--orange);border-color:var(--orange);box-shadow:0 0 10px rgba(239,118,34,0.75)}
/* Pops + glows only on the digit you just typed (see kioskRenderDots) —
   reads as each dot lighting up in sequence rather than a flat fill. */
.kiosk-dot.just-typed{animation:kioskDotPop .3s ease}
@keyframes kioskDotPop{
  0%{transform:scale(0.35);box-shadow:0 0 0 rgba(239,118,34,0)}
  55%{transform:scale(1.45);box-shadow:0 0 18px rgba(239,118,34,1)}
  100%{transform:scale(1);box-shadow:0 0 10px rgba(239,118,34,0.75)}
}
.kiosk-error{color:var(--red, #ff8a8a);font-size:var(--fs-sm);font-weight:600;margin-bottom:12px}
.kiosk-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.kiosk-key{aspect-ratio:1;border-radius:16px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);
  color:#fff;font-size:24px;font-weight:600;cursor:pointer;font-family:'DM Mono',monospace;transition:background .12s,border-color .12s,box-shadow .12s}
.kiosk-key:active{background:rgba(239,118,34,0.25);border-color:var(--orange)}
/* JS-driven flash (kioskFlashKey) — fires for keyboard entry too, where
   :active never triggers since there's no real press on the button. */
.kiosk-key.key-flash{background:rgba(239,118,34,0.35);border-color:var(--orange);box-shadow:0 0 16px rgba(239,118,34,0.55)}
.kiosk-actions{display:flex;gap:10px}
.kiosk-actions .btn{flex:1;justify-content:center;padding:14px}
.kiosk-footer{margin-top:22px;font-size:var(--fs-xs)}
.kiosk-footer a{color:rgba(255,255,255,0.45)}

/* ── Handler acting-for bar ── */
.acting-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-radius:var(--r2);
  background:rgba(0,46,93,0.06);border:1px dashed rgba(0,46,93,0.25);margin-bottom:18px}
.acting-label{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--navy)}
.principal{display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 7px;border-radius:100px;cursor:pointer;
  background:var(--surface);border:1px solid var(--border2);font-size:var(--fs-sm);font-weight:600;transition:all .15s}
.principal .avatar{width:24px;height:24px;font-size:9px}
.principal:hover{border-color:var(--orange)}
.principal.sel{background:rgba(239,118,34,0.10);border-color:var(--orange);box-shadow:0 2px 10px var(--orangeglow)}
.notify-hint{font-size:var(--fs-2xs);color:var(--muted2);display:inline-flex;align-items:center;gap:5px;font-style:italic}
.notify-hint i{color:var(--orange);font-size:9px}

/* ── Misc ── */
.pill-row{display:flex;gap:6px;flex-wrap:wrap}
.mono{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums}
.muted{color:var(--muted2)} .small{font-size:var(--fs-xs)}
.site-footer{flex-shrink:0;background:var(--navy);color:rgba(255,255,255,0.50);font-size:var(--fs-xs);text-align:center;
  padding:12px 24px;letter-spacing:.02em;border-top:2px solid var(--orange)}
@media(max-width:768px){
  .topnav{padding:0 12px}.topnav-links{display:none}.topnav-user .user-meta{display:none}
  .main-panel{padding:16px 14px 32px}.topbar{padding:12px 16px}
  .stat-grid{grid-template-columns:repeat(2,1fr)}.form-row{grid-template-columns:1fr}
  .cmd-stats{flex-wrap:wrap}.cmd-stat{min-width:40%}
}


/* ── Roster column mapping ───────────────────────────────────────────────
   Two panels: the spreadsheet's columns on the left, the app's fields on
   the right. Drag to connect. Tap-to-select then tap-to-place is a real
   fallback, not a nicety — HTML5 drag-and-drop does not fire on touch,
   and this gets used on a phone at the grounds. */
.map-wrap { display:flex; gap:12px; flex-wrap:wrap; }
.map-col { flex:1 1 220px; min-width:0; }
.map-col-head {
  font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted2); margin-bottom:8px;
}
.map-list { max-height:340px; overflow:auto; padding-right:2px; }

.map-chip {
  border:1px solid var(--line); border-radius:8px; padding:8px 10px;
  margin-bottom:6px; background:rgba(255,255,255,0.82); cursor:grab;
  transition:border-color .12s, transform .12s, background .12s;
}
.map-chip:active { cursor:grabbing; }
.map-chip:hover { border-color:var(--accent); }
.map-chip.is-picked {
  border-color:var(--accent); background:var(--orangeglow);
  transform:translateX(2px);
}
.map-chip-name { font-weight:600; font-size:13px; word-break:break-word; color:var(--text); }
.map-chip-sample {
  font-size:11px; color:var(--muted2); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.map-slot {
  border:1px dashed var(--line); border-radius:8px; padding:8px 10px;
  background:rgba(255,255,255,0.55);
  margin-bottom:6px; min-height:46px; transition:border-color .12s, background .12s;
}
.map-slot.is-over { border-color:var(--accent); background:var(--orangeglow); }
.map-slot.is-filled { border-style:solid; }
.map-slot.is-required:not(.is-filled) { border-color:var(--red); }
.map-slot-label { font-size:12px; color:var(--muted); }
.map-slot-req { color:var(--red); }
.map-slot-value {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:3px; font-weight:600; font-size:13px; color:var(--text);
}
.map-slot-clear {
  border:0; background:transparent; color:var(--muted2);
  cursor:pointer; padding:2px 4px; line-height:1;
}
.map-slot-clear:hover { color:var(--red); }
.map-empty { font-size:12px; color:var(--muted2); padding:10px 2px; }


/* ── Sortable table headers + row selection ───────────────────────────────── */
.th-sortable { white-space:nowrap; vertical-align:top; }
.th-sortable .th-label { margin-bottom:4px; }
.th-sortable.is-sorted .th-label { color:var(--orange); }
/* Deliberately small and quiet: nine of these across a header row should
   read as controls you can reach for, not as the loudest thing on screen. */
.th-select {
  font: inherit; font-size:11px; font-weight:400;
  padding:2px 4px; border:1px solid var(--line); border-radius:5px;
  background:rgba(255,255,255,0.75); color:var(--muted);
  max-width:100%; cursor:pointer;
}
.th-select:hover { border-color:var(--orange); color:var(--text); }
.th-sortable.is-sorted .th-select { border-color:var(--orange); color:var(--text); }
tr.is-selected { background:var(--orangeglow); }