/* ============================================================
   CIS CAPTURE — cockpit-v3 design language (EP-CIS-003,
   DEC-CHAT-20261009-105). Restyle, not redesign: every selector
   the shell (index.html) and the JS (ui.js/app.js/sync.js) use is
   kept; only the visual language changes.

   Contract: mockups/cis-capture-v2/*.dc.html. Token values are
   verbatim copies of azure-apps/sm-cockpit/src/features/sm/styles/
   tokens.css — every colour in this file comes from one of those
   variables; no literal colours outside the two :root token blocks
   (sole tolerated exception: the lightbox scrim rgba(0, 0, 0, 0.92),
   allowlisted in test/cockpit-restyle.test.js).

   Phone-first at 390px, glove-first: category tiles, result plates
   and primary/secondary actions keep >=44px touch targets.
   ============================================================ */

/* The `hidden` attribute must always win over a class's own `display`
   (live run 37527566829: `.rep-form { display: grid }` kept the resubmit
   form on screen after it was hidden). One rule for every element. */
[hidden] { display: none !important; }

/* ---------- tokens (verbatim from sm-cockpit tokens.css) ---------- */

:root {
  --bg: #0a0f1a;
  --surface: #0f172a;
  --raised: #1e293b;
  --line: #1e293b;
  --line2: #334155;
  --t1: #e2e8f0;
  --t2: #94a3b8;
  --t3: #64748b;
  --acc: #00A5DB;
  --acc-ink: #0a0f1a;
  --ok: #22c55e;
  --ok-bg: rgba(34, 197, 94, 0.1);
  --ok-br: rgba(34, 197, 94, 0.3);
  --warn: #EE9106;
  --warn-bg: rgba(238, 145, 6, 0.12);
  --warn-br: rgba(238, 145, 6, 0.3);
  --bad: #f87171;
  --bad-bg: rgba(208, 5, 48, 0.15);
  --bad-br: rgba(208, 5, 48, 0.3);
  --acc-bg: rgba(0, 165, 219, 0.12);
  --acc-br: rgba(0, 165, 219, 0.35);
}

:root[data-theme="light"] {
  --bg: #f1f5f9;
  --surface: #ffffff;
  --raised: #f8fafc;
  --line: #e2e8f0;
  --line2: #cbd5e1;
  --t1: #1a1a1a;
  --t2: #475569;
  --t3: #64748b;
  --acc: #003C74;
  --acc-ink: #ffffff;
  --ok: #166534;
  --ok-bg: rgba(34, 197, 94, 0.12);
  --ok-br: rgba(22, 101, 52, 0.35);
  --warn: #92400e;
  --warn-bg: rgba(238, 145, 6, 0.14);
  --warn-br: rgba(146, 64, 14, 0.35);
  --bad: #D00530;
  --bad-bg: rgba(208, 5, 48, 0.08);
  --bad-br: rgba(208, 5, 48, 0.3);
  --acc-bg: rgba(0, 60, 116, 0.08);
  --acc-br: rgba(0, 60, 116, 0.3);
}

/* Fonts, plus legacy variable names still referenced by css/cockpit.css
   (cockpit.html loads app.css before cockpit.css). Aliases only — every
   value resolves to a token above, so they flip with the theme. */
:root {
  --font-ui: "DM Sans", system-ui, sans-serif;
  --font-cond: "DM Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", Monaco, monospace;
  --ink: var(--t1);
  --ink-dim: var(--t2);
  --accent: var(--acc);
  --orange: var(--acc);
  --lamp-pending: var(--warn);
  --lamp-syncing: var(--warn);
  --lamp-synced: var(--ok);
  --lamp-invalid: var(--bad);
  --lamp-attend: var(--acc);
}

/* ---------- base ---------- */

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

body {
  background: var(--bg);
  color: var(--t2);
  font-family: var(--font-ui);
  font-size: 14px;
  min-height: 100dvh;
  padding-bottom: 96px;
}

a { color: var(--acc); }

