/* Paddle and Rally: clubhouse scoreboard meets court lines.
   Design system, Oct 17, 2026; overhauled Nov 10, 2026.
   The sport's own data is the visual system (ratings, scores, counts),
   disciplined type, two strong artifacts (the rating card on tool
   pages, the photo plate on the door pages).
   Palette: court green, hardcourt blue, optic yellow used sparingly
   (ball color), warm off-white paper.
   Type: Libre Franklin (display and body: an American grotesque with
   a sporting-goods voice, weights 400 to 900), IBM Plex Mono (the
   functional face: every rating, score, price, and label).
   Motif: the Kitchen Line, the non-volley zone line drawn across the
   page as paired rules with the ball dot at center, plus the court
   corner ticks on cards. Heroes: photo plates on the door pages
   (photograph clean and full bleed, headline on a paper plate that
   overlaps it, never text on photography), scoreboard boards inside. */

:root {
  --paper: #FAF6EC;
  --paper-2: #F2ECDA;
  --ink: #132019;
  --court: #17603E;
  --court-deep: #0C3524;
  --court-ink: #0A2A1C;
  --hard: #1F5FA6;
  --hard-deep: #173F6E;
  --optic: #DCE94A;
  --optic-dim: #B9C93A;
  --line: #D9D0B6;
  --line-pale: #E6DFC8;
  --muted: #55645A;
  --font-display: "Libre Franklin", "Franklin Gothic Medium", "Arial Narrow", sans-serif;
  --font-body: "Libre Franklin", "Franklin Gothic Book", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.62;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

h1, h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: 0.005em;
  margin: 0 0 0.45em 0;
  font-weight: 800;
}
h1 { font-size: clamp(2.55rem, 6vw, 4.15rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.45rem); margin-top: 0; }
h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 700;
  font-size: 1.32rem;
  line-height: 1.15;
  margin: 0 0 0.35em 0;
}
p { margin: 0 0 1em 0; }
a { color: var(--ink); text-decoration-color: var(--court); text-underline-offset: 3px; }
a:hover { color: var(--court); }

.kicker {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--court);
  margin: 0 0 0.9em 0;
}
.lede { font-size: 1.14rem; line-height: 1.6; max-width: 46em; }

/* Header */
header.site {
  background: var(--court-deep);
  color: var(--paper);
  border-bottom: 4px solid var(--optic);
}
header.site .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px;
}
header.site .brand {
  font-family: var(--font-display);
  font-size: 1.8rem; font-weight: 900; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--paper); text-decoration: none;
  line-height: 1;
}
header.site .brand small {
  display: block; font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.22em; font-weight: 400; color: var(--optic);
  text-transform: uppercase; margin-top: 5px;
}
nav.main { display: flex; gap: 4px; flex-wrap: wrap; }
nav.main a {
  color: var(--paper); text-decoration: none; font-family: var(--font-mono);
  font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 7px 11px; border: 1px solid transparent;
}
nav.main a:hover { border-color: var(--optic); color: var(--optic); }

/* Scoreboard hero: dark panel, court lines, mono readouts */
.hero-board {
  background:
    linear-gradient(transparent 0, transparent 100%),
    var(--court-deep);
  color: var(--paper);
  padding: 54px 0 0 0;
  position: relative;
}
.hero-board::before {
  content: ""; position: absolute; inset: 14px;
  border: 2px solid rgba(250,246,236,0.28); pointer-events: none;
}
.hero-board::after {
  content: ""; position: absolute; top: 14px; bottom: 14px; left: 50%;
  width: 2px; background: rgba(250,246,236,0.16); pointer-events: none;
}
.hero-board .wrap { position: relative; z-index: 1; padding-bottom: 40px; }
.hero-board h1 { color: var(--paper); }
.hero-board h1 .ball { color: var(--optic); }
.hero-board .kicker { color: var(--optic); }
.hero-board .lede { color: #E9E4D2; }
.hero-board a { color: var(--paper); }

.ticker {
  border-top: 2px solid rgba(250,246,236,0.28);
  margin-top: 34px;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.ticker .cell {
  padding: 14px 18px 16px;
  border-right: 2px solid rgba(250,246,236,0.16);
}
.ticker .cell:last-child { border-right: 0; }
.ticker .num {
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem); color: var(--optic);
  display: block; line-height: 1.1;
}
.ticker .lab {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: #CFC9AF; display: block; margin-top: 4px;
}

/* Photo plate hero (Nov 10, 2026): the door pages lead with a clean
   photograph, full bleed, and the headline sits on a paper plate that
   overlaps the photo's lower edge. No text ever sits on photography. */
.hero-photo-sec { background: var(--paper); }
.hero-photo { margin: 0; line-height: 0; background: var(--court-deep); }
.hero-photo img { width: 100%; height: auto; display: block; }
.hero-plate {
  background: var(--paper);
  border-top: 5px solid var(--optic);
  box-shadow: 0 14px 34px rgba(10,42,28,0.22);
  padding: 30px 34px 26px;
  margin-top: -64px;
  position: relative;
  max-width: 860px;
}
.hero-plate h1 { margin-bottom: 0.3em; }
.hero-plate .lede { margin-bottom: 0.9em; }
.hero-plate p:last-child { margin-bottom: 0; }
.hero-credit {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em;
  color: var(--muted); margin: 12px 0 0 0;
}
.hero-ticker { background: var(--court-deep); margin-top: 34px; }
.hero-ticker .ticker { border-top: 0; margin-top: 0; }

/* The Kitchen Line: the motif. The non-volley zone line drawn across
   the page, paired rules with the optic ball dot standing on the line
   at center, the way the ball sits on the kitchen line before a serve. */
.kline {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 26px 0; max-width: 340px;
}
.kline::before, .kline::after {
  content: ""; flex: 1; height: 2px; background: var(--court);
}
.kline i {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--optic); border: 2px solid var(--court-deep);
  flex: none; display: block;
}
.kline.on-dark::before, .kline.on-dark::after { background: rgba(250,246,236,0.55); }
.kline.on-dark i { border-color: var(--paper); }

