/* ============================================================================
   premium.css — the polish layer, loaded after clubs.css.

   Amit's premium rules applied literally: "premium isn't louder, it's clearer,
   calmer, more intentional." So this pass adds NO new colours and no
   decoration. It buys perceived quality with the four things that actually
   produce it: a consistent spacing scale, hairline structure instead of boxes,
   tabular numerals wherever numbers are compared, and motion you only notice
   if you go looking for it.

   Kept separate from clubs.css on purpose. clubs.css is the brand (the green,
   the ledger rule, the dot map, the noticeboard rows) and predates this pass;
   this file is the polish and the tool components. Two files means a polish
   regression can be reverted without touching the brand, and it is obvious
   which layer any given rule belongs to.
   ========================================================================== */

/* ------------------------------------------------------- rhythm and measure
   ONE spacing scale, used everywhere. Sections previously set their own
   padding ad hoc, which is most of the difference between "assembled" and
   "designed" — inconsistent spacing is the tell people read as cheap without
   being able to name it. */
body{
  --sl-s1:8px; --sl-s2:14px; --sl-s3:22px; --sl-s4:36px; --sl-s5:56px; --sl-s6:88px;
  --sl-measure:68ch;
}
.section{padding-block:var(--sl-s5)}
.section.breathe{padding-block:var(--sl-s6)}
/* the one-line manifesto section, set as a pull-quote rather than body copy */
.section.breathe p{font-family:var(--font-display,Fraunces,Georgia,serif);
  font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1.4;max-width:34ch;opacity:.92}
.prose{max-width:var(--sl-measure)}
.prose h2{margin-top:var(--sl-s4)}
.prose h2:first-child{margin-top:0}
.prose p{line-height:1.65}
h1{letter-spacing:-.018em}

/* --------------------------------------------------------------- structure
   Hairlines rather than filled boxes. A page of cards reads as a template; a
   page of rules reads as a publication, which is what this is. */
.stats{gap:1px;background:var(--sl-line);border:1px solid var(--sl-line);
  border-radius:12px;overflow:hidden}
.stats>div{background:var(--bg,#FBF9F5);padding:var(--sl-s3) var(--sl-s2)}
.stats .v{font-family:var(--font-display,Fraunces,Georgia,serif);
  font-size:clamp(1.5rem,3vw,2rem);margin:0 0 2px;letter-spacing:-.02em;line-height:1}
.stats .k{margin:0;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;opacity:.62}

/* numbers are the product — never let a column shift width between rows */
.club-right,.chip .n,.dm-count,.num,.cmp td.num,.stats .v,.radius-lbl{
  font-variant-numeric:tabular-nums}

.club{padding-block:var(--sl-s2);transition:background .14s ease}
.club:last-of-type{border-bottom:1px solid var(--sl-line)}

/* ------------------------------------------------------------------ motion
   AAA+++ §3.7 REPLACES what was here. The old rule animated EVERY section into
   view on scroll via animation-timeline — which is exactly the reveal-on-scroll
   grammar the spec bans below the fold, and on a 3,200-page directory it made
   every list feel like a slideshow. Entrance choreography is now above the fold
   ONLY, once, on load: kicker -> h1 -> lede -> answer at a 60ms stagger.

   The shell owns the hero markup, so the eyebrow/h1/lede are addressed by
   position here; anything this build emits itself uses the shared .reveal /
   .reveal-2 / .reveal-3 classes directly. Both drive the same keyframes from
   datasite.css §20.8, so there is one motion, not two.

   Gated behind no-preference, so a reduced-motion reader gets the finished
   page rather than content stranded at opacity 0. */
@media (prefers-reduced-motion:no-preference){
  .hero .eyebrow{animation:aaa-rise var(--t-slow,420ms) var(--ease-out,ease) both}
  .hero h1{animation:aaa-rise var(--t-slow,420ms) var(--ease-out,ease) both;animation-delay:60ms}
  .hero .lede{animation:aaa-rise var(--t-slow,420ms) var(--ease-out,ease) both;animation-delay:120ms}
}

/* accessibility is never traded for aesthetics */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--sl-green);outline-offset:2px;border-radius:4px}