/* Plain DM Sans headings — no Playfair, no letterpress. The class stays
   because the shell and ui.js apply it to every heading. */
.stencil { font-family: var(--font-ui); font-weight: 600; letter-spacing: normal; }

/* Header bar treatment (topbar / sheet heads). No chamfers. */
.plate {
  background: var(--surface);
  border: 0;
  border-bottom: 1px solid var(--line);
}

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; min-height: 52px; padding: 8px 14px;
}
.topbar-id { display: flex; align-items: center; gap: 10px; }
.project-code {
  font-family: var(--font-mono);
  font-size: 17px; font-weight: 600; color: var(--t1);
}
.topbar-sub {
  font-family: var(--font-mono); font-weight: 600; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3);
}

/* Retired visual: the hazard stripe renders nothing. The element stays in
   the DOM (aria-hidden), so the selector stays and simply hides it. */
.hazard-stripe { display: none; height: 0; }

/* ---------- project picker ---------- */
.topbar-id { position: relative; }
.project-chooser {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--raised); border: 1px solid var(--line2);
  border-radius: 6px; padding: 5px 10px; cursor: pointer; color: inherit;
  font: inherit;
}
.project-caret { font-size: 11px; color: var(--t3); }

/* ---------- sync banner ---------- */
.sync-banner {
  background: var(--bad-bg); border-bottom: 1px solid var(--bad-br);
  color: var(--bad); font-weight: 600;
  font-size: 13px; padding: 10px 14px; text-align: center;
}

/* ---------- sync status (chip + state dot; was the lamp cluster) ----------
   JS contract unchanged: ui.js sets data-state on the .lamp dot
   (off / pending / syncing / synced / invalid / needs-attention / offline)
   and the label text on .lamp-label. The cluster reads as a status chip:
   neutral by default, tinted by the dot's state where :has() is available. */
.lamp-cluster {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--raised); border: 1px solid var(--line2);
  border-radius: 6px; padding: 6px 12px; min-height: 44px; cursor: pointer;
}
.lamp {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--t3); flex-shrink: 0;
}
.lamp[data-state="pending"]  { background: var(--warn); }
.lamp[data-state="syncing"]  { background: var(--warn);
  animation: lamp-pulse 0.9s ease-in-out infinite; }
.lamp[data-state="synced"]   { background: var(--ok); }
.lamp[data-state="invalid"]  { background: var(--bad); }
.lamp[data-state="needs-attention"] { background: var(--acc); }
.lamp[data-state="offline"]  { background: var(--t3); }
@keyframes lamp-pulse { 50% { opacity: 0.35; } }

.lamp-label {
  font-family: var(--font-mono); font-weight: 600; font-size: 11px;
  letter-spacing: 0.04em; color: var(--t2);
}
.lamp-cluster:has(.lamp[data-state="pending"]),
.lamp-cluster:has(.lamp[data-state="syncing"]) {
  background: var(--warn-bg); border-color: var(--warn-br);
}
.lamp-cluster:has(.lamp[data-state="pending"]) .lamp-label,
.lamp-cluster:has(.lamp[data-state="syncing"]) .lamp-label { color: var(--warn); }
.lamp-cluster:has(.lamp[data-state="invalid"]) {
  background: var(--bad-bg); border-color: var(--bad-br);
}
.lamp-cluster:has(.lamp[data-state="invalid"]) .lamp-label { color: var(--bad); }
.lamp-cluster:has(.lamp[data-state="synced"]) .lamp-label { color: var(--t2); }

/* ---------- day list ---------- */
.view { padding: 16px 14px; max-width: 720px; margin: 0 auto; }
.day-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 14px; }
.day-title { font-size: 20px; line-height: 1.2; color: var(--t1); }
.day-counts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.count {
  font-family: var(--font-mono); font-weight: 600; font-size: 10px;
  letter-spacing: 0.02em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 4px;
  background: var(--raised); border: 1px solid var(--line2); color: var(--t2);
}
.count-pending { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-br); }
.count-synced  { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-br); }
.count-invalid { color: var(--bad); background: var(--bad-bg); border-color: var(--bad-br); }
.count-attend  { color: var(--acc); background: var(--acc-bg); border-color: var(--acc-br); }

