/* Kyros manager console, restyled to docs/DesignSystem.md (2026-10-22). Server-rendered pages
   (kyros/web.py + kyros/templates); tabs, filters and sub-tabs are links. Same tokens as the KyrosAI phone app,
   so the two feel like one product: quiet greys, ember only for the KyrosAI button, badges, focus and small
   accents, the neutral "primary" pill for the one main button. Dark by default, light via <html data-theme="light">.
   board.css / owner.css / sim.css / floor_editor.css build on these tokens. */

/* ---- tokens ----
   The design-system names come first (--surface, --ink, --ember ...). The older console names (--brand, --green,
   --red, --zebra ...) stay as aliases so the other stylesheets keep working; new code uses the new names. */
:root {
  --page-w: 1440px;   /* every console page, its top bar and its bottom bar: one width, so pages line up */
  color-scheme: dark;
  --bg: #0C0C0E; --surface: #141416; --surface-2: #1F1F22; --line: #2A2A2E;
  --ink: #F2F2F3; --muted: #A1A1A8; --faint: #6E6E76;
  --primary: #F2F2F3; --on-primary: #000000;
  --ember: #FF7A1A; --on-ember: #1A0D04; --ember-text: #FF9A4D; --amber: #FFB547;
  --ok: #34D399; --warn: #FBBF24; --bad: #F87171;
  --ember-soft: rgba(255, 122, 26, .14); --ok-soft: rgba(52, 211, 153, .13); --warn-soft: rgba(251, 191, 36, .13); --bad-soft: rgba(248, 113, 113, .14);
  --focus: #FF7A1A;
  --scrim: rgba(0, 0, 0, .62);
  --shadow: 0 10px 40px rgba(0, 0, 0, .5); --shadow-3: 0 1px 3px rgba(0, 0, 0, .5);
  --f: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans", "Nirmala UI", "Noto Sans Devanagari", sans-serif;

  /* aliases for the older stylesheets */
  --brand: var(--ember); --brand-ink: var(--on-ember); --brand-soft: var(--ember-soft); --brand-strong: #FF8F4A;
  --green: var(--ok); --green-soft: var(--ok-soft); --red: var(--bad); --red-soft: var(--bad-soft);
  --zebra: var(--surface-2); --on: var(--ember-soft);
  --warn-ink: #3A2600;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #FFFFFF; --surface: #F6F6F7; --surface-2: #ECECEE; --line: #E2E2E6;
  --ink: #0D0D0F; --muted: #5E5E66; --faint: #8E8E96;
  --primary: #0D0D0F; --on-primary: #FFFFFF;
  --ember: #E8620A; --on-ember: #FFFFFF; --ember-text: #B34A00; --amber: #B86E00;
  --ok: #15803D; --warn: #B45309; --bad: #B91C1C;
  --ember-soft: rgba(232, 98, 10, .11); --ok-soft: rgba(21, 128, 61, .11); --warn-soft: rgba(180, 83, 9, .11); --bad-soft: rgba(185, 28, 28, .09);
  --focus: #E8620A;
  --scrim: rgba(16, 24, 40, .28);
  --shadow: 0 10px 40px rgba(16, 24, 40, .16);
  --brand-strong: #C2530A;
}

