/* ==========================================================================
   long-game.css (v5), "The Long Game", a Claude desk.
   --------------------------------------------------------------------------
   HOUSE LAW OBSERVED HERE
     * hi-tokens.css loads first and is the law. Every colour below resolves
       to a token. Light = cream page, navy ink. Dark = navy page, parchment
       ink. Nothing else flips.
     * Newsreader UPRIGHT ONLY. Every serif rule states font-style:normal.
       There are no italics on this site.
     * Gold appears on the U+25F7 (◷) glyph and nowhere else.
     * mint = ahead, coral = behind. Nothing else takes them.
     * No count-up. Every figure is written once, final, with textContent.
     * prefers-reduced-motion kills every transition and the film at the
       foot of the file: the page is complete and still.
     * @media print makes this a real printable sheet: crowd painted once,
       every control gone.
     * Class prefix lg- throughout, because hi-fx.css is loaded for its
       tokens and owns a lot of short class names.
   ========================================================================== */

:root{
  --lg-desk:var(--hi-surface-3);
  --lg-paper:var(--hi-surface-0);
  --lg-well:var(--hi-surface-2);
  --lg-card:var(--hi-surface-1);
  --lg-ink:var(--hi-ink);
  --lg-ink2:var(--hi-ink-2);
  --lg-muted:var(--hi-muted);
  --lg-rule:var(--hi-ink);
  --lg-hair:var(--hi-line);
  --lg-hair2:var(--hi-hair);
  --lg-blue:var(--hi-blue);
  --lg-mint:var(--hi-mint);
  --lg-coral:var(--hi-coral);
  --lg-serif:var(--hi-serif);
  --lg-sans:var(--hi-sans);
  --lg-mono:var(--hi-mono);
  /* the crowd, as ink on paper */
  --lg-crowd:13,31,60;
  --lg-grey:141,133,120;
  --lg-halo:#fffaf1;
}
:root[data-theme="dark"]{
  --lg-halo:#101c31;
  --lg-grey:143,157,178;
}

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--lg-desk);scroll-behavior:smooth}
body{background:var(--lg-desk);color:var(--lg-ink);font-family:var(--lg-sans);
  font-size:.9rem;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--lg-serif);font-style:normal;font-weight:700;line-height:1.1}
b,strong{font-weight:800}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--lg-blue);outline-offset:2px}
.lg-sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================== MASTHEAD ================================= */
.masthead{background:#0d1f3c;color:#fff;position:sticky;top:0;z-index:60;
  border-bottom:3px solid #1f5fbf}
.masthead .inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;
  gap:26px;padding:0 24px;height:58px}
.wordmark{display:flex;align-items:baseline;gap:10px}
.wordmark .hi{font-weight:900;letter-spacing:.14em;font-size:.8rem;text-transform:uppercase}
.wordmark .section{font-family:var(--lg-serif);font-style:normal;font-weight:500;
  font-size:1rem;color:#9db8dd}
.mnav{display:flex;gap:20px;margin-left:auto;align-items:center}
.mnav a{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;
  color:#9db2ce;padding:20px 0;border-bottom:3px solid transparent;margin-bottom:-3px}
.mnav a:hover,.mnav a:focus-visible{color:#fff;outline:none;border-bottom-color:#1f5fbf}
.lg-tourbtn{font-family:var(--lg-mono);font-size:.58rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:#dfe9f8;background:rgba(255,255,255,.07);
  border:1px solid rgba(157,184,221,.34);border-radius:3px;padding:7px 11px;cursor:pointer;
  transition:background var(--mo-fast) var(--mo-ease)}
.lg-tourbtn:hover{background:rgba(157,184,221,.2)}
.theme-btn{width:32px;height:32px;border-radius:50%;border:1px solid rgba(157,184,221,.35);
  background:transparent;color:#c9d8ee;cursor:pointer;font-size:.85rem;display:grid;
  place-items:center;transition:background var(--mo-fast) var(--mo-ease)}
.theme-btn:hover{background:rgba(157,184,221,.18)}
.theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:block}
:root[data-theme="dark"] .theme-btn .moon{display:none}

/* ======================== RESEARCH DESK CROSS-NAV =========================
   The canonical .rdesk structure, so scripts/sync-desk-strip.py owns the link
   set on this page exactly as it does on /goalies/ and /fantasy/. */
nav.rdesk{max-width:1440px;margin:0 auto;padding:0 18px}
nav.rdesk .in{display:flex;gap:8px;overflow-x:auto;padding:.7rem 0 .3rem;
  scrollbar-width:none;align-items:center}
nav.rdesk .in::-webkit-scrollbar{display:none}
nav.rdesk .rlbl{font-family:var(--lg-mono);font-size:.56rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--lg-muted);
  white-space:nowrap;padding-right:4px}
nav.rdesk a{font-family:var(--lg-mono);font-size:.56rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:999px;
  white-space:nowrap;border:1px solid var(--lg-hair);color:var(--lg-muted);
  text-decoration:none;transition:color var(--mo-fast),border-color var(--mo-fast)}
nav.rdesk a:hover{color:var(--lg-ink);border-color:var(--lg-blue)}
nav.rdesk a.here{background:var(--lg-blue);border-color:var(--lg-blue);color:#fff}

/* ============================== THE PAGE ================================= */
.lg-wrap{max-width:1440px;margin:0 auto;padding:22px 18px 64px;display:grid;
  grid-template-columns:minmax(0,1fr);gap:26px}
@media (min-width:1200px){
  .lg-wrap{grid-template-columns:206px minmax(0,1180px);justify-content:center}
}
.lg-sheet{background:var(--lg-paper);border:1px solid var(--lg-hair);
  box-shadow:var(--hi-shadow);padding:30px 34px 44px;min-width:0}
@media (max-width:640px){.lg-sheet{padding:20px 16px 32px}}

/* ============================== NAMEPLATE ================================ */
.lg-flag{border-top:4px solid var(--lg-rule);border-bottom:1px solid var(--lg-rule);
  padding:16px 0 12px}
.lg-flagrow{display:flex;align-items:baseline;justify-content:center;gap:24px}
.lg-flag h1{font-size:clamp(2rem,5.1vw,3.4rem);text-transform:uppercase;letter-spacing:.1em;
  text-align:center;line-height:1;font-weight:800}
.lg-flagside{font-family:var(--lg-mono);font-size:.55rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--lg-muted);white-space:nowrap;flex:1 1 0}
.lg-flagside.l{text-align:right}
.lg-flagside.r{text-align:left}
@media (max-width:720px){.lg-flagside{display:none}}
.lg-standfirst{max-width:72ch;margin:16px auto 0;text-align:center;font-size:.9rem;
  line-height:1.62;color:var(--lg-ink2)}
.lg-flagfoot{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;
  margin:16px 0 0;padding:10px 0;border-top:1px solid var(--lg-hair2);
  border-bottom:3px solid var(--lg-rule)}

/* ============================ QUESTION INDEX ============================= */
.lg-index{display:none}
@media (min-width:1200px){
  .lg-index{display:block;position:sticky;top:82px;align-self:start;max-height:calc(100vh - 110px);
    overflow:auto}
}
.lg-index h2{font-family:var(--lg-mono);font-style:normal;font-size:.55rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--lg-muted);
  border-bottom:1px solid var(--lg-rule);padding-bottom:6px;margin-bottom:9px}
.lg-index ol{list-style:none}
.lg-index a{display:grid;grid-template-columns:1.9rem 1fr;gap:6px;padding:4px 0;
  font-size:.74rem;line-height:1.4;color:var(--lg-ink2);border-left:2px solid transparent;
  padding-left:8px;transition:color var(--mo-fast) var(--mo-ease)}
.lg-index a .n{font-family:var(--lg-mono);font-size:.6rem;font-weight:700;color:var(--lg-muted)}
.lg-index a:hover{color:var(--lg-ink)}
.lg-index a[aria-current="true"]{border-left-color:var(--lg-blue);color:var(--lg-ink);font-weight:600}
.lg-index a[aria-current="true"] .n{color:var(--lg-blue)}

.lg-strip{display:flex;gap:6px;overflow-x:auto;padding:8px 0;margin:0 0 4px;
  border-bottom:1px solid var(--lg-hair2);-webkit-overflow-scrolling:touch}
@media (min-width:1200px){.lg-strip{display:none}}
.lg-strip a{flex:0 0 auto;font-family:var(--lg-mono);font-size:.58rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--lg-ink2);padding:5px 9px;
  border:1px solid var(--lg-hair);white-space:nowrap}