.day-unknown-note { color: var(--t3); font-size: 12px; margin: 0 0 10px; }

.records-link {
  display: block; width: 100%; margin: 0 0 10px; padding: 10px 14px;
  min-height: 44px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  color: var(--t1); font-family: var(--font-ui); font-weight: 600; font-size: 13px;
  cursor: pointer; text-align: center;
}
.records-link:active { background: var(--raised); }

.cards { list-style: none; display: grid; gap: 10px; }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  animation: card-in 0.25s ease-out both;
}
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } }
.card-pending          { border-color: var(--line); }
.card-synced           { border-color: var(--line); }
.card-invalid          { border-color: var(--bad-br); }
.card-needs-attention  { border-color: var(--acc-br); }

.card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card-item { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--t1); }
.card-num { font-family: var(--font-mono); font-weight: 500; color: var(--t3);
  font-size: 11px; }
.card-mid { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.chip {
  font-family: var(--font-mono); font-weight: 600; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.02em;
  padding: 2px 8px; border-radius: 4px; text-align: center; white-space: nowrap;
}
.chip-ok   { color: var(--ok); background: var(--ok-bg); border: 1px solid var(--ok-br); }
.chip-warn { color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-br); }
.chip-bad  { color: var(--bad); background: var(--bad-bg); border: 1px solid var(--bad-br); }
.chip-hold { color: var(--t2); background: var(--raised); border: 1px solid var(--line2); }
/* SPEC-CIS-NCR-RETURN-RESUBMIT-001 §4.6: "returned, waiting on you" marker —
   reuses the warn tint-plus-border convention, no new color token. */
.chip-returned { color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-br); }
.card-cat, .card-stage { color: var(--t3); font-size: 12px; }
.card-photos { color: var(--t3); font-size: 12px; }
.card-bot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.lamp-inline { width: 8px; height: 8px; }
.card-state { font-family: var(--font-mono); font-weight: 600; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3); }
.card-errors { margin-top: 8px; color: var(--bad); font-size: 13px; }

.empty-state { text-align: center; padding: 48px 20px; color: var(--t3); }
.empty-mark { font-family: var(--font-mono); font-size: 40px; font-weight: 600; opacity: 0.4; }

/* ---------- capture sheet ---------- */
.sheet { position: fixed; inset: 0; z-index: 40; overflow-y: auto;
  background: var(--bg); padding: 0 0 120px;
  animation: sheet-up 0.22s ease-out; }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0.4; } }
.sheet-head { position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; min-height: 52px; padding: 8px 14px; }
.sheet-title { font-size: 15px; color: var(--t1); }
.sheet-user { font-family: var(--font-mono); font-size: 11px; color: var(--t3); max-width: 30%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-flat { background: none; border: 0; color: var(--acc);
  font-family: var(--font-ui); font-weight: 600; font-size: 13px;
  padding: 0 8px; min-height: 44px; cursor: pointer; border-radius: 6px; }

/* Generic outline button (e.g. ADD PHOTO on the resubmit form). */
.btn {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  min-height: 44px; padding: 6px 16px; border-radius: 8px;
  border: 1px solid var(--line2); color: var(--t1); background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; cursor: pointer;
}
.btn:active { background: var(--raised); }

#captureForm { padding: 16px 14px; max-width: 720px; margin: 0 auto;
  display: grid; gap: 18px; }

.field { display: grid; gap: 6px; border: 0; }
.field-label {
  font-family: var(--font-mono); font-weight: 600; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3);
}

.input {
  background: var(--raised); border: 1px solid var(--line2); border-radius: 8px;
  color: var(--t1);
  font-family: var(--font-ui);
  font-size: 16px; /* >=16px so iOS doesn't zoom on focus */
  padding: 10px 12px; min-height: 48px; width: 100%;
}
.input:focus { outline: 2px solid var(--acc); outline-offset: -1px; }
.input-big { font-family: var(--font-mono); font-weight: 600; font-size: 17px;
  text-transform: uppercase; min-height: 54px; }
