/* ============================================================================
   KAIZO — V3 DESIGN SYSTEM · "kaizo-ds"
   Evidence-based (see v3/research/ux-evidence.md — every choice cites research):
   two density modes, frontline touch targets, IBCS chart notation, light-first
   high-contrast, 100/220/320ms ease-out motion, WCAG 2.2 AA floor.
   Offline, dependency-free. Inline verbatim into each single-file app.
   ============================================================================ */

/* ---- Reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{color:inherit;text-decoration:none}
::selection{background:var(--brand-soft);color:var(--ink)}

/* Focus: 2px visible ring, never obscured by sticky chrome (WCAG 2.4.7/2.4.11) */
:focus-visible{outline:2px solid var(--brand-d);outline-offset:2px;border-radius:4px}
[id]{scroll-margin-top:84px}

/* ---- Tokens --------------------------------------------------------------- */
:root{
  /* Brand — Kaizo graphite + amber */
  --brand:#f5a417; --brand-d:#b97e00; --brand-l:#f7b84a; --brand-soft:#fdefcf;
  --ink:#14171c; --ink-2:#2b313d; --fg:#1c2126; --fg-2:#3a424c;
  --mut:#5f6a76; --mut-2:#8b95a1; --faint:#a7b0ba;
  --paper:#f2f3f5; --surface:#ffffff; --surface-2:#f7f8fa;
  --line:#e2e6ea; --line-2:#edf0f3; --line-strong:#cfd5dc;

  /* Semantic state — EXCLUSIVELY for state, never decoration (rule 8) */
  --ok:#0e7a4a; --ok-soft:#d9f0e4; --warn:#a36a00; --warn-soft:#fbeed0;
  --bad:#c23a26; --bad-soft:#fadfd9; --info:#245fb8; --info-soft:#dde8f9;

  /* IBCS-lite data notation — one meaning suite-wide (rule 8) */
  --data-actual:#2b313d;      /* solid graphite bars/lines = actuals */
  --data-prior:#9aa3ae;       /* grey = prior period */
  --data-target:#14171c;      /* target = outline/tick, drawn not filled */
  --data-forecast-fill:repeating-linear-gradient(45deg,#c9cfd6 0 4px,#e9edf1 4px 8px); /* hatched */
  --var-good:#0e7a4a; --var-bad:#c23a26;

  /* Money is a highlight, not a state colour */
  --money:#0e7a4a; --money-soft:#d9f0e4;

  /* Elevation — flat, opaque, subtle (anti-pattern 9: no glassmorphism) */
  --sh-1:0 1px 2px rgba(20,23,28,.07),0 1px 3px rgba(20,23,28,.05);
  --sh-2:0 3px 8px rgba(20,23,28,.09),0 6px 18px rgba(20,23,28,.07);
  --sh-pop:0 12px 36px rgba(20,23,28,.17);

  /* Geometry */
  --r-xs:6px; --r-sm:9px; --r:12px; --r-lg:16px; --r-full:999px;

  /* Spacing — 8px grid, 4px half-step (Carbon/Atlassian) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:40px; --s8:48px; --s9:64px; --s10:80px;

  /* Type — presbyopia-aware floor (rule 23): nothing under 13px, body 15.5+ */
  --sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --fs-meta:13px; --fs-body:15.5px; --fs-sub:18px; --fs-sec:22px; --fs-kpi:36px; --fs-kpi-lg:44px;

  /* Motion — 100/220/320 ease-out, nothing >400ms (rule 19) */
  --dur-fast:100ms; --dur-med:220ms; --dur-slow:320ms;
  --ease:cubic-bezier(.22,1,.36,1);

  /* Touch — dual hit tokens (rule 1) */
  --hit-floor:60px;   /* frontline primary actions */
  --hit:44px;         /* general interactive */
  --hit-dense:32px;   /* desktop dense tables */

  --maxw:1200px;
}

/* Density modes — one token set, two densities (UX report Part 2) */
:root, [data-density="comfortable"]{ --row-h:56px; --cell-py:14px; --hit-row:var(--hit); }
[data-density="dense"]{ --row-h:38px; --cell-py:8px; --hit-row:var(--hit-dense); }

/* Optional dark theme — opt-in only, NEVER default (anti-pattern 15) */
[data-theme="dark"]{
  --paper:#101318; --surface:#181c23; --surface-2:#1f242c;
  --ink:#f2f4f7; --ink-2:#d5dae1; --fg:#e8ebef; --fg-2:#c3cad3;
  --mut:#96a0ac; --mut-2:#78828e; --faint:#5d6773;
  --line:#2a303a; --line-2:#232831; --line-strong:#3a4250;
  --brand-soft:#3a3524; --ok-soft:#173527; --warn-soft:#3a2f16; --bad-soft:#3b201a; --info-soft:#1a2a44;
  --data-actual:#c9d1da; --data-prior:#5d6773; --data-target:#f2f4f7;
  --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 3px 10px rgba(0,0,0,.5); --sh-pop:0 12px 36px rgba(0,0,0,.6);
}

/* ---- Base ----------------------------------------------------------------- */
body{font-family:var(--sans);font-size:var(--fs-body);line-height:1.5;color:var(--fg);background:var(--paper)}
h1,h2,h3,h4{line-height:1.15;letter-spacing:-.02em;color:var(--ink);font-weight:750}
h1{font-size:clamp(26px,3.6vw,36px);letter-spacing:-.025em}
h2{font-size:var(--fs-sec)} h3{font-size:var(--fs-sub)} h4{font-size:var(--fs-body);font-weight:700}
p{max-width:65ch} /* rule 25 — prose measure; tables/boards exempt via .wide */
.wide{max-width:none}
.num,.tnum{font-variant-numeric:tabular-nums lining-nums}
.mono{font-family:var(--mono)}
.mut{color:var(--mut)} .meta{font-size:var(--fs-meta);color:var(--mut)}
.eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-d)}
.kpi-display{font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.03em;line-height:1;font-size:var(--fs-kpi);color:var(--ink)}