.lg-strip a[aria-current="true"]{background:var(--lg-ink);color:var(--lg-paper);
  border-color:var(--lg-ink)}

/* =============================== SPREAD ================================== */
.lg-spread{margin-top:34px;scroll-margin-top:76px}
.lg-spread:first-of-type{margin-top:26px}
.lg-shead{border-top:3px solid var(--lg-rule);border-bottom:1px solid var(--lg-rule);
  padding:8px 0 7px;margin-bottom:16px}
.lg-eyebrow{display:block;font-family:var(--lg-mono);font-size:.55rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--lg-muted)}
.lg-shead h2{font-size:clamp(1.35rem,2.6vw,1.95rem);margin-top:5px;letter-spacing:-.01em}
.lg-body{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
@media (min-width:980px){
  .lg-body{grid-template-columns:minmax(0,1fr) 246px;gap:0}
  .lg-body>.lg-fig{padding-right:26px;border-right:1px solid var(--lg-hair)}
  .lg-body>.lg-margin{padding-left:24px}
}
.lg-fig{min-width:0}
.lg-reading{font-size:.88rem;line-height:1.66;color:var(--lg-ink2);max-width:74ch;margin-top:12px}
.lg-reading b{color:var(--lg-ink)}
.lg-foot{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* margin tidbits */
.lg-margin{min-width:0}
.lg-tid{border-top:1px solid var(--lg-hair2);padding:11px 0 12px}
.lg-tid:first-child{border-top:1px solid var(--lg-rule)}
.lg-tid-fig{font-family:var(--lg-mono);font-size:1.28rem;font-weight:700;color:var(--lg-ink);
  line-height:1.1;font-variant-numeric:tabular-nums;display:block}
.lg-tid-lbl{display:block;font-size:.76rem;line-height:1.42;color:var(--lg-ink2);margin-top:3px}
.lg-tid-rule{display:block;font-family:var(--lg-mono);font-size:.55rem;line-height:1.6;
  letter-spacing:.02em;color:var(--lg-muted);margin-top:6px}

/* ============================== FIGURE BOX =============================== */
.lg-figbox{border:1px solid var(--lg-hair);background:var(--lg-card);position:relative}
.lg-tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--lg-hair);
  background:var(--lg-well)}
.lg-tabs .lg-tabk{font-family:var(--lg-mono);font-size:.53rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lg-muted);padding:8px 12px;align-self:center}
.lg-tab{font-family:var(--lg-mono);font-size:.58rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--lg-ink2);background:transparent;border:0;
  border-right:1px solid var(--lg-hair);padding:9px 12px;cursor:pointer;
  transition:background var(--mo-fast) var(--mo-ease),color var(--mo-fast) var(--mo-ease)}
.lg-tab:first-of-type{border-left:1px solid var(--lg-hair)}
.lg-tab:hover{background:var(--lg-card)}
.lg-tab[aria-pressed="true"],.lg-tab.on{background:var(--lg-ink);color:var(--lg-paper)}
.lg-tabs .lg-spacer{margin-left:auto}
.lg-figbox svg{display:block;width:100%;height:auto}
.lg-figpad{padding:14px 16px 16px}

/* =============================== THE SHEET =============================== */
.lg-filmhead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:0 0 8px}
.lg-counter{font-family:var(--lg-mono);font-size:1.5rem;font-weight:700;color:var(--lg-ink);
  font-variant-numeric:tabular-nums;line-height:1}
.lg-filmcap{font-size:.8rem;color:var(--lg-ink2);flex:1 1 16rem}
.lg-filmbar{height:2px;background:var(--lg-hair2);position:relative;overflow:hidden}
.lg-filmbar span{position:absolute;inset:0 auto 0 0;width:0;background:var(--lg-blue)}
.lg-frame{position:relative;background:var(--lg-card);border-top:1px solid var(--lg-hair)}
.lg-frame canvas{display:block;width:100%;height:auto}
.lg-frame svg.lg-over{position:absolute;inset:0;width:100%;height:100%}
.lg-hint{position:absolute;right:10px;top:8px;font-family:var(--lg-mono);font-size:.53rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--lg-muted);pointer-events:none}
.lg-legend{display:flex;flex-wrap:wrap;gap:2px 12px;padding:10px 16px;
  border-top:1px solid var(--lg-hair);background:var(--lg-well)}
.lg-leg{display:inline-flex;align-items:center;gap:6px;font-family:var(--lg-mono);
  font-size:.55rem;letter-spacing:.06em;color:var(--lg-ink2);background:none;border:0;
  padding:3px 2px;cursor:pointer}
.lg-leg i{width:16px;height:3px;display:block}
.lg-leg[aria-pressed="true"]{color:var(--lg-ink);font-weight:700}

.lg-scrub{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;
  padding:12px 16px;border-top:1px solid var(--lg-hair)}
.lg-play{font-family:var(--lg-mono);font-size:.58rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;background:transparent;border:1px solid var(--lg-hair);
  padding:8px 11px;cursor:pointer;color:var(--lg-ink2)}
.lg-play:hover{background:var(--lg-well)}
.lg-scrub input[type=range]{width:100%;accent-color:var(--hi-blue);margin-top:4px}
.lg-scrubread{grid-column:1/-1;font-family:var(--lg-mono);font-size:.57rem;letter-spacing:.04em;
  color:var(--lg-muted);line-height:1.6}
.lg-erastrip{padding:10px 16px 14px;border-top:1px solid var(--lg-hair);background:var(--lg-well)}
.lg-eshead{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.lg-k{font-family:var(--lg-mono);font-size:.53rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lg-muted)}
.lg-esay{font-family:var(--lg-mono);font-size:.57rem;color:var(--lg-ink2)}

.lg-ro{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--lg-hair)}
.lg-rofig{flex:1 1 8rem;padding:10px 14px;border-right:1px solid var(--lg-hair2)}
.lg-rofig:last-child{border-right:0}
.lg-ron{display:block;font-family:var(--lg-mono);font-size:1.15rem;font-weight:700;
  font-variant-numeric:tabular-nums;line-height:1.1}
.lg-rol{display:block;font-size:.68rem;color:var(--lg-muted);margin-top:2px;line-height:1.35}

/* ================================ GRIDS ================================== */
.lg-grid{display:grid;gap:12px}
.lg-g2{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.lg-g3{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.lg-g4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.lg-panel{border:1px solid var(--lg-hair);background:var(--lg-card);padding:11px 12px 12px}
.lg-panel h4{font-family:var(--lg-mono);font-style:normal;font-size:.55rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--lg-muted)}
.lg-panel .lg-pn{font-family:var(--lg-mono);font-size:1.05rem;font-weight:700;
  font-variant-numeric:tabular-nums;margin-top:5px;display:block}
.lg-panel p{font-size:.72rem;line-height:1.5;color:var(--lg-ink2);margin-top:4px}
.lg-panel svg{margin-top:7px}

/* rails */
.lg-rail{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 12px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.lg-rail>*{flex:0 0 auto;scroll-snap-align:start}
.lg-railcard{width:170px;border:1px solid var(--lg-hair);background:var(--lg-card);padding:10px 11px}
.lg-railcard .age{display:block;font-family:var(--lg-mono);font-size:.55rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lg-muted)}
.lg-railcard .nm{display:block;font-family:var(--lg-serif);font-style:normal;font-weight:700;font-size:.94rem;
  margin-top:3px;line-height:1.2}
.lg-railcard .fg{display:block;font-family:var(--lg-mono);font-size:.62rem;color:var(--lg-ink2);margin-top:5px;
  font-variant-numeric:tabular-nums;line-height:1.6}

/* tables */
.lg-tab-t{width:100%;border-collapse:collapse;font-size:.78rem;
  font-variant-numeric:tabular-nums}
.lg-tab-t th{font-family:var(--lg-mono);font-size:.53rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lg-muted);text-align:right;padding:5px 7px;
  border-bottom:1px solid var(--lg-rule)}
.lg-tab-t th:first-child,.lg-tab-t td:first-child{text-align:left;min-width:9.5rem}
.lg-tab-t td{padding:6px 7px;text-align:right;border-bottom:1px solid var(--lg-hair2)}
.lg-tab-t tbody tr:last-child td{border-bottom:0}
.lg-tab-t .mono{font-family:var(--lg-mono)}
/* the last five sit in a narrow agate column, so nothing in them wraps */
.lg-l5 td,.lg-l5 th{white-space:nowrap;padding-left:4px;padding-right:4px}
.lg-l5 th:first-child,.lg-l5 td:first-child{min-width:0}
.lg-l5{font-size:.72rem}
.lg-up{color:var(--lg-mint);font-weight:700}
.lg-dn{color:var(--lg-coral);font-weight:700}

