/* ANSCRIPT: the product's one design language (design pass 2, 2026-10-13). Loaded first by every page, signed in or not
   (except the two customer pages, status.html and approve.html, which carry the same tokens inline so a customer's link never
   waits on a second file). A page's own stylesheet comes after it and keeps only what is its own.

   The language is the timing board (.agents/handoffs/2026-10-12-service-center-tracking-hub.md, "Visual design"):
     Asphalt        ink, the app bar and the primary action
     Concrete       the page ground: a warm floor grey
     Paint          rows and panels
     Signal orange  what is live or current, nothing else: the running clock, the current phase, the tab you're on,
                    the focus ring
     Safety yellow  waiting / needs attention      Bay green  done, ready      Flag red  late, comeback, danger
   Barlow for text and tables, Barlow Semi Condensed for headings, tool names and figures; every number tabular.
   Colour encodes state only; every state also has a word or a shape.

   The older token names (--road, --bg, --arrived, --danger, --err-bg, --info-bg, --accent ...) are kept as aliases, because
   anscript.js's store switcher, header.js, settings.js, appearance.css and Shop Manager read them. Dark mode follows
   js/appearance.js, which always sets data-theme on <html>; high contrast (appearance.css) overrides --muted/--line on top. */

:root{
  /* the named palette (trust palette, redesign 2026-10-24: Harbor navy, Assurance blue; the names are the old ones, only values change) */
  --asphalt:#0B2D55;      /* Harbor deep: the sign-in field, the app bar */
  --concrete:#F2F5F9;
  --paint:#ffffff;
  --signal:#1B7FD4;       /* Assurance blue: live, current, the focus ring */
  --safety:#FFB020;
  --bay:#2E8540;
  --flag:#C93A2E;

  /* roles built on it */
  --ground:var(--concrete);
  --panel:var(--paint);
  --raised:#F8FAFC;        /* a field, a hovered row */
  --ink:#0F1E33;
  --muted:#4A5B72;
  --line:#CBD5E1;          /* hairlines */
  --line-soft:#E2E8F0;
  --signal-ink:#0F62AD;    /* blue dark enough to read as text on paint and on the ground (AA) */
  --safety-ink:#7A5200;
  --safety-wash:#FFF1D1;
  --bay-wash:#E3F2E6;
  --bay-ink:#226B33;       /* green dark enough to read as text on paint and on its wash (AA) */
  --flag-wash:#FBE5E2;
  --flag-ink:#B12F24;      /* red dark enough to read as text on its wash (AA) */
  --head-bg:var(--asphalt);
  --head-ink:#ffffff;
  --head-muted:#C5D8F2;
  --head-line:rgba(255,255,255,.24);
  --primary-bg:#12427A;    /* Harbor navy: the one main action on a screen */
  --primary-ink:#ffffff;
  --focus:var(--signal);
  --shadow:rgba(11,35,70,.22);
  --backdrop:rgba(6,16,32,.55);

  /* aliases the older scripts and pages read */
  --bg:var(--ground);
  --road:var(--signal);
  --road-ink:#ffffff;
  --accent:#12427A;        /* links */
  --danger:var(--flag-ink);
  --err-bg:var(--flag-wash);
  --info-bg:#E6F0FC;
  --arrived:var(--bay-ink);
  --arrived-bg:var(--bay-wash);
  --warn:var(--safety-ink);
  --warn-bg:var(--safety-wash);
  --font-mono:ui-monospace,'SF Mono',Consolas,monospace;

  --radius:6px;
  --radius-lg:12px;
  --font:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-cond:'Barlow Semi Condensed','Barlow',system-ui,sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --ground:#0A1424;
  --panel:#111E33;
  --raised:#16253D;
  --ink:#E8EEF7;
  --muted:#9FB0C8;
  --line:#25395A;
  --line-soft:#1B2C48;
  --signal:#4DB2FF;
  --signal-ink:#7CC4FF;
  --safety:#FFB830;
  --safety-ink:#FFC95C;
  --safety-wash:#3A2A06;
  --bay:#5BC27A;
  --bay-wash:#10301C;
  --bay-ink:#6FD08C;
  --flag:#FF7468;
  --flag-wash:#3D1714;
  --flag-ink:#FF8A80;
  --head-bg:#08111F;
  --head-muted:#A5B5CC;
  --primary-bg:#8CBBFF;
  --primary-ink:#0A1626;
  --road-ink:#0A1626;
  --accent:#A9CBFF;
  --info-bg:#14284A;
  --shadow:rgba(0,0,0,.55);
  --backdrop:rgba(0,0,0,.66);
  color-scheme:dark;
}

