/* Nyansapo Reviewer Web — shared styles.
   Palette/type extracted from admin/templates/login.html (ruling §2:
   "reuse typography/page shell/cards/status badges/tables/spacing/
   buttons/alerts/modals — extract shared CSS/tokens from admin/ rather
   than copying its ~9,300-line dashboard HTML"). Design approved
   2026-08-22 (artifact preview) before wiring into these real
   templates. Deliberately does NOT reuse admin's proxying/session JS
   or its animated knot-hero — visual identity only, not shared code. */

:root {
  --bg-deep:   #120e0a;
  --bg-cream:  #f5ecd9;
  --ink:       #1a1208;
  --ink-mute:  #5a4a36;
  --ink-dim:   #7a6a52;
  --copper:    #e8d3a8;
  --copper-2:  #c4ab84;
  --line:      #b89a68;
  --line-soft: rgba(184, 154, 104, 0.35);
  --signal:    #f5e2b6;
  --ok:        #6f8f5a;
  --ok-bg:     rgba(111, 143, 90, 0.14);
  --pending:   #a3791f;
  --pending-bg:rgba(163, 121, 31, 0.14);
  --danger:    #a8431c;
  --danger-bg: rgba(168, 67, 28, 0.08);
  --reg:       #4a4a8a;
  --reg-bg:    rgba(74, 74, 138, 0.10);
  --sub:       #6e4624;
  --sub-bg:    rgba(196, 171, 132, 0.16);
  --correction:    #8a5a2e;
  --correction-bg: rgba(138, 90, 46, 0.12);
  --escalation:    #6a3f8a;
  --escalation-bg: rgba(106, 63, 138, 0.12);
  /* NYA-CCG-2D-REVIEWER-WEB-001 Stage 2: CORRECTION_REQUESTED/
     INTERPRETATION_ESCALATION status colors -- distinct from
     ok(green)/pending(amber)/danger(red) so neither reads as "verified"
     or "rejected", which they are not. */
  --serif: "Newsreader", Georgia, serif;
  --sans:  "Inter Tight", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg-deep); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--copper); color: var(--ink); }
*:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }

.eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--sub); margin-bottom: 18px; display: flex; align-items: center; gap: 11px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--sub); flex-shrink: 0; }

/* ── Sign-in ── */
.signin-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 25% 30%, rgba(232, 211, 168, 0.07), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(110, 70, 36, 0.16), transparent 55%),
    var(--bg-deep);
  padding: 48px 24px;
}
.signin-card { background: var(--bg-cream); width: 100%; max-width: 408px; padding: 48px 44px; border: 1px solid rgba(232, 211, 168, 0.2); }
.signin-card h1 { font-family: var(--serif); font-weight: 300; font-size: 30px; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 8px; text-wrap: balance; }
.signin-card p.sub { font-size: 13.5px; color: var(--ink-mute); line-height: 1.55; margin: 0 0 30px; max-width: 34ch; }
.signin-foot {
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ink-dim);
  display: flex; align-items: center; gap: 8px;
}
.signin-foot .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.field label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); }
.input-wrap { border-bottom: 1px solid var(--line); transition: border-color 0.15s; }
.input-wrap:focus-within { border-color: var(--sub); }
.input-wrap input {
  width: 100%; background: transparent; border: 0; outline: 0;
  font-family: var(--sans); font-size: 16px; letter-spacing: 0.03em; color: var(--ink); padding: 10px 0 12px;
}
.input-wrap input::placeholder { color: var(--line); letter-spacing: 0; font-weight: 300; }

