/* RIQ PAS — an underwriting instrument. Cool paper and ink; every figure and identifier
   in monospace; one reserved amber for the "held / not yet known" state (never red — a
   blocker is an unresolved decision, not an error). */

:root {
  --ground: #f7f8fa;
  --surface: #ffffff;
  --surface-2: #f1f3f7;
  --ink: #1a2233;
  --muted: #5b6676;
  --hairline: #e2e6ec;
  --primary: #1f5ae0;
  --primary-ink: #ffffff;
  --held: #b8730b;
  --held-bg: #fbf3e6;
  --clear: #1f8a50;
  --clear-bg: #eaf5ee;
  --danger: #b3261e;
  --radius: 8px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Let native controls (scrollbars, date pickers) follow whichever theme is active;
     the explicit-choice overrides below pin it. */
  color-scheme: light dark;
}

/* The theme selector (top bar) sets data-theme="light"|"dark" on <html>, or removes it
   for "System". The bare :root above is the LIGHT palette. The dark palette applies
   when the OS prefers dark AND the user hasn't forced light, OR whenever the user
   explicitly forces dark (which wins even under an OS light theme). Explicit light needs
   no rules of its own — it keeps the :root defaults and, via :not([data-theme="light"]),
   opts out of the OS-dark media query. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #10141c;
    --surface: #171d27;
    --surface-2: #1e2530;
    --ink: #e7ecf3;
    --muted: #9aa6b6;
    --hairline: #2a3340;
    --primary: #5b8bff;
    --primary-ink: #0c1017;
    --held: #e0a44a;
    --held-bg: #2a2115;
    --clear: #58c98a;
    --clear-bg: #14251c;
    --danger: #f2857e;
  }
}
:root[data-theme="dark"] {
  --ground: #10141c;
  --surface: #171d27;
  --surface-2: #1e2530;
  --ink: #e7ecf3;
  --muted: #9aa6b6;
  --hairline: #2a3340;
  --primary: #5b8bff;
  --primary-ink: #0c1017;
  --held: #e0a44a;
  --held-bg: #2a2115;
  --clear: #58c98a;
  --clear-bg: #14251c;
  --danger: #f2857e;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono, .id, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Top bar */
.topbar {
  display: flex; align-items: center; gap: 20px;
  padding: 0 24px; height: 56px;
  background: var(--surface); border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; z-index: 10;
}
.wordmark { font-weight: 600; letter-spacing: -0.01em; }
.wordmark .tag { color: var(--muted); font-weight: 400; font-size: 13px; margin-left: 6px; }
.topbar nav { display: flex; gap: 18px; }
.topbar .spacer { flex: 1; }
.topbar .who { color: var(--muted); font-size: 13px; }
.topbar .who b { color: var(--ink); font-weight: 600; }
.theme-toggle { min-width: 104px; justify-content: center; }
.theme-toggle .ico { font-size: 13px; line-height: 1; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 28px 24px 64px; }

h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; }
h2 { font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 12px; }
.lede { color: var(--muted); margin: 0 0 24px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--radius);
  border: 1px solid var(--hairline); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 14px; cursor: pointer;
}
.btn:hover { border-color: var(--muted); text-decoration: none; }
.btn.primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--hairline)); }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

/* Cards / panels */
.card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 20px; min-width: 0; }
.grid-2 { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 20px; }
@media (max-width: 820px) { .grid-2 { grid-template-columns: 1fr; } }

/* Program detail page: a wider canvas than the default 1080, because the Contracts
   table is genuinely wide. The narrow info/status panels tile into a responsive band
   (wrapping instead of stacking into one tall column), and the wide table gets the
   full width below — scrolling horizontally inside its own card when it must, rather
   than pushing the page out of shape. */
.wrap.wrap-wide { max-width: 1400px; }
.detail-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.detail-head .lede { margin: 0; }

/* A compact left rail of "at a glance" status panels + a flexible main column that
   carries the program details and the full-width Contracts table. min-width:0 on the
   main column is what lets the table's .table-wrap actually scroll instead of pushing
   the whole layout wide. */
.detail-cols { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; }
.detail-aside { display: grid; gap: 20px; align-content: start; }
.detail-main { display: grid; gap: 20px; min-width: 0; }
.detail-main > .card, .detail-aside > .card { min-width: 0; }
@media (max-width: 960px) { .detail-cols { grid-template-columns: 1fr; } }

