/* openroar v10 — clean editorial paper-scroll landing.
   Mobile-first. One idea per section. Small crisp painted vignettes on paper,
   never a stretched panorama. Built on Design System V1 tokens (tokens.css). */

/* ============ BASE / PAPER ============
   .oros paints its own --bg over body's hardcoded default (tokens.css) so a
   theme/colour-safe switch repaints the WHOLE page, incl. the gaps between
   sections and any overscroll area, not just individual cards. */
.oros{ font-family:'Inter',system-ui,sans-serif; background:var(--bg); min-height:100vh; }
.oros h1,.oros h2,.oros h3,.oros .disp{ font-family:'Fraunces',serif; font-weight:500; letter-spacing:-.01em; color:var(--ink); }
.or-wrap{ max-width:640px; margin:0 auto; padding:0 20px; }
.or-wrap.wide{ max-width:900px; }
main{ display:block; }
section{ padding:var(--sp-8) 0; }
section + section{ border-top:1px solid var(--hair); }
.kicker{ font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.06em; text-transform:lowercase; color:var(--accent-deep); margin:0 0 10px; }
h2.h{ font-size:clamp(24px,5.6vw,34px); line-height:1.14; margin:0 0 14px; }
p.lead{ font-size:clamp(16px,4vw,18px); line-height:var(--lh-body); color:var(--ink-2); margin:0 0 16px; max-width:56ch; }
p.body{ font-size:15px; line-height:var(--lh-body); color:var(--muted); margin:0 0 12px; max-width:58ch; }

/* ============ HEADER — slim, sticky ============ */
.or-top{ position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:10px; padding:12px 20px; background:color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--hair); }
.or-top .mark{ width:20px; height:22px; flex:none; }
.or-top .word{ font-family:'Fraunces',serif; font-weight:600; font-size:15px; letter-spacing:-.01em; }
.a11y-row{ margin-left:auto; display:flex; gap:6px; }
.a11y-pill{ font-size:11px; font-weight:600; padding:6px 11px; border-radius:var(--wob-pill); border:1.5px solid var(--hair-2); background:var(--surface); color:var(--muted); white-space:nowrap; }
.a11y-pill[aria-pressed="true"]{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }

/* ============ HERO ============ */
.hero{ padding-top:var(--sp-7); text-align:left; }
.hero h1{ font-size:clamp(30px,8vw,46px); line-height:1.08; margin:0 0 18px; }
.hero .lead{ font-size:clamp(16px,4.2vw,19px); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.vg{ display:block; border-radius:var(--wob-card); box-shadow:var(--shadow-2); border:1px solid rgba(255,255,255,.5); }
.vg-frame{ margin-top:28px; display:flex; justify-content:flex-start; }
.vg-frame img{ max-width:100%; height:auto; }
.vg-cap{ font-size:11px; color:var(--faint); margin-top:8px; font-style:italic; }

/* ============ CONSENT BANNER — first thing on load, on the design system,
   never a generic edge-to-edge cookie strip. ============ */
.or-consent{ position:fixed; left:0; right:0; bottom:0; z-index:80; display:flex; justify-content:center; padding:14px; pointer-events:none; }
.or-consent-card{ pointer-events:auto; max-width:440px; width:100%; background:var(--surface); border:1px solid var(--hair-2); border-radius:var(--wob-card); box-shadow:var(--shadow-2); padding:18px 20px; animation:or-rise var(--mo-slow) var(--ease-spring); }
.or-consent-text{ font-size:13.5px; line-height:1.55; color:var(--ink-2); margin:0 0 14px; }
.or-consent-text a{ color:var(--accent-deep); text-decoration:underline; }
.or-consent-actions{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
@media (min-width:900px){
  .or-consent{ justify-content:flex-start; padding:20px; }
  .or-consent-card{ max-width:380px; }
}

/* ============ BUTTONS / FIELDS (subset, DS V1) ============ */
.or-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:var(--ctl); padding:0 20px; border-radius:var(--wob-btn); font-weight:600; font-size:14px; transition:transform var(--mo-fast) var(--ease-out),box-shadow var(--mo-fast) var(--ease-out); }
.or-btn:hover{ transform:translateY(-2px); }
.or-btn:active{ transform:scale(.96); }
.or-btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.or-btn-solid{ background:var(--solid); color:var(--on-solid); box-shadow:var(--shadow-1); }
.or-btn-accent{ background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-1); }
/* AA contrast fix. light theme gold button was #B68A3C on #F7F3EA at 2.83:1, it failed.
   now #8C6826 on #F7F3EA is about 4.6:1, it passes AA. dark theme and the accent variants
   (green, coral, clay, lavender, teal) keep their own tokens, untouched. */