/* named-line cards */
.lg-shelf{margin-top:18px}
.lg-shelf-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  border-bottom:1px solid var(--lg-rule);padding-bottom:5px;margin-bottom:10px}
.lg-shelf-h h3{font-size:.86rem;text-transform:uppercase;letter-spacing:.16em;font-weight:800}
.lg-shelf-h .rule{font-family:var(--lg-mono);font-size:.55rem;color:var(--lg-muted);
  margin-left:auto;text-align:right;max-width:52ch;line-height:1.55}
.lg-cards{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(184px,1fr))}
.lg-card{border:1px solid var(--lg-hair);background:var(--lg-card);padding:10px 11px 11px;
  text-align:left;cursor:pointer;transition:border-color var(--mo-fast) var(--mo-ease),
  background var(--mo-fast) var(--mo-ease);width:100%;display:block}
.lg-card:hover{border-color:var(--lg-rule);background:var(--lg-well)}
.lg-card .nm{display:block;font-family:var(--lg-serif);font-style:normal;font-weight:700;font-size:.95rem;
  line-height:1.15}
.lg-card .sub{display:block;font-family:var(--lg-mono);font-size:.55rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--lg-muted);margin-top:3px}
.lg-card .fg{display:block;font-family:var(--lg-mono);font-size:.68rem;font-weight:700;margin-top:6px;
  font-variant-numeric:tabular-nums}
.lg-card .fg small{font-weight:500;font-size:.85em;color:var(--lg-muted);letter-spacing:.04em}
.lg-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.lg-chip{font-family:var(--lg-mono);font-size:.5rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lg-ink2);border:1px solid var(--lg-hair);padding:2px 5px}
.lg-card.pinned{border-color:var(--lg-blue);box-shadow:inset 0 0 0 1px var(--lg-blue)}

/* your player */
.lg-search{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-bottom:14px}
.lg-search label{display:block;font-family:var(--lg-mono);font-size:.53rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--lg-muted);margin-bottom:4px}
.lg-search input{font:500 .9rem/1.4 var(--lg-sans);color:var(--lg-ink);background:var(--lg-card);
  border:1px solid var(--lg-hair);padding:9px 11px;min-width:min(340px,100%)}
.lg-search input:focus-visible{border-color:var(--lg-blue)}
.lg-empty{border:1px dashed var(--lg-hair);padding:26px 18px;text-align:center;
  color:var(--lg-muted);font-family:var(--lg-mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase}
.lg-offsheet{margin:10px 0 0;padding:10px 13px;border-left:3px solid var(--lg-coral);
  background:var(--lg-card);font:500 .82rem/1.5 var(--lg-sans);color:var(--lg-ink);max-width:70ch}
.lg-you-head{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;
  border-bottom:1px solid var(--lg-rule);padding-bottom:7px;margin-bottom:12px}
.lg-you-head h3{font-size:1.35rem}
.lg-you-head .meta{font-family:var(--lg-mono);font-size:.58rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--lg-muted)}
.lg-two{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){.lg-two{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}

/* the three horizons, read off the ten nearest careers */
.lg-hgrid{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:520px){.lg-hgrid{grid-template-columns:minmax(0,1fr)}}
.lg-horcell{border:1px solid var(--lg-hair);background:var(--lg-paper);padding:10px 11px;
  display:flex;flex-direction:column;gap:3px}
.lg-horcell .k{font-family:var(--lg-mono);font-size:.5rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lg-muted)}
.lg-horcell b{font-family:var(--lg-mono);font-size:1.12rem;font-weight:700;color:var(--lg-blue);line-height:1.15}
.lg-horcell .v{font:500 .74rem/1.35 var(--lg-sans);color:var(--lg-ink)}
.lg-horcell .r{font-family:var(--lg-mono);font-size:.58rem;color:var(--lg-muted)}

/* club picker */
.lg-crests{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
.lg-crest{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--lg-hair);
  background:var(--lg-card);cursor:pointer;padding:3px}
.lg-crest img{width:100%;height:100%;object-fit:contain}
.lg-crest[aria-pressed="true"]{border-color:var(--lg-blue);box-shadow:inset 0 0 0 1px var(--lg-blue)}
.lg-crest span{font-family:var(--lg-mono);font-size:.55rem;font-weight:700}

/* tour */
.lg-tour{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:70;
  background:var(--lg-card);border:1px solid var(--lg-rule);box-shadow:var(--hi-shadow);
  padding:10px 12px;display:none;grid-template-columns:auto minmax(0,1fr) auto auto;
  gap:10px;align-items:center;max-width:min(660px,calc(100vw - 24px))}
.lg-tour[data-open="1"]{display:grid}
.lg-tour .step{font-family:var(--lg-mono);font-size:.53rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lg-muted);white-space:nowrap}
.lg-tour .txt{font-size:.78rem;line-height:1.45;color:var(--lg-ink2)}
.lg-tour button{font-family:var(--lg-mono);font-size:.58rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;background:transparent;border:1px solid var(--lg-hair);
  padding:7px 10px;cursor:pointer}
.lg-tour button:hover{background:var(--lg-well)}
.lg-tour .bar{grid-column:1/-1;height:2px;background:var(--lg-hair2);position:relative}
.lg-tour .bar i{position:absolute;inset:0 auto 0 0;background:var(--lg-blue);display:block}

/* misc */
.lg-note{font-family:var(--lg-mono);font-size:.57rem;line-height:1.65;color:var(--lg-muted);
  margin-top:8px}
.lg-btn{font-family:var(--lg-mono);font-size:.58rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;background:transparent;border:1px solid var(--lg-hair);
  padding:8px 11px;cursor:pointer;color:var(--lg-ink2)}
.lg-btn:hover{background:var(--lg-well)}
.lg-rec{list-style:none;font-size:.8rem;line-height:1.7;color:var(--lg-ink2)}
.lg-rec li{border-bottom:1px solid var(--lg-hair2);padding:7px 0}
.lg-rec li:last-child{border-bottom:0}
.lg-rec .mono{font-family:var(--lg-mono);font-size:.66rem;color:var(--lg-ink)}
.lg-colophon{margin-top:38px;border-top:3px solid var(--lg-rule);padding-top:16px}

