/* Everything we add on top of CCHDO's reviewer stylesheet. This is the whole answer to "what did
 * you change" -- their CSS is in cchdo-reviewer.css, extracted verbatim and never edited.
 *
 * Every value below is one of THEIR custom properties. No new colours, no new radii, no new font.
 * The surfaces here exist because their repo has no UI for them at all: they are the workbook
 * (Assignments, Registry, Overview) and the three views their process has no equivalent of.
 */

/* ---------------------------------------------------------------- nav
 * Sits where their toolbar sat, and is built from their .btn. Their reviewer has no navigation
 * because it is one screen; the cloud version has the workbook's sheets as well.
 */
.nav { display: flex; align-items: center; gap: 6px; padding: 10px 24px;
       background: var(--bg-card); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.nav .spacer { flex: 1; }
.nav button[aria-current="page"] { background: var(--accent-light); border-color: var(--accent-border);
       color: var(--accent); font-weight: 600; }
.who { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-secondary); }

/* ---------------------------------------------------------------- sign in
 * Theirs is a local file and has no login. Kept to their card, border, radius and shadow.
 */
.auth-wrap { min-height: 72vh; display: grid; place-items: center; padding: 24px; }
.auth { width: 100%; max-width: 360px; background: var(--bg-card); border: 1px solid var(--border);
        border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; }
.auth h1 { font-size: 17px; margin: 0 0 4px; color: var(--text-primary); }
.auth .sub { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }
.auth .field { margin-bottom: 14px; }
.auth label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em;
              color: var(--text-muted); margin-bottom: 5px; }
.auth input { width: 100%; padding: 8px 10px; border: 1px solid var(--border-strong);
              border-radius: var(--radius-sm); font-family: var(--font); font-size: 14px; }
.auth .btn { width: 100%; justify-content: center; }
.auth .err { background: var(--red-bg); border: 1px solid var(--red-border); color: var(--red);
             border-radius: var(--radius-sm); padding: 8px 10px; font-size: 13px; margin-bottom: 14px; }
.auth .note { background: var(--accent-light); border: 1px solid var(--accent-border);
              color: var(--text-secondary); border-radius: var(--radius-sm); padding: 8px 10px;
              font-size: 13px; margin-bottom: 14px; }
.auth .alt { margin-top: 12px; text-align: center; }
.auth .alt button { background: none; border: 0; color: var(--accent); font-size: 12px;
                    cursor: pointer; font-family: var(--font); }

/* ---------------------------------------------------------------- the workbook sheets
 * Rendered with their .table-card / table / .badge so a row reads like a reviewer row.
 */
.sheet { padding: 20px 24px 40px; }
.sheet-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; }
.sheet-head h2 { font-size: 15px; margin: 0; color: var(--text-primary); }
.sheet-head .count { font-size: 12px; color: var(--text-muted); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.filters button { font-size: 12px; }
.filters button[aria-pressed="true"] { background: var(--accent-light);
         border-color: var(--accent-border); color: var(--accent); font-weight: 600; }
.filters .n { margin-left: 6px; color: var(--text-muted); font-weight: 400; }
.search { padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
          font-family: var(--font); font-size: 13px; min-width: 220px; }
.scroll-x { overflow-x: auto; }
.pager { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 12px;
         color: var(--text-muted); }

/* The Registry row: their 21 columns, as a label/value list under the queue row it belongs to. */
.registry { background: var(--bg); border-top: 1px solid var(--border); padding: 14px 16px; }
.registry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 20px; }
.registry-grid div { font-size: 13px; min-width: 0; }
.registry-grid dt { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em;
                    color: var(--text-muted); margin-bottom: 2px; }
.registry-grid dd { margin: 0; color: var(--text-primary); overflow-wrap: anywhere; }
.registry-grid dd.derived { color: var(--text-primary); }
.registry-grid dd.blank { color: var(--text-muted); }
.registry-actions { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- the three added views */
.figs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.fig { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
       padding: 12px 16px; min-width: 128px; box-shadow: var(--shadow); }
.fig b { display: block; font-size: 21px; color: var(--text-primary);
         font-variant-numeric: tabular-nums; line-height: 1.2; }
.fig span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.fig.good b { color: var(--green); }

/* A head-to-head cell. Direction is shown as a word, not an arrow glyph nobody can read aloud. */
.lead-us { color: var(--green); font-weight: 600; }
.lead-gpt { color: var(--red); font-weight: 600; }
.lead-tie { color: var(--text-muted); }
/* No .caveat class. A paragraph under a table explaining the table is the thing CCHDO's own
 * reviewer never does, and it is what CLAUDE.md rule 37 forbids: say it in a column, a figure or
 * a cell, or do not say it. */

/* Their Overview sheet's numbered how-to list, with the automated steps struck through. */
.howto { list-style: decimal; margin: 0 0 18px 20px; padding: 0; font-size: 13px;
         color: var(--text-secondary); }
.howto li { margin-bottom: 6px; }
.howto li.done { color: var(--text-muted); }
.howto li.done span { text-decoration: line-through; }
.howto li.done em { font-style: normal; color: var(--green); font-weight: 600; margin-left: 6px; }

.busy { display: flex; align-items: center; gap: 10px; color: var(--text-muted);
        font-size: 13px; padding: 28px 0; }
.spin { width: 14px; height: 14px; border: 2px solid var(--border-strong);
        border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

/* A pre-ticked row: certified by something independent of the extractor, so the reviewer can clear
 * it with their own "Approve selected" instead of opening it. Their accent, nothing invented. */
tr.precleared td { background: var(--accent-light); }

/* Prompts sheet: a version's text, the propose editor and the diff, in their monospace and card. */
.prompt-text { white-space: pre-wrap; font-family: var(--mono); font-size: 12px;
  line-height: 1.5; padding: 14px 16px; max-height: 60vh; overflow: auto; color: var(--text-primary); }
.prompt-edit { width: 100%; min-height: 50vh; font-family: var(--mono); font-size: 12px;
  line-height: 1.5; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; }
.diff-add { background: var(--green-bg); }
.diff-del { background: var(--red-bg); text-decoration: line-through; }
.diff-ctx { color: var(--text-muted); }
tr.row-selected td { background: var(--accent-light); }