/* AccsZone Intelligence OS — admin shell.
   Colors are the validated data-viz palette (categorical slots 1-2, status
   ramp), declared once as roles so light/dark swap in one place. */
:root{
  color-scheme: light;
  --surface-1:#fcfcfb; --plane:#f9f9f7; --rail:#f4f3f0;
  --text-primary:#0b0b0b; --text-secondary:#52514e; --muted:#898781;
  --grid:#e1e0d9; --axis:#c3c2b7;
  --series-1:#2a78d6; --series-2:#eb6834;
  --good:#0ca30c; --warning:#fab219; --serious:#ec835a; --critical:#d03b3b;
  --radius:10px; --rail-w:236px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --surface-1:#1a1a19; --plane:#0d0d0d; --rail:#151514;
    --text-primary:#ffffff; --text-secondary:#c3c2b7; --muted:#898781;
    --grid:#2c2c2a; --axis:#383835;
    --series-1:#3987e5; --series-2:#d95926;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --surface-1:#1a1a19; --plane:#0d0d0d; --rail:#151514;
  --text-primary:#ffffff; --text-secondary:#c3c2b7; --muted:#898781;
  --grid:#2c2c2a; --axis:#383835;
  --series-1:#3987e5; --series-2:#d95926;
}
*{box-sizing:border-box}
body{margin:0;background:var(--plane);color:var(--text-primary);
     font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--series-1);text-decoration:none}
a:hover{text-decoration:underline}
code{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-secondary);
     overflow-wrap:anywhere}
/* Short identifiers must never wrap: "C-02" split across lines reads as two
   different refs. Long URLs still wrap, via overflow-wrap above. */
code.ref,.ref code{white-space:nowrap;overflow-wrap:normal}