/* ========================= REDUCED MOTION ================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ============================== PRINT ==================================== */
@media print{
  @page{margin:14mm 12mm}
  html,body{background:#fff;color:#000}
  .masthead,nav.rdesk,.lg-index,.lg-strip,.lg-tour,.lg-tabs,.lg-scrub,.lg-legend,
  .lg-search,.lg-crests,.lg-hint,.lg-btn,.lg-play,.lg-filmbar{display:none!important}
  .lg-wrap{display:block;max-width:none;padding:0 4px}
  .lg-sheet{border:0;box-shadow:none;padding:0;background:#fff}
  .lg-spread{break-inside:avoid;margin-top:22px}
  .lg-body{display:block}
  .lg-body>.lg-fig{border-right:0;padding-right:0}
  .lg-body>.lg-margin{padding-left:0;margin-top:14px;
    display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .lg-tid{border-top:1px solid #000}
  .lg-figbox,.lg-panel,.lg-card,.lg-railcard{border-color:#000}
  .lg-rail{overflow:visible;flex-wrap:wrap}
}

/* wide content never widens the page: it scrolls inside its own box */
.lg-scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.lg-panel svg,.lg-figpad svg{display:block;width:100%;height:auto}
.lg-index a{grid-template-columns:1.6rem 1fr}
@media (max-width:640px){
  .lg-flag h1{letter-spacing:.06em}
  .lg-shead h2{font-size:1.3rem}
  .lg-cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .lg-tour{grid-template-columns:1fr auto auto;bottom:8px}
  .lg-tour .txt{grid-column:1/-1;order:3}
  .lg-tour .bar{order:4}
}
@media print{.lg-scrollx,.lg-roadwrap,.lg-agate .col{overflow:visible}
  .lg-roadwrap svg{min-width:0}}

/* the masthead at phone width: the nav goes, the walk and the theme stay */
@media (max-width:860px){
  .masthead .inner{gap:10px;padding:0 14px}
  .mnav{display:none}
  .lg-tourbtn{margin-left:auto;font-size:.53rem;padding:6px 8px;letter-spacing:.1em}
  .wordmark .section{display:none}
}
/* Below the hi-nav breakpoint the masthead also carries the injected MENU
   trigger, and four controls in 390px overlap the wordmark. The walk drops out
   of the row there; it is still the third door on the sheet. */
@media (max-width:760px){
  .lg-tourbtn{display:none}
  .masthead .inner{gap:8px}
}
/* From 1024 to 1239 the masthead carries all nine section links on one row
   and there is no room left for the walk. It steps out of the row, as it does
   on phones; it is still the third door on the sheet. */
@media (min-width:1024px) and (max-width:1239px){
  .lg-tourbtn{display:none}
}

/* ==========================================================================
   v5 — colour, faces, motion, usability.
   --------------------------------------------------------------------------
   The colour rules of this file, in one place:
     * Club colour is only ever used where a club is the subject: the club
       section, a club cut on the sheet, a champions dot, a crest chip. It
       is a wash and a rule, never body text.
     * The five-colour data palette below is the ONLY palette any grouped
       figure uses. One hue family (blue), plus navy and warm grey, plus one
       deep teal. No rainbow.
     * mint and coral keep their meaning: ahead and behind. Nothing else.
     * Gold is the receipt glyph and nothing else.
   ========================================================================== */
:root{
  /* the five-colour data palette: navy, accent blue, teal, warm grey, slate */
  --lg-d1:#0d1f3c;
  --lg-d2:#1f5fbf;
  --lg-d3:#12706b;
  --lg-d4:#8d8578;
  --lg-d5:#5a7396;
  /* the era ramp, as a legend strip */
  --lg-era-a:#8d8578;
  --lg-era-b:#0d1f3c;
  --lg-era-c:#1f5fbf;
  --lg-era-d:#12706b;
  --lg-club:var(--lg-blue);
  --lg-club-soft:rgba(31,95,191,.12);
}
:root[data-theme="dark"]{
  --lg-d1:#cedbec;
  --lg-d2:#4d8fe8;
  --lg-d3:#5fc2b8;
  --lg-d4:#9a9284;
  --lg-d5:#8fa8c8;
  --lg-era-a:#9a9283;
  --lg-era-b:#cedbec;
  --lg-era-c:#7ab2f0;
  --lg-era-d:#5fc2b8;
  --lg-club-soft:rgba(77,143,232,.18);
}

/* ============================ FACES AND CRESTS =========================== */
.lg-mug{display:inline-grid;place-items:center;flex:0 0 auto;border-radius:50%;
  overflow:hidden;background:var(--lg-well);
  box-shadow:inset 0 0 0 1px var(--lg-hair);position:relative}
.lg-mug img{width:100%;height:100%;object-fit:cover;display:block}
.lg-mug.mono{font-family:var(--lg-mono);font-weight:700;color:#fff;
  background:var(--tc,#1f5fbf);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.lg-crestimg{display:inline-grid;place-items:center;flex:0 0 auto}
.lg-crestimg img{width:100%;height:100%;object-fit:contain;display:block}
.lg-crestimg.mono{font-family:var(--lg-mono);font-weight:700;color:#fff;border-radius:4px;
  background:var(--tc,#1f5fbf);display:inline-grid;place-items:center}

/* a card with a face */
.lg-card{display:grid;grid-template-columns:38px minmax(0,1fr);gap:9px;align-items:start}
.lg-card>.lg-mug{grid-row:1/span 4;width:38px;height:38px;font-size:.72rem}
.lg-card .nm,.lg-card .sub,.lg-card .fg,.lg-card .lg-chips{grid-column:2}
.lg-railcard{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;align-items:start}
.lg-railcard>.lg-mug{grid-row:1/span 3;width:34px;height:34px;font-size:.66rem}
.lg-railcard .age,.lg-railcard .nm,.lg-railcard .fg{grid-column:2}
.lg-namecell{display:flex;align-items:center;gap:7px;min-width:0}
.lg-namecell .lg-mug{width:26px;height:26px;font-size:.56rem}
.lg-namecell button{background:none;border:0;padding:0;cursor:pointer;text-align:left;
  font-family:var(--lg-serif);font-style:normal;font-size:.86rem;color:inherit;min-width:0}
.lg-namecell button:hover{text-decoration:underline}

/* ============================== FRONT DOOR =============================== */
.lg-door{margin:18px 0 4px}
.lg-door .what{font-size:.92rem;line-height:1.6;color:var(--lg-ink2);text-align:center;
  max-width:66ch;margin:0 auto 14px}
.lg-tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.lg-tile{border:1px solid var(--lg-hair);background:var(--lg-card);padding:16px 16px 18px;
  display:flex;flex-direction:column;gap:9px;text-align:left;min-height:190px;
  transition:border-color var(--mo-base) var(--mo-ease),
    box-shadow var(--mo-base) var(--mo-ease),transform var(--mo-base) var(--mo-ease)}
.lg-tile:hover{border-color:var(--lg-rule);box-shadow:var(--hi-shadow);transform:translateY(-2px)}
.lg-tile>svg{display:block;width:64px;height:44px;flex:0 0 auto}
.lg-tile h3{font-size:1.08rem;letter-spacing:-.01em}
.lg-tile p{font-size:.78rem;line-height:1.5;color:var(--lg-ink2)}
.lg-tile .go{margin-top:auto;font-family:var(--lg-mono);font-size:.58rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--lg-blue);
  background:none;border:0;padding:12px 0 0;cursor:pointer;text-align:left;min-height:44px}
.lg-tile form{display:flex;gap:6px;margin-top:auto}
.lg-tile input{flex:1 1 auto;min-width:0;font:500 .88rem/1.4 var(--lg-sans);color:var(--lg-ink);
  background:var(--lg-paper);border:1px solid var(--lg-hair);padding:0 11px;height:44px}
.lg-tile input:focus-visible{border-color:var(--lg-blue)}
.lg-tilecrests{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto;padding-top:6px}
.lg-tilecrests .lg-crestbtn{width:30px;height:30px;padding:2px;border:1px solid var(--lg-hair);
  background:var(--lg-paper);cursor:pointer;display:grid;place-items:center}
.lg-tilecrests .lg-crestbtn:hover{border-color:var(--lg-club,var(--lg-blue))}
.lg-scaleband{display:flex;flex-wrap:wrap;gap:0;margin-top:14px;border-top:1px solid var(--lg-rule);
  border-bottom:3px solid var(--lg-rule)}
.lg-scaleband .s{flex:1 1 8rem;padding:11px 12px;border-right:1px solid var(--lg-hair2)}
.lg-scaleband .s:last-child{border-right:0}
.lg-scaleband .n{display:block;font-family:var(--lg-mono);font-size:1.12rem;font-weight:700;
  font-variant-numeric:tabular-nums;line-height:1.1;color:var(--lg-ink)}
.lg-scaleband .l{display:block;font-size:.66rem;color:var(--lg-muted);margin-top:2px;line-height:1.35}

/* ============================== GLOSSARY ================================= */
.lg-gloss{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;
  border:1px solid var(--lg-hair);background:var(--lg-well);color:var(--lg-muted);
  font-family:var(--lg-mono);font-size:.55rem;font-weight:700;cursor:pointer;
  vertical-align:middle;margin-left:4px;padding:0;line-height:1;flex:0 0 auto}
.lg-gloss:hover,.lg-gloss[aria-expanded="true"]{border-color:var(--lg-blue);color:var(--lg-blue)}
.lg-glosspop{position:fixed;z-index:90;max-width:min(300px,calc(100vw - 24px));
  background:var(--lg-card);border:1px solid var(--lg-rule);box-shadow:var(--hi-shadow);
  padding:10px 12px;font-size:.76rem;line-height:1.5;color:var(--lg-ink2)}
.lg-glosspop b{display:block;font-family:var(--lg-mono);font-size:.53rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--lg-muted);margin-bottom:4px}

/* ============================== CAPTIONS ================================= */
.lg-cap{display:block;font-family:var(--lg-mono);font-size:.56rem;line-height:1.7;
  letter-spacing:.03em;color:var(--lg-muted);padding:8px 16px 10px;
  border-top:1px solid var(--lg-hair2);background:var(--lg-well)}
.lg-plain{display:inline-block;font-family:var(--lg-mono);font-size:.55rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--lg-paper);
  background:var(--lg-ink);padding:2px 7px;margin-top:6px}

/* ============================ THE ERA LEGEND ============================= */
.lg-eralegend{padding:9px 16px 11px;border-top:1px solid var(--lg-hair);background:var(--lg-well)}
.lg-eralegend svg{display:block;width:100%;height:auto}

/* ============================== TOOLBAR ================================== */
.lg-toolbar{position:fixed;right:14px;bottom:14px;z-index:65;display:none;gap:6px;
  background:var(--lg-card);border:1px solid var(--lg-rule);box-shadow:var(--hi-shadow);
  padding:6px}
.lg-toolbar[data-on="1"]{display:flex}
.lg-toolbar button{min-height:44px;min-width:44px;padding:0 11px;font-family:var(--lg-mono);
  font-size:.56rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  background:transparent;border:1px solid var(--lg-hair);cursor:pointer;color:var(--lg-ink2)}
.lg-toolbar button:hover{background:var(--lg-well)}
.lg-toolbar button[aria-pressed="true"]{background:var(--lg-ink);color:var(--lg-paper)}
.lg-backpill{position:fixed;left:14px;bottom:14px;z-index:65;display:none;align-items:center;
  gap:7px;min-height:44px;padding:0 14px;background:var(--lg-ink);color:var(--lg-paper);
  border:0;cursor:pointer;font-family:var(--lg-mono);font-size:.56rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;box-shadow:var(--hi-shadow)}
.lg-backpill[data-on="1"]{display:inline-flex}
@media (max-width:640px){
  .lg-toolbar{right:8px;bottom:8px}
  .lg-backpill{left:8px;bottom:8px;padding:0 10px}
}

/* ========================= BIGGER CONTROLS =============================== */
.lg-tab,.lg-play,.lg-btn{min-height:44px}
.lg-tab{padding:0 13px}
.lg-play,.lg-btn{padding:0 13px}
.lg-crest{width:44px;height:44px;position:relative}
.lg-crest .cn{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);
  background:var(--lg-ink);color:var(--lg-paper);font-family:var(--lg-mono);font-size:.53rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 6px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity var(--mo-fast) var(--mo-ease);z-index:5}
.lg-crest:hover .cn,.lg-crest:focus-visible .cn{opacity:1}
.lg-crest[aria-pressed="true"]{border-color:var(--tc,var(--lg-blue));
  box-shadow:inset 0 0 0 2px var(--tc,var(--lg-blue))}
.lg-search input{min-height:44px}
.lg-leg{min-height:32px}

/* the index, collapsible under the wide breakpoint */
.lg-indexbtn{display:none}
@media (max-width:1199px){
  .lg-index{display:block;margin:14px 0 0;border:1px solid var(--lg-hair);background:var(--lg-card)}
  .lg-indexbtn{display:flex;align-items:center;justify-content:space-between;width:100%;
    min-height:44px;padding:0 12px;background:var(--lg-well);border:0;border-bottom:1px solid var(--lg-hair);
    cursor:pointer;font-family:var(--lg-mono);font-size:.55rem;font-weight:700;letter-spacing:.18em;
    text-transform:uppercase;color:var(--lg-muted)}
  .lg-index h2{display:none}
  .lg-index ol{padding:6px 12px 10px}
  .lg-index[data-open="0"] ol{display:none}
}
@media (max-width:640px){
  .lg-index{display:block;margin:10px 12px}
  .lg-index ol{max-height:55vh;overflow-y:auto}
  .lg-index a{min-height:36px;display:flex;align-items:center}
}

/* ============================ TYPE-AHEAD ================================= */
.lg-ta{position:relative;flex:1 1 340px;min-width:0}
.lg-talist{position:absolute;left:0;right:0;top:100%;z-index:40;background:var(--lg-card);
  border:1px solid var(--lg-rule);box-shadow:var(--hi-shadow);max-height:320px;overflow:auto;
  display:none}
.lg-talist[data-open="1"]{display:block}
.lg-talist button{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;
  padding:6px 10px;background:none;border:0;border-bottom:1px solid var(--lg-hair2);
  cursor:pointer;text-align:left}
.lg-talist button:last-child{border-bottom:0}
.lg-talist button:hover,.lg-talist button[aria-selected="true"]{background:var(--lg-well)}
.lg-talist .n{font-family:var(--lg-serif);font-style:normal;font-weight:700;font-size:.9rem}
.lg-talist .m{font-family:var(--lg-mono);font-size:.54rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--lg-muted);margin-left:auto;white-space:nowrap}

/* ========================== YOUR PLAYER BANNER =========================== */
.lg-banner{display:flex;align-items:center;gap:16px;padding:16px 18px;margin-bottom:14px;
  background:var(--tc,#1f5fbf);color:#fff;position:relative;overflow:hidden}
.lg-banner::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(13,31,60,0) 42%,rgba(13,31,60,.55) 100%)}
.lg-banner>*{position:relative;z-index:1}
.lg-banner .lg-mug{width:76px;height:76px;font-size:1.3rem;box-shadow:0 0 0 2px rgba(255,255,255,.5)}
.lg-banner .who{min-width:0;flex:1 1 auto}
.lg-banner h3{font-size:1.6rem;color:#fff;line-height:1.05}
.lg-banner .meta{display:block;font-family:var(--lg-mono);font-size:.57rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.86);margin-top:5px;line-height:1.7}
.lg-banner .lg-crestimg{width:58px;height:58px;opacity:.95}
@media (max-width:560px){
  .lg-banner{gap:11px;padding:12px 13px}
  .lg-banner .lg-mug{width:56px;height:56px}
  .lg-banner h3{font-size:1.2rem}
  .lg-banner .lg-crestimg{display:none}
}

/* ============================ CLUB SECTION =============================== */
.lg-clubtint{border-left:4px solid var(--tc,var(--lg-blue));padding-left:14px}
.lg-clubhead{display:flex;align-items:center;gap:12px;border-bottom:3px solid var(--tc,var(--lg-blue));
  padding-bottom:9px;margin-bottom:13px}
.lg-clubhead .lg-crestimg{width:44px;height:44px}
.lg-clubhead h3{font-size:1.3rem}
.lg-clubhead .meta{font-family:var(--lg-mono);font-size:.56rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--lg-muted);margin-left:auto;text-align:right;line-height:1.6}
.lg-clubchip{display:inline-flex;align-items:center;gap:5px;font-family:var(--lg-mono);
  font-size:.55rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--tc,var(--lg-blue));padding:4px 8px}
.lg-seats{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin-top:12px}
.lg-seat{display:flex;align-items:center;gap:8px;border:1px solid var(--lg-hair);
  background:var(--lg-card);padding:7px 8px;text-align:left;cursor:pointer;min-width:0;
  border-left:3px solid var(--tc,var(--lg-blue));
  transition:background var(--mo-fast) var(--mo-ease),transform var(--mo-fast) var(--mo-ease)}
.lg-seat:hover{background:var(--lg-well);transform:translateY(-1px)}
.lg-seat .lg-mug{width:32px;height:32px;font-size:.62rem}
.lg-seat .t{min-width:0}
.lg-seat .n{display:block;font-family:var(--lg-serif);font-style:normal;font-weight:700;
  font-size:.82rem;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-seat .g{display:block;font-family:var(--lg-mono);font-size:.52rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--lg-muted);margin-top:2px}

/* nations */
.lg-flag18{font-size:18px;line-height:1;font-family:"Segoe UI Emoji","Apple Color Emoji",
  "Noto Color Emoji",var(--lg-sans)}
.lg-nathead{display:flex;align-items:center;gap:8px}
.lg-nathead .lg-mug{width:30px;height:30px;font-size:.6rem;margin-left:auto}

/* ============================== SKELETONS ================================ */
.lg-skel{background:linear-gradient(90deg,var(--lg-well) 0%,var(--lg-card) 50%,var(--lg-well) 100%);
  background-size:280% 100%;animation:lg-shimmer 1.5s linear infinite;border-radius:2px}
.lg-skelbox{border:1px solid var(--lg-hair);background:var(--lg-card);padding:14px 16px;
  display:grid;gap:9px}
.lg-skelbox .r{height:12px}
.lg-skelbox .big{height:150px}
@keyframes lg-shimmer{from{background-position:140% 0}to{background-position:-140% 0}}

/* ================================ MOTION ================================= */
/* Geometry only. Every figure is final on frame one; what moves is the frame
   it arrives in, never the number inside it. */
.lg-in{opacity:0;transform:translateY(10px)}
.lg-in.on{opacity:1;transform:none;
  transition:opacity var(--mo-slow) var(--mo-ease),transform var(--mo-slow) var(--mo-ease)}
.lg-rise{transform-origin:50% 100%;transform:scaleY(.01);opacity:.2}
.lg-rise.on{transform:none;opacity:1;
  transition:transform var(--mo-slow) var(--mo-ease),opacity var(--mo-base) var(--mo-ease)}
.lg-drawline{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.lg-drawline.on{stroke-dashoffset:0;transition:stroke-dashoffset 760ms var(--mo-ease)}
.lg-fade{opacity:0}
.lg-fade.on{opacity:var(--to,1);transition:opacity var(--mo-slow) var(--mo-ease)}
.lg-drop{transform:translateY(-14px);opacity:0}
.lg-drop.on{transform:none;opacity:1;
  transition:transform var(--mo-base) var(--mo-ease),opacity var(--mo-base) var(--mo-ease)}
.lg-panel{transition:border-color var(--mo-fast) var(--mo-ease),
  transform var(--mo-fast) var(--mo-ease)}
.lg-panel:hover{border-color:var(--lg-rule);transform:translateY(-1px)}
.lg-railcard{transition:transform var(--mo-fast) var(--mo-ease),
  border-color var(--mo-fast) var(--mo-ease)}
.lg-railcard:hover{transform:translateY(-2px);border-color:var(--lg-rule)}
.lg-card{transition:border-color var(--mo-fast) var(--mo-ease),
  background var(--mo-fast) var(--mo-ease),transform var(--mo-fast) var(--mo-ease)}
.lg-card:hover{transform:translateY(-2px)}
.lg-figpad>svg{transition:opacity var(--mo-base) var(--mo-ease)}
.lg-swapping>svg{opacity:.2}

@media (prefers-reduced-motion: reduce){
  .lg-in,.lg-rise,.lg-drop{opacity:1!important;transform:none!important}
  .lg-fade{opacity:var(--to,1)!important;transform:none!important}
  .lg-drawline{stroke-dashoffset:0!important;stroke-dasharray:none!important}
  .lg-skel{animation:none}
}

/* the mobile single column never widens the page */
@media (max-width:640px){
  .lg-tiles{grid-template-columns:minmax(0,1fr)}
  .lg-card{grid-template-columns:32px minmax(0,1fr)}
  .lg-card>.lg-mug{width:32px;height:32px;font-size:.62rem}
  .lg-scaleband .s{flex:1 1 44%}
  .lg-seats{grid-template-columns:minmax(0,1fr)}
  .lg-banner .meta{font-size:.52rem}
}

@media print{
  .lg-toolbar,.lg-backpill,.lg-glosspop,.lg-gloss,.lg-talist,.lg-indexbtn{display:none!important}
  .lg-door .lg-tiles{display:none}
  .lg-in,.lg-rise,.lg-drop{opacity:1!important;transform:none!important}
  .lg-fade{opacity:var(--to,1)!important;transform:none!important}
  .lg-banner{background:#fff!important;color:#000!important;border:1px solid #000}
  .lg-banner::after{display:none}
  .lg-banner h3,.lg-banner .meta{color:#000!important}
}

/* SVG shapes need a box before percentage transform-origins mean anything */
svg .lg-rise,svg .lg-in,svg .lg-drop{transform-box:fill-box}

/* the thread's face on the sheet */
.lg-threadlab{position:absolute;display:none;align-items:center;gap:8px;
  background:var(--lg-paper);border:1px solid var(--lg-rule);padding:3px 9px 3px 3px;
  pointer-events:none;z-index:6;white-space:nowrap;box-shadow:var(--hi-shadow)}
.lg-threadlab[data-on="1"]{display:flex}
.lg-threadlab .n{display:block;font-family:var(--lg-serif);font-style:normal;font-weight:700;
  font-size:.82rem;line-height:1.15}
.lg-threadlab .v{display:block;font-family:var(--lg-mono);font-size:.52rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--lg-muted);margin-top:1px}
.lg-threadlab.pin{border-color:var(--lg-blue);box-shadow:inset 0 0 0 1px var(--lg-blue),var(--hi-shadow)}

/* the champions crest strip */
.lg-dynasty{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px 12px;
  border-top:1px solid var(--lg-hair);background:var(--lg-well)}
.lg-dyn{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 9px 0 5px;
  border:1px solid var(--lg-hair);background:var(--lg-card);cursor:pointer;
  border-bottom:3px solid var(--tc,var(--lg-blue));
  transition:transform var(--mo-fast) var(--mo-ease),background var(--mo-fast) var(--mo-ease)}
.lg-dyn:hover,.lg-dyn[aria-pressed="true"]{background:var(--lg-well);transform:translateY(-2px)}
.lg-dyn .lg-crestimg{width:26px;height:26px}
.lg-dyn .c{font-family:var(--lg-mono);font-size:.68rem;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--lg-ink)}
.lg-dyn .t{font-family:var(--lg-mono);font-size:.5rem;font-weight:700;letter-spacing:.1em;
  color:var(--lg-muted)}

.lg-crestslot{display:inline-grid;place-items:center;padding:0 10px;min-width:38px}
.lg-crestslot .lg-crestimg{width:26px;height:26px}

/* --- v5 corrections after the first read of the captures ---------------- */
.lg-search>div:first-child{flex:1 1 360px;min-width:0;max-width:520px}
.lg-search input{width:100%;min-width:0}
.lg-talist{min-width:100%;overflow-x:hidden}
.lg-talist .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lg-tab-t td:first-child,.lg-tab-t th:first-child{min-width:8rem}
.lg-cards{grid-template-columns:repeat(auto-fill,minmax(202px,1fr))}
.lg-tile>svg{width:72px;height:48px}
.lg-tile{min-height:176px}
.lg-dynasty{gap:6px 6px}

/* the floating pair, at phone width: the pill sits above the bar, both short */
@media (max-width:640px){
  .lg-backpill{bottom:64px;left:8px;font-size:.53rem;letter-spacing:.1em}
  .lg-toolbar button{padding:0 9px;font-size:.53rem}
  .lg-clubhead{flex-wrap:wrap}
  .lg-clubhead h3{font-size:1.05rem}
  .lg-clubhead .meta{margin-left:0;flex:1 0 100%;text-align:left}
}
.lg-narrow{display:none}
@media (max-width:640px){.lg-wide{display:none}.lg-narrow{display:inline}}

/* ==========================================================================
   v6 — the player stage, the dock, and six new spreads.
   --------------------------------------------------------------------------
   Colour law unchanged. One addition: the three position hues are fixed
   tints of the data palette and mean the same thing in every figure that
   cuts by position. Centre is the accent blue, wing is the deep teal,
   defence is the slate. Nothing else is added to the palette.
   ========================================================================== */
:root{
  --lg-pos-c:var(--lg-d2);
  --lg-pos-w:var(--lg-d3);
  --lg-pos-d:var(--lg-d5);
  --lg-warm:#8d8578;
  --lg-warm-soft:rgba(141,133,120,.14);
}
:root[data-theme="dark"]{
  --lg-warm:#b3a894;
  --lg-warm-soft:rgba(179,168,148,.18);
}

/* ============================ THE PLAYER STAGE =========================== */
#s11 .lg-body{display:block}
#s11 .lg-body>.lg-fig{border-right:0;padding-right:0}
#s11 .lg-margin{margin-top:20px;padding-left:0;display:grid;gap:0 20px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

.lg-stage{margin:0 0 14px}
.lg-banner{min-height:104px}
.lg-banner .heroback{position:absolute;inset:0;z-index:0;opacity:.34;
  background-position:52% 24%;background-size:cover;filter:saturate(.72)}
.lg-banner .herowash{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,var(--tc,#1f5fbf) 0%,rgba(0,0,0,0) 76%)}
.lg-banner .lg-mug{width:88px;height:88px;font-size:1.5rem}
.lg-banner .who h3{font-size:1.75rem}
.lg-bannerfig{display:flex;gap:0;margin-left:auto;align-items:stretch}
.lg-bannerfig .bf{padding:0 14px;border-left:1px solid rgba(255,255,255,.28);text-align:right;
  display:flex;flex-direction:column;justify-content:center}
.lg-bannerfig .bf .n{display:block;font-family:var(--lg-mono);font-size:1.02rem;font-weight:700;
  font-variant-numeric:tabular-nums;color:#fff;line-height:1.2}
.lg-bannerfig .bf .l{display:block;font-family:var(--lg-mono);font-size:.5rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-top:3px}
@media (max-width:900px){.lg-bannerfig{display:none}}
@media (max-width:560px){.lg-banner .lg-mug{width:60px;height:60px}.lg-banner .who h3{font-size:1.2rem}}

.lg-roadwrap{position:relative}
.lg-roadwrap svg{touch-action:pan-y}
/* on a narrow screen the stage is unreadable at full width, so it keeps a
   legible minimum and pans inside its own box. The page itself never scrolls
   sideways. */
@media (max-width:700px){
  .lg-roadwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .lg-roadwrap svg{min-width:660px;touch-action:pan-x pan-y}
}
.lg-stagemug{cursor:grab}
.lg-stagemug:active{cursor:grabbing}
.lg-stagemug:focus-visible{outline:none}
.lg-stagemug:focus-visible .ring{stroke-width:3.4}
.lg-dragread{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--lg-hair);
  background:var(--lg-well)}
.lg-dragread .c{flex:1 1 6.2rem;padding:8px 11px;border-right:1px solid var(--lg-hair2);min-width:0}
.lg-dragread .c:last-child{border-right:0}
.lg-dragread .n{display:block;font-family:var(--lg-mono);font-size:.86rem;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--lg-ink);line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-dragread .l{display:block;font-family:var(--lg-mono);font-size:.5rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--lg-muted);margin-top:3px}
.lg-dragread .c[data-hi="1"] .n{color:var(--lg-blue)}
.lg-leaguekeys{display:flex;flex-wrap:wrap;gap:4px;padding:9px 16px 11px;
  border-top:1px solid var(--lg-hair);background:var(--lg-well)}
.lg-lkey{display:inline-flex;align-items:center;gap:5px;font-family:var(--lg-mono);
  font-size:.5rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--lg-ink2);border:1px solid var(--lg-hair);padding:3px 6px;background:var(--lg-card)}
.lg-lkey i{width:12px;height:2px;background:var(--lg-warm);display:block}
.lg-lkey.nhl i{height:3px;background:var(--tc,var(--lg-blue))}

.lg-cmpbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:9px 12px;
  border-top:1px solid var(--lg-hair);background:var(--lg-well)}
.lg-cmpbar label{font-family:var(--lg-mono);font-size:.5rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lg-muted)}
.lg-cmpbar .lg-ta{flex:1 1 230px;max-width:320px}
.lg-cmpbar input{width:100%;min-height:44px;font:500 .84rem/1.4 var(--lg-sans);color:var(--lg-ink);
  background:var(--lg-card);border:1px solid var(--lg-hair);padding:0 10px}
.lg-cmpbar input:focus-visible{border-color:var(--lg-blue)}
.lg-cmptag{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 8px;
  border:1px solid var(--lg-hair);border-left:3px solid var(--tc,var(--lg-d5));
  background:var(--lg-card);font-family:var(--lg-mono);font-size:.55rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--lg-ink2)}
