/* ============================================================================
   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
   The rule is "nothing spins, bounces or steals attention". One 12px rise and
   a fade, once, driven by scroll position — and nothing whatsoever for readers
   who have asked for reduced motion. Uses animation-timeline where supported
   and simply does not animate where it isn't, which is the correct failure. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .section{animation:sl-rise .5s cubic-bezier(.2,.7,.3,1) both;
      animation-timeline:view();animation-range:entry 0% entry 40%}
  }
}
@keyframes sl-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* 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}

/* .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:14px;
  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}
.toolcard:hover{border-color:var(--sl-green);transform:translateY(-2px)}
.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}

/* ------------------------------------------------------------------ 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)}
}