/* ===========================================================================
   The Highlighter — shared design system
   Extracted from the inline <style> blocks in highlighter-home.html and
   record.html. This file is the single source of truth for tokens; pages
   should import it rather than redeclaring :root.
   =========================================================================== */

@import url('/assets/fonts/alpina.css');

:root {
  --paper:        #F8F6F0;
  --paper-deep:   #EFEBE0;
  --paper-darker: #E2DECF;
  --ink:          #1d2e26;
  --ink-soft:     rgba(29, 46, 38, 0.78);
  --ink-faint:    rgba(29, 46, 38, 0.55);
  --ink-hairline: rgba(29, 46, 38, 0.22);
  --ink-ghost:    rgba(29, 46, 38, 0.10);
  --yellow:       #F5E64C;
  --yellow-soft:  rgba(245, 230, 76, 0.55);
  --ox:           #A8442B;
  --orange:       #F76C24;

  --serif-display: 'GT Alpina Fine', 'GT Alpina', Georgia, serif;
  --serif-body:    'GT Alpina', Georgia, serif;
  --sans:          'IBM Plex Sans', system-ui, sans-serif;
  --mono:          'GT Alpina Typewriter', 'IBM Plex Mono', Menlo, monospace;

  --rule: 1px solid var(--ink-hairline);
  --rule-ghost: 1px solid var(--ink-ghost);
  --measure: 66ch;
}

* { box-sizing: border-box; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 940px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 48px) 100px; }

/* --- masthead: matches highlighter-home.html. chrome.js injects the
       Index button into .index-btn-mount and rewrites .issue-marker. --- */
.masthead { border-bottom: 2px solid var(--ink); margin-bottom: 34px; }
.masthead-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
                gap: 18px; padding: 22px 0 16px; }
.wordmark { font-family: var(--serif-body); font-weight: 500; font-size: 30px; line-height: 1;
            text-decoration: none; color: var(--ink); letter-spacing: -.005em; }
.wordmark em { font-style: italic; font-weight: 500; }
.issue-marker { font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
                text-transform: uppercase; color: var(--ink-soft); text-align: center; }
.index-btn-mount { justify-self: end; }
@media (max-width: 720px) {
  .masthead-row { grid-template-columns: 1fr auto; row-gap: 10px; }
  .issue-marker { grid-column: 1 / -1; grid-row: 2; text-align: left; }
}

.eyebrow { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em;
           text-transform: uppercase; color: var(--ink-faint); margin: 0 0 12px;
           font-variant-numeric: tabular-nums; }

h1 { font-family: var(--serif-display); font-weight: 400; font-size: clamp(2.2rem, 5.6vw, 3.6rem);
     line-height: 1.02; letter-spacing: -.015em; margin: 0 0 14px; text-wrap: balance; }
h2 { font-family: var(--serif-display); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2rem);
     line-height: 1.1; margin: 52px 0 10px; }
h3 { font-family: var(--sans); font-weight: 600; font-size: .78rem; letter-spacing: .07em;
     text-transform: uppercase; margin: 34px 0 10px; }
p { max-width: var(--measure); margin: 0 0 15px; text-wrap: pretty; }
.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 58ch; }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--ink-hairline); }
a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* --- the highlighter swipe --- */
.hl { background: linear-gradient(180deg, transparent 58%, var(--yellow-soft) 58%, var(--yellow-soft) 94%, transparent 94%); padding: 0 .1em; }

/* --- stat band --- */
.band { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 1px;
        background: var(--ink-hairline); border: var(--rule); margin: 26px 0 8px; }
.band > div { background: var(--paper); padding: 16px 14px 14px; }
.band .n { font-family: var(--serif-display); font-size: 1.95rem; line-height: 1; display: block;
           font-variant-numeric: tabular-nums lining-nums; }
.band .k { font-family: var(--mono); font-size: .58rem; letter-spacing: .13em; text-transform: uppercase;
           color: var(--ink-faint); display: block; margin-top: 8px; line-height: 1.4; }

/* --- tables --- */
.tw { overflow-x: auto; margin: 20px 0 8px; border-bottom: var(--rule); }
table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: .82rem;
        font-variant-numeric: tabular-nums lining-nums; min-width: 420px; }
th { text-align: left; font-family: var(--mono); font-size: .58rem; letter-spacing: .13em;
     text-transform: uppercase; color: var(--ink-faint); font-weight: 500;
     padding: 0 14px 8px 0; border-bottom: 1.5px solid var(--ink); white-space: nowrap; }
td { padding: 9px 14px 9px 0; border-bottom: var(--rule-ghost); color: var(--ink-soft); vertical-align: top; }
td:first-child { color: var(--ink); font-weight: 500; }
td.num, th.num { text-align: right; padding-right: 20px; white-space: nowrap; }
tr:last-child td { border-bottom: none; }

/* --- the waterfall lane --- */
.lane-frame { border: var(--rule); margin: 22px 0 6px; }
.lane-head { display: flex; justify-content: space-between; padding: 10px 14px; border-bottom: var(--rule);
             font-family: var(--mono); font-size: .6rem; letter-spacing: .12em;
             text-transform: uppercase; color: var(--ink-faint); }
.lane-scroll { overflow-x: auto; }
.lane { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(9px, 1fr);
        align-items: end; height: 84px; padding: 10px 14px; min-width: 520px; gap: 1px; }
.lane i { display: block; background: var(--ink-ghost); border-radius: 1px 1px 0 0; min-height: 2px; }
.lane i.has-admit { background: var(--yellow); }
.lane i.has-ao    { background: var(--ink); }
.lane-axis { display: flex; justify-content: space-between; padding: 0 14px 10px;
             font-family: var(--mono); font-size: .56rem; letter-spacing: .08em; color: var(--ink-faint); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 14px; border-top: var(--rule);
          font-family: var(--mono); font-size: .58rem; letter-spacing: .1em;
          text-transform: uppercase; color: var(--ink-faint); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; display: inline-block; border-radius: 1px; }

/* --- provenance note --- */
.prov { border-left: 3px solid var(--ox); background: var(--paper-deep); padding: 15px 18px;
        margin: 26px 0; max-width: var(--measure); font-family: var(--sans); font-size: .8rem;
        line-height: 1.55; color: var(--ink-soft); }
.prov b { font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
          color: var(--ox); display: block; margin-bottom: 6px; font-weight: 500; }

.cap { font-family: var(--sans); font-size: .74rem; color: var(--ink-faint);
       max-width: 60ch; margin: 0 0 26px; line-height: 1.5; }

/* --- peer grid --- */
.peers { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 8px; }
.peers a { font-family: var(--sans); font-size: .78rem; text-decoration: none; color: var(--ink);
           border: var(--rule); padding: 5px 11px; border-radius: 2px; display: inline-flex; gap: 7px; }
.peers a:hover { background: var(--paper-deep); }
.peers a .c { font-family: var(--mono); font-size: .68rem; color: var(--ink-faint); }

footer { margin-top: 76px; padding-top: 18px; border-top: 2px solid var(--ink);
         font-family: var(--mono); font-size: .6rem; letter-spacing: .12em;
         text-transform: uppercase; color: var(--ink-faint);
         display: flex; flex-wrap: wrap; gap: 8px 24px; }

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