/* RootOptics primitives — ADR-005 step 1.
   Every value traces to design/tokens.css. Nothing here invents a colour.
   Governing rule from the approved direction: COLOUR APPEARS ONLY WHERE DATA IS.
   Chrome, nav, buttons and headings are ink on vellum. If something is coloured it is
   because it is a measurement, a source confirmation, or a miss of ours. */

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{ margin:0; background:var(--ro-sheet); color:var(--ro-ink);
      font-family:var(--ro-font-sans); font-size:15px; line-height:1.55;
      font-feature-settings:"kern" 1,"liga" 1; }
a{ color:inherit; text-decoration:none }
a:hover{ text-decoration:underline; text-underline-offset:3px }
:focus-visible{ outline:2px solid var(--ro-cyan); outline-offset:2px }
img,svg{ max-width:100%; display:block }

/* ── measure ─────────────────────────────────────────────────────── */
.ro-wrap{ max-width:1180px; margin:0 auto; padding:0 28px }
.ro-narrow{ max-width:720px }
.ro-grid{ display:grid; gap:var(--ro-pad) }
@media(min-width:760px){ .ro-grid--2{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:1000px){ .ro-grid--3{ grid-template-columns:repeat(3,1fr) } }

/* ── type scale ──────────────────────────────────────────────────── */
.ro-display{ font-size:clamp(30px,4.4vw,52px); line-height:1.04;
             letter-spacing:var(--ro-track-display); font-weight:600; margin:0 }
.ro-h2{ font-size:clamp(21px,2.3vw,27px); line-height:1.18;
        letter-spacing:-0.018em; font-weight:600; margin:0 }
.ro-h3{ font-size:16px; font-weight:600; margin:0 }
.ro-lede{ font-size:17px; color:var(--ro-ink-2); max-width:62ch; margin:14px 0 0 }
.ro-note{ font-size:13px; color:var(--ro-ink-2) }
.ro-quiet{ color:var(--ro-ink-3) }

/* ── title block — a drawing convention, carrying real provenance ── */
.ro-titleblock{ border:var(--ro-hair) solid var(--ro-rule); background:var(--ro-card);
                display:grid; grid-template-columns:repeat(2,1fr) }
@media(min-width:720px){ .ro-titleblock{ grid-template-columns:repeat(4,1fr) } }
.ro-tb-cell{ padding:11px 14px; border-right:var(--ro-hair) solid var(--ro-rule-2);
             border-bottom:var(--ro-hair) solid var(--ro-rule-2) }
.ro-tb-cell:last-child{ border-right:0 }
.ro-tb-k{ font-family:var(--ro-font-mono); font-size:10px;
          letter-spacing:var(--ro-track-mono); text-transform:uppercase;
          color:var(--ro-ink-3); display:block; margin-bottom:3px }
.ro-tb-v{ font-family:var(--ro-font-mono); font-size:13px; color:var(--ro-ink) }

/* ── card — the tile for one business. Contract: exactly three metric slots ── */
.ro-card{ background:var(--ro-card); border:var(--ro-hair) solid var(--ro-rule);
          padding:var(--ro-pad); display:flex; flex-direction:column; gap:12px;
          transition:border-color .13s ease }
a.ro-card:hover{ border-color:var(--ro-ink-3); text-decoration:none }
.ro-card__head{ display:flex; justify-content:space-between; gap:12px; align-items:baseline }
.ro-card__title{ font-size:17px; font-weight:600; letter-spacing:-0.012em; line-height:1.25 }
.ro-card__line{ font-size:13.5px; color:var(--ro-ink-2); margin:0 }
.ro-card__metrics{ display:grid; grid-template-columns:repeat(3,1fr);
                   border-top:var(--ro-hair) solid var(--ro-rule-2); padding-top:11px;
                   margin-top:auto }
.ro-metric__k{ font-family:var(--ro-font-mono); font-size:10px;
               letter-spacing:var(--ro-track-mono); text-transform:uppercase;
               color:var(--ro-ink-3); display:block }
.ro-metric__v{ font-family:var(--ro-font-mono); font-size:16px; color:var(--ro-ink);
               font-variant-numeric:tabular-nums lining-nums; margin-top:2px }
.ro-metric__v--none{ color:var(--ro-ink-3) }

/* ── chip — a label, never a status light. No colour: it is not data ── */
.ro-chip{ display:inline-block; font-family:var(--ro-font-mono); font-size:10px;
          letter-spacing:var(--ro-track-mono); text-transform:uppercase;
          padding:3px 8px; border:var(--ro-hair) solid var(--ro-rule);
          color:var(--ro-ink-2); white-space:nowrap }
.ro-chip--verified{ border-color:var(--ro-verified); color:var(--ro-verified) }
.ro-chip--miss{ border-color:var(--ro-alarm); color:var(--ro-alarm) }

/* ── CALIBRATION STRIP — the signature.
   Nothing on this site renders a bare score. Every score is drawn inside the interval
   we actually measured (fields.VARIANCE: +/-3.1 at 95%, n=10). The band is the finding:
   a competitor's number has no error bar because nobody measured one. ── */
.ro-cal{ background:var(--ro-card); border:var(--ro-hair) solid var(--ro-rule); padding:16px 18px }
.ro-cal__row{ display:flex; align-items:baseline; gap:14px; margin-bottom:12px }
.ro-cal__score{ font-family:var(--ro-font-mono); font-size:42px; line-height:1;
                letter-spacing:-0.02em; font-variant-numeric:tabular-nums lining-nums }
.ro-cal__pm{ font-family:var(--ro-font-mono); font-size:15px; color:var(--ro-cyan) }
.ro-cal__verdict{ margin-left:auto; font-family:var(--ro-font-mono); font-size:12px;
                  letter-spacing:var(--ro-track-mono); text-transform:uppercase }
.ro-cal__track{ position:relative; height:34px; border-left:var(--ro-hair) solid var(--ro-rule);
                border-right:var(--ro-hair) solid var(--ro-rule) }
.ro-cal__axis{ position:absolute; left:0; right:0; top:17px; height:1px; background:var(--ro-rule) }
.ro-cal__band{ position:absolute; top:8px; height:19px; background:var(--ro-cyan-3);
               border-left:var(--ro-hair) solid var(--ro-cyan-2);
               border-right:var(--ro-hair) solid var(--ro-cyan-2) }
.ro-cal__mark{ position:absolute; top:4px; width:2px; height:27px; background:var(--ro-cyan) }
.ro-cal__gate{ position:absolute; top:0; width:1px; height:34px; background:var(--ro-rule) }
.ro-cal__gatelab{ position:absolute; top:36px; font-family:var(--ro-font-mono); font-size:9.5px;
                  letter-spacing:.06em; color:var(--ro-ink-3); transform:translateX(-50%) }
.ro-cal__foot{ margin-top:26px; font-family:var(--ro-font-mono); font-size:10.5px;
               letter-spacing:.05em; color:var(--ro-ink-3) }

/* ── section ─────────────────────────────────────────────────────── */
.ro-section{ border-top:var(--ro-hair) solid var(--ro-rule); padding-top:22px; margin-top:38px }
.ro-section__head{ display:flex; align-items:baseline; gap:12px; margin-bottom:14px }

/* ── table ───────────────────────────────────────────────────────── */
.ro-table{ width:100%; border-collapse:collapse; background:var(--ro-card);
           border:var(--ro-hair) solid var(--ro-rule) }
.ro-table th{ text-align:left; font-family:var(--ro-font-mono); font-size:10px;
              letter-spacing:var(--ro-track-mono); text-transform:uppercase;
              color:var(--ro-ink-3); font-weight:400; padding:9px 13px;
              border-bottom:var(--ro-hair) solid var(--ro-rule) }
.ro-table td{ padding:10px 13px; font-size:14px;
              border-bottom:var(--ro-hair) solid var(--ro-rule-2) }
.ro-table tr:last-child td{ border-bottom:0 }
.ro-table td.ro-num{ font-size:13.5px }

/* ── gate — honest about what is withheld and why ────────────────── */
.ro-gate{ position:relative; border:var(--ro-hair) solid var(--ro-rule); background:var(--ro-card) }
.ro-gate__blur{ filter:blur(5px); opacity:.42; pointer-events:none; user-select:none;
                padding:var(--ro-pad) }
.ro-gate__over{ position:absolute; inset:0; display:flex; flex-direction:column;
                align-items:center; justify-content:center; gap:9px; text-align:center;
                padding:22px; background:linear-gradient(transparent,var(--ro-card) 42%) }

/* ── CTA — a control, not a banner ───────────────────────────────── */
.ro-cta{ display:inline-block; font-family:var(--ro-font-mono); font-size:12px;
         letter-spacing:var(--ro-track-mono); text-transform:uppercase;
         padding:11px 20px; border:var(--ro-hair) solid var(--ro-ink);
         background:var(--ro-ink); color:var(--ro-sheet); cursor:pointer }
.ro-cta:hover{ background:transparent; color:var(--ro-ink); text-decoration:none }
.ro-cta--quiet{ background:transparent; color:var(--ro-ink); border-color:var(--ro-rule) }
.ro-cta--quiet:hover{ border-color:var(--ro-ink); background:transparent }

/* ── filter bar ──────────────────────────────────────────────────── */
.ro-filters{ display:flex; flex-wrap:wrap; gap:9px; align-items:center;
             padding:13px 0; border-top:var(--ro-hair) solid var(--ro-rule);
             border-bottom:var(--ro-hair) solid var(--ro-rule) }
.ro-filters select,.ro-filters input{ font-family:var(--ro-font-mono); font-size:12px;
             padding:6px 9px; border:var(--ro-hair) solid var(--ro-rule);
             background:var(--ro-card); color:var(--ro-ink); border-radius:0 }

/* ── chrome ──────────────────────────────────────────────────────── */
.ro-mast{ border-bottom:var(--ro-hair) solid var(--ro-rule); background:var(--ro-card) }
.ro-mast__in{ display:flex; align-items:center; gap:26px; padding:15px 0 }
.ro-logo{ font-family:var(--ro-font-mono); font-size:13px;
          letter-spacing:var(--ro-track-mono); text-transform:uppercase; font-weight:500 }
.ro-nav{ display:flex; gap:19px; margin-left:auto; flex-wrap:wrap }
.ro-nav a{ font-size:13.5px; color:var(--ro-ink-2) }
.ro-nav a:hover,.ro-nav a[aria-current]{ color:var(--ro-ink) }
.ro-foot{ border-top:var(--ro-hair) solid var(--ro-rule); margin-top:64px;
          padding:26px 0 44px; font-size:12.5px; color:var(--ro-ink-3) }
.ro-empty{ border:var(--ro-hair) dashed var(--ro-rule); padding:34px 22px;
           text-align:center; color:var(--ro-ink-2); background:var(--ro-card) }

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