/* ---- base ---- */
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { background: var(--surface-2); border: 1px solid transparent; border-radius: 12px; padding: 9px 12px; min-height: 40px; }
input:hover, select:hover, textarea:hover { border-color: var(--line); }
input[type="checkbox"], input[type="radio"] { background: none; min-height: 0; padding: 0; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:disabled, select:disabled, textarea:disabled { opacity: .55; }
/* No visible scrollbars anywhere (scrolling still works: wheel, touch, keys) */
html, html * { scrollbar-width: none; }
html::-webkit-scrollbar, html *::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .btn, .ibtn, .tabs a, .seg a, .icon-btn, .more-menu a, .dl-row, .wbar { transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; }
}
a { color: inherit; text-decoration: none; }
a.link, .link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.2; }
h1 { font-size: 28px; letter-spacing: -0.01em; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
b, strong { font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: 13.5px; }
.num { font-variant-numeric: tabular-nums; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }   /* .card sets display:flex, which beats the browser's own [hidden] */

/* ---- buttons: neutral pill is the main one; ember is not a button colour ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; background: var(--surface-2); color: var(--ink); padding: 0 20px; border-radius: 999px; cursor: pointer; font-weight: 500; white-space: nowrap; }
.btn:hover { background: color-mix(in srgb, var(--surface-2) 86%, var(--ink)); }
.btn.primary { background: var(--primary); color: var(--on-primary); font-weight: 600; }
.btn.primary:hover { background: color-mix(in srgb, var(--primary) 88%, var(--bg)); }
.btn.ghost { background: none; color: var(--muted); padding: 0 14px; }
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
/* "Details": a quiet text button where an "i" circle used to be */
.ibtn { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-weight: 500; font-size: 14px; cursor: pointer; flex-shrink: 0; white-space: nowrap; }
.ibtn:hover { background: var(--surface-2); color: var(--ink); }
.ibtn svg { width: 16px; height: 16px; }
.empty { color: var(--muted); padding: 6px 0; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: inline-grid; place-items: center; padding: 0; flex-shrink: 0; }
.icon-btn:hover, .icon-btn[aria-expanded="true"] { color: var(--ink); background: var(--surface-2); }
.icon-btn svg { width: 22px; height: 22px; }

/* ---- top bar: one slim row (logo, tabs, search, theme, KyrosAI) ---- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top-in { max-width: var(--page-w); margin: 0 auto; padding: 0 24px; height: 56px; display: flex; align-items: center; gap: 8px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; white-space: nowrap; margin-right: 12px; min-width: 0; flex: 0 1 auto; overflow: hidden; padding: 0 14px; margin-left: -14px; }
.logo .mark, .mark { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle at 34% 30%, var(--amber), var(--ember) 52%, #7A2408 100%); box-shadow: 0 0 14px color-mix(in srgb, var(--ember) 40%, transparent); }
.logo .co { font-weight: 400; font-size: 14px; color: var(--muted); min-width: 0; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.logo .pill, .logo .mark { flex-shrink: 0; }
.pill { font-size: 13px; font-weight: 500; color: var(--muted); background: var(--surface-2); padding: 2px 10px; border-radius: 999px; }
/* flex 1 1 0: the tabs take what the logo and the right-hand tools leave; extra tabs are clipped (the script moves them to More) */
.tabs { display: flex; align-items: stretch; height: 100%; min-width: 0; flex: 1 1 0; overflow-x: clip; overflow-y: visible; }
.tabs a, .more-btn { padding: 0 12px; display: flex; gap: 6px; align-items: center; font-size: 14.5px; font-weight: 500; color: var(--muted); white-space: nowrap; position: relative; border: 0; background: none; cursor: pointer; }
.tabs a:hover, .more-btn:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); }
.tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--ember); border-radius: 2px; }
.n { background: var(--ember); color: var(--on-ember); font-size: 13px; font-weight: 600; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.top-r { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: 4px; }
.ask { position: relative; margin: 0 4px 0 0; }
.ask svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.ask input { width: 190px; min-height: 38px; padding: 0 14px 0 36px; border-radius: 999px; font-size: 14px; transition: width .2s; }
.ask input:focus { width: 290px; }
.inbox-btn { position: relative; }   /* the unread count sits on its corner */
.inbox-badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--ember); color: var(--on-ember); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; box-sizing: border-box; }
.kai-btn { min-height: 40px; padding: 0 16px 0 12px; margin-left: 4px; background: var(--ember); color: var(--on-ember); font-weight: 600; }
.kai-btn:hover { background: var(--brand-strong); }
.kai-btn .mark { width: 14px; height: 14px; box-shadow: none; background: radial-gradient(circle at 34% 30%, #FFE2B8, var(--on-ember) 90%); opacity: .55; }
.kai-btn[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ember); }
/* the "More" menu: the rarer tabs on a wide screen, every tab on a phone */
.more { position: relative; display: flex; align-items: center; }
.more-btn { height: 100%; }
.more-btn svg { width: 18px; height: 18px; }
.more-btn .more-t { display: inline; }
.more-menu { position: absolute; right: 0; top: calc(100% - 4px); min-width: 250px; max-height: calc(100vh - 80px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 8px; z-index: 30; display: flex; flex-direction: column; }
.more-menu a, .more-menu .m-row { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px; border-radius: 10px; color: var(--ink); font-size: 15px; }
.more-menu a:hover { background: var(--surface-2); }
.more-menu a[aria-current="page"] { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--ember); }
.more-menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; width: calc(100% - 8px); }
.more-menu .menu-search { display: none; margin: 4px 4px 8px; position: relative; }
.more-menu .menu-search input { width: 100%; padding-left: 36px; border-radius: 999px; }
.more-menu .menu-search svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--faint); }
.more-menu .m-row .btn { min-height: 36px; padding: 0 12px; }
/* Priority+ bar (script in base.html): the tabs that fit stay, the rest are copies in the More menu (.m-tab.show).
   Without the script (html:not(.pn)) the tabs are simply clipped and, on a phone, all of them live in the menu. */
