/* SmartKitchenDocs — manager console.
 *
 * Visual direction (2026-08-26): light, compact operations desk. The console
 * is read at arm's length in a back office, so page < card < control follows
 * a clear value hierarchy, figures remain tabular, and blue stays reserved
 * for navigation and the action that moves work forward.
 *
 * Semantic colour is reserved for outcomes. In particular steps are NOT
 * green: a procedure that has not been performed yet should not read as
 * already done — see the .step rules.
 */
:root{
  /* The brief's stable light operations tokens. */
  --bg:#f6f3ee; --panel:#ffffff; --panel2:#f8fafc; --panel3:#eef2f6;
  --ink:#1d2939; --dim:#526071; --accent:#1669a8; --warn:#9a6700; --bad:#b4233c;
  --line:#d0d5dd; --line2:#667085; --control-line:#667085; --faint:#5d6673;
  --accent-ink:#ffffff; --accent-soft:rgba(22,105,168,.10);
  --ok:#067647; --lock:#6941c6;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 8px 18px -12px rgba(16,24,40,.18);
  --radius:12px;
  --sans:"Fira Sans","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,sans-serif;
  --mono:"Fira Code",ui-monospace,SFMono-Regular,"Cascadia Mono",Consolas,monospace;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;color:var(--ink);font:14.5px/1.55 var(--sans);
  background:var(--bg)
    radial-gradient(1100px 520px at 50% -12%,rgba(22,105,168,.09),transparent 70%)
    no-repeat;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.015em}

/* Anything numeric — page numbers, KPI values, codes — gets the mono face
   with tabular figures so columns line up and digits stop jittering. */
.mono,.kpi .v,code{font-family:var(--mono);font-variant-numeric:tabular-nums}

button{font:inherit;cursor:pointer;border:none;border-radius:9px}
/* Text-entry controls only. `input` unqualified also matches checkboxes and
   radios, and width:100% turned the Onboarding roster's checkboxes into
   1026px-wide bars -- label text flung to the far edge, and the entire bar
   live as a hit target, so a click meant for a manual's title silently
   crossed that manual off. See input[type=checkbox] below. */
select,input:not([type=checkbox]):not([type=radio]),textarea{font:inherit;background:var(--panel2);color:var(--ink);
  border:1px solid var(--control-line);border-radius:9px;padding:10px 12px;width:100%;
  transition:border-color .18s ease,background .18s ease}
select:hover,input:not([type=checkbox]):not([type=radio]):hover,textarea:hover{border-color:var(--line2)}

/* Checkboxes size to themselves and stay next to their label. flex:none so a
   flex parent cannot stretch them again; 16px is comfortably clickable while
   the <label> wrapper keeps the text itself as the real hit area. */
input[type=checkbox],input[type=radio]{
  width:16px;height:16px;flex:none;margin:0;accent-color:var(--accent);cursor:pointer}
textarea{resize:vertical;min-height:96px}
/* :focus-visible, not :focus — a mouse click on a select should not leave a
   ring behind, but every keyboard path must show one. */
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:9px}
select:focus-visible,input:not([type=checkbox]):not([type=radio]):focus-visible,textarea:focus-visible{
  border-color:var(--accent);outline-offset:1px}
a{color:var(--accent);text-decoration-color:rgba(22,105,168,.35);
  text-underline-offset:2px}
a:hover{text-decoration-color:currentColor}
.wrap{max-width:1320px;margin:0 auto;padding:20px 22px 56px}

header.top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:13px 18px;background:linear-gradient(180deg,rgba(255,255,255,.9),transparent),var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.brand{font-size:16.5px;font-weight:700;letter-spacing:-.03em}
.brand span{color:var(--accent)}
.pill{font-size:10.5px;padding:3.5px 10px;border-radius:999px;background:var(--panel2);
  border:1px solid var(--line);color:var(--dim);letter-spacing:.02em;white-space:nowrap}
.spacer{flex:1}
.who{display:flex;align-items:center;gap:9px}
.who select{width:auto;min-width:170px}