/* ------------------------------------------------- the answer block (§4/§3.1)
   Open typography on paper: the count at display size with its unit in the mono
   voice, one sentence of what it means, and the dated source line attached
   directly beneath. No box — the answer is the page, not a component in it. */
.hero .answer.aaa{margin-top:var(--sl-s3);max-width:52ch}
.hero .answer-say{margin:var(--sl-s2) 0 0;line-height:1.55;color:var(--ink-2,inherit);
  max-width:46ch}

/* ------------------------------------------------------------ the FAQ (§6.2)
   "The second question" — the AIO defence. Ruled, not accordioned: a directory
   that hides its own answers behind a click is optimising for the wrong thing,
   and a <details> element is invisible to a reader scanning for a date. */
.faq{margin:0;padding:0;border-top:1px solid var(--sl-line)}
.faq>div{border-bottom:1px solid var(--sl-line);padding:var(--sl-s3) 0}
.faq dt{font-weight:600;margin:0 0 6px;line-height:1.35}
.faq dd{margin:0;line-height:1.65;max-width:66ch;opacity:.86}

/* ------------------------------------------------------- the overflow list
   The crawl path for clubs a truncated board would otherwise strand. Set as a
   colophon list rather than as more club rows: it is a completeness statement,
   not a second board, and it should read as the small print at the foot of a
   plate. */
.overflow{margin-top:var(--sl-s4);border-top:1px solid var(--sl-line);padding-top:var(--sl-s2)}
.overflow ul{list-style:none;margin:var(--sl-s2) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px var(--sl-s3)}
.overflow li{font-size:.875rem;line-height:1.5}
.overflow .ov-w{opacity:.55;margin-left:.5em;font-size:.8125rem}

/* ---------------------------------------------------------- the feature card
   The one editorial asset in a directory of compiled data gets a shape nothing
   else on the site has: a full-width plate with a keel rule, not a chip and not
   a club row. It is deliberately the only place a reader is invited to READ
   rather than to look something up. */
.feature{display:block;border:1px solid var(--sl-line);border-left:2px solid var(--sl-green);
  border-radius:0 12px 12px 0;padding:var(--sl-s3) var(--sl-s4) var(--sl-s3) var(--sl-s3);
  background:var(--sl-chalk);text-decoration:none;color:inherit;max-width:72ch;
  transition:border-color var(--t-fast,140ms) var(--ease-out,ease)}
.feature:hover{border-color:var(--sl-green)}
.feature .kicker{margin-bottom:var(--sl-s1)}
.feature-t{display:block;font-family:var(--font-display,Fraunces,Georgia,serif);
  font-size:clamp(1.375rem,3vw,1.875rem);line-height:1.15;letter-spacing:-.015em;
  margin-bottom:var(--sl-s2)}
.feature-b{display:block;line-height:1.6;opacity:.84;margin-bottom:var(--sl-s2)}
.feature-go{display:block;font-weight:600;font-size:.9375rem;color:var(--sl-green)}

/* .vh — visually hidden but read aloud.
   This class was used on every screen-reader-only label across Sideline
   (the filter inputs, the sport selects, the place picker) and was DEFINED
   NOWHERE — not in styles.css, clubs.css or data.css. So every one of those
   labels has been rendering as visible bold text next to the control it was
   supposed to describe, on the live New Zealand site included. A missing
   utility class fails silently in exactly this way: the markup looks correct
   and the page looks like a design mistake. */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --------------------------------------------------------- the set piece
   A printed-plate feel for the dot map: an inner hairline and the faintest
   vignette, so the country reads as a figure on paper rather than a div. */
.dotmap{padding:var(--sl-s3);border-radius:16px;position:relative;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.03)}
.dotmap::after{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 56%,rgba(0,0,0,.045) 100%)}
[data-theme=dark] .dotmap::after{
  background:radial-gradient(120% 90% at 50% 40%,transparent 56%,rgba(0,0,0,.26) 100%)}
