:root { --bg:#fff; --fg:#18181b; --mut:#71717a; --line:#e4e4e7; --head:#fafafa;
        --bad:#b91c1c; --crit:#fef2f2; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#0e0e10; --fg:#ededf0; --mut:#a1a1aa; --line:#27272a; --head:#161618;
          --bad:#f87171; --crit:#2a1416; }
}
* { box-sizing: border-box; }
body { font:15px/1.55 system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--fg);
       margin:0 auto; padding:2rem 1.25rem 4rem; max-width:1000px; }
header { margin-bottom:1.25rem; }
h1 { font-size:1.5rem; margin:0; letter-spacing:-.01em; }
.sub { color:var(--mut); margin:.25rem 0 0; }
h2 { font-size:1rem; margin:2rem 0 .5rem; }
.hint { font-weight:400; color:var(--mut); font-size:.85rem; }
.summary { background:var(--head); border:1px solid var(--line); padding:.7rem .9rem;
           border-radius:8px; font-weight:600; font-size:.95rem; }
table { border-collapse:collapse; width:100%; font-size:14px; }
th,td { text-align:left; padding:.45rem .6rem; border-bottom:1px solid var(--line); }
th { background:var(--head); font-weight:600; font-size:.8rem; text-transform:uppercase;
     letter-spacing:.03em; color:var(--mut); }
td.n, th.n { text-align:right; font-variant-numeric:tabular-nums; }
td.bad { color:var(--bad); font-weight:700; }
tr.critical { background:var(--crit); }
.reason { color:var(--mut); font-size:13px; }
.empty { color:var(--mut); font-style:italic; padding:.5rem 0; }
.more { color:var(--mut); font-size:13px; margin:.5rem 0 0; }
.msg { padding:.45rem .7rem; border-radius:6px; margin:.35rem 0; font-size:13px;
       font-family:ui-monospace,SFMono-Regular,monospace; border:1px solid transparent; }