.oros:not([data-or-theme="dark"]):not([data-or-accent]) .or-btn-accent,
.oros:not([data-or-theme="dark"])[data-or-accent="gold"] .or-btn-accent{ background:#8C6826; }
.or-btn-accent:hover{ filter:brightness(.92); }
.or-btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--hair-2); }
.or-btn-ghost:hover{ border-color:var(--accent); }
.or-btn-sm{ height:calc(var(--ctl) - 10px); padding:0 15px; font-size:12.5px; }
.or-field{ width:100%; background:var(--surface-2); border:1px solid var(--hair-2); border-radius:var(--wob-in); padding:0 14px; height:var(--ctl); color:var(--ink); font-size:15px; outline:none; }
.or-field:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.or-chip{ display:inline-flex; align-items:center; gap:7px; background:var(--surface-2); border:1px solid var(--hair-2); border-radius:var(--wob-pill); padding:8px 13px; font-size:13px; color:var(--ink-2); }
.or-chip:hover{ border-color:var(--accent); }
.or-chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.or-join-form{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.or-join-form input{ flex:1; min-width:180px; }

/* ============ SOLO-FOCUS (one agent, alone, generous space) ============ */
.solo{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; }
.solo .solo-avatar{ width:100%; max-width:340px; height:auto; object-fit:cover; border-radius:var(--wob-card); box-shadow:var(--shadow-2); border:1px solid rgba(255,255,255,.5); margin-bottom:20px; }
.solo-name{ font-family:'Fraunces',serif; font-size:20px; font-weight:600; }
.solo-role{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--faint); text-transform:lowercase; margin-bottom:14px; }
.solo-quote{ font-family:'Fraunces',serif; font-style:italic; font-size:17px; color:var(--ink-2); max-width:44ch; margin:0 0 18px; }
.solo-body{ max-width:52ch; }

/* ============ GATE WIDGET ============ */
.or-rule-box{ display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--hair-2); border-radius:var(--wob-in); padding:0 14px; height:48px; margin-bottom:14px; color:var(--muted); }
.or-rule-input{ flex:1; background:transparent; border:0; outline:0; font-size:14px; color:var(--ink); font-family:inherit; }
.or-verdict{ margin-top:14px; padding:14px 16px; border-radius:var(--wob-in); background:var(--surface-2); border-left:3px solid var(--hair-2); font-size:14px; text-align:left; animation:or-rise var(--mo-mid) var(--ease-out); }
.or-verdict-head{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:16px; margin-bottom:4px; }
.or-verdict-pass{ border-left-color:var(--ok); }
.or-verdict-hold{ border-left-color:var(--danger); }
.or-verdict-checking{ border-left-color:var(--info); }
.or-verdict-body{ margin:0; color:var(--ink-2); }
.or-provider-tag{ margin-top:8px; display:flex; align-items:center; gap:6px; font-size:10.5px; color:var(--faint); }
.or-log{ display:flex; flex-direction:column; gap:6px; margin-top:10px; text-align:left; }
.or-log-entry{ position:relative; display:grid; grid-template-columns:auto 1fr; gap:2px 10px; background:var(--surface-2); border-radius:var(--wob-in); padding:9px 12px; font-size:11.5px; animation:or-stamp .38s var(--ease-spring); }
@keyframes or-stamp{ 0%{ transform:scale(1.1) rotate(-2deg); opacity:0; } 100%{ transform:none; opacity:1; } }
.or-log-ts{ grid-column:1; font-family:'JetBrains Mono',monospace; color:var(--faint); }
.or-log-action{ grid-column:2; color:var(--ink); font-weight:500; }
.or-log-verdict{ grid-column:1; font-weight:700; font-size:10px; text-transform:uppercase; }
.or-log-verdict.pass{ color:var(--ok); }
.or-log-verdict.hold{ color:var(--danger); }
.or-log-hash{ grid-column:2; display:flex; align-items:center; gap:6px; color:var(--faint); font-family:'JetBrains Mono',monospace; font-size:10px; }
.chain-ok{ color:var(--faint); }
.chain-broken{ color:var(--danger); font-weight:700; }
.or-log-entry.tampered{ box-shadow:inset 0 0 0 1.5px var(--danger); }
.or-honesty-card{ margin-top:16px; background:var(--accent-soft); border-radius:var(--wob-in); padding:13px 15px; font-size:12.5px; color:var(--ink-2); line-height:1.5; text-align:left; }
.or-demo-note{ font-size:11px; color:var(--faint); margin-top:8px; text-align:left; }
.gate-card{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--wob-card); padding:22px 20px; box-shadow:var(--shadow-1); text-align:left; margin-top:8px; }