.m-tab { display: none; }
.m-tab.show { display: flex; }
.top-in.no-ask .ask { display: none; }
.top-in.no-ask .menu-search { display: block; }
@media (max-width: 1500px) { html:not(.pn) .ask { display: none; } html:not(.pn) .more-menu .menu-search { display: block; } }
@media (max-width: 800px) {
  .top-in { padding: 0 12px 0 16px; }
  html:not(.pn) .tabs { display: none; } html:not(.pn) .m-tab { display: flex; }
  .more-btn .more-t { display: none; }
  .more-btn { width: 44px; justify-content: center; padding: 0; }
  .logo .pill { display: none; }
  .kai-btn { padding: 0 14px 0 10px; }
}
@media (max-width: 400px) { .kai-btn .mark { display: none; } .kai-btn { padding: 0 14px; } }

/* ---- page frame: a 28 px title and one muted line saying what the page tells you ---- */
.page { max-width: var(--page-w); margin: 0 auto; padding: 32px 24px 120px; display: flex; flex-direction: column; gap: 24px; }
.page-head { gap: 8px; }
/* Page-level action (the owner's "Edit factory" button, _edit_factory.html) on the title's line: a zero-height
   row, so it takes no space of its own and sits at the right of the h1 below it (the negative margin cancels the
   page's 24 px gap, so the title starts where it does on every other page). */