.dm-note{max-width:62ch;line-height:1.5}
.dm-legend button{transition:opacity .14s ease,border-color .14s ease}

/* ================================================================== TOOLS */
.toolcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sl-s3)}
.toolcard{display:block;border:1px solid var(--sl-line);border-radius:10px;
  padding:var(--sl-s4) var(--sl-s3) var(--sl-s3);background:var(--bg,#FBF9F5);
  text-decoration:none;color:inherit;transition:border-color .16s ease,transform .16s ease}
/* §3.6: a card hover darkens its hairline and NEVER moves. The 2px lift here
   was a template animation, and on a touch device it fired on tap. */
.toolcard:hover{border-color:var(--sl-green)}
.toolcard h2{margin:0 0 var(--sl-s1);font-size:1.375rem;letter-spacing:-.01em}
.toolcard p{margin:0 0 var(--sl-s3);opacity:.78;line-height:1.55;font-size:.9375rem}
.toolcard .go{font-size:.8125rem;font-weight:600;color:var(--sl-green);letter-spacing:.01em}

.btn-primary{background:var(--sl-green);color:#fff;border:0;border-radius:10px;
  padding:12px 20px;font:inherit;font-weight:600;font-size:.9375rem;cursor:pointer;
  transition:filter .14s ease}
.btn-primary:hover{filter:brightness(1.08)}

.near-controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sl-s2)}
.near-or{opacity:.55;font-size:.875rem}
.near-controls select,.field select,.field input{border:1px solid var(--sl-line);
  border-radius:10px;padding:11px 12px;font:inherit;font-size:.9375rem;
  background:var(--bg,#FBF9F5);color:inherit;max-width:100%}
/* a place picker that spans the full page reads as a text field, not a choice */
.near-controls select{flex:0 1 320px}

.near-status{margin:var(--sl-s2) 0 0;font-size:.875rem;opacity:.75;min-height:1.2em}
.near-h{margin:var(--sl-s3) 0 var(--sl-s1);font-size:.875rem;letter-spacing:.02em}
/* Result rows are their own three-column grid rather than the noticeboard's,
   because they carry no sport mark and they DO carry a shortlist control.
   Reusing .club here put the name in the 34px icon column, so "City
   Tattersalls Club" rendered as the single word "City". */
.near-row{display:grid;grid-template-columns:1fr auto auto;gap:var(--sl-s2);
  align-items:baseline;padding:var(--sl-s2) 0;border-bottom:1px solid var(--sl-line)}
.near-main{display:block;min-width:0}
.near-row .club-name{display:block;font-weight:600;line-height:1.3;margin:0 0 3px}
.near-row .club-meta{display:block;font-size:.8125rem;opacity:.7;line-height:1.4}
.near-row .club-right{font-weight:600;font-size:.9375rem;white-space:nowrap;opacity:1}
.near-row.is-plain .club-name{color:inherit}
.near-pick{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-size:.6875rem;letter-spacing:.05em;text-transform:uppercase;opacity:.5;
  white-space:nowrap}
.near-pick:hover{opacity:.9}
.near-cmp{margin-top:var(--sl-s4)}
.cmp{width:100%;border-collapse:collapse;margin-top:var(--sl-s2)}
.cmp th{text-align:left;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  opacity:.6;font-weight:600;padding:0 var(--sl-s2) var(--sl-s1) 0;
  border-bottom:1px solid var(--sl-line)}
.cmp td{padding:var(--sl-s2) var(--sl-s2) var(--sl-s2) 0;border-bottom:1px solid var(--sl-line)}
.cmp td.num{text-align:right;font-weight:600;white-space:nowrap}

.calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--sl-s3)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  opacity:.66;font-weight:600}
.field .hint{text-transform:none;letter-spacing:0;opacity:.6;font-weight:400}
.calc-out{margin-top:var(--sl-s4)}
.cost-note{margin:var(--sl-s3) 0 0;line-height:1.6;max-width:60ch}
.cost-fine{margin-top:var(--sl-s3);font-size:.8125rem;line-height:1.55;max-width:64ch}