/* ============ LISTEN PLAYER ============ */
.or-player{ background:var(--surface-2); border-radius:var(--wob-in); padding:14px 16px; margin-bottom:10px; }
.or-player-head{ display:flex; justify-content:space-between; font-size:12.5px; font-weight:600; margin-bottom:8px; }
.or-player-len{ color:var(--muted); font-weight:400; }
.or-player-controls{ display:flex; align-items:center; gap:10px; }
.or-play-btn{ width:38px; height:38px; border-radius:50%; background:var(--accent); color:var(--on-accent); display:inline-flex; align-items:center; justify-content:center; flex:none; font-size:13px; }
.or-scrub{ position:relative; height:5px; border-radius:3px; background:var(--hair-2); cursor:pointer; }
.or-scrub-fill{ position:absolute; inset:0; width:0%; border-radius:3px; background:var(--accent); }
.or-player-time{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--faint); white-space:nowrap; }
/* a real, draggable speed slider (0.5×–1.5×) — matches the root experience */
.or-speed{ flex:none; display:flex; align-items:center; gap:7px; -webkit-tap-highlight-color:transparent; }
.or-speed-val{ flex:none; min-width:34px; text-align:right; font-family:'JetBrains Mono',monospace; font-size:10.5px; line-height:1; color:var(--accent-deep); }
input[type=range].or-speed-range{
  -webkit-appearance:none; appearance:none;
  width:66px; height:2px; margin:0; padding:0;
  background:color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius:2px; cursor:pointer; outline:none;
}
input[type=range].or-speed-range:focus-visible{ outline:var(--focus-w,2px) solid var(--focus,var(--accent)); outline-offset:4px; }
input[type=range].or-speed-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:50%; background:var(--accent); border:none; cursor:pointer; box-shadow:0 0 0 3px var(--surface); }
input[type=range].or-speed-range::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background:var(--accent); border:none; cursor:pointer; box-shadow:0 0 0 3px var(--surface); }

/* ============ INSTALL — three tracks ============ */
.tracks{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:8px; }
.track{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--wob-card); padding:20px; display:flex; flex-direction:column; }
.track-tag{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.05em; text-transform:lowercase; color:var(--accent-deep); background:var(--accent-soft); display:inline-block; padding:4px 9px; border-radius:var(--wob-pill); margin:0 0 10px; align-self:flex-start; }
.track h3{ font-size:17px; margin:0 0 8px; }
.track p{ font-size:13.5px; color:var(--muted); margin:0 0 14px; }
.track .or-btn{ margin-top:auto; align-self:flex-start; }
.track-code{ background:var(--surface-2); border:1px solid var(--hair-2); border-radius:var(--wob-in); padding:12px 14px; margin:0 0 14px; overflow-x:auto; }
.track-code code{ font-family:'JetBrains Mono',monospace; font-size:12px; line-height:1.6; color:var(--ink-2); white-space:pre; }

/* ============ PRIDE strip ============ */
.pride-vg{ width:100%; max-width:600px; border-radius:var(--wob-card); box-shadow:var(--shadow-2); margin-top:20px; }

/* ============ FOOTER ============ */
footer{ padding:var(--sp-8) 0 var(--sp-7); }
.foot-links{ display:flex; flex-wrap:wrap; gap:14px; font-size:12.5px; margin-bottom:16px; }
.foot-credit{ font-size:11.5px; color:var(--faint); }
.egg-quote{ font-family:'Fraunces',serif; font-style:italic; font-size:13px; color:var(--faint); margin-top:10px; cursor:pointer; }
.egg-quote[data-open="1"]{ color:var(--accent-deep); }
.egg-reveal{ display:none; font-size:12px; color:var(--muted); margin-top:6px; max-width:52ch; }
.egg-quote[data-open="1"] + .egg-reveal{ display:block; }

