/* Vela design system — EXTRACTED FROM THE WIREFRAMES, not invented.
 *
 * Source: PRD_Study/ux/wireframes/*.html. All twenty-four carry the same token block inline; this
 * is that block plus the primitives and shell built on it, lifted out ONCE so the running product
 * and the design cannot drift apart by being written twice.
 *
 * The thin UI never used any of it. ADR-075 called the P1 routing shell throwaway, so the screens
 * grew outward from the engines rather than from the design — which is how a front desk ended up
 * with a dropdown and two buttons where A3 specifies a six-step check-in with a live progress rail.
 * This file is the first half of correcting that; the screens are the second.
 *
 * WHAT BELONGS HERE: tokens, and anything used by more than one screen — chips, buttons, the top
 * bar, the sidebar, cards, KPI tiles, alerts, list tables. A screen's own furniture (A1's rack
 * timeline, A3's wizard steps) lives beside that screen.
 */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap');
  :root{
    --primary:#1E40AF; --primary-2:#3B82F6; --primary-3:#DBEAFE;
    --cta:#F59E0B;
    --bg:#F8FAFC; --surface:#FFFFFF; --surface-2:#F1F5F9;
    --ink:#0F172A; --muted:#475569; --faint:#94A3B8;
    --line:#E2E8F0; --line-2:#EEF2F6;
    --ok:#15803D; --ok-bg:#DCFCE7; --ok-line:#A7E3BC; --ok-fill:#D6F0DE;
    --warn:#B45309; --warn-bg:#FEF3C7; --warn-line:#F3D28B; --warn-fill:#FDECC8;
    --bad:#B91C1C; --bad-bg:#FEE2E2; --bad-line:#F3B4B4;
    --occ-fill:#DCE3EC; --own:#EDE9FE; --own-line:#C9BEF3;
    --mono:'Fira Code',ui-monospace,Menlo,monospace;
    --shadow:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.05);
    --shadow-lg:0 10px 30px rgba(15,23,42,.14);
    --r:10px;
  }
  *{box-sizing:border-box}html,body{margin:0}
  body{background:var(--bg);color:var(--ink);font-family:'Fira Sans',ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:13px;line-height:1.4;-webkit-font-smoothing:antialiased}
  .num{font-family:var(--mono);font-feature-settings:"tnum" 1}
  svg{display:block}.ico{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}.ico.sm{width:15px;height:15px}
  button,.click{cursor:pointer;font-family:inherit}
  :focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--primary-2);border-radius:6px}
  .rad{position:absolute;opacity:0;pointer-events:none}

  /* chips + buttons */
  .chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;border-radius:20px;padding:2px 9px;border:1px solid var(--line);background:var(--surface-2);color:var(--muted)}
  .chip.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
  .chip.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
  .chip.bad{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
  .chip.info{background:var(--primary-3);border-color:#BFD3FB;color:var(--primary)}
  .btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;padding:6px 12px;background:var(--surface);color:var(--ink);font-size:12.5px;font-weight:600;transition:background .15s,border-color .15s,box-shadow .15s;white-space:nowrap}
  .btn:hover{background:var(--surface-2);border-color:var(--primary-2)}
  .btn:disabled{opacity:.55;cursor:not-allowed}
  .btn:disabled:hover{background:var(--surface);border-color:var(--line);box-shadow:none}
  .btn.primary:disabled:hover{background:var(--primary);border-color:var(--primary);box-shadow:none}
  .btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn.primary:hover{background:#1B3AA0;box-shadow:var(--shadow-lg)}
  .btn.cta{background:var(--cta);border-color:var(--cta);color:#3B2500}.btn.cta:hover{background:#E08C06}
  .btn.ghost{border-color:transparent;color:var(--muted);font-weight:500}.btn.ghost:hover{background:var(--surface-2);border-color:var(--line)}
  .btn.sm{padding:4px 9px;font-size:11.5px}

  /* top bar */
  .top{display:flex;align-items:center;gap:14px;padding:10px 20px;background:var(--surface);border-bottom:1px solid var(--line)}
  .brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px}
  .brand .mark{width:24px;height:24px;border-radius:6px;background:linear-gradient(135deg,var(--primary-2),var(--primary));display:flex;align-items:center;justify-content:center}
  .switch-prop{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-weight:600}
  .switch-prop .cap{font-size:10px;color:var(--faint);font-weight:500;display:block;line-height:1}
  .search{flex:1;max-width:460px;display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:8px;padding:7px 11px;background:var(--surface-2);color:var(--faint)}
  .search kbd{margin-left:auto;font-family:var(--mono);font-size:10px;background:#fff;border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--muted)}
  .top .right{margin-left:auto;display:flex;align-items:center;gap:8px}
  .iconbtn{position:relative;width:36px;height:36px;border:1px solid var(--line);border-radius:8px;background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--muted)}
  .iconbtn:hover{background:var(--surface-2);color:var(--ink);border-color:var(--primary-2)}
  .iconbtn .dot{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;background:var(--bad);color:#fff;border-radius:8px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;font-family:var(--mono)}
  .avatar{width:28px;height:28px;border-radius:50%;background:var(--primary-3);color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}

  /* subbar: title + view switch */
  .subbar{display:flex;align-items:center;gap:12px;padding:12px 20px 0}
  .subbar h1{margin:0;font-size:19px;letter-spacing:-.2px}
  .subbar .date{color:var(--muted);font-size:12.5px}
  .subbar .right{margin-left:auto;display:flex;align-items:center;gap:10px}
  .vsw{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface)}
  .vsw label{display:flex;align-items:center;gap:7px;padding:7px 14px;font-size:12.5px;font-weight:600;color:var(--muted);border-right:1px solid var(--line)}
  .vsw label:last-child{border-right:none}
  .vsw label:hover{background:var(--surface-2);color:var(--ink)}

  /* context strip: counters + alerts toggle */
  .ctx{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 20px 0}
  .kpi{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:9px;padding:7px 12px;background:var(--surface);box-shadow:var(--shadow)}
  .kpi:hover{border-color:var(--primary-2)}
  .kpi .n{font-family:var(--mono);font-size:18px;font-weight:600;line-height:1}
  .kpi .l{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
  .kpi.attn{border-color:var(--warn-line)}.kpi.attn .n{color:var(--warn)}
  .kpi.bad{border-color:var(--bad-line)}.kpi.bad .n{color:var(--bad)}
  .alerttoggle{margin-left:auto;display:flex;align-items:center;gap:8px;border:1px solid var(--bad-line);background:var(--bad-bg);color:var(--bad);border-radius:9px;padding:7px 12px;font-weight:700;font-size:12.5px}
  .alerttoggle:hover{box-shadow:var(--shadow)}
  .alerttoggle .cv{transition:transform .18s}

  /* alert panel (collapsible) — SHOWN BY DEFAULT, HIDDEN BY [hidden].
     It used to be `display:none` lifted only by `#alertsOpen:checked`, which is the wireframe's
     CSS-only toggle: a hidden checkbox the rebuilt shell never carried. So the panel could not be
     opened by anything, and A1's bell and its "N alerts need action" button had never once shown
     a thing. A screen toggles `panel.hidden`; that is the only mechanism now. */
  .alertpanel{display:block;padding:10px 20px 0}
  .alert{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-left-width:4px;border-radius:9px;padding:9px 13px;background:var(--surface);box-shadow:var(--shadow);margin-bottom:7px}
  .alert .txt{flex:1;font-size:12.5px}.alert .txt b{font-weight:700}
  .alert.bad{border-left-color:var(--bad);background:linear-gradient(0deg,var(--bad-bg),var(--bad-bg)),#fff}.alert.bad .ai{color:var(--bad)}
  .alert.warn{border-left-color:var(--cta)}.alert.warn .ai{color:var(--warn)}
  .xbtn{color:var(--faint);background:none;border:none;padding:4px;border-radius:6px;display:flex}.xbtn:hover{background:var(--surface-2);color:var(--ink)}
  .alertpanel .foot{font-size:11px;color:var(--faint);padding:2px 2px 0}

  /* main + card */
  .main{padding:14px 20px 8px}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);position:relative}
  .cardhd{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line-2)}
  .cardhd h3{margin:0;font-size:14px;font-weight:700}
  .bd{padding:13px 15px}
  .toolbar{display:flex;align-items:center;gap:8px;margin-left:auto}
  .seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
  .seg span{padding:4px 10px;font-size:12px;color:var(--muted);border-right:1px solid var(--line)}
  .seg span:last-child{border-right:none}.seg span.on{background:var(--primary-3);color:var(--primary);font-weight:700}
  .legend{display:flex;flex-wrap:wrap;gap:14px;padding:10px 14px;font-size:11px;color:var(--muted);border-top:1px solid var(--line-2)}
  .legend span{display:inline-flex;align-items:center;gap:6px}
  .sw{width:13px;height:13px;border-radius:3px;border:1px solid var(--line);display:inline-block}

  /* ---- app shell (sidebar) ---- */
  .app{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
  .shellmain{min-width:0;display:flex;flex-direction:column}
  .side{background:#0B1220;color:#AEBAD0;display:flex;flex-direction:column;gap:1px;padding:14px 12px}
  .side .sbrand{display:flex;align-items:center;gap:9px;color:#fff;font-weight:700;font-size:15px;padding:6px 8px 14px}
  .side .sbmark{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--primary-2),var(--primary));display:flex;align-items:center;justify-content:center}
  .nav{display:flex;flex-direction:column;gap:1px}
  .nav a{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:8px;color:#AEBAD0;text-decoration:none;font-size:13px;font-weight:500;transition:background .15s,color .15s}
  .nav a .ico{width:18px;height:18px;stroke-width:1.7}
  .nav a:hover{background:#151F33;color:#fff}
  .nav a.active{background:var(--primary);color:#fff}
  .nav .grp{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:#5C6B85;padding:12px 10px 4px;font-weight:600}
  .side .sfoot{margin-top:auto;font-size:11px;color:#5C6B85;padding:8px 10px}

  /* ---- list view ---- */
  .ltabs{display:flex;gap:4px;padding:11px 14px;border-bottom:1px solid var(--line-2)}
  .ltab{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:8px;background:transparent;border:1px solid transparent;color:var(--muted);font-size:13px;font-weight:600}
  .ltab.on{background:var(--primary-3);color:var(--primary);border-color:#BFD3FB}
  .ltab .cnt{font-family:var(--mono);font-size:11px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:0 6px}
  table.lt{width:100%;border-collapse:collapse}
  table.lt th{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:600;text-align:left;padding:8px 14px;background:#FBFCFE;border-bottom:1px solid var(--line)}
  table.lt td{padding:10px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
  table.lt tr:hover{background:#FBFCFE}
  .lt .gn{font-weight:600}.lt .gs{color:var(--muted);font-size:11px}
  .lt .chips{display:flex;gap:5px;flex-wrap:wrap}

  @media(max-width:1024px){.app{grid-template-columns:1fr}.side{display:none}}
  @media(max-width:900px){.floorwrap{grid-template-columns:1fr}.search{display:none}}

/* ================================================================================================
 * SHELL FURNITURE — the parts the wireframes show but do not style, because a static wireframe has
 * no sessions, no loading and no errors. Built on the same tokens so they cannot drift.
 * ============================================================================================== */
/* `hidden` MUST HIDE. The wireframes are static, so none of them needed this — and the shell
   hides six controls with the attribute (the property switcher, search, the bell, the avatar, Sign
   out, the alert panel). Without the rule the browser default loses to any `display` a class sets,
   and the SIGN-IN SCREEN offered a property switcher, a bell with a red alert dot, an empty avatar
   and a Sign out button. The old UI had this rule; extracting the design system dropped it. */
[hidden] { display:none !important; }

main#screen { padding:18px 22px 40px; }
.pad { padding:14px 16px 18px; }
.loading { color:var(--faint); padding:28px 4px; font-size:14px; }

/* A screen that has not been ported yet says so and offers the way through, rather than pretending
   to be empty. This is scaffolding with an expiry date: it goes when the last screen moves. */
.notyet { background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
          padding:26px 24px; max-width:64ch; box-shadow:var(--shadow); }
.notyet h2 { margin:0 0 8px; font-size:17px; }
.notyet p  { margin:0 0 16px; color:var(--muted); line-height:1.65; font-size:14px; }

.signin { display:grid; place-items:center; padding:6vh 0; }
.signin .card { width:min(420px,92vw); }
.field { display:block; margin-bottom:12px; }
.field span { display:block; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase;
              color:var(--faint); margin-bottom:5px; }
.field input { width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px;
               font:inherit; color:var(--ink); background:var(--surface); }
.field input:focus-visible { outline:2px solid var(--primary-2); outline-offset:1px; }
.btn.wide { width:100%; justify-content:center; }
.hint { margin:14px 0 0; color:var(--faint); font-size:12px; line-height:1.7; }

/* A session that ended is a thing to explain, not an error to swallow (ADR-114). */
.veil { position:fixed; inset:0; background:rgba(15,23,42,.45); display:flex; align-items:center;
        justify-content:center; z-index:80; backdrop-filter:blur(2px); }
.signedout { background:var(--surface); border-radius:12px; padding:24px 26px; max-width:460px;
             box-shadow:var(--shadow-lg); }
.signedout h2 { margin:0 0 8px; font-size:17px; }
.signedout p { margin:0 0 18px; color:var(--muted); line-height:1.65; font-size:14px; }

.toaststack { position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column;
              gap:8px; z-index:90; max-width:min(460px,86vw); }
.toast { background:var(--ink); color:#fff; padding:11px 14px; border-radius:9px; font-size:13.5px;
         line-height:1.55; box-shadow:var(--shadow-lg); }
.toast.bad { background:var(--bad); }
.toast.ok  { background:var(--ok); }

/* ---- NAVIGATION ON A TABLET -------------------------------------------------------------------
 * The wireframe hides the sidebar below 1024px and puts nothing in its place — which is fine for a
 * static mockup and not fine for the device a front desk actually holds (stage 6 walked all
 * twenty-four screens at 768px for exactly this reason). Below 1024 the rail becomes a horizontal
 * strip that scrolls: same links, same order, same active state, no hamburger to discover.
 * ---------------------------------------------------------------------------------------------- */
@media (max-width:1024px) {
  .app { grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .side { display:flex !important; flex-direction:row; align-items:center; gap:4px;
          width:auto; height:auto; padding:6px 10px; overflow-x:auto; overflow-y:hidden;
          border-right:0; border-bottom:1px solid var(--line); }
  .side .sbrand { margin:0 10px 0 0; padding:0; border:0; flex:0 0 auto; }
  .side .sfoot  { display:none; }
  .nav { display:flex; flex-direction:row; gap:4px; padding:0; overflow-x:auto; }
  .nav a { white-space:nowrap; padding:7px 11px; }
  .nav .grp { display:none; }              /* a section heading in a horizontal strip is noise */
}

/* A control the current screen cannot serve says so rather than swallowing what you type. */
.search.off { opacity:.55; }
.search input:disabled { cursor:not-allowed; }
.iconbtn:disabled { opacity:.45; cursor:not-allowed; }
.switch-prop.live { cursor:pointer; }
.switch-prop.live:hover { border-color:var(--primary-2); }
.switch-prop.live:focus-visible { outline:2px solid var(--primary-2); outline-offset:1px; }

/* One value, asked for without `window.prompt` — which is suppressed in embedded contexts and
   throws rather than falling back (Inc 66; the lesson was first written in hk.js in Inc 51). */
.askbox { background:var(--surface); border-radius:12px; padding:22px 24px; width:min(460px,88vw);
          box-shadow:var(--shadow-lg); }
.askbox h2 { margin:0 0 8px; font-size:17px; }
.askbox p { margin:0 0 14px; color:var(--muted); line-height:1.65; font-size:13.5px; white-space:pre-line; }
.askbox .inp { width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px;
               font:inherit; background:var(--bg,#fff); color:inherit; }
.askacts { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }

/* The inline add-form (Inc 67 moved it here from setup.css, because a second screen wanted it and
   a copied component is two components the moment one of them is fixed). */
.addform { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.addform input, .addform select { padding:6px 8px; border:1px solid var(--line); border-radius:6px;
  font:inherit; background:var(--bg,#fff); color:inherit; }