/* Canon Ops: dense, monochrome, one accent (#C2410C). Tabular numerals everywhere. No gradients, no icons. */
:root { --accent: #C2410C; --ink: #18181B; --line: #E3E3DE; --muted: #6E6E73; --faint: #9A9A9F; --canvas: #F4F4F1; }
html { font-size: 13px; }
body { font-feature-settings: "tnum" 1, "cv11" 1; font-variant-numeric: tabular-nums; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.mono, .api, pre, code, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.synthetic { font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 2px 7px; border: 1px solid var(--ink);
  border-radius: 3px; background: #fff; white-space: nowrap; }
.navlink { display: flex; align-items: center; gap: 5px; padding: 0 10px; color: var(--muted); border-bottom: 2px solid transparent; }
.navlink:hover { color: var(--ink); }
.navlink.is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.navlink kbd, .btn kbd { font-size: 10px; color: var(--faint); border: 1px solid var(--line); border-radius: 3px; padding: 0 3px; line-height: 14px; }
.count-pill { background: var(--accent); color: #fff; border-radius: 3px; padding: 0 5px; font-size: 11px; font-weight: 600; }
.replay-state { color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 0 6px; font-size: 11px; }
.replay-state.is-playing { color: #fff; background: var(--ink); border-color: var(--ink); }

.panel { background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.panel-head { display: flex; align-items: baseline; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--line); }
.panel-head h2 { font-size: 13px; font-weight: 600; }
.link { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.link:hover { text-decoration-color: var(--ink); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid #CFCFCA;
  border-radius: 4px; background: #fff; font-weight: 500; white-space: nowrap; }
.btn:hover { border-color: var(--ink); }
.btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-primary kbd { color: #BDBDC2; border-color: #4A4A4F; }
.btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-accent:hover { border-color: #8A2E08; }
.btn:focus-visible, .row:focus-visible, .input:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.seg { display: inline-flex; border: 1px solid #CFCFCA; border-radius: 4px; overflow: hidden; }
.seg button { height: 26px; padding: 0 8px; background: #fff; border-left: 1px solid var(--line); }
.seg button:first-child { border-left: 0; }
.seg button.is-on { background: var(--ink); color: #fff; }
.input, select.input { height: 28px; border: 1px solid #CFCFCA; border-radius: 4px; padding: 0 8px; background: #fff; min-width: 0; }
textarea.input { height: auto; padding: 6px 8px; }
.mchip { padding: 3px 9px; border: 1px solid var(--line); border-radius: 3px; background: #fff; color: var(--muted); font-size: 12px; }
.mchip.is-on { color: var(--ink); border-color: var(--ink); font-weight: 600; }
.notice { padding: 6px 10px; border: 1px solid var(--ink); border-radius: 4px; background: #fff; margin-bottom: 8px; }
.notice.is-error { border-color: var(--accent); color: var(--accent); }

.counters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: #fff; border: 1px solid var(--line); border-radius: 4px; height: 100%; }
.counters > div { padding: 9px 12px; border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.counters > div:first-child { border-left: 0; }
.counters span { font-size: 11px; color: var(--muted); }
.counters b { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin-top: 4px; }
.counters i { font-style: normal; font-size: 12px; color: var(--muted); margin-top: 2px; }
.tiles { display: grid; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.tiles > div { padding: 9px 12px; border-left: 1px solid var(--line); }
.tiles > div:first-child { border-left: 0; }
.tiles span { display: block; font-size: 11px; color: var(--muted); }
.tiles b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin-top: 3px; }
.tiles i { display: block; font-style: normal; font-size: 11px; color: var(--muted); }

table.feed, table.grid-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
table.grid-table { table-layout: auto; }
.feed th, .grid-table th { text-align: left; font-weight: 500; font-size: 11px; color: var(--muted); padding: 5px 8px; border-bottom: 1px solid var(--line); background: #FAFAF8; white-space: nowrap; }
.feed td, .grid-table td { padding: 4px 8px; border-bottom: 1px solid #EFEFEB; vertical-align: top; }
.feed tr.row { cursor: pointer; }
.feed tr.row:hover td { background: #FAFAF7; }
.feed tr.row.is-open td { background: #F6F6F3; border-bottom-color: transparent; }
.feed tr.row.is-child td:nth-child(3) { padding-left: 16px; }
.feed tr.detail > td { background: #F6F6F3; padding: 0; border-bottom: 1px solid var(--line); }
.api { font-size: 12px; }
.api b { font-weight: 600; }

.tier { display: inline-block; font-family: ui-monospace, Menlo, monospace; font-size: 11px; padding: 0 4px; border: 1px solid #CFCFCA; border-radius: 3px; color: var(--muted); }
.tier-2 { border-color: var(--ink); color: var(--ink); font-weight: 700; }
.tier-3 { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 3px; border: 1px solid transparent; white-space: nowrap; }
.chip-done { background: #EEEEEA; color: #3F3F45; }
.chip-waiting { background: var(--accent); color: #fff; font-weight: 600; }
.chip-decided, .chip-rejected { border-color: #CFCFCA; color: var(--muted); }
.chip-approved { border-color: var(--ink); color: var(--ink); }
.chip-declined { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.chip-reverted { border: 1px dashed #A9A9AE; color: var(--muted); font-style: italic; }
.chip-failed { background: var(--ink); color: #fff; }

.entry { padding: 10px 14px 14px; }
.entry h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin-bottom: 8px; }
.facts dt, .kv dt { color: var(--muted); }
.kv { display: grid; grid-template-columns: 78px 1fr; gap: 3px 8px; }
.checks { margin-top: 6px; font-size: 12px; color: var(--muted); }
.checks li::before { content: "– "; }
.ev { margin-top: 6px; }
.ev-cap { font-size: 12px; font-weight: 600; margin-bottom: 2px; display: flex; gap: 8px; align-items: baseline; }
.ev-src { font-weight: 400; color: var(--muted); font-size: 11px; }
.ev-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); font-size: 12px; }
.ev-table th { text-align: left; color: var(--muted); font-weight: 500; padding: 2px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ev-table td { padding: 2px 6px; border-bottom: 1px solid #F0F0EC; font-variant-numeric: tabular-nums; }
details.sql summary { cursor: pointer; color: var(--muted); font-size: 12px; user-select: none; }
details.sql pre { margin-top: 4px; padding: 8px 10px; background: #FAFAF8; border: 1px solid var(--line); border-radius: 3px; font-size: 11.5px; line-height: 1.45; white-space: pre-wrap; }
.label { font-size: 11px; color: var(--muted); }
.big { font-size: 34px; font-weight: 600; letter-spacing: -.025em; line-height: 1.05; }
.htmx-request .htmx-hide { opacity: .4; }
.feed tr.row, .entry, article.panel { scroll-margin-top: 56px; }
.counters { height: auto; }
.counters b small { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-right: 2px; }
.counters span { white-space: nowrap; }
.replay-mode { font-size: 11px; color: var(--muted); border: 1px dashed #CFCFCA; border-radius: 3px; padding: 0 6px; white-space: nowrap; }
.doc h2 { font-size: 16px; font-weight: 600; margin: 14px 0 6px; }
.doc h3 { font-size: 14px; font-weight: 600; margin: 12px 0 4px; }
.doc h2:first-child, .doc h3:first-child { margin-top: 0; }
.doc p { margin: 6px 0; line-height: 1.5; max-width: 80ch; }
.doc ul { margin: 6px 0 6px 18px; list-style: disc; }
.doc li { margin: 3px 0; line-height: 1.45; max-width: 80ch; }
.doc code { font-size: 12px; background: #F4F4F1; padding: 0 3px; border-radius: 3px; }
.doc h4 { font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
.doc ol { margin: 6px 0 6px 22px; list-style: decimal; }
.doc pre.codeblock { margin: 8px 0; padding: 8px 10px; background: #F4F4F1; border-radius: 4px; font-size: 12px; line-height: 1.45; overflow-x: auto; max-width: 100ch; }
.doc pre.codeblock code { background: none; padding: 0; }
.doc pre.mermaid { margin: 8px 0; padding: 8px; background: #FAFAF8; border: 1px solid #E5E5E0; border-radius: 4px; font-size: 12px; overflow-x: auto; }
.doc pre.mermaid:not([data-processed]) { color: #9A9A94; font-size: 11px; max-height: 160px; overflow: hidden; }  /* source shows faintly until the diagram library has drawn it */
.doc .tablewrap { overflow-x: auto; max-width: 100%; margin: 8px 0; }
.doc table.doctable { border-collapse: collapse; font-size: 12.5px; }
.doc table.doctable th, .doc table.doctable td { border: 1px solid #E5E5E0; padding: 4px 8px; text-align: left; vertical-align: top; line-height: 1.4; }
.doc table.doctable th { background: #F4F4F1; font-weight: 600; }
.doc i { font-style: italic; }
footer.app-footer { position: sticky; bottom: 0; }

/* Tonight: the sentence leads, the counters follow, smaller */
.counters > div { padding: 6px 12px; }
.counters b { font-size: 18px; margin-top: 2px; }
.counters b small { font-size: 11px; }
.counters i { font-size: 11px; }

/* ── Narrow windows. Everything below lives in media queries, so the 1440 px layout is unchanged. ── */
@media (max-width: 1099px) {
  /* app bar: brand + clock on the first row, the screens on a second, scrollable row */
  .appbar { height: auto !important; flex-wrap: wrap; row-gap: 0; padding-top: 4px; }
  .appbrand { height: 34px; }
  .appclock { height: 34px; }
  .appnav { order: 3; width: 100%; overflow-x: auto; height: 34px; scrollbar-width: none; }
  .appnav::-webkit-scrollbar { display: none; }
  .navlink kbd { display: none; }
  .navlink { white-space: nowrap; }

  /* Tonight: title row, then the controls; pills wrap; counters in three columns */
  .r-head { flex-direction: column; gap: 8px !important; }
  .r-head > .min-w-0 h1 { font-size: 17px; }
  .r-controls { margin-left: 0 !important; width: 100%; }
  .r-replay { flex-wrap: wrap; row-gap: 6px; }
  .r-pills { flex-wrap: wrap; row-gap: 4px; }
  .counters { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .counters > div:nth-child(4) { border-left: 0; }
  .counters > div:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .r-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .r-tiles > div:nth-child(4) { border-left: 0; }
  .r-tiles > div:nth-child(n + 4) { border-top: 1px solid var(--line); }

  /* stacked layouts: every 12-column grid becomes one column */
  .r-stack { grid-template-columns: minmax(0, 1fr) !important; }
  .r-stack > * { grid-column: 1 / -1 !important; border-left: 0 !important; border-right: 0 !important; }
  .r-queue > * + * { border-top: 1px solid var(--line); }
  .r-paramrow { flex-wrap: wrap; }
  .r-svg { max-width: 100%; height: auto; }
  .r-terms ul { max-height: 230px; overflow-y: auto; }
  .r-wrap { flex-wrap: wrap; row-gap: 2px; }

  /* tables scroll inside their card; the first columns stay readable */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll > table.feed { min-width: 940px; }
  .table-scroll > table.feed col:nth-child(1) { width: 46px !important; }
  .table-scroll > table.feed col:nth-child(2) { width: 70px !important; }
  .table-scroll > table.feed col:nth-child(3) { width: 196px !important; }
  .table-scroll > table.feed col:nth-child(4) { width: 128px !important; }
  .table-scroll > table.feed col:nth-child(6) { width: 40px !important; }
  .table-scroll > table.feed col:nth-child(7) { width: 96px !important; }
  .table-scroll > table.feed col:nth-child(8) { width: 96px !important; }
  .table-scroll > table.feed tr.row > td:nth-child(-n + 3), .table-scroll > table.feed thead th:nth-child(-n + 3) {
    position: sticky; z-index: 1; background: #fff; }
  .table-scroll > table.feed thead th:nth-child(-n + 3) { background: #FAFAF8; }
  .table-scroll > table.feed tr.row > td:nth-child(1), .table-scroll > table.feed thead th:nth-child(1) { left: 0; }
  .table-scroll > table.feed tr.row > td:nth-child(2), .table-scroll > table.feed thead th:nth-child(2) { left: 46px; }
  .table-scroll > table.feed tr.row > td:nth-child(3), .table-scroll > table.feed thead th:nth-child(3) {
    left: 116px; box-shadow: 1px 0 0 var(--line); }
  .table-scroll > table.feed tr.row.is-open > td:nth-child(-n + 3) { background: #F6F6F3; }
  .table-scroll > table.feed tr.detail > td { position: sticky; left: 0; }
  .table-scroll > table.grid-table, .table-scroll > table.ev-table { min-width: 640px; }
}

@media (max-width: 699px) {
  html { font-size: 13px; }
  .kbd-hint { display: none; }   /* keyboard hints mean nothing on a phone */
  main { padding-left: 10px !important; padding-right: 10px !important; }
  .appbar { padding-left: 10px !important; padding-right: 10px !important; column-gap: 10px !important; }
  .appbrand { gap: 8px !important; }
  .synthetic { font-size: 10px; padding: 1px 5px; }
  .appclock { order: 4; width: 100%; height: 24px; margin-left: 0 !important; }
  .appclock .text-muted:first-child { display: none; }
  .counters { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .counters > div:nth-child(3), .counters > div:nth-child(5) { border-left: 0; }
  .counters > div:nth-child(4) { border-left: 1px solid var(--line); }
  .counters > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .r-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .r-tiles > div:nth-child(3), .r-tiles > div:nth-child(5) { border-left: 0; }
  .r-tiles > div:nth-child(4) { border-left: 1px solid var(--line); }
  .r-tiles > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .r-variants { grid-template-columns: minmax(0, 1fr) !important; }
  .r-variants > * { border-left: 0 !important; }
  .r-variants > * + * { border-top: 1px solid var(--line); }
  .r-history { grid-template-columns: 1fr !important; gap: 0 !important; padding: 4px 0; }
  .r-filters label { flex: 1 1 140px; }
  .r-filters .input { width: 100% !important; }
  .panel-head { flex-wrap: wrap; row-gap: 2px; }
  .big { font-size: 28px; }
  footer.app-footer > span:last-child { display: none; }
  .r-head h1 span { display: block; font-size: 13px; }

  /* other screens on a phone: time and store stay pinned while the rest scrolls; the id scrolls away */
  .table-scroll > table.feed col:nth-child(3) { width: 150px !important; }
  .table-scroll > table.feed tr.row > td:nth-child(1), .table-scroll > table.feed thead th:nth-child(1) { position: static; }
  .table-scroll > table.feed tr.row > td:nth-child(2), .table-scroll > table.feed thead th:nth-child(2) { left: 0; z-index: 2; }
  .table-scroll > table.feed tr.row > td:nth-child(3), .table-scroll > table.feed thead th:nth-child(3) { left: 70px; z-index: 2; }

  /* Tonight on a phone: the sentence, the handover, and one line per decision (time, store, action, status) */
  body[data-screen="tonight"] .table-scroll > table.feed-tonight { min-width: 0; display: block; }
  body[data-screen="tonight"] table.feed-tonight colgroup,
  body[data-screen="tonight"] table.feed-tonight thead { display: none; }
  body[data-screen="tonight"] table.feed-tonight tbody { display: block; }
  body[data-screen="tonight"] table.feed-tonight tr.row {
    display: grid; grid-template-columns: 58px minmax(0, 1fr) minmax(0, 1.1fr) auto; column-gap: 8px;
    align-items: baseline; padding: 6px 10px; border-bottom: 1px solid #EFEFEB; }
  body[data-screen="tonight"] table.feed-tonight tr.row > td { display: block; padding: 0; border: 0; position: static !important;
    min-width: 0 !important; max-width: none !important; width: auto !important; box-shadow: none !important;
    background: transparent !important; }
  body[data-screen="tonight"] table.feed-tonight tr.row > td:nth-child(1),
  body[data-screen="tonight"] table.feed-tonight tr.row > td:nth-child(4),
  body[data-screen="tonight"] table.feed-tonight tr.row > td:nth-child(6),
  body[data-screen="tonight"] table.feed-tonight tr.row > td:nth-child(8),
  body[data-screen="tonight"] table.feed-tonight .sub { display: none; }
  body[data-screen="tonight"] table.feed-tonight tr.row > td:nth-child(5) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  body[data-screen="tonight"] table.feed-tonight tr.row .api .text-muted { display: none; }
  body[data-screen="tonight"] table.feed-tonight tr.detail { display: block; }
  body[data-screen="tonight"] table.feed-tonight tr.detail.hidden { display: none; }
  body[data-screen="tonight"] table.feed-tonight tr.detail > td { display: block; position: static !important; }
}