/* Phase B app styling. Same visual language as the team-facing debrief so the
   project reads as one thing: Zilla Slab for headings, IBM Plex Sans for text,
   IBM Plex Mono for every identifier and figure. Teal is structure; rust is the
   only alarm colour and is spent nowhere else. */

:root {
  --paper:   #E9EEF0;
  --sheet:   #FFFFFF;
  --panel:   #F3F7F7;
  --ink:     #14222B;
  --ink-2:   #4D6069;
  --ink-3:   #7A8D95;
  --rule:    #D2DCE0;
  --rule-2:  #E4EBEE;
  --accent:  #0B6E6E;
  --stamp:   #A9381F;
  --stamp-bg:#FBEDE9;
  --warn:    #8A5A0C;
  --warn-bg: #FAF0DC;
  --ok:      #2C6A4C;

  --display: "Zilla Slab", Georgia, serif;
  --body:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0E181E; --sheet: #16232B; --panel: #1B2C33;
    --ink: #E3EAED; --ink-2: #A2B3BB; --ink-3: #7C8E97;
    --rule: #2A3D47; --rule-2: #22343D;
    --accent: #5CBCB5; --stamp: #E58163; --stamp-bg: #32211D;
    --warn: #DFAA57; --warn-bg: #30271A; --ok: #6FBF95;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }

.masthead {
  background: var(--sheet); border-bottom: 1px solid var(--rule);
  padding: 14px 24px 0;
}
.brand {
  font-family: var(--mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 10px;
}
.brand .ro {
  border: 1px solid var(--rule); color: var(--ink-3);
  padding: 1px 6px; margin-left: 10px; letter-spacing: .08em;
}
.brand .whoami { float: right; text-transform: none; letter-spacing: normal; color: var(--ink-3); }
.brand .whoami a { color: var(--ink-2); }
nav { display: flex; flex-wrap: wrap; gap: 4px; }
nav a {
  display: block; padding: 7px 14px; text-decoration: none;
  color: var(--ink-2); font-size: 14px;
  border: 1px solid transparent; border-bottom: none;
  border-radius: 3px 3px 0 0;
}
nav a:hover { color: var(--ink); background: var(--panel); }
nav a.on {
  background: var(--paper); color: var(--ink); font-weight: 600;
  border-color: var(--rule); margin-bottom: -1px;
}
nav a.soon { color: var(--ink-3); }
nav a.soon::after {
  content: "soon"; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--rule-2); padding: 0 4px; margin-left: 7px;
}

main { max-width: 1120px; margin: 0 auto; padding: 28px 24px 64px; }
h1 {
  font-family: var(--display); font-weight: 700; font-size: 30px;
  letter-spacing: -.01em; margin: 0 0 8px;
}
h2 {
  font-family: var(--display); font-weight: 600; font-size: 20px;
  margin: 34px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--rule);
}
p.lede { color: var(--ink-2); max-width: 78ch; margin: 0 0 18px; }
p { max-width: 78ch; }
code, .id {
  font-family: var(--mono); font-size: .88em; background: var(--panel);
  border: 1px solid var(--rule-2); padding: 1px 5px;
}

/* provenance strip -- every view says what it was built from and when */
.prov {
  display: flex; flex-wrap: wrap; gap: 4px 26px;
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-3);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 9px 0; margin: 0 0 22px;
}
.prov b { color: var(--ink-2); font-weight: 500; }
.prov .caveat { color: var(--warn); }

.tiles { display: flex; flex-wrap: wrap; gap: 26px 40px; margin: 0 0 6px; }
.tile .n {
  font-family: var(--display); font-weight: 700; font-size: 34px;
  line-height: 1.05; font-variant-numeric: tabular-nums;
}
.tile .k {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.tile.high .n { color: var(--stamp); }
.tile.med  .n { color: var(--warn); }

.finding {
  display: grid; grid-template-columns: 4px 1fr; gap: 0 16px;
  background: var(--sheet); border: 1px solid var(--rule);
  border-left: none; margin-bottom: 10px;
}
.finding .bar { background: var(--ink-3); }
.finding.high .bar { background: var(--stamp); }
.finding.med  .bar { background: var(--warn); }
.finding .fb { padding: 13px 16px 14px 0; }
.finding .head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  margin-bottom: 5px;
}
.finding .kind {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em;
  padding: 1px 6px; border: 1px solid var(--rule); color: var(--ink-3);
}
.finding.high .kind { color: var(--stamp); border-color: var(--stamp);
                      background: var(--stamp-bg); }