/* Frontline surface: bigger type + targets (rules 22–23) */
[data-context="floor"]{--fs-body:18px;--fs-meta:14px;--hit:var(--hit-floor)}
[data-context="floor"] .btn{min-height:var(--hit-floor);font-size:18px}
[data-context="floor"] .input{min-height:var(--hit-floor);font-size:18px}

/* ---- Layout --------------------------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,3vw,32px)}
.row{display:flex;align-items:center;gap:var(--s3)}
.row.wr{flex-wrap:wrap}
.between{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.col{display:flex;flex-direction:column}
.grid{display:grid;gap:var(--s4)}
.spacer{flex:1}
.hide{display:none!important}

/* ---- App chrome: left sidebar (desktop) + bottom tabs (mobile) — rule 5 ---- */
.shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.siderail{background:var(--surface);border-right:1px solid var(--line);padding:var(--s4) var(--s3);
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:var(--s1)}
.siderail .brandrow{display:flex;align-items:center;gap:10px;padding:6px 10px 16px}
.navitem{display:flex;align-items:center;gap:11px;padding:0 12px;min-height:var(--hit);border-radius:var(--r-sm);
  font-weight:600;color:var(--mut);transition:background var(--dur-fast),color var(--dur-fast)}
.navitem:hover{background:var(--surface-2);color:var(--fg)}
.navitem.on{background:var(--brand-soft);color:var(--ink)}
.navitem .ic{width:22px;text-align:center;font-size:17px}
.main{min-width:0;padding:var(--s5) clamp(16px,3vw,36px) 96px}
.tabbar{display:none}
@media(max-width:767px){
  .shell{grid-template-columns:1fr}
  .siderail{display:none}
  .topctx #kzTabs{display:none} /* mobile uses the bottom tabbar; no redundant inline row */
  .topctx #kzCta{display:none}  /* the bottom tabbar's + is the mobile primary action */
  .main{padding:var(--s4) var(--s4) 96px;overflow-x:clip} /* page never scrolls sideways; wide content uses .scroll-x */
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--surface);
    border-top:1px solid var(--line);padding:6px max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-bottom));
    justify-content:space-around}
  .tabbar .titem{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1 1 0;min-width:0;
    min-height:var(--hit-floor);justify-content:center;border-radius:var(--r-sm);font-size:11.5px;font-weight:700;color:var(--mut);padding:4px 4px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tabbar .titem.cta{flex:0 0 auto}
  .tabbar .titem.on{color:var(--ink);background:var(--brand-soft)}
  .tabbar .titem .ic{font-size:21px}
  .tabbar .titem.cta{background:var(--ink);color:#fff;border-radius:var(--r);transform:translateY(-10px);
    box-shadow:var(--sh-2);min-width:64px;min-height:64px}
  /* The header is a no-wrap flex row: on a phone its title + site picker + inbox +
     guide + demo badge summed WIDER than the viewport and pushed the whole document
     sideways (every page scrolled horizontally). Collapse the labels to their icons,
     let the title ellipsis, and allow the row to wrap as a backstop. */
  .topctx{flex-wrap:wrap;row-gap:6px;padding-top:8px;padding-bottom:8px}
  .topctx h1{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topctx .lbl{display:none}            /* "How to run this", "incoming", "Demo data" → icon only */
  #kzCtxSite{max-width:118px}
}
.topctx{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--line);
  min-height:60px;display:flex;align-items:center;gap:var(--s3);padding:0 clamp(14px,2.5vw,28px)}