/* ---- shell ---- */
.shell{display:grid;grid-template-columns:var(--rail-w) 1fr;min-height:100vh}
.rail{background:var(--rail);border-right:1px solid var(--grid);padding:16px 12px;
      display:flex;flex-direction:column;gap:14px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{font-weight:680;font-size:14.5px;letter-spacing:-.01em;padding:2px 8px 0;
       display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.brand small{display:block;font-weight:400;font-size:11px;color:var(--muted);letter-spacing:.02em}
.projsel{margin:0 4px}
.projsel label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
               color:var(--muted);margin-bottom:4px}
select,input[type=text],input[type=email],input[type=password]{
  width:100%;padding:7px 9px;border:1px solid var(--grid);border-radius:8px;
  background:var(--surface-1);color:var(--text-primary);font:inherit;font-size:13px}
nav .group{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
           padding:10px 8px 4px;font-weight:600}
nav a{display:flex;align-items:center;justify-content:space-between;gap:8px;
      padding:6px 8px;border-radius:7px;color:var(--text-secondary);font-size:13.5px}
nav a:hover{background:var(--surface-1);text-decoration:none;color:var(--text-primary)}
nav a.on{background:var(--surface-1);color:var(--text-primary);font-weight:560;
         box-shadow:inset 2px 0 0 var(--series-1)}
nav .gate{font-size:9.5px;letter-spacing:.04em;padding:1px 5px;border-radius:99px;
          border:1px solid var(--grid);color:var(--muted);white-space:nowrap}
.railfoot{margin-top:auto;border-top:1px solid var(--grid);padding-top:12px;font-size:12px;color:var(--muted)}
.railfoot .who{color:var(--text-secondary);font-weight:560;font-size:12.5px}
.linkbtn{background:none;border:none;padding:0;color:var(--series-1);font:inherit;font-size:12px;cursor:pointer}
.linkbtn:hover{text-decoration:underline}

/* The rail collapses on narrow viewports. `display:contents` keeps the wide
   layout byte-identical to before the wrapper existed: the children stay
   direct flex items of .rail, so .railfoot's margin-top:auto still works. */
.navtoggle{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.navbtn{display:none}
.railbody{display:contents}

.main{min-width:0}
.pagehead{padding:24px 26px 0;display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:space-between}
.pagehead h1{font-size:21px;margin:0;letter-spacing:-.015em}
.pagehead .sub{color:var(--text-secondary);font-size:13px;margin:4px 0 0;max-width:80ch}
.content{padding:18px 26px 64px}

/* ---- primitives ---- */
h2{font-size:16px;margin:28px 0 10px;letter-spacing:-.01em}
h3{font-size:13.5px;margin:0 0 10px;color:var(--text-secondary);font-weight:600}
.card{background:var(--surface-1);border:1px solid var(--grid);border-radius:var(--radius);padding:16px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:12px}
.tile .label{font-size:11.5px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}
.tile .value{font-size:27px;font-weight:650;letter-spacing:-.02em;margin:6px 0 2px;font-variant-numeric:tabular-nums}
.tile .value .unit{font-size:14px;font-weight:400;color:var(--text-secondary)}
.tile .foot{font-size:12px;color:var(--muted)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
   font-weight:600;padding:0 10px 8px;border-bottom:1px solid var(--grid);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--grid);vertical-align:top}
tr:last-child td{border-bottom:none}
/* A heading for a run of rows inside a table — the intent a set of questions
   belongs to. It is a <th> because it labels what follows, and it is styled
   here as well as in the phone layout because .rowstack drops the table's own
   header row and this one has to survive that. */
tr.group th{padding:16px 10px 6px;border-bottom:1px solid var(--grid);
  font-size:10.5px;color:var(--fg);font-weight:700}
tr.group:first-child th{padding-top:4px}
tr.group th .tiny{display:inline;margin-left:7px;text-transform:none;
  letter-spacing:0;font-weight:400;color:var(--muted)}
tbody tr:hover{background:color-mix(in srgb, var(--grid) 34%, transparent)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.name{font-weight:560}
.dim{color:var(--text-secondary)}
.tiny{font-size:11.5px;color:var(--muted);display:block;margin-top:2px;max-width:52ch}
.pill{display:inline-block;font-size:11px;padding:2px 7px;border-radius:99px;border:1px solid var(--grid);
      color:var(--text-secondary);white-space:nowrap}
.status{display:inline-flex;align-items:center;gap:5px;font-size:12px;white-space:nowrap}
.dot{width:8px;height:8px;border-radius:99px;flex:none}
.unknown{color:var(--muted);font-style:italic}
.note{border-left:3px solid var(--warning);padding:10px 14px;background:var(--surface-1);
      border-radius:0 var(--radius) var(--radius) 0;font-size:13px;color:var(--text-secondary);margin:12px 0}
.note.info{border-left-color:var(--series-1)}
.note.stop{border-left-color:var(--critical)}
.note strong{color:var(--text-primary)}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px;font-size:12.5px}
.filters select{width:auto;min-width:130px}
.filters .clear{color:var(--muted)}
.hbar{display:inline-block;width:60px;height:7px;background:var(--grid);border-radius:99px;overflow:hidden;
      vertical-align:middle;margin-left:8px}
.hbar-fill{display:block;height:100%;border-radius:99px}
.chart{width:100%;height:auto;display:block}
.grid{stroke:var(--grid);stroke-width:1}
.axis-line{stroke:var(--axis);stroke-width:1}
text.axis{fill:var(--muted);font-size:10px}
text.axis-year{fill:var(--muted);font-size:9px}
.bar{transition:opacity .12s}
.bar:hover{opacity:.72}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin:2px 0 10px;font-size:12.5px;color:var(--text-secondary)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.swatch{width:11px;height:11px;border-radius:3px;flex:none}
.kv{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:7px 16px;font-size:13.5px}
.kv dt{color:var(--muted);font-size:12px}
.kv dd{margin:0}
.crumb{font-size:12.5px;color:var(--muted);margin-bottom:2px}
.btn{display:inline-block;padding:8px 14px;border-radius:8px;border:1px solid var(--grid);
     background:var(--surface-1);color:var(--text-primary);font:inherit;font-size:13.5px;cursor:pointer}
.btn.primary{background:var(--series-1);border-color:var(--series-1);color:#fff;font-weight:560}
.btn.primary:hover{opacity:.92}

/* ---- login ---- */
.loginwrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.loginbox{width:100%;max-width:392px}
.loginbox .card{padding:26px}
.loginbox h1{font-size:19px;margin:0 0 4px;letter-spacing:-.015em}
.loginbox .sub{color:var(--text-secondary);font-size:13px;margin:0 0 20px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--text-secondary);margin-bottom:5px}
.field input{font-size:14px;padding:9px 11px}
.err{border-left:3px solid var(--critical);background:var(--surface-1);padding:9px 12px;
     border-radius:0 8px 8px 0;font-size:13px;margin-bottom:16px;color:var(--text-primary)}
.loginfoot{font-size:11.5px;color:var(--muted);margin-top:18px;text-align:center;line-height:1.6}

/* ---- Action Center ----
   Progressive disclosure is a layout job here (ADR-0015): headline, then why,
   then what to do, then a link into the evidence. Severity is a left edge
   rather than a coloured card, so scanning the page is reading the headlines,
   not decoding a palette. */
.act{border-left:3px solid var(--grid);margin-bottom:14px}
.act.sev-critical{border-left-color:var(--critical)}
.act.sev-high{border-left-color:var(--serious)}
.act.sev-medium{border-left-color:var(--warning)}
.act.sev-low{border-left-color:var(--axis)}
.act-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px}
.act-kind{font-size:12px}
.act-headline{margin:0 0 6px;font-size:16.5px;line-height:1.35;letter-spacing:-.01em}
.act-headline a{color:var(--text-primary)}
.act-headline a:hover{color:var(--series-1)}
.act-why{margin:0 0 12px;color:var(--text-secondary);font-size:13.5px;max-width:78ch}
.act-do{background:var(--plane);border:1px solid var(--grid);border-radius:8px;
        padding:10px 12px;margin-bottom:10px}