.page-actions { display: flex; justify-content: flex-end; height: 0; margin-bottom: -24px; position: relative; top: 4px; z-index: 1; }
.edit-factory { display: inline-flex; gap: 6px; align-items: center; }
.page-head { display: flex; flex-direction: column; gap: 6px; }
.lede { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; max-width: 64ch; }
.lede .badge { vertical-align: 1px; margin-left: 6px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 24px 28px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cond { background: var(--warn-soft); color: var(--ink); border-left: 3px solid var(--warn); border-radius: 12px; padding: 12px 16px; font-size: 15px; line-height: 1.55; max-width: 72ch; overflow-wrap: anywhere; }
.notice { border-radius: 12px; padding: 10px 14px; background: var(--surface-2); }
.notice.ok { border-left: 3px solid var(--ok); }
.notice.bad { border-left: 3px solid var(--bad); }
.badge { font-size: 13px; font-weight: 500; color: var(--ember-text); background: var(--ember-soft); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }

/* ---- tables: 48 px rows, hairlines between rows, no stripes ---- */
.tablewrap { overflow-x: auto; min-width: 0; max-width: 100%; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; font-variant-numeric: tabular-nums; }
th { text-align: left; font-weight: 500; color: var(--muted); font-size: 13.5px; padding: 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 12px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
td.wrap { white-space: normal; }
tr:has(.btn) td { vertical-align: middle; padding-top: 4px; padding-bottom: 4px; }   /* rows with a button: text centred on it */
@media (max-width: 800px) { .card :not(.tablewrap) > table:not(.cmp) { display: block; max-width: 100%; overflow-x: auto; } }   /* wide tables scroll inside their card, not clipped */
td.r, th.r { text-align: right; }
.best { color: var(--ok); font-weight: 600; }
.flag { color: var(--warn); font-weight: 600; }
.ok { color: var(--ok); font-weight: 600; }

/* ---- Decide: list | detail ---- */
.decide { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.dl { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 76px; }
.dl-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 12px; padding: 14px 14px; border-radius: 16px; cursor: pointer; }
.dl-row:hover { background: var(--surface); }
.dl-row[aria-current="true"] { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--ember); }
.dl-row input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--primary); cursor: pointer; }
.dl-row .t { font-weight: 600; }
.dl-row .a { grid-column: 2; font-size: 14px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.dl-row .a b { color: var(--ink); white-space: nowrap; font-weight: 600; }
.ctx { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 14.5px; color: var(--muted); }
.ctx b { color: var(--ink); font-weight: 600; }
.picks { display: flex; gap: 8px; flex-wrap: wrap; }
/* the choices are radio inputs inside .pick labels: the input is hidden, the label is the pill */
.pick { position: relative; background: transparent; box-shadow: inset 0 0 0 1px var(--line); border-radius: 999px; min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; }
.pick:hover { background: var(--surface-2); }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick:has(input:checked) { background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 600; }
.pick:has(input:checked)::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.pick:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.pick.off { opacity: .45; cursor: not-allowed; }
.bar-foot { position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); z-index: 9; padding-bottom: env(safe-area-inset-bottom, 0px); }
.bar-foot .in { max-width: var(--page-w); margin: 0 auto; padding: 12px 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.card-line { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin: 0; padding: 16px 0; border-top: 1px solid var(--line); }
.card-line:first-of-type { border-top: 0; padding-top: 4px; }
.card-line:last-of-type { padding-bottom: 4px; }
.card-line .what { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.card-line .who { font-size: 13.5px; color: var(--muted); }
.card-line .main { font-size: 16px; line-height: 1.45; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.card-line .more { font-size: 14.5px; line-height: 1.55; color: var(--muted); max-width: 68ch; white-space: pre-wrap; overflow-wrap: anywhere; }
.card-line .act { flex-wrap: nowrap; flex-shrink: 0; }
.row.quiet { gap: 4px; margin: 4px 0 0 -12px; }   /* quiet buttons: their text lines up with the text above */
/* Done lines: symbol in its own column, title in ink, the outcome muted underneath */
.done-line { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 0 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.done-line:first-of-type { border-top: 0; }
.done-line .sym { font-weight: 700; text-align: center; line-height: 1.5; }
.done-line .t { font-weight: 600; line-height: 1.5; }
.done-line .x { color: var(--muted); max-width: 68ch; overflow-wrap: anywhere; }

/* References (templates/_ref.html): id in ink at 600, its plain name muted, then two quiet 28px icon buttons
   ("i" = details drawer, speech bubble = Ask KyrosAI). Resting at half strength so they are findable without
   shouting; full strength on hover / focus; always shown on touch screens (no hover there). */
.ref { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 2px; vertical-align: baseline; }
.ref .rid { font-weight: 600; color: var(--ink); }
.ref .rn { font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }
.ref-acts { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; opacity: .5; transition: opacity .15s; }
.ref:hover .ref-acts, .ref:focus-within .ref-acts, .ref-acts:hover { opacity: 1; }
.ref-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font: italic 600 14px/1 Georgia, serif; cursor: pointer; }
.ref-btn:hover { background: var(--surface-2); color: var(--ink); }
.ref-btn:focus-visible { opacity: 1; outline: 2px solid var(--ember-text, currentColor); outline-offset: 1px; }
.ref-btn svg { width: 15px; height: 15px; }
@media (hover: none) { .ref-acts { opacity: 1; } }
h2 .ref .rid, .dl-row .ref .rid { font-weight: 600; }
.bd-id .ref-acts { display: none; } /* shift-board job rows are tight: the buttons live on the hover/focus state */
.bd-job:hover .bd-id .ref-acts, .bd-job:focus-within .bd-id .ref-acts { display: inline-flex; }
@media (hover: none) { .bd-id .ref-acts { display: inline-flex; } }
@media (max-width: 700px) { .card-line { flex-direction: column; gap: 12px; } .card-line .act { align-self: flex-end; } }

/* ---- comparison: ways to award as columns, money rows, best per row in green ---- */
.cmp th.col { text-align: right; color: var(--muted); font-size: 14.5px; font-weight: 500; }
/* the comparison must fit its card: text wraps (amounts have no spaces, so they never break) */
.cmp th, .cmp td { white-space: normal; padding-left: 10px; padding-right: 10px; }
.cmp th.col.on { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); }
.cmp td { color: var(--muted); }
.cmp td.on { color: var(--ink); }
.cmp td.best { color: var(--ok); }
.cmp td .sub { display: block; font-size: 13.5px; color: var(--muted); font-weight: 400; }
.cmp tr.sec td { font-size: 13.5px; font-weight: 500; color: var(--faint); padding-top: 16px; padding-bottom: 4px; border-bottom: 0; }
.cmp tr.total td { font-weight: 600; font-size: 16px; border-top: 1px solid var(--faint); color: var(--ink); }
.cmp tr.total td.best { color: var(--ok); }
.kpick { display: inline-block; font-size: 13px; font-weight: 500; color: var(--ember-text); background: var(--ember-soft); padding: 1px 9px; border-radius: 999px; margin-top: 4px; }

/* ---- purchases table: status is a dot + a word ---- */
tbody tr.click { cursor: pointer; }
tbody tr.click:hover td { background: var(--surface-2); }
.st { font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.st.late { color: var(--bad); } .st.late::before { background: var(--bad); }
.st.open { color: var(--warn); } .st.open::before { background: var(--warn); }
.st.done { color: var(--muted); } .st.done::before { background: var(--faint); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg a { padding: 0 16px; min-height: 36px; display: inline-flex; align-items: center; border-radius: 999px; font-weight: 500; color: var(--muted); }
.seg a[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); }
.filters select { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; min-height: 40px; }
.chev { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 32px; border-radius: 50%; color: var(--faint); }
.chev svg { width: 18px; height: 18px; }
tr.click:hover .chev { color: var(--ink); background: var(--surface-2); }

/* ---- info panel (Details): status, progress, messages, files, history ---- */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 20; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--surface); z-index: 21; overflow-y: auto; padding: 24px 24px calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 20px; box-shadow: var(--shadow); }
.drawer section { display: flex; flex-direction: column; gap: 8px; }
.drawer .lbl { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.msg { padding: 10px 14px; border-radius: 16px; background: var(--surface-2); font-size: 14.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.out { background: var(--ember-soft); }
.msg b { display: block; font-size: 13px; color: var(--ember-text); }
.msg i { display: block; font-style: normal; font-size: 13px; color: var(--muted); text-align: right; }
.file { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface-2); border-radius: 12px; min-height: 44px; }
.file:hover { background: color-mix(in srgb, var(--surface-2) 85%, var(--ink)); }
.file span:first-child { overflow-wrap: anywhere; }
.file span:first-child::before { content: "PDF"; font-size: 13px; font-weight: 600; color: var(--bad); margin-right: 8px; }
.file.img span:first-child::before { content: "Image"; color: var(--ember-text); }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.steps li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; padding: 6px 0; align-items: baseline; font-size: 14.5px; }
.steps li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); }
.steps li.todo::before { background: var(--line); }
.steps li.todo { color: var(--muted); }
.steps li .small { text-align: right; overflow-wrap: anywhere; }