.lg-cmptag .lg-mug{width:22px;height:22px;font-size:.5rem}

/* the heat calendar */
.lg-heat{padding:12px 16px 6px}
.lg-heatrow{margin-top:12px}
.lg-heatrow:first-child{margin-top:0}
.lg-heathead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:5px}
.lg-heathead .s{font-family:var(--lg-mono);font-size:.6rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lg-ink)}
.lg-heathead .m{font-family:var(--lg-mono);font-size:.55rem;color:var(--lg-muted)}
.lg-heatgrid{display:flex;flex-wrap:wrap;gap:2px}
.lg-hcell{width:13px;height:13px;border:1px solid var(--lg-hair2);background:var(--lg-well);
  padding:0;cursor:default;position:relative;
  transition:transform var(--mo-fast) var(--mo-ease),box-shadow var(--mo-fast) var(--mo-ease)}
.lg-hcell:hover,.lg-hcell:focus-visible{transform:scale(1.6);z-index:3;
  box-shadow:0 0 0 1px var(--lg-ink)}
.lg-heatread{font-family:var(--lg-mono);font-size:.57rem;line-height:1.7;color:var(--lg-ink2);
  margin-top:7px;min-height:1.7em}
.lg-heatlegend{display:flex;align-items:center;gap:6px;font-family:var(--lg-mono);
  font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--lg-muted);margin-top:10px}