.banner{margin:14px 0;padding:11px 14px;border-radius:10px;font-size:12.5px;
  color:#704b00;background:#fff8e8;border:1px solid #ebc46f}
.banner b{color:#5c3d00}
.banner.info{color:var(--dim);background:#eef7fc;border-color:#a9d6ef}
.banner.info b{color:var(--ink)}
.banner.bad{color:#8f1d35;background:#fff1f3;border-color:#f3a5b4}
.banner.bad b{color:#6e1026}
/* A standing caveat that never changes and is not actionable. It has to stay
   on screen (the names really are unverified) but it should not out-weigh
   the working surface below it, which is what a full-width banner did. */
.banner.quiet{font-size:11.5px;padding:8px 12px;color:var(--faint);
  background:transparent;border-color:var(--line);margin:12px 0}
.banner.quiet b{color:var(--dim);font-weight:600}

/* Tabs as one segmented control rather than six free-floating buttons: the
   set reads as a single switch, and the active state is a soft fill instead
   of a saturated block competing with the primary action. */
nav.tabs{display:flex;gap:3px;margin:14px 0 16px;flex-wrap:wrap;
  padding:4px;background:var(--panel);border:1px solid var(--line);
  border-radius:11px;width:fit-content;max-width:100%}
nav.tabs button{background:transparent;color:var(--dim);padding:8px 15px;
  border:1px solid transparent;border-radius:8px;font-weight:500;
  transition:background .18s ease,color .18s ease}
nav.tabs button:hover{color:var(--ink);background:var(--panel2)}
nav.tabs button.on{background:var(--accent-soft);color:var(--accent);
  border-color:rgba(22,105,168,.32);font-weight:600}

.card{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card+.card{margin-top:14px}
/* Several views reserve a card as a status/error slot (#logStatus,
   #planStatus, #rosterStatus) and leave it empty when there is nothing to
   report. Empty, it still painted a bordered box — on the Log tab that was a
   blank panel sitting above the KPIs. An empty container should occupy no
   space rather than each view having to remember to hide its own. */
.card:empty{display:none}
.card h3{font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--faint);margin-bottom:14px;font-weight:600}
.cols{display:grid;grid-template-columns:minmax(330px,400px) 1fr;gap:18px;align-items:start}
@media(max-width:980px){.cols{grid-template-columns:1fr}}

label.lab{display:block;font-size:12px;color:var(--dim);margin:15px 0 6px;font-weight:500}
label.lab:first-child{margin-top:0}
.btn{background:var(--accent);color:var(--accent-ink);padding:11px 17px;font-weight:600;
  width:auto;letter-spacing:-.005em;transition:filter .18s ease,transform .12s ease}
.btn:hover:not(:disabled){filter:brightness(1.09)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.sec{background:var(--panel2);color:var(--ink);border:1px solid var(--line)}
.btn.sec:hover:not(:disabled){background:var(--panel3);filter:none}
.btn.ok{background:var(--ok);color:#fff}
.btn.bad{background:var(--bad);color:#fff}
.btn.block{width:100%}
.row{display:flex;gap:8px}
.row>*{flex:1;min-width:0}

/* A step is an instruction that has NOT been carried out yet. The old rule
   washed every step in success-green, so a procedure the cook had not
   started already looked finished. Neutral card; the accent lives only in
   the numeral, which is what you scan for when you lose your place. */
.step{background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;padding:13px 14px;margin-bottom:9px}
.step:last-child{margin-bottom:0}
/* .step.ok is the ordinary state and is kept as a no-op so existing markup
   (and the mobile/web parity tests that assert on it) keeps working. There
   is deliberately no .step.hazard variant: a hazard step is a normal,
   actionable step plus a chip — it must never read as disabled or locked
   out. See web/views/ask.js. */
.step .hd{display:flex;gap:11px;align-items:flex-start}
.step .n{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-soft);
  border-radius:6px;min-width:24px;height:22px;display:inline-flex;
  align-items:center;justify-content:center;flex:none;margin-top:1px}
.step .txt{flex:1;line-height:1.55;overflow-wrap:anywhere}
.tag{font-size:10px;font-weight:600;letter-spacing:.05em;padding:3px 8px;border-radius:5px;
  text-transform:uppercase;white-space:nowrap}
.tag.ok{background:#e7f6ee;color:var(--ok)}
.tag.hazard{background:#fff0f2;color:var(--bad);border:1px solid #f3a5b4}
.tag.unverified{background:#fff8e8;color:var(--warn)}
.cites{margin-top:9px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
/* Only INSIDE a step does the citation row hang under the text column — the
   answer-level citation list at the bottom is not indented under anything. */
.step .cites{margin-left:35px}
.cites:empty{display:none}
.cite{font-size:11px;color:var(--dim);text-decoration:none;
  background:var(--panel3);border:1px solid var(--line);
  padding:3px 8px;border-radius:5px;transition:color .18s ease,border-color .18s ease}
.cite:hover{color:var(--accent);border-color:rgba(22,105,168,.4)}
.cite .p{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:10.5px;color:var(--faint);margin-left:5px}
.cite:hover .p{color:var(--accent)}
/* The answer-level source list. Labelled, because unlabelled it reads as a
   second copy of the per-step citations rather than "every page consulted". */
.sources{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.sources .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--faint);font-weight:600;margin-bottom:7px}
.hazardBanner{background:#fff1f3;border:1px solid #f3a5b4;
  border-radius:8px;padding:9px 11px;margin-top:9px;font-size:12px;color:#8f1d35}
.hazardBanner b{color:#6e1026}
.proBanner{background:#eef7fc;border:1px solid #a9d6ef;
  border-radius:10px;padding:13px 15px;margin-bottom:14px}
.proBanner h4{margin:0 0 4px;color:var(--accent);font-size:13px;font-weight:600}
.acts{display:flex;gap:7px;margin-top:11px}
.acts button{flex:1;font-size:12px;padding:9px}

.prose{background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  padding:14px;font-size:13.5px;line-height:1.6}

/* The "nothing here yet" state. It is the first thing a manager sees on the
   Ask tab, so it gets a centered, deliberate treatment rather than a bare
   sentence pinned to the top-left of an empty box. */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;min-height:190px;text-align:center;color:var(--faint);padding:24px}
.empty svg{width:26px;height:26px;stroke:currentColor;fill:none;
  stroke-width:1.5;opacity:.5}
.empty .t{color:var(--dim);font-size:13.5px}

table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;color:var(--faint);font-weight:600;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.08em;padding:8px;border-bottom:1px solid var(--line)}
td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:none}
tr:hover td{background:#f5f9fc}
.res{font-size:10.5px;font-weight:600;padding:2.5px 8px;border-radius:5px;white-space:nowrap}
.res.self{background:#e7f6ee;color:var(--ok)}
.res.contracted{background:#fff0f2;color:var(--bad)}
.res.open{background:#fff8e8;color:var(--warn)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.kpi{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:14px}
.kpi .v{font-size:25px;font-weight:600;letter-spacing:-.03em;line-height:1.15}
.kpi .l{font-size:10.5px;color:var(--faint);text-transform:uppercase;
  letter-spacing:.08em;margin-top:5px}
.kpi .s{font-size:11px;color:var(--dim);margin-top:4px}

.muted{color:var(--dim);font-size:12.5px}
.tiny{font-size:11px;color:var(--faint)}
.hide{display:none}
.spin{display:inline-block;width:13px;height:13px;border:2px solid var(--line);
  border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}

.selfAsserted{font-size:10.5px;color:var(--faint);font-style:italic}

.centerCard{max-width:420px;margin:64px auto}
.gap{height:8px}

/* Motion here is decoration, never the only signal that something changed —
   the spinner has a static border, tabs change colour as well as position.
   So it is all safe to drop outright. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

@media(max-width:640px){
  .wrap{padding:12px 12px 36px}
  header.top{align-items:stretch;padding:12px;gap:10px}
  .spacer{display:none}
  .who{width:100%;order:3}
  .who input{min-width:0!important;flex:1}
  .btn.sec{margin-left:auto}
  nav.tabs{width:100%;flex-wrap:wrap;padding:4px}
  nav.tabs button{flex:1 1 30%;min-width:100px;padding:9px 12px}
  .card{padding:14px}
  .row,.acts{flex-direction:column}
  .centerCard{margin:28px auto}
  .step .cites{margin-left:0}
  table{display:block;overflow-x:auto;white-space:nowrap}
}