/* T783 phase D: the buying tool's design system. One token layer; every component below uses only these tokens.
   Reference: Apple Human Interface Guidelines (the system font, a clear type scale, generous spacing, one accent).
   The record: agency/scripts/finance/buying/DESIGN.md. */
:root{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fs-xs:12px;--fs-sm:13px;--fs-md:15px;--fs-lg:17px;--fs-xl:20px;--fs-2xl:24px;--fs-3xl:30px;
  --lh:1.45;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;
  --r-sm:8px;--r:12px;--r-lg:16px;--r-pill:999px;
  --bg:#f5f5f7;--surface:#ffffff;--surface-2:#fafafc;--line:#e3e3e8;--line-2:#d1d1d6;
  --text:#1d1d1f;--text-2:#4a4a4f;--text-3:#636366;
  --accent:#0b6e4f;--accent-hover:#095c42;--accent-soft:#e6f2ed;--on-accent:#ffffff;
  --late:#b3261e;--late-soft:#fdecea;--soon:#8a4b00;--soon-soft:#fff3e0;--fine:#1b6b37;--fine-soft:#e8f5ec;--info:#0a58b3;--info-soft:#e8f0fb;
  --focus:#0a58b3;
  --shadow-1:0 1px 2px rgba(0,0,0,.06),0 1px 1px rgba(0,0,0,.04);
  --shadow-2:0 8px 28px rgba(0,0,0,.14);
  --scrim:rgba(17,17,20,.55);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:var(--fs-md)/var(--lh) var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
main{max-width:1280px;margin:0 auto;padding:var(--sp-5) var(--sp-5) var(--sp-7)}
h1{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.01em;margin:0}
h2{font-size:var(--fs-xl);font-weight:650;margin:var(--sp-6) 0 var(--sp-3)}
h3{font-size:var(--fs-lg);font-weight:600;margin:0}
p{margin:0 0 var(--sp-3)}
a{color:var(--info)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--text-2)}.small{font-size:var(--fs-sm)}.xs{font-size:var(--fs-xs)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:44px;padding:0 var(--sp-4);border-radius:var(--r-sm);border:1px solid transparent;font:600 var(--fs-md) var(--font);cursor:pointer;background:var(--accent);color:var(--on-accent);text-decoration:none}
.btn:hover{background:var(--accent-hover)}
.btn.secondary{background:var(--surface);color:var(--text);border-color:var(--line-2)}
.btn.secondary:hover{background:var(--surface-2)}
.btn.ghost{background:transparent;color:var(--accent);border-color:transparent;padding:0 var(--sp-3)}
.btn.ghost:hover{background:var(--accent-soft)}
.btn.small{min-height:44px;font-size:var(--fs-sm);padding:0 var(--sp-3)}

/* header and navigation */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.brand{display:flex;flex-direction:column;gap:2px}
.status{display:inline-flex;align-items:center;gap:var(--sp-2)}
nav.tabs{display:flex;gap:var(--sp-1);flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-1);margin-bottom:var(--sp-5);box-shadow:var(--shadow-1)}
nav.tabs button{flex:1 1 auto;min-height:44px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-2);font:600 var(--fs-md) var(--font);padding:0 var(--sp-4);cursor:pointer}
nav.tabs button[aria-selected=true]{background:var(--accent);color:var(--on-accent)}
nav.tabs .count{display:inline-block;min-width:22px;margin-left:6px;padding:0 6px;border-radius:var(--r-pill);background:var(--late-soft);color:var(--late);font-size:var(--fs-xs)}
nav.tabs button[aria-selected=true] .count{background:var(--surface);color:var(--accent)}

/* cards and summary tiles */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--shadow-1);margin-bottom:var(--sp-4)}
.card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-3);margin-bottom:var(--sp-5)}
.kpi{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-1);text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow-1);cursor:pointer;font:inherit;color:inherit;min-height:44px}
.kpi:hover{border-color:var(--line-2)}
.kpi .n{font-size:var(--fs-3xl);font-weight:700;line-height:1.1}
.kpi.late .n{color:var(--late)}.kpi.soon .n{color:var(--soon)}.kpi.fine .n{color:var(--fine)}
/* T796d: the stock value from Exact and its value or units switch */
.sv-total{font-size:var(--fs-3xl);font-weight:700;line-height:1.1;margin:var(--sp-3) 0 var(--sp-2)}
.sv-sub{font-size:var(--fs-md);font-weight:600;margin:var(--sp-4) 0 var(--sp-2)}
.btn.secondary[aria-pressed=true]{border-color:var(--accent);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
#stock-ring{margin-top:var(--sp-3)}
.lead{font-size:var(--fs-lg);color:var(--text-2);margin:var(--sp-2) 0 var(--sp-4)}

/* badges */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:600;background:var(--surface-2);color:var(--text-2);border:1px solid var(--line);white-space:nowrap;max-width:100%}
.chips .badge{white-space:normal}
.chips .btn{white-space:normal;min-width:0;overflow-wrap:anywhere;text-align:left}
.badge.late{background:var(--late-soft);color:var(--late);border-color:transparent}
.badge.soon{background:var(--soon-soft);color:var(--soon);border-color:transparent}
.badge.fine{background:var(--fine-soft);color:var(--fine);border-color:transparent}
.badge.info{background:var(--info-soft);color:var(--info);border-color:transparent}