.lg-heatlegend i{width:13px;height:13px;border:1px solid var(--lg-hair2);display:block}
.lg-oppstrip{display:flex;flex-wrap:wrap;gap:4px;padding:11px 16px 14px;
  border-top:1px solid var(--lg-hair);background:var(--lg-well)}
.lg-opp{display:flex;flex-direction:column;align-items:center;gap:2px;width:44px;
  border:1px solid var(--lg-hair);background:var(--lg-card);padding:4px 2px;
  border-bottom:3px solid var(--tc,var(--lg-blue))}
.lg-opp .lg-crestimg{width:22px;height:22px}
.lg-opp .v{font-family:var(--lg-mono);font-size:.53rem;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--lg-ink)}
.lg-opp .g{font-family:var(--lg-mono);font-size:.44rem;letter-spacing:.06em;color:var(--lg-muted)}

/* the agate strip */
.lg-agate{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border-top:1px solid var(--lg-rule);border-bottom:3px solid var(--lg-rule)}
.lg-agate .col{padding:10px 12px;border-right:1px solid var(--lg-hair2);
  min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.lg-agate .col:last-child{border-right:0}
.lg-agate h4{font-family:var(--lg-mono);font-style:normal;font-size:.5rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--lg-muted);margin-bottom:5px}
.lg-agate dl{display:grid;grid-template-columns:auto auto;gap:1px 8px;
  font-family:var(--lg-mono);font-size:.6rem;font-variant-numeric:tabular-nums}