.radius{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sl-s2);
  padding:var(--sl-s2) var(--sl-s3);border:1px solid var(--sl-line);border-radius:12px;
  background:var(--sl-chalk);margin-bottom:var(--sl-s3)}
.radius label{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  opacity:.66;font-weight:600}
.radius input[type=range]{flex:1 1 180px;accent-color:var(--sl-green)}
.radius-lbl{font-weight:600;font-size:.9375rem;min-width:9ch}
.radius-count{font-size:.8125rem}
.radius-note{flex:1 0 100%;margin:0;font-size:.75rem}

/* ================================================== the ringside banner
   The ONE place Sideline breaks its own warm-paper palette, and it earns it:
   this is a media promo for a boxing interview, sitting on a boxing page. Going
   dark makes it read as a distinct object — an ad break in a newspaper — rather
   than as another editorial section the reader has to parse. Everywhere else,
   restraint; here, contrast.

   Navy and gold because that is the channel's own thumbnail art, so the banner
   and the video a reader lands on look like the same thing. */
.ringside{--rs-gold:#D9A93C;background:#111A24;color:#F2EFE9;border-radius:16px;
  padding:var(--sl-s4) var(--sl-s3);position:relative;overflow:hidden}
.ringside::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--rs-gold),#8A6415)}
.rs-head{max-width:56ch}
.rs-kicker{margin:0 0 var(--sl-s1);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rs-gold)}
.rs-title{margin:0 0 var(--sl-s2);font-size:clamp(1.375rem,3vw,1.875rem);
  letter-spacing:-.015em;color:#fff}
.rs-lede{margin:0 0 var(--sl-s4);opacity:.78;line-height:1.6;font-size:.9375rem}
.rs-list{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:rgba(255,255,255,.1);border-radius:10px;overflow:hidden}
.rs-item{display:grid;grid-template-columns:34px 1fr;gap:var(--sl-s2);
  padding:var(--sl-s2) var(--sl-s3);background:#141E29;text-decoration:none;
  color:inherit;transition:background .14s ease}
.rs-item:hover{background:#1B2836}
.rs-play{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--rs-gold);color:var(--rs-gold);margin-top:2px}
.rs-play svg{width:16px;height:16px}
.rs-main{min-width:0}
.rs-ep{display:block;font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--rs-gold);opacity:.85;margin-bottom:3px}
.rs-name{display:block;font-weight:600;line-height:1.35;color:#fff;margin-bottom:3px}
.rs-blurb{display:block;font-size:.8125rem;opacity:.66;line-height:1.45}
.rs-cta{margin:var(--sl-s3) 0 0}
.rs-cta a{color:var(--rs-gold);font-weight:600;font-size:.9375rem}
/* the panel is already dark, so it must not be re-darkened by the theme */
[data-theme=dark] .ringside{background:#0D141C}
[data-theme=dark] .rs-item{background:#111A23}
[data-theme=dark] .rs-item:hover{background:#182430}

/* ------------------------------------------------------------------ mobile
   Premium includes "fast and flawless on a phone". The page body must never
   scroll sideways; anything genuinely wide scrolls inside its own box. */
@media (max-width:640px){
  body{--sl-s5:40px;--sl-s6:56px}
  .club{grid-template-columns:28px 1fr;gap:10px}
  .club-right{grid-column:2;text-align:left;padding-top:4px}
  /* the shortlist control drops under the row rather than squeezing it */
  .near-row{grid-template-columns:1fr auto}
  .near-pick{grid-column:1/-1;justify-content:flex-start}
  .near-controls{flex-direction:column;align-items:stretch}
  .near-or{text-align:center}
  .cmp{display:block;overflow-x:auto}
  .toolcard{padding:var(--sl-s3)}
}