.finding.med  .kind { color: var(--warn); border-color: var(--warn);
                      background: var(--warn-bg); }
.finding .hl { font-weight: 600; margin-right: auto; }
.finding .ref { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.finding .ref a { text-decoration: none; }
.finding .ev { color: var(--ink-2); font-size: 14px; margin: 0; max-width: 92ch; }
.finding .sku { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }

table { border-collapse: collapse; width: 100%; font-size: 13.5px;
        font-variant-numeric: tabular-nums; }
th {
  text-align: left; font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 600;
  border-bottom: 1px solid var(--ink); padding: 0 14px 7px 0;
}
td { padding: 9px 14px 9px 0; border-bottom: 1px solid var(--rule-2);
     color: var(--ink-2); vertical-align: top; }
td.mono { font-family: var(--mono); font-size: 12.5px; color: var(--ink); }
.scroller { overflow-x: auto; }
/* A table inside a scroller must be allowed to exceed it, or `width: 100%` pins it
   to the container and the nowrap columns are clipped instead of scrolled -- which
   at narrow widths rendered the whole table as blank space. */
.scroller table { width: max-content; min-width: 100%; }

.note {
  background: var(--panel); border-left: 3px solid var(--accent);
  padding: 14px 18px; margin: 18px 0; font-size: 14px; color: var(--ink-2);
}
.note.alarm { background: var(--stamp-bg); border-left-color: var(--stamp); }
.note p { margin: 0 0 8px; } .note p:last-child { margin: 0; }
.note b { color: var(--ink); }

.empty {
  border: 1px dashed var(--rule); padding: 28px; text-align: center;
  color: var(--ink-3); background: var(--sheet);
}
.cmd {
  font-family: var(--mono); font-size: 13px; background: var(--panel);
  border: 1px solid var(--rule); padding: 10px 14px; display: block;
  margin: 10px 0; overflow-x: auto; color: var(--ink);
}


/* Dates and identifiers must not wrap: a PO number broken across two lines is a
   different-looking string, and the whole point of these columns is comparing them
   against what is in front of you on a screen or on paper. */
td.mono { white-space: nowrap; }


/* One group of unmatched documents: a heading, why they are unmatched, and a table.
   Deliberately NOT `.finding` -- that is a 4px/1fr grid for the disagreement list,
   and a heading dropped into its first column renders one word per line. */
.group {
  background: var(--sheet); border: 1px solid var(--rule);
  padding: 16px 18px 6px; margin: 0 0 16px;
}
.group h3 { margin: 0 0 6px; font-size: 16px; }
.group p { margin: 0 0 10px; font-size: 14px; color: var(--ink-2); max-width: 78ch; }
.group .scroller { margin-bottom: 12px; }


/* Secondary detail inside a table cell: the other three ship-to names, the early-pay
   figure. Present but never competing with the number it qualifies. */
.hint { color: var(--ink-3); font-size: 11.5px; white-space: nowrap; }


/* A figure that should never occur. Loud enough to stop a reader, quiet enough that
   a page with three of them is still readable. */
.flag { background: var(--warn-bg); border-left: 3px solid var(--warn);
        padding: 9px 13px; margin: 0 0 10px; }


/* Phase E: the grid. Evidence columns stay in the same mono/tabular register as
   every other table on the site; the editable columns get a visibly different
   treatment so nobody mistakes a human's guess for a parsed date. */
.whopicker {
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px;
  font-size: 13.5px; color: var(--ink-2);
}
.whopicker select {
  font-family: var(--body); font-size: 13.5px; padding: 4px 8px;
  border: 1px solid var(--rule); background: var(--sheet); color: var(--ink);
  border-radius: 3px;
}

.gridcontrols {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  margin: 0 0 14px; font-size: 13px; color: var(--ink-2);
}
.gridcontrols input[type=search] {
  font-family: var(--body); font-size: 13.5px; padding: 5px 9px; width: 230px;
  border: 1px solid var(--rule); background: var(--sheet); color: var(--ink);
  border-radius: 3px;
}
.gridcontrols input[type=date] {
  font-family: var(--body); font-size: 13px; padding: 3px 6px;
  border: 1px solid var(--rule); background: var(--sheet); color: var(--ink);
  border-radius: 3px;
}
.gridcontrols .dr, .gridcontrols .cb {
  display: flex; align-items: center; gap: 6px;
}
.gridcontrols #grid-count { margin-left: auto; font-family: var(--mono); font-size: 11px; }

.freshness-note { font-size: 12.5px; color: var(--ink-3); margin: -10px 0 18px; }

th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
th.sortable::after { content: ''; margin-left: 4px; }
th.sortable.asc::after { content: '\2191'; }
th.sortable.desc::after { content: '\2193'; }

table.grid td.key { white-space: normal; min-width: 15ch; }
table.grid tr.po-row td { background: var(--panel); font-weight: 600; }
table.grid tr.po-row td.ed, table.grid tr.po-row td.stamp { font-weight: 400; }
table.grid tr.order-row td.key { padding-left: 22px; color: var(--ink-2); font-weight: 400; }
table.grid tr.order-notes td { border-bottom: 1px solid var(--rule-2); padding-top: 0; }

.flagged { color: var(--stamp); font-weight: 600; }

.flag-note {
  font-size: 12px; color: var(--ink-2); padding: 3px 0 3px 22px;
}
.flag-note.high { color: var(--stamp); }
.flag-note.med { color: var(--warn); }

td.ed { padding-right: 10px; }
td.ed select, td.ed input[type=text] {
  font-family: var(--body); font-size: 13px; padding: 3px 6px; width: 100%;
  min-width: 9ch; border: 1px solid var(--rule); background: var(--sheet);
  color: var(--ink); border-radius: 3px;
}
td.ed input[type=checkbox] { width: 16px; height: 16px; }

td.stamp { min-width: 14ch; }
.stamp-text {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
  white-space: nowrap;
}
.stamp-text.err { color: var(--stamp); font-weight: 600; }


/* Login page -- deliberately not part of the app shell (no nav, nothing to click
   before you're in). Same visual language, standalone layout. */
body.login-wrap, .login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--paper); margin: 0; padding: 0;
}
.login-box {
  background: var(--sheet); border: 1px solid var(--rule); padding: 32px 34px;
  width: 320px; max-width: calc(100vw - 48px);
}
.login-box .brand {
  font-family: var(--mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 14px;
}
.login-box h1 { margin: 0 0 18px; }
.login-box form, .admin-form {
  display: flex; flex-direction: column; gap: 14px;
}
.admin-form { flex-direction: row; align-items: flex-end; flex-wrap: wrap; margin-bottom: 28px; }
.login-box label, .admin-form label {
  display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--ink-2);
}
.login-box input, .admin-form input, .admin-form select {
  font-family: var(--body); font-size: 14px; padding: 8px 10px;
  border: 1px solid var(--rule); background: var(--sheet); color: var(--ink);
  border-radius: 3px;
}
.login-box button, .admin-form button {
  font-family: var(--body); font-size: 14px; font-weight: 600; padding: 9px 14px;
  background: var(--accent); color: var(--sheet); border: none; border-radius: 3px;
  cursor: pointer;
}
.admin-form button { align-self: flex-end; }
button.danger {
  font-family: var(--mono); font-size: 11px; padding: 4px 9px;
  background: var(--stamp-bg); color: var(--stamp); border: 1px solid var(--stamp);
  border-radius: 3px; cursor: pointer;
}