.lg-agate dt{color:var(--lg-muted);letter-spacing:.05em}
.lg-agate dd{color:var(--lg-ink);font-weight:700;text-align:right}
.lg-trophy{display:inline-flex;align-items:center;gap:4px;font-family:var(--lg-mono);
  font-size:.5rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--lg-ink);background:var(--lg-warm-soft);border:1px solid var(--lg-hair);
  padding:3px 6px;margin:2px 2px 0 0}
.lg-trophy .c{color:var(--lg-muted);font-weight:500}

.lg-sharerow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.lg-sharenote{font-family:var(--lg-mono);font-size:.55rem;color:var(--lg-muted);line-height:1.6}

/* ============================== THE DOCK ================================= */
.lg-dock{display:none}
@media (min-width:1480px){
  .lg-wrap{max-width:1560px;grid-template-columns:200px minmax(0,1080px) 180px}
  .lg-dock{display:block;position:sticky;top:82px;align-self:start}
}
.lg-dockcard{border:1px solid var(--lg-hair);background:var(--lg-card);
  border-top:3px solid var(--tc,var(--lg-blue));padding:11px 11px 12px}
.lg-dockcard .top{display:flex;align-items:center;gap:8px;min-width:0}
.lg-dockcard .top>div{min-width:0;flex:1 1 auto}
.lg-dockcard .lg-mug{width:38px;height:38px;font-size:.72rem;flex:0 0 auto}
.lg-dockcard .nm{display:block;font-family:var(--lg-serif);font-style:normal;font-weight:700;
  font-size:.86rem;line-height:1.2;min-width:0;text-wrap:balance}
.lg-dockcard .sub{display:block;font-family:var(--lg-mono);font-size:.5rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lg-muted);margin-top:2px}
.lg-dockcard dl{display:grid;grid-template-columns:1fr auto;gap:2px 6px;margin-top:9px;
  font-family:var(--lg-mono);font-size:.57rem;font-variant-numeric:tabular-nums}
.lg-dockcard dt{color:var(--lg-muted)}
.lg-dockcard dd{font-weight:700;text-align:right}
.lg-dockcard .lg-btn{width:100%;margin-top:9px;text-align:center}
.lg-dockk{font-family:var(--lg-mono);font-size:.5rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lg-muted);margin-bottom:6px;display:block}

/* ========================= 16. WHAT AGES HOW ============================= */
.lg-sm{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
.lg-smcell{border:1px solid var(--lg-hair);background:var(--lg-card);padding:8px 9px 9px}
.lg-smcell h4{font-family:var(--lg-mono);font-style:normal;font-size:.5rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--lg-ink2);line-height:1.4}
.lg-smcell .pk{font-family:var(--lg-mono);font-size:.5rem;letter-spacing:.06em;
  color:var(--lg-muted);display:block;margin-top:2px}