textarea.input { min-height: 72px; resize: vertical; }

/* category tiles */
.tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tile {
  min-height: 52px; padding: 6px 8px; cursor: pointer;
  background: var(--raised); border: 1px solid var(--line2); border-radius: 8px;
  color: var(--t2);
  font-family: var(--font-ui); font-weight: 500; font-size: 13px;
  text-align: center;
}
.tile[aria-checked="true"] {
  background: var(--acc-bg); border-color: var(--acc-br);
  color: var(--acc); font-weight: 600;
}

/* result selector plates — status tint on selection, per the mockups */
.result-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.result-plate {
  min-height: 56px; cursor: pointer; padding: 6px 10px;
  background: var(--raised); border: 1px solid var(--line2); border-radius: 8px;
  color: var(--t2);
  font-family: var(--font-ui); font-weight: 600; font-size: 13px;
  display: grid; place-content: center; text-align: center;
}
.plate-sub { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0.02em; opacity: 0.75; }
.result-plate[aria-checked="true"].result-ok   { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-br); }
.result-plate[aria-checked="true"].result-warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-br); }
.result-plate[aria-checked="true"].result-bad  { color: var(--bad); background: var(--bad-bg); border-color: var(--bad-br); }
.result-plate[aria-checked="true"].result-hold { color: var(--t1); background: var(--raised); border-color: var(--t3); }

/* defect latch */
.defect-latch {
  display: flex; align-items: center; gap: 10px; min-height: 48px;
  width: 100%; padding: 0 14px; cursor: pointer;
  background: var(--raised); border: 1px solid var(--line2); border-radius: 8px;
  color: var(--t2);
  font-family: var(--font-ui); font-weight: 600; font-size: 13px;
}
.latch-lamp { width: 8px; height: 8px; border-radius: 50%; background: var(--t3); flex-shrink: 0; }
.defect-latch[aria-pressed="true"] {
  background: var(--bad-bg); border-color: var(--bad-br); color: var(--bad);
}
.defect-latch[aria-pressed="true"] .latch-lamp { background: var(--bad); }

/* photo strip */
.photo-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.photo-add {
  flex: 0 0 84px; height: 84px; display: grid; place-content: center; gap: 2px;
  background: transparent; border: 1px dashed var(--line2); border-radius: 8px;
  color: var(--t2);
  font-family: var(--font-ui); font-weight: 600; font-size: 12px;
  text-align: center; cursor: pointer;
}
.photo-add-mark { font-size: 22px; line-height: 1; color: var(--acc); }
.photo-thumb { position: relative; flex: 0 0 84px; height: 84px; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover;
  border: 1px solid var(--line2); border-radius: 8px; }
.photo-kill {
  position: absolute; top: -8px; right: -8px; width: 32px; height: 32px;
  background: var(--surface); color: var(--bad);
  border: 1px solid var(--bad-br); border-radius: 50%;
  font-size: 16px; cursor: pointer;
}

.witnesses { background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: 12px 14px; }
.witnesses summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.witnesses[open] summary { color: var(--acc); }
.witnesses .field { margin-top: 10px; }

.form-errors { background: var(--bad-bg); border: 1px solid var(--bad-br);
  border-radius: 8px;
  color: var(--bad); padding: 12px 14px; font-size: 13px; display: grid; gap: 4px; }

/* ---------- bottom action bars ---------- */
.bottombar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line); }
.sheet-foot { position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line); }

/* The accent carries the one primary action per screen. */
.btn-primary {
  width: 100%; min-height: 52px; cursor: pointer; padding: 6px 16px;
  background: var(--acc); color: var(--acc-ink);
  border: 1px solid var(--acc); border-radius: 8px;
  font-family: var(--font-ui); font-weight: 600; font-size: 15px;
  display: inline-flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; white-space: nowrap;
}
.btn-primary:active { filter: brightness(0.92); }
.btn-sub { font-size: 10px; font-weight: 500; letter-spacing: 0.01em; opacity: 0.75; }
.btn-new { max-width: 720px; margin: 0 auto; flex-direction: row; gap: 8px; }
.btn-new-mark { font-size: 20px; line-height: 1; }