.act-do-label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
              color:var(--muted);font-weight:600;margin-bottom:3px}
.act-do p{margin:0;font-size:13.5px;max-width:78ch}
.act-foot{font-size:12px;color:var(--muted);margin-top:4px}
.pill.sev{text-transform:uppercase;letter-spacing:.04em;font-weight:600;font-size:10px}
.sev-critical .pill.sev{border-color:var(--critical);color:var(--critical)}
.sev-high .pill.sev{border-color:var(--serious);color:var(--serious)}
.sev-medium .pill.sev{border-color:var(--warning);color:var(--text-secondary)}
/* An item resting on partial or estimated evidence says so on the item, not
   only three clicks down. */
.pill.basis{border-style:dashed;color:var(--text-secondary)}
.pill.done{border-color:var(--good);color:var(--good)}
/* An item whose effect nothing can currently measure. Amber, not red:
   acting on it may still be right, and the pill says "not yet". */
.pill.unjudgeable{border-style:dashed;border-color:var(--warning);color:var(--text-secondary)}
/* A collection method the operator does not permit. Said in words on the pill
   as well as in the border, because a border style is not a label. */
.pill.unsanctioned{border-style:dashed;border-color:var(--serious);color:var(--serious)}
/* Confidence in a learned pattern is a word, never a number (ADR-0019). The
   colour follows the word so a contested reading cannot be mistaken for a
   settled one while scanning, and "insufficient evidence" is deliberately the
   dashed, unexciting one rather than a quiet grey that reads as a weak yes. */
.pill.conf{text-transform:uppercase;letter-spacing:.04em;font-weight:600;font-size:10px}
.pill.conf-repeated_pattern{border-color:var(--good);color:var(--good)}
.pill.conf-early_signal{border-color:var(--warning);color:var(--text-secondary)}
.pill.conf-mixed_evidence{border-color:var(--serious);color:var(--serious)}
.pill.conf-insufficient_evidence{border-style:dashed;color:var(--muted)}
/* A reading the later cases argue with, and a reading no longer being taken.
   Both have to look different from a plain pill: an unstyled label reads as a
   mild yes, which is the worst thing the one word saying how much to trust the
   sentence could do. */
.pill.conf-contradicted_by_later_observations{border-color:var(--critical);
  color:var(--critical)}
.pill.conf-retired{border-style:dashed;border-color:var(--grid);color:var(--muted)}
/* A retired reading is still on the page — it is how the owner learns that a
   finding stopped, rather than it simply disappearing one day — but it must
   not compete with the readings being taken now. */
/* A block of findings of one kind. The inner table is the list of them, so
   it needs more room between rows than a table of numbers does — each row is
   a headline and a paragraph, not a figure. */
.card.act.grouped table{margin-top:4px}
.card.act.grouped td{padding:11px 10px}
.card.act.grouped td.name a{font-weight:600}
.card.act.retired{opacity:.72}
.card.act.retired .act-why{color:var(--text-secondary)}
.caveat{color:var(--muted);max-width:74ch;margin:0 0 8px}
.stack{margin-top:14px;border-top:1px solid var(--grid);padding-top:14px}
.stack .field{margin-bottom:10px}

details.history{margin-top:14px;border-top:1px solid var(--grid);padding-top:12px}
details.history summary{cursor:pointer;font-size:12.5px;color:var(--text-secondary);
                        list-style:none;display:flex;align-items:center;gap:6px}