/* toolbars and fields */
.toolbar{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-3)}
.field{min-height:44px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);color:var(--text);font:var(--fs-md) var(--font);padding:0 var(--sp-3)}
input.field[type=search]{flex:1 1 240px}
.check{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;color:var(--text-2)}
.check input{width:20px;height:20px;accent-color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}

/* tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:var(--fs-md)}
th,td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line);text-align:right;vertical-align:middle;white-space:nowrap}
th:first-child,td:first-child{text-align:left;white-space:normal;min-width:200px}
td.txt,th.txt{text-align:left;white-space:normal}
thead th{position:sticky;top:0;background:var(--surface-2);font-size:var(--fs-sm);font-weight:600;color:var(--text-2)}
th button.sort{all:unset;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;gap:4px}
th button.sort:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
.rowbtn{all:unset;cursor:pointer;display:flex;flex-direction:column;min-height:44px;justify-content:center;font-weight:600;color:var(--text)}
.rowbtn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.rowbtn .sku{font-weight:400;font-size:var(--fs-xs);color:var(--text-3)}

/* info tips */
.tipbtn{all:unset;cursor:help;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:4px;border-radius:var(--r-pill);border:1px solid var(--line-2);color:var(--text-3);font:600 var(--fs-xs) var(--font);position:relative;vertical-align:middle}
.tipbtn::after{content:"";position:absolute;inset:-11px}
.tipbtn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.tip{position:fixed;z-index:60;max-width:300px;background:var(--text);color:#fff;font-size:var(--fs-sm);line-height:1.4;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);box-shadow:var(--shadow-2);pointer-events:none}

/* empty, error, loading */
.empty{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-5);border:1px dashed var(--line-2);border-radius:var(--r);color:var(--text-2);background:var(--surface-2)}
.empty strong{color:var(--text)}
.notice{padding:var(--sp-3) var(--sp-4);border-radius:var(--r);background:var(--soon-soft);color:var(--soon);margin-bottom:var(--sp-3)}
.notice.late{background:var(--late-soft);color:var(--late)}
.skeleton{height:14px;border-radius:6px;background:linear-gradient(90deg,var(--line) 0%,var(--surface-2) 50%,var(--line) 100%);background-size:200% 100%;animation:sk 1.2s infinite linear;margin:var(--sp-2) 0}
@keyframes sk{to{background-position:-200% 0}}

/* lock screen */
.lock{max-width:440px;margin:12vh auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6);box-shadow:var(--shadow-2)}
.lock .field{width:100%;margin:var(--sp-3) 0}
.err{color:var(--late);min-height:1.4em}

