/* ==========================================================================
   NI Padel — main stylesheet
   ========================================================================== */

/* Fonts ------------------------------------------------------------------ */
@font-face{font-family:Montserrat;src:url(../fonts/montserrat-900.woff2) format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url(../fonts/montserrat-900-italic.woff2) format('woff2');font-weight:900;font-style:italic;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* Tokens ----------------------------------------------------------------- */
:root{
  --ink:#0B0B0C;
  --ink-2:#17181B;
  --ink-3:#26282C;
  --paper:#FFFFFF;
  --surface:#F4F5F2;
  --line:#E3E5E0;
  --line-dark:rgba(255,255,255,.13);
  --muted:#61656B;
  --muted-dark:#9A9DA2;
  --green:#7DCE4B;
  --green-deep:#3F7A1E;

  --radius-lg:24px;
  --radius:14px;
  --radius-sm:10px;
  --pill:999px;

  --shell:min(1280px, 100% - 3rem);
  --header-h:76px;

  --display:Montserrat, Impact, system-ui, sans-serif;
  --body:Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* Base ------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--surface);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
.shell{width:var(--shell);margin-inline:auto}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

h1,h2,h3,h4{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.95;margin:0}
h1{font-size:clamp(1.95rem,5.25vw,4.2rem);letter-spacing:-.04em}
h2{font-size:clamp(2rem,4.6vw,3.9rem)}
h3{font-size:clamp(1.25rem,2vw,1.7rem);letter-spacing:-.02em}
p{margin:0 0 1rem}
.eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);margin:0 0 1.1rem}
.lede{font-size:clamp(.765rem,1.035vw,.882rem);color:var(--muted);max-width:60ch;line-height:1.7}

/* Buttons ---------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--body);font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  padding:1.05rem 2rem;border-radius:var(--radius);border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.btn--green{background:var(--green);color:var(--ink)}
.btn--green:hover{background:var(--paper)}
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--ink:hover{background:var(--green);color:var(--ink)}
.btn--ghost{border-color:currentColor;background:none}
.btn--ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--sm{padding:.7rem 1.2rem;font-size:.68rem}
.btn:active{transform:translateY(1px)}

.link-more{
  display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;padding-bottom:.35rem;border-bottom:2px solid var(--green);transition:color .2s var(--ease)
}
.link-more:hover{color:var(--green-deep)}

/* Header ----------------------------------------------------------------- */
.site-header{
  position:fixed;inset:0 0 auto;z-index:60;
  background:var(--ink);color:var(--paper);
  border-bottom:1px solid var(--line-dark);
}
.site-header .shell{display:flex;align-items:center;gap:2rem;height:var(--header-h)}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand svg,.brand img{width:62px;height:auto}
.nav{margin-left:auto}
.nav .menu{display:flex;align-items:center;gap:2.4rem;list-style:none;margin:0;padding:0}
.nav .menu-item{position:relative}
.nav .nav-link{
  display:inline-flex;align-items:center;gap:.45rem;
  background:none;border:0;padding:.4rem 0;color:inherit;cursor:pointer;
  font-family:var(--body);font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  position:relative;
}
.nav .nav-link::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--green);transition:width .25s var(--ease)}
.nav .menu-item:hover > .nav-link::after,.nav .menu-item.is-current > .nav-link::after{width:100%}
.nav .caret{opacity:.55;transition:transform .2s var(--ease)}
.nav .has-children:hover .caret{transform:rotate(180deg)}
.nav .submenu{
  position:absolute;top:calc(100% + 14px);left:-1.1rem;min-width:250px;
  background:var(--paper);color:var(--ink);border-radius:var(--radius);
  list-style:none;margin:0;padding:.5rem;
  box-shadow:0 24px 48px -18px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}
.nav .submenu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.nav .has-children:hover .submenu,.nav .has-children:focus-within .submenu{opacity:1;visibility:visible;transform:none}
.nav .submenu .nav-link{display:block;padding:.75rem 1rem;border-radius:var(--radius-sm);letter-spacing:.1em;font-size:.7rem}
.nav .submenu .nav-link::after{display:none}
.nav .submenu .nav-link:hover{background:var(--green)}

.header-actions{display:flex;align-items:center;gap:1.1rem;flex-shrink:0}
.header-actions .sign-in{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.header-actions .sign-in:hover{color:var(--green)}
.icon-btn{background:none;border:0;color:inherit;cursor:pointer;padding:.4rem;line-height:0;border-radius:var(--radius-sm)}
.icon-btn:hover{color:var(--green)}
.nav-toggle{display:none}

/* Mobile nav */
@media (max-width:1024px){
  .nav{position:fixed;inset:var(--header-h) 0 0;background:var(--ink);padding:2rem 1.5rem;overflow-y:auto;
       transform:translateX(100%);transition:transform .3s var(--ease);margin:0}
  body.nav-open .nav{transform:none}
  body.nav-open{overflow:hidden}
  .nav .menu{flex-direction:column;align-items:stretch;gap:0}
  .nav .menu-item{border-bottom:1px solid var(--line-dark)}
  .nav .nav-link{width:100%;justify-content:space-between;padding:1.15rem 0;font-size:.85rem}
  .nav .nav-link::after{display:none}
  .nav .submenu{position:static;opacity:1;visibility:visible;transform:none;background:none;color:var(--paper);
                box-shadow:none;padding:0 0 .75rem;display:none}
  .nav .has-children[data-open="true"] .submenu{display:block}
  .nav .has-children[data-open="true"] .caret{transform:rotate(180deg)}
  .nav .submenu .nav-link{padding:.7rem 0 .7rem 1rem;opacity:.8}
  .nav .submenu .nav-link:hover{background:none;color:var(--green)}
  .nav-toggle{display:inline-flex}
  .header-actions{margin-left:auto;gap:.85rem}
  .header-actions .sign-in{display:none}
}

/* Hero ------------------------------------------------------------------- */
.hero{
  position:relative;min-height:min(94vh,960px);display:flex;align-items:center;
  padding:calc(var(--header-h) + 5.5rem) 0 5.5rem;
  background:var(--ink);color:var(--paper);overflow:hidden;isolation:isolate;
}
.hero__media{position:absolute;inset:-12% 0 -12%;z-index:-2;will-change:transform}
.hero__media img{width:100%;height:100%;object-fit:cover;opacity:.88}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(95% 75% at 50% 45%, rgba(11,11,12,0) 0%, rgba(11,11,12,.46) 62%, rgba(11,11,12,.92) 100%),
    linear-gradient(180deg, rgba(11,11,12,.8) 0%, rgba(11,11,12,.06) 38%, rgba(11,11,12,.85) 100%);
}
.hero .shell{text-align:center}
.hero .eyebrow{color:rgba(255,255,255,.62)}
.hero h1{margin-bottom:2rem;max-width:18ch;margin-inline:auto}
.hero h1 .accent{color:var(--green)}
/* Outline treatment. Only use it on words with open counters: Montserrat Black's
   narrow counters (P, R, B) self-intersect when stroked and look broken. */
.hero h1 .outline{
  color:transparent;-webkit-text-stroke:clamp(1px,.14vw,2px) rgba(255,255,255,.6);
  paint-order:stroke fill;letter-spacing:.015em;
}
.hero__actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* Text reveal */
.reveal-line{display:block;overflow:hidden}
.reveal-line > span{display:block;transform:translateY(105%);opacity:0;transition:transform .9s var(--ease),opacity .9s var(--ease)}
.is-ready .reveal-line > span{transform:none;opacity:1}
.is-ready .reveal-line:nth-child(2) > span{transition-delay:.09s}
.is-ready .reveal-line:nth-child(3) > span{transition-delay:.18s}
.hero .eyebrow,.hero__actions{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease) .3s,transform .7s var(--ease) .3s}
.is-ready .hero .eyebrow,.is-ready .hero__actions{opacity:1;transform:none}

/* Sections --------------------------------------------------------------- */
.section{padding:clamp(4rem,8vw,7.5rem) 0}
.section--paper{background:var(--paper)}
.section--ink{background:var(--ink);color:var(--paper)}
.section--ink .lede{color:var(--muted-dark)}
.section--ink .eyebrow{color:var(--muted-dark)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2.5rem,4vw,4rem)}
.section-head h2{max-width:16ch}
.section-head .lede{margin-top:1.2rem}

/* Court finder ----------------------------------------------------------- */
.finder{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media (min-width:1024px){.finder{grid-template-columns:2fr 1fr}}
.finder__map{
  position:relative;height:clamp(420px,58vh,640px);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--ink-2);border:1px solid var(--line);
}
.finder__map .map{position:absolute;inset:0}
.map-empty{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:var(--muted-dark);padding:2rem;gap:.5rem}

.finder__list{display:flex;flex-direction:column;gap:1rem;max-height:clamp(420px,58vh,640px)}
.club-scroll{overflow-y:auto;display:flex;flex-direction:column;gap:.75rem;padding-right:.35rem}
.club-card{
  display:flex;align-items:center;gap:1rem;text-align:left;width:100%;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:.9rem;text-decoration:none;cursor:pointer;
  transition:border-color .2s var(--ease),transform .2s var(--ease);
}
.club-card:hover,.club-card.is-active{border-color:var(--green);transform:translateX(3px)}
.club-card__img{width:58px;height:58px;border-radius:var(--radius-sm);object-fit:cover;background:var(--surface);flex-shrink:0}
.club-card__body{min-width:0;flex:1}
.club-card__body strong{display:block;font-size:.95rem;font-weight:700;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.club-card__body span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* Map popup */
.finder__map .maplibregl-popup-content{
  background:var(--ink-2);color:var(--paper);border-radius:var(--radius);padding:1.1rem 1.2rem;
  border:1px solid var(--line-dark);box-shadow:0 20px 40px -16px rgba(0,0,0,.6);font-family:var(--body);min-width:220px;
}
.finder__map .pop h4{color:var(--paper)}
.finder__map .maplibregl-popup-close-button{background:none}
.finder__map .maplibregl-popup-tip{border-top-color:var(--ink-2);border-bottom-color:var(--ink-2);border-left-color:var(--ink-2);border-right-color:var(--ink-2)}
.finder__map .maplibregl-popup-close-button{color:var(--muted-dark);font-size:20px;padding:0 .4rem;border:0}
.pop h4{font-size:1rem;margin-bottom:.4rem;letter-spacing:-.01em}
.pop p{font-size:.78rem;color:var(--muted-dark);margin:0 0 .3rem;line-height:1.45}
.pop .pop-cta{display:inline-block;margin-top:.7rem;font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  background:var(--green);color:var(--ink);padding:.55rem .9rem;border-radius:var(--radius-sm);text-decoration:none}
.map-pin{width:14px;height:14px;border-radius:50%;background:var(--green);border:2.5px solid var(--ink);
  box-shadow:0 0 0 2px rgba(125,206,75,.35);cursor:pointer;transition:transform .2s var(--ease)}
.map-pin:hover{transform:scale(1.35)}

/* Counters ---------------------------------------------------------------- */
/* An ink band between the court finder and the news, so the page gets a beat
   of contrast in the middle rather than three pale sections in a row. */
.stats{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--ink);color:var(--paper);
  padding:clamp(3rem,6vw,4.75rem) 0;
}
/* No ball pattern here on purpose. The tile is drawn for a tall header, and in
   a band this short every ball is cut top and bottom -- what survives reads as
   overlapping arcs, not balls. The numbers are the design; the band just lifts
   softly from the top so it is not a flat slab. */
.stats::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.055) 0%, rgba(255,255,255,0) 62%);
}
.stat-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.stat{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:.85rem;padding:.25rem clamp(.75rem,3vw,2.25rem);
}
/* Hairlines between the columns, stopped short of the edges so they read as a
   separator rather than a table. */
.stat + .stat::before{
  content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;background:var(--line-dark)
}
.stat__icon{color:var(--green);line-height:0}
.stat__num{
  font-family:var(--display);font-weight:900;line-height:.88;
  font-size:clamp(2.5rem,6vw,4.25rem);letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
}
.stat__label{font-size:.66rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--muted-dark)}

/* Stays three across on phones -- stacking turns a quick glance into a
   thousand-pixel scroll -- so the type comes down instead. */
@media (max-width:720px){
  .stat{gap:.6rem;padding:.25rem .35rem}
  .stat__icon svg{width:24px;height:24px}
  .stat__num{font-size:clamp(1.5rem,7.2vw,2.4rem);letter-spacing:-.05em}
  .stat__label{font-size:.55rem;letter-spacing:.2em}
  .stat + .stat::before{top:18%;bottom:18%}
}
@media (max-width:360px){
  .stat__label{letter-spacing:.12em}
}

/* News ------------------------------------------------------------------- */
.news{display:grid;gap:clamp(1.25rem,2.4vw,2rem);grid-template-columns:1fr;align-items:start}
@media (min-width:680px){.news{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.news{grid-template-columns:repeat(3,1fr)}}
.post-card{text-decoration:none;display:block}
.post-card__media{overflow:hidden;border-radius:var(--radius);aspect-ratio:16/10;background:var(--surface);margin-bottom:1.1rem}
.post-card--sm .post-card__media{aspect-ratio:16/10;margin-bottom:1.1rem;border-radius:var(--radius)}
.post-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.post-card:hover .post-card__media img{transform:scale(1.06)}
.tag{display:inline-block;background:var(--ink);color:var(--green);font-size:.6rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;padding:.4rem .7rem;border-radius:var(--radius-sm);margin-bottom:.9rem}
.post-card h3{transition:color .2s var(--ease)}
.post-card:hover h3{color:var(--green-deep)}
.post-card h3{font-size:clamp(1rem,1.35vw,1.18rem);line-height:1.15}
.tag{transform:translateY(-2px)}
.post-card p{color:var(--muted);font-size:.77rem;line-height:1.6;margin:.7rem 0 0}

/* Tournaments ------------------------------------------------------------ */
.tournaments{display:flex;flex-direction:column;gap:clamp(1.25rem,2.5vw,2rem)}
.tournament{
  display:grid;grid-template-columns:1fr;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.tournament:hover{border-color:var(--ink);box-shadow:0 24px 50px -30px rgba(0,0,0,.4)}
.tournament--noimg{grid-template-columns:1fr!important}
@media (min-width:900px){
  /* The image column is 38% on every card, whichever side it sits on. Flipping
     the image with `order` used to move it into the 1fr track instead, so every
     other card had a 62% image and a 38% body -- the ragged content blocks
     Warren spotted. Mirror the template and place both cells explicitly. */
  .tournament{grid-template-columns:minmax(0,38%) 1fr}
  .tournament:nth-child(even){grid-template-columns:1fr minmax(0,38%)}
  .tournament:nth-child(even) .tournament__media{grid-area:1/2}
  .tournament:nth-child(even) .tournament__body{grid-area:1/1}
}
/* The artwork carries its own typography, so nothing may crop into it: the
   image is contained and the column is ink, which is the artwork's own
   ground, so the letterbox reads as part of the picture. The date badge is
   sized in cqw for the same reason -- it was set in rem, so shrinking the
   card left the badge full size and it landed on the grade line. */
.tournament__media{position:relative;background:var(--ink);container-type:inline-size}
/* A ratio box rather than aspect-ratio: it sets a floor the media never drops
   below (the image is absolutely positioned and would otherwise collapse the
   column to nothing when the card stacks) while still letting the column
   stretch to a taller row. 74% is deliberately deeper than the 8:5 artwork, so
   top-aligning the picture always leaves an ink strip at the foot for the date
   to sit in, clear of whatever the artwork itself is saying. */
.tournament__media::before{content:"";display:block;padding-top:74%}
.tournament__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:top}
.tournament__date{
  position:absolute;left:3cqw;bottom:2.6cqw;z-index:1;background:var(--green);color:var(--ink);
  font-size:clamp(.56rem,1.3cqw,.7rem);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:.5em .85em;border-radius:var(--radius-sm);white-space:nowrap
}
.tournament__body{padding:clamp(1.75rem,3.5vw,3.25rem);display:flex;flex-direction:column;justify-content:center}
.pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem}
.pill{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:var(--pill);padding:.4rem .85rem}
.tournament__body h3{font-size:clamp(1.5rem,2.6vw,2.2rem);margin-bottom:1rem}
.tournament__meta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin-top:1.75rem}
.meta-item{display:flex;align-items:center;gap:.55rem;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.meta-item svg{flex-shrink:0;color:var(--green-deep)}

/* Accounts --------------------------------------------------------------- */
/* One two-column grid, so a half-width field always pairs with its neighbour
   and the labels sit on a single baseline whatever mix of inputs is above. */
.account-form{width:min(100%,720px);margin-inline:auto}
/* The fieldset stays a plain block and an inner div does the grid: Safari has a
   long history of refusing to lay a fieldset out as a grid container, and a
   styled <legend> inside one is its own can of worms. */
.account-form .field-group{border:0;padding:0;margin:0 0 clamp(2rem,4vw,2.75rem)}
.account-form .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem 1.25rem}
.account-form legend{
  display:block;width:100%;padding:.9rem 1.25rem;margin:0 0 1.25rem;
  background:var(--ink);color:var(--paper);border-radius:var(--radius-sm);
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  letter-spacing:.01em;font-size:1.05rem;line-height:1
}
/* min-width:0 because these are grid items: the default min-width:auto lets a
   long help sentence size the track instead of wrapping inside it. */
.field{margin:0;min-width:0;display:flex;flex-direction:column;gap:.45rem}
.field--full{grid-column:1/-1}
.field label{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.field .opt{font-weight:400;letter-spacing:.08em;text-transform:none;opacity:.75;margin-left:.35rem}
.field input,.field select{
  width:100%;font:inherit;font-size:.95rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);padding:.95rem 1.1rem;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)
}
/* Safari renders a bare date input at its own idea of the right width and
   vertically mis-centres it; the explicit height and appearance reset pull it
   back into line with the text inputs beside it. */
.field input[type=date]{appearance:none;min-height:3.15rem}
.field select{appearance:none;padding-right:2.6rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 9 6'><path d='M1 1l3.5 3.5L8 1' fill='none' stroke='%2361656B' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 1.1rem center}
.field input:focus,.field select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(125,206,75,.22)}
.field-help{font-size:.75rem;color:var(--muted);line-height:1.5;overflow-wrap:anywhere}
.field-err{font-size:.75rem;font-weight:700;color:#B3261E;line-height:1.5}
.has-error input,.has-error select{border-color:#B3261E}
.form-alert{
  width:min(100%,720px);margin:0 auto clamp(1.5rem,3vw,2rem);padding:1rem 1.25rem;
  border:1px solid #B3261E;border-left-width:4px;border-radius:var(--radius);
  background:#FDF3F2;color:#7A1A14;font-size:.9rem
}
.account-form__foot{display:flex;flex-direction:column;align-items:flex-start;gap:1.15rem}
.check{display:flex;align-items:flex-start;gap:.7rem;font-size:.88rem;color:var(--ink);cursor:pointer}
.check input{
  flex:0 0 auto;width:1.15rem;height:1.15rem;margin:.12rem 0 0;accent-color:var(--green-deep);cursor:pointer
}
.account-form__foot .btn{padding:1.05rem 2.4rem}
.account-form__foot a{color:var(--green-deep);font-weight:700}
.account-alt{width:min(100%,720px);margin:clamp(2rem,4vw,2.75rem) auto 0;padding-top:1.75rem;
  border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}
.account-alt a{color:var(--green-deep);font-weight:700}
.account-done{width:min(100%,720px);margin-inline:auto}
.account-done h2{margin-bottom:1rem}
.account-done .explain-cta{margin-top:2rem}
@media (max-width:640px){
  .account-form .field-grid{grid-template-columns:1fr}
}

/* Rankings explained ----------------------------------------------------- */
/* A ladder, not a grid of cards: the grades are ordered, and reading them top
   to bottom is the whole point. Each row carries its grade colour in --g. */
.grade-ladder{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.grade{position:relative;background:var(--paper);display:grid;
  grid-template-columns:132px 1fr 120px;align-items:start;gap:1.5rem;
  padding:1.9rem 2rem}
/* The grade colour is a filled chip with ink text, never a hairline rule.
   Champagne and silver are almost invisible as a line on white paper -- and a
   faint bar on the TOP grade says exactly the wrong thing. Filled, they all
   carry. Same chip as the points-table headers, deliberately. */
.grade__no{margin:.2rem 0 0;justify-self:start;display:inline-block;padding:.45rem .8rem;
  border-radius:var(--radius-sm);background:var(--g);color:var(--ink);
  font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.grade__body h3{font-size:clamp(1.15rem,1.9vw,1.55rem);margin:0 0 .55rem}
.grade__body p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.65;max-width:62ch}
.grade__pts{margin:0;text-align:right}
.grade__pts b{display:block;font-family:var(--display);font-weight:900;font-size:1.85rem;
  letter-spacing:-.03em;line-height:1;color:var(--ink)}
.grade__pts i{display:block;margin-top:.45rem;font-style:normal;font-size:.6rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.note{margin:1.5rem 0 0;font-size:.84rem;color:var(--muted);max-width:78ch}
.section--ink .note{color:var(--muted-dark)}

/* Question on the left, the grade it points at on the right. */
.choose{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.choose li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1rem 2rem;
  padding:1.35rem 0;border-bottom:1px solid var(--line-dark)}
.choose li:first-child{border-top:1px solid var(--line-dark)}
.choose__q{font-size:clamp(.95rem,1.5vw,1.1rem);font-weight:600;max-width:56ch}
.choose__a{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}
.choose__a .dot{width:10px;height:10px;border-radius:50%;background:var(--g)}
.choose__a b{font-family:var(--display);font-weight:900;font-size:1rem;letter-spacing:-.01em;
  text-transform:uppercase}
.choose__a em{font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-dark)}

/* Points table: the grade colour is a chip in the header, so the columns are
   identifiable at a glance without tinting five hundred numbers. */
.pts-table .c-result{text-align:left;font-weight:600;color:var(--ink);font-size:.88rem;
  padding:1rem 1.25rem;border-bottom:1px solid var(--line);vertical-align:middle}
.pts-table tbody tr:last-child .c-result{border-bottom:0}
.pts-table td.c-pts{font-family:var(--display);font-weight:900;font-size:1.02rem;letter-spacing:-.02em}
.pts-table .gtag{display:inline-block;padding:.4rem .7rem;border-radius:var(--radius-sm);
  background:var(--g);color:var(--ink);font-size:.6rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap}
.pts-table thead th.c-pts{padding-top:1.1rem;padding-bottom:1.1rem}

.explain-cols{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3rem)}
@media (min-width:900px){.explain-cols{grid-template-columns:1.15fr .85fr}}
.tick-list{list-style:none;margin:0;padding:0}
.tick-list li{position:relative;padding:0 0 0 1.9rem;margin-bottom:1rem;font-size:.95rem;line-height:1.65}
.tick-list li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  border-radius:50%;border:2px solid var(--green-deep)}
.callout{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--g);
  border-radius:var(--radius);padding:clamp(1.5rem,3vw,2rem)}