/* The program-details key/value list is long; flow it into two columns so the panel is
   wide-and-short in the main column rather than a tall single strip. */
.card-details .metrics { column-count: 2; column-gap: 36px; }
.card-details .metrics li { break-inside: avoid; }
@media (max-width: 560px) { .card-details .metrics { column-count: 1; } }

/* Table */
table { width: 100%; border-collapse: collapse; }
.table-wrap { overflow-x: auto; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; padding: 8px 12px; border-bottom: 1px solid var(--hairline); }
td { padding: 11px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
tbody tr:hover { background: var(--surface-2); }

/* Status chip */
.chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--hairline); background: var(--surface-2); color: var(--muted); }
.chip.bound { color: var(--clear); background: var(--clear-bg); border-color: color-mix(in srgb, var(--clear) 30%, transparent); }
.chip.written, .chip.prf { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }

/* Reconciliation drift — a non-zero committed drift, task E2. Red (--danger), not the
   amber "held/unknown" colour: this is a genuine tie-out mismatch, not an unresolved
   decision. */
.drift { color: var(--danger); font-weight: 700; background: color-mix(in srgb, var(--danger) 12%, transparent); border-radius: 4px; padding: 2px 6px; }

/* Readiness — the signature */
.readiness { border-radius: 12px; padding: 16px 18px; }
.readiness.clear { background: var(--clear-bg); border: 1px solid color-mix(in srgb, var(--clear) 30%, transparent); }
.readiness.held { background: var(--held-bg); border: 1px solid color-mix(in srgb, var(--held) 35%, transparent); }
.readiness .status-line { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.readiness.clear .status-line { color: var(--clear); }
.readiness.held .status-line { color: var(--held); }
.readiness .dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.blockers { list-style: none; margin: 12px 0 0; padding: 0; }
.blockers li { padding: 8px 0 8px 20px; border-top: 1px solid color-mix(in srgb, var(--held) 20%, transparent); position: relative; color: var(--ink); font-size: 14px; }
.blockers li::before { content: "›"; position: absolute; left: 4px; color: var(--held); font-weight: 700; }

.badge-ready { color: var(--clear); font-weight: 600; font-size: 13px; }
.badge-held { color: var(--held); font-weight: 600; font-size: 13px; }

/* Metric list */
.metrics { list-style: none; margin: 0; padding: 0; }
.metrics li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.metrics .label { color: var(--muted); }
.metrics .value { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.metrics .value.unknown { color: var(--held); font-weight: 600; }

/* Messages */
.msgs { margin: 0 0 20px; padding: 0; list-style: none; }
.msgs li { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 8px; border: 1px solid var(--hairline); }
.msgs li.error { color: var(--held); background: var(--held-bg); border-color: color-mix(in srgb, var(--held) 35%, transparent); }
.msgs li.success { color: var(--clear); background: var(--clear-bg); border-color: color-mix(in srgb, var(--clear) 30%, transparent); }

/* Forms */
form.stacked { display: grid; gap: 14px; max-width: 520px; }
/* min-width:0 lets the grid column shrink below a control's intrinsic width — without
   it a <select> whose longest <option> is a long clause name (e.g. the 134-item Cyber
   library) forces its column, and the whole card, to overflow. */
.field { display: grid; gap: 5px; min-width: 0; }
.field label { font-size: 13px; font-weight: 600; color: var(--muted); }
.field input, .field select {
  font: inherit; padding: 9px 11px; border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  /* Fill the column, never grow to the widest <option>; the closed control clips a long
     value (the full text still shows in the open dropdown). */
  width: 100%; min-width: 0; max-width: 100%;
}
.field input:focus, .field select:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.field .help { font-size: 12px; color: var(--muted); }
.field .err { font-size: 12px; color: var(--danger); }
.field.num input { font-family: var(--mono); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
fieldset { border: 1px solid var(--hairline); border-radius: 12px; padding: 16px; margin: 0 0 18px; }
legend { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; padding: 0 6px; }

.empty { text-align: center; color: var(--muted); padding: 48px 0; }

@media (prefers-reduced-motion: no-preference) {
  .btn, .field input, .field select { transition: border-color .12s ease, filter .12s ease; }
}