/* drawer */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:40}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(640px,100vw);background:var(--surface);z-index:50;box-shadow:var(--shadow-2);display:flex;flex-direction:column}
.drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line)}
.drawer-body{overflow-y:auto;padding:var(--sp-4) var(--sp-5) var(--sp-7)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-2);margin-bottom:var(--sp-4)}
.stat{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-3)}
.stat .k{font-size:var(--fs-xs);color:var(--text-2)}
.stat .v{font-size:var(--fs-lg);font-weight:650}
.section{margin-top:var(--sp-5)}
.chart{width:100%;height:auto;display:block;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r)}
.chart .bar{fill:var(--accent)}.chart .bar.cur{fill:#7fb59f}.chart .ln{fill:none;stroke:var(--info);stroke-width:2}
.chart .ly{fill:none;stroke:var(--text-2);stroke-width:2}
.toolbar .field{max-width:100%}
.plot{position:relative;border-radius:var(--r)}.plot:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.chart .xh{stroke:var(--text-3);stroke-width:1}.chart .hit{cursor:crosshair}
.readout{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);align-items:center;min-height:44px;padding:var(--sp-1) 0;font-size:var(--fs-sm)}
.readout .rhead{width:100%;color:var(--text-2);font-size:var(--fs-xs)}.readout .rrow{display:inline-flex;gap:var(--sp-1);align-items:center}
.readout .rrow strong{color:var(--text);font-size:var(--fs-md)}.key{flex:none;vertical-align:middle}.key .bar{fill:var(--accent)}
.modes{display:inline-flex;gap:var(--sp-1)}.colsbox{position:relative}.colsbox summary{list-style:none;display:inline-flex;align-items:center}
.colsbox summary::-webkit-details-marker{display:none}
.colslist{position:absolute;z-index:5;top:100%;left:0;margin-top:var(--sp-1);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-2);padding:var(--sp-2);display:grid;gap:0;min-width:220px}
.colslist .check{min-height:44px}
.minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--sp-3);margin:var(--sp-3) 0}
.mini{padding:var(--sp-3)}.mini-head{display:flex;justify-content:space-between;gap:var(--sp-2);align-items:flex-start}
.legend-list{list-style:none;padding:0;margin:var(--sp-2) 0;display:flex;flex-wrap:wrap;gap:0 var(--sp-3)}
.legend-list li{display:inline-flex;align-items:center;gap:var(--sp-1)}
label.pickwrap{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;cursor:pointer}input.pick{width:22px;height:22px}
#weekly-table tr.now td{font-weight:600;background:var(--accent-soft)}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-2);margin-top:var(--sp-2)}
.legend .key{display:inline-block;width:16px;height:4px;border-radius:2px;margin-left:var(--sp-2)}.legend .key:first-child{margin-left:0}
.legend .key.bar{height:10px;background:var(--accent)}.legend .key.ly{background:var(--text-2)}
.chart .zero{stroke:var(--late);stroke-dasharray:4 3}.chart .ax{fill:var(--text-3);font-size:11px}.chart .grid{stroke:var(--line)}
.whatif{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-3);align-items:end}
.whatif label{display:flex;flex-direction:column;gap:var(--sp-1);font-size:var(--fs-sm);color:var(--text-2)}
.result{margin-top:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r);background:var(--accent-soft);color:var(--text)}
details summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600}

/* guided tour */
.tour-catch{position:fixed;inset:0;z-index:70}
.tour-spot{position:fixed;z-index:71;border-radius:var(--r);box-shadow:0 0 0 9999px var(--scrim);outline:3px solid #fff;pointer-events:none;transition:all .2s ease}
.tour-bubble{position:fixed;z-index:72;width:min(360px,calc(100vw - 32px));background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-2);padding:var(--sp-5)}
.tour-bubble .arrow{position:absolute;width:16px;height:16px;background:var(--surface);transform:rotate(45deg)}
.tour-bubble .steps{font-size:var(--fs-xs);color:var(--text-3);margin-bottom:var(--sp-1)}
.tour-bubble .actions{display:flex;justify-content:space-between;gap:var(--sp-2);margin-top:var(--sp-4)}

/* phone */
@media (max-width:720px){
  main{padding:var(--sp-4) var(--sp-3) var(--sp-7)}
  .opt{display:none}
  th:first-child,td:first-child{min-width:112px}
  th,td{padding:var(--sp-2) 6px}
  .rowbtn{font-size:var(--fs-sm)}
  .badge{padding:2px 6px}
  .card{padding:var(--sp-4)}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi{padding:var(--sp-3) var(--sp-4)}
  .kpi .n{font-size:var(--fs-2xl)}
}
/* print: one purchase order draft */
@media print{
  body{background:#fff}
  .noprint,nav.tabs,.top .actions,.toolbar,.fold-bar{display:none!important}
  body.printing .po:not(.print-me){display:none}
  .card{box-shadow:none;border-color:#999}
}
/* T802: the issue button beside a "not read" state (a 44 px hit area round a small mark) and the list of what went wrong */
.issuebtn{all:unset;box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:var(--sp-1);border-radius:50%;background:var(--soon);color:#fff;font-weight:800;font-size:13px;line-height:1;cursor:pointer;vertical-align:middle}
.issuebtn::after{content:"";position:absolute;top:-11px;bottom:-11px;left:-11px;right:-11px}
.issuebtn:hover{background:var(--late)}
.issuebtn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.issue-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.issue-list li{border-left:3px solid var(--soon);padding-left:var(--sp-3)}
.issue-list p{margin:var(--sp-1) 0 0}
dialog.issues{border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-4);max-width:min(560px,92vw);width:100%;box-shadow:var(--shadow-2);background:var(--surface);color:var(--text)}
dialog.issues::backdrop{background:var(--scrim, rgba(20,20,24,.45))}
.issues-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.issues-head h2{margin:0;font-size:var(--fs-lg)}
/* T802: the compare picker's selection bar */
.pickbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);margin-bottom:var(--sp-3)}
.pickbar .what{flex:1 1 260px}
.pickchips{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin:var(--sp-2) 0}
.pickchip{display:inline-flex;align-items:center;gap:var(--sp-1);padding:0 0 0 var(--sp-2);border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.mini-pick{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:44px}