/* ---------- the ground ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:15px/1.45 var(--font);background:var(--ground);color:var(--ink);font-variant-numeric:tabular-nums}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.hidden{display:none!important}
.muted{color:var(--muted)}
.small{font-size:13px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* the cover while the login is checked */
.auth{position:fixed;inset:0;z-index:50;background:var(--asphalt);display:flex;flex-direction:column;align-items:center;justify-content:safe center;padding:16px;overflow:auto}
.auth-status{margin:0;color:#b8c4d6;font-size:15px}

/* =====================================================================================================
   The app bar: the same band on every signed-in page (js/header.js draws its pieces).
     [logo, home] | [the tool you're in, a menu of your tools]  a tool's own tabs ...   [store] [Settings] [Sign out]
   ===================================================================================================== */
.app-bar{display:flex;align-items:stretch;gap:16px;padding:0 24px;background:var(--head-bg);color:var(--head-ink);min-height:60px;flex-wrap:wrap;position:relative;z-index:20}
.app-bar > *{align-self:center}
.app-bar .ab-spacer,.app-bar .spacer,.app-bar .tk-spacer{flex:1}
.ab-brand{display:flex;align-items:center;gap:0;margin:0;font-weight:400;min-width:0}
/* the logo is the way home, from every page */
.ab-home{display:inline-flex;align-items:center;min-height:44px;padding:0 14px 0 0;border-right:1px solid var(--head-line);color:var(--head-ink);text-decoration:none;border-radius:var(--radius)}
.ab-home:focus-visible{outline-offset:0}
.ab-brand.solo .ab-home{border-right:0}
.ab-logo{--h:28px;display:block;height:var(--h);width:calc(var(--h)*1706/384);overflow:hidden;flex:none}
.ab-logo img{display:block;height:calc(var(--h)*686/384);width:auto;margin:calc(var(--h)*-153/384) 0 0 calc(var(--h)*-152/384);filter:invert(1) hue-rotate(180deg)}
.ab-mark{display:none;font:700 17px/1 var(--font-cond);letter-spacing:.02em}
/* the tool's name, which opens the switcher */
.ab-tool{position:relative;display:flex;align-items:center}
.ab-tool-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0 0 0 4px;padding:0 10px;background:transparent;border:0;border-radius:var(--radius);color:var(--head-ink);font:600 18px/1 var(--font-cond);letter-spacing:.01em;cursor:pointer;white-space:nowrap}
.ab-tool-btn:hover,.ab-tool-btn[aria-expanded="true"]{background:rgba(255,255,255,.08)}
.ab-tool-btn .chev{width:10px;height:10px;flex:none;opacity:.8}
.ab-tool-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
span.ab-tool-btn{cursor:default}
span.ab-tool-btn:hover{background:transparent}
.ab-menu{position:absolute;left:0;top:calc(100% + 6px);z-index:60;min-width:300px;max-width:calc(100vw - 24px);margin:0;padding:6px;list-style:none;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 18px 40px var(--shadow)}
.ab-menu[hidden]{display:none}
.ab-menu a{display:flex;flex-direction:column;gap:1px;padding:10px 12px 10px 14px;border-radius:var(--radius);color:var(--ink);text-decoration:none;border-left:3px solid transparent}
.ab-menu a:hover,.ab-menu a:focus-visible{background:var(--raised)}
.ab-menu a[aria-current="page"]{border-left-color:var(--signal);background:var(--raised)}
.ab-menu a b{font:600 16px/1.2 var(--font-cond)}
.ab-menu a span{font-size:13px;color:var(--muted)}
.ab-menu .sep{height:1px;margin:6px 4px;background:var(--line-soft)}
/* Settings and Sign out (js/header.js) */
.ah-bar{display:inline-flex;align-items:center;gap:8px;--ah-h:34px}
.ah-btn{display:inline-flex;align-items:center;gap:6px;margin:0;min-height:var(--ah-h);padding:0 11px;font:600 13px var(--font);color:var(--head-ink);background:transparent;border:1px solid rgba(255,255,255,.28);border-radius:var(--radius);cursor:pointer;white-space:nowrap}
.ah-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
.ah-btn svg{flex:none}
.app-bar .store-switch .chip{font-size:14px;border-radius:var(--radius);min-height:34px}
/* the tool's own tabs on the band (Service Center Tracking: Board, Rotation, Parts, SRC, Dashboard) */
.ab-nav{display:flex;align-self:stretch;position:relative}
.ab-tabs{display:flex;gap:2px;margin:0;padding:0;list-style:none}
.ab-tabs li{display:flex}
.ab-tabs a{display:flex;align-items:center;padding:0 12px;color:var(--head-muted);text-decoration:none;font:500 15px var(--font);border-bottom:3px solid transparent;border-top:3px solid transparent;white-space:nowrap}
.ab-tabs a:hover{color:var(--head-ink)}
.ab-tabs a[aria-current="page"]{color:var(--head-ink);font-weight:600;border-bottom-color:var(--signal)}
@media (max-width:1100px){
  .app-bar .ah-btn .t{display:none}
  .app-bar .ah-btn{padding:0 9px}
}
@media (max-width:860px){
  .app-bar{gap:8px 12px;padding:6px 16px}
  .ab-logo{display:none}
  .ab-mark{display:block}
  .ab-home{padding:0 10px 0 0}
  .ab-tool-btn{font-size:17px;padding:0 8px}
}
@media (max-width:420px){
  .ab-tool-btn{max-width:52vw}
  .ab-tool-btn .nm{overflow:hidden;text-overflow:ellipsis}
}

