/* Editorial data report, sibling of modules/track-skill's dashboard — same deliberate choices,
   so the two read as one system:
   - Reference: a printed analytics page (FT/Economist data pages). Masthead, then ranked data.
     No hero, no cards, no tile grid. Commits to a light "paper" look; no dark mode by design.
   - Type: grotesque via system Helvetica/Arial — an editorial workhorse, chosen over the
     Inter/Geist default AND over a serif display, which is the current AI "tasteful" tell.
     Monospace tabular figures so every count and date aligns down the column.
   - Colour by job, not by decoration. Steel blue is the one action hue. Amber marks the single
     honest caveat on the page (text is not redacted). Red marks a conversation the participant
     has pulled out. Nothing else is coloured.
   - Layout intent: a linear four-step consent flow. The table is the centre of gravity, because
     the only real decision here is per-conversation. */
:root {
  --paper:#f6f5f1; --ink:#1b1b1a; --muted:#8f8b82; --faint:#b7b2a7;  /* unslop-ignore */
  --line:#e2e0d8; --track:#ece9e1; --action:#2F79B5;                 /* unslop-ignore */
  --warn:#C2872F; --drop:#B23A2E;                                    /* unslop-ignore */
  --sans:"Helvetica Neue",Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Noto Sans CJK JP","Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Consolas,Menlo,monospace;
  --emoji:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji";
}
* { box-sizing: border-box; }
/* Author `display` rules beat the UA stylesheet, so a .toolbar or .scroll with the hidden
   attribute would otherwise stay on screen. Every step of the flow relies on hidden working. */
[hidden] { display:none !important; }
body { margin:0 auto; max-width:920px; padding:44px 28px 72px; background:var(--paper);
       color:var(--ink); font:15px/1.55 var(--sans); -webkit-font-smoothing:antialiased; }

/* Masthead */
header { border-bottom:2px solid var(--ink); padding-bottom:10px; }
h1 { font-size:30px; font-weight:700; letter-spacing:-0.02em; margin:0; }
.standfirst { margin:12px 0 34px; font-size:13px; color:var(--muted);
              border-bottom:1px solid var(--line); padding-bottom:12px; }

/* Section heading — small caps rule, editorial */
section { margin:0 0 40px; }
h2 { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.09em;
     margin:0 0 6px; border-bottom:1px solid var(--ink); padding-bottom:6px; }
p { margin:10px 0; }
code { font-family:var(--mono); font-size:12.5px; background:var(--track); padding:0 3px; }

/* File picker — a ruled block, not a dashed-border dropzone */
.drop { display:block; border:1px solid var(--ink); padding:22px; cursor:pointer;
        background:transparent; }
.drop:hover, .drop.over { background:var(--track); }
.drop b { display:block; font-size:17px; }
.drop span { display:block; margin-top:6px; font-size:13px; color:var(--muted); }

.progress { font-family:var(--mono); font-size:13px; }

/* Facts list — label left, figure right, ruled. Reads as a stat block in print. */
.facts { margin:16px 0; padding:0; font-size:13px; }
.facts div { display:flex; justify-content:space-between; gap:16px;
             border-bottom:1px solid var(--line); padding:5px 0; }
.facts dt { color:var(--muted); margin:0; }
.facts dd { margin:0; font-family:var(--mono); font-variant-numeric:tabular-nums; }

.caveat { border-left:3px solid var(--warn); padding-left:12px; font-size:13px; color:var(--ink); }

.toolbar { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); }
button, a.primary { font:12px var(--sans); text-transform:uppercase; letter-spacing:0.05em;
                    color:var(--ink); background:transparent; border:1px solid var(--line);
                    padding:5px 10px; cursor:pointer; text-decoration:none; display:inline-block; }
button:hover, a.primary:hover { background:var(--track); }
button.primary, a.primary { background:var(--action); border-color:var(--action); color:#fff; }
button.primary:hover, a.primary:hover { background:#255f8f; }
button:disabled { color:var(--faint); cursor:default; background:transparent; }

select { font:13px var(--sans); color:var(--ink); background:transparent;
         border:1px solid var(--line); padding:2px 4px; }

/* Detail table — capped and scrolled in place. A full export runs to a few hundred rows, and
   a page that long buries the build button below everything the participant needs to reach. */
.scroll { max-height:60vh; overflow:auto; border-bottom:1px solid var(--line); }
.scroll thead th { position:sticky; top:0; background:var(--paper); }

/* Detail table */
table { border-collapse:collapse; width:100%; font-size:13px; margin-top:8px; }
th,td { padding:6px 10px; text-align:left; white-space:nowrap; }
th.n, td.n { text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; }
thead th { color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase;
           letter-spacing:0.05em; border-bottom:1px solid var(--ink); }
tbody td { border-bottom:1px solid var(--line); }
tbody tr:hover td { background:#efece4; }
td.id, td.date { font-family:var(--mono); }
/* An excluded row stays legible but visibly struck from the send list. */
tr.out td { color:var(--faint); }
tr.out td.id { color:var(--drop); text-decoration:line-through; }

/* Message preview — read straight out of the built bundle. The sender label is the point, so
   it carries the only colour: blue for the participant, ink for the other person. The message
   column is the one place on the page where text wraps rather than truncating. */
#peek-head { margin-top:32px; }
td.who { font-family:var(--mono); font-size:11px; letter-spacing:0.06em; vertical-align:top; }
td.who.subject { color:var(--action); }
td.who.other { color:var(--muted); }
th.msg, td.msg { white-space:normal; }
td.msg { line-height:1.45; overflow-wrap:anywhere; }
#peek-table td.date { vertical-align:top; color:var(--muted); font-size:12px; }
/* Fix the two label columns so the message column takes whatever is left, rather than the
   table growing past its scroll box. */
#peek-table { table-layout:fixed; }
#peek-table th:nth-child(1), #peek-table td:nth-child(1) { width:84px; }
#peek-table th:nth-child(2), #peek-table td:nth-child(2) { width:132px; }

footer { margin-top:48px; border-top:1px solid var(--line); padding-top:10px;
         font-size:11px; color:var(--faint); font-family:var(--mono); }