/* Court corner ticks on cards: the L of a court line's corner,
   top-left and bottom-right, in court green. */
.door::before, .door::after, .cluster::before, .cluster::after {
  content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none;
}
.door::before, .cluster::before {
  top: 8px; left: 8px;
  border-top: 3px solid var(--court); border-left: 3px solid var(--court);
}
.door::after, .cluster::after {
  bottom: 8px; right: 8px;
  border-bottom: 3px solid var(--court); border-right: 3px solid var(--court);
}
.door, .cluster { position: relative; }
.cluster { position: relative; }

/* Gear slots (Nov 10, 2026): the structured product slot. Name, list
   price in the mono data voice, spec line, one-line fit note, and a
   foot row that carries the fit tag today and the buying link the day
   a route opens (see WIRE-MAP.md in the build record). No slot ships
   an outbound link in this pass. */
.slot .slot-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; border-bottom: 2px solid var(--line-pale);
  padding-bottom: 8px; margin-bottom: 10px;
}
.slot .slot-head h3 { margin: 0; }
.slot .slot-price {
  font-family: var(--font-mono); font-weight: 600; font-size: 1.18rem;
  color: var(--court-deep); white-space: nowrap;
}
.slot .slot-price small {
  display: block; font-size: 0.6rem; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); text-align: right;
}
.slot .slot-meta { font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted); margin: 0 0 8px 0; }
.slot .slot-foot {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--court); margin: 12px 0 0 0;
  border-top: 1px solid var(--line-pale); padding-top: 9px;
}

/* The gear board on the hub: the nine finder paddles as compact slot
   rows, price and fit in the data voice. */
.gearboard { margin-top: 18px; border-top: 2px solid var(--line); }
.gearboard .grow {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 16px;
  padding: 10px 0; border-bottom: 1px solid var(--line-pale); align-items: baseline;
}
.gearboard .gname { font-weight: 600; font-size: 0.99rem; }
.gearboard .gprice { font-family: var(--font-mono); font-weight: 600; color: var(--court-deep); }
.gearboard .gfit { grid-column: 1 / -1; color: var(--muted); font-size: 0.92rem; }