/* ---- Buttons — min heights honour hit tokens ------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:650;font-size:14.5px;
  line-height:1;padding:0 18px;min-height:var(--hit);border-radius:var(--r-sm);border:1px solid transparent;
  transition:background var(--dur-fast),border-color var(--dur-fast),box-shadow var(--dur-fast),transform var(--dur-fast);
  white-space:nowrap;user-select:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-primary:hover{background:var(--ink-2)}
.btn-brand{background:var(--brand);color:var(--ink);border-color:var(--brand-d);font-weight:700}
.btn-brand:hover{filter:brightness(1.05)}
.btn-ghost{background:var(--surface);color:var(--fg);border-color:var(--line-strong);box-shadow:var(--sh-1)}
.btn-ghost:hover{border-color:var(--mut-2);background:var(--surface-2)}
.btn-soft{background:var(--brand-soft);color:var(--ink)}
.btn-quiet{color:var(--mut);min-height:36px;padding:0 12px}
.btn-quiet:hover{color:var(--fg);background:var(--line-2)}
.btn-danger{background:var(--bad);color:#fff;border-color:var(--bad)}
.btn-ok{background:var(--ok);color:#fff;border-color:var(--ok)}
.btn-sm{min-height:34px;padding:0 12px;font-size:13.5px;border-radius:var(--r-xs)}
.btn-lg{min-height:var(--hit-floor);padding:0 26px;font-size:16.5px;border-radius:var(--r)}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn-icon{min-width:var(--hit);min-height:var(--hit);padding:0;border-radius:var(--r-sm);color:var(--mut)}
.btn-icon:hover{background:var(--line-2);color:var(--fg)}

/* ---- Cards / panels -------------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.card-pad{padding:var(--s5)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--line-2)}
.card-head h3{font-size:16px}

/* ---- KPI card: label + value + Δ + sparkline (rule 9) ---------------------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s3)}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4) var(--s4) var(--s3);
  display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:box-shadow var(--dur-fast),border-color var(--dur-fast)}
.kpi:hover{box-shadow:var(--sh-2);border-color:var(--line-strong)}
.kpi .k-label{font-size:var(--fs-meta);font-weight:650;color:var(--mut)}
.kpi .k-row{display:flex;align-items:baseline;gap:10px}
.kpi .k-val{font-variant-numeric:tabular-nums;font-size:var(--fs-kpi);font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1}
.kpi .k-delta{font-size:13px;font-weight:750;font-variant-numeric:tabular-nums}
.kpi .k-delta.good{color:var(--var-good)} .kpi .k-delta.bad{color:var(--var-bad)}
.kpi .k-spark{margin-top:2px;height:30px}

/* ---- Bullet chart (KPI vs target — replaces every gauge/donut, rule 7) ----- */
.bullet{display:grid;grid-template-columns:minmax(90px,150px) 1fr 72px;align-items:center;gap:var(--s3);
  min-height:34px;font-size:13.5px}
.bullet .b-label{font-weight:650;color:var(--fg-2);text-align:right}
.bullet .b-track{position:relative;height:18px;background:var(--line-2);border-radius:4px;overflow:visible}
.bullet .b-band{position:absolute;top:0;bottom:0;background:var(--line);border-radius:4px}
.bullet .b-bar{position:absolute;top:4px;bottom:4px;left:0;background:var(--data-actual);border-radius:2px;
  transition:width var(--dur-slow) var(--ease)}
.bullet .b-target{position:absolute;top:-3px;bottom:-3px;width:2.5px;background:var(--data-target)}
.bullet .b-val{font-variant-numeric:tabular-nums;font-weight:750;text-align:right}

/* ---- Pills / status -------------------------------------------------------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:4px 11px;
  border-radius:var(--r-full);background:var(--line-2);color:var(--fg-2);white-space:nowrap}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)} .pill.info{background:var(--info-soft);color:var(--info)}
.pill.brand{background:var(--brand-soft);color:var(--ink)}
/* status always colour + glyph, never colour alone (rule 22) */
.pill.ok::before{content:"✓"} .pill.warn::before{content:"!"} .pill.bad::before{content:"✕"}

