/* ── OTH Intelligence brand components — Brand Book v1.1 ─────────────
   Pair with Docs/brand/oth_brand_book.html + Docs/brand/BRAND_SPEC.md.
   Loaded by base.html AND standalone pages (login), so tokens and
   components live here, not in style.css.
   Color semantics: red = brand/command/alert · amber = data · teal =
   ambient signal. No new accent colors. */

:root {
  --oth-brand-red:       #CE2028;  /* cartouche, kicker, commands */
  --oth-brand-red-light: #C41E25;  /* lockup on light fields */
  --oth-brand-red-dark:  #D62830;  /* lockup on dark fields */
  --oth-alert-red:       #E5484D;  /* existing alert semantics + motto on dark */
  --oth-serif: "Libre Caslon Text", Georgia, serif;
}

/* ── Full lockup (FIG-01/02) — login, standby, exports, covers ────── */
.oth-lockup .row  { display: flex; align-items: center; }
.oth-lockup .mark { background: var(--lk-red); color: #fff; flex: none;
  font-family: var(--oth-serif); font-weight: 700; line-height: 1;
  font-size: 28px; padding: 7px 10px 9px; }
.oth-lockup .word { font-family: var(--oth-serif); font-weight: 700;
  font-size: 19.5px; letter-spacing: .055em; margin-left: 12px;
  color: var(--lk-text); white-space: nowrap; }
