/* ============================================================
   Naveed Rehman — design system
   Dark sports-tech. One accent: the gold from the NR crest.
   Gold is STRUCTURAL — section rules, active states, primary
   buttons, stat numbers. Never decorative. Electric blue is
   reserved for LIVE status and nothing else.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand — sampled from the NR mark */
  --gold:     #D4AF37;   /* logo gold — fills, rules, active states */
  --gold-ink: #94700B;   /* deeper gold, for gold TEXT on white     */
  --ink:      #1A1405;   /* dark — text ON gold fills               */

  /* White and gold surfaces */
  --paper:    #FFFFFF;   /* page background                         */
  --card:     #FBF6E7;   /* lifted panels, cards, strips (cream)    */
  --text:     #1B1A17;   /* body text                               */
  --ash:      #6E6757;   /* secondary text                          */
  --hairline: #E9DFC0;   /* borders                                 */
  --live:     #2A7BEF;   /* blue — LIVE status only                 */

  --gutter: 24px;
  --max: 1180px;

  /* type scale */
  --t-xs: 13px;
  --t-sm: 15px;
  --t-md: 17px;
  --t-lg: 22px;
  --t-xl: 34px;
  --t-2xl: 52px;
  --t-3xl: clamp(40px, 13vw, 132px);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: 'Public Sans', system-ui, -apple-system, sans-serif;
  font-size: var(--t-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin: 0;
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- 3. Layout primitives ---------- */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Section rule — the segmented baseline bars from under the NR mark.
   Four black bars with gaps, redrawn as a repeating gradient. */
.rule {
  border: 0;
  height: 6px;
  margin: 0;
  background:
    repeating-linear-gradient(to right,
      var(--gold) 0, var(--gold) 148px,
      transparent 148px, transparent 164px);
}
.rule--gold {
  background:
    repeating-linear-gradient(to right,
      var(--gold) 0, var(--gold) 148px,
      transparent 148px, transparent 164px);
}

.section { padding-top: 88px; padding-bottom: 88px; }
.section--tight { padding-top: 56px; padding-bottom: 56px; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-top: 18px;
  margin-bottom: 40px;
}
.section-head h2 {
  font-size: var(--t-xl);
}
.section-head a {
  font-size: var(--t-sm);
  text-decoration: none;
  border-bottom: 3px solid var(--gold);
  padding-bottom: 2px;
  white-space: nowrap;
}

/* ---------- 4. Navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.nav__mark { display: block; line-height: 0; }
.nav__mark img { height: 38px; width: auto; }

.nav__links {
  display: flex;
  gap: 30px;
  font-size: var(--t-sm);
}
.nav__links a {
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.nav__links a:hover { border-bottom-color: var(--hairline); }
.nav__links a[aria-current='page'] { border-bottom-color: var(--gold); }

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--hairline);
  padding: 8px 12px;
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
}

@media (max-width: 760px) {
  .nav__links {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 68px;
    flex-direction: column;
    gap: 0;
    background: var(--paper);
    border-bottom: 4px solid var(--gold);
    padding: 8px var(--gutter) 20px;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a {
    padding: 14px 0;
    border-bottom: 1px solid var(--hairline);
    font-size: var(--t-lg);
  }
  .nav__toggle { display: block; }
}

/* ---------- 5. Hero ----------
   The front wall of a squash court, drawn to scale in CSS:
   out-line across the top, service line, and the tin along the
   bottom. The name sits on the wall where a ball would strike. */
.hero {
  position: relative;
  background: var(--paper);
  border-bottom: 14px solid var(--gold); /* the tin */
  overflow: hidden;
}
.hero__inner {
  position: relative;
  z-index: 2;
  padding-top: 96px;
  padding-bottom: 104px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
/* Portrait sits opposite the name on desktop, under it on phones */
.hero__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--hairline);
}
@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; gap: 36px; }
  .hero__portrait img { aspect-ratio: 3 / 2; }
}
.hero__court {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* out-line (top) and service line, in court red */
.hero__court::before,
.hero__court::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  border-top: 2px solid var(--gold);
}
.hero__court::before { display: none; }
.hero__court::after  { bottom: 48px; }