/* ---- Overview ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }   /* wraps to fewer per row when the page is narrowed (KyrosAI panel open) */
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.tile .v { font-size: clamp(21px, 2.1vw, 28px); overflow-wrap: anywhere; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tile .k { color: var(--muted); font-size: 14px; }
.tile .v.late { color: var(--bad); }
.tile.empty .v { color: var(--muted); }   /* scorecard: no data yet is a quiet dash, never a zero */
.tile .sc-basis { font-size: 12.5px; line-height: 1.4; }
.sc-rank { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.card .tile { background: var(--surface-2); border: 0; border-radius: 16px; }   /* tiles inside a card: no box in a box */
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.bars { display: flex; flex-direction: column; gap: 14px; }
.bar { display: grid; grid-template-columns: 160px minmax(0, 1fr) 100px; gap: 12px; align-items: center; font-size: 14.5px; }
/* half-width cards: let names wrap so the numbers stay in view instead of scrolling off the card */
.two td:not(.r) { white-space: normal; }
.track { height: 8px; position: relative; background: var(--surface-2); border-radius: 999px; }
.fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--muted); border-radius: 999px; }
.bar .v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Setup ---- */
.setup { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
.subnav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 76px; }
.subnav a { padding: 0 14px; min-height: 44px; display: flex; align-items: center; border-radius: 12px; font-weight: 500; color: var(--muted); }
.subnav a:hover { color: var(--ink); background: var(--surface); }
.subnav a[aria-current="true"] { background: var(--surface-2); color: var(--ink); box-shadow: inset 3px 0 0 var(--ember); }
/* floor: a product's route as boxes left to right, the slowest one marked */
.route { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.route-name { font-weight: 600; }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.flow .box { display: inline-flex; flex-direction: column; background: var(--surface-2); border-radius: 12px; padding: 6px 12px; font-weight: 500; }
.flow .box.slow { box-shadow: inset 0 0 0 1px var(--warn); background: var(--warn-soft); }
.flow .tag { font-size: 13px; font-weight: 500; color: var(--warn); }
.flow .arrow { color: var(--faint); }

/* ---- narrow screens ---- */
@media (max-width: 960px) {
  .decide, .two, .setup { grid-template-columns: minmax(0, 1fr); }
  .dl, .subnav { position: static; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subnav { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .page, .bar-foot .in { padding-left: 16px; padding-right: 16px; }
  .page { padding-top: 24px; gap: 20px; }
  h1 { font-size: 24px; }
  .card { padding: 16px; border-radius: 16px; }
  .bar { grid-template-columns: 90px minmax(0, 1fr) 90px; }
  .card-line { flex-direction: column; align-items: stretch; }
  .bar-foot .in { gap: 8px; }
  .bar-foot .btn { flex: 1; }
}

/* ---- theme toggle: shows the moon in dark, the sun in light ---- */
.icon-btn .i-sun { display: none; }
:root[data-theme="light"] .icon-btn .i-sun { display: block; }
:root[data-theme="light"] .icon-btn .i-moon { display: none; }

/* ---- "Install the KyrosAI app" (kyros/static/install.js): login card + menu entry ---- */
[data-install][hidden], [data-install-hint][hidden] { display: none !important; }
.install-card { margin-top: 16px; }
.install-nav { display: inline-flex; align-items: center; gap: 6px; }


/* ---- What Kyros knows: sections without boxes, rows with quiet actions shown on hover (always on touch) ---- */
.k-sec { display: flex; flex-direction: column; gap: 4px; padding-top: 28px; border-top: 1px solid var(--line); min-width: 0; }
.k-sec:first-of-type { border-top: 0; padding-top: 4px; }
.k-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.k-item { padding: 12px 0; border-top: 1px solid var(--line); }
.k-item:first-of-type { border-top: 0; }
.k-actions { display: flex; gap: 4px; align-items: flex-start; flex-wrap: nowrap; justify-content: flex-end; opacity: 0; transition: opacity .15s; }
.k-item:hover .k-actions, .k-item:focus-within .k-actions, .k-actions:has(details[open]) { opacity: 1; }
@media (hover: none) { .k-actions { opacity: 1; } }
.k-actions .btn { min-height: 36px; font-size: 14px; }
.k-pop > summary { list-style: none; cursor: pointer; }
.k-pop > summary::-webkit-details-marker { display: none; }
.k-pop[open] > summary { color: var(--ink); }

/* ---- KyrosAI side panel (base.html): the phone app /app in a frame ---- */
:root { --kai-w: 420px; }   /* the KyrosAI panel's width: dragged in base.html (360 px to half the window) */
.kai-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--kai-w), 100%); z-index: 19; background: var(--bg); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.kai-resize { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 1; touch-action: none; }
.kai-resize::after { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 2px; background: transparent; transition: background-color .15s; }
.kai-resize:hover::after, .kai-resize:focus-visible::after, html.kai-resizing .kai-resize::after { background: var(--ember); }
.kai-resize:focus-visible { outline: none; }
html.kai-resizing, html.kai-resizing * { cursor: col-resize; user-select: none; }
html.kai-resizing .kai-panel iframe { pointer-events: none; }
@media (max-width: 699px) { .kai-resize { display: none; } }
.kai-panel[hidden] { display: none; }
.kai-head { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); min-height: 56px; }
.kai-head a { margin-left: auto; }
.kai-panel iframe { flex: 1; width: 100%; border: 0; }