@media (min-width: 560px) {
  .tile-grid { grid-template-columns: repeat(4, 1fr); }
  .result-row { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ===================== scheduled (ITP) inspections ===================== */
/* Two-button action bar: a narrow SCHEDULED affordance + the primary
   NEW INSPECTION button (SPEC-...-SCHEDULED-V1-001). */
.bottombar { display: flex; gap: 10px; align-items: stretch; }
.bottombar .btn-new { margin: 0; flex: 1; }
.btn-sched { flex: 0 0 auto; }
.btn-secondary {
  min-height: 48px; cursor: pointer; padding: 6px 16px;
  background: transparent; color: var(--t1);
  border: 1px solid var(--line2); border-radius: 8px;
  font-family: var(--font-ui); font-weight: 600; font-size: 13px;
  display: inline-flex; gap: 8px; align-items: center; justify-content: center;
  white-space: nowrap;
}
.btn-secondary:active { background: var(--raised); }
.btn-sched-mark { font-size: 15px; line-height: 1; color: var(--acc); }

/* Mine / All scope toggle on the scheduled view (aria-pressed from app.js). */
.sched-scope { display: flex; gap: 8px; padding: 12px 14px 0;
  max-width: 720px; margin: 0 auto; }
.sched-scope-btn[aria-pressed="true"] {
  background: var(--acc-bg); border-color: var(--acc-br); color: var(--acc);
}

.sched-note { padding: 10px 14px; color: var(--t3); font-size: 12px;
  max-width: 720px; margin: 0 auto; }
.sched-list { padding: 12px 14px 28px; max-width: 720px; margin: 0 auto; }
.sched-card { cursor: pointer; }
.sched-card:active { background: var(--raised); }
.sched-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sched-item { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--t1); }
.sched-mid { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap;
  font-size: 12px; color: var(--t3); }
.sched-bot { display: flex; gap: 8px; margin-top: 8px; align-items: center; flex-wrap: wrap;
  font-size: 11px; color: var(--t3); }
.sched-date { color: var(--t1); font-family: var(--font-mono); }
.sched-ref { margin-left: auto; color: var(--t2); font-family: var(--font-mono);
  letter-spacing: 0.02em; }
.sched-type { font-family: var(--font-mono); font-weight: 600; font-size: 10px;
  letter-spacing: 0.02em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 4px; white-space: nowrap; }
.sched-type-ok   { color: var(--ok); background: var(--ok-bg); border: 1px solid var(--ok-br); }
.sched-type-warn { color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-br); }
.sched-type-bad  { color: var(--bad); background: var(--bad-bg); border: 1px solid var(--bad-br); }
.sched-type-hold { color: var(--t2); background: var(--raised); border: 1px solid var(--line2); }

/* Scheduled-context banner shown on the capture form when prefilled. */
.sched-context { margin: 12px 14px 0; padding: 10px 12px;
  background: var(--acc-bg); border: 1px solid var(--acc-br); border-radius: 8px;
  font-size: 12px; color: var(--t1); line-height: 1.5;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.card-sched { font-size: 11px; color: var(--t3); }

/* Pre-filled-from-plan fields read as confirmed context, not empty inputs. */
.input[readonly] {
  opacity: 0.7; cursor: default;
  background: var(--surface); border-style: dashed;
}
/* Richer scheduled-context banner: type chip + ref + date + witnesses + notes. */
.sched-ctx-ref { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.02em; }
.sched-ctx-date { color: var(--t2); font-family: var(--font-mono); }
.sched-ctx-wit { color: var(--t2); }
.sched-ctx-notes { flex-basis: 100%; color: var(--t2); font-style: italic; }

/* form-errors sets display:grid, which overrode the `hidden` attribute and
   left an empty red box on screen. Respect hidden explicitly. */
.form-errors[hidden] { display: none !important; }
/* DATE & WITNESSES is an always-open section head inside its card. */
.witnesses-head { display: block; color: var(--t3); }

/* Native project picker: a transparent <select> overlaid exactly on the chooser.
   iOS opens its own wheel for it (no custom dropdown that can fail to close). */
.project-pick-wrap { position: relative; display: inline-flex; align-items: baseline; }
.project-select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; background: transparent;
  opacity: 0; font-size: 16px; /* >=16px so iOS doesn't zoom on focus */
  -webkit-appearance: none; appearance: none;
}
.project-select:disabled { display: none; }