.lg-smcell p{font-size:.68rem;line-height:1.5;color:var(--lg-ink2);margin-top:6px}
.lg-smcell svg{margin-top:5px}
.lg-postab{border-bottom:3px solid var(--tc,transparent)}

/* ====================== 17. YOUTH OR AGE, THE SCATTER ==================== */
.lg-scatterread{font-family:var(--lg-mono);font-size:.57rem;line-height:1.7;color:var(--lg-ink2);
  padding:9px 16px 11px;border-top:1px solid var(--lg-hair);background:var(--lg-well);
  min-height:3.4em}
.lg-scatterread b{color:var(--lg-ink)}

/* ========================= 18. THE TROPHY STRIPS ========================= */
.lg-trophies{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.lg-trophies{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lg-tstrip{border:1px solid var(--lg-hair);background:var(--lg-card)}
.lg-tsh{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:7px 10px;
  border-bottom:1px solid var(--lg-hair);background:var(--lg-well)}
.lg-tsh .t{font-family:var(--lg-serif);font-style:normal;font-weight:700;font-size:.86rem}
.lg-tsh .m{font-family:var(--lg-mono);font-size:.5rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--lg-muted);margin-left:auto}
.lg-tsread{font-family:var(--lg-mono);font-size:.55rem;line-height:1.65;color:var(--lg-ink2);
  padding:7px 10px 9px;border-top:1px solid var(--lg-hair2);min-height:3.3em}
.lg-tsread b{color:var(--lg-ink)}

/* ========================= 19. WHERE THEY COME FROM ====================== */
.lg-cityrow{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:8px;align-items:center;
  padding:5px 0;border-top:1px solid var(--lg-hair2)}
.lg-cityrow:first-child{border-top:1px solid var(--lg-rule)}
.lg-cityrow .lg-mug{width:26px;height:26px;font-size:.52rem}
.lg-cityrow .bar{position:relative;height:17px;background:var(--lg-warm-soft);min-width:0}
.lg-cityrow .bar i{position:absolute;inset:0 auto 0 0;background:var(--lg-d2);display:block}
.lg-cityrow .bar span{position:absolute;left:6px;top:50%;transform:translateY(-50%);
  font-family:var(--lg-mono);font-size:.55rem;font-weight:700;color:#fff;
  white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.lg-cityrow .v{font-family:var(--lg-mono);font-size:.6rem;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--lg-ink);text-align:right;min-width:2.4rem}
.lg-citybest{font-family:var(--lg-mono);font-size:.5rem;letter-spacing:.05em;color:var(--lg-muted);
  display:block;margin-top:5px}

/* ============================== MOBILE =================================== */
@media (max-width:640px){
  .lg-agate{grid-template-columns:minmax(0,1fr)}
  .lg-agate .col{border-right:0;border-bottom:1px solid var(--lg-hair2)}
  .lg-dragread .c{flex:1 1 45%}
  .lg-sm{grid-template-columns:minmax(0,1fr)}
  .lg-trophies{grid-template-columns:minmax(0,1fr)}
  .lg-hcell{width:11px;height:11px}
  .lg-cmpbar .lg-ta{flex:1 1 100%;max-width:none}
  #s11 .lg-margin{grid-template-columns:minmax(0,1fr)}
}

@media print{
  .lg-dock,.lg-cmpbar,.lg-sharerow{display:none!important}
  .lg-banner .heroback{display:none}
  .lg-smcell,.lg-tstrip{border-color:#000}
}

/* ================= 11. THE NEAREST TEN, THE RULE AND THE SHEET =========== */
/* Two lists, ten lines on one sheet, ten cards. The rule is printed on the
   page because a distance nobody can check is not a finding. */
.lg-nbblock{display:grid;gap:12px;margin-top:14px;grid-template-columns:minmax(0,1fr)}
.lg-nbblock>*{min-width:0}
.lg-nbblock .lg-figpad{min-width:0}
.lg-nbrule{display:grid;gap:0;border-top:1px solid var(--lg-hair)}
.lg-nbrule .r{display:grid;grid-template-columns:5.4rem minmax(0,1fr);gap:10px;
  padding:7px 16px;border-bottom:1px solid var(--lg-hair2)}
.lg-nbrule .r:last-child{border-bottom:0}
.lg-nbrule .k{font-family:var(--lg-mono);font-size:.5rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--lg-muted);padding-top:2px}
.lg-nbrule .v{font-size:.72rem;line-height:1.6;color:var(--lg-ink2)}

.lg-nblists{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1180px){.lg-nblists{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lg-nblists.one{grid-template-columns:minmax(0,1fr)}
.lg-nblist{border:1px solid var(--lg-hair);background:var(--lg-card);min-width:0}
.lg-nblist h4{font-family:var(--lg-mono);font-style:normal;font-size:.53rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--lg-ink);padding:8px 12px;
  border-bottom:1px solid var(--lg-rule);background:var(--lg-well)}
.lg-nblist .lg-scrollx{padding:0 12px}
.lg-nblist .lg-note{padding:0 12px 10px}
.lg-tab-t td.tag{color:var(--lg-ink2);letter-spacing:.02em;white-space:nowrap}
.lg-tab-t td.era{white-space:nowrap;color:var(--lg-muted)}
.lg-nblist .lg-tab-t{font-size:.69rem}
.lg-nblist .lg-tab-t th{font-size:.48rem;letter-spacing:.1em;padding:6px 4px}
.lg-nblist .lg-tab-t td{padding:5px 4px}
.lg-nblist .lg-tab-t td:first-child,.lg-nblist .lg-tab-t th:first-child{min-width:6.9rem}
.lg-nblist .lg-namecell .lg-mug{width:20px;height:20px;font-size:.46rem}

/* the ten lines. Ink at forty-five percent until one is asked for. */
.lg-nl{cursor:pointer}
.lg-nl .ln{transition:opacity var(--mo-fast) var(--mo-ease),
  stroke-width var(--mo-fast) var(--mo-ease)}
.lg-nl.hot .ln,.lg-nl:hover .ln{opacity:1;stroke-width:2.6}
.lg-nl:focus{outline:none}
.lg-nl:focus-visible .ln{opacity:1;stroke-width:2.6;stroke:var(--lg-blue)}
.lg-hit{cursor:crosshair}
.lg-nbread{display:block;font-family:var(--lg-mono);font-size:.57rem;line-height:1.7;
  color:var(--lg-ink2);padding:8px 14px 9px;border-top:1px solid var(--lg-hair);
  background:var(--lg-well);min-height:2.6em}

/* the ten cards under the sheet */
.lg-nbcards{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr))}
.lg-nbcard{display:grid;grid-template-columns:34px minmax(0,1fr);gap:4px 9px;align-items:center;
  border:1px solid var(--lg-hair);border-left:3px solid var(--tc,var(--lg-rule));
  background:var(--lg-card);padding:8px 10px;text-align:left;cursor:pointer;
  transition:border-color var(--mo-fast) var(--mo-ease),transform var(--mo-fast) var(--mo-ease)}
.lg-nbcard:hover{transform:translateY(-2px);border-color:var(--lg-rule)}
.lg-nbcard .lg-mug{width:34px;height:34px;font-size:.62rem}
.lg-nbcard .t{min-width:0}
.lg-nbcard .n{display:block;font-family:var(--lg-serif);font-style:normal;font-weight:700;
  font-size:.82rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-nbcard .m{display:block;font-family:var(--lg-mono);font-size:.5rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--lg-muted);margin-top:2px}
.lg-nbcard .d{display:block;font-family:var(--lg-mono);font-size:.56rem;font-weight:700;
  color:var(--lg-blue);margin-top:2px}
.lg-nbcard svg{grid-column:1/-1;width:100%;height:38px;margin-top:2px}

/* the wide figure keeps a legible width and scrolls inside its own box */
@media (max-width:820px){
  .lg-nbblock .lg-tenwrap>svg{width:740px;max-width:none}
}
@media (max-width:640px){
  .lg-nbcards{grid-template-columns:minmax(0,1fr)}
  .lg-nbcard{grid-template-columns:30px minmax(0,1fr)}
  .lg-nbcard .lg-mug{width:30px;height:30px;font-size:.56rem}
  .lg-nbcard svg{height:34px}
  .lg-nbrule .r{grid-template-columns:minmax(0,1fr);gap:2px;padding:7px 14px}
}
@media print{
  .lg-nbcard{break-inside:avoid}
  .lg-nl .ln{opacity:.55}
}