/* Buttons */
.btn {
  display: inline-block; font-family: var(--font-mono); font-size: 0.86rem;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  background: var(--court); color: #fff; padding: 12px 20px;
  border: 2px solid var(--court); margin: 4px 8px 4px 0;
}
.btn:hover { background: var(--court-deep); color: var(--optic); border-color: var(--court-deep); }
.btn.alt { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.alt:hover { color: var(--court); border-color: var(--court); }
.hero-board .btn { background: var(--optic); border-color: var(--optic); color: var(--court-ink); }
.hero-board .btn:hover { background: var(--paper); border-color: var(--paper); color: var(--court-ink); }
.hero-board .btn.alt { background: transparent; color: var(--paper); border-color: var(--paper); }
.hero-board .btn.alt:hover { color: var(--optic); border-color: var(--optic); }

/* Sections */
section.block { padding: 52px 0; }
section.block.tint { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
section.block.blue { background: var(--hard-deep); color: var(--paper); }
section.block.blue h2, section.block.blue h3 { color: var(--paper); }
section.block.blue .kicker { color: var(--optic); }
section.block.blue a { color: var(--paper); }

/* Doors */
.doors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 26px; }
.door {
  background: #fff; border: 1px solid var(--line); border-top: 6px solid var(--court);
  padding: 24px 24px 20px; position: relative;
}
.door.blue { border-top-color: var(--hard); }
.door h3 { font-size: 1.7rem; }
.door p { font-size: 0.98rem; }
.door .go { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.chip {
  display: inline-block; font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 8px;
  border: 1px solid var(--court); color: var(--court); margin-bottom: 12px;
}
.chip.live { background: var(--court); color: #fff; }
.chip.work { border-color: #9A7B1E; color: #9A7B1E; }
.chip.early { border-color: var(--hard); color: var(--hard); }

/* Cluster cards on section hubs */
.clusters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 26px; }
.cluster { background: #fff; border: 1px solid var(--line); padding: 24px; }
.cluster.wide { grid-column: 1 / -1; }
.cluster h3 { font-size: 1.55rem; }
.cluster .promise { color: var(--muted); font-size: 0.97rem; }
ul.slots { list-style: none; margin: 14px 0 0 0; padding: 0; }
ul.slots li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--line-pale); font-size: 0.97rem;
}
ul.slots li:first-child { border-top: 0; }
ul.slots .st {
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
ul.slots .st.prod { color: #9A7B1E; }
ul.slots a { font-weight: 600; }

/* Kit slot */
.kitband { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; }
.kit-form { display: flex; gap: 0; }
.kit-form input[type="email"] {
  flex: 1; font-family: var(--font-mono); font-size: 0.92rem;
  padding: 12px 14px; border: 2px solid var(--ink); background: #fff; min-width: 0;
}
.kit-form button {
  font-family: var(--font-mono); font-size: 0.84rem; letter-spacing: 0.06em;
  text-transform: uppercase; background: var(--ink); color: var(--paper);
  border: 2px solid var(--ink); padding: 12px 18px; cursor: pointer;
}
.slot-note { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--muted); margin-top: 10px; }

/* Estimator */
.qprogress { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--court); }
/* A12 fix (Oct 21, 2026): the top progress readout sits on the dark hero board,
   where --court green on --court-deep green was near-invisible. The hero's own
   accent (optic) is the legible on-brand color there; the in-form readout lower
   on the page stays --court on paper, which reads fine. */
.hero-board .qprogress { color: var(--optic); }
fieldset.domain {
  border: 1px solid var(--line); background: #fff; margin: 0 0 20px 0; padding: 20px 22px;
}
fieldset.domain legend {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 1.3rem; font-weight: 600; padding: 0 8px; color: var(--court-deep);
}
.q { margin: 0 0 16px 0; }
.q:last-child { margin-bottom: 2px; }
.q .qtext { font-weight: 600; margin: 0 0 8px 0; }
.opt { display: block; border: 1px solid var(--line-pale); padding: 9px 13px; margin: 0 0 7px 0; cursor: pointer; font-size: 0.97rem; }
.opt:hover { border-color: var(--court); }
.opt input { margin-right: 9px; accent-color: var(--court); }

/* Paddle finder (Nov 9, 2026): pick spec lines, the disclosure box
   that sits beside the picks, and three abreast pick cards. */
.pickmeta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); margin: 0 0 8px 0; }
.discbox { background: var(--paper-2); border: 1px solid var(--line); border-left: 6px solid var(--hard); padding: 16px 20px; margin: 26px 0 6px 0; }
.discbox p { margin: 0; font-size: 0.97rem; }
.picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 18px 0 6px 0; }
.doors.picks-print { grid-template-columns: repeat(3, 1fr); margin-top: 14px; }
.finder-out { margin-top: 26px; }
.opt:has(input:checked) { border-color: var(--court); background: #EFF5E9; box-shadow: inset 3px 0 0 var(--court); }
.formmsg { font-family: var(--font-mono); font-size: 0.85rem; color: #9A3412; min-height: 1.3em; }

/* The rating card: the signature artifact. A club scoreboard readout. */
.rating-card {
  background: var(--court-deep); color: var(--paper);
  border: 3px solid var(--court-ink); padding: 0; margin: 26px 0;
  box-shadow: 10px 10px 0 rgba(12,53,36,0.18);
}
.rating-card .rc-head {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 2px solid rgba(250,246,236,0.25); padding: 12px 20px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
}
.rating-card .rc-head .dot { color: var(--optic); }
.rating-card .rc-main { display: grid; grid-template-columns: 220px 1fr; gap: 0; }
.rating-card .rc-level {
  border-right: 2px solid rgba(250,246,236,0.25); padding: 22px 20px; text-align: center;
}
.rating-card .rc-level .big {
  font-family: var(--font-mono); font-weight: 600; font-size: 4.6rem; line-height: 1; color: var(--optic);
}
.rating-card .rc-level .lab { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: #CFC9AF; display: block; margin-top: 8px; }
.rating-card .rc-body { padding: 20px 22px; }
.rating-card .rc-band { font-family: var(--font-mono); font-size: 1.02rem; color: var(--paper); margin: 0 0 4px 0; }
.rating-card .rc-conf { font-family: var(--font-mono); font-size: 0.8rem; color: #CFC9AF; margin: 0 0 14px 0; }
.rc-domains { font-family: var(--font-mono); font-size: 0.82rem; margin: 0 0 16px 0; }
.rc-domains .row { display: grid; grid-template-columns: 118px 1fr 30px; gap: 10px; align-items: center; padding: 3px 0; }
.rc-domains .bar { height: 8px; background: rgba(250,246,236,0.18); position: relative; }
.rc-domains .bar i { position: absolute; inset: 0 auto 0 0; background: var(--optic); display: block; }
.rc-domains .row.low .bar i { background: #E8734A; }
.rc-domains .row.low .nm { color: #F0B79E; }
.rating-card h4 {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--optic); margin: 16px 0 6px 0; font-weight: 500;
}
.rating-card h4:first-child { margin-top: 0; }
.rating-card p, .rating-card li { font-size: 0.98rem; color: #EDE8D6; }
.rating-card ul { margin: 0 0 6px 0; padding-left: 20px; }
.mathbox {
  background: var(--paper-2); border: 1px solid var(--line); padding: 18px 20px;
  font-family: var(--font-mono); font-size: 0.88rem; line-height: 1.7; overflow-x: auto;
}
.disclaimer { font-size: 0.9rem; color: var(--muted); border-left: 4px solid var(--optic-dim); padding: 4px 0 4px 16px; }

/* Comparison table (padel) */
table.diff { border-collapse: collapse; width: 100%; margin: 18px 0; background: #fff; }
table.diff th, table.diff td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; font-size: 0.97rem; vertical-align: top; }
table.diff th { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.05rem; background: var(--paper-2); }
table.diff td:first-child { font-family: var(--font-mono); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--court-deep); width: 130px; }

/* Footer */
footer.site { background: var(--court-ink); color: #CFC9AF; padding: 34px 0 40px; margin-top: 0; }
footer.site .brandline { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.3rem; color: var(--paper); }
footer.site p { font-size: 0.9rem; margin: 6px 0; }
footer.site a { color: var(--optic); }

@media (max-width: 760px) {
  .hero-plate { margin-top: -38px; padding: 24px 22px 20px; }
  .kline { max-width: 240px; }
  .ticker { grid-template-columns: repeat(2, 1fr); }
  .ticker .cell { border-bottom: 2px solid rgba(250,246,236,0.16); }
  .doors, .clusters, .kitband, .picks, .doors.picks-print { grid-template-columns: 1fr; }
  .rating-card .rc-main { grid-template-columns: 1fr; }
  .rating-card .rc-level { border-right: 0; border-bottom: 2px solid rgba(250,246,236,0.25); }
  .rc-domains .row { grid-template-columns: 96px 1fr 26px; }
  /* D4 fix (Oct 21, 2026): the tournament-costs tables (.diff.costs only; the
     padel comparison table keeps its own proportions). Fixed layout with
     explicit column shares stops the notes column being squeezed to a few
     words per line and takes the profiles table's ~10px overflow back inside
     the viewport. Legibility only; no values change. */
  table.diff.costs { table-layout: fixed; }
  table.diff.costs th, table.diff.costs td { padding: 8px 9px; font-size: 0.92rem; }
  table.diff.costs th { font-size: 0.95rem; }
  table.diff.costs td:first-child { width: auto; font-size: 0.78rem; }
  table.diff.costs th:first-child:nth-last-child(3) { width: 32%; }
  table.diff.costs th:nth-child(2):nth-last-child(2) { width: 24%; }
  table.diff.costs th:nth-child(3):nth-last-child(1) { width: 44%; }
  table.diff.costs th:first-child:nth-last-child(4) { width: 30%; }
  table.diff.costs th:nth-child(2):nth-last-child(3) { width: 24%; }
  table.diff.costs th:nth-child(3):nth-last-child(2) { width: 24%; }
  table.diff.costs th:nth-child(4):nth-last-child(1) { width: 22%; }
}