/* ══════════════════════════════════════════════════════════════════
   CHCA PAIRING SYSTEM
   Loads AFTER styles.css and theme-2026.css and inherits every token
   from them - Board Green #1A7A3C, Tournament Red #E8191A, Inter, the
   10px radius and the e1/e2/e3 shadow scale. Nothing here redefines a
   brand colour; it only adds the components the pairing app needs.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --pr-white-sq: #FFFFFF;
  --pr-black-sq: #2A3138;
  --pr-ok: #1A7A3C;
  --pr-warn: #B57A0A;
  --pr-warn-bg: #FDF6E6;
  --pr-block: #B3121A;
  --pr-block-bg: #FDECEC;
  --pr-info-bg: #EAF1F9;
  --pr-info: #1E5AA0;
}

/* ── No stray accent bars ─────────────────────────────────── */
/* theme-2026.css gives every h1/h2 inside .main a red accent bar,
   positioned at the bottom of the heading box. Inside a card that box is
   only as tall as the text, so the bar lands on the baseline and reads
   as a red underline struck through the first word. Headings that belong
   to a component don't want the bar at all. */
.pr-head h1::after, .pr-head h2::after, .pr-head h3::after,
.pr-card h2::after, .pr-card h3::after, .pr-card h4::after,
.pr-notice h4::after, .pr-modal h3::after,
.pr-drawer h3::after, .pr-drawer h4::after,
.pr-shot h1::after, .pr-shot h2::after,
.sc-title::after,
/* The whole pairing app and the live results: styles.css draws a red
   ::after bar under EVERY h1/h2 for the marketing site, which showed up
   as a stray red underline under the round title, the next-step card,
   the live masthead and anywhere else the redesign put a heading. The
   app is not the marketing site - kill it on every heading here. */
.pr-page h1::after, .pr-page h2::after, .pr-page h3::after, .pr-page h4::after,
#liveview h1::after, #liveview h2::after, #liveview h3::after, #liveview h4::after {
  content: none !important;
  display: none !important;
}

/* ── Landing page ─────────────────────────────────────────── */
.pr-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 56px;
  align-items: center;
  padding: 56px 0 48px;
}
.pr-hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.06;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 14ch;
}
.pr-hero h1 em { font-style: normal; color: var(--brand); }
.pr-hero .pr-lead { font-size: var(--t-lead); color: var(--text); max-width: 46ch; margin-bottom: 14px; }
.pr-hero .pr-sub { font-size: var(--t-sm); color: var(--muted); max-width: 46ch; margin-bottom: 26px; }
.pr-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.pr-hero-media { position: relative; max-width: 100%; }

/* ── Screen carousel ──────────────────────────────────────── */
/* A browser frame cycling through the real screens. Nobody should have
   to sign in to find out what the thing looks like. The mock content is
   sized entirely in em off .pr-shot, so one font-size scales a whole
   screen down without a transform and without a second breakpoint. */
.pr-shots {
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: var(--e3); background: var(--surface);
}
.pr-shots-bar {
  display: flex; align-items: center; gap: 7px; padding: 9px 14px;
  background: var(--surface-soft); border-bottom: 1px solid var(--line);
}
.pr-shots-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: block; flex: none; }
.pr-shots-bar .u {
  flex: 1; min-width: 0; height: 21px; margin-left: 6px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--line); padding: 0 11px;
  font-size: .66rem; font-weight: 600; color: var(--muted);
  display: flex; align-items: center; overflow: hidden; white-space: nowrap;
}
.pr-shots-stage { position: relative; aspect-ratio: 4 / 3.15; background: var(--surface); }
.pr-shot {
  position: absolute; inset: 0; padding: 16px 18px; overflow: hidden;
  opacity: 0; pointer-events: none; transition: opacity .45s var(--ease);
  font-size: clamp(8.5px, 1.35vw, 12.5px);
}
.pr-shot.on { opacity: 1; pointer-events: auto; }
.pr-shots-foot {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-top: 1px solid var(--line); background: var(--surface);
}
.pr-shots-cap { flex: 1; min-width: 0; font-size: var(--t-label); color: var(--muted); font-weight: 600; }
.pr-shots-dots { display: flex; gap: 6px; flex: none; }
.pr-shots-dots button {
  width: 8px; height: 8px; border-radius: 99px; border: 0; background: var(--line);
  padding: 0; margin: 0; cursor: pointer; transition: width .2s var(--ease), background .2s var(--ease);
}
.pr-shots-dots button.on { background: var(--brand); width: 22px; }