.oth-lockup .hz   { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.oth-lockup .k    { width: 8px; height: 8px; flex: none; background: var(--lk-red); }
.oth-lockup .r    { flex: 1; height: 1.5px; background: var(--lk-rule); }
.oth-lockup .motto{ margin-top: 12px; font-size: 10px; letter-spacing: .34em;
  color: var(--lk-motto); font-weight: 600; }
.oth-lockup .motto span { color: var(--lk-text); padding: 0 7px; letter-spacing: normal; }
/* dark fields */
.oth-lockup.dark  { --lk-red: var(--oth-brand-red-dark);  --lk-text: #F0EEE8;
  --lk-rule: rgba(240, 238, 232, .72); --lk-motto: var(--oth-alert-red); }
/* light fields */
.oth-lockup.light { --lk-red: var(--oth-brand-red-light); --lk-text: #14181D;
  --lk-rule: #14181D; --lk-motto: var(--oth-brand-red-light); }
/* HARD RULE: .word never wraps, clips, or truncates. Under ~320px of
   available width both faces scale by the same ratio, tracking kept. */
@media (max-width: 360px) {
  .oth-lockup .mark { font-size: 24px; padding: 6px 8px 8px; }
  .oth-lockup .word { font-size: 16.5px; margin-left: 10px; }
}

/* ── Corner mark (FIG-03) — cartouche alone: favicon, tabs, chrome ── */
.oth-mark { background: var(--oth-brand-red); color: #fff; flex: none;
  display: inline-block;
  font-family: var(--oth-serif); font-weight: 700; line-height: 1;
  letter-spacing: .03em; font-size: 30px; padding: 7px 11px 10px; }

/* ── Corner stack (FIG-04) — THE in-terminal brand element, sidebar ──
   Stack font-size and line-height scale TOGETHER: the 3-line block
   must optically match the cartouche height. Sidebar is ink in both
   themes, so the stack stays warm-white; .on-light is the cream/paper
   variant for any future light surface. */
.oth-corner { display: flex; align-items: center; gap: 12px; }
.oth-corner .stack { font-size: 7.5px; letter-spacing: .3em; font-weight: 600;
  line-height: 2.15; color: #F0EEE8; text-transform: uppercase; }
.oth-corner .stack span { display: block; }
.oth-corner.on-light .stack { color: #14181D; }

/* ── View header (Option 3 — horizon rule; Coder-picked Jul 12) ────
   Standard page header for every terminal tab: tracked mono caps
   title ({NAV LABEL} — {DESCRIPTOR}), the lockup's horizon rule
   (red kicker + hairline), amber meta line carrying counts and
   freshness stamps only — no emoji, no sentences, no instructions.
   Ivory guards carry !important against the theme's carpet repaint. */
.oth-view-header { margin-bottom: 18px; }
.oth-view-header .vh-title {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: #E6E4DE; line-height: 1.4;
}
.oth-view-header .vh-title .dim { color: #79808F; font-weight: 500; }
.oth-view-header .vh-rule { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.oth-view-header .vh-rule .k { width: 8px; height: 8px; flex: none; background: var(--oth-brand-red); }
.oth-view-header .vh-rule .r { flex: 1; height: 1px; background: rgba(240, 238, 232, .22); }
.oth-view-header .vh-meta {
  margin-top: 9px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px; font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; color: #E2B96A;
}
.oth-view-header .vh-meta .m { color: #79808F; font-weight: 500; }
/* Ivory Editorial serifs every h1..h4 with !important — the view
   header is chrome (FIG-06: mono, never serif for UI labels). */
[data-theme="light"] .oth-view-header .vh-title { color: #1A222C !important;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important; }
/* Ivory contrast floor (2026-07-29): #77715F measured 4.24:1 and #8F6A1E
   4.31:1 against the view-header ground — both under 4.5. These render on
   EVERY tab. Raised to #6A655B (5.16) and #7E6318 (5.07); both also clear
   the floor on the legacy ivory paper #F7F4EF and on raised cards #E7E9E4.
   Light-scoped only — dark values above are untouched. */
[data-theme="light"] .oth-view-header .vh-title .dim { color: #6A655B !important; }
[data-theme="light"] .oth-view-header .vh-rule .k { background: var(--oth-brand-red-light) !important; }
[data-theme="light"] .oth-view-header .vh-rule .r { background: rgba(20, 24, 29, .3) !important; }
[data-theme="light"] .oth-view-header .vh-meta { color: #7E6318 !important; }
[data-theme="light"] .oth-view-header .vh-meta .m { color: #6A655B !important; }

/* ── Footer status bar (FIG-11) — every terminal view ─────────────
   Fixed 24px strip: name left, feed state + Canada line right. No
   motto here — it lives in the corner stack. Purpose: every clipped
   screenshot self-identifies. Ivory guards carry !important because
   the theme's carpet override repaints color/border on every node. */
.oth-footer {
  position: fixed; left: 0; right: 0; bottom: 0; height: 24px; z-index: 200;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 16px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px; letter-spacing: .28em; text-transform: uppercase;
  background: #080B11; border-top: 1px solid #21262f; color: #79808F;
}
.oth-footer .brand { color: #E6E4DE; font-weight: 600; letter-spacing: .3em; }
.oth-footer .live i { font-style: normal; color: #45E0C9; }
[data-theme="light"] .oth-footer { background: #EDE7D8 !important;
  border-top: 1px solid #DCD3BC !important; color: #6A655B !important; }  /* #77715F = 3.95 on this fill */
[data-theme="light"] .oth-footer .brand { color: #1A222C !important; }
[data-theme="light"] .oth-footer .live i { color: #0E8C7F !important; }
/* The bar owns the viewport's last 24px: sidebar and content yield. */
.sidebar { bottom: 24px; }
.main { padding-bottom: 24px; }
/* ≤768px the sidebar becomes the bottom nav — the strip stands down. */
@media (max-width: 768px) {
  .oth-footer { display: none; }
  .sidebar { bottom: 0; }
}
@media print { .oth-footer { display: none !important; } }

/* ── Print/PDF masthead (FIG-14) — see _print_masthead.html ──────── */
.oth-print-masthead { display: none; }
@media print {
  .oth-print-masthead { display: block !important; margin-bottom: 16pt; }
  .oth-print-masthead .oth-lockup .mark,
  .oth-print-masthead .oth-lockup .k { background: #C41E25 !important; color: #fff !important; }
  .oth-print-masthead .oth-lockup .word { color: #14181D !important; }
  .oth-print-masthead .oth-lockup .r { background: #14181D !important; }
  .oth-print-row2 {
    display: flex; justify-content: space-between; margin-top: 8pt;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    font-size: 7.5pt; letter-spacing: .3em; font-weight: 600; color: #14181D !important;
  }
  .oth-print-row2 .motto-line { color: #C41E25 !important; }
  .oth-print-row2 .motto-line span { color: #14181D !important; padding: 0 6px; letter-spacing: normal; }
}

/* The Ivory theme repaints every sidebar descendant grey with !important
   (style.css). The sidebar stays ink in both themes — the dark chrome is
   the constant brand frame — so the cartouche and stack must hold their
   dark-field colors through that carpet override. */
[data-theme="light"] .sidebar-brand .oth-mark,
.sidebar-brand .oth-mark { color: #fff !important;
  background: var(--oth-brand-red) !important; }
[data-theme="light"] .sidebar-brand .oth-corner .stack,
[data-theme="light"] .sidebar-brand .oth-corner .stack span,
.sidebar-brand .oth-corner .stack,
.sidebar-brand .oth-corner .stack span { color: #F0EEE8 !important; }

/* ── Ivory: the page canvas itself (2026-07-30) ───────────────────────────
   `.main` is capped at 1200px, so on a viewport wider than ~1420px a strip
   down the right is painted by nobody and whatever is behind it shows. In
   ivory that was a black band, varying with window width and scroll
   position; invisible in dark because it matched. Reported live 2026-07-30.

   TWO separate defects were behind it, both fixed here.

   1. `html` was dark. style.css:22 sets `html, body { background: var(--bg) }`
      and nothing re-themes html, because `data-theme` lives ON <body> and no
      descendant selector can reach its parent. `:has()` reaches upward.

   2. `body` was ALSO dark on most tabs — and this is the load-bearing one.
      `[data-theme="light"] body { … }` is a DEAD SELECTOR: it means "a body
      inside an element carrying data-theme", but the attribute is on body
      itself, so body is never its own descendant. Verified with
      `document.body.matches(...)` -> false. Every such rule in the codebase
      has therefore never applied: style.css:1096, style.css:1321, and the
      copies in ~22 tab templates. The correct form is `body[data-theme=…]`.
      /media and /access-draft only looked right because their H token blocks
      redefine `--bg` on body, which `html, body { background: var(--bg) }`
      then picks up — not because any body rule worked.

   Colour choice: #F4EFE4 is what `.main` computes to on every tab measured
   (/media, /access-draft, /hansard, /, /org-charts, /legislature), so the
   margin becomes invisible rather than merely non-black. The H palette's
   paper is #F2F2ED; unifying .main onto it is foundation-phase work, and
   until then matching .main is what removes the seam. Do not "correct" this
   to #F2F2ED on its own — that reintroduces a visible edge.

   Light only — dark verified byte-identical by pixel diff. */
html:has(body[data-theme="light"]) { background: #F4EFE4 !important; }
body[data-theme="light"] { background: #F4EFE4 !important; }