/* ---------- the notice line ---------- */
.notice{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:9px 14px;border-left:3px solid var(--accent);background:var(--panel);font-size:14px;margin:0 0 14px}
.notice.err{border-left-color:var(--flag);background:var(--flag-wash);color:var(--ink)}
.notice.ok{border-left-color:var(--bay);background:var(--bay-wash);color:var(--ink)}

/* ---------- a two- or three-way switch (Open | Closed | All) ---------- */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:2px;gap:2px}
.seg button{font:500 14px var(--font);color:var(--muted);background:transparent;border:0;border-radius:3px;padding:5px 12px;min-height:30px;cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--primary-bg);color:var(--primary-ink);font-weight:600}

/* ---------- controls ---------- */
input,select,textarea{font:inherit;font-size:15px;color:var(--ink);background:var(--raised);border:1px solid var(--line);border-radius:var(--radius);padding:7px 10px;width:100%;min-height:38px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);background:var(--panel);box-shadow:0 0 0 3px color-mix(in srgb,var(--signal) 28%,transparent)}
textarea{min-height:64px;resize:vertical}
input[type=checkbox],input[type=radio]{width:auto;min-height:0;accent-color:var(--signal)}
.btn{font:inherit;font-size:14px;font-weight:600;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:var(--radius);padding:7px 14px;min-height:36px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--primary-bg);border-color:var(--primary-bg);color:var(--primary-ink)}
.btn.primary:hover{background:color-mix(in srgb,var(--primary-bg) 85%,var(--ground))}
.btn.danger{color:var(--flag-ink)}
.btn.sm{padding:3px 10px;min-height:30px;font-size:13px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:default}
.field{display:flex;flex-direction:column;gap:5px;min-width:120px;flex:1}
.field label{font-size:13px;color:var(--muted);font-weight:500}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:end}
.check{display:inline-flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}

/* ---------- state words: a tag always says its state in words, the colour only backs it up ---------- */
.tag{display:inline-flex;align-items:center;font:600 12px/1 var(--font);border-radius:3px;padding:3px 6px;background:var(--line-soft);color:var(--ink);white-space:nowrap}
.tag.wait{background:var(--safety-wash);color:var(--safety-ink)}
.tag.risk,.tag.back{background:var(--flag-wash);color:var(--flag-ink)}
.tag.ok{background:var(--bay-wash);color:var(--bay-ink)}

/* ---------- empty, loading and error states: on the left, in words, with the way forward ---------- */
.empty-state{padding:20px 16px;color:var(--muted);font-size:14px;text-align:left}
.empty-state b{display:block;color:var(--ink);font:600 17px/1.25 var(--font-cond);margin:0 0 2px}

/* ---------- tables: names left, figures right, hairlines between rows ---------- */
.tbl-wrap,.table-wrap,.tablewrap{position:relative}
.tbl-wrap{overflow-x:auto;min-width:0}
table.dt{border-collapse:collapse;width:100%;font-size:14px}
.dt th,.dt td{padding:8px 14px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line-soft)}
.dt tbody tr:last-child td{border-bottom:0}
.dt th{font-size:13px;color:var(--muted);font-weight:500;vertical-align:bottom;border-bottom-color:var(--line)}
.dt th:first-child,.dt td:first-child,.dt .txt{text-align:left}

/* ---------- dialogs ---------- */
dialog{border:0;border-radius:var(--radius-lg);padding:0;width:min(640px,calc(100vw - 24px));max-height:calc(100dvh - 32px);background:var(--panel);color:var(--ink);box-shadow:0 24px 60px var(--shadow)}
dialog::backdrop{background:var(--backdrop)}
dialog form{display:flex;flex-direction:column;gap:14px;padding:22px 24px}
dialog h2{margin:0;font:600 24px/1.1 var(--font-cond)}
.hint{font-size:13px;color:var(--muted);margin:0}
.msg{font-size:13px;margin:0}
.msg.err,.msg.bad{color:var(--flag-ink)}
.msg.ok{color:var(--bay-ink)}

/* ---------- touch screens: every shared control is at least 44px for a thumb (css/mobile.css covers .btn and inputs) ---------- */
@media (pointer:coarse){
  .seg button,.ab-tabs a,.ab-tool-btn,.ab-home,.ah-btn{min-height:44px}
  .ab-menu a{min-height:44px}
}