/* Mock screen furniture - em-based throughout. */
.sc-h { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: .9em; }
.sc-title { font-size: 1.4em; font-weight: 800; color: var(--ink); letter-spacing: -.02em; line-height: 1.2; }
.sc-sub { font-size: .85em; color: var(--muted); margin-top: .15em; }
.sc-card { border: 1px solid var(--line); border-radius: .65em; overflow: hidden; background: var(--surface); }
.sc-match {
  display: flex; align-items: center; gap: .8em; padding: .55em .8em;
  background: var(--surface-soft); border-bottom: 1px solid var(--line);
}
.sc-team { flex: 1; min-width: 0; font-weight: 800; color: var(--ink); font-size: 1.02em; }
.sc-team.r { text-align: right; }
.sc-seq { display: flex; gap: .2em; margin-top: .35em; }
.sc-seq span { width: .8em; height: .8em; border-radius: .18em; border: 1px solid var(--line); background: #fff; }
.sc-seq span.b { background: var(--pr-black-sq); border-color: var(--pr-black-sq); }
.sc-score { flex: none; font-weight: 800; font-size: 1.3em; color: var(--ink); font-variant-numeric: tabular-nums; }
.sc-row { display: flex; align-items: center; gap: .7em; padding: .5em .8em; border-bottom: 1px solid var(--line-soft); }
.sc-row:last-child { border-bottom: 0; }
.sc-bd {
  flex: none; width: 1.8em; height: 1.8em; border-radius: .35em; background: var(--surface-soft);
  display: grid; place-items: center; font-weight: 800; font-size: .85em; color: var(--ink);
}
.sc-ppl { flex: 1; min-width: 0; display: grid; gap: .18em; }
.sc-p { display: flex; align-items: center; gap: .45em; font-size: .92em; font-weight: 600; color: var(--ink); }
.sc-p em { font-style: normal; color: var(--muted); font-size: .88em; font-variant-numeric: tabular-nums; }
.sc-ppl b { font-weight: 700; color: var(--ink); font-size: .95em; }
.sc-ppl em { font-style: normal; color: var(--muted); font-size: .82em; }
.sc-dot { flex: none; width: .75em; height: .75em; border-radius: .18em; border: 1px solid var(--line); background: #fff; }
.sc-dot.b { background: var(--pr-black-sq); border-color: var(--pr-black-sq); }
.sc-btns { flex: none; display: flex; gap: .3em; }
.sc-btn {
  border: 1px solid var(--line); border-radius: .35em; padding: .4em .65em;
  font-weight: 800; font-size: .85em; background: var(--surface); color: var(--ink);
}
.sc-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.sc-tag {
  display: inline-block; font-size: .72em; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: .15em .55em; border-radius: 99px; background: var(--pr-warn-bg);
  color: var(--pr-warn); border: 1px solid #EADFC2; margin-top: .2em; justify-self: start;
}
.sc-table { width: 100%; border-collapse: collapse; font-size: .92em; }
.sc-table th {
  text-align: left; font-size: .78em; text-transform: uppercase; letter-spacing: .07em;
  background: var(--brand-dark); color: #fff; font-weight: 800;
  padding: .45em .55em; border-bottom: 0;
}
.sc-table th:first-child { border-top-left-radius: .35em; }
.sc-table th:last-child { border-top-right-radius: .35em; }
.sc-table td { padding: .45em .55em; border-bottom: 1px solid var(--line-soft); color: var(--text); }
.sc-table td.n { text-align: right; font-variant-numeric: tabular-nums; }
.sc-table td.w { font-weight: 700; color: var(--ink); }
/* Clips at the frame edge rather than letting a half-row hang out of
   the stage, which reads as a bug rather than as a scrolling list. */
.sc-list { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.sc-list li {
  display: flex; align-items: center; gap: .6em; padding: .3em .6em;
  border: 1px solid var(--line); border-radius: .4em; margin-bottom: .26em;
}
.sc-ord {
  flex: none; width: 1.6em; height: 1.6em; border-radius: .35em; background: var(--surface-soft);
  display: grid; place-items: center; font-weight: 800; font-size: .82em; color: var(--ink);
}
.sc-badge {
  flex: none; font-size: .76em; font-weight: 800; padding: .22em .65em; border-radius: 99px;
  background: var(--green-tint); color: var(--brand-dark);
}
.sc-badge.b { background: var(--pr-info-bg); color: var(--pr-info); }
.sc-badge.res { background: var(--surface-soft); color: var(--muted); }
.sc-banner {
  display: flex; align-items: center; gap: .6em; padding: .55em .8em; border-radius: .5em;
  background: var(--pr-warn-bg); border: 1px solid #EADFC2; color: #7A5406;
  font-weight: 700; font-size: .88em; margin-bottom: .9em;
}
.sc-pulse { flex: none; width: .6em; height: .6em; border-radius: 50%; background: currentColor; }

/* Three-step strip. */
.pr-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 44px; }
.pr-step {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--e1); padding: 24px 22px; position: relative; overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.pr-step:hover { transform: translateY(-4px); box-shadow: var(--e3); }
.pr-step b { display: block; color: var(--ink); font-size: 1.0625rem; margin-bottom: 6px; }
.pr-step p { font-size: var(--t-sm); color: var(--muted); margin: 0; }
.pr-step .pr-num {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--green-tint); color: var(--brand-dark); font-weight: 900; margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.pr-step:nth-child(2) .pr-num { background: #FDECEC; color: var(--pr-block); }
.pr-step:nth-child(3) .pr-num { background: #EAF1F9; color: var(--pr-info); }

.pr-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.pr-feature {
  display: flex; gap: 16px; padding: 22px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--e1);
}
/* Line icons in the same idiom as the rest of the site: 24-box, stroked
   in currentColor, never filled. */
.pr-feature .pr-ic {
  width: 42px; height: 42px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: var(--green-tint); color: var(--brand-dark);
}
.pr-feature .pr-ic svg {
  width: 21px; height: 21px; stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.pr-feature b { display: block; color: var(--ink); margin-bottom: 4px; }
.pr-feature p { margin: 0; font-size: var(--t-sm); color: var(--muted); }

@media (max-width: 900px) {
  .pr-hero { grid-template-columns: 1fr; gap: 32px; padding: 32px 0 28px; }
  .pr-steps, .pr-feature-grid { grid-template-columns: 1fr; }
}

/* ── App shell ────────────────────────────────────────────── */
/* Deliberately not the marketing nav: an organiser standing in a hall
   needs the event they are running, not the gallery. */
.pr-app-bar {
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 60; box-shadow: var(--e1);
}
.pr-app-bar .container { display: flex; align-items: center; gap: 18px; min-height: 62px; }
.pr-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.pr-brand img { height: 32px; width: 32px; object-fit: contain; }
.pr-brand b { font-size: .95rem; font-weight: 900; color: var(--brand); letter-spacing: -.015em; line-height: 1.1; }
.pr-brand span { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.pr-app-nav { display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pr-app-nav::-webkit-scrollbar { display: none; }
.pr-app-nav a {
  font-size: var(--t-sm); font-weight: 700; color: var(--text); padding: 9px 13px;
  border-radius: 6px; text-decoration: none; white-space: nowrap; position: relative;
}
.pr-app-nav a:hover { background: var(--surface-soft); color: var(--ink); }
.pr-app-nav a.on { color: var(--brand); }
.pr-app-nav a.on::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 2px; background: var(--accent); border-radius: 2px; }
.pr-app-right { display: flex; align-items: center; gap: 10px; flex: none; }

.pr-who { font-size: var(--t-label); color: var(--muted); font-weight: 700; text-align: right; line-height: 1.3; }
.pr-who b { display: block; color: var(--ink); font-size: var(--t-sm); }

/* ── Event bar ────────────────────────────────────────────── */
/* Lives inside the sticky header, under the app bar, so the event
   being worked on is on screen for as long as it is open. The name is
   the biggest thing in it on purpose: an organiser with three leagues
   on the go is entering results into THIS one. */
.pr-event-bar { background: var(--surface-soft); border-top: 1px solid var(--line); }
.pr-event-bar .container {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 50px;
}
.pr-event-id { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 1 1 auto; padding: 8px 0; }
.pr-event-id .lbl {
  font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); flex: none;
}
/* When the bar is short of room the meta line gives way first; the
   name is the point of the bar and is cut only when it alone will not
   fit. */
.pr-event-id b {
  font-size: 1.02rem; font-weight: 900; color: var(--ink); letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 12ch;
}
.pr-event-id .meta {
  font-size: var(--t-label); color: var(--muted); font-weight: 600; white-space: nowrap;
  flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.pr-event-id .state { color: var(--brand-dark); font-weight: 800; }
.pr-event-id .state.bad { color: var(--pr-block); }
.pr-event-tabs { display: flex; gap: 2px; flex: none; overflow-x: auto; scrollbar-width: none; }
.pr-event-tabs::-webkit-scrollbar { display: none; }
.pr-event-tabs a {
  font-size: var(--t-sm); font-weight: 700; color: var(--text); padding: 9px 12px;
  border-radius: 6px; text-decoration: none; white-space: nowrap; position: relative;
}
.pr-event-tabs a:hover { background: var(--surface); color: var(--ink); }
.pr-event-tabs a.on { color: var(--brand); background: var(--surface); }
.pr-event-tabs a.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--accent); border-radius: 2px; }
.pr-event-tabs a.back { display: none; color: var(--muted); }

/* ── Live public page: branded masthead ───────────────────────
   Chess-results is scannable; this keeps that and adds the brand. A
   green band carries the event name and the tabs; the "Live" chip is a
   solid dot, never animated. */
.pr-live-mast {
  background: var(--brand); color: #fff; border-radius: var(--radius) var(--radius) 0 0;
  padding: 16px 18px 0; margin: 0 0 0; box-shadow: var(--e1);
}
.pr-live-mast .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pr-live-mast .eyebrow { font-size: var(--t-label); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.pr-live-mast .live-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-label); font-weight: 800;
  color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 99px; padding: 3px 10px; text-transform: uppercase; letter-spacing: .04em;
}
.pr-live-mast .live-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.pr-live-mast h1 { margin: 8px 0 2px; font-size: 1.375rem; font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1.2; }
.pr-live-mast .sub { font-size: var(--t-sm); color: rgba(255,255,255,.85); font-weight: 600; }
.pr-live-tabs { display: flex; gap: 18px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; }
.pr-live-tabs::-webkit-scrollbar { display: none; }
.pr-live-tabs button {
  background: none; border: 0; margin: 0; padding: 0 0 10px; cursor: pointer; font: inherit;
  font-size: var(--t-sm); font-weight: 700; color: rgba(255,255,255,.78); white-space: nowrap;
  /* styles.css styles every bare <button> as a rounded green pill; strip
     that here so the active state reads as a clean flat white underline,
     not a pill edge. border-radius:0 is the load-bearing override. */
  border-radius: 0; border-bottom: 3px solid transparent; box-shadow: none;
}
.pr-live-tabs button:hover { background: none; color: #fff; }
.pr-live-tabs button.on { color: #fff; border-bottom-color: #fff; }
.pr-live-state { font-size: var(--t-sm); color: var(--muted); font-weight: 600; margin: 14px 0 12px; }

/* ── Dashboard event rows ─────────────────────────────────────
   Card rows, not a table: a status dot, the name, one plain line, a
   quiet status pill. The event name is the thing the eye lands on. */
.pr-evgroup { font-size: var(--t-label); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.pr-evlist { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pr-ev {
  display: flex; align-items: center; gap: 11px; padding: 13px 14px;
  border-bottom: 1px solid var(--line-soft); text-decoration: none; color: inherit;
}
.pr-ev:last-child { border-bottom: 0; }
.pr-ev:hover { background: var(--surface-soft); }
.pr-ev-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pr-ev-dot.on { background: var(--brand); }
.pr-ev-dot.warn { background: var(--pr-warn); }
.pr-ev-dot.off { background: transparent; border: 1.5px solid var(--muted); box-sizing: border-box; }
.pr-ev-t { flex: 1; min-width: 0; }
.pr-ev-t b { display: block; font-size: var(--t-base); font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-ev-t span { font-size: var(--t-label); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin-top: 2px; }
.pr-ev-pill { flex: none; font-size: var(--t-label); font-weight: 800; border-radius: 99px; padding: 4px 9px; }
.pr-ev-pill.on { background: var(--green-tint); color: var(--brand-dark); }
.pr-ev-pill.off { background: var(--surface-soft); color: var(--muted); }
.pr-ev-chev { width: 16px; height: 16px; color: var(--muted); flex: none; }

/* ── Grouped sections in the dashboard list ───────────────────
   Sections that share an umbrella are shown as one block under the
   umbrella name; each section row is indented so the grouping reads at
   a glance without a heavy border. */
.pr-group { border-bottom: 1px solid var(--line-soft); }
.pr-group:last-child { border-bottom: 0; }
.pr-group-top {
  display: flex; align-items: baseline; gap: 8px; padding: 11px 14px 5px;
  background: var(--surface-soft); font-weight: 800; color: var(--ink); font-size: var(--t-sm);
}
.pr-group-top span { margin-left: auto; font-weight: 600; color: var(--muted); font-size: var(--t-label); }
.pr-ev.sect { padding-left: 26px; }

/* ── Sections strip on a grouped event's overview ─────────────
   The umbrella name and a pill per sibling section (current one lit),
   with a dashed pill to add another. */
.pr-sections {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  padding: 10px 12px; margin-bottom: 14px;
}
.pr-sections-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pr-sections-top b { font-size: var(--t-sm); color: var(--ink); font-weight: 800; }
.pr-sections-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-sec-pill {
  font-size: var(--t-label); font-weight: 700; border-radius: 99px; padding: 5px 11px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  text-decoration: none; cursor: pointer;
}
.pr-sec-pill:hover { background: var(--surface-soft); }
.pr-sec-pill.on { background: var(--green-tint); border-color: transparent; color: var(--brand-dark); }
.pr-sec-pill.add { color: var(--brand); border-style: dashed; }

/* ── Round header: event / round / progress + switcher ────────
   The competing header buttons (publish, print, re-pair) moved behind
   the overflow, leaving one primary action - pair, or finish. */
.pr-round-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pr-round-head .l { min-width: 0; }
.pr-round-head .ev { font-size: var(--t-label); color: var(--muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-round-head h1 { margin: 1px 0 2px; font-size: 1.5rem; font-weight: 800; color: var(--ink); letter-spacing: -.03em; }
.pr-round-head .sub { font-size: var(--t-sm); color: var(--text); font-weight: 600; }
.pr-round-head .r { display: flex; align-items: center; gap: 8px; flex: none; }
.pr-round-switch { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.pr-round-switch .lbl { font-size: var(--t-label); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); flex: none; }
.pr-rsw-list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pr-rsw-list::-webkit-scrollbar { display: none; }
.pr-rsw {
  flex: none; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font-weight: 800; font-size: var(--t-sm); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; position: relative;
}
.pr-rsw:hover { border-color: var(--brand); color: var(--brand-dark); }
.pr-rsw.on { background: var(--brand); border-color: var(--brand); color: #fff; }
/* A finished round gets a small green corner tick, so a glance down the
   strip shows how far the event has got. */
.pr-rsw.done:not(.on) { border-color: rgba(26,122,60,.35); color: var(--brand-dark); background: var(--green-tint); }

/* ── Entries: summary, actions, alert, club cards, import ─────── */
.pr-entry-summary { font-size: var(--t-sm); color: var(--muted); font-weight: 600; margin-top: 2px; }
.pr-entry-actions { display: flex; gap: 10px; margin-bottom: 14px; }
.pr-entry-actions .pr-btn { flex: 1; }
.pr-alert {
  display: flex; align-items: center; gap: 11px; background: var(--pr-warn-bg); border: 1px solid #EADFC2;
  border-radius: 10px; padding: 11px 13px; margin-bottom: 14px;
}
.pr-alert svg { width: 18px; height: 18px; stroke: var(--pr-warn); flex: none; }
.pr-alert .t { flex: 1; font-size: var(--t-sm); color: #7a5406; font-weight: 600; }
.pr-clubcard { margin-bottom: 14px; }
.pr-club-head { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--line-soft); background: var(--surface-soft); }
.pr-club-head .t { flex: 1; min-width: 0; }
.pr-club-head .t b { display: block; font-size: var(--t-base); font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.pr-club-head .t span { font-size: var(--t-label); color: var(--muted); }
.pr-icon-btn {
  flex: none; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface);
  color: var(--brand-dark); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0;
}
.pr-icon-btn svg { width: 18px; height: 18px; }
.pr-icon-btn:hover { border-color: var(--brand); background: var(--green-tint); }
.pr-icon-btn.ghost { color: var(--muted); }
.pr-icon-btn.ghost:hover { border-color: var(--pr-block); background: var(--pr-block-bg); color: var(--pr-block); }

/* The import picker: a checklist of registrants. */
.pr-pick-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.pr-pick-tools { display: flex; align-items: center; gap: 12px; }
.pr-pick-tools select { width: auto; padding: 6px 10px; font-size: var(--t-label); }
.pr-picklist { max-height: 48vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.pr-pick { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.pr-pick:last-child { border-bottom: 0; }
.pr-pick input { width: 18px; height: 18px; flex: none; accent-color: var(--brand); }
.pr-pick .nm { flex: 1; min-width: 0; }
.pr-pick .nm b { display: block; font-size: var(--t-sm); font-weight: 700; color: var(--ink); }
.pr-pick .nm span { font-size: var(--t-label); color: var(--muted); }
.pr-pick .rt { font-size: var(--t-sm); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; flex: none; }
.pr-pick.in { opacity: .55; }
.pr-pick.in .rt { color: var(--muted); font-weight: 800; text-transform: uppercase; font-size: var(--t-label); }
.pr-pick-foot { display: flex; justify-content: flex-end; margin-top: 14px; }
.pr-pick-foot .pr-btn { min-width: 160px; }

/* ── Overview: next step, status rows, footer ─────────────────
   The decluttered overview. One filled button lives in the next-step
   card; everything else is a quiet row or sits behind the footer. */
.pr-status-line {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px; font-size: var(--t-sm); color: var(--text);
}
.pr-status-line > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-next {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--e1); margin-bottom: 14px;
}
.pr-next .k { font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.pr-next h2 { margin: 6px 0 2px; font-size: 1.375rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.pr-next p { margin: 0; font-size: var(--t-sm); color: var(--text); }
.pr-progress { height: 6px; border-radius: 99px; background: var(--line-soft); margin: 14px 0; overflow: hidden; }
.pr-progress i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.pr-btn.block { display: flex; width: 100%; justify-content: center; margin-top: 4px; }

.pr-rows {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 14px;
}
.pr-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 14px 15px; border-bottom: 1px solid var(--line-soft); background: none; border-left: 0; border-right: 0; border-top: 0;
  cursor: pointer; font: inherit; color: inherit; text-decoration: none;
}
.pr-row:last-child { border-bottom: 0; }
.pr-row:hover { background: var(--surface-soft); }
.pr-row .t { flex: 1; min-width: 0; }
.pr-row .t b { display: block; font-size: var(--t-base); font-weight: 700; color: var(--ink); }
.pr-row .t span { font-size: var(--t-label); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pr-row-chev { width: 16px; height: 16px; color: var(--muted); flex: none; }
.pr-pub-on { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-label); font-weight: 800; color: var(--brand-dark); flex: none; }
.pr-pub-on .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }

.pr-foot-actions { display: flex; gap: 10px; }
.pr-foot-actions .pr-btn { flex: 1; }
/* The overflow "..." button - a fixed square, wherever it appears (the
   overview footer, the round header). Its icon needs an explicit size or
   an inline SVG with no width attribute renders at nothing and the
   button looks empty. */
.pr-btn.o-more { flex: 0 0 48px; padding: 0; min-width: 0; }
.pr-btn.o-more svg { width: 20px; height: 20px; }
.pr-foot-actions .o-more { flex: 0 0 48px; }

/* Sheet content (print & export) and menu (overflow), rendered inside the modal. */
.pr-sheet-sec { font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 800; margin: 4px 0 8px; }
.pr-sheet-sec + .pr-sheet-grid { margin-bottom: 16px; }
.pr-sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pr-sheet-item {
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-size: var(--t-sm);
  font-weight: 700; color: var(--ink); text-decoration: none; background: var(--surface);
}
.pr-sheet-item:hover { border-color: var(--brand); background: var(--green-tint); color: var(--brand-dark); }
.pr-menu { display: flex; flex-direction: column; margin: -6px 0; }
.pr-menu-item {
  display: block; width: 100%; text-align: left; padding: 14px 4px; font-size: var(--t-base);
  color: var(--ink); text-decoration: none; background: none; border: 0; border-top: 1px solid var(--line-soft);
  cursor: pointer; font: inherit;
}
.pr-menu-item:first-child { border-top: 0; }
.pr-menu-item:hover { color: var(--brand); }
.pr-menu-item.danger { color: var(--pr-block); }

/* Connection pill - the one piece of chrome that must never be subtle. */
.pr-net {
  display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-label); font-weight: 800;
  padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface-soft);
  color: var(--muted); white-space: nowrap;
}
.pr-net i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pr-net.on { background: var(--green-tint); border-color: rgba(26,122,60,.25); color: var(--brand-dark); }
.pr-net.off { background: var(--pr-warn-bg); border-color: #EADFC2; color: var(--pr-warn); }
.pr-net.syncing { background: var(--pr-info-bg); border-color: #D2E0F0; color: var(--pr-info); }

/* ── Generic pieces ───────────────────────────────────────── */
.pr-page { padding: 28px 0 64px; min-height: 62vh; }
.pr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.pr-head h1 { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); margin: 0 0 6px; }
.pr-head p { margin: 0; color: var(--muted); font-size: var(--t-sm); }
.pr-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.pr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: var(--t-sm); font-weight: 700; padding: 10px 16px; border-radius: 6px;
  border: 1px solid transparent; background: var(--brand); color: #fff; cursor: pointer;
  text-decoration: none; margin: 0; line-height: 1.2;
  transition: background .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.pr-btn:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: var(--e2); }
.pr-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.pr-btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.pr-btn.ghost:hover { background: var(--surface-soft); border-color: var(--ink); }
.pr-btn.danger { background: var(--accent); }
.pr-btn.danger:hover { background: #C4161C; }
.pr-btn.sm { padding: 7px 12px; font-size: var(--t-label); }

.pr-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--e1); padding: 22px; margin-bottom: 20px;
}
.pr-card > h2, .pr-card > h3 { color: var(--ink); letter-spacing: -.02em; margin: 0 0 4px; padding: 0; border: 0; }
.pr-card > h2 { font-size: 1.25rem; font-weight: 800; }
.pr-card > h2::after, .pr-card > h3::after { display: none; }
.pr-card .pr-note { font-size: var(--t-sm); color: var(--muted); margin: 0 0 16px; }

.pr-grid { display: grid; gap: 18px; }
.pr-grid.two { grid-template-columns: repeat(2, 1fr); }
.pr-grid.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .pr-grid.two, .pr-grid.three { grid-template-columns: 1fr; } }

.pr-field { margin-bottom: 16px; }
.pr-field label { display: block; font-size: var(--t-sm); font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.pr-field .hint { font-size: var(--t-label); color: var(--muted); font-weight: 500; margin-top: 5px; display: block; }
.pr-field input, .pr-field select, .pr-field textarea { width: 100%; }
.pr-inline { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.pr-inline > * { flex: 1 1 160px; }

/* Chunky choice tiles - the format step is a decision, not a dropdown. */
.pr-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.pr-choice {
  border: 1.5px solid var(--line); border-radius: var(--radius); padding: 16px; cursor: pointer;
  background: var(--surface); transition: border-color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
}
.pr-choice:hover { border-color: var(--brand); }
.pr-choice.on { border-color: var(--brand); background: var(--green-tint); box-shadow: inset 0 0 0 1px var(--brand); }
/* Locked once round 1 is paired: still readable, plainly not a control. */
.pr-choices.fixed .pr-choice { cursor: not-allowed; opacity: .6; }
.pr-choices.fixed .pr-choice:hover { border-color: var(--line); }
.pr-choices.fixed .pr-choice.on { opacity: 1; }
.pr-choice b { display: block; color: var(--ink); margin-bottom: 4px; }
.pr-choice span { font-size: var(--t-label); color: var(--muted); line-height: 1.45; display: block; }

/* ── Steps rail ───────────────────────────────────────────── */
.pr-rail { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; }
.pr-rail button {
  font: inherit; font-size: var(--t-label); font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 9px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); cursor: pointer; margin: 0;
}
.pr-rail button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.pr-rail button.done { border-color: rgba(26,122,60,.3); color: var(--brand-dark); background: var(--green-tint); }

/* ── Notices ──────────────────────────────────────────────── */
.pr-notice { border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; padding: 16px 18px; margin-bottom: 16px; background: var(--surface); }
.pr-notice h4 { margin: 0 0 6px; font-size: var(--t-base); font-weight: 800; color: var(--ink); }
.pr-notice p { margin: 0; font-size: var(--t-sm); color: var(--text); }
.pr-notice.block { border-left-color: var(--pr-block); background: var(--pr-block-bg); }
.pr-notice.warn { border-left-color: var(--pr-warn); background: var(--pr-warn-bg); }
.pr-notice.info { border-left-color: var(--pr-info); background: var(--pr-info-bg); }
.pr-notice.ok { border-left-color: var(--brand); background: var(--green-tint); }
.pr-fixes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.pr-fixes li {
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px;
  display: flex; gap: 14px; align-items: flex-start; justify-content: space-between;
}
.pr-fixes b { display: block; color: var(--ink); font-size: var(--t-sm); }
.pr-fixes span { font-size: var(--t-label); color: var(--muted); display: block; margin-top: 3px; line-height: 1.5; }

/* ── Tables ───────────────────────────────────────────────── */
.pr-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
/* styles.css sets a bare `th { background: var(--brand-dark); color: #fff }`
   for the whole site. Overriding only the colour here left grey text on a
   dark green band, which is unreadable - so the header keeps the green and
   keeps the white type that was written for it. */
.pr-table th {
  text-align: left; padding: 11px 12px; font-size: var(--t-label); font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em;
  background: var(--brand-dark); color: #fff;
  border-bottom: 0; white-space: nowrap;
}
.pr-table thead th:first-child { border-top-left-radius: 6px; }
.pr-table thead th:last-child { border-top-right-radius: 6px; }
.pr-table td { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.pr-table tbody tr:hover { background: var(--surface-soft); }
.pr-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.pr-table .rank { font-weight: 800; color: var(--ink); width: 44px; }
.pr-table .who { font-weight: 700; color: var(--ink); }
/* Alternating green bands, so the eye keeps its row across a wide
   standings table - and a photocopy of it still does (print.css bands
   the same rows). */
.pr-table.pr-banded tbody tr:nth-child(even) td { background: var(--green-tint); }
.pr-table.pr-banded tbody tr:hover td { background: var(--surface-soft); }
.pr-substate { font-size: var(--t-label); color: var(--muted); font-weight: 700; align-self: center; }
/* The opponent's rating, right beside their name in a player's game
   history, instead of a far-off right-aligned column. */
.opp-rating { color: var(--muted); font-size: var(--t-label); font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 4px; }
.pr-order-list { list-style: none; margin: 0; padding: 0; counter-reset: ord; }
.pr-order-list li { counter-increment: ord; padding: 10px 0 10px 34px; border-bottom: 1px solid var(--line-soft); position: relative; }
.pr-order-list li:last-child { border-bottom: 0; }
.pr-order-list li::before { content: counter(ord); position: absolute; left: 0; top: 10px; width: 22px; height: 22px; border-radius: 6px; background: var(--green-tint); color: var(--brand-dark); font-weight: 800; font-size: var(--t-label); display: flex; align-items: center; justify-content: center; }
.pr-order-list li b { display: block; color: var(--ink); font-size: var(--t-sm); }
.pr-order-list li span { display: block; color: var(--muted); font-size: var(--t-label); margin-top: 1px; }
/* A horizontally scrollable wrapper for anything wider than its card.
   No negative margins: it is used inside `padding: 0; overflow: hidden`
   cards, where a bleed is silently clipped instead of bleeding.

   The four backgrounds are the standard shadow trick - two solid
   "covers" scrolling with the content and two shadows fixed to the
   edges, so a shadow only shows on a side that actually has more to
   see. It needs the table itself to be transparent, because styles.css
   gives every <table> a solid background that would paint over it. */
.pr-scroll {
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to left, var(--surface) 30%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(17,24,28,.16), rgba(17,24,28,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(17,24,28,.16), rgba(17,24,28,0)) right center;
  background-repeat: no-repeat;
  background-size: 30px 100%, 30px 100%, 13px 100%, 13px 100%;
  background-attachment: local, local, scroll, scroll;
}
.pr-scroll > .pr-table { background: transparent; }

/* ── Squad list ───────────────────────────────────────────── */
.pr-squad { list-style: none; margin: 0; padding: 0; }
.pr-squad li {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; background: var(--surface);
}
.pr-squad li.dragging { opacity: .45; }
.pr-squad li.over { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(26,122,60,.12); }
.pr-squad .ord {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none;
  background: var(--surface-soft); font-weight: 800; font-size: var(--t-label); color: var(--ink);
  font-variant-numeric: tabular-nums; cursor: grab;
}
.pr-squad .nm { flex: 1; min-width: 0; }
.pr-squad .nm b { display: block; color: var(--ink); font-size: var(--t-sm); }
.pr-squad .nm span { font-size: var(--t-label); color: var(--muted); }
.pr-squad .tm {
  font-size: var(--t-label); font-weight: 800; padding: 4px 10px; border-radius: 99px;
  background: var(--green-tint); color: var(--brand-dark); flex: none;
}
.pr-squad .tm.b { background: var(--pr-info-bg); color: var(--pr-info); }
.pr-squad .tm.c { background: #FAF3E3; color: #8A6A17; }
.pr-squad .tm.res { background: var(--surface-soft); color: var(--muted); }
.pr-squad li.absent { opacity: .55; background: var(--surface-soft); }
.pr-squad li.absent .nm b { text-decoration: line-through; }

/* ── Match + board cards ──────────────────────────────────── */
/* The most important screen in the product. Big tap targets, three
   buttons per board, and the match score updating as you go. */
.pr-match { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--e1); margin-bottom: 18px; overflow: hidden; }
/* A grid, not a wrapping flex row: the two teams and the score stay on
   one line at every width, and the score sits over the middle of the
   boards underneath it rather than drifting. */
.pr-match-head {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 14px; padding: 14px 18px;
  background: var(--surface-soft); border-bottom: 1px solid var(--line);
}
.pr-side { min-width: 0; }
.pr-side b { display: block; color: var(--ink); font-size: 1.0625rem; font-weight: 800; letter-spacing: -.015em; }
.pr-side .sub { display: block; font-size: .62rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 800; margin-top: 4px; }
.pr-score {
  flex: none; font-size: 1.5rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; padding: 0 10px; text-align: center; min-width: 96px;
}
.pr-score small { display: block; font-size: .62rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 800; margin-top: 2px; }
.pr-side.away { text-align: right; }

/* Home on the left, away on the right, on every board - so a captain
   reads down one side and sees their own team. Colours alternate down
   the boards, so side and colour are not the same thing, and each name
   carries its own colour chip.

   The result buttons sit in the MIDDLE, between the two names: the
   point visibly goes to the side you press towards. */
.pr-board-row {
  display: grid;
  grid-template-columns: 38px 1fr auto 1fr;
  gap: 10px; align-items: center;
  padding: 12px 18px; border-bottom: 1px solid var(--line-soft);
}
.pr-mid { display: grid; justify-items: center; gap: 5px; }
/* A row on the public page carries an outcome, not three buttons, so it
   never needs the extra line the organiser's row does.

   The card's heading uses the SAME four columns, with an empty first
   cell standing in for the board number, so the two team names and the
   match score sit exactly above the players and the board results
   underneath them. Column widths are fixed rather than `auto` for that
   reason: two grids only line up if they agree on the numbers. */
.pr-match.live .pr-match-head,
.pr-board-row.live {
  grid-template-columns: 34px 1fr 66px 1fr;
  gap: 10px; padding: 12px 18px;
}
.pr-match.live .pr-match-head::before { content: ""; }
.pr-match.live .pr-score { min-width: 0; padding: 0; font-size: 1.2rem; white-space: nowrap; }
/* A name on the public page wraps rather than being chopped off. A
   supporter looking for "Nomsa Van Der Merwe-Botha" should not have
   to guess from "Nomsa Van Der Me". */
.pr-board-row.live .pr-seat b { white-space: normal; overflow: visible; }
/* A name on the public page wraps rather than being chopped off. A
   supporter looking for "Nomsa Van Der Merwe-Botha" should not have
   to guess from "Nomsa Van Der Me". */
.pr-board-row.live .pr-seat b { white-space: normal; overflow: visible; }
/* The public page has no buttons in the middle, only the outcome. */
.pr-outcome {
  font-size: var(--t-sm); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums;
  min-width: 52px; text-align: center;
}
.pr-board-row:last-child { border-bottom: 0; }
.pr-board-row .bd {
  width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
  background: var(--surface-soft); font-weight: 800; color: var(--ink); font-size: var(--t-sm);
}
.pr-seat { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--t-sm); }
.pr-seat.right { justify-content: flex-end; text-align: right; }
.pr-seat b { color: var(--ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-seat .rt { color: var(--muted); font-size: var(--t-label); font-variant-numeric: tabular-nums; flex: none; }
/* Points so far, in brackets next to the rating: the question asked at a
   board is "how many does he have?". Shown on screen and on the printed
   pairing sheet alike. */
.pr-seat .pts { color: var(--brand-dark); font-weight: 800; font-size: var(--t-label); font-variant-numeric: tabular-nums; flex: none; }
.pr-seat .pts:not(:empty)::before { content: "("; }
.pr-seat .pts:not(:empty)::after { content: ")"; }
.pr-seat .empty { color: var(--muted); font-style: italic; font-weight: 500; }
/* A seat waiting for somebody is the one thing on a forty-board screen
   that must not look like the others. */
.pr-seat .empty.need {
  color: var(--pr-block); font-style: normal; font-weight: 800;
  background: var(--pr-block-bg); border: 1px dashed var(--pr-block); border-radius: 6px; padding: 3px 8px;
}
/* White and Black must be told apart at a glance across a hall. A pale
   grey square on a white card was not doing that, so the chip is now a
   solid block with a hard dark edge - white is white with a dark ring,
   black is nearly black. */
.pr-seat .dot {
  width: 17px; height: 17px; border-radius: 4px; flex: none;
  border: 2px solid #23282B; box-sizing: border-box;
}
.pr-seat .dot.w { background: #fff; }
.pr-seat .dot.b { background: #23282B; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pr-res { display: flex; gap: 6px; align-items: center; flex: none; }
/* The hand-write box on a printed pairing sheet. Nothing on screen. */
.pr-writein { display: none; }
/* Each button says what it means underneath the notation. A volunteer
   who has never scored a chess match should not have to be told that
   1-0 is a win for White; the button tells them. */
.pr-res button {
  font: inherit; font-weight: 800; font-size: var(--t-sm); margin: 0;
  min-width: 58px; min-height: 46px; border-radius: 8px; border: 1.5px solid var(--line);
  background: var(--surface); color: var(--ink); cursor: pointer; padding: 5px 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease);
}
.pr-res button em {
  font-style: normal; font-size: .58rem; font-weight: 700; line-height: 1.1;
  letter-spacing: .02em; color: var(--muted); text-transform: uppercase;
}
.pr-res button:hover { border-color: var(--brand); }
.pr-res button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.pr-res button.on em { color: rgba(255,255,255,.85); }
/* One of these sits at each end of the row and belongs to the player
   on that side. It stays narrow: the three win buttons are what the
   thumb is aiming for, and the dots must not steal their width. */
.pr-res button.more { flex: 0 0 auto; min-width: 42px; font-size: 1.1rem; line-height: 1; color: var(--muted); }
.pr-res button.on.special { background: var(--pr-warn); border-color: var(--pr-warn); }

/* A non-rated result must be readable on the card itself. */
.pr-tag {
  display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px;
  background: var(--pr-warn-bg); color: var(--pr-warn); border: 1px solid #EADFC2; margin-top: 4px;
}
.pr-tag.grey { background: var(--surface-soft); color: var(--muted); border-color: var(--line); }
.pr-tag.red { background: var(--pr-block-bg); color: var(--pr-block); border-color: #F6D3D4; }
.pr-tag.green { background: var(--green-tint); color: var(--brand-dark); border-color: rgba(26,122,60,.22); }

/* ── Name chips ───────────────────────────────────────────── */
/* The players with no board this round, as things to tap. Each one is
   a button, so it has to look like one - not like a tag. */
.pr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pr-chip {
  font: inherit; font-size: var(--t-sm); font-weight: 700; color: var(--ink); margin: 0;
  padding: 7px 12px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--surface);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; line-height: 1.2;
  transition: border-color .12s var(--ease), background .12s var(--ease);
}
.pr-chip:hover { border-color: var(--brand); }
.pr-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.pr-chip:disabled { opacity: .5; cursor: default; }
.pr-unpaired .pr-chips { margin-top: 10px; }

@media (max-width: 700px) {
  /* Narrow enough that three buttons plus two names will not sit on one
     line. The names stay left and right of each other so the sides are
     still obvious, and the buttons take the full width underneath -
     still visually between the two rows of names. */
  .pr-board-row {
    grid-template-columns: 30px 1fr 1fr;
    grid-template-areas: "bd left right" "mid mid mid";
    row-gap: 8px; padding: 12px 14px;
  }
  .pr-board-row .bd { grid-area: bd; }
  .pr-seat.left { grid-area: left; }
  .pr-seat.right { grid-area: right; }
  .pr-mid { grid-area: mid; justify-items: stretch; }
  .pr-res { display: flex; }
  .pr-res button { flex: 1; min-width: 0; min-height: 50px; }
  .pr-res button.more { flex: 0 0 40px; padding: 0; }
  .pr-seat .rt { display: none; }

  /* The public page's rows have no buttons, so everything - board, both
     players and the result - stays on one line, in the same columns as
     the team names and the score above them. */
  .pr-match.live .pr-match-head,
  .pr-board-row.live {
    grid-template-columns: 20px 1fr 52px 1fr;
    grid-template-areas: none; row-gap: 0; gap: 6px; padding: 10px 12px;
  }
  .pr-match.live .pr-score { font-size: .95rem; letter-spacing: -.02em; }
  .pr-match.live .pr-side b { font-size: .78rem; }
  .pr-board-row.live > * { grid-area: auto; }
  .pr-board-row.live .pr-seat { font-size: .74rem; }
  .pr-board-row.live .pr-outcome { font-size: .74rem; min-width: 34px; }
  .pr-board-row.live .bd { width: 20px; height: 20px; font-size: .64rem; border-radius: 5px; }
}

/* ── Modal ────────────────────────────────────────────────── */
.pr-modal-wrap {
  position: fixed; inset: 0; background: rgba(17,24,28,.5); z-index: 200;
  display: grid; place-items: center; padding: 20px; overflow-y: auto;
}
.pr-modal {
  background: var(--surface); border-radius: 12px; box-shadow: var(--e3); width: min(620px, 100%);
  padding: 26px; max-height: 90vh; overflow-y: auto;
}
.pr-modal h3 { margin: 0 0 6px; font-size: 1.25rem; font-weight: 800; color: var(--ink); }
.pr-modal .pr-note { color: var(--muted); font-size: var(--t-sm); margin: 0 0 18px; }
.pr-modal-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }

/* ── Help drawer ──────────────────────────────────────────── */
/* The "?" now lives in the header, far right. It is a quiet ring, not a
   filled pill: it is help, always there, never competing with the
   screen's own primary action. */
.pr-help-ic {
  flex: none; width: 30px; height: 30px; border-radius: 50%; margin: 0; padding: 0;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--muted);
  font-size: .95rem; font-weight: 800; cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .12s var(--ease), color .12s var(--ease), background .12s var(--ease);
}
.pr-help-ic:hover { border-color: var(--brand); color: var(--brand); background: var(--green-tint); }
/* The old floating button is the fallback for a shell with no header slot. */
.pr-help-btn {
  position: fixed; right: 20px; bottom: 20px; z-index: 150;
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--brand); color: #fff; font-size: 1.3rem; font-weight: 800; margin: 0;
  box-shadow: var(--e3);
}
/* A dim scrim behind the drawer, so the eye goes to the help and a tap
   outside closes it. */
.pr-scrim {
  position: fixed; inset: 0; z-index: 200; background: rgba(17, 24, 28, .32);
  opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), visibility .2s var(--ease);
}
.pr-scrim.show { opacity: 1; visibility: visible; }
.pr-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); z-index: 210;
  background: var(--surface); box-shadow: var(--e3); border-left: 1px solid var(--line);
  padding: 26px; overflow-y: auto; transform: translateX(100%);
  transition: transform .28s var(--ease);
}
.pr-drawer.open { transform: none; }
.pr-drawer-eyebrow { font-size: var(--t-label); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-bottom: 4px; }
.pr-drawer h3 { margin: 0 0 4px; font-size: 1.2rem; font-weight: 800; color: var(--ink); }
.pr-drawer h4 { margin: 20px 0 6px; font-size: var(--t-sm); font-weight: 800; color: var(--ink); }
.pr-drawer p, .pr-drawer li { font-size: var(--t-sm); color: var(--text); line-height: 1.6; }
.pr-drawer ul { padding-left: 20px; margin: 8px 0; }
.pr-drawer .close { position: absolute; top: 18px; right: 18px; background: none; border: 0; font-size: 1.4rem; color: var(--muted); cursor: pointer; margin: 0; padding: 0; }

/* ── Toast ────────────────────────────────────────────────── */
.pr-toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 300; display: grid; gap: 8px; width: min(520px, calc(100% - 32px)); }
.pr-toast {
  background: var(--ink); color: #fff; border-radius: 8px; padding: 12px 16px; font-size: var(--t-sm);
  font-weight: 600; box-shadow: var(--e3); animation: pr-slide .25s var(--ease);
}
.pr-toast.bad { background: var(--pr-block); }
.pr-toast.good { background: var(--brand-dark); }
@keyframes pr-slide { from { opacity: 0; transform: translateY(10px); } }

/* ── Live page ────────────────────────────────────────────── */
.pr-banner {
  border-radius: var(--radius); padding: 14px 20px; margin-bottom: 22px;
  display: flex; align-items: center; gap: 12px; font-size: var(--t-sm); font-weight: 700;
}
.pr-banner.prov { background: var(--pr-warn-bg); border: 1px solid #EADFC2; color: #7A5406; }
.pr-banner.rated { background: var(--green-tint); border: 1px solid rgba(26,122,60,.24); color: var(--brand-dark); }
.pr-banner .pr-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }

.pr-tabs {
  display: flex; gap: 6px; margin-bottom: 22px; padding-bottom: 2px;
  overflow-x: auto; overscroll-behavior-x: contain;
}
.pr-tabs button {
  font: inherit; font-size: var(--t-sm); font-weight: 700; color: var(--muted); background: none;
  border: 1.5px solid transparent; border-radius: 8px;
  padding: 9px 14px; cursor: pointer; margin: 0; white-space: nowrap;
  transition: border-color .12s var(--ease), color .12s var(--ease), background .12s var(--ease);
}
.pr-tabs button:hover { color: var(--ink); border-color: var(--line); }
/* The selected tab is outlined all the way round rather than underscored
   on one edge - a single red line under one word reads as a spelling
   error, not as a selection. */
.pr-tabs button.on {
  color: var(--brand-dark); border-color: var(--accent);
  background: var(--surface); box-shadow: var(--e1);
}

.pr-empty { text-align: center; padding: 52px 20px; color: var(--muted); }
.pr-empty .big {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 14px;
  display: grid; place-items: center; background: var(--green-tint); color: var(--brand-dark);
}
.pr-empty .big .pr-svg { width: 26px; height: 26px; }
.pr-svg { stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pr-empty b { display: block; color: var(--ink); font-size: 1.0625rem; margin-bottom: 6px; }
.pr-empty p { font-size: var(--t-sm); margin: 0 auto; max-width: 42ch; }

.pr-spinner { width: 22px; height: 22px; border: 2.5px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: pr-spin .7s linear infinite; margin: 34px auto; }
@keyframes pr-spin { to { transform: rotate(360deg); } }

.pr-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: var(--t-sm); }
.pr-kv dt { color: var(--muted); font-weight: 600; }
.pr-kv dd { margin: 0; color: var(--ink); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════
   MOBILE
   A phone is the primary device - an organiser stands in a hall with
   one. Two rules: nothing may spill outside the viewport, and a table
   must fit without sideways scrolling, because a standings table you
   have to drag is a standings table nobody reads.
   ══════════════════════════════════════════════════════════════════ */

/* Long unbroken strings - slugs, URLs, emails, device names - are the
   usual cause of a page that scrolls sideways. */
.pr-page code, .pr-card code, .pr-kv dd, .pr-toast, .pr-notice p {
  overflow-wrap: anywhere;
}
.pr-app-bar .container, .pr-head, .pr-actions, .pr-card, .pr-match { min-width: 0; }

@media (max-width: 760px) {
  .container { padding: 0 14px; }
  .pr-page { padding: 18px 0 48px; }

  /* App bar: brand and connection on the first row, navigation on its
     own scrollable row underneath, so nothing is pushed off-screen. */
  .pr-app-bar .container {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand right" "nav nav";
    gap: 8px 10px;
    padding-top: 8px; padding-bottom: 8px;
    min-height: 0;
  }
  .pr-brand { grid-area: brand; }
  .pr-brand img { height: 26px; width: 26px; }
  .pr-brand b { font-size: .85rem; }
  .pr-app-right { grid-area: right; gap: 6px; }
  .pr-app-nav { grid-area: nav; margin: 0 -14px; padding: 0 14px; }
  .pr-app-nav a { padding: 7px 10px; font-size: var(--t-label); }
  /* The name is on the sign-out screen anyway; the pill and the button
     are what matter here. */
  .pr-who { display: none; }
  .pr-net { padding: 5px 9px; font-size: .66rem; }

  /* The event bar: name on one line, tabs scrolling underneath. The
     meta line goes - the round is on the page itself. */
  /* The app bar's grid rule above also matches this container, since
     the event bar lives inside the app bar; it is put back to flex. */
  .pr-event-bar .container {
    display: flex; grid-template-areas: none; flex-direction: column; align-items: stretch;
    gap: 0; padding-top: 0; padding-bottom: 0; min-height: 0;
  }
  .pr-event-id { padding: 8px 0 2px; gap: 8px; }
  .pr-event-id .meta { display: none; }
  .pr-event-id b { font-size: .95rem; }
  .pr-event-tabs { margin: 0 -14px; padding: 0 14px 4px; }
  .pr-event-tabs a { padding: 7px 10px; font-size: var(--t-label); }
  .pr-event-tabs a.back { display: inline-block; }
  body.in-event .pr-app-nav { display: none; }
  body.in-event .pr-app-bar .container { grid-template-areas: "brand right"; }

  .pr-head h1 { font-size: 1.45rem; }
  .pr-card { padding: 16px 14px; }
  .pr-modal { padding: 18px 16px; }

  /* Tables are made small first and scrolled only if that is not
     enough. Smaller type, tighter cells and a wrapping name column mean
     an eight-column standings table fits a 375px screen outright.

     `width: auto` with `min-width: 100%` is what makes both halves
     true: the table takes its natural width, stretches to fill the card
     when that is narrower, and overflows into the scroller when it is
     wider. Forcing `width: 100%` instead - which is what used to happen
     - squeezes columns past the point of legibility and then quietly
     clips whatever still will not fit. */
  .pr-table { font-size: .76rem; width: auto; min-width: 100%; }
  .pr-table th, .pr-table td { padding: 7px 5px; white-space: nowrap; }
  .pr-table th { font-size: .58rem; letter-spacing: .02em; }
  .pr-table td.num, .pr-table th.num { text-align: right; }
  /* The one column allowed to wrap, with a floor so a long club name
     does not come out one letter per line. */
  .pr-table .who { white-space: normal; overflow-wrap: break-word; min-width: 7.5em; }
  .pr-table .who br + span { font-size: .62rem; }

  /* Match cards. The two teams and the score keep their three columns
     so they line up with the boards underneath. */
  .pr-match-head { padding: 10px 12px; gap: 8px; }
  .pr-side b { font-size: .85rem; }
  .pr-score { font-size: 1.1rem; min-width: 0; padding: 0 2px; }
  .pr-score small { font-size: .55rem; }

  .pr-btn { padding: 9px 13px; }
  .pr-rail button { padding: 7px 11px; }
  .pr-tabs button { padding: 9px 10px; font-size: var(--t-label); }

  /* The wizard's side-by-side fields stack rather than squeeze. */
  .pr-inline > * { flex: 1 1 100%; }
  .pr-choices { grid-template-columns: 1fr; }
  .pr-fixes li { flex-direction: column; align-items: stretch; gap: 8px; }

  .pr-help-btn { right: 14px; bottom: 14px; width: 44px; height: 44px; }
  .pr-drawer { padding: 20px 16px; }
  .pr-shots-cap { font-size: .66rem; }
}

@media (max-width: 420px) {
  .pr-table { font-size: .7rem; }
  .pr-table th, .pr-table td { padding: 6px 3px; }
  .pr-table th { font-size: .54rem; }
  .pr-board-row { padding: 10px 10px; gap: 6px; }
  .pr-seat { font-size: .76rem; gap: 5px; }
  .pr-seat .dot { width: 14px; height: 14px; border-width: 2px; }
  .pr-res button { min-height: 46px; min-width: 0; font-size: .82rem; }
  .pr-res button.more { flex: 0 0 32px; }
  .pr-res button em { font-size: .5rem; }
  .pr-board-row.live .pr-seat { font-size: .68rem; }
  .pr-board-row.live .pr-seat .dot { width: 11px; height: 11px; }
  .pr-head h1 { font-size: 1.3rem; }
}

/* A team name that is also a rename control. It has to read as text
   first - the club card is a list of teams, not a row of buttons. */
/* styles.css makes every bare <button> an inline-flex box with
   `justify-content: center`, which quietly centred every player and team
   name in the app - most visibly the moment a long name wrapped onto two
   lines. These are words, so they are laid out as words. */
.pr-linkish {
  font: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  display: inline; text-align: left; justify-content: flex-start;
  color: var(--brand); font-weight: 700; text-decoration: underline;
  text-decoration-style: dotted; text-underline-offset: 3px;
}
.pr-linkish:hover { color: var(--brand-dark); text-decoration-style: solid; }
/* styles.css styles every bare <button> as a solid green pill, and its
   `button:hover { background: var(--brand-dark) }` outranks the plain
   `background: none` above - which turned a hovered player name into
   dark green text on a dark green slab. */
.pr-linkish, .pr-linkish:hover, .pr-linkish:focus {
  background: none !important; transform: none !important; box-shadow: none !important;
}
/* On the public page these are ordinary names that happen to be
   clickable, not editable fields, so they carry no underline until you
   are actually pointing at one. */
#liveview .pr-linkish { text-decoration: none; }
#liveview .pr-linkish:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Switches ─────────────────────────────────────────────── */
/* Used where a choice is a state rather than an action - the three
   publishing switches, for instance. A checkbox reads as "tick this
   to do something"; a switch reads as "this is on". */
.pr-switches li { align-items: center; }
.pr-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; }
.pr-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.pr-switch span {
  position: absolute; inset: 0; border-radius: 99px; background: #C9CFCB;
  transition: background .16s var(--ease);
}
.pr-switch span::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .16s var(--ease);
}
.pr-switch input:checked + span { background: var(--brand); }
.pr-switch input:checked + span::after { transform: translateX(20px); }
.pr-switch input:focus-visible + span { box-shadow: 0 0 0 3px rgba(26,122,60,.28); }

/* What TB1, TB2 and TB3 actually are. Printed crosstables have footnoted
   their tiebreaks for as long as there have been crosstables, because
   "OSB" over a column of numbers tells a reader nothing. */
.pr-tbkey {
  font-size: var(--t-label); color: var(--muted); line-height: 1.6;
  padding: 12px 16px 14px; border-top: 1px solid var(--line-soft); margin: 0;
}
.pr-tbkey b { color: var(--ink); font-weight: 800; }

/* A colour chip and a one-line result inside a table cell - the team's
   board-by-board record. */
.pr-table .dot {
  display: inline-block; vertical-align: -2px; width: 12px; height: 12px;
  border-radius: 3px; border: 2px solid #23282B; box-sizing: border-box; margin-right: 5px;
}
.pr-table .dot.w { background: #fff; }
.pr-table .dot.b { background: #23282B; }
.pr-table .bd-line {
  display: block; font-weight: 500; font-size: var(--t-label); color: var(--muted); margin-top: 3px;
}
.pr-table .bd-line b { color: var(--ink); font-weight: 800; }
/* Each entry is its own inline block so a wrapped one keeps its label
   with its name. No bullet between them: a separator that leads a
   wrapped line looks like a list marker that lost its list. */
.pr-tbkey span { display: inline-block; margin-right: 16px; }

/* A checkbox that sits inline in a toolbar rather than in a form. */
.pr-inline-check {
  display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm);
  font-weight: 700; color: var(--ink); white-space: nowrap; cursor: pointer;
}
.pr-inline-check input { width: 17px; height: 17px; margin: 0; accent-color: var(--brand); cursor: pointer; }

/* ── Sortable table headers ────────────────────────────────────────
   Both arrows are always drawn, greyed, so a visitor can see the column
   is sortable before they touch it; the active one darkens. */
.pr-table th .pr-sortbtn {
  font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0;
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  text-transform: inherit; letter-spacing: inherit; white-space: nowrap;
}
.pr-table th .pr-sortbtn:hover { transform: none; box-shadow: none; text-decoration: underline; }
.pr-sort { display: inline-flex; flex-direction: column; line-height: .55; }
.pr-sort i { font-style: normal; font-size: .5rem; opacity: .38; }
.pr-sort i.on { opacity: 1; }

/* A result that carries no rating. Marked once per board and explained
   once per page, rather than spelled out twelve times. */
.pr-flag { color: var(--pr-warn); font-weight: 800; margin-left: 4px; }

/* The heading over one round of a team's own results. */
.pr-roundhead {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--surface-soft); border-bottom: 1px solid var(--line);
}
.pr-roundhead b { color: var(--ink); font-size: var(--t-base); }
.pr-roundhead span { color: var(--muted); font-size: var(--t-sm); }
.pr-roundhead em {
  margin-left: auto; font-style: normal; font-weight: 800; color: var(--ink);
  font-size: 1.05rem; font-variant-numeric: tabular-nums;
}
.pr-table tfoot td {
  border-top: 2px solid var(--line); border-bottom: 0;
  background: var(--surface-soft); font-variant-numeric: tabular-nums;
}