.btn {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 12px 18px; border: 1px solid var(--ink); cursor: pointer; background: transparent; color: var(--ink);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn.primary { background: var(--ink); color: var(--bg-cream); }
.btn.primary:hover { background: var(--sub); border-color: var(--sub); }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.btn.danger:hover { background: var(--danger-bg); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── App shell ── */
.app-topbar { background: var(--bg-deep); color: var(--copper); padding: 0 32px; height: 60px; display: flex; align-items: center; justify-content: space-between; }
.app-brand { display: flex; align-items: baseline; font-family: var(--serif); font-size: 17px; color: var(--signal); letter-spacing: -0.01em; }
.app-brand .tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(232, 211, 168, 0.5); margin-left: 12px; padding-left: 14px; border-left: 1px solid rgba(232, 211, 168, 0.2);
}
.app-nav { display: flex; align-items: center; gap: 22px; }
/* nyansapo#1271 item F2: shown only to a release authority (session
   flag is a display convenience -- every /release* route re-confirms
   the real scope live regardless of this link ever being clicked). */
.app-nav .nav-link {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245, 236, 217, 0.65); border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.app-nav .nav-link:hover { color: var(--signal); border-bottom-color: var(--copper); }
.app-nav .who { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: rgba(245, 236, 217, 0.75); display: flex; align-items: center; gap: 8px; }
.app-nav .who .avatar {
  width: 22px; height: 22px; border-radius: 50%; background: var(--copper); color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 600; font-size: 10px;
}
.app-nav form.logout button {
  background: transparent; border: 1px solid rgba(232, 211, 168, 0.28); color: rgba(245, 236, 217, 0.65);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 7px 13px; cursor: pointer;
}
.app-nav form.logout button:hover { border-color: var(--copper); color: var(--signal); }

.app-page { background: var(--bg-cream); min-height: calc(100vh - 60px); }
.page { max-width: 900px; margin: 0 auto; padding: 40px 32px 80px; }
.page h1 { font-family: var(--serif); font-weight: 300; font-size: 32px; letter-spacing: -0.02em; margin: 0 0 6px; text-wrap: balance; }
.page-sub { font-family: var(--mono); font-size: 11.5px; color: var(--ink-dim); letter-spacing: 0.02em; margin-bottom: 28px; }

.tabs { display: flex; gap: 2px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.tabs a { padding: 11px 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.active { color: var(--ink); border-bottom-color: var(--sub); }

/* ── Table ── */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); padding: 0 14px 12px; border-bottom: 1px solid var(--line); }
td { padding: 15px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; font-size: 14px; }
tr.row-link { cursor: pointer; transition: background 0.1s; }
tr.row-link:hover td { background: rgba(232, 211, 168, 0.22); }
.role-cell { display: flex; gap: 6px; flex-wrap: wrap; }

.badge {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 9px; border: 1px solid; border-radius: 2px; white-space: nowrap;
}
.badge.pending  { color: var(--pending); border-color: var(--pending); background: var(--pending-bg); }
.badge.verified { color: var(--ok);      border-color: var(--ok);      background: var(--ok-bg); }
.badge.rejected { color: var(--danger);  border-color: var(--danger);  background: var(--danger-bg); }
.badge.correction { color: var(--correction); border-color: var(--correction); background: var(--correction-bg); }
.badge.escalation { color: var(--escalation); border-color: var(--escalation); background: var(--escalation-bg); }
.badge.role-reg { color: var(--reg); border-color: var(--reg); background: var(--reg-bg); }
.badge.role-sub { color: var(--sub); border-color: var(--copper-2); background: var(--sub-bg); }
/* nyansapo#1271 item B2: "a sibling in this group was rejected" -- caution,
   not an error (nothing here is itself wrong), so it reuses the amber
   --pending token rather than --danger. */
.badge.warn { color: var(--pending); border-color: var(--pending); background: var(--pending-bg); }

.empty-state { padding: 48px 0; text-align: center; color: var(--ink-dim); font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; }

/* ── Queue filters + pagination (NYA-CCG-2D-REVIEWER-WEB-001 UX pass,
   founder feedback 2026-09-10) ── */
.filter-bar { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.filter-field label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim);
}
.filter-field select { padding: 8px 10px; font-size: 13px; }
.filter-clear {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--sub);
  border-bottom: 1px solid var(--sub); padding-bottom: 2px; height: fit-content;
}
.subject-label { font-size: 14px; color: var(--ink); }
.subject-code {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-dim); margin-top: 2px;
}
.badge.cat { color: var(--ink-mute); border-color: var(--copper-2); background: var(--sub-bg); }
.muted { color: var(--ink-dim); font-family: var(--mono); font-size: 12px; }
.reviewed-at { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); white-space: nowrap; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.page-link {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute);
  border-bottom: 1px solid var(--line);
}
.page-link.disabled { color: var(--line); border-bottom-color: transparent; cursor: default; }
.page-status { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); letter-spacing: 0.03em; }

