/* States Connect / Record 720 shared theme — SINGLE SOURCE OF TRUTH.
   All Record 720 pages (index.html capture, history.html, review.html) link this
   file so they stay visually consistent and can be embedded as the Record 720
   module inside the States Internal app shell (module grid + role picker).
   Auth model shared across pages: API token in sessionStorage under the
   `photoapp_token` key; device pairing via /api/pair_request + /api/pair_status. */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap");

:root {
  --bg:#f3f3ef; --surface:#fff; --surface-2:#ecece7; --ink:#11110f; --muted:#66675f;
  --line:#d5d5cd; --accent:#ffe500; --accent-ink:#0a0a09;
  --good:#198754; --warn:#b55d00; --bad:#c9383f; --blue:#1769aa;
  --shadow:0 16px 40px rgba(17,17,15,.08);
  --sidebar:#090909; --sidebar-ink:#fff; --sidebar-muted:#a7a79f;
  color-scheme:light;
}

body {
  font-family:"Manrope","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}

/* Shared app header: dark bar, logo top-left, hazard-stripe accent.
   Usage: <header class="r720-header"> ... <div class="hazard-bar"></div> */
.r720-header { background:var(--sidebar); padding:14px 16px; position:sticky; top:0; z-index:10; }
.r720-header .nav-links { float:right; font-size:14px; font-weight:700; padding:4px 0; }
.r720-header .nav-links a { color:var(--accent); text-decoration:none; margin-left:14px; }
.r720-header .brand-row { display:flex; align-items:center; gap:12px; }
.r720-header .brand-logo { height:42px; width:auto; display:block; }
.r720-header .store-ind { display:inline-block; font-size:13px; font-weight:800; letter-spacing:2px;
  background:var(--accent); color:var(--accent-ink); border-radius:8px;
  padding:5px 12px; white-space:nowrap; }
.r720-header p.sub { margin:2px 0 0; font-size:12px; color:var(--sidebar-muted); }
.r720-header h1 { margin:0; font-size:20px; color:var(--sidebar-ink); letter-spacing:1px; font-weight:800; }

/* Portal signature: diagonal yellow/black hazard stripes under the header */
.hazard-bar { height:4px;
  background:repeating-linear-gradient(135deg, #050505 0 9px, var(--accent) 9px 18px); }