/* ---------- records (past inspections review) ---------- */
.rec-range { display: flex; gap: 10px; padding: 12px 14px 0;
  max-width: 720px; margin: 0 auto; }
.rec-range-field { flex: 1; display: grid; gap: 6px; }
.rec-note { color: var(--t3); font-size: 12px; padding: 10px 14px 0;
  max-width: 720px; margin: 0 auto; }
.rec-list { padding: 12px 14px 28px; max-width: 720px; margin: 0 auto; }
.rec-date { color: var(--t1); font-family: var(--font-mono); font-size: 11px; }
.rec-by { margin-left: auto; color: var(--t3); font-size: 11px; }

/* ---------- record detail + photo viewer ---------- */
.detail { padding: 16px 14px; max-width: 720px; margin: 0 auto; }
.card-open { cursor: pointer; }
.card-open:active { background: var(--raised); }
.d-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.d-item { font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--t1); }
.d-chips { display: flex; gap: 6px; margin: 8px 0 14px; flex-wrap: wrap; align-items: center; }
.d-row { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.d-label { flex: 0 0 120px; color: var(--t3);
  font-family: var(--font-mono); font-weight: 600; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; }
.d-val { flex: 1; color: var(--t1); font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.d-photos-head { margin: 18px 0 8px; color: var(--t3);
  font-family: var(--font-mono); font-weight: 600; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; }
/* NCR-V1-001: promotion affordance on defect-latched record detail. */
.d-raise-ncr { display: flex; width: 100%; margin: 14px 0 4px; }
.d-photos { color: var(--t3); font-size: 13px; padding-bottom: 24px; }
.d-photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.d-photo { margin: 0; }
.d-photo img { width: 100%; height: 160px; object-fit: cover; display: block;
  border: 1px solid var(--line2); border-radius: 8px; cursor: pointer; }
.d-photo figcaption { font-size: 11px; color: var(--t3); margin-top: 4px; }
.d-photo-loading, .d-photo-missing { width: 100%; height: 160px; display: grid; place-content: center;
  background: var(--raised); border: 1px solid var(--line2); border-radius: 8px;
  color: var(--bad); }
.lightbox[hidden] { display: none !important; }
/* Scrim: the one tolerated literal (allowlisted in cockpit-restyle.test.js). */
.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, 0.92);
  display: grid; place-content: center; padding: 12px; cursor: pointer; }
.lightbox img { max-width: 100%; max-height: 100dvh; object-fit: contain; }

/* ---------- weekly owner report ---------- */

.rep-language {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--acc-br);
  border-radius: 8px;
  background: var(--surface);
  color: var(--t1);
}

