/* The office app's shared look (moved out of templates/_shell.html, 5 Oct 2026,
   so browsers keep it instead of downloading it with every page). */
  :root{
    /* neutrals */
    --ink:#0f1720; --ink-2:#3a4653; --muted:#697584; --faint:#9aa4af;
    --bg:#f5f6f8; --panel:#fff; --panel-2:#f1f3f5;
    --line:#e6e9ed; --line-2:#d8dde3; --hair:#eef0f3;
    --rail:#0b1117;
    --brand:#4dd08a; --brand-ink:#12824d;
    --font:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
    --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;

    /* status accents */
    --blue:#2563eb; --blue-ink:#1d4ed8; --blue-wash:#eef3ff;
    --green:#16a34a; --green-ink:#15803d; --green-wash:#ecfbf1;
    --amber:#d97706; --amber-ink:#b45309; --amber-wash:#fff6e8;
    --red:#dc2626; --red-ink:#b91c1c; --red-wash:#fff0f0;
    --purple:#7c3aed; --purple-wash:#f4efff;

    /* ---- map line hues -------------------------------------------------
       What a coloured line MEANS has to be the same in the studio and on the
       dashboard, and the legend beside it has to agree with what was drawn.
       Defined once, here; the CSS swatches and the drawing code both read them. */
    --hue-closed:#cf2020;      /* road closed */
    --hue-lanes:#c2690a;       /* lanes affected */
    --hue-ttrdiv:#6d38c9;      /* somebody else's diversion, in force */
    --hue-minor:#8798a5;       /* short obstruction */
    --hue-primary:#0b5fd0;     /* our primary diversion */
    --hue-secondary:#7d3fc4;   /* our secondary / contingency */
    --hue-hgv:#07875a;         /* our HGV diversion */

    --r-card:16px; --r-ctl:10px; --r-pill:999px;
    --shadow:0 1px 2px rgba(15,23,32,.04), 0 1px 1px rgba(15,23,32,.02);
    --shadow-lift:0 12px 32px -10px rgba(15,23,32,.18), 0 2px 6px rgba(15,23,32,.05);
    --shadow-float:0 24px 60px -18px rgba(15,23,32,.28), 0 4px 14px rgba(15,23,32,.08);
    --ring:0 0 0 3px rgba(37,99,235,.18);
    --rail-w:232px;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{margin:0;color:var(--ink);background:var(--bg);
       font:14px/1.55 var(--font);letter-spacing:-.005em;
       -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
       padding-left:var(--rail-w)}
  /* Figures line up in columns only if the digits are the same width. Every
     number in this app is a measurement, a count or a cost. */
  b,strong,th,td,input,select,.num{font-variant-numeric:tabular-nums}

  h1,h2,h3{margin:0;letter-spacing:-.022em;color:var(--ink)}
  h1{font-size:28px;font-weight:650;letter-spacing:-.032em;line-height:1.15}
  h2{font-size:22px;font-weight:650;letter-spacing:-.028em;line-height:1.2}
  /* Section titles read as titles now, in sentence case. The all-caps labels
     were the single biggest thing making the app look dated. */
  h3{font-size:13.5px;font-weight:600;letter-spacing:-.01em;text-transform:none;
     color:var(--ink)}
  code,kbd{font-family:var(--mono)}
  :where(a){color:var(--blue-ink);text-decoration-thickness:1px;text-underline-offset:2px}
  :where(a:visited){color:var(--blue-ink)}
  :where(a:hover){color:var(--blue)}
  ::selection{background:rgba(37,99,235,.16)}

  /* thin, quiet scrollbars — panels scroll a lot */
  *{scrollbar-width:thin;scrollbar-color:#cfd5dc transparent}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-thumb{background:#cfd5dc;border-radius:10px;border:3px solid transparent;
    background-clip:content-box}
  ::-webkit-scrollbar-track{background:transparent}

  /* ---- surfaces ---- */
  .card{background:var(--panel);border:1px solid var(--line);
        border-radius:var(--r-card);padding:16px 18px;margin-bottom:12px;
        box-shadow:var(--shadow)}
  .card > h3:first-child{margin-bottom:12px}
  .via{color:var(--muted);font-size:12.5px}
  .muted{color:var(--muted)}

  /* ---- controls ---- */
  input[type=text],input[type=number],input[type=date],input[type=search],
  input[type=time],input[type=email],input[type=tel],input[type=password],
  input:not([type]),select,textarea{
    font:inherit;font-size:13.5px;color:var(--ink);background:var(--panel-2);
    border:1px solid transparent;border-radius:var(--r-ctl);padding:9px 12px;
    min-height:40px;transition:border-color .15s,box-shadow .15s,background .15s}
  textarea{min-height:72px}
  input::placeholder,textarea::placeholder{color:var(--faint)}
  input:hover:not(:focus):not([type=radio]):not([type=checkbox]),
  select:hover:not(:focus),textarea:hover:not(:focus){background:#eceff2}
  input:focus,select:focus,textarea:focus{outline:none;background:var(--panel);
    border-color:rgba(37,99,235,.55);box-shadow:var(--ring)}
  select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23697584' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center}
  input[type=radio],input[type=checkbox]{accent-color:var(--ink);width:15px;height:15px;
    margin:0;cursor:pointer}

  button{font:inherit;font-size:13.5px;font-weight:550;cursor:pointer;
    border-radius:var(--r-ctl);border:1px solid var(--line-2);background:var(--panel);
    color:var(--ink);padding:8px 14px;min-height:38px;
    transition:background .15s,border-color .15s,box-shadow .15s,transform .1s;
    box-shadow:0 1px 2px rgba(15,23,32,.05)}
  button:hover:not(:disabled){background:#f7f8fa;border-color:#c9d0d7}
  button:active:not(:disabled){transform:translateY(1px)}
  button:focus-visible{outline:none;box-shadow:var(--ring)}
  button:disabled{opacity:.4;cursor:default}
  /* The main action is near-black, not blue: blue is the diversion line on
     every map, and a blue button beside a blue route reads as part of it. */
  button.primary,button.dark{background:var(--ink);border-color:var(--ink);color:#fff;
    box-shadow:0 1px 2px rgba(15,23,32,.2),inset 0 1px 0 rgba(255,255,255,.1)}
  button.primary:hover:not(:disabled),button.dark:hover:not(:disabled){
    background:#232e3a;border-color:#232e3a}

  /* Radio groups inside a card become segmented chips — the one control that
     looked most like a 2004 form. The input stays in the DOM (keyboard and
     screen readers still use it); only the dot is hidden. Scoped to .card so
     the basemap list and anything bespoke keep their own look. */
  .card label:has(> input[type=radio]){display:inline-flex;align-items:center;gap:7px;
    padding:7px 12px;border-radius:var(--r-ctl);background:var(--panel-2);
    border:1px solid transparent;cursor:pointer;font-size:13px;font-weight:500;
    transition:background .15s,border-color .15s,color .15s;margin:0 6px 6px 0}
  .card label:has(> input[type=radio]):hover{background:#e8ebef}
  .card label:has(> input[type=radio]:checked){background:var(--ink);color:#fff}
  .card label:has(> input[type=radio]:focus-visible){box-shadow:var(--ring)}
  .card label > input[type=radio]{position:absolute;opacity:0;width:1px;height:1px}
  .card label:has(> input[type=checkbox]){display:inline-flex;align-items:center;gap:8px;
    cursor:pointer}

  /* ---- status ---- */
  .pill{display:inline-flex;align-items:center;gap:5px;font:600 11.5px/1.5 var(--font);
    letter-spacing:0;padding:2px 9px;border-radius:var(--r-pill);text-transform:none;
    border:1px solid transparent;white-space:nowrap}
  .pill.ok{background:var(--green-wash);color:var(--green-ink)}
  .pill.warn{background:var(--amber-wash);color:var(--amber-ink)}
  .pill.bad{background:var(--red-wash);color:var(--red-ink)}
  .pill.info{background:var(--blue-wash);color:var(--blue-ink)}
  .pill.flat{background:var(--panel-2);color:var(--muted)}

  /* ---- key/value row, used on every page for a labelled figure ---- */
  .k{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
     padding:6px 0}
  .k + .k{border-top:1px solid var(--hair)}
  .k span{color:var(--muted);font-size:12.5px}
  .k b{font-variant-numeric:tabular-nums;font-weight:600}

  /* ---- tables ---- */
  table th{font-weight:550;text-transform:none;letter-spacing:0;color:var(--muted)}

  /* ---- map chrome: floating, rounded, no 2011 grey boxes ------------------ */
  .leaflet-container{font:inherit;background:#eef0f2}
  /* Clicking or dragging a road focuses its <path>, and the browser draws its
     default focus ring around the path's BOUNDING BOX. */
  .leaflet-interactive:focus{outline:none}
  /* Invisible grab lines over roads (TM.grab). Leaflet's own rule
     out-specifies a bare class, so this has to match as tightly. */
  .leaflet-pane > svg path.leaflet-interactive.roadgrab{pointer-events:stroke}
  .roadgrab{cursor:ew-resize}
  .leaflet-control-layers{border:0;border-radius:14px;box-shadow:var(--shadow-lift);
    padding:10px 12px;background:rgba(255,255,255,.92);
    backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}
  .leaflet-control-layers-base{margin-top:0}
  /* The heading sits in the flow above the list (it used to be printed on top
     of the first option). */
  .leaflet-control-layers-base::before{content:'Basemap';display:block;
    margin:0 0 6px;font-size:11.5px;font-weight:600;color:var(--muted)}
  .leaflet-control-layers-base label{display:flex;align-items:center;gap:8px;
    font-size:13px;padding:4px 6px;margin:0 -6px;border-radius:8px;cursor:pointer}
  .leaflet-control-layers-base label:hover{background:var(--panel-2)}
  .leaflet-control-layers-base label > span{display:flex;align-items:center;gap:8px}
  /* Collapsed, the basemap switcher is one round button; it opens on hover. */
  .leaflet-control-layers-toggle{width:40px !important;height:40px !important;
    background-size:20px 20px;border-radius:12px}
  .leaflet-control-layers:not(.leaflet-control-layers-expanded){padding:0}
  .leaflet-bar{border:0 !important;border-radius:12px;overflow:hidden;
    box-shadow:var(--shadow-lift)}
  .leaflet-bar a,.leaflet-bar a:hover{width:36px !important;height:36px !important;
    line-height:36px !important;border-bottom-color:var(--hair);color:var(--ink);
    font:500 18px/36px var(--font) !important}
  .leaflet-bar a:hover{background:var(--panel-2)}
  .leaflet-touch .leaflet-bar a:first-child,
  .leaflet-touch .leaflet-bar a:last-child{border-radius:0}
  .leaflet-top.leaflet-left{top:6px;left:6px}
  .leaflet-tooltip{border:0;border-radius:10px;color:var(--ink);
    box-shadow:var(--shadow-lift);font-size:12.5px;padding:6px 10px}
  .leaflet-control-attribution{font-size:10.5px;color:var(--muted);
    background:rgba(255,255,255,.7) !important;border-radius:8px 0 0 0}
  .leaflet-popup-content-wrapper{border-radius:14px;box-shadow:var(--shadow-lift)}

  /* ---- the sidebar ---------------------------------------------------------
     Kyle, 1 Oct 2026: "make this look like a top software, we're building this
     for clients". The 72 px icon rail with 10 px captions and a PROTOTYPE tag
     read as a demo. Now a labelled sidebar in groups, the way the work runs
     (plan, operations, business), with the account at its foot. Below laptop
     width it folds back to icons, each with its name as a tooltip. */
  .topbar{position:fixed;left:0;top:var(--testbar,0px);bottom:0;width:var(--rail-w);z-index:1000;
    display:flex;flex-direction:column;padding:16px 12px 14px;overflow-y:auto;
    background:var(--rail);border-right:1px solid rgba(255,255,255,.06)}
  .logo{display:flex;align-items:center;gap:10px;padding:2px 8px 18px;text-decoration:none}
  .logo .mark{display:flex;align-items:center;justify-content:center;width:32px;height:32px;
    flex:none;border-radius:9px;border:1.5px solid #fff;color:#fff;
    font:800 12.5px/1 var(--font);letter-spacing:-.04em;white-space:nowrap}
  .logo .mark .tm{color:var(--brand)}
  .logo .word{color:#fff;font:650 16px/1 var(--font);letter-spacing:-.025em}
  .logo .word b{color:var(--brand);font-weight:650}
  .navlinks{display:flex;flex-direction:column;gap:1px;width:100%}
  .navlabel{font:600 11px/1 var(--font);letter-spacing:.02em;color:#5f6d7a;
    padding:16px 10px 7px}
  .navlabel:first-child{padding-top:4px}
  .navlinks a{position:relative;display:flex;align-items:center;gap:11px;padding:7px 10px;
    border-radius:8px;text-decoration:none;color:#a3aeb9;font-size:13.5px;font-weight:500;
    letter-spacing:-.005em;transition:background .12s,color .12s}
  .navlinks a svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round;opacity:.9}
  .navlinks a:hover{background:rgba(255,255,255,.05);color:#fff;text-decoration:none}
  .navlinks a.on{background:rgba(255,255,255,.08);color:#fff}
  .navlinks a.on svg{color:var(--brand);opacity:1}
  .navlinks a .navbadge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;
    background:#e5484d;color:#fff;font:650 11px/20px var(--font);text-align:center}
  /* Sections per service (engine/menu.py, 19 Oct 2026): a heading that folds,
     its pages indented under it without icons. Only the open one shows. */
  .navfind{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:0 10px;height:34px;
    border-radius:9px;background:rgba(255,255,255,.06);color:#6f7c88;cursor:text}
  .navfind svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
  .topbar .navfind input[type=search],.topbar .navfind input[type=search]:hover,.topbar .navfind input[type=search]:focus{
    flex:1;min-width:0;width:auto;height:auto;min-height:0;margin:0;padding:0;border:0;border-radius:0;
    background:transparent;box-shadow:none;outline:none;font:500 13px var(--font);color:#fff}
  .topbar .navfind input::placeholder{color:#6f7c88}
  .navfind:focus-within{background:rgba(255,255,255,.1);box-shadow:0 0 0 1px rgba(77,208,138,.45)}
  .navfind input::-webkit-search-cancel-button{filter:invert(1) opacity(.5)}
  .navsec{display:flex;flex-direction:column}
  .navhead{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:center;gap:11px;width:100%;
    padding:7px 10px;margin-top:2px;border-radius:8px;cursor:pointer;color:#c4ccd4;font:600 13.5px var(--font);
    letter-spacing:-.005em;transition:background .12s,color .12s}
  .navhead svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round;opacity:.9}
  .topbar .navhead:hover:not(:disabled){background:rgba(255,255,255,.05);border-color:transparent;color:#fff}
  .topbar .navhead:active:not(:disabled){transform:none}
  .topbar .navhead:focus-visible,.navlinks a:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;box-shadow:none}
  .navhead .lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .navhead .chev{width:14px;height:14px;margin-left:-5px;opacity:.5;transition:transform .15s}
  .navhead .navbadge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;
    background:#e5484d;color:#fff;font:650 11px/20px var(--font);text-align:center}
  .navsec.open .navhead .chev{transform:rotate(90deg)}
  .navsec.open .navhead .navbadge.sum{display:none}
  .navsec.open .navhead{color:#fff}
  .navsec.open .navhead > svg:first-child{color:var(--brand)}
  .navsub{display:none;flex-direction:column;gap:1px;padding:1px 0 6px}
  .navsec.open .navsub{display:flex}
  .navsub a{padding:6px 10px 6px 39px;font-size:13px}
  .navsub a svg{display:none}
  .navsub a[hidden],.navsec[hidden]{display:none}
  .tabs[hidden],.card[hidden],.tiles[hidden]{display:none}
  @media (prefers-reduced-motion:reduce){ .navhead .chev{transition:none} }
  .navfoot{margin-top:auto;padding-top:12px;display:flex;flex-direction:column;gap:2px}
  .navfoot .me{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
    text-decoration:none;color:#fff;border-top:1px solid rgba(255,255,255,.07);margin-top:6px}
  .navfoot .me:hover{background:rgba(255,255,255,.05);text-decoration:none}
  .navfoot .mine{display:flex;align-items:center;gap:11px;padding:7px 10px;border-radius:8px;color:#a3aeb9;
    font-size:13.5px;font-weight:500;text-decoration:none}
  .navfoot .mine svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .navfoot .mine:hover{background:rgba(255,255,255,.05);color:#fff;text-decoration:none}
  .navfoot .meav{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;
    background:rgba(255,255,255,.12);color:#fff;font:650 11px/1 var(--font)}
  .navfoot .me .who{display:flex;flex-direction:column;align-items:flex-start;min-width:0;
    line-height:1.25;text-align:left}
  .navfoot .me .who b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .navfoot .me .who span{font-size:11.5px;color:#7f8c98}
  .topbar .copy{font:500 10.5px/1.3 var(--font);color:#4f5d6a;padding:10px 10px 0}
  @media (max-width:1100px){
    :root{--rail-w:64px}
    .topbar{padding:14px 8px}
    .logo{justify-content:center;padding:2px 0 14px}
    .logo .word,.navlabel,.navlinks a .lbl,.navfoot .me .who,.navfoot .mine .lbl,.topbar .copy{display:none}
    .navfoot .mine{justify-content:center;padding:9px 0}
    .navlinks a{justify-content:center;padding:9px 0}
    .navlinks a .navbadge{position:absolute;top:2px;right:4px;min-width:16px;height:16px;
      font-size:10px;line-height:16px;padding:0 4px}
    .navfoot .me{justify-content:center;padding:8px 0}
    /* folded to icons: every page shows as its icon, a hairline between services */
    .navfind,.navhead{display:none}
    .navsec{border-top:1px solid rgba(255,255,255,.08);margin-top:6px;padding-top:6px}
    .navsec .navsub{display:flex;padding:0}
    .navsub a{padding:9px 0}
    .navsub a svg{display:block}
  }

  /* ==== One look on every office page =======================================
     Kyle, 1 Oct 2026: "make it look a little more professional ... crisp", the
     problem being dated styling and an inconsistent look. Every page used to
     set its own width (980 to 1400 px, so the left edge moved from page to
     page), its own title size, its own figure tiles and its own badges. These
     rules are prefixed with body so they win over a page's own <style>, which
     comes after this one: a page can no longer drift by accident. */
  :root{--r-card:12px;--r-ctl:8px;--page-w:1320px}
  body .page{max-width:var(--page-w);margin:0 auto;padding:32px 40px 64px}
  @media (max-width:700px){ body .page{padding:22px 16px 48px} }
  /* a form-sized page keeps the same left edge, its content just stops sooner */
  body .page.narrow > *{max-width:820px}
  body .page-title{font-size:26px;font-weight:650;letter-spacing:-.03em;line-height:1.2;margin:0}
  body .sub{color:var(--muted);font-size:14px;line-height:1.55;margin:6px 0 24px;max-width:72ch}

  /* surfaces: hairline border, no drop shadow, one radius */
  body .card{border-radius:var(--r-card);box-shadow:none;border-color:var(--line)}
  body .card h3{font-size:14px;font-weight:600;letter-spacing:-.01em}

  /* links: no underline until you point at one; a job named in a table reads
     as a name, in ink, not as a blue underlined 2004 link */
  :where(a){text-decoration:none}
  :where(a:hover){text-decoration:underline}
  body td > a:first-child:not(.btn){color:var(--ink);font-weight:600}
  body td > a:first-child:not(.btn):hover{color:var(--blue-ink);text-decoration:none}
  body td .muted a,body td .via a{color:inherit;font-weight:500;text-decoration:underline;
    text-decoration-color:var(--line-2)}

  /* a link that does what a button does looks like one */
  a.btn{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:550;
    color:var(--ink);background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-ctl);
    padding:8px 14px;min-height:38px;text-decoration:none;box-shadow:0 1px 2px rgba(15,23,32,.05)}
  a.btn:hover{background:#f7f8fa;border-color:#c9d0d7;text-decoration:none;color:var(--ink)}
  a.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff}

  /* figure tiles (Shifts, Resourcing, Invoicing, the dashboard): one design */
  body .sfact,body .tiles > .tile{background:var(--panel);border:1px solid var(--line);
    border-radius:var(--r-card);padding:14px 16px;box-shadow:none;opacity:1;min-width:132px}
  body .tiles > .tile::before{display:none}
  body .tiles > .tile:hover{box-shadow:none;border-color:var(--line-2)}
  body .sfact .n,body .tiles > .tile .n{font-size:26px;font-weight:650;letter-spacing:-.03em;
    line-height:1.1;color:var(--ink)}
  body .sfact .l,body .tiles > .tile .l{font-size:12.5px;font-weight:500;color:var(--muted);
    margin-top:4px;text-transform:none;letter-spacing:0}
  body .sfact.bad,body .tiles > .tile.attn,body .tiles > .tile.bad{background:var(--panel);
    border-color:var(--line)}
  body .sfact.bad .n,body .tiles > .tile.bad .n{color:var(--red-ink)}
  body .tiles > .tile.attn .n,body .tiles > .tile.warn .n{color:var(--amber-ink)}
  body .tiles > .tile.info .n{color:var(--blue-ink)}
  body .tiles > .tile.ok .n{color:var(--ink-2)}

  /* badges: one shape, no outline; both colour vocabularies mean the same */
  body .pill{display:inline-flex;align-items:center;gap:5px;font:600 11.5px/1.6 var(--font);
    letter-spacing:0;padding:1px 9px;border-radius:var(--r-pill);border:0;white-space:nowrap;
    text-transform:none}
  body .pill.red{background:var(--red-wash);color:var(--red-ink)}
  body .pill.amber{background:var(--amber-wash);color:var(--amber-ink)}
  body .pill.green{background:var(--green-wash);color:var(--green-ink)}
  body .pill.blue{background:var(--blue-wash);color:var(--blue-ink)}
  body .pill.grey{background:var(--panel-2);color:var(--muted)}

  body .card .sub{margin:4px 0 12px}

  /* buttons in a table row are the compact size, so a column of them is a
     column of actions, not a wall */
  body td button,body td a.btn{min-height:32px;padding:5px 12px;font-size:13px}

  /* tables: quiet header, even rows */
  body .page table th{font-size:12px;font-weight:550;color:var(--muted);text-transform:none;
    letter-spacing:0}

  /* ---- controls, crisper (round two, Kyle: "make this look like a top
     software") --------------------------------------------------------------
     Inputs are white with a hairline border, not grey-filled boxes; every
     control is 36 px; badges are tags, not lozenges. */
  :root{--bg:#f6f7f9;--line:#e4e7eb;--line-2:#d5dae0}
  body{font-size:14px;letter-spacing:-.006em}
  body .page-title{font-size:24px;font-weight:650;letter-spacing:-.028em}
  body input[type=text],body input[type=number],body input[type=date],body input[type=search],
  body input[type=time],body input[type=email],body input[type=tel],body input[type=password],
  body input:not([type]),body select,body textarea{
    background-color:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-ctl);
    min-height:36px;padding:7px 11px;font-size:13.5px;box-shadow:0 1px 1px rgba(16,24,40,.03)}
  body textarea{min-height:72px}
  body select{padding-right:32px}
  body input:hover:not(:focus):not([type=radio]):not([type=checkbox]),
  body select:hover:not(:focus),body textarea:hover:not(:focus){background-color:var(--panel);
    border-color:#bfc6ce}
  body input:focus,body select:focus,body textarea:focus{border-color:#3b82f6;
    box-shadow:0 0 0 3px rgba(59,130,246,.16)}
  body button{min-height:36px;padding:7px 14px;border-radius:var(--r-ctl);font-size:13.5px;
    font-weight:550;border-color:var(--line-2);box-shadow:0 1px 2px rgba(16,24,40,.05)}
  body button.primary,body button.dark{box-shadow:0 1px 2px rgba(16,24,40,.18)}
  body .card{box-shadow:0 1px 2px rgba(16,24,40,.04)}
  body .pill{border-radius:6px;padding:2px 8px;font-size:12px;font-weight:550;line-height:1.45}
  body .page table td{border-color:var(--hair)}
  body .page table tbody tr:hover > td{background:#fafbfc}


/* ==== Shared building blocks (13 Oct 2026) =================================
   Kyle: "the garage and the main app need to match ... i want all the
   interfaces to feel the same". These were the office home's own (dark band,
   figure tiles, panes, attention rows); every page now takes them from here,
   so the garage's home, its fleet and the office's home are one design. */
  /* ---- the band ---- */
  .hero{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:330px;
    border-radius:18px;overflow:hidden;background:#0b1117;color:#e9eff4;
    box-shadow:0 30px 60px -30px rgba(11,17,23,.55)}
  .hero::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(600px 300px at 12% 0%,rgba(77,208,138,.20),transparent 60%),
               radial-gradient(500px 260px at 0% 100%,rgba(37,99,235,.14),transparent 60%)}
  .hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;
    background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
    background-size:32px 32px;mask-image:linear-gradient(90deg,#000 0,#000 40%,transparent 60%)}
  .hero-text{position:relative;z-index:1;padding:34px 36px;display:flex;flex-direction:column;justify-content:center}
  .hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:550;color:#9fb0bf;
    letter-spacing:.01em}
  .livedot{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 0 rgba(77,208,138,.6);
    animation:live 2.2s infinite}
  @keyframes live{0%{box-shadow:0 0 0 0 rgba(77,208,138,.55)}70%{box-shadow:0 0 0 9px rgba(77,208,138,0)}100%{box-shadow:0 0 0 0 rgba(77,208,138,0)}}
  .hero h1{font-size:42px;font-weight:700;letter-spacing:-.04em;line-height:1.05;margin:14px 0 0;color:#fff}
  .hero h1 .nm{background:linear-gradient(90deg,#fff 0,#b9f5d4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
  .hero .lede{font-size:16px;line-height:1.55;color:#b8c4cf;margin:12px 0 0;max-width:46ch}
  .hero .lede b{color:#fff;font-weight:600}
  .hero-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
  .hero a.btn{min-height:40px;padding:9px 16px;font-size:14px;border-radius:10px}
  .hero a.btn.brand{background:var(--brand);border-color:var(--brand);color:#05230f;font-weight:650;
    box-shadow:0 8px 24px -8px rgba(77,208,138,.6)}
  .hero a.btn.brand:hover{background:#63dc9b;color:#05230f}
  .hero a.btn.ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#e9eff4;box-shadow:none}
  .hero a.btn.ghost:hover{background:rgba(255,255,255,.1);color:#fff}
  .hero-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:22px;font-size:12.5px;color:#8b9aa8}
  .hero-meta a{color:#cfe7da}
  .hero-meta b{color:#fff;font-weight:600}

  /* ---- figures ---- */
  .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  @media (max-width:980px){ .kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
  .kpi{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px 14px;
    text-decoration:none;color:var(--ink);display:block;transition:border-color .15s,transform .15s,box-shadow .15s}
  a.kpi:hover{border-color:var(--line-2);transform:translateY(-1px);box-shadow:0 10px 24px -14px rgba(16,24,40,.25);text-decoration:none}
  .kpi .top{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);font-weight:500}
  .kpi .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--panel-2);color:var(--ink-2)}
  .kpi .ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .kpi .n{font-size:34px;font-weight:700;letter-spacing:-.04em;line-height:1;margin-top:12px;font-variant-numeric:tabular-nums}
  .kpi .s{font-size:12.5px;color:var(--muted);margin-top:6px}
  .kpi .bar{height:5px;border-radius:5px;background:var(--hair);margin-top:12px;overflow:hidden}
  .kpi .bar i{display:block;height:100%;width:0;border-radius:5px;background:var(--green);transition:width 1s cubic-bezier(.2,.8,.2,1)}
  .kpi.bad .n{color:var(--red-ink)} .kpi.bad .ic{background:var(--red-wash);color:var(--red-ink)}
  .kpi.good .ic{background:var(--green-wash);color:var(--green-ink)}
  .kpi.blue .ic{background:var(--blue-wash);color:var(--blue-ink)}
  .kpi .pulse{position:absolute;top:18px;right:18px;width:8px;height:8px;border-radius:50%;background:var(--green);
    animation:live 2.2s infinite}

  /* a bar can be filled by CSS alone: <i style="--w:40%"> */
  .kpi .bar i[style*="--w"]{width:var(--w);animation:fill 1s cubic-bezier(.2,.8,.2,1) both}
  @keyframes fill{from{width:0}}
  .kpi.warn .n{color:var(--amber-ink)} .kpi.warn .ic{background:var(--amber-wash);color:var(--amber-ink)}
  .kpis.five{grid-template-columns:repeat(5,minmax(0,1fr))}
  @media (max-width:1180px){ .kpis.five{grid-template-columns:repeat(3,minmax(0,1fr))} }
  @media (max-width:700px){ .kpis.five,.kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
  /* ---- main ---- */
  .main{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:16px;align-items:start}
  @media (max-width:1100px){ .main{grid-template-columns:minmax(0,1fr)} }
  .pane{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
  .pane h3{display:flex;align-items:baseline;gap:8px;margin:0 0 14px;font-size:15px;font-weight:650}
  .pane h3 .sm{font-size:12.5px;color:var(--muted);font-weight:500}
  .pane h3 a{margin-left:auto;font-size:12.5px;font-weight:550}

  /* attention */
  .att{display:flex;align-items:center;gap:12px;padding:11px 10px;margin:0 -10px;border-radius:10px;
    text-decoration:none;color:var(--ink);transition:background .12s}
  .att + .att{margin-top:2px}
  .att:hover{background:var(--panel-2);text-decoration:none}
  .att .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;
    background:var(--amber-wash);color:var(--amber-ink)}
  .att .ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .att.bad .ic{background:var(--red-wash);color:var(--red-ink)}
  .att.info .ic{background:var(--blue-wash);color:var(--blue-ink)}
  .att .x{flex:1;font-size:13.5px;line-height:1.35}
  .att .x b{font-variant-numeric:tabular-nums}
  .att .go{color:var(--faint);transition:transform .15s}
  .att:hover .go{transform:translateX(3px);color:var(--ink-2)}
  .clear{display:flex;align-items:center;gap:12px;padding:6px 0}
  .clear .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--green-wash);color:var(--green-ink)}
  .clear .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

  /* arrive */
  .rise{animation:up .6s cubic-bezier(.2,.8,.2,1) both}
  @keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){ .rise,.tl-bar,.wk .col,.livedot,.kpi .pulse{animation:none} }
  @media (prefers-reduced-motion:reduce){ .rise,.livedot,.kpi .pulse,.kpi .bar i{animation:none} }

  /* the page heading: title, one line saying what the page is for, actions right */
  .page-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:0 0 18px}
  @media (max-width:980px){ .hero{grid-template-columns:minmax(0,1fr)} .hero h1{font-size:34px} }
  .hero.solo{grid-template-columns:minmax(0,1fr);min-height:0}
  .page-head > div:first-child{flex:1;min-width:260px}
  body .page-head .sub{margin:6px 0 0}
  .page-head .acts{display:flex;gap:8px;flex-wrap:wrap}

  /* segmented tabs, as links or buttons: one pill track, the current one lifted */
  body .tabs{display:inline-flex;gap:2px;padding:4px;background:#e9ecf0;border-radius:12px;margin:0 0 20px;border:0;flex-wrap:wrap}
  body .tabs > a,body .tabs > button{background:none;border:0;border-radius:9px;box-shadow:none;min-height:0;
    padding:7px 16px;font:550 13.5px var(--font);color:var(--muted);text-decoration:none}
  body .tabs > a.on,body .tabs > button.on{color:var(--ink);background:#fff;
    box-shadow:0 1px 2px rgba(15,23,32,.08),0 1px 1px rgba(15,23,32,.04)}
  body .tabs > a:hover,body .tabs > button:hover:not(:disabled){color:var(--ink);background:rgba(255,255,255,.55);text-decoration:none}
  body .tabs > a.on:hover,body .tabs > button.on:hover{background:#fff}
  body .tabs .n{display:inline-block;min-width:18px;margin-left:6px;padding:0 5px;border-radius:9px;font-size:11.5px;
    line-height:18px;text-align:center;background:var(--red);color:#fff;font-weight:650}

  /* a registration reads as a number plate, everywhere */
  .plate{display:inline-block;font:700 12.5px/1 var(--font);letter-spacing:.08em;white-space:nowrap;
    padding:4px 7px;border-radius:5px;background:#fff6c4;border:1px solid #e8d26a;color:#14181c}

  /* a pane's rows: a list of things, each a link, a status on the right */
  .rows{display:grid}
  .rowi{display:flex;align-items:center;gap:12px;padding:11px 10px;margin:0 -10px;border-radius:10px;color:var(--ink);text-decoration:none}
  a.rowi:hover{background:var(--panel-2);text-decoration:none}
  .rowi + .rowi{border-top:1px solid var(--hair)}
  .rowi .x{flex:1;min-width:0}
  .rowi .x b{display:block;font-size:13.5px;font-weight:600}
  .rowi .x span{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rowi .r{text-align:right;font-size:12.5px;color:var(--muted);white-space:nowrap}

  /* a dialog for a short form (new job card): the page stays where it was */
  dialog.sheet{border:0;border-radius:16px;padding:0;width:min(640px,calc(100vw - 32px));box-shadow:0 30px 80px -20px rgba(11,17,23,.45)}
  dialog.sheet::backdrop{background:rgba(11,17,23,.45);backdrop-filter:blur(2px)}
  dialog.sheet .hd{display:flex;align-items:center;gap:10px;padding:18px 22px;border-bottom:1px solid var(--hair)}
  dialog.sheet .hd h3{margin:0;font-size:16px;font-weight:650;flex:1}
  dialog.sheet .bd{padding:18px 22px;display:grid;gap:12px}
  dialog.sheet .ft{display:flex;gap:10px;align-items:center;justify-content:flex-end;padding:14px 22px;border-top:1px solid var(--hair);background:#fafbfc}
  dialog.sheet label{font-size:12.5px;font-weight:600;display:block;margin-bottom:4px}
  dialog.sheet input,dialog.sheet select,dialog.sheet textarea{width:100%;box-sizing:border-box}
  .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  @media (max-width:600px){ .grid2{grid-template-columns:minmax(0,1fr)} }

/* lone working bar */
  #lonebar{position:fixed;top:var(--testbar,0px);left:var(--rail-w,76px);right:0;z-index:1300;display:grid;gap:1px;
    background:var(--red-ink);box-shadow:0 6px 24px rgba(185,28,28,.35)}
  #lonebar .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:10px 18px;background:var(--red);
    color:#fff;font-size:14px}
  #lonebar .row b{font-weight:700}
  #lonebar .row .grow{flex:1;min-width:220px}
  #lonebar a{color:#fff}
  #lonebar button{background:#fff;color:var(--red-ink);border:0;border-radius:8px;padding:7px 12px;
    font-weight:700;font-size:13px;cursor:pointer}
  @media (max-width:700px){ #lonebar{left:0} }
  @media print{ #lonebar{display:none} }

/* Ask IntelliAi */
  /* Ask sits in the sidebar's foot, above the account: a row like the others. */
  #askbtn{display:flex;align-items:center;gap:11px;width:100%;min-height:0;padding:7px 10px;
    border:0;border-radius:8px;background:transparent;box-shadow:none;cursor:pointer;
    color:#a3aeb9;font:500 13.5px/1.4 var(--font);text-align:left;transition:background .12s,color .12s}
  #askbtn img{width:20px;height:20px;display:block;flex:none}
  #askbtn:hover{background:rgba(255,255,255,.05);color:#fff}
  @media (max-width:1100px){ #askbtn{justify-content:center;padding:9px 0} #askbtn span{display:none} }
  .askmark{width:24px;height:24px;display:block}
  #askhead .g{color:var(--brand-ink)}
  #askpanel{position:fixed;left:calc(var(--rail-w) + 12px);bottom:16px;width:400px;
    max-height:min(74vh,660px);z-index:1001;background:rgba(255,255,255,.96);
    backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
    border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-float);
    display:none;flex-direction:column;overflow:hidden}
  #askpanel.on{display:flex}
  #askhead{padding:14px 16px;border-bottom:1px solid var(--hair);display:flex;
    align-items:center;gap:9px}
  #askhead b{font-size:13.5px}
  #askhead .sub{font-size:11px;color:var(--muted);margin-left:auto}
  #asklog{flex:1;overflow:auto;padding:11px 14px;font-size:13px;line-height:1.5}
  #asklog .q{font-weight:700;margin-top:12px}
  #asklog .q:first-child{margin-top:0}
  #asklog .a{margin-top:3px}
  #asklog ul{margin:5px 0 0;padding-left:17px}
  #asklog li{margin:2px 0;color:var(--ink-2)}
  #asklog .src{margin-top:4px;font-size:11px;color:var(--muted)}
  #asklog blockquote.ch8{margin:7px 0 0;padding:9px 11px;background:var(--panel-2);
    border-left:3px solid var(--blue);border-radius:0 8px 8px 0;font-size:12.5px;
    line-height:1.45;color:var(--ink-2)}
  #asklog blockquote.ch8 .ref{font-weight:800;font-size:11.5px;margin-bottom:3px}
  #asklog blockquote.ch8 .ref span{font-weight:400;color:var(--muted);margin-left:5px}
  #asklog a{color:var(--blue)}
  #asklog{padding:14px 16px}
  #askform{display:flex;gap:8px;padding:12px;border-top:1px solid var(--hair)}
  #askq{flex:1;font-size:13px}
  #askform button{border:none;background:var(--ink);color:#fff;font:600 13px var(--font);
    padding:8px 14px}
  #askform button:hover{background:#232e3a}
  .askchip{display:inline-block;font-size:12px;background:var(--panel-2);
    color:var(--ink-2);border-radius:var(--r-pill);padding:4px 11px;margin:4px 4px 0 0;
    cursor:pointer;transition:background .15s}
  .askchip:hover{background:#e6e9ed}
  .askwait{color:var(--muted);animation:askpulse 1.4s ease-in-out infinite}
  @keyframes askpulse{50%{opacity:.4}}
  a.askjob{display:inline-flex;margin:8px 6px 0 0;padding:5px 11px;border-radius:9px;
    background:var(--ink);color:#fff;text-decoration:none;font-size:12.5px;font-weight:550}
  a.askjob:hover{background:#232e3a;color:#fff}

/* motion (static/motion.js) */
.motion-pending .page > *{opacity:0}
.navlinks.has-hi{position:relative}
.navlinks.has-hi a.on{background:transparent}
.navhi{position:absolute;left:0;right:0;top:0;border-radius:8px;background:rgba(255,255,255,.08);pointer-events:none}
.navlinks.has-hi a{z-index:1}
.motion-done{position:absolute;inset:0;display:grid;place-items:center;background:inherit;border-radius:inherit;pointer-events:none}
.motion-done svg{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}