.callout p{font-size:.9rem;line-height:1.7;color:var(--muted)}
.callout p:last-child{margin-bottom:0}
.callout strong{color:var(--ink)}
.explain-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:clamp(2rem,4vw,3rem)}

@media (max-width:820px){
  .grade{grid-template-columns:1fr auto;gap:.7rem 1.25rem;padding:1.6rem 1.35rem}
  .grade__no{grid-column:1;margin-top:0}
  .grade__pts{grid-column:2;grid-row:1/3;align-self:start}
  .grade__body{grid-column:1/-1}
  .choose li{flex-direction:column;align-items:flex-start;gap:.75rem}
}

/* Points table on a phone. A five-column table that scrolls is a table whose
   numbers are all off-screen -- so shrink it until it fits instead, and only
   fall back to scrolling if the labels still cannot. */
.lbl-short{display:none}
@media (max-width:640px){
  .lbl-long{display:none}
  .lbl-short{display:inline}
  .pts-table{font-size:.68rem}
  .pts-table th,.pts-table td{padding:.7rem .26rem}
  .pts-table .c-result{white-space:nowrap;font-size:.67rem;padding-left:.7rem;letter-spacing:.02em}
  .pts-table td.c-pts{font-size:.78rem;padding-right:.7rem}
  .pts-table .gtag{font-size:.45rem;letter-spacing:.04em;padding:.28rem .3rem}
  .pts-table thead th.c-pts{padding-top:.85rem;padding-bottom:.85rem}
}

/* Long reference document (regulations) ---------------------------------- */
.doc-dates{display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;margin:1.5rem 0 0;
  font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-dark)}
.doc{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:1000px){
  .doc{grid-template-columns:250px 1fr;align-items:start}
  /* Sticky rail, its own scroller: twenty-four items is taller than a laptop
     viewport, so without the max-height the tail is unreachable. */
  .doc-toc{position:sticky;top:calc(var(--header-h) + 1.5rem);
    max-height:calc(100vh - var(--header-h) - 3rem);overflow-y:auto;
    padding-right:.5rem;scrollbar-width:thin}
}
.doc-toc ol{list-style:none;margin:0;padding:0;counter-reset:none}
.doc-toc li{margin:0}
.doc-toc a{display:flex;gap:.7rem;padding:.42rem 0;font-size:.82rem;line-height:1.4;
  color:var(--muted);text-decoration:none;transition:color .2s var(--ease)}
.doc-toc a span{flex:0 0 1.4rem;font-family:var(--display);font-weight:900;font-size:.72rem;
  color:var(--line);padding-top:.12rem}
.doc-toc a:hover{color:var(--ink)}
.doc-toc a:hover span{color:var(--green-deep)}

.doc-body{min-width:0;max-width:76ch}

/* Who the company is, at the foot of a legal page. Required on the site rather
   than optional, so it is given the weight of a statement instead of being
   tucked into the footer at six point. */
.legal-co{margin-top:.5rem;padding:1.3rem 1.5rem;background:var(--surface);border-radius:var(--radius)}
.legal-co__name{margin:0 0 .6rem;font-family:var(--display);font-weight:900;font-size:1.05rem;
  letter-spacing:.02em;text-transform:uppercase}
.legal-co ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;font-size:.86rem;color:var(--muted)}
.legal-co a{color:var(--green-deep)}
.reg{padding-bottom:clamp(2rem,3.5vw,2.75rem);margin-bottom:clamp(2rem,3.5vw,2.75rem);
  border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--header-h) + 1.5rem)}
.reg:last-of-type{border-bottom:0}
.reg h2{display:flex;gap:.9rem;align-items:baseline;
  font-size:clamp(1.25rem,2.2vw,1.75rem);margin:0 0 1.1rem}
.reg__n{flex:0 0 auto;font-size:.78em;color:var(--green-deep)}
.reg h3{font-size:1rem;letter-spacing:-.01em;margin:1.9rem 0 .6rem}
/* A sub-heading inside a numbered clause, one step down from the clause's
   own h3 so the document still reads as a hierarchy rather than a list of
   equally loud shouts. */
.reg h4{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green-deep);margin:1.6rem 0 .5rem}
.reg p{font-size:.95rem;line-height:1.75;color:var(--muted);margin:0 0 1rem}
.reg ul,.reg ol{margin:0 0 1.25rem;padding-left:1.35rem}
.reg li{font-size:.95rem;line-height:1.7;color:var(--muted);margin-bottom:.55rem}
.reg ol.reg-ol{list-style:decimal}
.reg .table-wrap{margin:1.5rem 0}
/* A rule people get sanctioned for breaking should not look like every other
   paragraph. */
.reg-flag{background:var(--surface);border-left:4px solid var(--green);border-radius:var(--radius-sm);
  padding:1rem 1.15rem;color:var(--ink)!important;font-weight:600}

/* Two columns, not auto-fit: four cards across three tracks leaves one
   stranded on its own row. */
.reg-grades{display:grid;grid-template-columns:1fr;gap:1rem;margin:1.5rem 0 2rem}
@media (min-width:620px){.reg-grades{grid-template-columns:1fr 1fr}}
.reg-grade{border:1px solid var(--line);border-radius:var(--radius);padding:1.15rem 1.25rem}
/* p.reg-grade__tag, not just the class: `.reg-grade p{margin:0}` sits later in
   this file at equal specificity and was zeroing the chip's bottom margin, which
   is why the title sat hard against it. */
.reg-grade p.reg-grade__tag{display:inline-block;margin:0 0 .5rem;padding:.35rem .65rem;
  border-radius:var(--radius-sm);background:var(--g);color:var(--ink);font-size:.58rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.reg-grade h3{margin:0 0 .5rem;padding-top:5px;font-size:.98rem}
.reg-grade p{margin:0;font-size:.82rem;line-height:1.6}

/* Rankings explained ----------------------------------------------------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.steps li{background:var(--paper);padding:1.75rem 1.6rem}
.steps__n{display:block;font-family:var(--display);font-weight:900;font-size:.85rem;
  letter-spacing:.04em;color:var(--green-deep);margin-bottom:.9rem}
.steps h3{font-size:1.05rem;margin:0 0 .6rem}
.steps p{margin:0;font-size:.88rem;line-height:1.65;color:var(--muted)}

/* The worked example. Rows that do not count are dimmed and struck, because
   the whole lesson is which results are ignored. */
.worked{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-dark)}
.worked__row,.worked__total{display:grid;align-items:baseline;gap:.35rem 1.25rem;
  grid-template-columns:9.5rem 1fr auto 5rem;padding:1rem 0;border-bottom:1px solid var(--line-dark)}
.worked__when{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dark)}
.worked__ev{font-size:.98rem;font-weight:600}
.worked__tag{font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green);text-align:right}
.worked__pts{font-family:var(--display);font-weight:900;font-size:1.15rem;letter-spacing:-.02em;text-align:right}
.worked__row.is-sixth,.worked__row.is-expired{opacity:.42}
.worked__row.is-sixth .worked__tag,.worked__row.is-expired .worked__tag{color:var(--muted-dark)}
.worked__row.is-sixth .worked__pts,.worked__row.is-expired .worked__pts{text-decoration:line-through}
.worked__total{grid-template-columns:1fr auto;border-bottom:0;padding-top:1.4rem}
.worked__total span{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-dark)}
.worked__total b{font-family:var(--display);font-weight:900;font-size:2rem;letter-spacing:-.03em;color:var(--green)}

/* Three columns exactly, so six cards fill two rows -- auto-fit gave four and
   the two empty cells showed as grey blanks. */
.qa{margin:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;grid-template-columns:1fr}
@media (min-width:640px){.qa{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.qa{grid-template-columns:repeat(3,1fr)}}
.qa > div{background:var(--paper);padding:1.6rem}
.qa dt{font-family:var(--display);font-weight:900;font-size:.95rem;letter-spacing:-.01em;
  text-transform:uppercase;margin-bottom:.55rem}
.qa dd{margin:0;font-size:.88rem;line-height:1.65;color:var(--muted)}

@media (max-width:720px){
  .worked__row{grid-template-columns:1fr auto}
  .worked__when{grid-column:1}
  .worked__pts{grid-column:2;grid-row:1/3;align-self:center;font-size:1.3rem}
  .worked__ev{grid-column:1}
  .worked__tag{grid-column:1;text-align:left}
}

/* Newsletter ------------------------------------------------------------- */
.newsletter{text-align:center}
.newsletter h2{margin-bottom:1.25rem}
.newsletter .lede{margin-inline:auto;margin-bottom:2.5rem}
.subscribe{display:flex;gap:.75rem;flex-wrap:wrap;width:min(100%,560px);margin-inline:auto}
.subscribe input{
  flex:1 1 16rem;min-width:0;background:rgba(255,255,255,.06);border:1px solid var(--line-dark);
  border-radius:var(--radius);padding:1.05rem 1.35rem;color:var(--paper);font:inherit;font-size:.95rem
}
.subscribe input::placeholder{color:var(--muted-dark)}
.subscribe input:focus{outline:none;border-color:var(--green);background:rgba(255,255,255,.1)}
.subscribe .consent{flex:1 1 100%;margin:.4rem 0 0;font-size:.74rem;color:var(--muted-dark)}
.subscribe .msg{flex:1 1 100%;margin:.5rem 0 0;font-size:.85rem;min-height:1.2em}
.subscribe .msg.ok{color:var(--green)}
.subscribe .msg.err{color:#FF8A8A}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Supporters ------------------------------------------------------------- */
/* align-items:stretch, not center: every logo then gets the same box height as
   the tallest in its row and centres its own artwork inside it, so the strip
   sits on one line whatever shape the files are. */
/* Matching the logos on height alone made a long wordmark enormous beside a
   compact one: 340px against 194px. Equal cells, plus a cap on both axes, puts
   them within a few percent of the same visual area, which is what actually
   reads as the same size. */
.supporters{
  --sup-h:30px;--sup-cell:min(250px,100%);
  display:grid;grid-auto-flow:column;justify-content:center;align-items:center;
  gap:clamp(2rem,5vw,4.5rem);padding-bottom:0
}
.supporters > *{
  width:var(--sup-cell);height:52px;display:flex;align-items:center;justify-content:center;
  filter:grayscale(1);opacity:.55;
  transition:opacity .25s var(--ease),filter .25s var(--ease)
}
.supporters a:hover{filter:none;opacity:1}
/* --optical is measured per file in PHP: it equalises the letterforms rather
   than the bounding boxes, which is what actually makes two logos look the
   same size. --sup-h is the nominal height the scale is applied to. */
.supporter-mark{
  max-width:100%;max-height:calc(var(--sup-h) * var(--optical,1));
  width:auto;height:auto;object-fit:contain;transform:none
}
@media (max-width:720px){.supporters{grid-auto-flow:row;justify-items:center;gap:2.25rem}}
/* No pixel width cap. A wide wordmark needs the width its aspect ratio asks for
   at the matched height -- a 586x50 mark is 274px at the height that lines its
   letters up with everything else, and capping that at 230px silently shrank it
   to two thirds the size of the logo beside it. The row wraps instead, and
   max-width:100% only bites when the viewport itself is narrower. */

/* Instagram -------------------------------------------------------------- */
.ig-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem}
@media (min-width:640px){.ig-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.ig-grid{grid-template-columns:repeat(6,1fr)}}
.ig-grid > *{aspect-ratio:1;border-radius:var(--radius);overflow:hidden;background:var(--paper);border:1px solid var(--line)}
.ig-grid img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .4s var(--ease)}
.ig-grid a:hover img{filter:none}

/* Empty states ----------------------------------------------------------- */
.empty{
  border:1px dashed var(--line);border-radius:var(--radius-lg);padding:clamp(2rem,5vw,3.5rem);
  text-align:center;color:var(--muted);background:var(--paper)
}
.section--ink .empty{background:var(--ink-2);border-color:var(--line-dark);color:var(--muted-dark)}
.empty strong{display:block;font-family:var(--display);text-transform:uppercase;font-size:1.1rem;color:var(--ink);margin-bottom:.4rem}
.section--ink .empty strong{color:var(--paper)}

/* Footer ----------------------------------------------------------------- */
.site-footer{background:var(--paper);border-top:1px solid var(--line);padding:clamp(3.5rem,7vw,6rem) 0 2.5rem}
.footer-grid{display:grid;gap:clamp(2.5rem,5vw,4rem);grid-template-columns:1fr}
@media (min-width:760px){.footer-grid{grid-template-columns:1.6fr 1fr 1fr}}
@media (min-width:1100px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1.2fr}}
.footer-brand img{width:150px;margin-bottom:1.5rem}
.footer-brand p{color:var(--muted);max-width:38ch}
.site-footer h4{font-family:var(--body);font-size:.66rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;margin-bottom:1.5rem}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem}
.site-footer ul a{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s var(--ease)}
.site-footer ul a:hover{color:var(--ink)}

/* The next event, in the footer ------------------------------------------
 * The fourth column of the footer grid was standing empty on every page,
 * because the social block that was meant to fill it is not switched on. This
 * is the one thing worth putting there: an ink card on white paper so it reads
 * as the only object in the footer rather than a fourth list of links, and a
 * link to the event on the whole of it rather than a button in a corner.
 */
.footer-next{align-self:start}
.next-card{
  display:block;text-decoration:none;color:var(--paper);
  background:var(--ink);border-radius:var(--radius-lg);
  padding:1.5rem 1.6rem 1.4rem;position:relative;overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
/* A quiet wash of green out of the top corner, so the card has some depth
   without a second block of colour competing with the type. */
.next-card::before{
  content:'';position:absolute;inset:-40% 30% 55% -20%;
  background:radial-gradient(60% 60% at 30% 30%,rgba(125,206,75,.30),transparent 70%);
  pointer-events:none
}
.next-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(11,11,12,.22)}
.next-card > *{position:relative}

.site-footer .next-card__eyebrow{
  display:flex;align-items:center;gap:.45rem;margin:0 0 .8rem;
  font-size:.6rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--green)
}
.next-card__dot{
  width:.42rem;height:.42rem;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 .22rem rgba(125,206,75,.22);animation:np-pulse 2.4s infinite
}
@keyframes np-pulse{0%,100%{opacity:1}50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){
  .next-card__dot{animation:none}
  .next-card:hover{transform:none}
}
.site-footer .next-card__name{
  margin:0 0 1rem;font-family:var(--display);font-weight:900;
  font-size:1.22rem;line-height:1.08;text-transform:uppercase;letter-spacing:-.01em;color:var(--paper)
}
.site-footer .next-card__facts{
  list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.5rem
}
.site-footer .next-card__facts li{
  display:flex;align-items:flex-start;gap:.55rem;
  font-size:.78rem;line-height:1.35;color:var(--muted-dark);
  letter-spacing:0;text-transform:none;font-weight:400
}
.next-card__facts svg{flex:none;margin-top:.1rem;color:var(--green)}
.site-footer .next-card__go{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin:0;
  padding-top:.95rem;border-top:1px solid var(--line-dark)
}
.next-card__cta{
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green)
}
.next-card:hover .next-card__cta{color:var(--paper)}
.next-card__grade{
  font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-dark);padding:.22rem .5rem;border:1px solid var(--line-dark);border-radius:var(--pill)
}
/* The footer styles its own h4 and ul with a class-plus-element selector, which
   outranks a plain class and was quietly resetting the card's heading back to a
   0.28em-tracked 0.66rem label and its facts back to a 0.9rem flex column. The
   card's rules are scoped to .site-footer so they win on their own terms rather
   than by shouting !important at it. */
.site-footer .next-card__name{margin:0 0 1rem}
@media (max-width:759px){
  .next-card{padding:1.4rem 1.4rem 1.3rem}
}
.socials{display:flex;gap:.6rem}
.socials a{width:44px;height:44px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink);transition:background .2s var(--ease)}
.socials a:hover{background:var(--green)}
.footer-bottom{margin-top:clamp(3rem,6vw,5rem);padding-top:2rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:center}
.footer-bottom p,.footer-bottom a{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0;text-decoration:none}
.footer-bottom a:hover{color:var(--ink)}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:1.5rem}

/* Motion ----------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .reveal-line > span{transform:none;opacity:1}
  .hero .eyebrow,.hero__actions{opacity:1;transform:none}
  .hero__media{transform:none!important}
}

/* Inner pages ------------------------------------------------------------ */
.page-head{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--ink);color:var(--paper);
  padding:calc(var(--header-h) + clamp(3rem,6vw,5rem)) 0 clamp(2.5rem,5vw,4rem);
}
/* Padel balls, tiled. Kept at a whisper so the type stays the loudest thing. */
.page-head::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url(../img/ball-pattern-spaced.svg) repeat-x 50% 50%;
  background-size:auto 109%;
  opacity:.11;
}
/* A soft lift from the top-left stops the band reading as a flat slab. */
.page-head::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 100% at 12% 0%, rgba(255,255,255,.055) 0%, rgba(255,255,255,0) 58%);
}
.page-head h1{max-width:20ch}
.page-head .lede{color:var(--muted-dark);margin-top:1.5rem}
/* Under the club name on its own page, in the same green as the card badge. */
.head-flag{font-size:.68rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--green);margin:1rem 0 0}
.pop .pop-soon{color:var(--green);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.62rem;margin-bottom:.45rem}
/* Members only is a caution, not an invitation, so it stays white rather than
   borrowing the green that everything clickable uses. */
.pop .pop-members{color:var(--paper);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.62rem;margin-bottom:.45rem}
.page-head .crumb{font-size:.66rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--green);text-decoration:none;display:inline-block;margin-bottom:1.5rem}

.prose{max-width:70ch;font-size:.918rem;line-height:1.75}
.prose h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:2.5rem 0 1rem}
.prose h3{margin:2rem 0 .75rem}
.prose img{border-radius:var(--radius);margin:2rem 0}
.prose ul,.prose ol{padding-left:1.3rem;margin:0 0 1.25rem}
.prose li{margin-bottom:.5rem}
.prose blockquote{margin:2rem 0;padding-left:1.5rem;border-left:3px solid var(--green);font-size:1.15rem;font-style:italic;color:var(--ink)}
.prose a{color:var(--green-deep);text-underline-offset:3px}

.grid-cards{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}

.fact-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.fact-list li{display:flex;justify-content:space-between;gap:1.5rem;padding:.85rem 0;border-bottom:1px solid var(--line);font-size:.82rem}
.fact-list dt,.fact-list .k{color:var(--muted);font-weight:400}
.fact-list .v{font-weight:700;text-align:right}

.split{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:1fr}
@media (min-width:900px){.split{grid-template-columns:1.7fr 1fr;align-items:start}}
.aside-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.5rem,3vw,2rem);position:sticky;top:calc(var(--header-h) + 1.5rem)}
.aside-card h3{font-size:1.15rem;margin-bottom:1.25rem}
.aside-card .btn{width:100%;margin-top:1.25rem}
.aside-card__sub{margin:.7rem 0 0;font-size:.78rem;line-height:1.45;color:var(--muted);text-align:center}
/* Already in is a state, not an action, so it is a line of text with a tick
   rather than a fourth green button competing with the real one. */
.aside-card__in{display:flex;align-items:center;justify-content:center;gap:.4rem;
  margin:1.25rem 0 0;padding:.75rem 1rem;border-radius:var(--radius-sm);
  background:rgba(63,122,30,.09);color:var(--green-deep);
  font-size:.82rem;font-weight:700}
.aside-card__in + .btn{margin-top:.6rem}
/* .btn--ghost was drawn for the dark hero, where hovering to paper is the
   contrast. On a white card that hover turned the button invisible. */
.aside-card .btn--ghost{color:var(--ink);border-color:var(--line)}
.aside-card .btn--ghost:hover{background:var(--surface);color:var(--ink);border-color:var(--ink)}

.pagination{display:flex;gap:.5rem;justify-content:center;margin-top:3.5rem}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;
  border:1px solid var(--line);border-radius:var(--radius-sm);text-decoration:none;font-weight:700;font-size:.8rem}