/* ---- login: the first thing a visitor sees. Phones: one column (header, card). From 960 px: a calm brand
   panel on the left, the card on the right. Role tiles and the segmented AI choice are plain buttons and
   radios (no JS needed). ---- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 28px 16px; }
.login-brand { display: none; }
.login-box { width: min(440px, 100%); display: flex; flex-direction: column; gap: 22px; }
.login .big-mark, .login .mark-sm { display: inline-block; border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle at 34% 30%, var(--amber), var(--ember) 52%, #7A2408 100%); box-shadow: 0 0 24px color-mix(in srgb, var(--ember) 40%, transparent); }
.login .mark-sm { width: 26px; height: 26px; }
.login .big-mark { width: 44px; height: 44px; box-shadow: 0 0 40px color-mix(in srgb, var(--ember) 45%, transparent); }
.login .wordmark { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.lg-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lg-co { flex-basis: 100%; color: var(--muted); font-size: 14px; }
.login h2 { font-size: 20px; letter-spacing: -.01em; }
.login p { margin: 0; }
.login-form { display: flex; flex-direction: column; gap: 22px; }
.login-box form { display: flex; flex-direction: column; gap: 14px; }
.login label { font-weight: 500; }
.login input[name="code"], .login input[name="passcode"] { width: 100%; min-height: 48px; border: 1px solid var(--line); }
.passcode-field { display: flex; flex-direction: column; gap: 6px; }
.code-input { font-size: 22px; letter-spacing: .2em; }
.login .btn { width: 100%; min-height: 48px; }

/* role tiles */
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.role-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 92px; padding: 14px; text-align: left; cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; color: var(--ink); }
.role-tile:hover { background: var(--surface-2); border-color: var(--faint); }
.role-tile:active { transform: translateY(1px); }
.rt-name { font-weight: 600; font-size: 15px; }
.rt-desc { color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.role-tile:hover .rt-name { color: var(--ember-text); }

/* the AI choice: a segmented control over two real radios */
.ai-pick { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ai-pick legend { padding: 0; margin-bottom: 8px; color: var(--muted); font-size: 13.5px; font-weight: 500; }
.seg-ai { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 999px; }
.seg-ai label { position: relative; display: block; margin: 0; }
.seg-ai input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.seg-ai span { display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 999px; color: var(--muted); font-weight: 500; font-size: 14.5px; }
.seg-ai label:hover span { color: var(--ink); }
.seg-ai input:checked + span { background: var(--bg); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-3); }
.seg-ai label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 999px; }
.ai-help { display: none; }
.ai-pick:has(input[value="real"]:checked) .ai-help-real, .ai-pick:has(input[value="offline"]:checked) .ai-help-offline { display: block; }