/* ============ DESKTOP (≥900px) — richer, still calm ============ */
@media (min-width:900px){
  .or-wrap{ max-width:720px; }
  .or-wrap.wide{ max-width:960px; }
  .split{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }
  .split .vg-frame{ margin-top:0; justify-content:flex-end; }
  .tracks{ grid-template-columns:repeat(3,1fr); }
  section{ padding:96px 0; }
  .solo .solo-avatar{ max-width:460px; }
}
@media (min-width:1200px){
  .or-wrap{ max-width:780px; }
  .solo .solo-avatar{ max-width:500px; }
}

/* ============ EASY READ — a genuinely different, simpler page ============
   Real content mode, not a font-size nudge: single linear column (already the
   default), larger type + generous spacing, plain-language copy swapped in,
   decoration and secondary/advanced interactions stripped so there is less to
   parse, not just bigger letters. */
.oros[data-easyread="on"]{ --tsc:1; }
.oros[data-easyread="on"] body,
.oros[data-easyread="on"]{ font-size:19px; line-height:1.85; }
.oros[data-easyread="on"] .copy-normal{ display:none !important; }
.oros[data-easyread="on"] .copy-easy{ display:block !important; font-size:19px; line-height:1.85; max-width:38ch; }
.oros[data-easyread="on"] h1{ font-size:clamp(30px,7vw,38px) !important; line-height:1.2 !important; }
.oros[data-easyread="on"] h2.h{ font-size:26px !important; line-height:1.25 !important; }
.oros[data-easyread="on"] .kicker{ font-size:13px; }
.oros[data-easyread="on"] .vg-frame,
.oros[data-easyread="on"] .pride-vg,
.oros[data-easyread="on"] .solo-avatar,
.oros[data-easyread="on"] .egg-quote,
.oros[data-easyread="on"] .or-chip-row,
.oros[data-easyread="on"] #gate-edit-toggle,
.oros[data-easyread="on"] .track-code,
.oros[data-easyread="on"] .track-tag,
.oros[data-easyread="on"] #gate-chain-note,
.oros[data-easyread="on"] .or-honesty-card,
.oros[data-easyread="on"] .or-demo-note,
.oros[data-easyread="on"] .or-provider-tag{ display:none !important; }
.oros[data-easyread="on"] section{ padding:56px 0; }
.oros[data-easyread="on"] .or-btn{ height:56px; font-size:17px; padding:0 24px; }
.oros[data-easyread="on"] .or-field{ height:56px; font-size:17px; }
.oros[data-easyread="on"] .track p,
.oros[data-easyread="on"] p.body{ font-size:17px; color:var(--ink); }

/* ============ COLOUR SAFE — whole-page recolour (Okabe–Ito based) ============
   Not a status-dot swap: every semantic token shifts to a colour-blind-safe,
   high-contrast scheme, so links, buttons, focus rings, accents and status
   all repaint. Status also keeps text labels/icons — colour is never the
   only signal (see gate verdict + status trio markup). */
.oros[data-colorsafe="on"]{
  --bg:#EAF0F3; --bg-2:#DCE6EA;
  --surface:#FFFFFF; --surface-2:#EDF2F4; --surface-3:#DCE6EA;
  --ink:#000000; --ink-2:#101010;
  --muted:rgba(0,0,0,.74); --faint:rgba(0,0,0,.52); --hair:rgba(0,0,0,.18); --hair-2:rgba(0,0,0,.30);
  --accent:#0072B2; --accent-deep:#00517F; --accent-soft:rgba(0,114,178,.16); --on-accent:#FFFFFF;
  --ok:#009E73; --danger:#D55E00; --info:#0072B2;
  --solid:#000000; --on-solid:#FFFFFF;
  --focus:#0072B2; --focus-w:3px;
}
.oros[data-colorsafe="on"] a{ color:#00517F; text-decoration:underline; }
.oros[data-colorsafe="on"] .or-grain{ display:none; }
.oros[data-colorsafe="on"] .vg,
.oros[data-colorsafe="on"] .pride-vg,
.oros[data-colorsafe="on"] .vg-frame img{ filter:saturate(.5) contrast(1.08) brightness(1.02); }
/* status is never colour-only: pass/hold always carry a check/hold glyph + text label (see gate.js svgIcon + verdict headline) */