/* ---- Inputs ----------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s4)}
.field>label{font-size:var(--fs-meta);font-weight:700;color:var(--fg-2)} /* real labels, never placeholder-as-label */
.input,select.input,textarea.input{width:100%;background:var(--surface);border:1.5px solid var(--line-strong);
  border-radius:var(--r-sm);padding:0 14px;min-height:var(--hit);font-size:var(--fs-body);color:var(--fg);
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
textarea.input{padding:12px 14px;min-height:88px;line-height:1.5;resize:vertical}
.input::placeholder{color:var(--faint)}
.input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--brand-soft)}
.input.err{border-color:var(--bad)}
.field .err-msg{font-size:13px;color:var(--bad);font-weight:600}
.seg{display:inline-flex;background:var(--line-2);border-radius:var(--r-sm);padding:3px;gap:2px;
  max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{flex:0 0 auto;min-height:calc(var(--hit) - 10px);padding:0 14px;border-radius:var(--r-xs);font-size:13.5px;font-weight:650;color:var(--mut);white-space:nowrap}
/* any wide table/grid uses this to scroll inside its own box, never the page (rule: no page h-scroll) */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.stepper{display:inline-flex;align-items:center;gap:0;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);overflow:hidden}
.stepper button{min-width:var(--hit);min-height:var(--hit);font-size:20px;font-weight:700;color:var(--fg-2)}
.stepper button:hover{background:var(--line-2)}
.stepper .stv{min-width:64px;text-align:center;font-variant-numeric:tabular-nums;font-weight:750;font-size:16px}

/* ---- Table — density-aware ------------------------------------------------- */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:left;font-size:12px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;
  color:var(--mut);padding:10px 12px;border-bottom:1.5px solid var(--line);white-space:nowrap}
.table td{padding:var(--cell-py) 12px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.table tbody tr{height:var(--row-h)}
.table tbody tr:hover{background:var(--surface-2)}
.table td.num,.table th.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---- Drawer / modal / toast ------------------------------------------------- */
.scrim{position:fixed;inset:0;background:rgba(16,19,24,.45);opacity:0;pointer-events:none;
  transition:opacity var(--dur-med);z-index:80}
.scrim.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(540px,96vw);background:var(--surface);box-shadow:var(--sh-pop);
  transform:translateX(102%);transition:transform var(--dur-med) var(--ease);z-index:81;display:flex;flex-direction:column}
.drawer.show{transform:none}
.drawer.wide{width:min(760px,96vw)}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-47%);opacity:0;pointer-events:none;
  width:min(520px,94vw);max-height:88vh;overflow:auto;background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-pop);z-index:82;transition:opacity var(--dur-med),transform var(--dur-med) var(--ease)}
.modal.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
.toast-wrap{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);
  z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{display:flex;align-items:center;gap:12px;background:var(--ink);color:#fff;padding:12px 18px;
  border-radius:var(--r);font-size:14px;font-weight:600;box-shadow:var(--sh-pop);
  transform:translateY(14px);opacity:0;transition:transform var(--dur-med) var(--ease),opacity var(--dur-med);
  pointer-events:auto}
.toast.show{transform:none;opacity:1}
.toast.bad{background:var(--bad)}
.toast .undo-btn{background:rgba(255,255,255,.16);border-radius:var(--r-xs);padding:6px 12px;font-weight:750;color:#fff;min-height:32px}
.toast .undo-btn:hover{background:rgba(255,255,255,.28)}

/* ---- Success moment — ONE restrained beat, no confetti (rule 20) ----------- */
.winmark{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--ok-soft);color:var(--ok);font-size:22px;font-weight:800;
  animation:winpop var(--dur-slow) var(--ease) both}
@keyframes winpop{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}

/* ---- Avatar / people -------------------------------------------------------- */
.av{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:12.5px;
  font-weight:750;color:#fff;background:var(--ink-2);flex:none}
.av-lg{width:52px;height:52px;font-size:17px}
/* tap-your-face switcher grid (rule 6) */
.who-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--s3)}
.who-grid button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:var(--s3);
  border:1.5px solid var(--line);border-radius:var(--r);min-height:104px;background:var(--surface)}
.who-grid button:hover{border-color:var(--brand-d);background:var(--brand-soft)}

/* ---- Empty state ------------------------------------------------------------ */
.empty{text-align:center;padding:var(--s8) var(--s5);color:var(--mut)}
.empty .e-ico{width:56px;height:56px;margin:0 auto var(--s3);border-radius:var(--r);display:grid;place-items:center;
  background:var(--brand-soft);color:var(--ink);font-size:26px}
.empty h4{color:var(--fg);margin-bottom:4px}
.empty p{margin:0 auto}

/* ---- Draft-resume chip (rule 4) --------------------------------------------- */
.draft-chip{display:inline-flex;align-items:center;gap:10px;background:var(--info-soft);color:var(--info);
  border:1px solid currentColor;border-radius:var(--r-full);padding:8px 16px;font-size:13.5px;font-weight:650}

/* ---- Motion discipline ------------------------------------------------------- */
.fade-in{animation:fadein var(--dur-med) var(--ease) both}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;transition-duration:1ms!important}
}

/* ---- Print ------------------------------------------------------------------- */
@media print{
  @page{margin:12mm}
  .siderail,.tabbar,.topctx,.btn,.toast-wrap,.no-print{display:none!important}
  body{background:#fff}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
}

/* ---- Scrollbars ---------------------------------------------------------------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;border:3px solid var(--paper)}