/* ── Cards / detail ── */
.card { background: #fffaf0; border: 1px solid var(--line); padding: 26px 28px; margin-bottom: 22px; }
.card h2 { font-family: var(--serif); font-weight: 400; font-size: 18px; margin: 0 0 18px; color: var(--ink); }
/* nyansapo#1271 item B1: a decided request must read as visibly CLOSED,
   not as a page that simply has no form on it. */
.card.closed { background: var(--bg-cream); border-style: dashed; }
.card.closed h2 { color: var(--ink-dim); }
.card.closed p { font-size: 14px; color: var(--ink-mute); line-height: 1.55; margin: 0 0 10px; }
.card.closed p:last-child { margin-bottom: 0; }

/* nyansapo#1271 items A1/A2: identity unmissable at the point of decision. */
.signing-as {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--ink-mute);
  background: rgba(232, 211, 168, 0.28); border: 1px solid var(--line); padding: 10px 14px; margin-bottom: 20px;
}
.signing-as a { color: var(--ink); }
.signing-confirm-check {
  display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-mute);
  margin: -8px 0 20px; cursor: pointer;
}
.signing-confirm-check input { width: 15px; height: 15px; cursor: pointer; }

/* nyansapo#1271 item B2: one header row per logical group in the queue. */
tr.group-head td {
  background: rgba(232, 211, 168, 0.3); font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); padding: 10px 14px;
  border-bottom: 1px solid var(--line); cursor: default;
}
tr.group-head a { color: var(--ink); }
tr.group-head .badge { margin-left: 8px; text-transform: none; letter-spacing: 0.04em; }

.review-signature { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.review-signature:last-of-type { border-bottom: none; }
.review-signature .icon {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13px; flex-shrink: 0;
}
.review-signature.approved .icon { background: var(--ok-bg); color: var(--ok); }
.review-signature.pending .icon { background: var(--pending-bg); color: var(--pending); }

.field-row { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.field-row .field { flex: 1; min-width: 200px; margin-bottom: 0; }
.field-row .field label { margin-bottom: 4px; display: block; }
.field-row .field .value { font-size: 14px; }

textarea, select, input[type=text] {
  width: 100%; font-family: var(--sans); font-size: 14px; padding: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink);
}

details.technical { margin-top: 22px; }
details.technical summary { cursor: pointer; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); list-style: none; }
details.technical summary::-webkit-details-marker { display: none; }
details.technical summary::before { content: "▸ "; }
details.technical[open] summary::before { content: "▾ "; }
details.technical pre { background: var(--bg-deep); color: rgba(245, 236, 217, 0.85); padding: 16px; overflow-x: auto; margin-top: 12px; font-family: var(--mono); font-size: 11.5px; line-height: 1.6; border-radius: 2px; }

.alert { font-family: var(--mono); font-size: 12px; letter-spacing: 0.03em; padding: 12px 16px; border: 1px solid; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.alert.err { color: var(--danger); border-color: rgba(168,67,28,0.4); background: var(--danger-bg); }
.alert.info { color: var(--ink-mute); border-color: var(--line); background: rgba(232,211,168,0.15); }
.alert.warn { color: var(--pending); border-color: var(--pending); background: var(--pending-bg); }

/* ── Verification dossier (NYA-CCG-2D-REVIEWER-WEB-001, founder critique
   2026-08-22: show the governance case, not just the database row) ── */
.dossier-section { margin-bottom: 22px; }
.dossier-section:last-child { margin-bottom: 0; }
.dossier-section > label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-dim); display: block; margin-bottom: 10px;
}
.dossier-claim {
  font-family: var(--serif); font-size: 19px; font-weight: 300; line-height: 1.5; color: var(--ink);
  margin: 0 0 10px; text-wrap: balance;
}
.dossier-why { font-size: 14px; color: var(--ink-mute); line-height: 1.6; margin: 0; max-width: 68ch; }
.component-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.component-chip {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--ink);
  border: 1px solid var(--line); background: #fff; padding: 5px 10px;
}
.evidence-block { border: 1px solid var(--line-soft); padding: 16px 18px; background: rgba(232,211,168,0.1); }
.evidence-block + .evidence-block { margin-top: 12px; }
.evidence-block .evidence-title { font-family: var(--serif); font-size: 15px; color: var(--ink); margin: 0 0 6px; }
.evidence-block .evidence-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); line-height: 1.7; }
.evidence-block .evidence-meta a { color: var(--ink-mute); }
.confidence-pill {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; padding: 3px 9px; border: 1px solid var(--line);
  color: var(--ink-mute); display: inline-block; margin-left: 10px; vertical-align: middle;
}
.component-table { margin-top: 14px; }
.component-table td { font-size: 13.5px; padding: 11px 14px; }
.component-table td:first-child { font-family: var(--serif); }
.component-table td:nth-child(2), .component-table td:nth-child(4) { font-family: var(--mono); font-size: 12px; }