.hero__role {
  font-size: var(--t-sm);
  color: var(--ash);
  margin-top: 26px;
  margin-bottom: 0;
  max-width: 34ch;
}
.hero h1 {
  font-size: var(--t-3xl);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.86;
  overflow-wrap: break-word;
  hyphens: none;
}
.hero h1 em {
  font-style: normal;
  display: block;
}
.hero__lede {
  margin-top: 30px;
  max-width: 46ch;
  font-size: var(--t-lg);
  line-height: 1.45;
  color: var(--ash);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

/* ---------- 6. Buttons ---------- */
.btn {
  display: inline-block;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  padding: 14px 26px;
  text-decoration: none;
  border: 2px solid var(--hairline);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--solid { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn--solid:hover { background: transparent; border-color: var(--gold); color: var(--gold); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--text); }
.btn--ghost:hover { background: var(--text); color: var(--ink); border-color: var(--text); }
.btn--block { display: block; width: 100%; text-align: center; }

/* ---------- 7. Record strip ----------
   Career record, set as a scoreboard row rather than four cards. */
.record {
  background: var(--card);
  color: var(--text);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.record__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.record__cell {
  padding: 40px 20px;
  border-left: 1px solid var(--hairline);
}
.record__cell:first-child { border-left: 0; padding-left: 0; }
.record__num {
  color: var(--gold);
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: var(--t-2xl);
  line-height: 1;
  letter-spacing: -0.04em;
}
.record__label {
  font-size: var(--t-xs);
  color: var(--ash);
  margin-top: 10px;
}
@media (max-width: 760px) {
  .record__grid { grid-template-columns: repeat(2, 1fr); }
  .record__cell { padding: 28px 16px; border-top: 1px solid var(--hairline); }
  .record__cell:nth-child(-n+2) { border-top: 0; }
  .record__cell:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* ---------- 8. Featured result ---------- */
.featured {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 48px;
  align-items: start;
}
.featured__img {
  aspect-ratio: 4 / 3;
  background: var(--card);
  position: relative;
}
.featured__meta {
  font-size: var(--t-xs);
  color: var(--ash);
  margin-bottom: 14px;
}
.featured h3 { font-size: var(--t-xl); margin-bottom: 18px; }
.featured p { color: var(--ash); }
@media (max-width: 860px) {
  .featured { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- 9. Cards (news) ---------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; gap: 36px; } }

.card { text-decoration: none; display: block; }
.card__img {
  aspect-ratio: 16 / 10;
  background: var(--card);
  margin-bottom: 16px;
}
.card__meta { font-size: var(--t-xs); color: var(--ash); margin-bottom: 8px; }
.card h3 { font-size: var(--t-lg); font-weight: 700; }
.card:hover h3 { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* ---------- 10. Shop ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  font-size: var(--t-sm);
  padding-top: 18px;
  margin-bottom: 40px;
}
.filters button {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 4px 0;
  font: inherit;
  font-size: var(--t-sm);
  color: var(--ash);
  cursor: pointer;
}
.filters button.is-active { color: var(--text); border-bottom-color: var(--gold); }

.grid-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 28px;
}
@media (max-width: 860px) { .grid-products { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; } }

.product { text-decoration: none; display: block; }
.product__img {
  aspect-ratio: 1;
  background: var(--card);
  border: 1px solid var(--hairline);
  position: relative;
  display: grid;
  place-items: center;
  color: var(--hairline);
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 40px;
}
.product__tag {
  position: absolute;
  top: 0; left: 0;
  background: var(--gold);
  color: var(--ink);
  font-size: var(--t-xs);
  padding: 4px 10px;
}
.product__name { margin-top: 14px; font-size: var(--t-sm); font-weight: 600; color: var(--text); }
.product__price { font-size: var(--t-sm); color: var(--ash); }
.product:hover .product__img { border-color: var(--gold); }
.product--out .product__name,
.product--out .product__price { color: var(--hairline); }

/* ---------- 11. Product detail ---------- */
.pdp {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  padding-top: 40px;
}
.pdp__gallery { display: grid; gap: 12px; }
.pdp__main {
  aspect-ratio: 1;
  background: var(--card);
  border: 1px solid var(--hairline);
  display: grid;
  place-items: center;
  color: var(--hairline);
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 64px;
}
.pdp__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pdp__thumb {
  aspect-ratio: 1;
  background: var(--card);
  border: 1px solid var(--hairline);
  cursor: pointer;
}
.pdp__thumb.is-active { border-color: var(--gold); border-width: 2px; }

.pdp h1 { font-size: var(--t-xl); margin-bottom: 12px; }
.pdp__price { font-size: var(--t-lg); margin-bottom: 26px; }
.pdp__desc { color: var(--ash); margin-bottom: 30px; max-width: 52ch; }

.sizes { display: flex; gap: 10px; margin-bottom: 12px; }
.sizes button {
  width: 52px; height: 52px;
  background: none;
  color: var(--text);
  border: 1px solid var(--hairline);
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
}
.sizes button.is-active { border-color: var(--gold); border-width: 3px; }
.sizes button:disabled { color: var(--hairline); cursor: not-allowed; text-decoration: line-through; }
.field-note { font-size: var(--t-xs); color: var(--ash); margin-bottom: 26px; }

.pay-note {
  font-size: var(--t-xs);
  color: var(--ash);
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
@media (max-width: 860px) {
  .pdp { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- 12. Results table ---------- */
.years {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 18px;
  margin-bottom: 34px;
}
.years button {
  background: none;
  color: var(--text);
  border: 1px solid var(--hairline);
  padding: 7px 15px;
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
}
.years button.is-active { border-color: var(--gold); background: var(--gold); color: var(--ink); }

.table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.table th {
  text-align: left;
  font-weight: 600;
  color: var(--ash);
  font-size: var(--t-xs);
  padding: 0 16px 12px 0;
  border-bottom: 3px solid var(--gold);
}
.table td {
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.table tbody tr:hover { background: var(--card); }
.table .win { font-weight: 600; }
.table .win::before {
  content: '';
  display: inline-block;
  width: 9px; height: 9px;
  background: var(--gold);
  margin-right: 9px;
  vertical-align: 1px;
}
@media (max-width: 700px) {
  .table thead { display: none; }
  .table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 16px 0; border-bottom: 1px solid var(--hairline); }
  .table td { border: 0; padding: 0; }
  .table td[data-col='tournament'] { grid-column: 1; font-weight: 600; font-size: var(--t-md); }
  .table td[data-col='result'] { grid-column: 2; grid-row: 1; }
  .table td[data-col='date'], .table td[data-col='year'],
  .table td[data-col='venue'] { color: var(--ash); font-size: var(--t-xs); }
  .table td[data-col='venue'] { grid-column: 1 / -1; }
}

/* ---------- 13. Prose (about) ---------- */
.prose { max-width: 62ch; }
.prose p + p { margin-top: 22px; }
.prose h2 { font-size: var(--t-lg); margin: 48px 0 16px; }

.timeline { border-top: 3px solid var(--gold); margin-top: 20px; }
.timeline li {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
}
.timeline .yr { font-family: 'Archivo', sans-serif; font-weight: 800; color: var(--gold-ink); }

/* ---------- 14. Footer ---------- */
.footer {
  background: var(--card);
  color: var(--text);
  border-top: 1px solid var(--hairline);
  padding: 64px 0 32px;
  margin-top: 96px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
}
.footer h4 { font-size: var(--t-sm); font-weight: 700; margin-bottom: 16px; }
.footer a { color: var(--text); text-decoration: none; display: block; padding: 5px 0; font-size: var(--t-sm); }
.footer a:hover { color: var(--gold); text-decoration: underline; text-decoration-color: var(--gold); }
.footer__note {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: var(--t-xs);
  color: var(--ash);
}
.footer__blurb { color: var(--ash); font-size: var(--t-sm); max-width: 34ch; }
@media (max-width: 760px) {
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- 15. Page header (inner pages) ---------- */
.pagehead { padding-top: 56px; }
.pagehead h1 { font-size: var(--t-2xl); }
.pagehead p { color: var(--ash); margin-top: 16px; max-width: 52ch; }

/* ---------- 16. Footer mark ---------- */
.footer__logo { height: 52px; width: auto; margin-bottom: 20px; }

/* ---------- 17. Prose links ---------- */
.prose a { color: var(--gold-ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Segmented rule shortens on small screens so the gaps still read */
@media (max-width: 700px) {
  .rule, .rule--gold { background-size: 82px 6px; background-repeat: repeat-x; }
  .rule { background-image: linear-gradient(to right, var(--gold) 0 68px, transparent 68px 82px); }
  .rule--gold { background-image: linear-gradient(to right, var(--gold) 0 68px, transparent 68px 82px); }
}

/* ---------- 18. Photos in placeholder slots ----------
   Lets an <img> replace any grey box without distorting.
   The slot keeps its shape; the photo is cropped to fit. */
img.featured__img,
img.card__img,
img.product__img,
img.pdp__main,
img.hero__photo {
  width: 100%;
  object-fit: cover;
  background: var(--card);
}

/* Optional hero photograph, sits behind the name */
.hero--photo { background: var(--ink); }
.hero--photo .hero__photo {
  position: absolute;
  inset: 0;
  height: 100%;
  z-index: 0;
  opacity: .42;
}
.hero--photo .hero__inner { color: var(--text); }
.hero--photo .hero__role,
.hero--photo .hero__lede { color: var(--ash); }
.hero--photo .btn--ghost { color: var(--text); border-color: var(--text); }
.hero--photo .btn--ghost:hover { background: var(--text); color: var(--ink); }

/* ---------- 19. Phone spacing ---------- */
@media (max-width: 600px) {
  :root { --gutter: 20px; }
  .hero__inner { padding-top: 56px; padding-bottom: 64px; }
  .hero h1 { letter-spacing: -0.03em; }
  .record__cell { padding-left: 16px; padding-right: 16px; }
  .record__cell:first-child,
  .record__cell:nth-child(odd) { padding-left: 16px; }
  .footer__grid { padding-right: 8px; }
  .pagehead { padding-top: 40px; }
  .section { padding-top: 64px; padding-bottom: 64px; }
}

/* ---------- 20. Hamburger menu icon ----------
   Three bars that fold into an X when the menu opens. */
.nav__toggle {
  width: 44px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  margin-left: auto;
  transition: transform .2s ease, opacity .2s ease;
}
@media (max-width: 760px) {
  .nav__toggle { display: flex; }
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 21. Store: coming soon ---------- */
.soon { max-width: 56ch; padding-top: 24px; }
.soon__tag {
  display: inline-block;
  font-size: var(--t-xs);
  color: var(--ink);
  background: var(--gold);
  padding: 5px 12px;
  margin-bottom: 22px;
}
.soon h2 { font-size: var(--t-xl); margin-bottom: 20px; }
.soon__text { color: var(--ash); margin-bottom: 18px; }
.soon .hero__actions { margin-top: 32px; }

/* ============================================================
   22. SQUASH PORTAL
   Lives on squash.html. Uses the same tokens as the main site;
   electric blue appears here and only here, for LIVE status.
   ============================================================ */

/* ---------- Status badges ---------- */
.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 3px 9px;
  white-space: nowrap;
}
.tag--live { background: var(--live); color: #fff; }
.tag--done { background: var(--gold); color: var(--ink); }
.tag--soon { background: transparent; color: var(--ash); border: 1px solid var(--hairline); }

.sample-flag {
  font-size: var(--t-xs);
  color: var(--ash);
  border: 1px solid var(--hairline);
  padding: 4px 10px;
  white-space: nowrap;
}

/* ---------- Ticker ---------- */
.ticker {
  overflow: hidden;
  background: var(--card);
  border-bottom: 1px solid var(--hairline);
  padding: 11px 0;
}
.ticker__track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: ticker 46s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--t-sm);
  white-space: nowrap;
}
.ticker__meta { color: var(--ash); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; flex-wrap: wrap; width: auto; }
}

/* ---------- Portal hero ---------- */
.portal-hero { border-bottom: 14px solid var(--gold); }
.portal-hero__inner { grid-template-columns: 1fr; }
.portal-hero__inner > div { max-width: 62ch; }
.portal-hero__title { font-size: clamp(44px, 9vw, 92px); }
.portal-hero__title em { font-style: normal; display: block; color: var(--gold); }

/* ---------- Event cards ---------- */
.events {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 760px) { .events { grid-template-columns: 1fr; } }
.event {
  background: var(--card);
  border: 1px solid var(--hairline);
  padding: 24px;
}
.event__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.event__dates { font-size: var(--t-xs); color: var(--ash); }
.event__name { font-size: var(--t-lg); margin-bottom: 6px; }
.event__venue { font-size: var(--t-sm); color: var(--ash); }
.event__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.event__actions .btn { padding: 10px 18px; font-size: var(--t-xs); }

/* ---------- Bracket ---------- */
.bracket__head { margin-bottom: 6px; padding-top: 8px; }
.bracket__title { font-size: var(--t-lg); }
.bracket__sub { font-size: var(--t-sm); color: var(--ash); margin-top: 4px; }
.bracket__hint { font-size: var(--t-xs); color: var(--ash); margin: 14px 0 16px; }
.bracket {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  padding-bottom: 12px;
}
.bracket__col { min-width: 250px; flex: 0 0 auto; display: flex; flex-direction: column; }
.bracket__round {
  font-size: var(--t-xs);
  color: var(--ash);
  font-weight: 600;
  letter-spacing: .05em;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gold);
  margin-bottom: 16px;
}
.bracket__matches {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 16px;
  flex: 1;
}
.match {
  background: var(--card);
  border: 1px solid var(--hairline);
  padding: 14px;
}
.match__status { margin-bottom: 10px; }
.slot {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  font-size: var(--t-sm);
  border-bottom: 1px solid var(--hairline);
}
.slot:last-of-type { border-bottom: 0; }
.slot__name { flex: 1; }
.slot__seed { font-size: 11px; color: var(--ash); }
.slot--won .slot__name { font-weight: 600; color: var(--gold-ink); }
.slot--lost .slot__name { color: var(--ash); }
.slot--empty { color: var(--hairline); font-style: italic; }
.match__score { font-size: var(--t-xs); color: var(--ash); margin-top: 10px; }

/* ---------- Rankings ---------- */
.rank th[data-sort] { cursor: pointer; user-select: none; }
.rank th[data-sort]:hover { color: var(--text); }
.rank th[aria-sort='ascending']::after  { content: ' ▲'; color: var(--gold); }
.rank th[aria-sort='descending']::after { content: ' ▼'; color: var(--gold); }
.rank__pos { font-family: 'Archivo', sans-serif; font-weight: 800; color: var(--gold-ink); }
.rank__name { font-weight: 600; }
.rank__pts { font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .rank thead { display: none; }
  .rank tr { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 12px; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
  .rank td { border: 0; padding: 0; }
  .rank td[data-col='rank']  { grid-row: 1; }
  .rank td[data-col='name']  { grid-row: 1; font-size: var(--t-md); }
  .rank td[data-col='points']{ grid-row: 1; color: var(--gold-ink); font-weight: 600; }
  .rank td[data-col='category'],
  .rank td[data-col='club']  { grid-column: 2 / -1; color: var(--ash); font-size: var(--t-xs); }
}

/* ---------- Referee pad ---------- */
.pad__intro { color: var(--ash); max-width: 62ch; padding-top: 18px; margin-bottom: 28px; }
.pad { max-width: 760px; }
.pad__names { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pad__name {
  flex: 1;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--hairline);
  color: var(--text);
  font: inherit;
  font-size: var(--t-sm);
  padding: 11px 13px;
}
.pad__name:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.pad__vs { color: var(--ash); font-size: var(--t-sm); }

.pad__games {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 0 18px;
}
.pad__gamecount {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: var(--t-lg);
  color: var(--gold);
  min-width: 28px;
  text-align: center;
}
.pad__gamelabel { font-size: var(--t-xs); color: var(--ash); letter-spacing: .05em; }

.pad__scores { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pad__side {
  background: var(--card);
  border: 2px solid var(--hairline);
  color: var(--text);
  font: inherit;
  padding: 26px 14px 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: border-color .15s ease, background-color .15s ease;
}
.pad__side:hover:not(:disabled) { border-color: var(--gold); }
.pad__side:active:not(:disabled) { background: #F1E6BF; }
.pad__side:disabled { opacity: .45; cursor: not-allowed; }
.pad__serve {
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--live);
}
.pad__num {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: clamp(56px, 16vw, 86px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pad__label {
  font-size: var(--t-sm);
  color: var(--ash);
  text-align: center;
  overflow-wrap: anywhere;
}

.pad__status {
  text-align: center;
  font-size: var(--t-sm);
  color: var(--ash);
  padding: 18px 0;
}
.pad__status--done { color: var(--gold); font-weight: 600; font-size: var(--t-md); }

.pad__controls { display: flex; gap: 12px; justify-content: center; }
.pad__controls .btn { padding: 11px 22px; font-size: var(--t-xs); }
.pad__controls .btn:disabled { opacity: .4; cursor: not-allowed; }

.pad__history { margin-top: 36px; border-top: 1px solid var(--hairline); padding-top: 20px; }
.pad__history-title {
  font-size: var(--t-xs);
  color: var(--ash);
  font-weight: 600;
  letter-spacing: .05em;
  margin-bottom: 12px;
}
.pad__history li {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--t-sm);
}
.pad__gameno { color: var(--ash); }
.pad__gamescore { font-variant-numeric: tabular-nums; font-weight: 600; }
.pad__empty { color: var(--ash); font-size: var(--t-sm); border: 0 !important; }

/* Jump links: stop the sticky header covering the heading you land on */
#events, #draw, #rankings, #referee { scroll-margin-top: 84px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- 23. Squash portal banner (home page) ---------- */
.portal-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--hairline);
  padding: 34px;
  text-decoration: none;
  margin-top: 24px;
  transition: border-color .15s ease;
}
.portal-banner:hover { border-color: var(--gold); }
.portal-banner h2 { font-size: var(--t-xl); margin-bottom: 12px; }
.portal-banner__text { color: var(--ash); max-width: 48ch; }
.portal-banner__go {
  font-size: var(--t-sm);
  font-weight: 600;
  border-bottom: 3px solid var(--gold);
  padding-bottom: 3px;
  white-space: nowrap;
}

/* ============================================================
   24. LIVE BAR — the strip viewers see on /squash during a match
   ============================================================ */
.livebar { background: var(--card); border-bottom: 1px solid var(--hairline); padding: 16px 0; }
.livebar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.livebar__meta { display: flex; align-items: center; gap: 12px; }
.livebar__event { font-size: var(--t-sm); color: var(--ash); }
.livebar__score { display: flex; align-items: center; gap: 20px; }
.livebar__side { display: flex; align-items: baseline; gap: 10px; }
.livebar__side--serving .livebar__pts { color: var(--live); }
.livebar__name { font-weight: 600; }
.livebar__dept { font-size: var(--t-xs); color: var(--ash); }
.livebar__pts {
  font-family: 'Archivo', sans-serif; font-weight: 900;
  font-size: var(--t-xl); line-height: 1; font-variant-numeric: tabular-nums;
}
.livebar__games {
  font-size: var(--t-sm); color: var(--ash); text-align: center;
  display: flex; flex-direction: column; font-variant-numeric: tabular-nums;
}
.livebar__games small { font-size: 10px; letter-spacing: .05em; }
.livebar__full {
  font-size: var(--t-xs); border-bottom: 2px solid var(--gold);
  padding-bottom: 2px; text-decoration: none; white-space: nowrap;
}
@media (max-width: 700px) {
  .livebar__inner { justify-content: center; text-align: center; }
  .livebar__score { gap: 14px; }
}

/* ============================================================
   25. BIG-SCREEN SCOREBOARD (scoreboard.html)
   Sized in viewport units so it fills any display.
   ============================================================ */
.board-body { background: var(--paper); overflow: hidden; }
.board { height: 100vh; display: flex; flex-direction: column; padding: 2.2vh 2.4vw; }
.board__waiting {
  margin: auto; color: var(--ash); font-size: 2.4vh; letter-spacing: .04em;
}

.board__live { display: flex; flex-direction: column; height: 100%; }

.board__head {
  display: flex; align-items: center; gap: 2.4vw;
  padding-bottom: 1.8vh; border-bottom: 2px solid var(--gold);
}
.board__logo { height: 7vh; width: auto; }
.board__event { flex: 1; min-width: 0; }
.board__tournament {
  font-size: 3.4vh; line-height: 1.05; letter-spacing: -.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.board__round { font-size: 2vh; color: var(--gold-ink); margin-top: .5vh; }
.board__clock { text-align: right; }
.board__clocklabel { display: block; font-size: 1.5vh; color: var(--ash); letter-spacing: .06em; }
.board__clocktime {
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: 4.4vh; font-variant-numeric: tabular-nums; line-height: 1;
}

.board__players {
  flex: 1; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 2vw;
}
.board__player { text-align: center; min-width: 0; }
.board__serve { font-size: 1.9vh; color: var(--live); letter-spacing: .08em; height: 2.4vh; }
.board__name {
  font-size: 6vh; line-height: 1.02; letter-spacing: -.03em;
  overflow-wrap: break-word; margin-top: .6vh;
}
.board__dept { font-size: 2.1vh; color: var(--ash); margin-top: .8vh; min-height: 2.6vh; }
.board__points {
  font-family: 'Archivo', sans-serif; font-weight: 900;
  font-size: 30vh; line-height: .92; font-variant-numeric: tabular-nums;
  margin-top: 1vh;
}
.board__player--serving .board__points { color: var(--gold-ink); }

.board__middle { text-align: center; padding: 0 1.5vw; }
.board__gameslabel { font-size: 1.6vh; color: var(--ash); letter-spacing: .08em; }
.board__games {
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: 7vh; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.board__games i { font-style: normal; color: var(--ash); margin: 0 .6vw; }
.board__history { margin-top: 2vh; display: flex; flex-direction: column; gap: .9vh; }
.board__history li { font-size: 1.9vh; color: var(--ash); font-variant-numeric: tabular-nums; }
.board__history b { color: var(--text); font-weight: 600; margin-right: .5vw; }

.board__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 1.6vh; border-top: 1px solid var(--hairline);
  font-size: 2vh; color: var(--ash);
}
.board__result { color: var(--gold-ink); font-weight: 600; }
.board__stamp { font-size: 1.6vh; }

@media (max-aspect-ratio: 1/1) {
  .board__players { grid-template-columns: 1fr 1fr; grid-template-areas: "a b" "m m"; }
  .board__player:first-of-type { grid-area: a; }
  .board__player:last-of-type { grid-area: b; }
  .board__middle { grid-area: m; }
  .board__points { font-size: 18vh; }
  .board__name { font-size: 3.4vh; }
}

/* ============================================================
   26. SCORESHEETS (scoresheet.html)
   ============================================================ */
.sheet-tools { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 18px; margin-bottom: 28px; }
.sheet-list { display: flex; flex-direction: column; }
.sheet-row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  width: 100%; text-align: left; background: none; color: var(--text);
  border: 0; border-bottom: 1px solid var(--hairline);
  font: inherit; padding: 16px 0; cursor: pointer;
}
.sheet-row:hover { background: var(--card); }
.sheet-row__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sheet-row__meta { font-size: var(--t-xs); color: var(--ash); }
.sheet-row__score {
  font-family: 'Archivo', sans-serif; font-weight: 800;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.sheet-row__date { font-size: var(--t-xs); color: var(--ash); white-space: nowrap; }

.sheet-paper { background: var(--card); border: 1px solid var(--hairline); padding: 32px; margin-top: 20px; }
.sheet-head { display: flex; align-items: center; gap: 20px; border-bottom: 2px solid var(--gold); padding-bottom: 18px; }
.sheet-logo { height: 48px; width: auto; }
.sheet-head > div { flex: 1; }
.sheet-title { font-size: var(--t-lg); }
.sheet-sub { font-size: var(--t-sm); color: var(--ash); margin-top: 3px; }
.sheet-date { font-size: var(--t-xs); color: var(--ash); white-space: nowrap; }

.sheet-players { width: 100%; border-collapse: collapse; margin: 22px 0 18px; }
.sheet-players td { padding: 11px 0; border-bottom: 1px solid var(--hairline); }
.sheet-players__name { font-weight: 600; }
.sheet-players__dept { color: var(--ash); font-size: var(--t-sm); }
.sheet-players__games {
  text-align: right; font-family: 'Archivo', sans-serif;
  font-weight: 800; font-size: var(--t-lg);
}
.sheet-players .is-winner .sheet-players__games { color: var(--gold); }
.sheet-result { font-size: var(--t-sm); color: var(--ash); margin-bottom: 26px; }

.sheet-game { margin-bottom: 22px; }
.sheet-game__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.sheet-game__head h3 { font-size: var(--t-sm); letter-spacing: .04em; }
.sheet-game__final { font-size: var(--t-sm); color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.sheet-game__scroll { overflow-x: auto; }
.sheet-grid { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sheet-grid th {
  text-align: left; font-weight: 600; font-size: var(--t-xs);
  padding-right: 12px; white-space: nowrap; border: 0;
}
.sheet-grid .pt {
  border: 1px solid var(--hairline); width: 26px; height: 26px;
  text-align: center; font-size: var(--t-xs); padding: 0;
}
.sheet-grid .pt--blank { background: transparent; color: transparent; }

.sheet-foot { display: flex; align-items: flex-end; gap: 40px; margin-top: 34px; }
.sheet-sign { flex: 0 0 200px; }
.sheet-sign span { display: block; border-bottom: 1px solid var(--ash); height: 34px; }
.sheet-sign p { font-size: var(--t-xs); color: var(--ash); margin-top: 6px; }
.sheet-mark { margin-left: auto; font-size: var(--t-xs); color: var(--ash); }

/* ---------- Printing ----------
   The site is dark; paper is not. Everything flips to black on white. */
@media print {
  @page { margin: 14mm; }
  .no-print, .nav, .footer { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  .sheet-paper {
    background: #fff !important; border: 0 !important; padding: 0 !important; margin: 0 !important;
  }
  .sheet-head { border-bottom: 2px solid #000 !important; }
  .sheet-title, .sheet-players__name, .sheet-grid th, h1, h2, h3 { color: #000 !important; }
  .sheet-sub, .sheet-date, .sheet-players__dept, .sheet-result,
  .sheet-sign p, .sheet-mark { color: #444 !important; }
  .sheet-players td { border-bottom: 1px solid #999 !important; }
  .sheet-players .is-winner .sheet-players__games,
  .sheet-game__final { color: #000 !important; font-weight: 800; }
  .sheet-grid .pt { border: 1px solid #666 !important; color: #000 !important; }
  .sheet-game { break-inside: avoid; }
  .sheet-game__scroll { overflow: visible !important; }
  .sheet-sign span { border-bottom: 1px solid #000 !important; }
}

/* ---------- Referee pad: match details and publishing ---------- */
.pad__setup { margin-bottom: 24px; }
.pad__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .pad__grid { grid-template-columns: 1fr; } }
.pad__field { display: flex; flex-direction: column; gap: 6px; }
.pad__field span { font-size: var(--t-xs); color: var(--ash); }
.pad__publish { margin-top: 34px; border-top: 1px solid var(--hairline); padding-top: 20px; }
.pad__publish-note { font-size: var(--t-xs); color: var(--ash); margin-bottom: 14px; max-width: 56ch; }
.pad__publish-note a { color: var(--gold-ink); }
.pad__publish-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pad__publish-row .pad__name { flex: 1; min-width: 180px; }
.pad__publish-state { font-size: var(--t-xs); color: var(--ash); margin-top: 12px; }
.pad__publish-state--good { color: var(--live); }
.pad__publish-state--bad { color: #C0392B; }

/* ---------- 27. Referee login ---------- */
.ref-login { max-width: 46ch; padding: 64px 0 40px; }
.ref-login h1 { font-size: var(--t-2xl); margin-bottom: 18px; }
.ref-login__text { color: var(--ash); margin-bottom: 28px; }
.ref-login__form { display: flex; gap: 10px; flex-wrap: wrap; }
.ref-login__form .pad__name { flex: 1; min-width: 200px; }
.ref-login__msg { font-size: var(--t-sm); color: var(--ash); margin-top: 14px; min-height: 1.4em; }
.ref-login__msg--bad { color: #C0392B; }
.ref-login__offline {
  margin-top: 18px; background: none; border: 0; padding: 0;
  font: inherit; font-size: var(--t-sm); color: var(--gold-ink);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* ---------- 28. Live matches page (live.html) ---------- */
.lm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.lm { cursor: pointer; background: var(--card); border: 1px solid var(--hairline); padding: 22px; }
.lm__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.lm__court { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: var(--t-lg); }
.lm__event { font-size: var(--t-xs); color: var(--ash); margin-bottom: 18px; }
.lm__side {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-top: 1px solid var(--hairline);
}
.lm__who { display: flex; flex-direction: column; min-width: 0; }
.lm__name { font-weight: 600; }
.lm__dept { font-size: var(--t-xs); color: var(--ash); }
.lm__pts {
  font-family: 'Archivo', sans-serif; font-weight: 900; font-size: var(--t-xl);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.lm__side--serving .lm__pts { color: var(--live); }
.lm__games {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; font-size: var(--t-xs); color: var(--ash);
  border-top: 1px solid var(--hairline);
}
.lm__history { display: flex; gap: 12px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.lm__history b { color: var(--text); font-weight: 600; margin-right: 3px; }
.lm__open {
  display: inline-block; margin-top: 16px; font-size: var(--t-xs);
  text-decoration: none; border-bottom: 2px solid var(--gold); padding-bottom: 2px;
}
.lm-empty { padding: 48px 0; }
.lm-empty__big { font-size: var(--t-lg); margin-bottom: 10px; }

/* ---------- 29. Signed-in referee ---------- */
.ref-who { font-size: var(--t-xs); color: var(--ash); white-space: nowrap; }
.ref-who strong { color: var(--gold-ink); }
.ref-who__out {
  background: none; border: 0; padding: 0 0 0 10px; font: inherit;
  font-size: var(--t-xs); color: var(--ash); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer;
}
.ref-who__out:hover { color: var(--text); }

/* ---------- 30. Draw maker ---------- */
.dm { max-width: 860px; }
.dm__form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
@media (max-width: 700px) { .dm__form { grid-template-columns: 1fr; } }
.dm__entries { margin-bottom: 12px; }
.dm__entries span em { font-style: normal; color: var(--text); }
.dm__entries textarea { font-family: inherit; line-height: 1.6; resize: vertical; }
.dm__count { font-size: var(--t-sm); color: var(--gold-ink); margin-bottom: 20px; }
.dm__controls { justify-content: flex-start; flex-wrap: wrap; margin-bottom: 28px; }
select.pad__name { appearance: none; background-image: none; }

/* ---------- 31. Draw: extra slot detail ---------- */
.slot__club { font-size: 11px; color: var(--ash); }
.match__no {
  font-size: 11px; color: var(--ash); margin-bottom: 8px;
  border-bottom: 1px solid var(--hairline); padding-bottom: 6px;
}

/* ---------- 32. Round robin groups ---------- */
.groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 28px; }
.group { background: var(--card); border: 1px solid var(--hairline); padding: 22px; }
.group__name { font-size: var(--t-lg); margin-bottom: 16px; }
.group__table { margin-bottom: 18px; }
.group__table th { font-size: 11px; border-bottom: 2px solid var(--gold); }
.group__player { font-weight: 600; display: block; }
.group__through td { background: rgba(212, 175, 55, .14); }
.group__fixtures { border-top: 1px solid var(--hairline); padding-top: 12px; }
.group__fixtures li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; font-size: var(--t-sm);
}
.group__sc { color: var(--ash); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media print {
  .dm, .pagehead { display: none !important; }
  .bracket { overflow: visible !important; }
  .match, .group { border: 1px solid #999 !important; background: #fff !important; }
  .slot__name, .group__player, .bracket__title { color: #000 !important; }
  .bracket__round { border-bottom: 2px solid #000 !important; color: #000 !important; }
}

/* The hidden attribute must win over any display rule we set ourselves,
   or elements marked hidden stay on screen. */
[hidden] { display: none !important; }

/* ============================================================
   33. Draw maker — match list, logo
   ============================================================ */
.dm__logo { height: 64px; width: auto; align-self: flex-start; margin-top: 6px; }
.dm__round { font-family: 'Archivo', sans-serif; font-size: var(--t-md); margin: 26px 0 8px; }
.dm__table { width: 100%; }
.dm__table td { vertical-align: middle; }
.dm__table .pad__name { padding: 8px 10px; min-width: 0; }
.dm__court { width: 70px; }
.dm__vs { color: var(--ash); margin: 0 4px; }
.dm__tbd { color: var(--ash); font-style: italic; }
.dm__bye td { opacity: .5; }
.dm__status { color: var(--gold-ink); font-size: var(--t-xs); white-space: nowrap; }
#dmMatches { overflow-x: auto; }
@media (max-width: 700px) { .dm__table { min-width: 640px; } }

/* ============================================================
   34. Serve side (L / R) — referee pad, big screen, live cards
   ============================================================ */
.pad__serve-bar {
  margin: 18px 0 4px; padding: 14px; border: 1px solid var(--hairline);
  background: var(--card); display: flex; flex-direction: column; gap: 10px;
}
.pad__serve-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pad__serve-q { font-size: var(--t-sm); color: var(--ash); min-width: 120px; }
.pad__serve-q b { color: var(--text); }
.pad__chip {
  flex: 1; min-width: 110px; padding: 12px 14px; border: 1px solid var(--hairline);
  background: transparent; color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
}
.pad__chip:hover:not(:disabled) { border-color: var(--gold); }
.pad__chip--on { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.pad__chip:disabled { cursor: not-allowed; opacity: .5; }
.pad__chip--on:disabled { opacity: 1; }
.pad__chip--side { font-family: 'Archivo', sans-serif; font-size: var(--t-lg); font-weight: 900; }
.pad__serve-need { color: var(--gold); font-size: var(--t-sm); font-weight: 600; }

.pad__mine { margin-bottom: 26px; }
.mine { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.mine__card {
  border: 1px solid var(--hairline); padding: 12px 14px; display: flex;
  align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between;
}
.mine__card--on { border-color: var(--gold); }
.mine__when { font-size: var(--t-xs); color: var(--gold-ink); letter-spacing: .04em; }
.mine__who { font-weight: 600; }
.mine__meta { font-size: var(--t-xs); color: var(--ash); }
.mine__card .btn { padding: 9px 16px; font-size: var(--t-xs); }

.board__sideflag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 5.2vh; height: 5.2vh; margin-left: 1vw; border-radius: 50%;
  background: var(--gold); color: var(--ink); font-family: 'Archivo', sans-serif;
  font-weight: 900; font-size: 3.4vh; vertical-align: middle; letter-spacing: 0;
}
.board__sideflag--wait { background: transparent; color: var(--gold-ink); border: .3vh solid var(--gold); font-size: 2.4vh; }
.board__logo--event { height: 9vh; max-width: 18vw; object-fit: contain; }
.lm__side-tag {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px;
  background: var(--gold); color: var(--ink); font-size: var(--t-xs); font-weight: 800;
}

.sched { margin-top: 40px; }
.sched__row {
  display: grid; grid-template-columns: 120px 1fr 90px; gap: 12px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--hairline);
}
.sched__time { font-size: var(--t-xs); color: var(--gold-ink); }
.sched__who { font-weight: 600; }
.sched__meta { font-size: var(--t-xs); color: var(--ash); display: block; font-weight: 400; }
.sched__res { text-align: right; font-size: var(--t-xs); color: var(--ash); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .sched__row { grid-template-columns: 1fr; gap: 2px; } .sched__res { text-align: left; } }
.pt__sd { display:block; font-size: 9px; opacity:.7; line-height:1; font-weight:700; }
.board__serve { height: 5.8vh; display: flex; align-items: center; justify-content: center; }

/* ============================================================
   35. Warm-up, rest, decisions, conduct
   ============================================================ */
.pad__phase {
  margin: 0 0 18px; padding: 18px; text-align: center;
  border: 1px solid var(--gold); background: var(--card);
}
.pad__phase-title { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: var(--t-md); }
.pad__phase-note { color: var(--ash); font-size: var(--t-sm); margin: 6px 0 14px; }
.pad__phase-clock {
  font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 56px; line-height: 1.1;
  margin: 8px 0 14px; font-variant-numeric: tabular-nums; color: var(--gold-ink);
}
.pad__phase-clock--over { color: #C0392B; }
.pad__phase .pad__controls { flex-wrap: wrap; }

.pad__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 0; }
.pad__act-col { display: flex; flex-direction: column; gap: 8px; }
.pad__act-col--wide { grid-column: 1 / -1; }
.pad__act-col .btn { width: 100%; padding: 12px 10px; font-size: var(--t-xs); }

.pad__panel {
  margin: 14px 0 0; padding: 16px; border: 1px solid var(--gold); background: var(--card);
}
.pad__panel-title { font-family: 'Archivo', sans-serif; font-size: var(--t-md); margin-bottom: 10px; }
.pad__panel-note { color: var(--ash); font-size: var(--t-xs); margin-bottom: 12px; }
.pad__panel-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.pad__panel-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pad__panel-col { display: flex; flex-direction: column; gap: 8px; }
.pad__panel-who { font-weight: 600; color: var(--ash); font-size: var(--t-sm); }
.pad__opt {
  flex: 1; min-width: 110px; padding: 14px 12px; border: 0; border-radius: 10px;
  font: inherit; font-weight: 800; color: #fff; cursor: pointer; background: #444;
}
.pad__opt:active { filter: brightness(.85); }
.pad__opt--purple { background: #A93BC4; }
.pad__opt--green  { background: #2E9B45; }
.pad__opt--grey   { background: #6B7280; }
.pad__opt--orange { background: #D9822B; }
.pad__opt--teal   { background: #2EA3B8; }
.pad__opt--brown  { background: #8B5A3C; }
.pad__opt--red    { background: #D13A3A; }
.pad__opt--cancel { background: transparent; border: 1px solid var(--hairline); }

.pad__stats { width: 100%; max-width: 420px; }
.pad__stats td, .pad__stats th { padding: 6px 10px; }
.pad__stats td:not(:first-child), .pad__stats th:not(:first-child) { text-align: center; }

/* big screen: countdown, banner */
.board__clocktime--count { color: var(--gold-ink); }
.board__call {
  position: absolute; left: 50%; bottom: 11vh; transform: translateX(-50%);
  background: var(--gold); color: var(--ink); font-family: 'Archivo', sans-serif;
  font-weight: 900; font-size: 4.6vh; padding: 1.2vh 3vw; border-radius: 1.4vh;
  letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
}
.board__phase {
  text-align: center; font-family: 'Archivo', sans-serif; font-weight: 900;
  font-size: 5vh; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-ink);
}
.board__phase small { display: block; font-size: 2.2vh; color: var(--ash); letter-spacing: .06em; margin-top: .6vh; }
.board__live { position: relative; }
.sheet-stats { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 12px; }
.sheet-stats th, .sheet-stats td { border: 1px solid #999; padding: 4px 6px; text-align: center; }
.sheet-stats thead th { font-weight: 700; }
.sheet-stats tbody th { text-align: left; }

/* ============================================================
   36. Portal pages — landing, calendar, rankings, tournament
   ============================================================ */

/* tables that must stay tables on a phone */
@media (max-width: 700px) {
  .plain-table thead, .rk-table thead, .pad__stats thead, .dm__table thead { display: table-header-group; }
  .plain-table tr, .rk-table tr, .pad__stats tr, .dm__table tr { display: table-row; padding: 0; border: 0; }
  .plain-table td, .rk-table td, .pad__stats td, .dm__table td { display: table-cell; padding: 12px 10px 12px 0; border-bottom: 1px solid var(--hairline); }
}

.link-more { color: var(--gold-ink); font-size: var(--t-sm); font-weight: 600; white-space: nowrap; }
.link-more:hover { text-decoration: underline; }
.more-wrap { margin-top: 28px; text-align: center; }
.section-head { gap: 16px; flex-wrap: wrap; }

/* chips (status, category and division filters) */
.filters button.chip, .chip {
  border: 1px solid var(--hairline); border-radius: 999px; padding: 8px 16px;
  background: transparent; color: var(--ash); font: inherit; font-size: var(--t-xs);
  font-weight: 600; cursor: pointer; border-bottom: 1px solid var(--hairline);
}
.filters button.chip:hover { color: var(--text); border-color: var(--ash); }
.filters button.chip--on { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.filters { gap: 10px; margin-bottom: 28px; }

.tag--up { background: transparent; color: var(--gold-ink); border: 1px solid var(--gold); }

/* upcoming cards on the landing page */
.event--link { display: block; color: inherit; text-decoration: none; transition: border-color .15s; }
.event--link:hover { border-color: var(--gold); }
.event__divs { font-size: var(--t-xs); color: var(--ash); margin-top: 14px; }
a.ticker__item { color: inherit; text-decoration: none; }

/* top three per category */
.rk-group { font-family: 'Archivo', sans-serif; font-size: var(--t-md); color: var(--gold-ink); margin: 34px 0 14px; letter-spacing: .02em; }
.rk-group:first-of-type { margin-top: 10px; }
.rk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.rk-card { background: var(--card); border: 1px solid var(--hairline); padding: 18px; }
.rk-card__name { font-family: 'Archivo', sans-serif; font-size: var(--t-md); margin-bottom: 12px; }
.rk-card__name a:hover { color: var(--gold-ink); }
.rk-card__list { display: flex; flex-direction: column; }
.rk-card__list li { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--hairline); }
.rk-card__rank { font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.rk-card__who { font-weight: 600; font-size: var(--t-sm); min-width: 0; }
.rk-card__who small { display: block; font-weight: 400; font-size: var(--t-xs); color: var(--ash); }
.rk-card__pts { font-size: var(--t-xs); color: var(--ash); font-variant-numeric: tabular-nums; }

/* full rankings */
.rk-title { font-family: 'Archivo', sans-serif; font-size: var(--t-xl); margin-bottom: 18px; }
.rk-table { max-width: 760px; }
.rk-table__rank { font-weight: 800; color: var(--gold); width: 64px; }
.rk-table__club { color: var(--ash); }
.rk-table__pts { text-align: right; font-variant-numeric: tabular-nums; }

/* calendar table */
.tt { border-top: 3px solid var(--gold); }
.tt__row {
  display: grid; grid-template-columns: 2.2fr 2fr 1.3fr 1.1fr 1fr; gap: 18px; align-items: center;
  padding: 18px 8px 18px 0; border-bottom: 1px solid var(--hairline); color: var(--text);
}
a.tt__row:hover { background: var(--card); }
.tt__row--head { font-size: var(--t-xs); font-weight: 600; color: var(--ash); padding-bottom: 12px; }
.tt__name strong { display: block; font-size: var(--t-md); }
.tt__name small { display: block; font-size: var(--t-xs); color: var(--ash); margin-top: 3px; font-weight: 400; }
.tt__divs { display: flex; flex-wrap: wrap; gap: 6px; }
.tt__divs i {
  font-style: normal; font-size: var(--t-xs); padding: 3px 10px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--hairline); color: var(--text);
}
.tt__divs--big i { font-size: var(--t-sm); padding: 6px 14px; }
.tt__date, .tt__prize { font-size: var(--t-sm); }
@media (max-width: 860px) {
  .tt__row--head { display: none; }
  .tt__row { grid-template-columns: 1fr auto; gap: 8px 12px; padding: 18px 0; }
  .tt__name { grid-column: 1; }
  .tt__status { grid-column: 2; grid-row: 1; justify-self: end; }
  .tt__divs, .tt__date, .tt__prize { grid-column: 1 / -1; }
  .tt__date::before { content: attr(data-l) ' · '; color: var(--ash); }
  .tt__prize::before { content: attr(data-l) ' · '; color: var(--ash); }
}

/* tournament page */
.tpage { padding-top: 28px; padding-bottom: 80px; }
.thero {
  display: flex; align-items: center; gap: 24px; padding: 44px 36px; margin-bottom: 26px;
  background: linear-gradient(135deg, #FFF6D9 0%, #FFFFFF 70%);
  border: 1px solid var(--hairline); border-radius: 14px;
}
.thero__logo { height: 90px; width: auto; max-width: 160px; object-fit: contain; }
.thero__name { font-size: clamp(26px, 5vw, 46px); line-height: 1.1; }
.thero__dates { color: var(--text); margin-top: 8px; font-size: var(--t-sm); }
.thero__tags { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }

.tlayout { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }
.tside { display: flex; flex-direction: column; gap: 4px; padding: 14px; background: var(--card); border: 1px solid var(--hairline); border-radius: 14px; position: sticky; top: 84px; }
.tside__link { display: flex; align-items: center; gap: 12px; padding: 12px 12px; border-radius: 10px; color: var(--ash); font-weight: 600; }
.tside__link:hover { color: var(--text); }
.tside__link--on { background: var(--gold); color: var(--ink); }
.ti { width: 20px; height: 20px; flex: none; }
.tside__back { margin-top: 10px; padding: 10px 12px; font-size: var(--t-xs); color: var(--ash); border-top: 1px solid var(--hairline); }
.tside__back:hover { color: var(--gold-ink); }
.tmain { min-width: 0; }

@media (max-width: 860px) {
  .tlayout { grid-template-columns: 1fr; }
  .tside { flex-direction: row; overflow-x: auto; position: static; padding: 8px; gap: 6px; }
  .tside__link { padding: 10px 14px; white-space: nowrap; }
  .tside__link span { display: inline; }
  .tside__back { display: none; }
  .thero { padding: 28px 22px; flex-direction: column; align-items: flex-start; }
}

.icards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.icard { background: var(--card); border: 1px solid var(--hairline); border-radius: 14px; padding: 20px; }
.icard h3 { font-family: 'Archivo', sans-serif; font-size: var(--t-md); margin-bottom: 14px; }
.icard__row { font-size: var(--t-sm); color: var(--ash); margin-top: 8px; overflow-wrap: anywhere; }
.icard__row b { color: var(--text); font-weight: 600; }
.icard__row strong { color: var(--text); }
.icard a, .tprose a { color: var(--gold-ink); }
.tsec { margin-top: 36px; }
.tsec h3, .tsec__h { font-family: 'Archivo', sans-serif; font-size: var(--t-lg); margin: 30px 0 12px; }
.tsec h3 { margin-top: 0; }
.tsec__h small { font-size: var(--t-xs); color: var(--ash); font-weight: 400; margin-left: 6px; }
.tprose { max-width: 70ch; color: var(--text); white-space: pre-line; }
.tprose + .tprose { margin-top: 12px; }

/* matches */
.mt { border-top: 3px solid var(--gold); }
.mt__row { display: grid; grid-template-columns: 110px 1fr auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.mt__when { font-weight: 800; font-variant-numeric: tabular-nums; }
.mt__when small, .mt__who small { display: block; font-weight: 400; font-size: var(--t-xs); color: var(--ash); margin-top: 2px; }
.mt__who { font-weight: 600; }
.mt__who i { font-style: normal; color: var(--ash); font-weight: 400; margin: 0 4px; }
.mt__who em { color: var(--ash); font-weight: 400; }
.mt__win { color: var(--gold-ink); }
.mt__res { font-size: var(--t-xs); color: var(--ash); font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 600px) { .mt__row { grid-template-columns: 78px 1fr; } .mt__res { grid-column: 2; text-align: left; } }

/* feedback */
.fb { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.fb textarea { resize: vertical; font: inherit; }
.fb__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fbitem { border-bottom: 1px solid var(--hairline); padding: 12px 0; }
.fbitem__meta { font-size: var(--t-xs); color: var(--ash); margin-bottom: 4px; }
.drawlist li { padding: 12px 0; border-bottom: 1px solid var(--hairline); } .drawlist a { color: var(--gold-ink); font-weight: 600; }

/* links that act as buttons or rows: no underline */
a.tt__row, a.tt__row *, .tside__link, .tside__back, .link-more, .event--link, .event--link *, a.ticker__item, .tside a { text-decoration: none; }
a.tt__row strong { text-decoration: none; }
.portal-hero__title { font-size: clamp(32px, 7vw, 76px); overflow-wrap: normal; word-break: normal; }
.portal-hero__title em { display: block; }

/* ============================================================
   37. Referee pad — announcement, and a quiet pad while playing
   ============================================================ */
.pad__title {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: var(--t-md);
  color: var(--gold-ink); margin: 0 0 12px; letter-spacing: .02em;
}
.pad__announce {
  background: #E8D82E; color: #0B0F19; border-radius: 14px; padding: 18px 20px;
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(18px, 2.6vw, 26px);
  line-height: 1.3; text-transform: uppercase; margin-bottom: 18px;
}
/* once the game has started, show only the tournament name, scores and controls */
#refPad.pad--play:not(.pad--details) .pad__intro,
#refPad.pad--play:not(.pad--details) .pad__mine,
#refPad.pad--play:not(.pad--details) .pad__setup,
#refPad.pad--play:not(.pad--details) .pad__controls--misc,
#refPad.pad--play:not(.pad--details) .pad__history,
#refPad.pad--play:not(.pad--details) .pad__publish-note,
#refPad.pad--play:not(.pad--details) .pad__publish-state:not(.pad__publish-state--bad),
#refPad.pad--play:not(.pad--details) #padStatus:not(.pad__serve-need) { display: none; }

/* 38. Pad: serve pick, timer, mobile */
.pad__timer { font-variant-numeric: tabular-nums; font-weight: 800; font-size: var(--t-md); color: var(--text); margin: 0 0 10px; }
.pad__serve-bar { gap: 8px; }
.pad__serve-q { min-width: 0; margin: 0; font-weight: 600; color: var(--gold-ink); }
.pad__serve-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pad__serve-grid .pad__chip { width: 100%; min-height: 56px; padding: 10px; border-radius: 12px; text-align: center; overflow-wrap: anywhere; }
.pad__chip--side { font-size: 32px; }
.pad__phase-clock { font-size: clamp(44px, 14vw, 72px); }
@media (max-width: 600px) {
  .pad__announce { font-size: 17px; padding: 14px; }
  .pad__scores { gap: 8px; }
  .pad__side { padding: 18px 6px 14px; min-width: 0; }
  .pad__num { font-size: clamp(64px, 24vw, 96px); }
  .pad__serve { font-size: 13px; font-weight: 700; }
  .pad__actions { grid-template-columns: 1fr 1fr; }
  .pad__act-col .btn { min-height: 48px; }
  .pad__controls { flex-wrap: wrap; }
  .pad__controls .btn { flex: 1 1 40%; }
  .pad__panel-cols { grid-template-columns: 1fr; }
  .pad__opt { min-width: 45%; padding: 16px 10px; }
  .pad .section-head, #refPad .section-head { flex-wrap: wrap; gap: 8px; }
}
.pad__serve-bar[hidden], .pad__timer[hidden], .pad__announce[hidden] { display: none !important; }

/* Match details are hidden; the Details button reveals them for manual matches */
#refPad:not(.pad--details) .pad__setup { display: none; }

/* Compact pad once a match is loaded: no wasted space */
#refPad.pad--play:not(.pad--details) { padding-top: 6px; }
#refPad.pad--play:not(.pad--details) > .rule,
#refPad.pad--play:not(.pad--details) > .section-head,
#refPad.pad--play:not(.pad--details) #courtHint,
#refPad.pad--play:not(.pad--details) #padStatus,
#refPad.pad--play:not(.pad--details) .pad__publish-state,
#refPad.pad--play:not(.pad--details) .pad__publish-note,
#refPad.pad--play:not(.pad--details) .pad__history { display: none !important; }
#refPad.pad--play:not(.pad--details) .pad__title { font-size: 15px; margin: 0 0 2px; }
#refPad.pad--play:not(.pad--details) .pad__timer { font-size: 14px; margin: 0 0 6px; color: var(--ash); }
#refPad.pad--play:not(.pad--details) .pad__games { margin: 4px 0 8px; padding: 0; }
#refPad.pad--play:not(.pad--details) .pad__side { padding: 12px 6px 10px; }
#refPad.pad--play:not(.pad--details) .pad__actions { margin-top: 8px; gap: 8px; }
#refPad.pad--play:not(.pad--details) .pad__serve-bar { margin: 8px 0 0; padding: 10px; }
#refPad.pad--play:not(.pad--details) .pad__controls { margin-top: 10px; }
.pad__actions { align-items: stretch; } .pad__act-col .btn { height: 100%; }

/* 39. Draw maker: categories, players, tabs, entries admin */
.dm__cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin-bottom: 22px; max-width: 420px; }
.dm__cat { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: var(--t-md); cursor: pointer; padding: 6px 0; }
.dm__cat input { width: 22px; height: 22px; accent-color: var(--gold); }
.dm__pl { margin: 0 0 22px; }
.dm__pl small { color: var(--ash); font-weight: 400; margin-left: 8px; }
.dm__pl input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--gold); }
.dm__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.dm__tabs[hidden] { display: none !important; }
.ent-admin { border: 1px solid var(--hairline); background: var(--card); padding: 16px; margin: 0 0 22px; }
.ent-admin__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 12px; }
.ent-del { background: none; border: 0; color: #D13A3A; font-size: 20px; cursor: pointer; padding: 2px 8px; }

.dm__absent td { opacity: .45; }

.match__when { font-size: var(--t-xs); color: var(--gold-ink); font-weight: 700; margin-top: 8px; }
.group__fx .match__when { margin: 2px 0 0; }

/* 40. Match details popup */
.match[data-mid], .group__fixtures li[data-mid] { cursor: pointer; }
.match[data-mid]:hover { border-color: var(--gold); }
.group__fixtures li[data-mid]:hover { background: var(--card); }
.mm { position: fixed; inset: 0; z-index: 200; background: rgba(5,8,14,.78); display: flex; align-items: center; justify-content: center; padding: 16px; }
.mm__card { position: relative; background: var(--card); border: 1px solid var(--gold); border-radius: 16px; width: min(480px, 100%); max-height: 90vh; overflow: auto; padding: 26px 22px 22px; }
.mm__x { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: var(--text); font-size: 30px; line-height: 1; cursor: pointer; padding: 6px 10px; }
.mm__tour { color: var(--gold-ink); font-weight: 800; font-size: var(--t-sm); margin: 0 30px 2px 0; }
.mm__event { color: var(--ash); font-size: var(--t-sm); margin: 0 0 16px; }
.mm__vs { display: flex; flex-direction: column; gap: 4px; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(20px, 5vw, 26px); margin-bottom: 14px; }
.mm__vs em { color: var(--ash); font-style: normal; font-size: 14px; font-weight: 600; }
.mm__score { color: var(--gold-ink); font-weight: 700; margin: 0 0 14px; }
.mm__list { margin: 0; }
.mm__row { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--hairline); }
.mm__row dt { width: 84px; flex: none; color: var(--ash); font-size: var(--t-sm); }
.mm__row dd { margin: 0; font-weight: 600; }
.mm__tbd { color: var(--ash); font-weight: 400; }

/* 41. Scoresheet in the standard squash layout (black on white, A4 portrait) */
.ws { background: #fff; color: #000; max-width: 794px; margin: 18px auto 40px; border: 1.5px solid #000; font-family: 'Public Sans', Arial, sans-serif; font-size: 12px; }
.ws * { box-sizing: border-box; }
.ws__top { display: grid; grid-template-columns: 1fr 1.2fr 1fr; border-bottom: 1.5px solid #000; min-height: 70px; }
.ws__top > div { display: flex; align-items: center; justify-content: center; padding: 8px; border-right: 1.5px solid #000; }
.ws__top > div:last-child { border-right: 0; }
.ws__logo img { max-height: 52px; max-width: 100%; }
.ws__event { color: #D4161C; font-family: 'Archivo', Arial, sans-serif; font-weight: 800; font-size: 18px; text-align: center; }
.ws__bar { display: grid; grid-template-columns: 1fr 120px 120px; border-bottom: 1.5px solid #000; }
.ws__loc { background: #000; color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; padding: 6px; }
.ws__warm { border-collapse: collapse; width: 100%; font-size: 9px; }
.ws__warm th, .ws__warm td { border: 1px solid #000; height: 11px; padding: 0 2px; text-align: left; }
.ws__warm th { text-align: center; }
.ws__date, .ws__c, .ws__win, .ws__dur, .ws__sig { position: relative; padding: 14px 6px 4px; font-weight: 700; }
.ws__date { border-left: 1px solid #000; }
.ws span:first-child:not(.ws__sv) { }
.ws__date span, .ws__c span, .ws__win span, .ws__dur span, .ws__sig span { position: absolute; top: 1px; left: 5px; font-size: 9px; font-weight: 400; color: #333; }
.ws__info { display: grid; grid-template-columns: repeat(12, 1fr); border-bottom: 1.5px solid #000; }
.ws__c { border-right: 1px solid #000; border-bottom: 1px solid #000; min-height: 34px; grid-column: span 4; }
.ws__info > .ws__c:nth-child(1) { grid-column: span 3; }
.ws__info > .ws__c:nth-child(2), .ws__info > .ws__c:nth-child(3), .ws__info > .ws__c:nth-child(4) { grid-column: span 2; }
.ws__info > .ws__c:nth-child(5) { grid-column: span 3; border-right: 0; }
.ws__info > .ws__c:nth-child(8) { border-right: 0; }
.ws__info > .ws__c:nth-child(n+6) { border-bottom: 0; }
.ws__games { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1.5px solid #000; }
.ws__game { border-right: 1.5px solid #000; }
.ws__game:last-child { border-right: 0; }
.ws__gn { text-align: center; padding: 4px 0; border-bottom: 1px solid #000; }
.ws__gn span { display: inline-flex; width: 22px; height: 22px; border: 1.5px solid #000; border-radius: 50%; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }
.ws__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ws__grid th { font-size: 9px; border-bottom: 1px solid #000; border-right: 1px solid #000; height: 12px; }
.ws__grid td { border: 1px solid #777; height: 16px; text-align: center; font-size: 10px; font-weight: 700; padding: 0; font-variant-numeric: tabular-nums; }
.ws__grid td:nth-child(2) { border-right: 1px solid #000; }
.ws__grid .ws__sv { font-size: 8px; font-weight: 400; color: #333; }
.ws__set { display: grid; grid-template-columns: 1.2fr 1fr 1fr; border-top: 1.5px solid #000; font-size: 9px; }
.ws__set span, .ws__set b { padding: 4px 3px; border-right: 1px solid #000; font-weight: 400; }
.ws__set b { font-size: 12px; text-align: center; font-weight: 800; }
.ws__set b:last-child { border-right: 0; }
.ws__bottom { display: grid; grid-template-columns: 1.15fr 1fr; }
.ws__pen { border-collapse: collapse; width: 100%; font-size: 9px; border-right: 1.5px solid #000; }
.ws__pen th, .ws__pen td { border: 1px solid #000; padding: 2px 3px; height: 17px; text-align: left; }
.ws__pen th { background: #fff; font-weight: 700; }
.ws__pen thead tr:first-child th { text-align: center; }
.ws__end { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; }
.ws__win { border-bottom: 1px solid #000; border-right: 1px solid #000; min-height: 44px; }
.ws__win small { display: block; font-weight: 400; font-size: 9px; }
.ws__dur { border-bottom: 1px solid #000; }
.ws__sig { grid-column: 1 / -1; min-height: 70px; background: linear-gradient(to top right, transparent calc(50% - .5px), #000, transparent calc(50% + .5px)); }
.ws__sig span { top: auto; bottom: 3px; background: #fff; padding: 0 3px; }
@media (max-width: 760px) { .ws { font-size: 10px; } .ws__event { font-size: 13px; } .ws__grid td { height: 12px; font-size: 8px; } }
@media print {
  @page { size: A4 portrait; margin: 8mm; }
  .ws { margin: 0; max-width: none; width: 100%; break-inside: avoid; }
  .ws__grid td { height: 4.3mm; }
  .ws, .ws * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.mm__form { border-top: 1px solid var(--hairline); margin-top: 8px; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.mm__form h4 { font-size: var(--t-sm); color: var(--gold-ink); }
.mm__win { display: flex; flex-direction: column; gap: 8px; }
.mm__win label { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.mm__win input { width: 20px; height: 20px; accent-color: var(--gold); }

/* 42. Results admin */
.res__sub { display: block; font-size: var(--t-xs); color: var(--ash); font-weight: 400; margin-top: 2px; }
.res-admin { margin: 0 0 24px; }
.res-admin__bar { display: flex; flex-wrap: wrap; gap: 10px; }
.res-admin__box { border: 1px solid var(--hairline); background: var(--card); padding: 16px; margin-top: 14px; }
.res-admin__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 12px; }
.res-admin__box[hidden] { display: none !important; }
.ent-edit { background: none; border: 0; color: var(--gold-ink); font-size: 18px; cursor: pointer; padding: 2px 8px; }

/* 43. Tournament popup (Results) */
.res__row { cursor: pointer; }
.res__row:hover td { background: var(--card); }
.res__notes { margin: 14px 0 0; line-height: 1.6; white-space: pre-line; }
.res__h { margin: 18px 0 8px; font-size: var(--t-sm); color: var(--gold-ink); text-transform: uppercase; letter-spacing: .08em; }
.res__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.res__links a { color: var(--gold-ink); font-weight: 700; }
.res__photos, .res-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-bottom: 8px; }
.res__photos img, .res-photos img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; display: block; }
.res-photos__i { position: relative; }
.res-photos__i button { position: absolute; top: 3px; right: 3px; background: rgba(0,0,0,.7); color: #fff; border: 0; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; }

/* 44. Links inside tournament information */
.icard__row, .tprose { overflow-wrap: anywhere; }
.icard__row a, .tprose a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* 45. Tournament admin */
.tt__admin { display: inline-flex; gap: 2px; margin-top: 4px; }
.thero__admin { margin: 10px 0 0; }
.tad__cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-bottom: 10px; }
.tad__cats label { display: flex; gap: 6px; align-items: center; font-size: var(--t-sm); }
.tad textarea { width: 100%; font: inherit; }

/* 46. Places in a bracket you can click in the draw maker */
#dmPreview [data-slot] { cursor: pointer; }
#dmPreview [data-slot]:hover { outline: 1px solid var(--gold); }

/* 47. Import column choice */
.ent-map { margin: 10px 0; }
.ent-map summary { cursor: pointer; color: var(--gold-ink); font-weight: 600; }

/* 48. Match popup on the Matches tab */
.mt__row[data-mid] { cursor: pointer; }
.mt__row[data-mid]:hover { background: var(--card); }
.mm__live { text-align: center; border: 1px solid var(--gold); background: var(--paper); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.mm__pts { display: flex; justify-content: center; align-items: baseline; gap: 14px; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 44px; color: var(--gold-ink); margin: 6px 0; }
.mm__pts span { color: var(--ash); }
.mm__live p { margin: 2px 0; color: var(--ash); font-size: var(--t-sm); }

.sheet-login { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--card); border: 1px solid var(--hairline); padding: 14px; margin-bottom: 16px; }
.sheet-login .pad__name { max-width: 220px; }
.dm-del { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.dm-del [hidden] { display: none !important; }

/* 49. Rankings from finishing positions (organiser) */
.rp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.rp-t { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 8px; }
.rp-t select { width: auto; }
.rp-ev { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; border-top: 1px solid var(--hairline); padding: 10px 0; }
.rp-ev--off { opacity: .55; }
.rp-ev .pad__name { width: 200px; }
.rp-ev__meta { color: var(--ash); font-size: var(--t-sm); flex: 1; min-width: 160px; }
.rp-res { width: 100%; margin: 6px 0; }
.rp-res .pad__name { width: 100%; min-width: 70px; }
.rp-ev .rp-res, .rp-ev > button[data-addr] { flex-basis: 100%; }

.rp-imp { border-top: 1px solid var(--hairline); padding: 10px 0; }
.rp-imp h4 { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rp-imp h4 select { width: auto; }
.rp-imp__col { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 6px 0; }
.rp-imp__col select { width: auto; }

.dm-paper { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--ash); }
.dm-paper select { width: auto; }