/* divider and the phone field (+91 is shown only; the typed digits are what is sent) */
.or { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 13.5px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.phone-field { display: flex; align-items: stretch; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.phone-field:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.phone-field .cc { display: flex; align-items: center; padding: 0 4px 0 14px; color: var(--muted); font-weight: 500; }
.phone-field input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; min-height: 46px; padding-left: 8px; }

/* install: a quiet line */
.login .install-card { margin: 0; text-align: center; }
.linkbtn { background: none; border: 0; padding: 4px 2px; color: var(--ink); font-size: inherit; text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; cursor: pointer; }
.linkbtn:hover { text-decoration-color: var(--ink); }

@media (min-width: 960px) {
  .login { grid-template-columns: minmax(0, 480px) minmax(0, 440px); gap: 96px; justify-content: center; }
  .lg-head { display: none; }
  .login-box { padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
  .login-brand { display: flex; flex-direction: column; gap: 18px; }
  .lb-head { display: flex; align-items: center; gap: 14px; }
  .login-brand .wordmark { font-size: 28px; }
  .lb-co { color: var(--muted); margin: -8px 0 0; }
  .lb-line { font-size: 22px; line-height: 1.4; font-weight: 500; letter-spacing: -.01em; max-width: 26em; }
  .lb-points { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; color: var(--muted); }
  .lb-points li { position: relative; padding-left: 22px; }
  .lb-points li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--ember); }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (max-width: 1000px) { .c-rate { display: none; } }   /* purchases: the per-unit rate is the first column to go (the value says the same) */

/* ---- KyrosAI panel open on a wide screen: the whole page (top bar included) shrinks by the panel's width (--kai-w), so nothing sits under it;
   under 900 px it stays an overlay. The bar's priority+ script re-fits the tabs through its ResizeObserver. ---- */
@media (min-width: 900px) {
  html.kai-open body { padding-right: var(--kai-w); }
  html.kai-open .bar-foot { right: var(--kai-w); }
}

/* ---- Overview: tile tips and the folded "More numbers" ---- */
.tip { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 6px; border-radius: 50%; border: 1.5px solid var(--faint); color: var(--muted); font-size: 11px; font-weight: 600; cursor: help; vertical-align: 1px; position: relative; }
.tip:hover::after, .tip:focus::after { content: attr(data-tip); position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: min(260px, 70vw); background: var(--surface-2); color: var(--ink); border: 1px solid var(--faint); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; font-weight: 400; line-height: 1.4; text-align: left; box-shadow: var(--shadow); }
.tile:nth-child(4n+1) .tip:hover::after, .tile:nth-child(4n+1) .tip:focus::after { left: 0; transform: none; }
.tile:nth-child(4n) .tip:hover::after, .tile:nth-child(4n) .tip:focus::after { left: auto; right: 0; transform: none; }
.page-head + .tiles, .tiles + .two, .two + .morenums, .tiles + .morenums { margin-top: 16px; }
.morenums { margin-top: 16px; }
.morenums > summary { cursor: pointer; color: var(--muted); font-size: 14.5px; padding: 8px 0; }
.morenums[open] > summary { margin-bottom: 8px; }
.morenums .tiles { margin-bottom: 16px; }
@media (max-width: 720px) { .tile:nth-child(2n+1) .tip:hover::after, .tile:nth-child(2n+1) .tip:focus::after { left: 0; transform: none; right: auto; } .tile:nth-child(2n) .tip:hover::after, .tile:nth-child(2n) .tip:focus::after { left: auto; right: 0; transform: none; } }
.cmp th .sub { display: block; font-size: 12.5px; color: var(--muted); font-weight: 400; }
.cond.kpick-why { font-weight: 600; }