/* ── CGC control-entry dossier (NYA-CGC-REVIEW-DOSSIER-001) ──
   Reuses every existing token/pattern above (badges, evidence-block,
   component-table, dossier-claim discipline) -- no new palette, no new
   typography, same visual identity as the CCG surface it sits beside. */
.control-status-banner { margin-bottom: 16px; }
.verbatim-block {
  border: 1px solid var(--line); background: #fff; padding: 18px 20px; margin-bottom: 14px;
}
.verbatim-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-dim); margin: 0 0 10px;
}
.verbatim-text {
  font-family: var(--serif); font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--ink);
  margin: 0 0 10px; white-space: pre-wrap; text-wrap: pretty;
}
.derived-block { border: 1px solid var(--line-soft); background: rgba(232,211,168,0.1); padding: 16px 18px; }
.derived-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-dim); margin: 0 0 10px;
}
.derived-block .component-table { margin-top: 0; }
.derived-block .component-table td:first-child {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-dim);
  text-transform: uppercase; width: 200px; font-weight: 400;
}
.review-checklist { list-style: none; margin: 0; padding: 0; }
.review-checklist li {
  display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink-mute);
  line-height: 1.5; padding: 8px 0; border-bottom: 1px solid var(--line-soft);
}
.review-checklist li:last-child { border-bottom: none; }
.checklist-box {
  width: 15px; height: 15px; border: 1px solid var(--line); flex-shrink: 0; margin-top: 2px;
}

/* ── Structured list fields (technical parameters, exclusions, related
   control refs) -- founder feedback 2026-09-10: "too messy... jammed
   together... Highlight each item per line instead." One item per line,
   never a comma-joined paragraph. Reused by both the CGC control-entry
   dossier's technical_parameter_candidates and the technical-criteria
   dossier below. ── */
.line-list { list-style: none; margin: 0; padding: 0; }
.line-list li {
  font-size: 13.5px; color: var(--ink); line-height: 1.6; padding: 7px 0 7px 18px;
  border-bottom: 1px solid var(--line-soft); position: relative;
}
.line-list li:last-child { border-bottom: none; }
.line-list li::before { content: "—"; position: absolute; left: 0; color: var(--ink-dim); }

/* ── Technical-criteria dossier (VER-CGD-001 Lane A tail 1, founder
   feedback 2026-09-10) -- reuses verbatim-block/derived-block/evidence-
   block/component-table tokens the CGC control-entry dossier already
   established, same visual identity. ── */
.criterion-threshold {
  font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--ink); margin: 0 0 4px;
}
.criterion-role-pill {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-dim); display: inline-block; margin-top: 6px;
}

.lifecycle-track { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.lifecycle-step {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 10px; border: 1px solid var(--line); color: var(--ink-dim);
}
.lifecycle-step.done { color: var(--ink-mute); border-color: var(--line); }
.lifecycle-step.current { color: var(--pending); border-color: var(--pending); background: var(--pending-bg); }
.lifecycle-arrow { color: var(--ink-dim); font-size: 12px; }

/* ── Modal (confirmation dialog, ruling §7) ── */
.modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(18,14,10,0.62); z-index: 100; align-items: center; justify-content: center; }
.modal-backdrop.open { display: flex; }
.modal { background: var(--bg-cream); border: 1px solid var(--ink); max-width: 420px; width: 92%; padding: 30px; }
.modal h3 { font-family: var(--serif); font-weight: 400; font-size: 19px; margin: 0 0 12px; color: var(--ink); }
.modal p { font-size: 14px; color: var(--ink-mute); line-height: 1.55; margin: 0 0 24px; }
.modal .modal-actions { display: flex; gap: 12px; justify-content: flex-end; }

@media (max-width: 720px) {
  .page { padding: 28px 18px 60px; }
  .field-row { flex-direction: column; }
  table, thead, tbody, th, td, tr { display: block; }
  thead { display: none; }
  tr.row-link { border-bottom: 1px solid var(--line); padding: 14px 0; }
  td { border: none; padding: 4px 0; }
}