details.history summary::-webkit-details-marker{display:none}
details.history summary::before{content:"▸";color:var(--muted);font-size:11px}
details.history[open] summary::before{content:"▾"}
details.history summary:hover{color:var(--text-primary)}
details.history table{margin-top:10px}

@media (max-width:980px){
  .shell{grid-template-columns:1fr}
  .rail{position:static;height:auto;flex-direction:column;border-right:none;
        border-bottom:1px solid var(--grid);gap:0;padding:10px 12px}
  .brand{align-items:center;padding:0 4px}
  .navbtn{display:inline-block;cursor:pointer;font:inherit;font-size:12.5px;font-weight:560;
          color:var(--text-secondary);border:1px solid var(--grid);border-radius:8px;
          padding:5px 11px;background:var(--surface-1);white-space:nowrap}
  .navtoggle:focus-visible ~ .rail .navbtn{outline:2px solid var(--series-1);outline-offset:2px}
  /* Closed by default on a phone: content starts at the top of the page. */
  .railbody{display:none}
  .navtoggle:checked ~ .rail .railbody{display:block;padding-top:12px}
  .railbody > * + *{margin-top:14px}
  nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px}
  nav .group{grid-column:1/-1}
  .railfoot{margin-top:12px}
  .pagehead,.content{padding-left:16px;padding-right:16px}
  /* A table wider than the phone scrolls inside its own card rather than
     dragging the whole page sideways. There is deliberately no min-width
     floor: a browser never shrinks a table below its own min-content width,
     so the 540px floor that used to live here only added phantom width to
     tables that already fitted — six of them scrolled sideways for nothing,
     and every other table scrolled 184px further than its content needed. */
  .card{overflow-x:auto}
  .act-headline{font-size:15.5px}
}
@media (max-width:640px){
  .pagehead h1{font-size:18px} .tile .value{font-size:23px} .tiny{max-width:34ch}

  /* Two tiles across rather than four stacked. One column of full-width tiles
     pushed everything that follows below the fold — on the Overview that was
     the line saying none of the spend above can be judged yet, which is the
     part of the page worth reading first. */
  .tiles{grid-template-columns:1fr 1fr;gap:9px}
  .tile{padding:12px}
  .tile .label{font-size:10.5px}
  .tile .value{margin:4px 0 2px}
  .tile .foot{font-size:11.5px}

  /* A .rowstack table becomes one block per row on a phone.
     Six columns inside a 356px card meant the reader scrolled sideways to
     reach the only column that says what to do — and the headers had scrolled
     off, so the yes/no columns in view were unlabelled. Horizontal scrolling
     is tolerable for a grid of numbers; it is not tolerable for the column
     carrying the recommendation (ADR-0015: the decision comes first, the
     evidence stays reachable). Nothing is hidden: every cell is still here,
     each carrying its own label instead of borrowing one from a header row
     that is no longer on screen. */
  .rowstack tr{display:block;padding:11px 0;border-bottom:1px solid var(--grid)}
  .rowstack tr:first-child{display:none}
  .rowstack tr:last-child{border-bottom:none}
  .rowstack td{display:block;border:none;padding:0}
  .rowstack td:empty{display:none}
  .rowstack td.name{font-size:14.5px;margin-bottom:5px}
  .rowstack .tiny{max-width:none;text-align:left}
  /* A cell carries its own label, so the header row can go. Labelled cells sit
     inline and wrap as a group — short facts read as one or two lines rather
     than eight stacked rows. `.full` opts a cell back out, for prose that
     needs the width. */
  /* flex-wrap, because without it a cell with several children shrinks them
     into one-word columns rather than wrapping: the AI grid's "the answer was
     cut off before the sources" rendered as six stacked words in a 40px
     gutter. Flex items shrink before they wrap unless told otherwise. */
  .rowstack td[data-label]{display:inline-flex;align-items:baseline;gap:5px;
    flex-wrap:wrap;margin:0 13px 2px 0;font-size:13px}
  .rowstack td[data-label]::before{content:attr(data-label) ":";color:var(--muted);
    font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;
    white-space:nowrap}
  .rowstack tr.group{padding:14px 0 2px;border-bottom:none}
  .rowstack tr.group th{display:block;padding:0;border-bottom:none}
  .rowstack td.full{display:block;margin:6px 0 0;font-size:13px}
  .rowstack td.full::before{display:block;margin-bottom:1px}
}