.pagination .current{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* Map attribution — required by the OpenStreetMap licence, so kept, but muted. */
.finder__map .maplibregl-ctrl-attrib{background:rgba(11,11,12,.55);border-radius:8px 0 0 0;font-size:10px}
.finder__map .maplibregl-ctrl-attrib a{color:rgba(255,255,255,.4);text-decoration:none}
.finder__map .maplibregl-ctrl-attrib a:hover{color:rgba(255,255,255,.75)}
.finder__map .maplibregl-ctrl-attrib-button{background-color:rgba(255,255,255,.25);border-radius:50%}
.finder__map .maplibregl-ctrl-bottom-right{opacity:.6;transition:opacity .2s var(--ease)}
.finder__map:hover .maplibregl-ctrl-bottom-right{opacity:1}

/* Supporter placeholders, shown until real logos are added. */
.supporter-ph{
  width:clamp(110px,14vw,150px);height:37px;border:1px dashed var(--line);border-radius:var(--radius-sm);
  display:grid;place-content:center;color:var(--muted);opacity:.55;
  font-size:.58rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;filter:none
}

/* Newsletter on small screens: stack, full-width button. */
@media (max-width:560px){
  .subscribe{flex-direction:column;align-items:stretch}
  .subscribe input{flex:1 1 auto;width:100%;text-align:center}
  .subscribe .btn{width:100%}
  .subscribe .consent,.subscribe .msg{text-align:center}
}

/* Coaches ---------------------------------------------------------------- */
.filters{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;
  padding-bottom:clamp(1.5rem,3vw,2.25rem);margin-bottom:clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--line);
}
.filters__label{font-size:.62rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin:0 .25rem 0 0}
.chip{
  border:1px solid var(--line);background:var(--paper);border-radius:var(--pill);cursor:pointer;
  font-family:var(--body);font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:.62rem 1.1rem;color:var(--ink);transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.filters__search{margin-left:auto;position:relative;flex:0 1 260px}
.filters__search input{
  width:100%;border:1px solid var(--line);border-radius:var(--pill);background:var(--paper);
  padding:.7rem 1.1rem .7rem 2.5rem;font:inherit;font-size:.8rem;color:var(--ink)
}
.filters__search input:focus{outline:none;border-color:var(--green)}
.filters__search svg{position:absolute;left:.95rem;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
@media (max-width:700px){.filters__search{margin-left:0;flex:1 1 100%;order:-1}}

.coach-grid{display:grid;gap:clamp(1.1rem,2.2vw,1.75rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.coach-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .2s var(--ease),box-shadow .3s var(--ease);
}
.coach-card:hover{border-color:var(--ink);box-shadow:0 22px 44px -28px rgba(0,0,0,.45)}
.coach-card[hidden]{display:none}
.coach-card__media{aspect-ratio:4/5;background:var(--surface);overflow:hidden}
.coach-card__media img{width:100%;height:100%;object-fit:cover}
.coach-card__media .ph{width:100%;height:100%;display:grid;place-content:center;color:var(--line)}
.coach-card__body{padding:1.15rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.levels{display:flex;flex-wrap:wrap;gap:.35rem}
.level{
  font-size:.55rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  background:var(--ink);color:var(--green);padding:.32rem .6rem;border-radius:6px
}
.coach-card h3{font-size:1.05rem;letter-spacing:-.02em;margin-top:.15rem}
.coach-card h3 a{text-decoration:none}
.coach-card h3 a:hover{color:var(--green-deep)}
.coach-card__club{display:flex;align-items:center;gap:.4rem;font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}
.coach-card__club svg{color:var(--green-deep);flex-shrink:0}
.coach-card .btn{margin-top:auto;width:100%;padding:.85rem 1rem;font-size:.66rem}

.coach-cta{
  border:1px dashed var(--line);border-radius:var(--radius-lg);background:var(--surface);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;
  padding:2rem 1.5rem;text-align:center;min-height:280px
}
.coach-cta strong{font-family:var(--display);text-transform:uppercase;font-size:1.05rem;letter-spacing:-.02em}
.coach-cta p{color:var(--muted);font-size:.75rem;margin:0}
.no-results{grid-column:1/-1;padding:clamp(2rem,5vw,3.5rem);text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius-lg)}

.coach-meta{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.25rem 0 0}

/* Anchor links must clear the fixed header. */
section[id],.page-head{scroll-margin-top:calc(var(--header-h) + 1rem)}

/* Portrait coach photos get very tall at phone widths. */
@media (max-width:560px){
  .coach-card__media{aspect-ratio:4/3}
  .coach-grid{grid-template-columns:1fr}
}

/* Clubs directory --------------------------------------------------------- */
.finder__map--tall{
  height:clamp(380px,62vh,700px);
  margin-bottom:clamp(2rem,4vw,3.25rem);
}

.club-grid{display:grid;gap:clamp(1.1rem,2.2vw,1.75rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.club-tile{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .2s var(--ease),box-shadow .3s var(--ease);
}
.club-tile:hover{border-color:var(--ink);box-shadow:0 22px 44px -28px rgba(0,0,0,.45)}
.club-tile[hidden]{display:none}
.club-tile__media{position:relative;aspect-ratio:16/10;background:var(--surface);overflow:hidden}
.club-tile__media img{width:100%;height:100%;object-fit:cover}
.club-tile__media .ph{width:100%;height:100%;display:grid;place-content:center;color:var(--line)}
.club-tile__type{
  position:absolute;top:.85rem;left:.85rem;background:var(--ink);color:var(--green);
  font-size:.56rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  padding:.38rem .7rem;border-radius:6px;white-space:nowrap
}
/* Sits opposite the indoor/outdoor badge. Green on ink, because a planned club
   is news rather than a warning -- and it is the one thing on the card that
   changes what you can do with the club today. */
.club-tile__soon{
  position:absolute;top:.85rem;right:.85rem;background:var(--green);color:var(--ink);
  font-size:.56rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  padding:.38rem .7rem;border-radius:6px;white-space:nowrap
}
.club-tile__body{padding:1.15rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.club-tile h3{font-size:1.08rem;letter-spacing:-.02em}
.club-tile h3 a{text-decoration:none}
.club-tile h3 a:hover{color:var(--green-deep)}
.club-tile__meta{display:flex;flex-wrap:wrap;gap:.3rem .55rem;margin:0;font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.club-tile__meta span + span::before{content:"·";margin-right:.55rem;color:var(--line)}

.extras{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;margin:.15rem 0 0;padding:0}
.extras li{
  font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:var(--pill);padding:.3rem .6rem
}
/* Members only leads the extras row and is filled in, because it is the one
   thing that decides whether you can turn up and play. Open clubs say nothing:
   the absence of this chip is the message. */
.extras li.is-private{background:var(--ink);border-color:var(--ink);color:var(--paper)}

.club-tile__actions{display:flex;gap:.5rem;margin-top:auto;padding-top:.35rem}
.club-tile__actions .btn{flex:1;padding:.85rem 1rem;font-size:.66rem}
.club-tile__book{flex:0 0 auto;border-color:var(--line);color:var(--ink)}
.club-tile__book:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

@media (max-width:560px){.club-grid{grid-template-columns:1fr}}

/* Rankings ---------------------------------------------------------------- */
.filters--divisions{justify-content:flex-start}
.ranking[hidden]{display:none}

.podium{display:grid;gap:clamp(1rem,2.4vw,1.75rem);grid-template-columns:1fr;margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}
@media (min-width:680px){.podium{grid-template-columns:repeat(2,1fr)}}
.podium-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:row;align-items:stretch;
  transition:border-color .2s var(--ease),box-shadow .3s var(--ease)
}
.podium-card:hover{border-color:var(--ink);box-shadow:0 22px 44px -28px rgba(0,0,0,.45)}
.podium-card__media{
  position:relative;flex:0 0 40%;min-height:190px;overflow:hidden;
  background-color:#27292E;
}
.podium-card__media img{position:relative;width:100%;height:100%;object-fit:cover}
.podium-card__media .ph{position:relative;width:100%;height:100%;display:grid;place-content:center;color:rgba(255,255,255,.22)}
.podium-card__rank{
  position:absolute;z-index:1;left:.85rem;bottom:.85rem;min-width:44px;height:44px;padding:0 .55rem;
  display:grid;place-content:center;border-radius:12px;
  background:var(--ink);color:var(--green);
  font-family:var(--display);font-size:1.25rem;font-weight:900;letter-spacing:-.04em
}
.podium-card__body{
  flex:1;min-width:0;padding:1.2rem 1.35rem;display:flex;flex-direction:column;
  justify-content:center;gap:.3rem
}
.podium-card h3{font-size:clamp(1.15rem,1.8vw,1.45rem);letter-spacing:-.02em}
.podium-card h3 a{text-decoration:none}
.podium-card h3 a:hover{color:var(--green-deep)}
.podium-card__club{margin:0;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.podium-card__points{display:flex;align-items:baseline;gap:.4rem;margin:.5rem 0 0}
.podium-card__points strong{font-family:var(--display);font-size:1.45rem;letter-spacing:-.03em}
.podium-card__points span{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper)}
.rank-table{width:100%;border-collapse:collapse;font-size:.92rem}
.rank-table th{
  text-align:left;padding:1rem 1.25rem;border-bottom:1px solid var(--line);
  font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap
}
.rank-table td{padding:1rem 1.25rem;border-bottom:1px solid var(--line);vertical-align:middle}
.rank-table tr:last-child td{border-bottom:0}
.rank-table tbody tr:hover{background:var(--surface)}
.rank-table .c-rank{width:1%;white-space:nowrap;font-family:var(--display);font-size:1.05rem;letter-spacing:-.02em;color:var(--ink)}
.rank-table .c-pts{width:1%;white-space:nowrap;text-align:right;font-weight:700}
.rank-table th.c-pts{text-align:right}
.rank-name{font-weight:700;text-decoration:none;letter-spacing:-.01em}
.rank-name:hover{color:var(--green-deep)}
.rank-club-sm{display:none;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rank-table .c-club a{color:var(--muted);text-decoration:none}
.rank-table .c-club a:hover{color:var(--ink)}
.rank-table tr.is-joint .c-rank{color:var(--green-deep)}

@media (max-width:620px){
  .rank-table .c-club{display:none}
  .rank-club-sm{display:block;margin-top:.15rem}
  .rank-table th,.rank-table td{padding:.85rem .9rem}
}

.rank-note{margin:1.25rem 0 0;font-size:.72rem;color:var(--muted)}

/* The legal menu in the bottom bar runs across, not down. */
.footer-bottom nav ul{flex-direction:row;flex-wrap:wrap;gap:1.5rem;margin:0;padding:0;list-style:none}
.footer-bottom nav a{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.footer-bottom nav a:hover{color:var(--ink)}

/* Portrait photo at the top of a profile card. */
.profile-photo{
  aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--surface);
  margin:-.35rem 0 1.4rem
}
.profile-photo img{width:100%;height:100%;object-fit:cover}

/* Category pills read as a set; the format pill stays plain. */
.pill--cat{border-color:var(--ink);color:var(--ink)}

/* Flags ------------------------------------------------------------------- */
.flag{display:block;width:19px;height:14px;object-fit:cover;border-radius:2px}
/* No chip behind it -- the box was doing more shouting than the flag -- and
   two thirds of the original size, which is where it stops reading as a badge
   and starts reading as a detail. */
.flag--card{width:13px;height:10px;border-radius:2px}
.flag-badge{
  position:absolute;right:.5rem;bottom:.5rem;line-height:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.35);
  border-radius:1px
}
.coach-card__media{position:relative}
/* .coach-card__media img sizes the photo at 100%/100%, and that beats
   .flag--card on specificity -- which is why every earlier size change to the
   corner flag did nothing at all. The flag is not the photo, so it has to win
   that rule explicitly. */
.coach-card__media .flag-badge .flag{width:13px;height:10px;object-fit:cover}
.flag--head{width:30px;height:22px;border-radius:3px}
h1.with-flag{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.levels--head{margin-top:1.25rem}
.head-link{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-dark)}
.head-link:hover{color:var(--green);border-bottom-color:var(--green)}

/* Stacked facet rows on the tournament calendar. */
.facets{margin-bottom:clamp(2rem,4vw,3rem)}
.facets .filters{padding-bottom:.9rem;margin-bottom:.9rem}
.facets .filters:last-child{border-bottom:1px solid var(--line);padding-bottom:clamp(1.25rem,2.5vw,1.75rem);margin-bottom:0}
.facets .filters:not(:last-child){border-bottom:0}
.facets .filters__label{min-width:5.5rem}
.tournament[hidden]{display:none}
.pill--date{background:var(--green);border-color:var(--green);color:var(--ink)}

/* Podium stays side-by-side on phones; just tighter. */
@media (max-width:560px){
  .podium-card__media{flex-basis:38%;min-height:150px}
  .podium-card__body{padding:1rem 1.1rem}
  .podium-card h3{font-size:1.05rem}
  .podium-card__rank{min-width:38px;height:38px;font-size:1.05rem;left:.6rem;bottom:.6rem}
}

/* My account ------------------------------------------------------------- */
/* min-width:0 on the children: a 1fr track has min-width:auto, so the widest
   min-content inside (a long email, an input's default size) pushes the track
   past the viewport instead of the track constraining it. */
.account-layout{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem)}
.account-layout > *{min-width:0}
@media (min-width:960px){.account-layout{grid-template-columns:250px 1fr;align-items:start}}
.account-nav{position:sticky;top:calc(var(--header-h) + 1.5rem)}
@media (max-width:959px){.account-nav{position:static}}
.account-me{display:flex;flex-direction:column;gap:.35rem;padding-bottom:1.4rem;margin-bottom:1.2rem;
  border-bottom:1px solid var(--line)}
/* Initials rather than a photo: members have no avatar and a generic silhouette
   in a circle says less than their own initials do. */
.account-me__initials{width:52px;height:52px;margin-bottom:.7rem;border-radius:50%;
  display:grid;place-content:center;background:var(--ink);color:var(--green);
  font-family:var(--display);font-weight:900;font-size:1.05rem;letter-spacing:.02em}
.account-me__name{margin:0;font-family:var(--display);font-weight:900;font-size:1.05rem;
  letter-spacing:-.02em;text-transform:uppercase}
.account-me__mail{margin:0;font-size:.78rem;color:var(--muted);word-break:break-word}
.account-nav ul{list-style:none;margin:0;padding:0}
.account-nav li a{display:block;padding:.55rem 0;font-size:.86rem;font-weight:600;color:var(--muted);
  text-decoration:none;transition:color .2s var(--ease)}
.account-nav li a:hover{color:var(--ink)}
.account-nav__out{margin:1.4rem 0 0;padding-top:1.2rem;border-top:1px solid var(--line)}
.account-nav__out a{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);text-decoration:none}
.account-nav__out a:hover{color:#B3261E}

/* On the account page the form owns the full column, unlike the centred
   sign-up form it shares its styles with. */
.account-form--wide{width:100%;max-width:none;margin:0}
.account-form--wide .field-group{scroll-margin-top:calc(var(--header-h) + 1.5rem)}
.form-ok{width:100%;margin:0 0 clamp(1.5rem,3vw,2rem);padding:1rem 1.25rem;
  border:1px solid var(--green-deep);border-left-width:4px;border-radius:var(--radius);
  background:#F1F8EC;color:#2C5714;font-size:.9rem;font-weight:600}
.account-gate{width:min(100%,620px)}
.account-gate h2{margin-bottom:1rem}

/* Player profile ---------------------------------------------------------- */
.player-hero{max-width:760px}
.stat-list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.stat-list li{display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline}
.stat-list .k{font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.stat-list .v{font-weight:700;font-size:.95rem;text-align:right}
.stat-list li:first-child .v{font-family:var(--display);font-size:1.5rem;letter-spacing:-.03em}
.stat-list a{text-decoration:none}
.stat-list a:hover{color:var(--green-deep)}
.player-bio{margin-top:clamp(2rem,4vw,3rem)}
.player-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(2rem,4vw,3rem)}
.btn--ghost.btn--dark{border-color:var(--line);color:var(--ink)}
.btn--ghost.btn--dark:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* Team Ireland + sponsor marks: present, never shouting. */
.name-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.flag--inline{width:17px;height:13px;border-radius:2px}
.badge-ti{display:inline-flex;align-items:center;opacity:.9}
.sponsor-link{display:inline-flex;align-items:center;line-height:0}
/* --mark-h is the nominal height for the context; --optical (set per image in
   PHP, from where the letterforms actually sit in the file) is what makes two
   logos of different construction read as the same size. */
.sponsor-mark{--mark-h:15px;height:calc(var(--mark-h) * var(--optical,1));
  width:auto;max-width:calc(var(--mark-h) * 8);object-fit:contain;opacity:.72;
  transition:opacity .2s var(--ease)}
.sponsor-link:hover .sponsor-mark{opacity:1}
.sponsor-mark--sm{--mark-h:12.5px;max-width:calc(var(--mark-h) * 6.4)}
/* Player profile only. 26px taken down 20% at Warren's request 2026-08-30;
   max-width is calc'd from --mark-h, so it scales with it. */
.sponsor-mark--lg{--mark-h:20.8px;opacity:.85;max-width:calc(var(--mark-h) * 5)}
.sponsor-line{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;margin:.6rem 0 0}
.sponsor-line span{font-size:.55rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.sponsor-line--lg{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line)}
/* One mark hangs off the left edge like everything else on the card; a pair
   centres, so the divider sits in the middle of the panel rather than leaving
   a wide gap on the right. */
.sponsor-line--lg .sponsor-marks{display:flex;width:100%;justify-content:flex-start}
.sponsor-line--lg .sponsor-marks--2{justify-content:center}
/* In a table row the mark sits inline after the flag, never on its own line. */
.rank-table .name-row{flex-wrap:nowrap;min-width:0}
/* The name never gives ground: if space runs out the sponsor mark shrinks,
   because a truncated player name is worse than a smaller logo. */
.rank-table .rank-name{flex:0 0 auto;white-space:nowrap}
.rank-table .badge-ti{flex:0 0 auto}
.rank-table .sponsor-marks{padding-left:5px;flex:0 1 auto;min-width:0;overflow:hidden}
.rank-table .sponsor-marks .sponsor-mark{max-width:min(96px,100%)}

/* Up to two sponsor marks, side by side with a hairline between them. */
.sponsor-marks{display:inline-flex;align-items:center;gap:.55rem}
.sponsor-marks .sponsor-link + .sponsor-link{padding-left:.55rem;border-left:1px solid var(--line)}

/* Phones: the podium has less width, so the sponsor marks come down a notch,
   and the table row keeps name, flag and one sponsor on a single line. */
@media (max-width:560px){
  .podium .sponsor-mark{--mark-h:13.5px}
  .rank-table .sponsor-mark--sm{--mark-h:11px;max-width:min(62px,100%)}
  .rank-table .name-row{gap:.4rem}
  .rank-table .sponsor-marks{padding-left:4px}
}

/* Player profile --------------------------------------------------------- */
/* The podium card is a row on the rankings page. In the profile's narrow
   column it stacks, so the portrait gets the full width it was shot for. */
.player-hero{flex-direction:column}
.player-hero:hover{border-color:var(--line);box-shadow:none}
.player-hero .podium-card__media{flex:0 0 auto;aspect-ratio:4/5;min-height:0}
.player-hero .podium-card__body{padding:1.25rem 1.35rem 1.4rem;justify-content:flex-start}

.player-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,3.5vw,2.75rem);
  margin-bottom:clamp(2.5rem,5vw,4rem)}
@media (min-width:900px){.player-grid{grid-template-columns:minmax(0,340px) 1fr;align-items:start}}
.player-main{min-width:0}

/* The rank tile is bigger than its neighbours because it is the one number
   anybody came to the page for. */
/* NOT .stat-grid: the homepage counter band already owns that name higher up
   this file, and redefining it here turned its tiles white. */
.player-stats{list-style:none;margin:0 0 1.75rem;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.player-stats li{background:var(--paper);padding:1.25rem 1.35rem}
.player-stats .k{display:block;font-size:.62rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.player-stats .v{display:flex;align-items:baseline;gap:.5rem;font-family:var(--display);
  font-weight:900;font-size:1.6rem;letter-spacing:-.03em;line-height:1}
.player-stats__hero .v{font-size:2.6rem}
.move{display:inline-flex;align-items:center;gap:.15rem;font-style:normal;
  font-family:var(--body);font-size:.78rem;font-weight:700;letter-spacing:0}
.move--up{color:var(--green-deep)}
.move--down{color:#B3261E}

.player-facts{margin-bottom:1.75rem}
.player-facts .v{display:flex;flex-direction:column;align-items:flex-end;gap:.2rem}
.fact-sub{font-style:normal;font-weight:400;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.player-side{display:flex;flex-direction:column;gap:1.1rem}
.player-links{display:flex;flex-wrap:wrap;gap:.5rem;margin:0}
.player-links a{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .8rem;
  border:1px solid var(--line);border-radius:var(--pill);font-size:.74rem;font-weight:700;
  text-decoration:none;color:var(--muted);transition:border-color .2s var(--ease),color .2s var(--ease)}
.player-links a:hover{border-color:var(--ink);color:var(--ink)}
.player-bio{max-width:66ch}
.section-head--tight{margin-bottom:clamp(1.25rem,2.5vw,1.75rem)}

/* Results table. A win is the row worth spotting, so it gets the trophy and a
   heavier label -- nothing else in the row changes. */
/* white-space:normal is not optional here. `.rank-table th{white-space:nowrap}`
   is written for column headings, but the event cell is a row header, so it
   inherited the nowrap and long event names ran straight out of the table --
   invisibly on desktop, and pushing the grade chips off a phone entirely. */
.results-table .c-event{text-align:left;font-weight:600;color:var(--ink);font-size:.9rem;
  white-space:normal;overflow-wrap:anywhere;
  padding:1rem 1.25rem;border-bottom:1px solid var(--line);vertical-align:middle}
.results-table tbody tr:last-child .c-event{border-bottom:0}
/* td, not the bare class: the column heading is a .c-when <th> too, and an
   unscoped font-size made DATE render at 13.6px beside 9.6px neighbours. */
.results-table td.c-when{white-space:nowrap;color:var(--muted);font-size:.85rem}
.results-table .c-result{white-space:nowrap}
.results-table tr.is-win .c-result{font-weight:700;color:var(--ink)}
.results-table .trophy{display:inline-block;vertical-align:-2px;margin-right:.4rem;color:var(--green-deep)}
.results-table td.c-pts{font-family:var(--display);font-weight:900;font-size:1rem;letter-spacing:-.02em}
.results-table .nonrank{font-family:var(--body);font-weight:600;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
/* Grade tag ---------------------------------------------------------------
   There was no base rule, only one scoped to the points table, so the same
   markup rendered as a coloured pill there and as bare text on a player
   profile. The grade is the one piece of context that tells you what a result
   was worth, so it gets the pill everywhere. */
.gtag{display:inline-block;padding:.35rem .6rem;border-radius:999px;
  background:var(--g,var(--surface));color:var(--ink);font-family:var(--body);
  font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  line-height:1;white-space:nowrap;vertical-align:1px}
.gtag--sm{margin-left:.5rem;padding:.3rem .55rem;font-size:.54rem;vertical-align:1px}
.gtag--ghost{margin-left:.5rem;padding:.3rem .55rem;border:1px solid var(--line);
  border-radius:999px;background:none;color:var(--muted);font-size:.54rem;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;vertical-align:1px}

@media (max-width:640px){
  /* The <table> itself has to become a block too: leave it as display:table and
     it keeps an intrinsic column width from its cells, so the wrapper still
     reports a horizontal scroll even though nothing visibly overflows. */
  .results-table{display:block}
  .results-table thead{display:none}
  .results-table tbody{display:block}
  .results-table tr{display:grid;grid-template-columns:1fr auto;gap:.35rem .9rem;
    padding:1rem 1.1rem;border-bottom:1px solid var(--line)}
  .results-table tr:last-child{border-bottom:0}
  .results-table th,.results-table td{display:block;padding:0;border:0}
  .results-table .c-event{grid-column:1/-1;font-size:.86rem;line-height:1.4}
  .results-table .c-result{grid-column:1;grid-row:2;white-space:normal;font-size:.8rem}
  .results-table td.c-when{grid-column:1;grid-row:3;font-size:.74rem}
  .results-table .c-pts{grid-column:2;grid-row:2/4;align-self:center;text-align:right;font-size:1.2rem}
  .player-stats{grid-template-columns:1fr 1fr}
  .player-stats__hero{grid-column:1/-1}
}

/* =======================================================================
   Tournament page
   Lives on --paper now, not on the dark band. Namespaced tourn-/ev-/div-/
   bracket- so nothing here reaches the country flags (.flag) or the
   homepage counters.
   ==================================================================== */

.page-head--tight{padding-bottom:clamp(1.6rem,3vw,2.4rem)}
.head-flags{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0}
.ev-flag{display:inline-flex;align-items:center;padding:.32rem .7rem;border-radius:var(--pill);
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,255,255,.1);color:var(--paper);border:1px solid rgba(255,255,255,.18)}
.ev-flag--running{background:var(--green);color:var(--ink);border-color:transparent}
.ev-flag--complete{background:rgba(255,255,255,.06);color:var(--muted-dark)}
.ev-flag--open{background:rgba(125,206,75,.16);color:var(--green);border-color:rgba(125,206,75,.4)}
.ev-flag--closed,.ev-flag--soon{color:var(--muted-dark)}

/* --- layout ------------------------------------------------------------ */
.tourn-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.tourn-main{min-width:0}
/* The overview text was capped at a measure well short of the column it sits
   in, which read as a slab of empty paper down the right hand side above the
   full width division cards. It fills the column now, and the type is a step
   larger so a line of it is still a comfortable length to read. The opening
   paragraph carries the event, so it gets the lead treatment. */
#panel-overview .prose{max-width:none;font-size:1rem;line-height:1.72;color:var(--ink-3)}
#panel-overview .prose > :first-child{margin-top:0}
#panel-overview .prose p{margin:0 0 1.1rem}
#panel-overview .prose p:last-child{margin-bottom:0}
.tourn-aside{display:grid;gap:1.2rem;position:sticky;top:calc(var(--header-h) + 1.5rem)}
/* .aside-card is sticky in its own right, because on a club or a coach page it
   IS the sidebar. Here the column above it already sticks, so leaving the cards
   sticky too meant the partners card pinned itself and rode up over the facts
   card as the page scrolled. The column sticks; the cards inside it do not. */
.tourn-aside .aside-card{position:static}
.tourn-aside__media{border-radius:var(--radius);overflow:hidden;aspect-ratio:8/5;background:var(--ink)}
.tourn-aside__media img{width:100%;height:100%;object-fit:contain;display:block}
.btn--full{display:block;text-align:center;margin-top:1.2rem}
@media (max-width:900px){
  .tourn-layout{grid-template-columns:1fr}
  .tourn-aside{position:static;order:2}
  .tourn-aside__media{aspect-ratio:8/5;max-height:none}
}

/* --- tabs on paper ----------------------------------------------------- */
/* An underlined row of text links looked like an afterthought bolted to the
   top of the page. A segmented control instead: one object, obviously a
   control, the selected tab a solid black pill with the type knocked out of
   it. Black rather than white-on-grey because the header and the hero are
   black, so the selected tab belongs to the same page rather than looking
   like a stray browser widget. */
.tabs__list{
  display:flex;gap:.25rem;padding:.3rem;margin:0 0 2.2rem;
  width:max-content;max-width:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--pill);
}
.tabs__tab{
  appearance:none;background:none;border:0;cursor:pointer;font:inherit;
  flex:0 0 auto;padding:.72rem 1.3rem;border-radius:var(--pill);
  font-size:.82rem;font-weight:700;letter-spacing:.01em;color:var(--muted);
  white-space:nowrap;text-align:center;
  transition:color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease);
}
.tabs__tab:hover{color:var(--ink);background:rgba(11,11,12,.05)}
.tabs__tab[aria-selected="true"],
.tabs__tab[aria-selected="true"]:hover{
  background:var(--ink);color:var(--paper);
  box-shadow:0 1px 2px rgba(11,11,12,.18),0 4px 12px rgba(11,11,12,.14);
}
.tabs__tab:focus-visible{outline:2px solid var(--green-deep);outline-offset:2px}

/* Below the width where all five fit, wrapping them gave two ragged rows of
   different heights and widths -- five things do not divide into a tidy grid.
   One row that scrolls instead: every tab keeps its real size, the selected
   one is scrolled into view by the script, and the tab clipped by the right
   edge of the track is the thing that says there is more this way. */
@media (max-width:760px){
  /* The grey track comes off on a phone. A scrolling row inside a bordered
     pill cannot fade at its right edge without fading its own border with it,
     and the fade is what says there is more this way. Bare on the paper
     instead: outlined pills for what you can tap, one filled black pill for
     where you are. */
  .tabs__list{
    width:auto;flex-wrap:nowrap;gap:.4rem;margin-bottom:1.8rem;
    padding:.15rem 0;background:none;border:0;border-radius:0;
    overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none;
    scroll-snap-type:x proximity;
  }
  .tabs__list::-webkit-scrollbar{display:none}
  .tabs__list.has-more{
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 2.2rem),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 2.2rem),transparent 100%);
  }
  .tabs__tab{
    /* .8rem of vertical padding lands the tap target on 48px, which is
       Material's minimum and comfortably past Apple's 44pt. */
    padding:.8rem 1.15rem;font-size:.82rem;scroll-snap-align:center;
    border:1px solid var(--line);background:var(--paper);color:var(--ink-3);
  }
  .tabs__tab:hover{background:var(--surface)}
  .tabs__tab[aria-selected="true"],
  .tabs__tab[aria-selected="true"]:hover{border-color:var(--ink);box-shadow:none}
}

.div-h{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;font-size:.95rem;
  letter-spacing:.09em;text-transform:uppercase;margin:2.4rem 0 1.1rem;color:var(--ink)}
.div-h:first-child{margin-top:0}
.div-sub{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:1.6rem 0 .7rem}
.empty-note{color:var(--muted);font-size:.92rem;padding:1.1rem 1.3rem;background:var(--surface);
  border-radius:var(--radius-sm);margin:0 0 1.4rem}

/* --- division cards ---------------------------------------------------- */
.div-cards{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
/* The card used to carry the structure spelled out, then every scoring format
   spelled out under it: two paragraphs of regulations where somebody wanted
   two facts. Now it is a shape, a guarantee, and what it costs, with the rules
   behind a link. The white card on paper needs the border to read as an
   object, so the padding grew with it. */
.div-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.5rem 1.6rem;min-width:0;display:flex;flex-direction:column}
.div-card__body,.div-card__side{min-width:0;display:flex;flex-direction:column}
.div-card__body{flex:1 1 auto}
/* A lone division stretched its fact rows the whole width of the column, label
   pinned left and value pinned right with a hand span of nothing between them.
   Split in two instead: what it is on the left, what it costs on the right.
   Two or more divisions are already narrow enough side by side. */
@media (min-width:760px){
  .div-cards--solo .div-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(14rem,18rem);
    column-gap:2.6rem;align-items:start;padding:1.7rem 1.9rem}
  .div-cards--solo .div-card__side{justify-content:flex-start}
}
.div-card h4{margin:.95rem 0 .6rem;font-size:1.12rem;letter-spacing:-.01em}
.div-card__shape{margin:0;color:var(--ink-3);font-size:.95rem;line-height:1.5}
.div-card__min{display:flex;align-items:center;gap:.45rem;margin:.7rem 0 1.1rem;
  font-size:.84rem;font-weight:700;color:var(--green-deep)}
.div-card__min svg{flex:none}
.div-card__note{margin:.9rem 0 0;font-size:.84rem;color:var(--muted);font-style:italic}
.div-card__more{display:inline-flex;align-items:center;gap:.3rem;align-self:flex-start;
  margin-top:1.1rem;font-size:.76rem;font-weight:700;letter-spacing:.03em;
  color:var(--green-deep);text-decoration:none}
.div-card__more svg{transition:transform .18s var(--ease)}
.div-card__more:hover{text-decoration:underline;text-underline-offset:3px}
.div-card__more:hover svg{transform:translateX(2px)}
.div-card__side .fact-list{margin-top:auto}
.div-cards--solo .div-card__side .fact-list{margin-top:0}
.div-facts{display:flex;flex-wrap:wrap;gap:.4rem}
/* Uppercase with no descenders sits high in a line box, so centring the box is
   not the same as centring what you can see. Flex centring on a 1 line-height
   does most of it; the 0.12rem of extra padding on top is the optical nudge that
   finishes the job. Measured, not guessed. */
.grade-chip{display:inline-flex;align-items:center;line-height:1;
  padding:.48rem .75rem .36rem;border-radius:var(--pill);background:var(--chip,#EFE3C4);
  color:var(--ink);font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.grade-chip--ext{background:var(--surface);color:var(--muted)}
.grade-chip--sm{font-size:.6rem;padding:.42rem .6rem .3rem}
.pill--rank{background:rgba(63,122,30,.1);color:var(--green-deep)}
.fact-list--tight li{padding:.45rem 0;font-size:.86rem}

/* --- entering ---------------------------------------------------------- */
.entry-msg{padding:.85rem 1.15rem;border-radius:var(--radius-sm);margin:0 0 1.5rem;font-size:.92rem}
.entry-msg--success{background:rgba(63,122,30,.1);color:var(--green-deep)}
.entry-msg--notice{background:var(--surface);color:var(--ink)}
.entry-msg--error{background:#FDECEC;color:#A32020}

.enter-panel{background:var(--surface);border-radius:var(--radius);padding:1.5rem 1.6rem;margin:0 0 2.2rem}
.enter-panel h3{margin:0 0 .7rem;font-size:1.05rem;letter-spacing:.05em;text-transform:uppercase}
.enter-panel__note{margin:0 0 1.1rem;color:var(--muted);font-size:.9rem}
.enter-form{display:grid;gap:1rem;max-width:26rem}
.enter-form__field{display:flex;flex-direction:column;gap:.35rem;margin:0;min-width:0}
.enter-form__field label{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.enter-form__only{margin:0;font-weight:600}
.enter-form select,.enter-form input[type="text"]{width:100%;padding:.62rem .8rem;font:inherit;
  background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-sm)}
.enter-form select:focus-visible,.enter-form input:focus-visible{outline:2px solid var(--green-deep);outline-offset:1px}

/* --- entry lists, side by side ---------------------------------------- */
.entry-columns{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr))}
.entry-col{min-width:0}
.entry-col__head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-bottom:.6rem;margin-bottom:.9rem;border-bottom:2px solid var(--ink)}
.entry-col__head h3{margin:0;font-size:.95rem;letter-spacing:.05em;text-transform:uppercase}
.entry-col__count{margin:0;font-size:.78rem;color:var(--muted);white-space:nowrap}
.entry-list{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.entry{display:flex;gap:.6rem;align-items:baseline;padding:.55rem .8rem;
  background:var(--surface);border-radius:var(--radius-sm);min-width:0;font-size:.92rem}
.entry__seed{flex:0 0 1.8rem;color:var(--green-deep);font-size:.74rem;font-weight:700}
.entry__names{min-width:0;overflow-wrap:anywhere}
.entry__names a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.entry__slash{color:var(--muted);margin:0 .2rem}
.entry-list--wait .entry{background:transparent;border:1px dashed var(--line)}

/* --- draw -------------------------------------------------------------- */
.draw-block{margin:0 0 3rem}
.draw-block__head{padding-bottom:.6rem;margin-bottom:1.2rem;border-bottom:2px solid var(--ink)}
.draw-block__head h3{margin:0 0 .3rem;font-size:.95rem;letter-spacing:.05em;text-transform:uppercase}
.draw-block__summary{margin:0;color:var(--muted);font-size:.88rem}

.group-grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr))}
.group-card{background:var(--surface);border-radius:var(--radius);padding:1.1rem 1.2rem;min-width:0}
.group-card h4{margin:0 0 .8rem;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green-deep)}
.table-scroll{overflow-x:auto}
.group-table{width:100%;border-collapse:collapse;font-size:.82rem}
.group-table th,.group-table td{padding:.4rem .5rem;border-bottom:1px solid var(--line);text-align:left}
.group-table thead th{font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.group-table td,.group-table thead th:not(:first-child){text-align:right}
.group-table th[scope="row"]{font-weight:600;overflow-wrap:anywhere}
.group-table abbr{text-decoration:none;border:0}

.fixture-list{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.25rem}
.fixture{display:grid;grid-template-columns:1fr auto 1fr;gap:.6rem;align-items:center;font-size:.78rem;color:var(--muted)}
.fixture__side{min-width:0;overflow-wrap:anywhere}
.fixture__side:last-child{text-align:right}
.fixture__side.is-win{color:var(--ink);font-weight:600}
.fixture__score{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}

/* Rounds are columns that scroll sideways. A bracket that wraps onto a second
   line stops reading as a bracket, so it scrolls instead of reflowing. */
.bracket-scroll{overflow-x:auto;padding-bottom:.8rem;-webkit-overflow-scrolling:touch}
.bracket{display:flex;gap:1rem;align-items:stretch;min-width:min-content}
.bracket__round{display:flex;flex-direction:column;justify-content:space-around;gap:.7rem;flex:0 0 16.5rem;min-width:16.5rem}
.bracket__label{margin:0 0 .2rem;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.bracket__match{background:var(--surface);border-radius:var(--radius-sm);padding:.55rem .7rem;display:grid;gap:.15rem}
.bracket__side{display:flex;align-items:flex-start;gap:.4rem;font-size:.8rem;color:var(--muted);min-width:0}
.bracket__name{min-width:0;overflow-wrap:anywhere;line-height:1.3}
.bracket__side.is-win{color:var(--ink);font-weight:650}
.bracket__side .trophy{flex:0 0 auto;color:var(--green-deep);margin-top:.1rem}
.bracket__score{font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums;
  margin-top:.2rem;padding-top:.3rem;border-top:1px solid var(--line)}

/* The planned-draw outline: present, clearly not yet real. */
.is-skeleton{opacity:.5}
.is-skeleton .bracket__match{background:transparent;border:1px dashed var(--line)}

/* --- points and prizes -------------------------------------------------- */
.pp-block{margin:0 0 2.8rem}
.pp-lede{max-width:60ch;color:var(--muted);margin:0 0 1.3rem}
.pp-foot{margin:1rem 0 0;font-size:.86rem;color:var(--muted)}
.pp-foot a{color:var(--green-deep)}
.points-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:22rem}
.points-table th,.points-table td{padding:.7rem .8rem;border-bottom:1px solid var(--line);text-align:left}
.points-table thead th{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.points-table td{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.points-table thead th:not(:first-child){text-align:right}
.points-table th[scope="row"]{font-weight:500;color:var(--ink)}

.prize-grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr))}
.prize-card{border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.3rem;min-width:0}
.prize-card h4{margin:0 0 .8rem;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green-deep)}
.prize-card ul{margin:0;padding-left:1.1rem;color:var(--ink)}
.prize-card li{margin:0 0 .45rem;font-size:.92rem}