.rep-language-rejected { border-left-color: var(--bad-br); background: var(--surface); }
.rep-language > summary { cursor: pointer; padding: 12px; font-weight: 600; }
.rep-language > :not(summary) { margin-left: 12px; margin-right: 12px; }
.rep-language-workflow { padding: 0 0 10px; color: var(--t2); font-size: .9rem; }
.rep-language-subhead { margin: 12px 0 7px; font-weight: 600; color: var(--t1); }
.rep-language-state { padding: 2px 0 8px; }
.rep-language-state-row, .rep-language-state-confidence { margin: 4px 0; font-size: .86rem; line-height: 1.4; }
.rep-language-state-confidence { color: var(--t3); }
.rep-language-section { margin: 0 0 14px; }
.rep-language-section-title { margin: 8px 0 6px; font-weight: 600; text-transform: capitalize; color: var(--t1); }
.rep-language-paragraph { margin-bottom: 10px; padding: 11px; border-left: 3px solid var(--line2);
  background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
.rep-language-paragraph-text { font-size: .92rem; line-height: 1.5; }
.rep-language-why { margin-top: 8px; font-size: .8rem; color: var(--t2); }
.rep-language-why > summary { cursor: pointer; font-weight: 600; }
.rep-language-linked-judgement, .rep-language-linked-evidence, .rep-language-linked-quantity { margin: 7px 0 0 12px; line-height: 1.4; }
.rep-language-linked-judgement { color: var(--t1); }
.rep-language-linked-quantity { font-family: var(--font-mono); font-size: .75rem; }
.rep-language-item { margin-bottom: 9px; padding: 9px; border-radius: 6px; background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--line); }
.rep-language-item-title { font-weight: 600; font-size: .88rem; text-transform: none; }
.rep-language-statement, .rep-language-implication, .rep-language-question, .rep-language-refs { margin-top: 5px; font-size: .86rem; line-height: 1.35; }
.rep-language-question { color: var(--warn); }
.rep-language-refs { color: var(--t3); font-family: var(--font-mono); font-size: .78rem; }
.rep-language-facts { margin: 7px 0 0; padding: 8px; max-height: 180px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--raised); border-radius: 5px; font-size: .72rem; }
.rep-language-flag { margin: 5px 0; font-size: .84rem; }
.rep-language-flag-error { color: var(--bad); }
.rep-language-flag-warning { color: var(--warn); }
.rep-link { color: var(--acc); border-color: var(--acc-br); }
.rep-form { display: grid; gap: 14px; margin-bottom: 16px; padding: 12px 14px 0;
  max-width: 720px; }
.rep-result { margin-top: 4px; padding: 0 14px; max-width: 720px; }
.rep-note { color: var(--t3); font-size: 13px; padding: 10px 0; }
.rep-err { color: var(--bad); font-size: 13px; padding: 12px;
  background: var(--bad-bg); border: 1px solid var(--bad-br); border-radius: 8px; }
.rep-ok { background: var(--ok-bg); border: 1px solid var(--ok-br); border-radius: 8px;
  padding: 16px; display: grid; gap: 8px; }
.rep-ok-title { font-weight: 600; font-size: 15px; color: var(--ok); }
.rep-counts { color: var(--t1); font-size: 13px; }
.rep-llm { color: var(--t3); font-size: 12px; font-style: italic; }
.rep-status { color: var(--acc); font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
.rep-open { display: block; text-align: center; margin-top: 6px; padding: 14px;
  min-height: 48px;
  background: var(--acc); color: var(--acc-ink); border-radius: 8px;
  font-weight: 600; font-size: 14px;
  text-decoration: none; }
.rep-hint { color: var(--t3); font-size: 11px; margin-top: 4px; }

/* Append-only inspection amendments. */
.card-amended { font-size: .8rem; color: var(--t2); }
.record-voided .card-item, .record-voided .d-item,
.amend-history-row.record-voided { text-decoration: line-through; }
.d-amend-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.amend-form, .amend-photo-editor { display: grid; gap: .75rem; margin: 1rem 0; }
.amend-field { display: grid; gap: .3rem; }
.amend-field input:not([type="checkbox"]), .amend-field select, .amend-field textarea {
  width: 100%; box-sizing: border-box; font: inherit; padding: .6rem;
  font-size: 16px; /* >=16px so iOS doesn't zoom on focus (built bare by ui.js, no .input class) */
  background: var(--raised); border: 1px solid var(--line2); border-radius: 8px;
  color: var(--t1);
}
.amend-field textarea { min-height: 5rem; }
.amend-history-row, .amend-queued { padding: .6rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.amend-status, .amend-invalid { white-space: pre-wrap; }