.ok{background:#f0fdf4;color:#166534}.warn{background:#fffbeb;color:#92400e}
.bad{background:#fef2f2;color:#991b1b}.info{background:#eff6ff;color:#1e40af}
@media (prefers-color-scheme:dark){
  .ok{background:#0d2818;color:#86efac}.warn{background:#2a2210;color:#fcd34d}
  .bad{background:#2a1416;color:#fca5a5}.info{background:#11203a;color:#93c5fd}
}
@media (max-width:640px){ table{font-size:13px} th,td{padding:.35rem .4rem} }
.controls { display:flex; align-items:center; gap:.6rem; margin:0 0 .75rem; flex-wrap:wrap; }
.controls label { font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; color:var(--mut); font-weight:600; }
select { font:inherit; font-size:14px; padding:.4rem .6rem; border:1px solid var(--line);
         border-radius:6px; background:var(--bg); color:var(--fg); min-width:16rem; }
#scope { margin:.5rem 0 0; }
.filtered { display:inline-block; font-size:13px; color:var(--mut);
            background:var(--head); border:1px solid var(--line); padding:.35rem .6rem; border-radius:6px; }
.filtered strong { color:var(--fg); }
.filtered button { font:inherit; font-size:12px; margin-left:.5rem; cursor:pointer;
                   background:none; border:1px solid var(--line); border-radius:5px;
                   padding:.15rem .5rem; color:var(--fg); }
.filtered button:hover { background:var(--line); }
#export { font:inherit; font-size:14px; padding:.4rem .8rem; border-radius:6px; cursor:pointer;
          border:1px solid var(--line); background:var(--head); color:var(--fg); font-weight:600; }
#export:hover:not(:disabled) { background:var(--line); }
#export:disabled { opacity:.5; cursor:default; }
.toggle { display:flex; align-items:center; gap:.4rem; font-size:14px; text-transform:none;
          letter-spacing:0; font-weight:400; color:var(--fg); cursor:pointer; }
.group { margin-bottom:1.5rem; }
.group h3 { font-size:.9rem; margin:0 0 .35rem; display:flex; align-items:center; gap:.5rem; }
.group .count { margin-left:auto; font-weight:400; color:var(--mut); font-size:.8rem; }
.tag { font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
       padding:.1rem .4rem; border-radius:4px; background:var(--head); color:var(--mut);
       border:1px solid var(--line); }
.warn-tag { background:#fffbeb; color:#92400e; border-color:#fcd34d; }
@media (prefers-color-scheme:dark){ .warn-tag{background:#2a2210;color:#fcd34d;border-color:#57430f} }
#briefBox { margin-top: 1.5rem; }
#brief ul { margin: .4rem 0 .8rem; padding-left: 1.1rem; }
#brief li { margin: .3rem 0; }
#copyBrief { font:inherit; font-size:13px; padding:.35rem .7rem; border-radius:6px; cursor:pointer;
             border:1px solid var(--line); background:var(--head); color:var(--fg); }
#copyBrief:hover { background:var(--line); }
.copied { font-size:12px; color:var(--mut); margin-left:.6rem; }
.source { margin: 0 0 .6rem; display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.badge { font-size: .68rem; font-weight: 700; letter-spacing: .06em; padding: .2rem .5rem;
         border-radius: 4px; border: 1px solid; }
.badge-static    { color:#1e40af; background:#eff6ff; border-color:#bfdbfe; }
.badge-synthetic { color:#92400e; background:#fffbeb; border-color:#fcd34d; }
.badge-live      { color:#166534; background:#f0fdf4; border-color:#bbf7d0; }
.src-note { font-size: 12.5px; color: var(--mut); }
@media (prefers-color-scheme: dark) {
  .badge-static    { color:#93c5fd; background:#11203a; border-color:#1e3a5f; }
  .badge-synthetic { color:#fcd34d; background:#2a2210; border-color:#57430f; }
  .badge-live      { color:#86efac; background:#0d2818; border-color:#14532d; }
}
#tech { margin: .5rem 0 0; }
#tech summary { cursor: pointer; font-size: 12.5px; color: var(--mut); padding: .3rem 0;
                list-style: revert; user-select: none; }
#tech summary:hover { color: var(--fg); }
#tech[open] summary { margin-bottom: .2rem; }
#techlog { padding-left: .2rem; }
.done { background:#f0fdf4; color:#166534; }
@media (prefers-color-scheme:dark){ .done{ background:#0d2818; color:#86efac; } }
.supplier { margin-bottom: 1.75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.supplier h3 { display:flex; align-items:baseline; gap:.6rem; font-size:1rem; margin:0 0 .3rem; }
.supplier.has-conflict h3::before { content:"⚠"; color:#b45309; }
.conflict-note { margin:.2rem 0 .5rem; font-size:13px; color:#92400e; background:#fffbeb;
                 border:1px solid #fcd34d; border-radius:6px; padding:.35rem .6rem; }
tr.conflict { background:#fffbeb; }
.copyOrder { margin-top:.5rem; font:inherit; font-size:13px; padding:.35rem .7rem; cursor:pointer;
             border:1px solid var(--line); border-radius:6px; background:var(--head); color:var(--fg); }
.copyOrder:hover { background:var(--line); }
@media (prefers-color-scheme:dark){
  .conflict-note{background:#2a2210;color:#fcd34d;border-color:#57430f}
  tr.conflict{background:#221c0d} .supplier.has-conflict h3::before{color:#fcd34d}
}
.exempt { margin:.5rem 0 0; border-left:3px solid #fcd34d; padding-left:.7rem; }
.exempt-head { margin:0 0 .3rem; font-size:12.5px; color:#92400e; font-weight:600; }
@media (prefers-color-scheme:dark){ .exempt-head{color:#fcd34d} }
.copybox { margin-top:.6rem; border:1px solid var(--line); border-radius:8px; padding:.6rem; background:var(--head); }
.copybox-note { margin:0 0 .4rem; font-size:12.5px; color:var(--mut); }
.copybox-note kbd { font-family:ui-monospace,monospace; background:var(--bg); border:1px solid var(--line);
                    border-radius:4px; padding:.05rem .3rem; font-size:11.5px; }
.copybox-text { width:100%; font:12.5px/1.45 ui-monospace,SFMono-Regular,monospace; padding:.5rem;
                border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); resize:vertical; }
.copybox-close { margin-top:.4rem; font:inherit; font-size:12.5px; padding:.25rem .6rem; cursor:pointer;
                 border:1px solid var(--line); border-radius:5px; background:var(--bg); color:var(--fg); }

/* The supplier's stated quantity doesn't always close the gap it sits beside.
   Where it doesn't, say so on the row — it's a number a coordinator would
   otherwise act on and come up short. Deliberately quieter than .warn-tag:
   this is a caveat on a figure, not a second alarm competing with expiry. */
td.n.short { color:var(--bad); }
.short-tag { display:block; font-size:.64rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.03em; color:#92400e; white-space:nowrap; }
@media (prefers-color-scheme:dark){ .short-tag{ color:#fcd34d; } }

/* The purchase order a supplier group adds up to. Sits under the header
   because it is a consequence of those rows, not a separate fact. */
.po { margin:.15rem 0 .5rem; font-size:.82rem; font-weight:600; }
.po-note { display:block; font-weight:500; font-size:.72rem; opacity:.75; }

/* The five-beat storyboard. Collapsed by default — the working user came for
   the count, not the pitch — but a visitor meeting the product cold gets the
   person and the problem before the dashboard. */
#storyboard { margin:.4rem 0 .9rem; }
#storyboard > summary { cursor:pointer; font-size:.86rem; opacity:.8; }
#storyboard > summary:hover { opacity:1; }
.beats { margin:.6rem 0 .2rem; padding-left:1.2rem; max-width:62ch; }
.beats li { margin:.45rem 0; font-size:.9rem; line-height:1.5; }

/* The opening story. This URL's real audience is people deciding whether the
   work is any good, so the page leads with the mistake that shaped it rather
   than with a feature list. Kept to four lines so the tool stays near the top. */
#intro { max-width:64ch; margin:.2rem 0 .8rem; }
#intro p { margin:.45rem 0; font-size:.92rem; line-height:1.55; }
#intro .intro-close { border-left:3px solid var(--bad); padding-left:.7rem; opacity:.95; }
/* On a phone the intro is the thing between the user and the count, so it
   gives back what it can without losing a sentence. */
@media (max-width:520px){
  #intro p { font-size:.86rem; line-height:1.45; margin:.35rem 0; }
  #intro { margin-bottom:.5rem; }
}

/* site nav: every destination reachable from the home page */
.sitenav{display:flex;flex-direction:column;gap:6px;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line, #dedcd6)}
.sitenav a{font-size:14px;text-decoration:none;color:inherit;
  padding:2px 0;text-underline-offset:3px}
.sitenav a:hover{text-decoration:underline}
.sitenav a b{color:var(--accent, #b45309)}