/* --- tournament head facts --------------------------------------------- */
.head-meta{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;margin:1.4rem 0 0;padding:0}
.head-meta li{display:flex;align-items:center;gap:.55rem;color:var(--muted-dark);font-size:.95rem}
.head-meta svg{flex:0 0 auto;color:var(--green)}
.head-meta a{color:var(--paper);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.head-meta a:hover{color:var(--green)}

/* --- sign-in ------------------------------------------------------------ */
.auth-card{max-width:26rem;margin:0 auto}
.auth-card h2{margin:0 0 .8rem;font-size:1.3rem}
.auth-form{display:grid;gap:1.1rem;margin:0 0 1.4rem}
.auth-form__field{display:flex;flex-direction:column;gap:.4rem;margin:0;min-width:0}
.auth-form__field label{font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.auth-form__field input{width:100%;padding:.72rem .85rem;font:inherit;background:var(--paper);
  color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-sm)}
.auth-form__field input:focus-visible{outline:2px solid var(--green-deep);outline-offset:1px}
.auth-form__row{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  flex-wrap:wrap;margin:0;font-size:.86rem}
.auth-form__check{display:flex;align-items:center;gap:.45rem;color:var(--muted)}
.auth-form__link{color:var(--green-deep)}
.auth-alt{margin:1.4rem 0 0;text-align:center;color:var(--muted);font-size:.9rem}
.auth-alt a{color:var(--green-deep)}
.enter-panel__alt{margin:.9rem 0 0;font-size:.86rem;color:var(--muted)}
.enter-panel__alt a{color:var(--green-deep)}


/* --- "Also coaching at" -------------------------------------------------
   Context on somebody else's profile, not the subject of the page: three up,
   square crops, and a text link where the solid button was. */
.coach-grid--sm{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.coach-grid--sm .coach-card__media{aspect-ratio:1/1}
.coach-grid--sm .coach-card__body{padding:.85rem .9rem 1rem;gap:.4rem}
.coach-grid--sm .coach-card h3{font-size:.92rem}
.coach-grid--sm .levels{gap:.28rem}
.coach-grid--sm .level{font-size:.46rem;padding:.24rem .42rem;letter-spacing:.1em}
.coach-grid--sm .btn{
  padding:0;background:none;color:var(--green-deep);font-size:.62rem;border:0;
  width:auto;margin-top:.2rem;justify-content:flex-start;align-self:flex-start
}
.coach-grid--sm .btn:hover{background:none;color:var(--ink);text-decoration:underline}
.coach-grid--sm .flag-badge{transform:scale(.85);transform-origin:top left}
.also-h{font-size:1.15rem;margin-top:2.75rem}
@media (max-width:900px){.coach-grid--sm{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.coach-grid--sm{grid-template-columns:1fr}}

.ig-link{display:inline-flex;align-items:center;gap:.4rem}
.ig-link svg{flex-shrink:0}


/* --- Coach profile on a phone -------------------------------------------
   The related coaches sit inside the main column, so stacking put them above
   the contact card. display:contents dissolves that wrapper below the split
   breakpoint, which lets the three blocks be ordered against each other. */
@media (max-width:899px){
  .coach-split > div{display:contents}
  .coach-split .prose,
  .coach-split > div > .lede{order:1}
  .coach-split .aside-card{order:2}
  .coach-split .also-h{order:3;margin-top:0}
  .coach-split .coach-grid--sm{order:4;margin-top:1rem!important}
  /* The card is sticky so it can follow the bio down a two column page. Stacked,
     with the related coaches now below it, sticky meant it pinned to the top and
     the block scrolled underneath it. */
  .coach-split .aside-card{position:static;top:auto}
}

/* --- Phone: less air between the header and the page ---------------------- */
@media (max-width:700px){
  .page-head{padding-top:calc(var(--header-h) + 1.9rem);padding-bottom:2rem}
  .section{padding:3rem 0}
}

/* ==========================================================================
   Entry checkout
   Its own namespace (co-) because it borrows the shape of .field and .aside-card
   but not their behaviour: the summary must not go sticky on the payment page
   where the Stripe frame changes height as it loads.
   ========================================================================== */
/* The site header is fixed, so a page that does not use .page-head has to
   clear it itself or its first line sits underneath. */
.co-page{padding:calc(var(--header-h) + clamp(1.5rem,3.5vw,2.5rem)) 0 clamp(3rem,7vw,5rem)}
.co-crumb{font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 1rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.co-crumb a{color:var(--green-deep);text-decoration:none}
.co-crumb a:hover{text-decoration:underline}
.co-h{font-size:clamp(1.85rem,4.2vw,3rem);margin:0 0 .6rem}
.co-sub{color:var(--muted);font-size:.9rem;max-width:52ch;margin:0 0 clamp(1.75rem,3.5vw,2.5rem)}

.co-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(1.5rem,3vw,2.75rem);align-items:start}
@media (max-width:960px){.co-layout{grid-template-columns:minmax(0,1fr)}}

.co-steps{display:grid;gap:1.25rem}
.co-step{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.co-step__h{display:flex;align-items:center;gap:.85rem;padding:1.2rem clamp(1.2rem,2.5vw,1.7rem);border-bottom:1px solid var(--line)}
.co-step__n{flex:0 0 auto;width:26px;height:26px;border-radius:var(--pill);background:var(--ink);color:var(--paper);
  display:grid;place-items:center;font-size:.72rem;font-weight:700}
.co-step__t{font-size:1rem;letter-spacing:-.01em;margin:0}
.co-step__b{padding:clamp(1.2rem,2.5vw,1.7rem)}

.co-field{display:flex;flex-direction:column;gap:.45rem;min-width:0;margin:0 0 .2rem}
.co-field label{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.co-field input{width:100%;font:inherit;font-size:.95rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1.05rem}
.co-field input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(125,206,75,.22)}
.co-grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.1rem}
@media (max-width:600px){.co-grid2{grid-template-columns:1fr}}
.co-help{font-size:.78rem;color:var(--muted);line-height:1.55;margin:.6rem 0 0}
.co-or{display:flex;align-items:center;gap:.9rem;margin:1.15rem 0 1rem;color:var(--muted);
  font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.co-or::before,.co-or::after{content:"";height:1px;background:var(--line);flex:1 1 auto}

.co-results{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.4rem}
.co-result{display:flex;align-items:center;gap:.85rem;width:100%;text-align:left;
  background:var(--surface);border:1px solid transparent;border-radius:var(--radius);
  padding:.7rem .85rem;cursor:pointer;font:inherit}
.co-result:hover{border-color:var(--ink);background:var(--paper)}
.co-result__n{min-width:0}
.co-result__n strong{display:block;font-size:.92rem;font-weight:600}
.co-result__n span{display:block;font-size:.76rem;color:var(--muted)}

.co-av{flex:0 0 auto;width:38px;height:38px;border-radius:var(--pill);background:var(--ink);color:var(--paper);
  display:grid;place-items:center;font-size:.74rem;font-weight:700}
.co-av--g{background:var(--green);color:var(--ink)}

.co-pair{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
  background:var(--ink);color:var(--paper);border-radius:var(--radius);padding:1.2rem 1.3rem}
.co-pair__p{display:flex;align-items:center;gap:.8rem;min-width:0}
.co-pair__p:last-child{flex-direction:row-reverse;text-align:right}
.co-pair__n{min-width:0}
.co-pair__n strong{display:block;font-size:.95rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-pair__n span{display:block;font-size:.72rem;color:var(--muted-dark)}
.co-pair__x{font-family:var(--display);font-size:.8rem;color:var(--green)}
@media (max-width:520px){
  .co-pair{grid-template-columns:1fr;gap:.75rem}
  .co-pair__p:last-child{flex-direction:row;text-align:left}
  .co-pair__x{display:none}
}
.co-pair-foot{display:flex;justify-content:flex-end;margin-top:.85rem}
.co-linkish{background:none;border:0;padding:0;color:var(--green-deep);cursor:pointer;font:inherit;
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.co-linkish:hover{text-decoration:underline}

.co-opts{display:grid;gap:.7rem}
.co-opt{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:start;position:relative;
  border:1px solid var(--line);border-radius:var(--radius);padding:1.05rem 1.15rem;cursor:pointer;background:var(--paper)}
.co-opt:hover{border-color:#C9CCC5}
.co-opt input{position:absolute;opacity:0;pointer-events:none}
.co-opt__dot{width:19px;height:19px;border-radius:var(--pill);border:2px solid #C4C8C0;margin-top:.15rem;position:relative}
.co-opt__dot::after{content:"";position:absolute;inset:3px;border-radius:var(--pill);
  background:var(--green-deep);transform:scale(0);transition:transform .18s var(--ease)}
.co-opt:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.co-opt:has(input:checked) .co-opt__dot{border-color:var(--ink)}
.co-opt:has(input:checked) .co-opt__dot::after{transform:scale(1)}
.co-opt:has(input:focus-visible){outline:2px solid var(--green-deep);outline-offset:2px}
.co-opt__t{font-size:.95rem;font-weight:600;display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.co-opt__d{font-size:.8rem;color:var(--muted);line-height:1.55;margin:.3rem 0 0;display:block}
.co-opt__price{font-family:var(--display);font-size:1.15rem;letter-spacing:-.02em}
.co-tag{font-size:.56rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  background:var(--green);color:var(--ink);border-radius:var(--pill);padding:.24rem .52rem}
@media (max-width:540px){
  .co-opt{grid-template-columns:auto minmax(0,1fr)}
  .co-opt__price{grid-column:2;grid-row:2;margin-top:.5rem}
}

.co-aside{display:grid;gap:1rem}
.co-sum{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.co-sum__ev{padding:1.15rem 1.3rem;border-bottom:1px solid var(--line);background:var(--ink);color:var(--paper)}
.co-chips{display:flex;gap:.4rem;flex-wrap:wrap;margin:0 0 .7rem}
.co-chip{display:inline-flex;align-items:center;line-height:1;font-size:.58rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;border-radius:var(--pill);padding:.42rem .62rem .32rem}
.co-chip--g{background:var(--green);color:var(--ink)}
.co-chip--o{border:1px solid var(--line-dark);color:var(--muted-dark)}
.co-sum__ev h2{font-size:1.15rem;letter-spacing:-.02em;line-height:1.05;margin:0 0 .55rem}
.co-meta{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.co-meta li{font-size:.76rem;color:var(--muted-dark)}
.co-sum__lines{padding:1.15rem 1.3rem;display:grid;gap:.6rem}
.co-line{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;font-size:.87rem}
.co-line span:first-child{color:var(--muted)}
.co-line b{font-weight:600;font-variant-numeric:tabular-nums}
.co-line--muted b{color:var(--muted);font-weight:400}
.co-tot{border-top:1px solid var(--line);margin-top:.3rem;padding-top:.85rem;
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.co-tot span{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.co-tot b{font-family:var(--display);font-size:1.7rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.co-sum__act{padding:0 1.3rem 1.3rem;display:grid;gap:.8rem}
.co-pay{width:100%}
.co-fine{margin:0;font-size:.72rem;color:var(--muted);line-height:1.55;text-align:center}
.co-fine a{color:var(--green-deep);font-weight:600}

.co-next{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.2rem 1.3rem}
.co-next h3{font-size:.68rem;letter-spacing:.16em;color:var(--muted);margin:0 0 .85rem;
  font-family:var(--body);font-weight:700;text-transform:uppercase}
.co-next ol{list-style:none;margin:0;padding:0;display:grid;gap:.75rem;counter-reset:n}
/* Two children exactly — the counter and one span — or the bare text would
   become a third grid item and break the alignment. */
.co-next li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;font-size:.8rem;
  color:var(--muted);line-height:1.5;counter-increment:n}
.co-next li::before{content:counter(n);width:20px;height:20px;border-radius:var(--pill);background:var(--surface);
  color:var(--ink);display:grid;place-items:center;font-size:.65rem;font-weight:700;margin-top:.1rem}
.co-next li b{color:var(--ink);font-weight:600}

.co-note{border-radius:var(--radius);padding:.95rem 1.1rem;font-size:.85rem;line-height:1.55;margin:0 0 1.25rem}
.co-note p{margin:0}
.co-note p+p{margin-top:.4rem}
.co-note--amber{background:#FFF8E6;border:1px solid #F0DDA8;color:#6B4A00}
.co-note--green{background:rgba(125,206,75,.12);border:1px solid rgba(63,122,30,.25);color:#2C5714}
.co-err{margin:.9rem 0 0;font-size:.85rem;font-weight:600;color:#B3261E}
.co-secure{margin:.9rem 0 0;font-size:.75rem;color:var(--muted)}
.co-test{margin:0 0 1rem;font-size:.76rem;color:#6B4A00;background:#FFF8E6;border:1px solid #F0DDA8;
  border-radius:var(--radius-sm);padding:.6rem .8rem}

.co-empty{width:min(100%,540px);margin-inline:auto;text-align:center;padding:clamp(2rem,6vw,4rem) 0}
.co-empty h1{font-size:clamp(1.6rem,4vw,2.4rem);margin:0 0 1rem}
.co-empty p{color:var(--muted);margin:0 0 1.75rem}

.co-ty{width:min(100%,640px);margin-inline:auto;text-align:center;padding:clamp(1rem,4vw,2.5rem) 0}
.co-ty__tick{width:74px;height:74px;border-radius:var(--pill);background:var(--green);color:var(--ink);
  display:grid;place-items:center;margin:0 auto 1.75rem}
.co-ty h1{font-size:clamp(2rem,5.2vw,3.4rem);margin:0 0 1rem}
.co-ty__lede{color:var(--muted);font-size:.95rem;max-width:46ch;margin:0 auto 2.25rem}
.co-ty__card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.35rem,3vw,1.85rem);text-align:left;margin:0 0 1.25rem}
.co-ty__ref{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid var(--line)}
.co-ty__ref span{font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.co-ty__ref b{font-family:var(--display);font-size:1.2rem;letter-spacing:.02em}
.co-ty__acts{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.75rem}

/* Paid divisions on the tournament page: a row each, price against the button
   so the number is read before the click rather than after it. */
.enter-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.enter-list li{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:.85rem 1rem}
.enter-list__n{font-size:.92rem;font-weight:600;min-width:0}
.enter-list__n em{display:block;font-style:normal;font-size:.76rem;font-weight:400;color:var(--muted)}

/* ==========================================================================
   Account: entries and history
   The account page was one long form; these sit above it because somebody who
   just entered is here to find out whether they are playing, not to edit
   their details.
   ========================================================================== */
.account-main{min-width:0}
.acct-block{margin:0 0 clamp(2rem,4vw,3rem)}
.acct-h{font-size:clamp(1.25rem,2.4vw,1.6rem);margin:0 0 1.1rem}
.acct-h3{font-size:.72rem;font-family:var(--body);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:1.75rem 0 .75rem}
.acct-empty{background:var(--paper);border:1px dashed var(--line);border-radius:var(--radius-lg);
  padding:1.5rem;text-align:center}
.acct-empty p{margin:0 0 1rem;color:var(--muted);font-size:.9rem}

.entry-cards{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.entry-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.1rem,2.2vw,1.5rem)}
.entry-card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.entry-card h3{font-size:1.05rem;letter-spacing:-.01em;margin:0 0 .3rem}
.entry-card h3 a{text-decoration:none}
.entry-card h3 a:hover{color:var(--green-deep)}
.entry-card__sub{margin:0;font-size:.82rem;color:var(--muted)}
.entry-card__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(115px,1fr));
  gap:.85rem 1.1rem;margin:1.1rem 0 0;padding-top:1.1rem;border-top:1px solid var(--line)}
.entry-card__facts div{min-width:0}
.entry-card__facts dt{font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .25rem}
.entry-card__facts dd{margin:0;font-size:.88rem;font-weight:600;overflow-wrap:anywhere}
.entry-card__note{margin:1rem 0 0;font-size:.82rem;color:var(--muted);line-height:1.55}
.entry-card__act{margin:1rem 0 0}

/* State reads at a glance, by shape as well as colour. */
.acct-pill{display:inline-flex;align-items:center;gap:.4rem;flex:0 0 auto;
  font-size:.66rem;font-weight:700;letter-spacing:.04em;border-radius:var(--pill);padding:.38rem .7rem;white-space:nowrap}
.acct-pill::before{content:"";width:6px;height:6px;border-radius:var(--pill);background:currentColor}
.acct-pill--green{background:rgba(125,206,75,.16);color:var(--green-deep);border:1px solid rgba(63,122,30,.24)}
.acct-pill--amber{background:#FFF8E6;color:#9A6700;border:1px solid #F0DDA8}
.acct-pill--red{background:#FDF3F2;color:#B3261E;border:1px solid #F2CFCC}
.acct-pill--ink{background:var(--ink);color:var(--paper);border:1px solid var(--ink)}
.acct-pill--grey{background:var(--surface);color:var(--muted);border:1px solid var(--line)}

.acct-table{overflow-x:auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg)}
.acct-table table{width:100%;border-collapse:collapse;font-size:.86rem;min-width:420px}
.acct-table th{text-align:left;font-size:.6rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);padding:.85rem 1.1rem;border-bottom:1px solid var(--line);white-space:nowrap}
.acct-table td{padding:.8rem 1.1rem;border-bottom:1px solid var(--line)}
.acct-table tr:last-child td{border-bottom:0}

.acct-past{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.acct-past li{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:.8rem 1rem}
.acct-past a{text-decoration:none;font-weight:600;font-size:.9rem}
.acct-past a:hover{color:var(--green-deep)}
.acct-past em{display:block;font-style:normal;font-size:.76rem;color:var(--muted)}
.acct-profile-link{margin:1.25rem 0 0;font-size:.85rem}
.acct-profile-link a{color:var(--green-deep);font-weight:600}

/* ==========================================================================
   Rankings, before there are any
   A blurred shape of the real table, with the message sitting over it. The
   placeholders are bars rather than invented names, so nothing here can be
   read as a standing even if the blur is removed.
   ========================================================================== */
.rank-soon{position:relative;isolation:isolate}
.rank-soon__ghost{
  filter:blur(7px) saturate(.45);
  opacity:.55;
  pointer-events:none;
  user-select:none;
  /* Fades out at the bottom so the blur reads as depth rather than a
     rectangle that stops abruptly. */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 96%);
  mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 96%);
}
.rank-soon__ghost .podium-card__media .ph{opacity:.5}

/* The bars themselves. */
.sk{display:block;height:.72rem;border-radius:var(--pill);
  background:linear-gradient(90deg,#DCDFD8,#E9EBE6);margin:.3rem 0}
.sk--name{width:72%;height:1rem;margin-bottom:.5rem}
.sk--club{width:48%;height:.66rem}
.sk--pts{width:34%;height:1.1rem;margin-top:.8rem;background:linear-gradient(90deg,#CBD8BE,#DDE6D4)}
.sk--num{width:2.6rem;margin-left:auto}
.rank-soon__ghost td .sk{margin:0}

.rank-soon__panel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(100%,32rem);text-align:center;z-index:1;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.6rem,4vw,2.4rem);
  box-shadow:0 18px 50px rgba(11,11,12,.10), 0 2px 6px rgba(11,11,12,.04);
}
.rank-soon__panel h2{font-size:clamp(1.5rem,3.2vw,2.1rem);margin:0 0 .75rem}
.rank-soon__panel p{color:var(--muted);font-size:.9rem;margin:0 0 1.25rem;line-height:1.65}
.rank-soon__panel .eyebrow{margin-bottom:.8rem;color:var(--green-deep)}
.rank-soon__acts{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin:0}
.rank-soon__acts .btn{padding:.9rem 1.5rem}

/* On a narrow screen the panel is taller than the shape behind it, so it
   stops being an overlay and simply sits above it. */
@media (max-width:700px){
  .rank-soon__ghost{max-height:22rem;overflow:hidden}
  .rank-soon__panel{position:static;transform:none;width:100%;margin-top:-6rem}
}

/* Getting started -------------------------------------------------------- */

/* Diagram tokens live on :root rather than on .dgm because the shared <defs>
   sprite sits in its own <svg> at the top of the document, and a pattern
   resolves custom properties against the element it is *defined* on, not the
   one that references it. Only the two tokens that genuinely change with the
   ground they sit on are overridden per section. */
:root{
  --d-court:#15161A;
  --d-line:rgba(255,255,255,.88);
  --d-net:rgba(255,255,255,.60);
  --d-box:rgba(125,206,75,.13);
  --d-box-hot:rgba(125,206,75,.24);
  --d-glass:rgba(125,206,75,.16);
  --d-glass-edge:rgba(125,206,75,.55);
  --d-mesh:rgba(255,255,255,.36);
  --d-ball:#7DCE4B;
  --d-bad:#DE5440;
  --d-label:#61656B;
}
.section--ink{--d-court:#1D1F24;--d-label:#9A9DA2}
.dgm-defs{position:absolute;width:0;height:0;overflow:hidden}
.dgm{width:100%;height:auto;display:block}
.dgm text{font-family:var(--body);font-size:16px;font-weight:600}
.dgm .dgm__dim text{font-size:15px;font-weight:700}
.dgm .dgm__note{font-size:11px;font-weight:700;letter-spacing:.18em}
.dgm__pin circle{fill:var(--d-ball)}
.dgm__pin text{font-family:var(--display);font-weight:900;font-size:15px;fill:#0B0B0C}
.dgm__step{font-size:12px;font-weight:700;letter-spacing:.16em;fill:var(--d-ball)}
.dgm__step.is-bad{fill:var(--d-bad)}

/* A court plan cannot shrink below the point where its labels stop being
   readable, so on a narrow screen it scrolls rather than becoming decoration. */
.diagram{margin:0}
.diagram__scroll{overflow-x:auto;overscroll-behavior-x:contain}
.diagram figcaption{margin-top:1.1rem;font-size:.8rem;line-height:1.6;color:var(--muted);max-width:74ch}
.section--ink .diagram figcaption{color:var(--muted-dark)}
.diagram__hint{display:none;margin:.7rem 0 0;font-size:.66rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--green-deep)}
.section--ink .diagram__hint{color:var(--green)}
@media (max-width:860px){
  .dgm--court{min-width:720px}
  .dgm--serve{min-width:620px}
  .diagram__hint{display:block}
}

.gs-intro{font-size:1.02rem;line-height:1.75;color:var(--muted);max-width:62ch}
.gs-intro:last-child{margin-bottom:0}

.gs-facts{list-style:none;margin:clamp(2.5rem,4vw,3.5rem) 0 0;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.gs-facts li{background:var(--paper);padding:1.75rem 1.6rem}
.gs-facts h3{font-size:1rem;margin:0 0 .6rem}
.gs-facts p{margin:0;font-size:.88rem;line-height:1.65;color:var(--muted)}

.gs-key{list-style:none;margin:1.75rem 0 0;padding:0;display:grid;gap:1.1rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.gs-key li{display:flex;gap:.85rem;align-items:flex-start}
.gs-key b{display:block;font-size:.88rem;margin-bottom:.15rem}
.gs-key span:not(.gs-key__swatch){font-size:.82rem;line-height:1.6;color:var(--muted)}
/* Each swatch is shaped like the thing it stands for: the surface markings as
   a square, the walls as strips, the net as a post. Four identical squares in
   four shades of the same green told nobody anything. */
.gs-key__swatch{flex:0 0 auto;width:16px;height:16px;border-radius:4px;margin-top:.24rem}
.gs-key__swatch.is-box{background:rgba(125,206,75,.26);border:1px solid rgba(125,206,75,.5)}
.gs-key__swatch.is-glass{height:9px;margin-top:.55rem;border-radius:2px;
  background:rgba(125,206,75,.25);border:1px solid rgba(125,206,75,.75)}
.gs-key__swatch.is-mesh{height:9px;margin-top:.55rem;border-radius:2px;border:1px solid var(--muted);
  background:repeating-linear-gradient(45deg,var(--muted) 0 1px,transparent 1px 4px)}
.gs-key__swatch.is-net{width:8px;height:19px;margin-top:.2rem;border-radius:2px;background:#15161A;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.75) 0 1px,transparent 1px 4px)}

.gs-split{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.25rem);
  align-items:center;margin-top:clamp(2.5rem,5vw,4rem)}
@media (min-width:900px){.gs-split{grid-template-columns:.9fr 1.1fr}}
.gs-split p{font-size:.92rem;line-height:1.7;color:var(--muted)}
.gs-split p:last-child{margin-bottom:0}
.diagram--tight{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:1.5rem 1.5rem 1.25rem}
.diagram--tight figcaption{margin-top:.9rem}

/* Steps and cards sitting on the ink sections. The light versions would read as
   four white slabs on black, which fights the rest of the page. */
.steps--dark{background:var(--line-dark);border-color:var(--line-dark)}
.steps--dark li{background:var(--ink-2)}
.steps--dark .steps__n{color:var(--green)}
.steps--dark p{color:var(--muted-dark)}
.qa--dark{background:var(--line-dark);border-color:var(--line-dark)}
.qa--dark > div{background:var(--ink-2)}
.qa--dark dd{color:var(--muted-dark)}

.gs-serve{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3rem);align-items:center}
/* Grid children default to min-width:auto and refuse to shrink below their
   content, which lets a scrolling diagram push the whole page sideways on a
   phone. The scroll container can only do its job if it is allowed to be
   narrower than the drawing inside it. */
.gs-serve > *,.gs-split > *,.explain-cols > *{min-width:0}
@media (min-width:1000px){.gs-serve{grid-template-columns:minmax(0,1.3fr) minmax(270px,.7fr)}}

.gs-numbered{list-style:none;margin:0;padding:0}
.gs-numbered li{display:flex;gap:1rem;align-items:flex-start;padding:1rem 0;border-bottom:1px solid var(--line)}
.gs-numbered li:first-child{padding-top:0}
.gs-numbered li:last-child{border-bottom:0;padding-bottom:0}
.gs-numbered__n{flex:0 0 auto;width:28px;height:28px;border-radius:var(--pill);background:var(--green);
  color:var(--ink);font-family:var(--display);font-weight:900;font-size:.9rem;
  display:grid;place-items:center;margin-top:.05rem}
.gs-numbered b{display:block;font-size:.95rem;margin-bottom:.25rem}
.gs-numbered span{font-size:.86rem;line-height:1.65;color:var(--muted)}

.gs-subhead{font-size:1.15rem;margin:clamp(2.5rem,5vw,3.5rem) 0 1.5rem}

.gs-verdicts{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.gs-verdicts li{background:var(--paper);padding:1.5rem;display:flex;gap:1rem;align-items:flex-start}
.gs-verdicts__mark{flex:0 0 auto;width:26px;height:26px;border-radius:var(--pill);
  display:grid;place-items:center;margin-top:.05rem}
.gs-verdicts li.is-yes .gs-verdicts__mark{background:var(--green);color:var(--ink)}
.gs-verdicts li.is-no .gs-verdicts__mark{background:var(--d-bad);color:#fff}
.gs-verdicts b{display:block;font-size:.95rem;margin-bottom:.25rem}
.gs-verdicts span{font-size:.86rem;line-height:1.65;color:var(--muted)}

.gs-cards{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(275px,1fr))}
.gs-card{background:var(--ink-2);border:1px solid var(--line-dark);border-radius:var(--radius-lg);
  padding:1.35rem 1.5rem 1.65rem}
.gs-card__art{background:var(--ink);border-radius:var(--radius);padding:.6rem .4rem;margin-bottom:1.15rem}
.gs-card__tag{margin:0 0 .6rem;font-size:.63rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  display:inline-block;padding:.35rem .7rem;border-radius:var(--pill)}
.gs-card.is-yes .gs-card__tag{background:var(--green);color:var(--ink)}
.gs-card.is-no .gs-card__tag{background:var(--d-bad);color:#fff}
.gs-card h3{font-size:1.05rem;margin:0 0 .6rem}
.gs-card p:last-child{margin:0;font-size:.88rem;line-height:1.65;color:var(--muted-dark)}

.gs-ladder{list-style:none;margin:0 0 2rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;max-width:44rem}
.gs-ladder li{position:relative;flex:1 1 5.5rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:1rem .6rem .85rem;text-align:center;
  font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.gs-ladder li span{display:block;font-family:var(--display);font-weight:900;font-size:1.55rem;
  letter-spacing:-.03em;color:var(--ink);margin-bottom:.3rem}
.gs-ladder li.is-win{background:var(--green);border-color:var(--green);color:var(--green-deep)}
.gs-ladder li.is-win span{font-size:1.25rem;line-height:1.85}
.gs-score-notes li{font-size:.9rem}

.gs-kit{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.gs-kit li{display:grid;gap:.3rem 2.5rem;grid-template-columns:1fr;padding:1.25rem 0;border-bottom:1px solid var(--line)}
@media (min-width:760px){.gs-kit li{grid-template-columns:15rem 1fr;align-items:baseline}}
.gs-kit b{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:1rem;letter-spacing:-.01em}
.gs-kit span{font-size:.9rem;line-height:1.7;color:var(--muted)}

/* The three deuce systems ------------------------------------------------ */
.gs-deuce{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(285px,1fr))}
.gs-deuce__card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:1.5rem 1.6rem 1.7rem}
.gs-deuce__tag{margin:0 0 .7rem;font-size:.63rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--green-deep)}
.gs-deuce h4{font-size:1.15rem;margin:0 0 1.15rem}
.gs-deuce p:last-child{margin:0;font-size:.88rem;line-height:1.65;color:var(--muted)}

/* What happens after 40-40, drawn as chips. The arrow is an ::after on the
   chip rather than a ::before on the next one, so when the star point's seven
   steps wrap it trails the end of a line like a hyphen instead of appearing,
   orphaned, at the start of the next. */
.gs-flow{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:.45rem 0}
.gs-flow li{position:relative;display:inline-flex;align-items:center;
  padding:.4rem .6rem;border-radius:var(--radius-sm);
  background:var(--paper);border:1px solid var(--line);
  font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.gs-flow li:not(:last-child){margin-right:1.15rem}
.gs-flow li:not(:last-child)::after{content:"";position:absolute;right:-.88rem;top:50%;
  width:.52rem;height:.52rem;margin-top:-.28rem;
  border-right:2px solid var(--muted);border-top:2px solid var(--muted);
  transform:rotate(45deg);opacity:.5}
.gs-flow li.is-adv{border-color:rgba(125,206,75,.55);background:rgba(125,206,75,.14)}
.gs-flow li.is-dec{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.gs-flow li.is-win{border-color:var(--green);background:var(--green);color:var(--ink)}
.gs-flow__loop{margin:0 0 1rem;font-size:.76rem;line-height:1.5;color:var(--muted);font-style:italic}

/* Live draw -------------------------------------------------------------- */
/* The draw tab is the live tab on the night, so it is ordered by what somebody
   standing at the venue wants: courts first, their own match, then the tables,
   then the brackets. */

.draw-block__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.div-h--sm{font-size:.78rem;letter-spacing:.2em}

.live-chip{display:inline-flex;align-items:center;gap:.5rem;flex:0 0 auto;
  font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  padding:.4rem .8rem;border-radius:var(--pill);background:var(--green);color:var(--ink)}
.live-chip.is-done{background:var(--ink);color:var(--paper)}
.live-chip__dot{width:7px;height:7px;border-radius:50%;background:var(--ink);
  animation:np-pulse 1.6s ease-in-out infinite}
@keyframes np-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@media (prefers-reduced-motion:reduce){.live-chip__dot{animation:none}}

/* Winners ---------------------------------------------------------------- */
.champ{background:var(--ink);color:var(--paper);border-radius:var(--radius-lg);
  padding:clamp(1.5rem,4vw,2.5rem);margin:0 0 1.75rem;text-align:center;
  background-image:radial-gradient(120% 90% at 50% 0%,rgba(125,206,75,.22),transparent 60%)}
.champ__eyebrow{margin:0 0 .6rem;font-size:.64rem;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;color:var(--green)}
.champ__name{margin:0;font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.5rem,4.5vw,2.6rem);letter-spacing:-.03em;line-height:1.02}
.champ__second{margin:.7rem 0 0;font-size:.85rem;color:var(--muted-dark)}
/* The Bowl, given its own line inside the same block: clearly second, clearly
   not an afterthought, and separated by a rule rather than by a gap so it does
   not read as a caption on the winners above it. */
.champ__bowl{margin:1.4rem auto 0;padding:1.1rem 0 0;max-width:36rem;
  border-top:1px solid rgba(255,255,255,.16)}
.champ__bowl-eyebrow{margin:0 0 .35rem;font-size:.58rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted-dark)}
.champ__bowl-name{margin:0;font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(.95rem,2.4vw,1.35rem);letter-spacing:-.02em;line-height:1.1;color:var(--paper)}
.champ__bowl-second{margin:.4rem 0 0;font-size:.75rem;color:var(--muted-dark)}

/* Progress --------------------------------------------------------------- */
.live-prog{margin:0 0 1.75rem}
.live-prog__bar{height:6px;border-radius:var(--pill);background:var(--line);overflow:hidden}
.live-prog__bar span{display:block;height:100%;background:var(--green);transition:width .4s var(--ease)}
.live-prog p{margin:.55rem 0 0;font-size:.78rem;color:var(--muted)}

/* Your next match -------------------------------------------------------- */
.you-next{background:var(--green);color:var(--ink);border-radius:var(--radius-lg);
  padding:1.4rem 1.6rem;margin:0 0 1.75rem}
.you-next__eyebrow{margin:0 0 .5rem;font-size:.63rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--green-deep)}
.you-next__court{margin:0;font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.4rem,4vw,2rem);letter-spacing:-.02em;line-height:1.05;
  display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.you-next__court span{font-family:var(--body);font-size:.95rem;font-weight:700;letter-spacing:0}
.you-next__opp{margin:.5rem 0 0;font-size:.95rem;font-weight:600}
.you-next__round{margin:.2rem 0 0;font-size:.7rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green-deep)}

/* What is on court ------------------------------------------------------- */
/* Deliberately fixed column counts rather than auto-fit. Six courts across an
   881px panel auto-fits to four, which strands two cards on a row of their
   own; three columns gives two even rows and leaves the pair names room. */
.court-strip{list-style:none;margin:0 0 1.75rem;padding:0;display:grid;gap:.75rem;
  grid-template-columns:1fr}
@media (min-width:520px){.court-strip{grid-template-columns:repeat(2,1fr)}}
@media (min-width:860px){.court-strip{grid-template-columns:repeat(3,1fr)}}
.court{background:var(--ink);color:var(--paper);border-radius:var(--radius);
  padding:1rem 1.1rem;border:2px solid transparent}
.court.is-mine{border-color:var(--green)}
.court.is-done{opacity:.55}
.court__n{margin:0 0 .6rem;font-size:.62rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--green)}
.court__side{margin:0 0 .2rem;font-size:.92rem;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.court__foot{margin:.7rem 0 0;display:flex;justify-content:space-between;gap:.6rem;
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dark)}
.court__foot b{color:var(--green);font-variant-numeric:tabular-nums;letter-spacing:0}

/* Up next ---------------------------------------------------------------- */
.up-next{list-style:none;margin:0 0 1.75rem;padding:0;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.up-next li{display:grid;grid-template-columns:2rem 1fr auto 1fr;gap:.5rem .8rem;align-items:center;
  padding:.7rem 1rem;border-bottom:1px solid var(--line);font-size:.86rem}
.up-next li:last-child{border-bottom:0}
.up-next__court{width:1.7rem;height:1.7rem;border-radius:50%;background:var(--surface);
  display:grid;place-items:center;font-size:.72rem;font-weight:700}
.up-next__pair{min-width:0;overflow-wrap:anywhere}
.up-next__v{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}

/* Groups ----------------------------------------------------------------- */
.group-key{display:flex;gap:1.25rem;flex-wrap:wrap;margin:-.5rem 0 1.1rem;
  font-size:.72rem;color:var(--muted)}
.group-key span{display:inline-flex;align-items:center;gap:.45rem}
.group-key .dot{width:9px;height:9px;border-radius:2px;display:inline-block}
.dot.is-cup{background:var(--green)}
.dot.is-plate{background:#C3C9D0}
.group-card.is-done{border-color:rgba(125,206,75,.55)}
.group-card__tag{margin-left:.55rem;font-family:var(--body);font-size:.58rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green-deep);vertical-align:middle}
.group-table th[scope=row]{display:flex;align-items:center;gap:.55rem}
.group-table .pos{flex:0 0 auto;width:1.25rem;height:1.25rem;border-radius:4px;background:var(--surface);
  display:grid;place-items:center;font-size:.66rem;font-weight:700;color:var(--muted)}
.group-table tr.q-cup th[scope=row] .pos{background:var(--green);color:var(--ink)}
.group-table tr.q-plate th[scope=row] .pos{background:#C3C9D0;color:var(--ink)}
.group-table tr.is-mine{background:rgba(125,206,75,.1)}
.fixture.is-played .fixture__score{color:var(--ink);font-weight:700}

/* Brackets --------------------------------------------------------------- */
.bkt-wrap{margin:2rem 0 0}
.bkt-wrap.is-planned{opacity:.55}
.bkt-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0 0 1rem}
.bkt-title{font-size:.78rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);margin:0;font-family:var(--body)}
/* A draw of sixteen is wider than any column this page has, on any screen, so
   the bracket scrolls and says so rather than hiding the final off the edge. */
.bkt-hint{margin:0;font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green-deep);white-space:nowrap}
.bkt-scroll{overflow-x:auto;padding-bottom:.5rem;scroll-snap-type:x proximity}
.bkt-scroll.has-more{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 1.5rem),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 1.5rem),transparent 100%)}
.bkt-wrap.is-measured:not(.has-more) .bkt-hint{visibility:hidden}
/* Groups on a phone --------------------------------------------------------
   A group card holds two full pair names on one line next to a score, which at
   the desktop size wraps to three lines per fixture and turns a readable table
   into a wall. Names and numbers come down a step, the padding tightens, and
   the standings names are allowed to sit on two lines rather than forcing the
   table wider than the screen. */
@media (max-width:560px){
  .group-card{padding:.85rem .9rem}
  .group-table{font-size:.74rem}
  .group-table th,.group-table td{padding:.32rem .3rem}
  .group-table thead th{font-size:.58rem}
  .group-table th[scope=row]{gap:.4rem;line-height:1.3}
  .group-table .pos{width:1.1rem;height:1.1rem;font-size:.62rem}
  /* Two names and a score on one line is three things competing for 300px,
     and the names lose. The score drops to its own centred line, which gives
     each pair half the card and stops "J. Muldoon / O. Ferris" breaking in
     the middle of somebody's name. */
  .fixture{grid-template-columns:1fr 1fr;gap:.1rem .5rem;font-size:.7rem;
    padding:.3rem 0;border-bottom:1px solid var(--line)}
  .fixture:last-child{border-bottom:0}
  .fixture__side{grid-row:1;overflow-wrap:normal;word-break:normal}
  .fixture__side:first-child{grid-column:1;text-align:left}
  .fixture__side:last-child{grid-column:2;text-align:right}
  .fixture__score{grid-row:2;grid-column:1/-1;text-align:center;font-size:.72rem}
}

.bkt{display:flex;gap:2.5rem;align-items:stretch;min-width:min-content}
.bkt__round{flex:0 0 14.5rem;display:flex;flex-direction:column;scroll-snap-align:start}
.bkt__label{margin:0 0 .7rem;font-size:.62rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);position:sticky;top:0}
.bkt__cells{flex:1;display:flex;flex-direction:column}
.bkt__cell{flex:1;display:flex;align-items:center;position:relative;min-height:5.2rem}
.bkt__card{position:relative;width:100%;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:.6rem .75rem}
/* The live marker used to be a glow drawn outside the card. Cards in a column
   sit flush against each other, and a tall one can even overlap its neighbour,
   so there was nowhere for that ring to go: put a finished match between two
   live ones and most of the green disappeared behind it.
   It is drawn inside the card now, where nothing can cover it and it costs no
   layout at all. Every cell gets the same small padding so the cards stop
   touching, which keeps the connector lines correct because the cells all stay
   exactly the same height as each other. */
.bkt__cell{padding:3px 0}
.bkt__card.is-live{border-color:var(--green);border-width:2px;padding:calc(.6rem - 1px) calc(.75rem - 1px);
  background:linear-gradient(0deg,rgba(125,206,75,.07),rgba(125,206,75,.07)),var(--paper);
  box-shadow:inset 0 0 0 2px rgba(125,206,75,.3);z-index:2}
.bkt__meta{margin:0 0 .4rem;display:flex;gap:.55rem;flex-wrap:wrap;font-size:.6rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bkt__live{color:var(--green-deep)}
.bkt__side{margin:0;display:flex;align-items:center;gap:.4rem;font-size:.82rem;line-height:1.4;
  color:var(--muted);overflow-wrap:anywhere}
.bkt__side.is-win{color:var(--ink);font-weight:700}
.bkt__name{min-width:0}
.bkt__trophy{color:var(--green);flex:0 0 auto}
.bkt__score{margin:.35rem 0 0;font-size:.68rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* The joins. Every cell in a round is the same height, so two sibling centres
   are exactly one cell apart and a vertical rule of height 100% reaches from
   one to the other without anybody counting rounds. */
.bkt__round:not(:last-child) .bkt__cell::after{content:"";position:absolute;left:100%;top:50%;
  width:1.25rem;border-top:2px solid var(--line)}
.bkt__round:not(:last-child) .bkt__cell.is-top::before{content:"";position:absolute;
  left:calc(100% + 1.25rem);top:50%;height:100%;border-left:2px solid var(--line)}
.bkt__round:not(:first-child) .bkt__card::before{content:"";position:absolute;right:100%;top:50%;
  width:1.25rem;border-top:2px solid var(--line)}

@media (max-width:700px){
  .bkt{gap:1.75rem}
  .bkt__round{flex:0 0 12.5rem}
  .bkt__round:not(:last-child) .bkt__cell::after,
  .bkt__round:not(:first-child) .bkt__card::before{width:.875rem}
  .bkt__round:not(:last-child) .bkt__cell.is-top::before{left:calc(100% + .875rem)}
}

/* Order of play ---------------------------------------------------------- */
.oop{margin:2rem 0 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.oop summary{padding:.9rem 1.1rem;cursor:pointer;font-size:.72rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.oop__body{border-top:1px solid var(--line);padding:.5rem 0}
.oop__wave{display:grid;grid-template-columns:4.5rem 1fr;gap:.5rem 1rem;padding:.6rem 1.1rem;
  align-items:start}
.oop__time{margin:0;font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums}
.oop__wave ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.oop__wave li{display:grid;gap:.35rem .7rem;align-items:center;font-size:.8rem;
  grid-template-columns:1.5rem 6.5rem minmax(0,1fr) minmax(0,1fr) 4.5rem;
  grid-template-areas:"court stage a b sc"}
.oop__wave li.is-mine{font-weight:700}
.oop__court{grid-area:court;width:1.3rem;height:1.3rem;border-radius:4px;background:var(--surface);
  display:grid;place-items:center;font-size:.64rem;font-weight:700;color:var(--muted)}
.oop__stage{grid-area:stage;min-width:0;font-size:.6rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);opacity:.75;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.oop__pair{min-width:0;overflow-wrap:anywhere;color:var(--muted)}
.oop__pair--a{grid-area:a}
.oop__pair--b{grid-area:b}
.oop__pair.is-win{color:var(--ink);font-weight:700}
.oop__sc{grid-area:sc;font-size:.72rem;color:var(--muted);text-align:right;
  font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .oop__wave{grid-template-columns:1fr;gap:.3rem}
  .oop__wave li{grid-template-columns:1.5rem minmax(0,1fr) 4.2rem;
    grid-template-areas:"court a sc" "court b sc" "court stage stage";
    gap:.15rem .6rem;padding:.35rem 0}
  .oop__wave li + li{border-top:1px solid var(--line)}
  .oop__court{align-self:start;margin-top:.1rem}
  .oop__sc{align-self:center}
}

/* What is being played, stage by stage ------------------------------------
 * A division runs more than one format. A player walking on court wants to
 * know whether this one is first to four or a proper set, so it sits at the
 * top of the draw rather than in a regulations page nobody opens on the night.
 */
/* A player's own photo, on the account page -------------------------------- */
.photo-form{margin-top:1.5rem}
.photo-row{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:1.4rem;align-items:start}
@media (max-width:620px){.photo-row{grid-template-columns:1fr;gap:1rem}}
.photo-now{display:grid;gap:.5rem;justify-items:center}
.photo-now img{width:8rem;height:8rem;object-fit:cover;border-radius:var(--radius);
  border:1px solid var(--line);display:block}
.photo-none{display:grid;place-items:center;width:8rem;height:8rem;border-radius:var(--radius);
  background:var(--surface);border:1px dashed var(--line);font-family:var(--display);
  font-weight:900;font-size:1.6rem;color:var(--muted)}
.photo-tag{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);text-align:center}
.photo-tag.is-live{color:var(--green-deep)}
.photo-tag.is-wait{color:#9A6700}
.photo-say{min-width:0}
.photo-state{margin:0 0 .7rem;padding:.7rem .85rem;border-radius:var(--radius-sm);
  font-size:.85rem;line-height:1.55}
.photo-state.is-wait{background:#FFF6E0;border:1px solid #E8D9A8;color:#6B5A21}
.photo-state.is-no{background:#FDECEA;border:1px solid #F0C4BE;color:#8A2018}
.photo-tip{margin:0 0 .9rem;font-size:.84rem;line-height:1.6;color:var(--muted);max-width:60ch}
.photo-say input[type=file]{width:100%;padding:.6rem;border:1px dashed var(--line);
  border-radius:var(--radius-sm);background:var(--bg);font:inherit;font-size:.85rem}
.photo-note{margin:.7rem 0 0;font-size:.78rem;color:var(--muted);line-height:1.55}

/* Submission forms: list your club, get listed as a coach ------------------
   Two columns on a desk so the reasons sit beside the form, one column on a
   phone with the reasons first, because somebody on a phone wants to know why
   they are filling this in before they start filling it in. */
.sub-shell{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:3rem;align-items:start}
@media (max-width:860px){.sub-shell{grid-template-columns:1fr;gap:2rem}}
.sub-why h2{margin:0 0 .9rem;font-size:1.05rem}
.sub-why .tick-list{margin:0}
.sub-note{margin:1rem 0 0;font-size:.82rem;color:var(--muted);line-height:1.6}

.sub-flash{margin:0 0 1.5rem;padding:1rem 1.15rem;border-radius:var(--radius);
  font-size:.92rem;line-height:1.6}
.sub-flash.is-ok{background:rgba(125,206,75,.16);border:1px solid var(--green);color:var(--ink)}
.sub-flash.is-warn{background:#FFF6E0;border:1px solid #E8D9A8;color:#6B5A21}

.sub-form{min-width:0}
.sub-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.1rem}
.sub-field{margin:0;min-width:0;grid-column:span 6}
.sub-field--half{grid-column:span 3}
.sub-field--third{grid-column:span 2}
@media (max-width:560px){
  .sub-field--half{grid-column:span 6}
  .sub-field--third{grid-column:span 2}
}
.sub-field label{display:block;margin-bottom:.35rem;font-size:.7rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.sub-opt{margin-left:.4rem;font-weight:600;letter-spacing:.06em;color:var(--muted);
  text-transform:none}
.sub-field input,.sub-field textarea,.sub-field select{width:100%;padding:.7rem .8rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);
  font:inherit;font-size:.95rem;color:var(--ink)}
.sub-field textarea{resize:vertical;line-height:1.55}
.sub-field input:focus,.sub-field textarea:focus,.sub-field select:focus{outline:2px solid var(--green);
  outline-offset:-2px;border-color:var(--green)}
.sub-help{display:block;margin-top:.35rem;font-size:.76rem;line-height:1.5;color:var(--muted)}

/* Present in the markup, never on the screen, and never focusable. */
.sub-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.sub-h{margin:2rem 0 .3rem;font-family:var(--display);font-weight:900;text-transform:uppercase;
  letter-spacing:-.01em;font-size:1.05rem}
.sub-h + .sub-note{margin:0 0 1.1rem}
.sub-send{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin:1.75rem 0 0}
.sub-send span{font-size:.8rem;color:var(--muted)}

/* Partners backing one event, in the sidebar beside the entry button. */
.ev-partners__list{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.ev-partner a{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:inherit}
.ev-partner{display:flex;align-items:center;gap:.75rem}
.ev-partner__mark{flex:0 0 auto;width:3rem;display:grid;place-items:center}
.ev-partner__mark img,.ev-partner__mark svg{max-width:100%;height:auto;max-height:2.2rem}
.ev-partner__text{display:grid;gap:.1rem;min-width:0}
.ev-partner__name{font-size:.85rem;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.ev-partner__kind{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted)}
.ev-partner a:hover .ev-partner__name{text-decoration:underline;text-underline-offset:3px}

/* The shape of a division in one line, above its draw. */
.draw-block__shape{margin:0 0 1.25rem;font-size:.84rem;line-height:1.55;color:var(--muted)}
.draw-block__shape a{margin-left:.5rem;white-space:nowrap;font-weight:600;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px}

/* Format tab ------------------------------------------------------------- */
.fmt-block{margin:0 0 2.25rem}
.fmt-block__shape{margin:.3rem 0 1rem;font-size:.88rem;color:var(--muted);max-width:60ch}
.fmt-table{width:100%;border-collapse:collapse;font-size:.88rem}
.fmt-table th,.fmt-table td{padding:.7rem .75rem;border-bottom:1px solid var(--line);
  text-align:left;vertical-align:top}
.fmt-table thead th{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted)}
.fmt-table th[scope=row]{width:34%;font-weight:600;color:var(--ink)}
.fmt-table td{color:var(--muted);line-height:1.55}
.fmt-block__note{margin:.9rem 0 0;font-size:.82rem;color:var(--muted);max-width:66ch}
.fmt-foot{margin:1.5rem 0 0;font-size:.82rem;color:var(--muted)}
@media (max-width:560px){
  .fmt-table,.fmt-table tbody,.fmt-table tr,.fmt-table th,.fmt-table td{display:block}
  .fmt-table thead{display:none}
  .fmt-table tr{padding:.6rem 0;border-bottom:1px solid var(--line)}
  .fmt-table th[scope=row]{width:auto;padding:0 0 .2rem;border:0;font-size:.7rem;
    letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .fmt-table td{padding:0;border:0;color:var(--ink)}
}

.fmt-strip{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.fmt-strip li{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:.2rem 1.25rem;
  align-items:baseline;padding:.7rem 1rem;background:var(--paper)}
.fmt-strip__stage{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink)}
.fmt-strip__fmt{font-size:.82rem;color:var(--muted);min-width:0}
@media (max-width:640px){
  .fmt-strip li{grid-template-columns:1fr}
}

/* ==========================================================================
   Control room
   Private, but it lives in the public stylesheet because it is built from the
   public components: the same brackets, the same pills, the same buttons. What
   marks it as private is the bar across the top and the cooler ground, not a
   different design language.
   ========================================================================== */

.ctl{--ctl-edge:#D9DCD5}

/* The bar that says where you are ---------------------------------------- */
.ctl-bar{background:var(--ink);color:#fff}
.ctl-bar__in{display:flex;align-items:center;gap:1rem;min-height:2.75rem;flex-wrap:wrap}
.ctl-bar a{color:#fff;text-decoration:none;font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.ctl-bar a:hover{opacity:1}
.ctl-bar__tag{margin-inline-start:auto;font-size:.62rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--green);border:1px solid rgba(125,206,75,.4);
  border-radius:var(--pill);padding:.2rem .7rem;white-space:nowrap}
.ctl-bar__view{margin-inline-start:0}
@media (max-width:640px){
  .ctl-bar__tag{margin-inline-start:0;order:-1;width:100%;border:0;padding:.35rem 0}
  .ctl-bar__in{padding-block:.4rem}
}

/* Which event, and where it is up to -------------------------------------- */
.ctl-head{background:var(--ink-2);color:#fff;padding:clamp(1.5rem,4vw,2.5rem) 0}
.ctl-head h1{font-size:clamp(1.6rem,4vw,2.6rem);color:#fff}
.ctl-head__event{margin:0 0 .5rem;font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-dark);display:flex;gap:.75rem;flex-wrap:wrap}
.ctl-head__event span{color:var(--green)}
.ctl-head__note{margin:.75rem 0 0;color:var(--muted-dark);font-size:.9rem;max-width:60ch}

/* The five stages --------------------------------------------------------- */
.ctl-nav{background:var(--ink-2);border-top:1px solid var(--line-dark);
  position:sticky;top:0;z-index:20}
.ctl-nav__in{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none}
.ctl-nav__in::-webkit-scrollbar{display:none}
.ctl-step{display:flex;align-items:center;gap:.5rem;padding:.9rem 1rem;text-decoration:none;
  color:var(--muted-dark);font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;white-space:nowrap;border-bottom:2px solid transparent}
.ctl-step__n{display:grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:50%;
  border:1px solid currentColor;font-size:.64rem;flex:none}
.ctl-step.is-done{color:#fff}
.ctl-step.is-done .ctl-step__n{background:var(--green-deep);border-color:var(--green-deep);color:#fff}
.ctl-step.is-here{color:#fff;border-bottom-color:var(--green)}
.ctl-step:hover{color:#fff}
@media (max-width:640px){
  .ctl-step{padding:.75rem .6rem}
  .ctl-step__l{display:none}
  .ctl-step.is-here .ctl-step__l{display:inline}
}

.ctl-body{padding:clamp(2rem,5vw,3.5rem) 0}
.ctl-h-gap{margin-top:clamp(2rem,4vw,3rem)}

/* Messages ---------------------------------------------------------------- */
.ctl-flash{margin:0 0 1rem;padding:.8rem 1.1rem;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--surface);font-size:.88rem}
.ctl-flash.is-ok{background:rgba(125,206,75,.14);border-color:rgba(125,206,75,.4);color:var(--green-deep)}
.ctl-flash.is-warn{background:#FFF8E6;border-color:#F0DDA8;color:#9A6700}
.ctl-flash.is-bad{background:#FDF3F2;border-color:#F2CFCC;color:#B3261E}
.ctl-note{margin:0 0 1rem;color:var(--muted);font-size:.86rem;max-width:70ch}

/* Picking an event -------------------------------------------------------- */
.ctl-picks{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ctl-pick{display:grid;grid-template-columns:8rem minmax(0,1.6fr) 8rem minmax(0,1.4fr);
  gap:.4rem 1.25rem;align-items:center;padding:1rem 1.25rem;text-decoration:none;color:inherit;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
.ctl-pick:hover{border-color:var(--ink);box-shadow:0 2px 0 var(--ink)}
.ctl-pick__when{font-size:.74rem;font-weight:700;letter-spacing:.06em;color:var(--muted);
  display:flex;flex-direction:column;gap:.15rem}
.ctl-pick__when em{font-style:normal;text-transform:uppercase;font-size:.6rem;color:#9A6700}
.ctl-pick__main{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.ctl-pick__main strong{font-size:.95rem}
.ctl-pick__main span{font-size:.8rem;color:var(--muted)}
.ctl-pick__count{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.ctl-pick__stage{display:flex;flex-direction:column;gap:.25rem;align-items:flex-start;min-width:0}
.ctl-pick__stage em{font-style:normal;font-size:.75rem;color:var(--muted)}
@media (max-width:900px){
  .ctl-pick{grid-template-columns:1fr 1fr}
  .ctl-pick__main{grid-column:1/-1;order:-1}
}

/* The numbers strip ------------------------------------------------------- */
.ctl-stat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;margin:0 0 1.5rem}
.ctl-stat > div{background:var(--paper);padding:.9rem 1.1rem;display:flex;flex-direction:column;gap:.1rem}
.ctl-stat b{font-family:var(--display);font-size:1.5rem;line-height:1;font-variant-numeric:tabular-nums}
.ctl-stat span{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ctl-stat .is-shut b{color:#B3261E}
@media (max-width:640px){.ctl-stat{grid-template-columns:1fr 1fr}}

/* Tables ------------------------------------------------------------------ */
.ctl-table{border:1px solid var(--line);border-radius:var(--radius);overflow:auto;background:var(--paper)}
.ctl-table table{width:100%;border-collapse:collapse;font-size:.86rem}
.ctl-table th{text-align:left;padding:.7rem 1rem;font-size:.62rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line);white-space:nowrap}
.ctl-table td{padding:.7rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
.ctl-table tr:last-child td{border-bottom:0}
.ctl-table tr.is-new td{border-top:1px solid var(--line)}
.ctl-pair{display:flex;flex-direction:column;gap:.1rem;min-width:9rem}
.ctl-pair a{color:inherit}
.ctl-ref,.ctl-paid,.ctl-seed,.ctl-pts{font-variant-numeric:tabular-nums;white-space:nowrap}
.ctl-pts{text-align:right;font-weight:700}
.ctl-acts{display:flex;flex-wrap:wrap;gap:.4rem;align-items:flex-start}
.ctl-acts form{margin:0}

/* The take-out drawer ----------------------------------------------------- */
.ctl-drop summary{cursor:pointer;font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#B3261E;padding:.35rem .2rem}
.ctl-drop form{margin:.5rem 0 0;padding:.8rem;background:#FDF3F2;border:1px solid #F2CFCC;
  border-radius:var(--radius-sm);width:min(22rem,70vw)}
.ctl-drop p{margin:0 0 .6rem;font-size:.78rem;color:#B3261E}
.ctl-drop label{display:block;margin:0 0 .6rem}
.ctl-drop label span{display:block;font-size:.68rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.2rem}
.ctl-drop input[type=text]{width:100%;padding:.45rem .6rem;border:1px solid var(--line);
  border-radius:var(--radius-sm);font:inherit;font-size:.85rem}
.ctl-drop__acts{display:flex;gap:.4rem;flex-wrap:wrap}

/* Seeding ----------------------------------------------------------------- */
.ctl-seeds{margin-top:clamp(2rem,4vw,3rem)}
.ctl-seedlist{list-style:none;margin:0 0 1.25rem;padding:0;
  display:grid;gap:.4rem;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr))}
.ctl-seedlist label{display:grid;grid-template-columns:minmax(0,1fr) 4rem;gap:.75rem;
  align-items:center;padding:.5rem .75rem;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius-sm)}
.ctl-seedlist__name{font-size:.85rem;min-width:0;overflow-wrap:anywhere}
.ctl-seedlist input{width:100%;padding:.4rem .5rem;border:1px solid var(--line);
  border-radius:var(--radius-sm);font:inherit;text-align:center;font-variant-numeric:tabular-nums}

/* Setup ------------------------------------------------------------------- */
.ctl-split{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:clamp(1.5rem,4vw,3rem);
  align-items:start}
.ctl-split > *{min-width:0}
@media (max-width:960px){.ctl-split{grid-template-columns:1fr}}

.ctl-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));
  gap:1rem;margin:0 0 1.75rem}
.ctl-field{margin:0;display:flex;flex-direction:column;gap:.3rem;min-width:0}
.ctl-field--full{grid-column:1/-1}
.ctl-field label{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
.ctl-field input,.ctl-field select{width:100%;padding:.55rem .7rem;border:1px solid var(--line);
  border-radius:var(--radius-sm);font:inherit;font-size:.9rem;background:var(--paper)}
.ctl-help{font-size:.75rem;color:var(--muted)}

.ctl-courts{margin-top:clamp(2rem,4vw,3rem)}
.ctl-courtlist{list-style:none;margin:0 0 1.25rem;padding:0;display:grid;gap:.5rem}
.ctl-courtlist li{display:flex;gap:.75rem;flex-wrap:wrap;align-items:end;
  padding:.5rem .75rem;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-sm)}
.ctl-courtlist label{display:flex;flex-direction:column;gap:.2rem}
.ctl-courtlist label span{font-size:.62rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.ctl-courtlist input{padding:.4rem .55rem;border:1px solid var(--line);
  border-radius:var(--radius-sm);font:inherit;font-variant-numeric:tabular-nums;width:6rem}

/* The forecast panel ------------------------------------------------------ */
.ctl-forecast{background:var(--ink-2);color:#fff;border-radius:var(--radius);
  padding:1.25rem 1.4rem;position:sticky;top:4.5rem}
.ctl-forecast .acct-h{color:#fff;margin-top:0}
.ctl-forecast__none{color:var(--muted-dark);font-size:.85rem;margin:0}
.ctl-forecast__list{margin:0;display:grid;gap:.5rem}
.ctl-forecast__list > div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-bottom:.5rem;border-bottom:1px solid var(--line-dark)}
.ctl-forecast__list dt{font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-dark)}
.ctl-forecast__list dd{margin:0;font-variant-numeric:tabular-nums;font-weight:700}
.ctl-forecast__list .is-big dd{font-family:var(--display);font-size:1.6rem;color:var(--green)}
.ctl-forecast__h3{margin:1.25rem 0 .5rem;font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-dark)}
.ctl-forecast__courts{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.ctl-forecast__courts li{display:flex;justify-content:space-between;gap:1rem;font-size:.8rem;
  font-variant-numeric:tabular-nums}
.ctl-forecast__courts span{color:var(--muted-dark)}
.ctl-forecast__warn{margin:.75rem 0 0;font-size:.8rem;color:#FFD48A}
.ctl-forecast__foot{margin:1.25rem 0 0;font-size:.72rem;color:var(--muted-dark)}

/* Making the draw --------------------------------------------------------- */
.ctl-make{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:center;
  padding:1.25rem 1.4rem;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius)}
.ctl-make .acct-h{margin-top:0}
.ctl-make__say p{margin:.4rem 0 0;font-size:.88rem;color:var(--muted);max-width:60ch}
.ctl-make__danger{color:#B3261E !important;font-weight:600}
.ctl-make__do{display:flex;flex-direction:column;gap:.6rem;align-items:stretch;min-width:12rem}
.ctl-make__confirm span{display:block;font-size:.62rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.25rem}
.ctl-make__confirm input{width:100%;padding:.5rem .7rem;border:1px solid var(--line);
  border-radius:var(--radius-sm);font:inherit;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:760px){.ctl-make{grid-template-columns:1fr}}

/* Publishing the draw ----------------------------------------------------- */
/* Same shape as the make panel, but green-edged while it is the thing left to
   do and quiet once it is done, so the screen says at a glance whether the
   players know about this draw. */
.ctl-pub{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:center;
  margin-top:2rem;padding:1.25rem 1.4rem;background:var(--paper);
  border:1px solid var(--green);border-left:4px solid var(--green);
  border-radius:var(--radius)}
.ctl-pub.is-out{border-color:var(--line);border-left-color:var(--line)}
.ctl-pub .acct-h{margin-top:0}
.ctl-pub__say p{margin:.4rem 0 0;font-size:.88rem;color:var(--muted);max-width:60ch}
.ctl-pub__do{display:flex;flex-direction:column;gap:.6rem;align-items:stretch;min-width:12rem}
@media (max-width:760px){.ctl-pub{grid-template-columns:1fr}}

/* A draw an organiser can see and nobody else can. */
.draw-preview-note{margin:0 0 1rem;padding:.7rem .9rem;border-radius:var(--radius-sm);
  background:#FFF6E0;border:1px solid #E8D9A8;color:#6B5A21;font-size:.85rem;line-height:1.5}

.ctl-groups{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr))}
.ctl-group{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:.9rem 1.1rem}
.ctl-group h3{font-size:.7rem;letter-spacing:.14em;color:var(--muted);margin-bottom:.5rem}
.ctl-group ol{margin:0;padding-left:1.1rem;display:grid;gap:.25rem;font-size:.85rem}

/* Running the night ------------------------------------------------------- */
.ctl-prog{margin:0 0 1.5rem}
.ctl-prog__bar{height:.4rem;border-radius:var(--pill);background:var(--line);overflow:hidden}
.ctl-prog__bar span{display:block;height:100%;background:var(--green);border-radius:var(--pill);
  transition:width .4s var(--ease)}
.ctl-prog p{margin:.5rem 0 0;font-size:.85rem;color:var(--muted)}
.ctl-allplayed{margin:0 0 1rem;font-family:var(--display);font-size:1.4rem;text-transform:uppercase}

.ctl-cards{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(21rem,1fr))}

/* The wall screen's address, at the top of the run screen. A read-only field
   rather than a link to copy by hand: the token is 32 characters and nobody is
   transcribing that onto a totem correctly at five to four. */
.ctl-screen{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1rem 1.5rem;justify-content:space-between;
  margin:0 0 1.5rem;padding:1.1rem 1.3rem;background:var(--surface);border-radius:var(--radius)}
.ctl-screen__txt{flex:1 1 22rem;min-width:0}
.ctl-screen__lab{margin:0;font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ctl-screen__note{margin:.3rem 0 .6rem;font-size:.84rem;color:var(--muted)}
.ctl-screen__url{width:100%;padding:.55rem .7rem;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--paper);font:inherit;font-size:.78rem;color:var(--ink)}
.ctl-screen__acts{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.ctl-screen__acts form{margin:0}

/* --- which courts you are actually on ----------------------------------- */
/* Folded away by default, because most nights nobody touches it, and open on
   its own the moment a court has gone back so the state is visible rather than
   remembered. */
.ctl-courts{margin:0 0 1.5rem;background:var(--surface);border-radius:var(--radius)}
.ctl-courts summary{display:flex;align-items:baseline;gap:.8rem;padding:.95rem 1.2rem;cursor:pointer}
.ctl-courts__lab{font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ctl-courts__count{font-size:.84rem;font-weight:700;color:var(--ink)}
.ctl-courts[open] .ctl-courts__count{color:var(--green-deep)}
.ctl-courts__body{padding:0 1.2rem 1.2rem}
.ctl-courts__body .ctl-note{margin:0 0 1rem}
.ctl-courts__list{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}
.ctl-courts__list li{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm)}
/* A court that has gone back is dimmed rather than hidden: a match may still be
   sitting on it, and something you cannot see is something you cannot fix. */
.ctl-courts__list li.is-off{opacity:.5}
.ctl-courts__list li.is-off input[type=text]{text-decoration:line-through}
.ctl-courts__on{display:flex;align-items:center}
.ctl-courts__on input{width:1.1rem;height:1.1rem;accent-color:var(--green-deep)}
.ctl-courts__list input[type=text]{width:100%;min-width:0;border:0;background:none;
  font:inherit;font-size:.86rem;font-weight:700;color:var(--ink);padding:.15rem 0}
.ctl-courts__list input[type=text]:focus{outline:2px solid var(--green-deep);outline-offset:2px;border-radius:3px}

/* --- how long a match has been on, and how long they all took ---------- */
/* The clock on a card. Reading a stamp the desk already saved rather than
   starting a timer in the browser, so two phones at the same desk agree and a
   page opened mid-match starts at the right number. */
.ctl-m__clock{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;font-size:.72rem;
  padding:.15rem .45rem;border-radius:var(--pill);white-space:nowrap}
.ctl-m__clock.is-live{background:rgba(63,122,30,.12);color:var(--green-deep)}
.ctl-m__clock.is-done{background:var(--surface);color:var(--muted)}

.ctl-tm{display:grid;gap:1.1rem;margin:0 0 2rem}
.ctl-tm__big{list-style:none;margin:0;padding:0;display:grid;gap:.75rem;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.ctl-tm__big li{background:var(--surface);border-radius:var(--radius);padding:1rem 1.1rem}
.ctl-tm__big span{display:block;font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.ctl-tm__big b{font-size:1.5rem;font-family:var(--display);font-weight:900;letter-spacing:-.01em}
.ctl-tm__table{width:100%;border-collapse:collapse;font-size:.86rem}
.ctl-tm__table th,.ctl-tm__table td{padding:.55rem .6rem;text-align:right;border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums}
.ctl-tm__table thead th{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  font-weight:700;border-bottom-width:2px}
.ctl-tm__table th:first-child,.ctl-tm__table td:first-child,
.ctl-tm__table tbody th{text-align:left}
.ctl-tm__table .muted{color:var(--muted)}
.ctl-tm__table .is-over{color:#A32020;font-weight:700}
.ctl-tm__table .is-under{color:var(--green-deep);font-weight:700}
.ctl-tm__table--log{font-size:.8rem}
.ctl-tm__table--log tr.is-live{background:rgba(63,122,30,.07)}
.ctl-tm__dl{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin:0}
.ctl-tm__dl span{font-size:.82rem;color:var(--muted);max-width:44ch}

/* --- settling an oversubscribed list ----------------------------------- */
/* Money moves from this panel, so it is built to be read rather than skimmed:
   both lists side by side, the rows that would actually change marked, and the
   button saying exactly what it is about to do. */
.ctl-settle{background:var(--surface);border-radius:var(--radius);padding:1.3rem 1.4rem;margin:0 0 2rem}
.ctl-settle.has-refunds{border-left:.25rem solid #A32020}
.ctl-settle .acct-h{margin-top:0}
.ctl-settle__how{margin:0 0 .9rem;font-size:.88rem;color:var(--muted)}
.ctl-settle__done{margin:0;font-size:.88rem;color:var(--green-deep);font-weight:700}
.ctl-settle__early{margin:0 0 1rem}
.ctl-settle__cols{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin:0 0 1.2rem}
.ctl-settle__cols h3{margin:0 0 .5rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ctl-settle__list{margin:0;padding:0 0 0 1.8rem;display:grid;gap:.15rem;font-size:.84rem}
.ctl-settle__list li{display:flex;justify-content:space-between;gap:.8rem;padding:.25rem .5rem;border-radius:var(--radius-sm);background:var(--paper)}
.ctl-settle__list li.is-change{font-weight:700;box-shadow:inset 0 0 0 1px var(--line)}
.ctl-settle__list b{font-variant-numeric:tabular-nums;color:var(--muted)}
.ctl-settle__list--out li{color:var(--muted)}
.ctl-settle__list--out li.is-change{color:#A32020}
.ctl-settle__none{margin:0;font-size:.84rem;color:var(--muted)}
@media (max-width:640px){
  .ctl-tm__table--log{font-size:.74rem}
  .ctl-tm__table th,.ctl-tm__table td{padding:.4rem .3rem}
}
.ctl-m{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:.85rem 1rem;display:flex;flex-direction:column;gap:.55rem}
.ctl-m.is-open{border-color:var(--ink);box-shadow:0 2px 0 var(--ink)}
.ctl-m.is-done{opacity:.72}
.ctl-m.is-waiting{opacity:.6}
.ctl-m__top{display:flex;flex-wrap:wrap;gap:.2rem .6rem;align-items:baseline;
  font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ctl-m__court{color:var(--green-deep)}
.ctl-m__when{font-variant-numeric:tabular-nums}
.ctl-m__fmt{margin-inline-start:auto;opacity:.8}
.ctl-m__wait{margin:0;font-size:.8rem;color:var(--muted);font-style:italic}
.ctl-m__ghost{margin:0;font-size:.9rem;color:var(--muted)}

.ctl-m__sides{display:grid;gap:.35rem}
.ctl-m__side{display:flex;align-items:center;gap:.6rem;padding:.6rem .75rem;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);
  min-height:2.9rem}
.ctl-m__side input{position:absolute;opacity:0;pointer-events:none}
.ctl-m__name{flex:1;min-width:0;font-size:.92rem;overflow-wrap:anywhere}
.ctl-m__tick{opacity:0;color:var(--green-deep);font-weight:700}
.ctl-m__side:has(input:checked){background:rgba(125,206,75,.16);border-color:var(--green-deep)}
.ctl-m__side:has(input:checked) .ctl-m__tick{opacity:1}
.ctl-m__side:has(input:focus-visible){outline:2px solid var(--green);outline-offset:2px}
.ctl-m__clear{display:flex;align-items:center;gap:.5rem;font-size:.72rem;color:var(--muted);
  cursor:pointer;padding:.2rem .1rem}
.ctl-m__clear input{width:.9rem;height:.9rem}

/* The score, built rather than typed -------------------------------------- */
/* Three columns the whole way down: what the row is, then a stepper under each
   pair's name, so a number is always under the pair it belongs to. */
/* A card is about 17rem of usable width and this row has to hold a label, four
   buttons and two numbers. The numbers are the only part that carries meaning,
   so they are the part that never gives up space: the input has a floor and
   cannot shrink, and the buttons yield to it. minmax(0,1fr) rather than 1fr
   because a plain 1fr will not shrink below its content and pushes the whole
   row wider than the card. */
.ctl-sc{display:grid;gap:.35rem;--np-lbl:3.4rem;--np-gap:.35rem}
.ctl-sc__head{display:grid;grid-template-columns:var(--np-lbl) minmax(0,1fr) minmax(0,1fr);
  gap:var(--np-gap);align-items:end;margin:0 0 .1rem}
.ctl-sc__head span{font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctl-sc__head b{font-size:.68rem;font-weight:600;color:var(--ink);text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctl-sc__row{display:grid;grid-template-columns:var(--np-lbl) minmax(0,1fr) minmax(0,1fr);
  gap:var(--np-gap);align-items:center}
.ctl-sc__lbl{font-size:.72rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.ctl-sc__row.is-tb .ctl-sc__lbl{font-weight:600;color:var(--ink)}

.ctl-sc__step{display:flex;align-items:stretch;min-width:0;border:1px solid var(--line);
  border-radius:var(--radius-sm);overflow:hidden;background:var(--bg)}
.ctl-sc__row.is-tb .ctl-sc__step{border-color:var(--ink)}
.ctl-sc__step input{flex:1 0 2.6rem;min-width:2.6rem;border:0;background:transparent;
  padding:.5rem .1rem;text-align:center;font:inherit;font-size:1rem;font-weight:700;
  font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.ctl-sc__step input::-webkit-outer-spin-button,
.ctl-sc__step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ctl-sc__step input:focus{outline:2px solid var(--green);outline-offset:-2px}
/* The buttons only exist once the script that drives them has run. */
.ctl-sc__btn{display:none}
.ctl-sc.has-js .ctl-sc__btn{display:block;flex:0 1 1.85rem;min-width:1.4rem;padding:0;
  border:0;background:var(--paper);color:var(--ink);font-size:1rem;line-height:1;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.ctl-sc.has-js .ctl-sc__btn:hover{background:var(--green)}
.ctl-sc.has-js .ctl-sc__btn:active{background:var(--green);transform:translateY(1px)}

.ctl-sc__now{margin:.35rem 0 0;font-size:.85rem;font-weight:600;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.ctl-sc__free{margin-top:.2rem}
.ctl-sc__free summary{font-size:.72rem;color:var(--muted);cursor:pointer}
.ctl-sc__free label{display:block;margin-top:.5rem}
.ctl-sc__free label span{display:block;margin-bottom:.35rem;font-size:.72rem;color:var(--muted);
  line-height:1.45}
.ctl-sc__free input{width:100%;padding:.5rem .65rem;border:1px solid var(--line);
  border-radius:var(--radius-sm);font:inherit;font-variant-numeric:tabular-nums}
/* Wider cards get the full words back and roomier buttons. */
@media (min-width:560px){
  .ctl-sc{--np-lbl:5rem;--np-gap:.5rem}
  .ctl-sc.has-js .ctl-sc__btn{flex-basis:2.3rem}
}
.ctl-m__warn{margin:0;font-size:.75rem;color:#9A6700}
/* Which court, when the number the running order picked is not the real one. */
.ctl-m__court{display:flex;align-items:center;gap:.5rem;font-size:.66rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ctl-m__court select{margin-left:auto;padding:.35rem .5rem;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--bg);font:inherit;font-size:.85rem;
  font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink);
  font-variant-numeric:tabular-nums}
.ctl-m__court select:focus{outline:2px solid var(--green);outline-offset:-2px}

/* On court now: the one tick on this card that other people see. */
.ctl-m__on{display:flex;align-items:center;gap:.5rem;padding:.4rem .55rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);font-size:.78rem;
  font-weight:600;color:var(--ink);cursor:pointer}
.ctl-m__on input{width:1.05rem;height:1.05rem;accent-color:var(--green-deep)}
.ctl-m__on.is-on{border-color:var(--green);background:rgba(125,206,75,.14)}
.ctl-m__onsay{margin-left:auto;font-size:.66rem;font-weight:600;color:var(--green-deep)}
.ctl-m__onsay.is-bad{color:#B3261E}
.ctl-m__wo{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--muted);
  cursor:pointer}

.ctl-more{margin-top:1.25rem;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper)}
.ctl-more summary{padding:.85rem 1.1rem;cursor:pointer;font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ctl-more > *:not(summary){padding:0 1.1rem 1.1rem}

.ctl-save{position:sticky;bottom:0;margin-top:1.5rem;padding:1rem 0 1.25rem;
  background:linear-gradient(to top,var(--paper) 70%,transparent);z-index:10}
.ctl-save p{margin:.5rem 0 0;font-size:.75rem;color:var(--muted);text-align:center}

/* Finishing --------------------------------------------------------------- */
.ctl-won{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  margin:0 0 1.5rem}
.ctl-won__card{background:var(--ink);color:#fff;border-radius:var(--radius);padding:1.4rem 1.5rem}
.ctl-won__card.is-second{background:var(--ink-3)}
.ctl-won__eyebrow{margin:0 0 .4rem;font-size:.62rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--green)}
.ctl-won__name{margin:0;font-family:var(--display);font-size:clamp(1.2rem,3vw,1.8rem);
  text-transform:uppercase;line-height:1}
.ctl-won__sub{margin:.6rem 0 0;font-size:.85rem;color:var(--muted-dark)}

.ctl-push{margin-top:clamp(2rem,4vw,3rem);padding:1.25rem 1.4rem;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius)}
.ctl-push__done{margin:0 0 .75rem;font-size:.85rem;color:var(--green-deep);font-weight:600}
.ctl-push form{margin:0}
.ctl-push .ctl-note{margin:.75rem 0 0}

.ctl-next{margin-top:clamp(2rem,4vw,3rem)}

/* Control room, second pass ------------------------------------------------
 * Fixes from looking at it rendered rather than from reading the markup.
 */

/* A td that is display:flex stops being a table cell, which detaches the row
   rule underneath it. The flexing belongs on a box inside the cell. */
.ctl-table td > .ctl-acts{display:flex;flex-wrap:wrap;gap:.4rem;align-items:flex-start}

/* Browser-blue radios and checkboxes in the middle of a green and black page
   read as something that went wrong. */
.ctl input[type=radio],.ctl input[type=checkbox]{accent-color:var(--green-deep)}

/* The "not played yet" option is the resting state of every unplayed match, so
   it is on screen dozens of times and must not compete with the two pairs
   above it, which are the thing you are actually there to tap. */
.ctl-m__clear{opacity:.65;font-size:.7rem}
.ctl-m__clear:hover{opacity:1}
.ctl-m__clear input{width:.8rem;height:.8rem;flex:none}
.ctl-m__wo input{width:.9rem;height:.9rem;flex:none}

/* A placeholder that is as dark as a value reads as a score already entered. */
.ctl-sc__free input::placeholder,.ctl-drop input::placeholder{color:var(--muted);opacity:.5}

/* Over the cap is worth seeing, not just counting. */
.ctl-stat .is-over b{color:#B3261E}

/* The save button on the run screen is the one control pressed over and over
   with a thumb, so on a phone it gets the whole width. On a desktop a button
   the width of the page reads as a banner rather than a button, so it does not.
*/
.ctl-save .btn{margin-top:0}
@media (max-width:640px){
  .ctl-save .btn{width:100%;padding-block:1rem}
}

/* ==========================================================================
   Partners
   ========================================================================== */

.pt-lead{padding-bottom:0}
.pt-rest{padding-top:clamp(2.5rem,5vw,4rem)}

.pt-card{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:1.25rem 1.75rem;
  align-items:start;padding:1.5rem;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius)}
.pt-card__mark{display:grid;place-items:center;min-height:4rem}
.pt-card__mark img{max-width:100%;height:auto}
.pt-card__initials{font-family:var(--display);font-size:1.6rem;color:var(--muted);
  letter-spacing:-.02em}
.pt-card__name{font-size:1.1rem;margin:0}
.pt-card__meta{margin:.4rem 0 0;display:flex;flex-wrap:wrap;gap:.3rem .9rem;
  font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-deep)}
.pt-card__meta span + span{color:var(--muted)}
.pt-card__bio{margin:.8rem 0 0;font-size:.92rem;color:var(--muted);max-width:62ch}
.pt-card__link{display:inline-flex;align-items:center;gap:.35rem;margin-top:.9rem;
  font-size:.8rem;font-weight:600;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--line)}
.pt-card__link:hover{border-bottom-color:var(--ink)}

/* The principal partner gets the room that is most of what they paid for. */
.pt-card--lead{grid-template-columns:12rem minmax(0,1fr);gap:1.5rem 2.5rem;
  padding:clamp(1.75rem,4vw,2.75rem);border-width:2px;border-color:var(--ink)}
.pt-card--lead .pt-card__mark{min-height:6rem}
.pt-card--lead .pt-card__name{font-size:clamp(1.4rem,3vw,2rem);font-family:var(--display);
  text-transform:uppercase;letter-spacing:-.02em;line-height:1}
.pt-card--lead .pt-card__bio{font-size:1rem;color:var(--ink-3)}

.pt-group + .pt-group{margin-top:clamp(2rem,4vw,3rem)}
.pt-group__h{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 1rem;font-family:var(--body)}
.pt-grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(22rem,1fr))}

@media (max-width:640px){
  .pt-card,.pt-card--lead{grid-template-columns:1fr;gap:1rem}
  .pt-card__mark{justify-items:start;min-height:0}
  .pt-grid{grid-template-columns:1fr}
}

/* The case for joining them ----------------------------------------------- */
.pt-pitch__head{max-width:62ch;margin-bottom:clamp(2rem,4vw,3rem)}
.pt-offer{display:grid;gap:1px;background:var(--line-dark);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  border:1px solid var(--line-dark);border-radius:var(--radius);overflow:hidden}
.pt-offer article{background:var(--ink);padding:1.4rem 1.5rem}
.pt-offer h3{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green);font-family:var(--body);margin:0 0 .6rem}
.pt-offer p{margin:0;font-size:.9rem;color:var(--muted-dark)}

.pt-kinds{margin-top:clamp(2rem,4vw,3rem)}
.pt-kinds__intro{margin:0 0 1rem;font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-dark)}
.pt-kinds ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.pt-kinds li{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:.2rem 1.5rem;
  padding-bottom:.5rem;border-bottom:1px solid var(--line-dark)}
.pt-kinds li b{color:#fff;font-size:.9rem}
.pt-kinds li span{color:var(--muted-dark);font-size:.9rem}
@media (max-width:640px){.pt-kinds li{grid-template-columns:1fr}}

.pt-cta{margin-top:clamp(2rem,4vw,3rem);display:flex;flex-wrap:wrap;gap:1rem 2rem;
  align-items:center}
.pt-cta p{margin:0;max-width:44ch;font-size:.88rem;color:var(--muted-dark)}

/* ==========================================================================
   Mission
   ========================================================================== */

.ms-shell > * + *{margin-top:clamp(2.75rem,6vw,5rem)}
.ms-shell h2{font-size:clamp(1.5rem,3.5vw,2.25rem);margin-bottom:1.25rem}
.ms-shell h3{font-size:1.02rem;font-family:var(--body);font-weight:700;
  text-transform:none;letter-spacing:0;line-height:1.3;margin-bottom:.5rem}

.ms-why p{max-width:68ch;margin:0 0 1rem;font-size:1.02rem;line-height:1.65}
.ms-why p:last-child{margin-bottom:0}

/* Flex rather than grid: with an odd number of aims a grid leaves a hole in
   the last row, where flex lets the trailing cards stretch to fill it. */
.ms-aims__grid{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.ms-aims__grid article{background:var(--paper);padding:1.5rem 1.6rem;
  flex:1 1 22rem;min-width:0}
.ms-aims__n{margin:0 0 .75rem;font-family:var(--display);font-size:1.1rem;color:var(--green-deep)}
.ms-aims__grid p:last-child{margin:0;font-size:.92rem;color:var(--muted)}

.ms-have__intro{max-width:60ch;margin:-.5rem 0 1.5rem;color:var(--muted)}
.ms-have__grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))}
.ms-have__grid article{padding:1.4rem 1.5rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column}
.ms-have__grid p{margin:0 0 1rem;font-size:.92rem;color:var(--muted);flex:1}
.ms-have__grid a{font-size:.78rem;font-weight:700;letter-spacing:.06em;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--line);align-self:flex-start}
.ms-have__grid a:hover{border-bottom-color:var(--ink)}

.ms-how__say{margin:0;max-width:64ch;font-size:1.02rem;line-height:1.65}

.ms-path{padding:clamp(1.5rem,4vw,2.5rem);background:var(--surface);
  border-left:3px solid var(--green);border-radius:0 var(--radius) var(--radius) 0}
.ms-path h2{margin-top:0}
.ms-path p{max-width:66ch;margin:0 0 1rem;font-size:1rem;line-height:1.65}
.ms-path p:last-child{margin-bottom:0}

.ms-next ul{margin:0;padding-left:1.2rem;display:grid;gap:.6rem;max-width:66ch}
.ms-next li{font-size:.98rem;line-height:1.55}
.ms-next__note{margin:1.25rem 0 0;max-width:60ch;font-size:.88rem;color:var(--muted);
  font-style:italic}

.ms-join h2{margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.ms-join__grid{display:grid;gap:1px;background:var(--line-dark);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  border:1px solid var(--line-dark);border-radius:var(--radius);overflow:hidden}
.ms-join__grid article{background:var(--ink);padding:1.5rem;display:flex;flex-direction:column;
  gap:.6rem;align-items:flex-start}
.ms-join__grid h3{color:#fff;font-size:1rem;font-family:var(--body);font-weight:700;
  text-transform:none;letter-spacing:0;margin:0}
.ms-join__grid p{margin:0;flex:1;font-size:.9rem;color:var(--muted-dark)}

/* Partners, second pass ---------------------------------------------------
 * Grouping by kind put one card in most rows, so the kinds are now a chip on
 * the card and there is one grid. And a logo well, because a partner's logo
 * file may well have a dark background of its own and floating it on white
 * turns it into a black rectangle.
 */
.pt-card__mark{background:var(--surface);border-radius:var(--radius-sm);
  padding:1rem .9rem;align-self:start}
.pt-card--lead .pt-card__mark{padding:1.4rem 1.2rem}
/* min() so a card can go narrower than its ideal on a phone. A bare
   minmax(24rem,1fr) refuses to shrink and pushes the page sideways. */
.pt-grid{grid-template-columns:repeat(auto-fill,minmax(min(24rem,100%),1fr));gap:.9rem}
.pt-card{align-content:start}

/* A kind reads as a label rather than as part of the sentence under the name. */
.pt-card__meta span:first-child{background:rgba(125,206,75,.16);color:var(--green-deep);
  padding:.2rem .6rem;border-radius:var(--pill)}
.pt-card--lead .pt-card__meta span:first-child{font-size:.66rem}

@media (max-width:640px){
  .pt-card__mark{justify-self:start;padding:.8rem}
}

/* Partners, third pass -----------------------------------------------------
 * A card built around a 7rem logo column beside a couple of lines has nowhere
 * to put two paragraphs: the text ends up in a 60% column with the logo
 * stranded in white space beside it. The logo goes on top in a well of its
 * own, full width, and the words get the whole card underneath. Fewer, wider
 * cards, and enough padding that a partner's card reads as a page about them
 * rather than a row in a list.
 */
.pt-grid{grid-template-columns:repeat(auto-fill,minmax(min(27rem,100%),1fr));gap:1.4rem}
.pt-card{
  grid-template-columns:1fr;gap:1.4rem;
  padding:clamp(1.6rem,3vw,2.2rem);border-radius:var(--radius-lg);
}
.pt-card__mark{
  justify-self:stretch;min-height:7rem;padding:1.5rem 1.3rem;
  border-radius:var(--radius);align-self:auto
}
.pt-card__mark img{max-height:3.2rem;max-width:min(100%,15rem);object-fit:contain}
.pt-card__initials{font-size:2.2rem}
.pt-card__name{font-family:var(--display);font-size:1.45rem;text-transform:uppercase;
  letter-spacing:-.01em;line-height:1.05}
.pt-card__meta{margin-top:.6rem}
/* Room to breathe, and a measure that suits a paragraph rather than a caption.
   The bio is now the point of the card, so it is ink rather than grey. */
.pt-card__bio{margin-top:1.1rem;max-width:58ch;font-size:.96rem;line-height:1.7;
  color:var(--ink-3)}
.pt-card__bio p{margin:0}
.pt-card__bio p + p{margin-top:.9rem}
.pt-card__link{margin-top:1.2rem}

/* The principal keeps the wide shape, because a full-width logo well is most
   of what the top of this page is for. */
.pt-card--lead{grid-template-columns:1fr;gap:1.8rem;padding:clamp(2rem,4vw,3rem)}
.pt-card--lead .pt-card__mark{min-height:10rem;padding:2.2rem 2rem}
.pt-card--lead .pt-card__mark img{max-height:5rem;max-width:min(100%,22rem)}
.pt-card--lead .pt-card__bio{max-width:66ch;font-size:1.04rem;line-height:1.75}

@media (min-width:900px){
  /* With room for it the principal goes back to logo beside words, because at
     that width a stacked one leaves a very long line under a very wide plate. */
  .pt-card--lead{grid-template-columns:minmax(0,18rem) minmax(0,1fr);gap:2.5rem}
  .pt-card--lead .pt-card__mark{align-self:start}
}
@media (max-width:640px){
  .pt-card__mark,.pt-card--lead .pt-card__mark{justify-self:stretch;padding:1.2rem 1rem;min-height:6rem}
  .pt-card__bio{max-width:none}
}

/* Two bands: the season and the nights ------------------------------------
 * A company that carries the whole series and a company that backed one
 * Saturday in October are not the same thing, and a single grid said they were.
 * Two of the first across the page, three of the second underneath, which is
 * the difference stated in layout rather than in a sentence nobody reads.
 */
.pt-band{max-width:60ch;margin:0 0 clamp(1.5rem,3vw,2.25rem)}
.pt-band h2{font-size:clamp(1.3rem,3vw,1.9rem);margin:0 0 .5rem}
.pt-band p{margin:0;color:var(--muted);font-size:.94rem}
.pt-ev{padding-top:clamp(2rem,4vw,3rem)}

@media (min-width:900px){
  .pt-grid--core{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pt-grid--event{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
}

/* An event card is the same card with the weight taken out of it: a shorter
   logo well, a smaller name, and a bio that is allowed to be a line or two
   rather than a page. */
.pt-card--event{padding:1.3rem 1.4rem;gap:1.1rem;border-radius:var(--radius)}
.pt-card--event .pt-card__mark{min-height:5rem;padding:1.1rem 1rem}
.pt-card--event .pt-card__mark img{max-height:2.3rem;max-width:min(100%,11rem)}
.pt-card--event .pt-card__initials{font-size:1.6rem}
.site-footer .pt-card--event .pt-card__name,
.pt-card--event .pt-card__name{font-size:1.1rem}
.pt-card--event .pt-card__bio{margin-top:.85rem;font-size:.88rem;line-height:1.6;max-width:none}
.pt-card--event .pt-card__link{margin-top:1rem;font-size:.76rem}

/* Which night they backed. The reason the card is still here. */
.pt-card__events{list-style:none;margin:.9rem 0 0;padding:.8rem 0 0;
  border-top:1px solid var(--line);display:grid;gap:.5rem}
.pt-card__events li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem;font-size:.82rem}
.pt-card__events a{color:var(--ink);font-weight:700;text-decoration:none;
  border-bottom:1px solid var(--line)}
.pt-card__events a:hover{border-bottom-color:var(--ink)}
.pt-card__events span{color:var(--muted);font-size:.76rem}

/* When a payment has not come back to us -----------------------------------
 * Shown only after the page has checked a few times and given up. It has to
 * reassure and give a next step, because the person reading it has paid and
 * the screen is telling them we do not know about it.
 */
.co-ty__stuck{margin:1.5rem auto 0;max-width:46rem;padding:1.1rem 1.3rem;text-align:left;
  background:#FFF8E6;border:1px solid #F0DDA8;border-radius:var(--radius)}
.co-ty__stuck p{margin:0 0 .6rem;font-size:.9rem;color:#7a5200;line-height:1.55}
.co-ty__stuck p:last-child{margin-bottom:0}
.co-ty__stuck a{color:#7a5200;font-weight:600}