/* =====================================================================
   R2 SPORTS — CHAMPIONSHIP PUBLIC THEME — CORE
   TEST BUILD · RACQUETBALL PHOTO SCENE
   Loaded only for the test events listed in incEventStyleSheet.asp
   (TIDs 54450 and 44579). Not yet a production release.
   ---------------------------------------------------------------------
   Targets only markup that the current ASP already emits:
     incWeb_home.asp ........ table.main-site-wrapper, #mainHome, #showcase,
                              #home-info (repeated id), #home-info-p,
                              #banner-ad, #modernSocialBar,
                              .live-match-card-wrapper, .live-match-single-card
     incWeb_mastHead.asp .... td#mastHead, #topMenu1 (table version only), #mainMenu1
                              (not the old #siteMenu version),
                              .masthead-horizontal-menu, .masthead-menu-btn
     incWeb_displaySponsors.asp ... #sponsors, .bottom-sponsor-ads
     incWeb_footer.asp / incWeb_footerLinks.asp ... #footer, #footer-2
     (sponsors + footer apply on any page that shows the new masthead)
   No ASP, form, link, script or text was changed.
   DATA RULE (Ryan): the event pages never load data directly from the
   database; everything comes from the event JSON files (JSON\ folder).
   This stylesheet reads no data at all. Any include change suggested
   alongside it must use the JSON data, never a new database query.
   Loaded after VTBPro.css (inc_styleSheets.asp @import order).
   Self-contained: shared core, inner pages, then variant scene tokens.
   ===================================================================== */


/* ---------------------------------------------------------------------
   C01 · 1. THEME TOKENS (the only place literal colours live)
   --------------------------------------------------------------------- */
:root {
  --page: #f3f3f1;
  --surface: #ffffff;
  --soft: #f7f7f6;
  --ink: #202126;
  --secondary: #595b62;
  --muted: #6c6f77;
  --border: #e2e2e3;
  --brand: #bd2039;
  --brand-hover: #a0182e;
  --brand-soft: #fcf0f2;
  --on-brand: #ffffff;
  --hero: #17191e;
  --hero-deep: #101114;
  --hero-secondary: #c5c6cc;
  --on-hero: #ffffff;
  --subtle-inverse: rgba(255, 255, 255, 0.10);
  --focus: #9c142b;
  --success: #256344;
  --success-soft: #edf6f0;
  --warning: #5c3a00;
  --warning-soft: #fdf0d2;
  --warning-accent: #b45309;
  --warning-line: #ecc77a;
  --footer-link: #d4d5da;

  /* Sponsor levels (gold, silver, bronze keep the original level colours) */
  --tier-gold: #b29800;
  --tier-gold-soft: #faf4d6;
  --tier-gold-ink: #5e4f00;
  --tier-silver: #c0c0c0;
  --tier-silver-soft: #f1f2f4;
  --tier-silver-ink: #454a52;
  --tier-silver-icon: #7c828b;
  --tier-bronze: #a0522d;
  --tier-bronze-soft: #f8ece4;
  --tier-bronze-ink: #6b3518;

  /* Team divisions on the divisions & fees page (were cyan / pink) */
  --team-soft: #eaf4fb;
  --team-draw-soft: #f8edf6;
  --zebra: #f1f1ef;

  /* Group header bars on the participants pages (letters A, B, C; each
     country, state, city, school or club) and the "A - Col" range tag.
     10-20 review: the black bar was too heavy for print, so the default is
     now Option 1 Light grey. To switch, change these five:
       Option 2 Soft red: brand-soft / brand / brand / brand / on-brand
       Option 3 Slate:    #e2e6ec / #2b3440 / #2b3440 / #2b3440 / #ffffff */
  --group-bg: #eceef1;
  --group-ink: var(--ink);
  --group-edge: var(--brand);
  --group-count-bg: var(--brand);
  --group-count-ink: var(--on-brand);

  /* Draw pages (10-20): division menu side (1 = right of the draw,
     -1 = left) and the won / lost tints of round robin & pool play */
  --division-menu-order: 1;
  --won-soft: #eaf6ee;
  --lost-soft: #fcefef;

  /* Printing (black text, light rules) */
  --print-ink: #000000;
  --print-rule: #999999;

  /* Results placements (10-20 fourth review; design still to approve).
     Option B "black names, metal outlines" is the default below.
     Option A "metal names": set the three -ink values to var(--tier-gold-ink),
     var(--tier-silver-ink), var(--tier-bronze-ink) and the three -ring values
     to transparent. */
  --place-1-ink: var(--ink);
  --place-2-ink: var(--ink);
  --place-3-ink: var(--ink);
  --place-1-ring: var(--tier-gold);
  --place-2-ring: var(--tier-silver-icon);
  --place-3-ring: var(--tier-bronze);

  /* Draw-type dots (Brackets list, and Results once the draw image is
     added there). Hues follow the existing courtGrid draw images. */
  --draw-single: #c0392b;
  --draw-single-cons: #4f7a55;
  --draw-cons: #2f6b3a;
  --draw-double: #6f9a74;
  --draw-rr: #cc6600;
  --draw-pool: #7a2e7a;
  --draw-playoff: #1f2a6b;
  --draw-qualifier: #a61b1b;
  --draw-olympic-blue: #1d63d8;
  --draw-olympic-red: #d92020;
  --draw-triple-gold: #c9a400;
  --draw-triple-silver: #9aa0a8;
  --draw-triple-bronze: #b8732f;
  --link: var(--ink);
  --link-hover: var(--brand);

  --font-body: Arial, Helvetica, sans-serif;
  --icon-font: "R2 Icons", "Font Awesome 6 Free", "Font Awesome 6 Pro";

  --page-max: 1160px;
  --gutter: 24px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-pill: 9999px;
  --shadow-card: 0 1px 2px rgba(20, 22, 26, 0.04);

  /* Scene (event banner background). Variants override these. */
  --scene-image: none;
  --scene-position: 75% 15%;
  --scene-overlay: linear-gradient(90deg, #17191e 0%, rgba(23, 25, 30, 0.94) 38%, rgba(23, 25, 30, 0.15) 78%);

  /* R2 wordmark for the utility bar (complete SVG URI token) */
  --brand-wordmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='30' viewBox='0 0 150 30'%3E%3Ctext x='0' y='25' font-family='Arial,Helvetica,sans-serif' font-size='29' font-weight='900' font-style='italic' letter-spacing='-2' fill='%23202126'%3ER%3Ctspan fill='%23bd2039'%3E2%3C/tspan%3E%3C/text%3E%3Ctext x='40' y='24' font-family='Arial,Helvetica,sans-serif' font-size='19' font-weight='900' font-style='italic' letter-spacing='-0.8' fill='%23202126'%3ESPORTS%3C/text%3E%3Cpath d='M128 7h4l-4 18h-4z' fill='%23bd2039'/%3E%3C/svg%3E");
}


/* ---------------------------------------------------------------------
   C01 · 2. ICON FONT (fix for icons showing as small squares)
   Every page loads the Font Awesome Kit (inc_styleSheets.asp), which draws
   the <i> icons. Only the homepage also loads the Font Awesome 6.4.0 CSS
   (incWeb_home.asp), and that CSS is what supplies the icon FONT used by
   the theme's CSS-drawn icons (map pin, card icons, envelope). Without it
   those icons render as empty squares on inner pages. This loads the same
   6.4.0 solid font directly, under its own name, on every page.
   --------------------------------------------------------------------- */
@font-face {
  font-family: "R2 Icons";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2") format("woff2"),
       url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.ttf") format("truetype");
}


/* ---------------------------------------------------------------------
   C02 · 1. PAGE SHELL + TYPOGRAPHY RESET (public wrapper only)
   The /website/ doctype puts browsers in quirks mode, where tables do
   not inherit font size — so inheritance is restored explicitly.
   --------------------------------------------------------------------- */
body:has(> table.main-site-wrapper) {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 15px/1.55 var(--font-body);
}

table.main-site-wrapper {
  width: 100%;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  font-family: var(--font-body);
}

/* The outer wrapper is a one-cell layout table. Shown as plain blocks so
   wide content can't stretch the whole page on phones. */
table.main-site-wrapper,
table.main-site-wrapper > tbody,
table.main-site-wrapper > tbody > tr,
table.main-site-wrapper > tbody > tr > td {
  display: block;
  width: 100%;
}

table.main-site-wrapper table {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

table.main-site-wrapper p,
table.main-site-wrapper h1,
table.main-site-wrapper h2,
table.main-site-wrapper h3 {
  font-family: var(--font-body);
}

table.main-site-wrapper p {
  font-size: inherit;
}

table.main-site-wrapper a:link,
table.main-site-wrapper a:visited {
  color: var(--link);
}

table.main-site-wrapper a:hover {
  color: var(--link-hover);
}

table.main-site-wrapper a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* 1b. Pages that skip the shared wrapper table.
   contact-director.asp wraps everything in <table width="750"
   cellpadding="3" bgcolor="#FFFFFF"> with no class, which squeezed the
   banner, menu, sponsors and footer into 750px and left links in default
   blue. These rules give that wrapper the same treatment as
   table.main-site-wrapper. Scoped to pages showing the new banner. */
body:has(#topMenu1 > table) {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 15px/1.55 var(--font-body);
}

body > table:not(.main-site-wrapper):has(#topMenu1 > table),
body > table:not(.main-site-wrapper):has(#topMenu1 > table) > tbody,
body > table:not(.main-site-wrapper):has(#topMenu1 > table) > tbody > tr,
body > table:not(.main-site-wrapper):has(#topMenu1 > table) > tbody > tr > td {
  display: block;
  width: 100%;
  padding: 0;
  background: transparent;
}

body > table:not(.main-site-wrapper):has(#topMenu1 > table) {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  font-family: var(--font-body);
}

body > table:not(.main-site-wrapper):has(#topMenu1 > table) table {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* :where() keeps these as weak as the main-site-wrapper link rules */
:where(body > table:not(.main-site-wrapper):has(#topMenu1 > table)) a:link,
:where(body > table:not(.main-site-wrapper):has(#topMenu1 > table)) a:visited {
  color: var(--link);
}

:where(body > table:not(.main-site-wrapper):has(#topMenu1 > table)) a:hover {
  color: var(--link-hover);
}

/* Masthead holder table: let it span the page */
table:has(> tbody > tr > td#mastHead > #topMenu1 > table) {
  width: 100%;
  border-collapse: collapse;
}

td#mastHead:has(> #topMenu1 > table) {
  padding: 0;
}


/* ---------------------------------------------------------------------
   C02 · 2. MASTHEAD → UTILITY BAR + EVENT BANNER
   #topMenu1:has(> table) table row (logo | event text | buttons) becomes a grid:
     row 1: buttons cell, full width, white utility bar
     row 2: logo + event title/dates on the dark scene banner
   --------------------------------------------------------------------- */
#topMenu1:has(> table) {
  position: relative;
  background-color: var(--hero);
  background-image: var(--scene-overlay), var(--scene-image);
  background-size: cover;
  background-position: var(--scene-position);
  background-repeat: no-repeat;
  color: var(--on-hero);
  text-align: left;
  border-bottom: 4px solid var(--brand);
}

#topMenu1:has(> table) td {
  text-align: left;
}

#topMenu1:has(> table) > table,
#topMenu1:has(> table) > table > tbody {
  display: block;
  width: 100%;
}

#topMenu1:has(> table) > table > tbody > tr {
  display: grid;
  grid-template-columns:
    minmax(var(--gutter), 1fr)
    auto
    minmax(0, calc(var(--page-max) - 130px))
    minmax(var(--gutter), 1fr);
}

/* 2a. Utility bar (Director Login / Support / organisation link) */
#topMenu1:has(> table) td[width="300"] {
  grid-column: 1 / -1;
  grid-row: 1;
  width: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 0 max(var(--gutter), calc((100% - var(--page-max)) / 2));
  background: var(--surface);
  color: var(--secondary);
  border-bottom: 1px solid var(--border);
}

#topMenu1:has(> table) td[width="300"]::before {
  content: "";
  flex: 0 0 150px;
  height: 30px;
  margin-right: auto;
  background: var(--brand-wordmark) no-repeat left center;
}

#topMenu1:has(> table) .masthead-horizontal-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px 22px;
}

#topMenu1:has(> table) a.masthead-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: var(--secondary);
  white-space: nowrap;
}

#topMenu1:has(> table) a.masthead-menu-btn:hover {
  color: var(--brand);
}

#topMenu1:has(> table) a.masthead-menu-btn i {
  color: var(--brand);
  margin-right: 0;
}

#topMenu1:has(> table) a.masthead-menu-btn img {
  height: 20px;
  width: auto;
}

/* 2b. Event logo cell (compact banner, 10-19 meeting) */
#topMenu1:has(> table) td[width="150"] {
  grid-column: 2;
  grid-row: 2;
  width: auto;
  align-self: center;
  padding: 18px 20px 18px 0;
}

#topMenu1:has(> table) td[width="150"] > div {
  text-align: left;
}

#topMenu1:has(> table) td[width="150"]:not(:has(img)) {
  display: none;
}

#topMenu1:has(> table) td[width="150"] img {
  display: block;
  width: 64px;
  height: auto;
  max-height: 72px;
  object-fit: contain;
  background: var(--surface);
  padding: 4px;
  border-radius: var(--radius-sm);
}

/* 2c. Event title, dates and location */
#topMenu1:has(> table) td[valign="middle"]:not([width]) {
  grid-column: 3;
  grid-row: 2;
  align-self: center;
  min-width: 0;
}

#topMenu1:has(> table) td[valign="middle"]:not([width]) > table,
#topMenu1:has(> table) td[valign="middle"]:not([width]) > table > tbody,
#topMenu1:has(> table) td[valign="middle"]:not([width]) > table > tbody > tr {
  display: block;
  width: 100%;
}

#topMenu1:has(> table) td[valign="middle"]:not([width]) > table {
  margin: 20px 0 22px -15px;
}

#topMenu1:has(> table) td[valign="middle"]:not([width]) > table > tbody > tr > td {
  display: block;
  padding: 0;
}

/* Spacer / empty search cells (search + translate only render on port 80) */
#topMenu1:has(> table) td[valign="middle"]:not([width]) td[width="4"],
#topMenu1:has(> table) td[valign="middle"]:not([width]) td[align="right"]:not(:has(*)) {
  display: none;
}

/* Event type + name + sport: compact title (10-19 meeting: "a lot smaller") */
#topMenu1:has(> table) td > h1:first-child,
#topMenu1:has(> table) td > h2:first-child {
  margin: 0 0 8px;
  max-width: 900px;
  color: var(--on-hero);
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

/* Long names (over 70 characters) arrive as h2: step down one size */
#topMenu1:has(> table) td > h2:first-child {
  font-size: clamp(20px, 2vw, 26px);
}

#topMenu1:has(> table) td > h1 + h2,
#topMenu1:has(> table) td > h2 + h2 {
  margin: 0;
  max-width: 820px;
  color: var(--on-hero);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
}

#topMenu1:has(> table) td > h1 + h2::before,
#topMenu1:has(> table) td > h2 + h2::before {
  content: "\f133";
  font-family: var(--icon-font);
  font-weight: 900;
  color: var(--brand);
  margin-right: 10px;
}


/* ---------------------------------------------------------------------
   C02 · 3. EVENT NAVIGATION (#mainMenu1, new template only)
   Every conditional item still comes from the ASP. Register / Vote /
   Join share register.asp, so one rule styles all three as the action.
   --------------------------------------------------------------------- */
div:not(#siteMenu):has(> #mainMenu1) {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  text-align: left;
}

:not(#siteMenu) > #mainMenu1 {
  width: calc(100% - (var(--gutter) * 2));
  max-width: var(--page-max);
  margin: 0 auto;
}

:not(#siteMenu) > #mainMenu1 ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

:not(#siteMenu) > #mainMenu1 li {
  margin: 0;
  padding: 0;
}

:not(#siteMenu) > #mainMenu1 li > a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 54px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* Current page marker — homepage only for now (other pages need their own page hook) */
body:has(#mainHome) :not(#siteMenu) > #mainMenu1 li:first-child > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--brand);
}

:not(#siteMenu) > #mainMenu1 li:has(> a[href*="register.asp"]) {
  order: 99;
  margin-left: auto;
}

td#mastHead :not(#siteMenu) > #mainMenu1 a[href*="register.asp"] {
  min-height: 38px;
  margin: 8px 0;
  padding: 0 16px;
  gap: 12px;
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--radius-xs);
}

td#mastHead :not(#siteMenu) > #mainMenu1 a[href*="register.asp"]:hover {
  background: var(--brand-hover);
  color: var(--on-brand);
}

td#mastHead :not(#siteMenu) > #mainMenu1 a[href*="register.asp"]::after {
  content: "\f061";
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 12px;
}


/* ---------------------------------------------------------------------
   C03 · 1. HOMEPAGE FRAME (#mainHome)
   --------------------------------------------------------------------- */
#mainHome {
  width: calc(100% - (var(--gutter) * 2));
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 36px 0 0;
  text-align: left;
}

#mainHome > table,
#mainHome > table > tbody,
#mainHome > table > tbody > tr,
#mainHome > table > tbody > tr > td {
  display: block;
  width: auto;
  padding: 0;
}

/* Layout <br> spacers between sections (not director content) */
#mainHome > table > tbody > tr > td > br,
#showcase > br {
  display: none;
}


/* ---------------------------------------------------------------------
   C03 · 2. WELCOME PANEL (#showcase — director's own content + logo)
   --------------------------------------------------------------------- */
#showcase {
  margin: 0 0 28px;
  padding: 28px 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

#showcase > table,
#showcase > table > tbody {
  display: block;
  width: 100%;
}

#showcase > table > tbody > tr {
  display: block;
}

#showcase > table > tbody > tr > td {
  display: block;
  padding: 0;
}

/* Intro row: text | (ladder rankings) | logo */
#showcase > table > tbody > tr[valign="top"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: start;
}

#showcase > table > tbody > tr[valign="top"]:has(> td:nth-child(3)) {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) auto;
}

#showcase > table > tbody > tr + tr {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

#showcase p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.7;
}

#showcase p:empty {
  display: none;
}

#showcase font[size="1"] {
  font-size: 12px;
}

#showcase font[size="2"] {
  font-size: 14px;
}

#showcase a:link,
#showcase a:visited {
  color: var(--brand);
}

#showcase td[width="40%"] {
  width: auto;
}

#showcase td[width="40%"] img {
  display: block;
  width: 260px;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-xs);
}

#showcase iframe {
  max-width: 100%;
}

/* Challenge-ladder "Current Rankings" cell */
#showcase > table > tbody > tr[valign="top"] > td:has(ul) {
  padding: 16px 18px;
  background: var(--soft);
  border-radius: var(--radius-xs);
  font-size: 13px;
}

#showcase > table > tbody > tr[valign="top"] > td:has(ul) > strong {
  display: block;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
}

#showcase > table > tbody > tr[valign="top"] > td:has(ul) > br {
  display: none;
}

#showcase > table > tbody > tr[valign="top"] > td:has(ul) font {
  font-size: 14px;
}

#showcase > table > tbody > tr[valign="top"] > td:has(ul) li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

#showcase > table > tbody > tr[valign="top"] > td:has(ul) li a {
  font-weight: 600;
  text-decoration: none;
}


/* ---------------------------------------------------------------------
   C03 · 3. TWO MAIN COLUMNS
   The table holding #banner-ad has three 50% cells. Columns 1 and 2
   become a grid; the advertising cell moves below (and collapses
   when the ad slot is empty).
   --------------------------------------------------------------------- */
#mainHome table:has(> tbody > tr > td > #banner-ad),
#mainHome table:has(> tbody > tr > td > #banner-ad) > tbody {
  display: block;
  width: 100%;
}

#mainHome table:has(> tbody > tr > td > #banner-ad) > tbody > tr {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

#mainHome table:has(> tbody > tr > td > #banner-ad) > tbody > tr > td {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
  width: auto;
  padding: 0;
}

#mainHome td:has(> #banner-ad) {
  grid-column: 1 / -1;
}

#mainHome td:has(> #banner-ad:empty) {
  display: none;
}


/* ---------------------------------------------------------------------
   C03 · 4. SECTION CARDS (every #home-info block)
   --------------------------------------------------------------------- */
/* Homepage boxes carry the red top line, same as the map and hotel cards
   (4th 10-19 meeting) */
#mainHome #home-info {
  --card-icon: "\f05a";
  margin: 0;
  padding: 24px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  font-size: 14px;
  color: var(--ink);
}

#mainHome #home-info > h1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.3px;
}

#mainHome #home-info > h1::before {
  content: var(--card-icon);
  flex: 0 0 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 16px;
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: var(--radius-xs);
}

#mainHome #home-info > li {
  position: relative;
  display: block;
  margin: 0;
  padding: 13px 26px 13px 0;
  list-style: none;
  border-top: 1px solid var(--border);
  line-height: 1.5;
}

#mainHome #home-info > li > br {
  display: none;
}

#mainHome #home-info > li > a:first-child {
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

#mainHome #home-info > li > a:first-child::after {
  content: "\f061";
  position: absolute;
  right: 2px;
  top: 15px;
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 12px;
  color: var(--muted);
}

#mainHome #home-info > li > a:first-child:hover::after {
  color: var(--brand);
}

#mainHome #home-info #home-info-p {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--secondary);
}

#mainHome #home-info #home-info-p > a:has(> img) + br {
  display: none;
}

#mainHome #home-info #home-info-p img {
  display: block;
  margin: 6px 0;
  max-width: 100px;
  height: auto;
}

/* Card icons, chosen by the links each card already contains */
#mainHome #home-info:has(> li > a[href^="participants.asp"]) { --card-icon: "\f0c0"; }
#mainHome #home-info:has(> li > a[href^="division-list.asp"]) { --card-icon: "\f0e8"; }
#mainHome #home-info:has(> li > a[href^="contact-director.asp"]) { --card-icon: "\f05a"; }
#mainHome #home-info:has(a[href^="starting-times.asp"]) { --card-icon: "\f017"; }
#mainHome #home-info:has(#modernSocialBar) { --card-icon: "\f1e0"; }
#mainHome #home-info:has(> li > table) { --card-icon: "\f15c"; }


/* ---------------------------------------------------------------------
   C03 · 5. REGISTRATION CARD (open registration or waiting list)
   Text, link destinations and Vote/enter wording all remain the ASP's.
   --------------------------------------------------------------------- */
#mainHome #home-info:has(> li > table) {
  border-top: 3px solid var(--brand);
}

#mainHome #home-info:has(> li > table) > li {
  padding: 0;
  border-top: 0;
  font-size: 15px;
  line-height: 1.7;
}

#mainHome #home-info > li > table,
#mainHome #home-info > li > table > tbody,
#mainHome #home-info > li > table > tbody > tr,
#mainHome #home-info > li > table > tbody > tr > td {
  display: block;
  width: auto;
}

#mainHome #home-info > li > table div[align="center"] {
  text-align: left;
}

/* The old "Enter Now" GIF repeats the same link as the button: hidden here, see review question 2 */
#mainHome #home-info > li > table td[width="36%"] {
  display: none;
}

/* Primary action buttons */
#mainHome #home-info #home-info-p > a[href^="register.asp"],
#mainHome #home-info #home-info-p > a[href^="event-user-list.asp"],
#mainHome #home-info #home-info-p > a[href^="starting-times.asp"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-sizing: border-box;
  min-height: 44px;
  margin-top: 14px;
  padding: 9px 18px;
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--radius-xs);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

#mainHome #home-info #home-info-p > a[href^="starting-times.asp"] {
  background: var(--hero);
}

#mainHome #home-info #home-info-p > a[href^="register.asp"]:hover,
#mainHome #home-info #home-info-p > a[href^="event-user-list.asp"]:hover {
  background: var(--brand-hover);
  color: var(--on-brand);
}

#mainHome #home-info #home-info-p > a[href^="starting-times.asp"]:hover {
  background: var(--secondary);
  color: var(--on-brand);
}

#mainHome #home-info #home-info-p > a[href^="register.asp"]::after,
#mainHome #home-info #home-info-p > a[href^="event-user-list.asp"]::after,
#mainHome #home-info #home-info-p > a[href^="starting-times.asp"]::after {
  content: "\f061";
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 14px;
}

#mainHome #home-info #home-info-p > a font {
  color: inherit;
  font-size: inherit;
}

/* Starting-times notice */
#mainHome #home-info:has(a[href^="starting-times.asp"]) > li {
  padding-right: 0;
  border-top: 0;
}


/* ---------------------------------------------------------------------
   C03 · 6. PARTICIPANTS CARD — entry list button + directory grid
   --------------------------------------------------------------------- */
#mainHome #home-info:has(> li > a[href^="participants.asp"]) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
}

#mainHome #home-info:has(> li > a[href^="participants.asp"]) > * {
  grid-column: 1 / -1;
}

#mainHome #home-info:has(> li > a[href^="participants.asp"]) > li:has(> a[href^="participants-"]),
#mainHome #home-info:has(> li > a[href^="participants.asp"]) > li:has(> a[href^="individual-stats.asp"]) {
  grid-column: auto;
  padding: 11px 22px 11px 0;
  font-size: 14px;
}

#mainHome #home-info > li:has(> a[href^="participants-"]) > a:first-child,
#mainHome #home-info > li:has(> a[href^="individual-stats.asp"]) > a:first-child {
  font-size: 14px;
  font-weight: 500;
  color: var(--secondary);
}

#mainHome #home-info > li:has(> a[href^="participants-"]) > a:first-child::after {
  top: 13px;
}

/* "Event Entry List": description first, then a dark button */
#mainHome #home-info > li:has(> a[href^="participants.asp"]) {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 0 12px;
  border-top: 0;
}

#mainHome #home-info > li:has(> a[href^="participants.asp"]) > #home-info-p {
  order: -1;
  margin-top: 0;
  font-size: 14px;
}

table.main-site-wrapper #mainHome #home-info > li > a[href^="participants.asp"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  min-height: 44px;
  padding: 9px 18px;
  background: var(--hero);
  color: var(--on-hero);
  border-radius: var(--radius-xs);
}

table.main-site-wrapper #mainHome #home-info > li > a[href^="participants.asp"]:hover {
  background: var(--secondary);
}

#mainHome #home-info > li > a[href^="participants.asp"]::after {
  position: static;
  color: var(--on-hero);
}


/* ---------------------------------------------------------------------
   C03 · 7. BRACKETS & RESULTS CARD — feature rows with icons
   --------------------------------------------------------------------- */
#mainHome #home-info:has(> li > a[href^="division-list.asp"]) > li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  min-height: 40px;
}

#mainHome #home-info:has(> li > a[href^="division-list.asp"]) > li::before {
  content: var(--row-icon, "\f054");
  grid-row: 1 / span 2;
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 17px;
  color: var(--secondary);
}

#mainHome #home-info:has(> li > a[href^="division-list.asp"]) > li > * {
  grid-column: 2;
}

#mainHome #home-info > li:has(> a[href^="division-list.asp"]) { --row-icon: "\f0e8"; }
#mainHome #home-info > li:has(> a[href^="event-results.asp"]) { --row-icon: "\f091"; }
#mainHome #home-info > li:has(> a[href^="match-reporting.asp"]) { --row-icon: "\f1ea"; }

#mainHome #home-info:has(> li > a[href^="division-list.asp"]) > li > a:first-child::after {
  top: 50%;
  margin-top: -8px;
}


/* ---------------------------------------------------------------------
   C03 · 8. EVENT INFORMATION CARD — two-column tiles
   --------------------------------------------------------------------- */
#mainHome #home-info:has(> li > a[href^="contact-director.asp"]) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#mainHome #home-info:has(> li > a[href^="contact-director.asp"]) > h1 {
  grid-column: 1 / -1;
  margin-bottom: 4px;
}

#mainHome #home-info:has(> li > a[href^="contact-director.asp"]) > li {
  padding: 12px 30px 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
}

#mainHome #home-info:has(> li > a[href^="contact-director.asp"]) > li:hover {
  background: var(--soft);
}

#mainHome #home-info:has(> li > a[href^="contact-director.asp"]) > li > a:first-child {
  font-size: 14px;
}

#mainHome #home-info:has(> li > a[href^="contact-director.asp"]) > li > a:first-child::after {
  right: 12px;
  top: 14px;
}

#mainHome #home-info:has(> li > a[href^="contact-director.asp"]) #home-info-p {
  font-size: 12px;
}


/* ---------------------------------------------------------------------
   C03 · 9. LIVE MATCHES CARD (only when matches are on court)
   Timer inputs keep their visibility lock; values come from the
   existing java_liveMatches.js.
   --------------------------------------------------------------------- */
form[name="form3"]:has(> .live-match-card-wrapper) {
  margin: 0;
}

#mainHome #home-info.live-match-card-wrapper {
  --card-icon: "\f111";
  border-top: 3px solid var(--brand);
}

#mainHome #home-info.live-match-card-wrapper > h1::before {
  font-size: 11px;
}

#mainHome .live-match-single-card {
  width: 100%;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  border-collapse: separate;
  border-spacing: 0;
  padding: 8px 12px;
}

#mainHome .live-match-single-card[bgcolor="#DDFFFF" i] {
  background-color: var(--soft);
}

#mainHome .live-match-single-card[bgcolor="#FFFFFF" i] {
  background-color: var(--surface);
}

#mainHome .live-match-single-card td {
  padding: 3px 0;
}

#mainHome .live-match-single-card p {
  margin: 0;
}

#mainHome .live-match-single-card font[size="1"] {
  font-size: 13px;
}

#mainHome .live-match-single-card font[color="#006600" i] {
  color: var(--brand);
}

#mainHome .live-match-single-card input[type="text"] {
  width: 76px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
  font: 600 13px var(--font-body);
  -webkit-text-fill-color: var(--ink) !important;
  opacity: 1 !important;
}

#mainHome .live-match-card-wrapper > hr {
  height: 0;
  margin: 10px 0;
  border: 0;
}


/* ---------------------------------------------------------------------
   C03 · 10. SOCIAL MEDIA CARD
   --------------------------------------------------------------------- */
#modernSocialBar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

table.main-site-wrapper #modernSocialBar a.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}

table.main-site-wrapper #modernSocialBar a.social-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}

#modernSocialBar a.social-btn i {
  color: var(--brand);
}


/* ---------------------------------------------------------------------
   C02 · 4. SPONSORS (body:has(#topMenu1 > table) #sponsors)
   --------------------------------------------------------------------- */
/* Sponsor block: no background or border of its own (4th 10-19
   meeting); only the sponsor tiles inside keep their white box and
   border. It is sized to the tiles and centred, like the hotel and map
   cards. Hidden entirely when there are no sponsors or ad images, e.g. on
   the Sponsors page, where the include prints an empty frame, or when an
   ad slot loads nothing. Width is set in the page frame rule (C04 · 1). */
body:has(#topMenu1 > table) #sponsors {
  box-sizing: border-box;
  margin-top: 36px;
  margin-bottom: 32px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
}

body:has(#topMenu1 > table) #sponsors:not(:has(table[width="181"], .bottom-sponsor-ads img, .bottom-sponsor-ads iframe)) {
  display: none;
}

/* Label: rounded pill, centred (10-19 meeting: "more circular") */
body:has(#topMenu1 > table) #sponsors::before {
  content: "EVENT SPONSORS";
  display: table;
  border-collapse: separate;
  margin: 0 auto 18px;
  padding: 7px 16px;
  background: var(--brand-soft);
  border: 1px solid var(--brand);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1.6px;
  color: var(--brand);
}

body:has(#topMenu1 > table) #sponsors > table,
body:has(#topMenu1 > table) #sponsors > table > tbody,
body:has(#topMenu1 > table) #sponsors > table > tbody > tr,
body:has(#topMenu1 > table) #sponsors > table > tbody > tr > td {
  display: block;
  width: auto;
}

/* Old "SPONSORS" GIF label, replaced by the heading above (review question 2) */
body:has(#topMenu1 > table) #sponsors > table > tbody > tr > td[rowspan] {
  display: none;
}

body:has(#topMenu1 > table) #sponsors > table > tbody > tr > td > br {
  display: none;
}

body:has(#topMenu1 > table) #sponsors td[height],
body:has(#topMenu1 > table) #sponsors table[width="181"] {
  height: auto;
}

body:has(#topMenu1 > table) #sponsors td[width="700"] > table,
body:has(#topMenu1 > table) #sponsors td[width="700"] > table > tbody {
  display: block;
  width: 100%;
}

/* Condensed tiles in a centred row that wraps; the box sizes to them */
body:has(#topMenu1 > table) #sponsors td[width="700"] > table > tbody > tr {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

body:has(#topMenu1 > table) #sponsors td[width="700"] > table > tbody > tr > td {
  flex: 0 0 176px;
  box-sizing: border-box;
  display: block;
}

body:has(#topMenu1 > table) #sponsors table[width="181"] {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  overflow: hidden;
}

body:has(#topMenu1 > table) #sponsors table[width="181"] tr[bgcolor="#000000"] {
  background-color: transparent;
}

body:has(#topMenu1 > table) #sponsors table[width="181"] td[bgcolor="#FFFFFF" i] {
  background-color: var(--surface);
  padding: 8px 10px;
}

body:has(#topMenu1 > table) #sponsors table[width="181"] font[size="2"] {
  font-size: 10px;
  letter-spacing: 1.2px;
  color: var(--muted);
}

body:has(#topMenu1 > table) #sponsors table[width="181"] a {
  text-decoration: none;
}

body:has(#topMenu1 > table) #sponsors table[width="181"] img {
  display: block;
  width: 100%;
  max-width: 140px;
  max-height: 90px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

body:has(#topMenu1 > table) #sponsors table.bottom-sponsor-ads:not(:has(img, iframe, ins, object)) {
  display: none;
}


/* ---------------------------------------------------------------------
   C02 · 5. FOOTER (body:has(#topMenu1 > table) #footer link groups + body:has(#topMenu1 > table) #footer-2 copyright)
   --------------------------------------------------------------------- */
/* Compact footer (2nd 10-19 meeting): about half the old height; link
   colours set here directly so they never fall back to default blue. */
body:has(#topMenu1 > table) #footer {
  --link: var(--footer-link);
  --link-hover: var(--on-hero);
  margin-top: 32px;
  padding: 26px max(var(--gutter), calc((100% - var(--page-max)) / 2)) 14px;
  background: var(--hero);
  color: var(--hero-secondary);
  text-align: left;
}

body:has(#topMenu1 > table) #footer table,
body:has(#topMenu1 > table) #footer tbody,
body:has(#topMenu1 > table) #footer tr,
body:has(#topMenu1 > table) #footer td {
  display: block;
  width: auto;
  padding: 0;
}

body:has(#topMenu1 > table) #footer > table > tbody > tr > td > table > tbody {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px 24px;
}

body:has(#topMenu1 > table) #footer > table > tbody > tr > td > table > tbody > tr {
  display: contents;
}

body:has(#topMenu1 > table) #footer h1 {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--hero-secondary);
}

body:has(#topMenu1 > table) #footer h3 {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--on-hero);
}

body:has(#topMenu1 > table) #footer p {
  margin: 0 0 4px;
  font-size: 12.5px;
  line-height: 1.4;
}

body:has(#topMenu1 > table) #footer a:link,
body:has(#topMenu1 > table) #footer a:visited,
body:has(#topMenu1 > table) #footer-2 a:link,
body:has(#topMenu1 > table) #footer-2 a:visited {
  color: var(--footer-link);
  text-decoration: none;
}

body:has(#topMenu1 > table) #footer a:hover,
body:has(#topMenu1 > table) #footer-2 a:hover {
  color: var(--on-hero);
  text-decoration: underline;
}

body:has(#topMenu1 > table) #footer a:focus-visible,
body:has(#topMenu1 > table) #footer-2 a:focus-visible {
  outline: 2px solid var(--on-hero);
  outline-offset: 2px;
}

body:has(#topMenu1 > table) #footer-2 {
  --link: var(--hero-secondary);
  --link-hover: var(--on-hero);
  padding: 10px max(var(--gutter), calc((100% - var(--page-max)) / 2));
  background: var(--hero-deep);
  color: var(--hero-secondary);
  text-align: left;
}

body:has(#topMenu1 > table) #footer-2 > table {
  width: 100%;
}

body:has(#topMenu1 > table) #footer-2 p {
  margin: 0;
  font-size: 12px;
}

body:has(#topMenu1 > table) #footer-2 p:empty {
  display: none;
}


/* ---------------------------------------------------------------------
   C02 · 6. OLDER FOOTER (footerAdsLinks.asp + footerLinks.asp)
   Used by event-prizes.asp and several format pages. No ids, so it's
   found by its navy "Visit our Event Sponsors Above" cell (#000066).
   Shown as the same compact dark footer as #footer: the navy line is
   replaced by an "Important links" label, links are light grey, and the
   copyright paragraph becomes the darker bottom strip.
   --------------------------------------------------------------------- */
body:has(#topMenu1 > table) table[width="100%"]:has(> tbody > tr > td[bgcolor="#000066" i]) {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-top: 32px;
  padding: 24px max(var(--gutter), calc((100% - var(--page-max)) / 2)) 18px;
  background: var(--hero);
  color: var(--hero-secondary);
  text-align: left;
}

body:has(#topMenu1 > table) table[width="100%"]:has(> tbody > tr > td[bgcolor="#000066" i])::before {
  content: "IMPORTANT LINKS";
  display: block;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--hero-secondary);
}

body:has(#topMenu1 > table) table[width="100%"]:has(> tbody > tr > td[bgcolor="#000066" i]) :is(tbody, tr, td, table) {
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  background: none;
}

body:has(#topMenu1 > table) table[width="100%"]:has(> tbody > tr > td[bgcolor="#000066" i]) tr:has(> td[bgcolor="#000066" i]) {
  display: none;
}

body:has(#topMenu1 > table) table[width="100%"]:has(> tbody > tr > td[bgcolor="#000066" i]) div[align="center"] {
  text-align: left;
}

body:has(#topMenu1 > table) table[width="100%"]:has(> tbody > tr > td[bgcolor="#000066" i]) font[size="1"] {
  font-size: 12.5px;
  line-height: 2;
  color: var(--hero-secondary);
}

body:has(#topMenu1 > table) table[width="100%"]:has(> tbody > tr > td[bgcolor="#000066" i]) a:link,
body:has(#topMenu1 > table) table[width="100%"]:has(> tbody > tr > td[bgcolor="#000066" i]) a:visited,
:is(body:has(#topMenu1 > table) .main-site-wrapper > tbody > tr > td > p[align="center"]:has(> font[size="1"] > a), body:has(#topMenu1 > table) table[width="100%"]:has(> tbody > tr > td[bgcolor="#000066" i]) + p[align="center"]) a:link,
:is(body:has(#topMenu1 > table) .main-site-wrapper > tbody > tr > td > p[align="center"]:has(> font[size="1"] > a), body:has(#topMenu1 > table) table[width="100%"]:has(> tbody > tr > td[bgcolor="#000066" i]) + p[align="center"]) a:visited {
  color: var(--footer-link);
  text-decoration: none;
}

body:has(#topMenu1 > table) table[width="100%"]:has(> tbody > tr > td[bgcolor="#000066" i]) a:hover,
:is(body:has(#topMenu1 > table) .main-site-wrapper > tbody > tr > td > p[align="center"]:has(> font[size="1"] > a), body:has(#topMenu1 > table) table[width="100%"]:has(> tbody > tr > td[bgcolor="#000066" i]) + p[align="center"]) a:hover {
  color: var(--on-hero);
  text-decoration: underline;
}

/* Copyright paragraph (footerLinks.asp) as the bottom strip */
:is(body:has(#topMenu1 > table) .main-site-wrapper > tbody > tr > td > p[align="center"]:has(> font[size="1"] > a), body:has(#topMenu1 > table) table[width="100%"]:has(> tbody > tr > td[bgcolor="#000066" i]) + p[align="center"]) {
  margin: 0;
  padding: 12px max(var(--gutter), calc((100% - var(--page-max)) / 2));
  background: var(--hero-deep);
  color: var(--hero-secondary);
  text-align: left;
}

:is(body:has(#topMenu1 > table) .main-site-wrapper > tbody > tr > td > p[align="center"]:has(> font[size="1"] > a), body:has(#topMenu1 > table) table[width="100%"]:has(> tbody > tr > td[bgcolor="#000066" i]) + p[align="center"]) > br:first-child,
:is(body:has(#topMenu1 > table) .main-site-wrapper > tbody > tr > td > p[align="center"]:has(> font[size="1"] > a), body:has(#topMenu1 > table) table[width="100%"]:has(> tbody > tr > td[bgcolor="#000066" i]) + p[align="center"]) br + br {
  display: none;
}

:is(body:has(#topMenu1 > table) .main-site-wrapper > tbody > tr > td > p[align="center"]:has(> font[size="1"] > a), body:has(#topMenu1 > table) table[width="100%"]:has(> tbody > tr > td[bgcolor="#000066" i]) + p[align="center"]) font {
  font-size: 12px;
  line-height: 1.8;
  color: inherit;
}

/* ---------------------------------------------------------------------
   RESPONSIVE · 1. TABLET (≤ 980px)
   --------------------------------------------------------------------- */
@media (max-width: 980px) {
  #mainHome #home-info:has(> li > a[href^="contact-director.asp"]) {
    grid-template-columns: minmax(0, 1fr);
  }

  body:has(#topMenu1 > table) #footer > table > tbody > tr > td > table > tbody {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  :not(#siteMenu) > #mainMenu1 ul {
    gap: 0 18px;
  }

  :not(#siteMenu) > #mainMenu1 li > a {
    min-height: 46px;
  }
}

/* ---------------------------------------------------------------------
   RESPONSIVE · 2. NARROW TABLET (≤ 820px) — one column
   --------------------------------------------------------------------- */
@media (max-width: 820px) {
  #mainHome table:has(> tbody > tr > td > #banner-ad) > tbody > tr {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  #showcase > table > tbody > tr[valign="top"],
  #showcase > table > tbody > tr[valign="top"]:has(> td:nth-child(3)) {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  #mainHome #home-info:has(> li > a[href^="contact-director.asp"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------------
   RESPONSIVE · 3. PHONE (≤ 600px)
   --------------------------------------------------------------------- */
@media (max-width: 600px) {
  :root {
    --gutter: 16px;
    --scene-overlay: linear-gradient(180deg, rgba(23, 25, 30, 0.72) 0%, rgba(23, 25, 30, 0.92) 100%);
  }

  #topMenu1:has(> table) td[width="300"] {
    flex-wrap: wrap;
    min-height: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 8px 12px;
  }

  #topMenu1:has(> table) td[width="300"]::before {
    flex-basis: 120px;
    height: 24px;
    background-size: contain;
  }

  #topMenu1:has(> table) .masthead-horizontal-menu {
    gap: 4px 14px;
  }

  #topMenu1:has(> table) a.masthead-menu-btn {
    font-size: 11px;
  }

  #topMenu1:has(> table) td[width="150"] {
    grid-column: 3;
    grid-row: 2;
    padding: 14px 0 0;
    align-self: start;
  }

  #topMenu1:has(> table) td[valign="middle"]:not([width]) {
    grid-row: 3;
  }

  #topMenu1:has(> table) td[width="150"] img {
    width: 44px;
  }

  #topMenu1:has(> table) td[valign="middle"]:not([width]) > table {
    margin: 10px 0 16px -15px;
  }

  #topMenu1:has(> table) td > h1:first-child,
  #topMenu1:has(> table) td > h2:first-child {
    font-size: 21px;
    letter-spacing: -0.3px;
  }

  #topMenu1:has(> table) td > h2:first-child {
    font-size: 19px;
  }

  #topMenu1:has(> table) td > h1 + h2,
  #topMenu1:has(> table) td > h2 + h2 {
    font-size: 12px;
  }

  :not(#siteMenu) > #mainMenu1 ul {
    gap: 0 16px;
    padding: 4px 0;
  }

  :not(#siteMenu) > #mainMenu1 li > a {
    min-height: 40px;
    font-size: 13px;
  }

  :not(#siteMenu) > #mainMenu1 li:has(> a[href*="register.asp"]) {
    margin-left: 0;
  }

  #mainHome {
    padding-top: 22px;
  }

  #showcase {
    padding: 20px;
  }

  #showcase td[width="40%"] img {
    width: 200px;
  }

  #mainHome #home-info {
    padding: 20px;
  }

  #mainHome #home-info > h1 {
    font-size: 19px;
  }

  #mainHome #home-info:has(> li > a[href^="contact-director.asp"]) {
    grid-template-columns: minmax(0, 1fr);
  }

  body:has(#topMenu1 > table) #footer > table > tbody > tr > td > table > tbody {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
  }
}

@media (max-width: 380px) {
  #mainHome #home-info:has(> li > a[href^="participants.asp"]) {
    grid-template-columns: minmax(0, 1fr);
  }

  body:has(#topMenu1 > table) #footer > table > tbody > tr > td > table > tbody {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media print {
  #topMenu1:has(> table) {
    background: none;
    color: var(--ink);
  }

  #topMenu1:has(> table) td > h1:first-child,
  #topMenu1:has(> table) td > h2:first-child,
  #topMenu1:has(> table) td > h1 + h2,
  #topMenu1:has(> table) td > h2 + h2 {
    color: var(--ink);
  }
}


/* =====================================================================
   C04+ · INNER PUBLIC PAGES
   Same tokens and shell as the homepage. Every selector targets a hook
   the page's own include already emits:
     event-info.asp ...... #event-info, .event-info-card, .location-card,
                           .contact-card, #event-info-text, span.event-info
     participants*.asp ... #participants-wrapper, #participants-title,
                           #participants-sort-table, #participants-list,
                           .player-name, form[name="form1"]
     division-list.asp ... #division-wrapper, #division-list-title, #divList,
                           td.divNameCell
     bracket.asp ......... #bracket-main-container (drawing in #drawTable is
                           NOT restyled: protected geometry)
     event-results.asp ... #results-section, #results-title
     register.asp ........ #registration, #title, #rules, #entry-steps
     event-hotel.asp / event-map.asp ... #hotel-section, #hotel-section-title,
                           #hotel-info, .hotel-*, #map_canvas
     event-sponsors.asp .. #sponsors-title, #sponsors-list, #sponsors-gold/-silver/-bronze
     contact-director.asp  table[bordercolor="#339966"] (page has no wrapper class)
     event-prizes.asp .... table[width="800"] with the #FFFF00 header row (no ids)
     divisions-fees.asp .. #divisions-fees
     match-reporting.asp . form[name=form1] > table[width=905] (yellow title row)
     media-report.asp .... form[name=form1] h1 > font[size=4] > strong
   ===================================================================== */


/* ---------------------------------------------------------------------
   C04 · 1. PAGE FRAME (shared by every inner page)
   --------------------------------------------------------------------- */
#event-info,
:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)),
#division-wrapper,
#bracket-main-container,
#results-section,
#hotel-section,
#sponsors-title,
#sponsors-list > table[width="950"],
#registration > form {
  width: calc(100% - (var(--gutter) * 2));
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 36px 0 8px;
  text-align: left;
  color: var(--ink);
}

/* Older participants template (seen live on event 31929): no
   #participants-wrapper; the page sits in table[width=1000] >
   table[width=1000px] > td. Release both tables so the td gets the frame. */
table:has(> tbody > tr > td > table > tbody > tr > td > :is(#participants-title, #participants-title-sorted)),
table:has(> tbody > tr > td > table > tbody > tr > td > :is(#participants-title, #participants-title-sorted)) > tbody,
table:has(> tbody > tr > td > table > tbody > tr > td > :is(#participants-title, #participants-title-sorted)) > tbody > tr,
table:has(> tbody > tr > td > table > tbody > tr > td > :is(#participants-title, #participants-title-sorted)) > tbody > tr > td,
table:has(> tbody > tr > td > :is(#participants-title, #participants-title-sorted)),
table:has(> tbody > tr > td > :is(#participants-title, #participants-title-sorted)) > tbody,
table:has(> tbody > tr > td > :is(#participants-title, #participants-title-sorted)) > tbody > tr {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

td:has(> #participants-title, > #participants-title-sorted) {
  display: block;
}

/* Sponsor box: as wide as its tiles, centred, never wider than the page */
body:has(#topMenu1 > table) #sponsors {
  width: fit-content;
  max-width: min(var(--page-max), calc(100% - (var(--gutter) * 2)));
  margin-left: auto;
  margin-right: auto;
}

/* 1a. Page titles: the ASP writes them in capitals; shown in sentence case */
#participants-title > h1,
#division-list-title > h1,
#results-title > h1,
#start-times-title > h1,
#hotel-section-title > h1,
#sponsors-title > h1,
#registration #title > h1 {
  margin: 0 0 22px;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.8px;
  color: var(--ink);
  text-transform: lowercase;
}

#participants-title > h1::first-letter,
#division-list-title > h1::first-letter,
#results-title > h1::first-letter,
#start-times-title > h1::first-letter,
#hotel-section-title > h1::first-letter,
#sponsors-title > h1::first-letter,
#registration #title > h1::first-letter {
  text-transform: uppercase;
}

/* 1b. Legacy inline sizes and colours inside page content */
:is(#event-info, :is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)), #division-wrapper, #results-section, #registration > form) font[size="1"] {
  font-size: 13px;
}

:is(#event-info, :is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)), #division-wrapper, #results-section, #registration > form) font[size="2"] {
  font-size: 14px;
}

:is(:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)), #division-wrapper, #results-section) font[color="#000066" i],
:is(:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)), #division-wrapper, #results-section) font[color="#FF6600" i] {
  color: inherit;
}

:is(#event-info, :is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)), #division-wrapper, #results-section, #hotel-section, #sponsors-list, #registration > form) a:link,
:is(#event-info, :is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)), #division-wrapper, #results-section, #hotel-section, #sponsors-list, #registration > form) a:visited {
  color: var(--brand);
}

/* 1c. Form controls (visibility locks kept) */
:is(:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)), #registration > form) select,
:is(:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)), #registration > form) input[type="text"],
:is(:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)), #registration > form) input[type="password"] {
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--ink);
  font: 15px var(--font-body);
  -webkit-text-fill-color: var(--ink) !important;
  opacity: 1 !important;
}

:is(:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)), #registration > form) select:focus-visible,
:is(:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)), #registration > form) input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}

:is(:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)), #registration > form) input[type="submit"] {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--hero);
  color: var(--on-hero);
  font: 700 14px var(--font-body);
  cursor: pointer;
}

:is(:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)), #registration > form) input[type="submit"]:hover {
  background: var(--secondary);
}

/* 1d. Current-page marker in the menu, per page */
body:has(#event-info) :not(#siteMenu) > #mainMenu1 a[href*="event-info.asp"]::after,
body:has(#participants-wrapper, #participants-title, #participants-title-sorted) :not(#siteMenu) > #mainMenu1 a[href*="participants.asp"]::after,
body:has(#division-wrapper) :not(#siteMenu) > #mainMenu1 a[href*="division-list.asp"]::after,
body:has(#bracket-main-container, #roundrobin-main-container, table[width="65"] td#divList) :not(#siteMenu) > #mainMenu1 a[href*="division-list.asp"]::after,
body:has(#results-section) :not(#siteMenu) > #mainMenu1 a[href*="event-results.asp"]::after,
body:has(#hotel-section):not(:has(#hotel-section td[colspan], #hotel-section img[src="nofile.gif"])) :not(#siteMenu) > #mainMenu1 a[href*="event-hotel.asp"]::after,
body:has(#hotel-section td[colspan], #hotel-section img[src="nofile.gif"]) :not(#siteMenu) > #mainMenu1 a[href*="event-map.asp"]::after,
body:has(#sponsors-title) :not(#siteMenu) > #mainMenu1 a[href*="event-sponsors.asp"]::after,
body:has(table[bordercolor="#339966" i]) :not(#siteMenu) > #mainMenu1 a[href*="contact-director.asp"]::after,
body:has(#divisions-fees) :not(#siteMenu) > #mainMenu1 a[href*="divisions-fees.asp"]::after,
body:has(form[name="form1"] > table[width="905"]) :not(#siteMenu) > #mainMenu1 a[href*="match-reporting.asp"]::after,
body:has(form[name="form1"] h1 > font[size="4"] > strong) :not(#siteMenu) > #mainMenu1 a[href*="match-reporting.asp"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--brand);
}


/* ---------------------------------------------------------------------
   C04 · 2. EVENT INFORMATION (#event-info)
   Source: incWeb_info.asp. One outer table row:
     td:first-child  = location card + #event-info-text (main column)
     td[width="3%"]  = spacer (hidden)
     td:last-child   = contact card + #banner-ad (side column)
   The main-column cell becomes display:contents so its cards and the
   side cell share one grid. That lets the side column stick on desktop
   and lets phones show Location → Contact → Details → Ad.
   Branches covered: tournament, challenge ladder (13), election (10,
   no location card), multi-venue, director-pasted HTML, filled ad slot,
   director/PRINT footer (footerNoLink.asp).
   --------------------------------------------------------------------- */
#event-info > table,
#event-info > table > tbody {
  display: block;
  width: 100%;
}

#event-info > table > tbody > tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  column-gap: 28px;
  align-items: start;
}

#event-info > table > tbody > tr > td {
  display: block;
  width: auto;
  min-width: 0;
}

#event-info > table > tbody > tr > td[width="3%"] {
  display: none;
}

/* 2-grid. Main column cell dissolves; its cards become grid items */
#event-info > table > tbody > tr > td:first-child {
  display: contents;
}

#event-info > table > tbody > tr > td:first-child > * {
  grid-column: 1;
  min-width: 0;
}

/* Side column spans every main-column row so the contact card can stick */
#event-info > table > tbody > tr > td:last-child {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
}

#event-info:has(.location-card) > table > tbody > tr > td:last-child {
  grid-row: 1 / span 2;
}

/* 10-20 reviews: red line on top of the location card, and red lines
   between all the information sections (were grey) */
#event-info .location-card {
  border-top: 3px solid var(--brand);
}

#event-info-text > h3:not(:first-child) {
  border-top: 2px solid var(--brand);
}

#event-info .event-info-card {
  margin: 0 0 22px;
  padding: 26px 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

/* 2a. Locations
   One tile per venue (tourneyClubName loop). A venue with no name
   (blank club record) is hidden; if no venue has a name, so is the card. */
#event-info .location-card > h1 {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--brand);
}

#event-info .location-card > table,
#event-info .location-card > table > tbody {
  display: block;
  width: 100%;
}

#event-info .location-card > table > tbody > tr {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

#event-info .location-card > table > tbody > tr > td {
  display: block;
  position: relative;
  padding: 14px 16px 14px 42px;
  background: var(--soft);
  border-radius: var(--radius-xs);
}

#event-info .location-card > table > tbody > tr > td::before {
  content: "\f3c5";
  position: absolute;
  top: 15px;
  left: 17px;
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 15px;
  line-height: 1;
  color: var(--brand);
}

#event-info .location-card > table > tbody > tr > td:has(> p:first-child > b:empty) {
  display: none;
}

#event-info .location-card:not(:has(td > p:first-child > b:not(:empty))) {
  display: none;
}

#event-info .location-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--secondary);
}

#event-info .location-card p:first-child {
  margin-bottom: 2px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink);
}

#event-info .location-card p:empty {
  display: none;
}

/* 2b. Event details text: section headings and paragraphs
   Each heading gets a red icon tile, same style as the homepage cards
   (10-19 meeting). The ASP gives headings no names, so the icon is chosen
   from what follows the heading; anything not recognised gets the
   general information icon. */
#event-info-text h3 {
  --section-icon: "\f05a";
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0 10px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--ink);
}

#event-info-text h3::before {
  content: var(--section-icon);
  flex: 0 0 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 15px;
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: var(--radius-xs);
}

/* Event description: the first heading (when an event has no description,
   the rules below give the real first section its own icon instead) */
#event-info-text > h3:first-child {
  --section-icon: "\f15c";
}

/* Sport-specific info (Sanctioned / Division type / Ball …) */
#event-info-text h3:has(+ p > b:first-child) {
  --section-icon: "\f0ae";
}

/* Registration deadlines ("Entry Deadline:" followed by a highlighted date) */
#event-info-text h3:has(+ p > b + span.event-info) {
  --section-icon: "\f274";
}

/* Starting times (heading followed by the "check start times" note) */
#event-info-text h3:has(+ h4) {
  --section-icon: "\f017";
}

/* Event director (paragraph opens with the highlighted director name) */
#event-info-text h3:has(+ p > span.event-info:first-child):not(:has(+ p > b)) {
  --section-icon: "\f508";
}

/* R2 Sports app */
#event-info-text h3:has(+ p > a[href*="r2-push" i], + p > a[href*="r2-event" i]) {
  --section-icon: "\f3cd";
}

#event-info-text > h3:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

#event-info-text p {
  max-width: 72ch;
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
}

#event-info-text p:empty {
  display: none;
}

/* Warning line: "Please check start times online." (10-19 meeting: needs
   stronger contrast). Amber box, dark text 9:1, icon and edge 4.4:1. */
#event-info-text h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 72ch;
  margin: 0 0 12px;
  text-align: left;
  padding: 12px 16px;
  background: var(--warning-soft);
  border: 1px solid var(--warning-line);
  border-left: 5px solid var(--warning-accent);
  border-radius: var(--radius-xs);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--warning);
}

#event-info-text h4::before {
  content: "\f071";
  flex: 0 0 auto;
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 16px;
  color: var(--warning-accent);
}

/* Ladder app note (an h4 with a link) is information, not a warning */
#event-info-text h4:has(a) {
  display: block;
  background: var(--soft);
  border: 0;
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  font-size: 14px;
  color: var(--ink);
}

#event-info-text h4:has(a)::before {
  content: none;
}

/* Key values (dates, times, phone, director): highlighted, never split mid-chip */
#event-info-text span.event-info {
  padding: 1px 6px;
  background: var(--brand-soft);
  border-radius: 3px;
  font-weight: 700;
  color: var(--ink);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

#event-info-text img {
  vertical-align: middle;
}

/* App line: icon sits with its link */
#event-info-text a:has(> img[src*="r2app-icon" i]) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

/* 2c. Director-pasted HTML (description, ladder info, extra info).
   Keeps the director's words, colours and bold; keeps it inside the card. */
#event-info-text {
  overflow-wrap: anywhere;
}

#event-info-text font[face] {
  font-family: inherit;
}

#event-info-text img,
#event-info-text iframe,
#event-info-text video,
#event-info-text embed,
#event-info-text object {
  max-width: 100%;
}

#event-info-text img {
  height: auto;
  border-radius: var(--radius-xs);
}

#event-info-text [style*="width"] {
  max-width: 100%;
  box-sizing: border-box;
}

#event-info-text table {
  display: block;
  width: fit-content !important;
  max-width: 100%;
  margin: 10px 0 14px;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 14px;
}

#event-info-text table td,
#event-info-text table th {
  padding: 6px 10px;
  overflow-wrap: normal;
  vertical-align: top;
}

#event-info-text ul,
#event-info-text ol {
  max-width: 72ch;
  margin: 6px 0 12px;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.7;
}

#event-info-text li {
  margin: 0 0 2px;
}

/* 2d. Contact card (side column) */
#event-info .contact-card {
  position: sticky;
  top: 20px;
  border-top: 3px solid var(--brand);
}

#event-info .contact-card::before {
  content: "EVENT DIRECTOR";
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--muted);
}

#event-info .contact-card table,
#event-info .contact-card tbody,
#event-info .contact-card tr,
#event-info .contact-card td {
  display: block;
  width: auto;
}

#event-info .contact-card td[width="45"] {
  display: none;
}

#event-info .contact-card tr {
  display: flex;
  flex-direction: column;
}

#event-info .contact-card td:last-child {
  display: flex;
  flex-direction: column;
}

#event-info .contact-card h2 {
  order: 2;
  margin: 14px 0 0;
}

#event-info .contact-card p {
  order: 1;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
}

#event-info .contact-card p:empty {
  display: none;
}

#event-info .contact-card p:empty + h2,
#event-info .contact-card h2:has(+ p:empty) {
  margin-top: 0;
}

#event-info .contact-card h2 a:link,
#event-info .contact-card h2 a:visited {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 0 16px;
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--radius-xs);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

#event-info .contact-card h2 a::after {
  content: "\f0e0";
  font-family: var(--icon-font);
  font-weight: 900;
}

#event-info .contact-card h2 a:hover {
  background: var(--brand-hover);
}

#event-info .contact-card h2 a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* 2e. Ad slot under the contact card (hidden while empty) */
#event-info #banner-ad:empty {
  display: none;
}

#event-info #banner-ad {
  max-width: 100%;
  overflow: hidden;
  text-align: center;
}

#event-info #banner-ad > * {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* 2f. Director / PRINT footer (footerNoLink.asp): plain credit line */
.main-site-wrapper > tbody > tr > td > p[align="center"]:has(> font[size="1"]) {
  margin: 0;
  padding: 26px var(--gutter) 34px;
  color: var(--muted);
  line-height: 1.6;
}

/* 2g. Info page · tablet and phone
   One column. Order: Location → Contact → Details → Ad.
   With no location card (elections) the contact card follows the details. */
@media (max-width: 900px) {
  #event-info > table > tbody > tr {
    grid-template-columns: minmax(0, 1fr);
  }

  #event-info > table > tbody > tr > td:last-child {
    display: contents;
  }

  #event-info > table > tbody > tr > td:last-child > * {
    grid-column: 1;
    min-width: 0;
  }

  #event-info .location-card {
    order: 1;
  }

  #event-info .contact-card {
    order: 2;
    position: static;
  }

  #event-info #event-info-text {
    order: 3;
  }

  #event-info #banner-ad {
    order: 4;
    margin: 0 0 22px;
  }

  #event-info:not(:has(.location-card)) .contact-card {
    order: 4;
  }

  #event-info:not(:has(.location-card)) #banner-ad {
    order: 5;
  }
}

/* Tablet: director name and button side by side */
@media (min-width: 601px) and (max-width: 900px) {
  #event-info .contact-card td:last-child {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  #event-info .contact-card h2 {
    flex: 0 0 240px;
    margin: 0;
  }
}

@media (max-width: 600px) {
  #event-info .location-card > table > tbody > tr {
    grid-template-columns: minmax(0, 1fr);
  }

  #event-info-text h3 {
    font-size: 17px;
  }

  #event-info-text p,
  #event-info-text ul,
  #event-info-text ol {
    font-size: 15px;
  }

  #event-info-text table {
    font-size: 13px;
  }
}

/* 2h. Info page · print (a clean one-sheet event info printout)
   Utility bar, menu, ads, sponsors and link footer are dropped; the event
   banner prints as plain text; cards lose their boxes. */
@media print {
  body:has(#event-info) {
    background: var(--surface);
  }

  body:has(#event-info) #topMenu1:has(> table) td[width="300"],
  body:has(#event-info) div:not(#siteMenu):has(> #mainMenu1),
  body:has(#event-info) #banner-ad,
  body:has(#event-info) #sponsors,
  body:has(#event-info) #footer,
  body:has(#event-info) #footer-2,
  #event-info .contact-card h2 {
    display: none !important;
  }

  body:has(#event-info) #topMenu1:has(> table) {
    border-bottom: 2px solid var(--ink);
    background-image: none;
  }

  #event-info {
    width: 100%;
    max-width: none;
    padding-top: 16px;
  }

  #event-info > table > tbody > tr {
    grid-template-columns: minmax(0, 1fr);
  }

  #event-info > table > tbody > tr > td:last-child {
    display: contents;
  }

  #event-info .event-info-card {
    margin-bottom: 14px;
    padding: 0;
    border: 0;
    box-shadow: none;
  }

  #event-info .contact-card {
    order: 1;
    position: static;
    padding-top: 10px;
  }

  #event-info .location-card {
    order: 0;
  }

  #event-info #event-info-text {
    order: 2;
  }

  #event-info-text h3 {
    break-after: avoid;
  }

  #event-info-text p,
  #event-info .location-card td {
    break-inside: avoid;
  }

  #event-info-text span.event-info {
    padding: 0;
    background: none;
  }

  #event-info-text h3::before {
    background: none;
  }
}


/* ---------------------------------------------------------------------
   C05 · 1. PARTICIPANTS (#participants-wrapper)
   Shared by participants.asp and the by-city/state/country/club/school
   pages, which use the same wrapper, title and list hooks.
   --------------------------------------------------------------------- */
#participants-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 18px;
}

#participants-title > h1 {
  margin: 0;
}

#participants-title > br {
  display: none;
}

#participants-title form > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--secondary);
}

#participants-title form select {
  min-width: 220px;
}

#participants-title h3,
#participants-title h4 {
  margin: 0;
  font-size: 14px;
  color: var(--secondary);
}

/* 1a. "View by" directory tabs */
:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) > div > br {
  display: none;
}

#participants-sort-table {
  margin: 0 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

#participants-sort-table > table,
#participants-sort-table > table > tbody,
#participants-sort-table > table > tbody > tr > td > table,
#participants-sort-table > table > tbody > tr > td > table > tbody,
#participants-sort-table > table > tbody > tr > td > table > tbody > tr {
  display: contents;
}

#participants-sort-table > table > tbody > tr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#participants-sort-table > table > tbody > tr::before {
  content: "VIEW BY";
  margin-right: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--muted);
}

#participants-sort-table td {
  display: contents;
}

#participants-sort-table td > img {
  display: none;
}

#participants-sort-table a:link,
#participants-sort-table a:visited {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

#participants-sort-table a:hover {
  border-color: var(--brand);
  color: var(--brand);
}

#participants-sort-table h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: inherit;
}

/* 1b. Participant count line */
:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) form[name="form1"] {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--secondary);
}

:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) form[name="form1"] > br {
  display: none;
}

:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) form input[name="groupingCount"] {
  min-height: 0;
  width: 4.5em;
  padding: 2px 8px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  font-weight: 700;
  text-align: center;
}

/* 1c. Participant list */
#participants-list {
  margin-top: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

#participants-list > table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

#participants-list > table > tbody > tr:has(> td > h2) > td {
  padding: 18px 20px 6px;
  background: var(--soft);
  border-top: 1px solid var(--border);
}

#participants-list h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--brand);
}

#participants-list tr[bgcolor] {
  background-color: var(--surface);
}

#participants-list tr[bgcolor] > td {
  padding: 14px 12px;
  border-top: 1px solid var(--border);
  vertical-align: top;
}

#participants-list tr[bgcolor] > td:first-child {
  padding-left: 20px;
}

/* Photo cell (td width=75): a round photo whichever column it sits in
   (the ladder view puts Rank and Points before it) */
#participants-list tr[bgcolor] > td[width="75"] {
  width: 56px;
}

#participants-list tr[bgcolor] > td[width="75"] img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
}

#participants-list tr[bgcolor] > td[width="75"] br {
  display: none;
}

#participants-list .player-name a:link,
#participants-list .player-name a:visited {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

#participants-list .player-name a:hover {
  color: var(--brand);
}

#participants-list tr[bgcolor] p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--secondary);
}

#participants-list tr[bgcolor] > td:last-child a:link,
#participants-list tr[bgcolor] > td:last-child a:visited {
  font-weight: 600;
  text-decoration: none;
}

#participants-list tr[bgcolor]:hover {
  background-color: var(--soft);
}


/* ---------------------------------------------------------------------
   C05 · 2. PARTICIPANTS · VIEW-BY ICONS, A–Z BAR, LADDER VIEW,
   GROUPED PAGES (participants-city / -state / -country / -school / -venue)
   10-19 meeting: lots of elements (A–Z, filters, View by,
   Print) must stay readable without feeling crowded.
   --------------------------------------------------------------------- */

/* 2a. View-by pills: a fun icon for each, the old GIFs hidden */
#participants-sort-table td:has(> a > img),
#participants-sort-table td > a > img {
  display: none;
}

#participants-sort-table a::before {
  content: "\f0c0";
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--brand-soft);
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 11px;
  color: var(--brand);
}

#participants-sort-table a[href*="participants.asp" i]::before {
  content: "\f0c0";
}

#participants-sort-table a[href*="participants-country" i]::before {
  content: "\f57d";
}

#participants-sort-table a[href*="participants-state" i]::before {
  content: "\f5a0";
}

#participants-sort-table a[href*="participants-city" i]::before {
  content: "\f64f";
}

#participants-sort-table a[href*="participants-school" i]::before {
  content: "\f19d";
}

#participants-sort-table a[href*="participants-venue" i]::before {
  content: "\f1ad";
}

/* Print List: same pill, dark icon, pushed to the end */
#participants-sort-table a[href*="PRINT=YES" i]::before {
  content: "\f02f";
  background: var(--soft);
  color: var(--ink);
}

#participants-sort-table a[href*="PRINT=YES" i]:has(h3) {
  margin-left: auto;
}

#participants-sort-table a:hover::before {
  transform: scale(1.12);
}

/* Print link in the title (fantasy events) */
#participants-title h4 a:has(> img[src*="print" i]) img {
  display: none;
}

#participants-title h4 a:has(> img[src*="print" i])::before {
  content: "\f02f";
  margin-right: 6px;
  font-family: var(--icon-font);
  font-weight: 900;
}

/* "Search by Last Name" link beside the division search */
#participants-title form h3 {
  display: inline;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--secondary);
}

/* Director released only some divisions */
#participants-title > h3:has(br) {
  flex-basis: 100%;
  padding: 12px 16px;
  background: var(--warning-soft);
  border: 1px solid var(--warning-line);
  border-left: 5px solid var(--warning-accent);
  border-radius: var(--radius-xs);
  font-size: 14px;
  line-height: 1.5;
  color: var(--warning);
}

/* Message line ("…saved", etc.) */
:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) > div > font[size="3"] {
  display: block;
  margin: 0 0 14px;
  padding: 12px 16px;
  background: var(--success-soft);
  border-left: 4px solid var(--success);
  border-radius: var(--radius-xs);
  font-size: 14px;
  color: var(--success);
}

/* 2b. Division name above the list (when a division is chosen) */
:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) form[name="form1"] > font[size="5"] {
  display: block;
  margin: 0 0 8px;
  font-size: 22px;
  letter-spacing: -0.3px;
  color: var(--ink);
}

/* 2c. A–Z letter bar (events with more than 100 entrants), top and bottom */
:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) form[name="form1"] > table[bgcolor="#000066" i],
#participants-sort > table {
  display: block;
  width: auto;
  margin: 14px 0 10px;
  background: none;
}

:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) form[name="form1"] > table[bgcolor="#000066" i] :is(tbody, tr, td, table),
#participants-sort > table :is(tbody, tr, td, table) {
  display: contents;
}

:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) form[name="form1"] > table[bgcolor="#000066" i] table > tbody > tr,
#participants-sort > table table > tbody > tr {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  height: auto;
  background: none;
}

#participants-sort {
  margin: 18px 0 0;
}

#participants-sort > table table > tbody > tr {
  justify-content: center;
}

:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) form[name="form1"] > table[bgcolor="#000066" i] p,
#participants-sort p {
  margin: 0;
}

:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) form[name="form1"] > table[bgcolor="#000066" i] font {
  font-size: inherit;
}

:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) form[name="form1"] > table[bgcolor="#000066" i] a:link,
:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) form[name="form1"] > table[bgcolor="#000066" i] a:visited,
#participants-sort a:link,
#participants-sort a:visited {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
}

:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) form[name="form1"] > table[bgcolor="#000066" i] a:hover,
#participants-sort a:hover {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--on-brand);
}

/* Range now showing ("A - Bel"), was a yellow box */
:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) form input[name="toLetter"] {
  min-height: 0;
  width: 7em;
  padding: 3px 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--soft) !important;
  font: 700 13px var(--font-body);
  color: var(--secondary);
  -webkit-text-fill-color: var(--secondary) !important;
}

/* "Next 50 Participants" link as a button */
:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) > a[href*="sortLetter=" i]:link,
:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) > a[href*="sortLetter=" i]:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin-top: 16px;
  padding: 0 18px;
  background: var(--hero);
  color: var(--on-hero);
  border-radius: var(--radius-xs);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) > a[href*="sortLetter=" i]::after {
  content: "\f061";
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 12px;
}

:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) > a[href*="sortLetter=" i]:hover {
  background: var(--secondary);
}

:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) > br {
  display: none;
}

/* Empty rows the old markup leaves between letter headings */
#participants-list > table > tbody > tr:not([bgcolor]):not(:has(td *)) {
  display: none;
}

/* 2d. Small association button under a name (e.g. USA Racquetball) */
#participants-list .player-name ~ br + a img {
  height: 16px;
  margin-top: 6px;
}

/* 2e. Challenge-ladder division view: Rank / Points / Photo / Name … */
#participants-list tr[bgcolor="#FFFF00" i] {
  background: var(--soft);
}

#participants-list tr[bgcolor="#FFFF00" i] > td {
  padding: 10px 12px;
  border-top: 0;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--secondary);
}

#participants-list tr[bgcolor="#FFFF00" i] > td:first-child {
  padding-left: 20px;
}

#participants-list tr[bgcolor="#FFFF00" i] div[align="center"] {
  text-align: left;
}

/* Rank number in a circle */
#participants-list:has(tr[bgcolor="#FFFF00" i]) tr[bgcolor]:not([bgcolor="#FFFF00" i]) > td:first-child {
  width: 44px;
  padding-left: 20px;
}

#participants-list:has(tr[bgcolor="#FFFF00" i]) tr[bgcolor]:not([bgcolor="#FFFF00" i]) > td:first-child p {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  background: var(--soft);
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

#participants-list:has(tr[bgcolor="#FFFF00" i]) tr:nth-child(-n + 3 of [bgcolor]:not([bgcolor="#FFFF00" i])) > td:first-child p {
  background: var(--brand);
  color: var(--on-brand);
}

/* 2f. Grouped pages (by city, state, country, school, club) */
#participants-title-sorted {
  margin-bottom: 18px;
}

#participants-title-sorted > h1 {
  margin: 0 0 18px;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.8px;
  color: var(--ink);
  text-transform: lowercase;
}

#participants-title-sorted > h1::first-letter {
  text-transform: uppercase;
}

#participants-title-sorted > div > br,
:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) > form[name="form1"] ~ br,
:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) > div[align="center"]:not(:has(*)) {
  display: none;
}

#participants-list > table:has(#players-name-division),
#participants-list > table:has(#players-name-division) > tbody,
#participants-list > table:has(#players-name-division) > tbody > tr,
#participants-list > table:has(#players-name-division) > tbody > tr > td {
  display: block;
  width: auto;
  padding: 0;
}

#players-name-division > table {
  width: 100%;
  border-collapse: collapse;
}

/* Group heading row: name + participant count */
#players-name-division tr:has(> td > h2) > td {
  padding: 16px 20px 10px;
  background: var(--soft);
  border-top: 1px solid var(--border);
}

#players-name-division > table:first-child tr:first-child > td {
  border-top: 0;
}

#players-name-division h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: var(--ink);
}

#players-name-division h2 font {
  color: inherit;
}

#players-name-division h2 input[name^="groupingCount"] {
  min-height: 0;
  width: 3.5em;
  padding: 2px 8px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  font: 700 12px var(--font-body);
  text-align: center;
  color: var(--brand);
  -webkit-text-fill-color: var(--brand) !important;
}

/* School group links: Schedule / Results / Summary pills */
#players-name-division h4 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  font-size: 0;
}

#players-name-division h4 a:link,
#players-name-division h4 a:visited {
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}

#players-name-division h4 a i,
#players-name-division h5 a i {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-soft);
  font-size: 11px;
  color: var(--brand);
}

#players-name-division h4 a:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* Participant rows */
#players-name-division tr:not(:has(> td > h2)) > td {
  padding: 10px 20px;
  border-top: 1px solid var(--border);
  vertical-align: top;
}

#players-name-division h5 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

#players-name-division h5 > a:first-child:link,
#players-name-division h5 > a:first-child:visited {
  color: var(--ink);
  text-decoration: none;
}

#players-name-division h5 > a:first-child:hover {
  color: var(--brand);
}

#players-name-division h5 a:not(:first-child) {
  text-decoration: none;
}

#players-name-division .racquet {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

#players-name-division p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--secondary);
}

#players-name-division p a:link,
#players-name-division p a:visited {
  font-weight: 600;
  text-decoration: none;
}

/* Spacer rows between participants */
#players-name-division tr:has(> td:only-child > br:only-child) {
  display: none;
}

/* 2g. Phone */
@media (max-width: 600px) {
  #participants-sort-table a[href*="PRINT=YES" i]:has(h3) {
    margin-left: 0;
  }

  :is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) form[name="form1"] > table[bgcolor="#000066" i] a:link,
  :is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) form[name="form1"] > table[bgcolor="#000066" i] a:visited,
  #participants-sort a:link,
  #participants-sort a:visited {
    width: 30px;
    height: 30px;
  }

  #players-name-division tr:not(:has(> td > h2)) {
    display: block;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
  }

  #players-name-division tr:not(:has(> td > h2)) > td {
    display: block;
    padding: 2px 0;
    border-top: 0;
  }

  #players-name-division tr:has(> td > h2) > td {
    padding: 14px 16px 10px;
  }

  #participants-list > table > tbody > tr:has(> td > h2) > td {
    display: block;
    padding: 14px 16px 6px;
  }

  /* Ladder on phones: rank badge, then name / from / ladder; points as a
     small line, the header row and photo hidden to save room */
  :is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) #participants-list tr[bgcolor="#FFFF00" i],
  #participants-list:has(tr[bgcolor="#FFFF00" i]) tr[bgcolor] > td[width="75"] {
    display: none;
  }

  #participants-list:has(tr[bgcolor="#FFFF00" i]) tr[bgcolor] > td:first-child {
    width: auto;
    padding-left: 0;
  }

  #participants-list:has(tr[bgcolor="#FFFF00" i]) tr[bgcolor] > td:nth-child(2) {
    order: 9;
  }

  #participants-list:has(tr[bgcolor="#FFFF00" i]) tr[bgcolor] > td:nth-child(2) p {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
  }

  #participants-list:has(tr[bgcolor="#FFFF00" i]) tr[bgcolor] > td:nth-child(2) p::after {
    content: " pts";
  }
}

/* 2h. Printing the list */
@media print {
  #participants-title form,
  #participants-sort-table,
  #participants-sort,
  :is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) form[name="form1"] > table[bgcolor="#000066" i],
  :is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) input[name="toLetter"],
  :is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) > a[href*="sortLetter=" i] {
    display: none !important;
  }

  #participants-list {
    border: 0;
  }

  #participants-list tr[bgcolor] > td,
  #players-name-division tr > td {
    break-inside: avoid;
  }
}


/* ---------------------------------------------------------------------
   C05 · 3. PARTICIPANTS · 10-20 DESIGN REVIEW REFINEMENTS
   - Smaller buttons: 13px type kept, height cut from 38-42px to 32-36px
     (less top/bottom padding read better than a smaller font).
   - No yellow anywhere: group bars and the range tag use the --group-*
     tokens in :root (Light grey by default; two other options listed
     there). Division drop-down options lose their inline yellow.
   - Group header bars stand apart from the rows: tinted bar, red edge,
     extra space above; light enough to print.
   - Second 10-20 review: everything one size smaller and tighter for long
     lists; the map pin beside hometowns removed.
   --------------------------------------------------------------------- */

/* 3a. Compact controls */
#participants-sort-table a:link,
#participants-sort-table a:visited {
  min-height: 32px;
  padding: 0 12px 0 6px;
}

#participants-sort-table a::before {
  width: 20px;
  height: 20px;
  margin-right: 6px;
  font-size: 10px;
}

#participants-sort-table h3 {
  font-size: 13px;
}

#participants-sort-table > table > tbody > tr {
  gap: 6px;
}

#participants-title form select,
#participants-title form input[type="submit"] {
  min-height: 34px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 13px;
}

/* Division drop-down: every option carries style="background-color:
   #FFFF00" in the include; inline styles need !important to clear */
:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) select option,
#results-section select option {
  background-color: var(--surface) !important;
  color: var(--ink);
}

/* Submit: red primary button like Register; appearance reset so Safari
   and Firefox don't keep their own button colour */
:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) form input[type="submit"],
:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) form input[type="submit" i] {
  -webkit-appearance: none;
  appearance: none;
  padding-left: 16px;
  padding-right: 16px;
  background: var(--brand);
  color: var(--on-brand);
  border: 0;
  border-radius: var(--radius-xs);
  font-weight: 700;
}

:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) form input[type="submit"]:hover {
  background: var(--brand-hover);
}

:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) > a[href*="sortLetter=" i]:link,
:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) > a[href*="sortLetter=" i]:visited {
  min-height: 34px;
  padding: 0 14px;
  font-size: 13px;
}

:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) form[name="form1"] > table[bgcolor="#000066" i] a:link,
:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) form[name="form1"] > table[bgcolor="#000066" i] a:visited,
#participants-sort a:link,
#participants-sort a:visited {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) form[name="form1"] > table[bgcolor="#000066" i] table > tbody > tr,
#participants-sort > table table > tbody > tr {
  gap: 3px;
}

/* Participant count: small grey label + pill (was a white box) */
:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) form input[name="groupingCount"] {
  width: 3.6em;
  padding: 2px 6px;
  background: var(--soft);
  font-size: 13px;
  color: var(--ink);
}

/* 3b. Range tag ("A - Col"), no yellow */
:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) form input[name="toLetter"] {
  width: 6.5em;
  padding: 3px 10px;
  margin: 2px 0 2px;
  border: 1px solid var(--border);
  background: var(--group-bg) !important;
  font-size: 12px;
  letter-spacing: 0.3px;
  text-align: center;
  color: var(--group-ink);
  -webkit-text-fill-color: var(--group-ink) !important;
}

/* 3c. Group header bars: letters on the entry list */
#participants-list > table > tbody > tr:has(> td > h2) > td {
  padding: 6px 16px;
  background: var(--group-bg);
  border-top: 0;
  box-shadow: inset 4px 0 0 var(--group-edge);
}

/* a strip of page tone above every bar after the first */
#participants-list > table > tbody > tr[bgcolor] + tr:has(> td > h2) > td,
#participants-list > table > tbody > tr[bgcolor] + tr:not([bgcolor]) + tr:has(> td > h2) > td {
  border-top: 6px solid var(--soft);
}

#participants-list h2 {
  font-size: 13px;
  letter-spacing: 1.4px;
  color: var(--group-ink);
}

/* ...and every group on the by country / state / city / school / club pages */
#players-name-division tr:has(> td > h2) > td {
  padding: 7px 16px;
  background: var(--group-bg);
  border-top: 0;
  box-shadow: inset 4px 0 0 var(--group-edge);
}

#players-name-division > table:not(:first-child) tr:has(> td > h2) > td {
  border-top: 8px solid var(--soft);
}

#players-name-division h2 {
  font-size: 14px;
  letter-spacing: 0;
  color: var(--group-ink);
}

#players-name-division h2 input[name^="groupingCount"] {
  background: var(--group-count-bg);
  color: var(--group-count-ink);
  -webkit-text-fill-color: var(--group-count-ink) !important;
}

#players-name-division h4 {
  margin-top: 8px;
}

#players-name-division h4 a:link,
#players-name-division h4 a:visited {
  padding: 2px 10px 2px 4px;
  border-color: transparent;
}

#players-name-division h4 a i {
  width: 20px;
  height: 20px;
  font-size: 10px;
}

/* 3d. Rows: one size smaller and tighter for long lists; name first,
   hometown / country quieter, divisions in red. No map pin (10-20). */
#participants-list .player-name a:link,
#participants-list .player-name a:visited,
#players-name-division h5 {
  font-size: 14px;
}

#participants-list tr[bgcolor] > td:nth-last-child(2) p,
#players-name-division tr:not(:has(> td > h2)) > td:not(:first-child):not(:last-child) p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

#participants-list tr[bgcolor] p:empty {
  display: none;
}

#participants-list tr[bgcolor] > td:last-child p,
#players-name-division tr:not(:has(> td > h2)) > td:last-child p {
  font-size: 12px;
  line-height: 1.6;
}

#participants-list tr[bgcolor] > td,
#players-name-division tr:not(:has(> td > h2)) > td {
  padding-top: 7px;
  padding-bottom: 7px;
}

#participants-list tr[bgcolor] > td[width="75"] {
  width: 40px;
}

#participants-list tr[bgcolor] > td[width="75"] img {
  width: 36px;
  height: 36px;
}

/* Same column lines in every group (each group is its own table) */
@media (min-width: 601px) {
  #players-name-division tr:not(:has(> td > h2)) {
    display: grid;
    grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
    border-top: 1px solid var(--border);
  }

  #players-name-division tr:not(:has(> td > h2)):has(> td:nth-child(3)) {
    grid-template-columns: minmax(0, 34%) minmax(0, 26%) minmax(0, 1fr);
  }

  #players-name-division tr:not(:has(> td > h2)) > td {
    display: block;
    border-top: 0;
  }

  #players-name-division tr:has(> td > h2),
  #players-name-division tr:has(> td > h2) > td {
    display: block;
  }

  #players-name-division tr:has(> td:only-child > br:only-child) {
    display: none;
  }
}

@media (max-width: 600px) {
  #participants-list > table > tbody > tr:has(> td > h2) > td {
    padding: 9px 16px;
  }

  #players-name-division tr:has(> td > h2) > td {
    padding: 11px 16px;
  }

  #players-name-division tr:not(:has(> td > h2)) > td {
    padding: 2px 0;
  }
}

@media print {
  #participants-list > table > tbody > tr:has(> td > h2) > td,
  #players-name-division tr:has(> td > h2) > td {
    background: none;
    box-shadow: none;
    border-left: 0;
    border-bottom: 2px solid var(--ink);
  }

  #participants-list h2,
  #players-name-division h2 {
    color: var(--ink);
  }
}


/* ---------------------------------------------------------------------
   C05 · 4. PARTICIPANTS · 10-20 THIRD REVIEW
   - Draw-type dots now sit next to each division name on the
     participants pages (and on Results), in the colour of the draw-type
     image the Brackets list uses. They appear once the include puts that
     same small courtGrid image in front of each division link (request
     to Ryan); the image is shrunk to nothing and its background drawn as
     a dot. The Brackets list keeps the original images.
   - Small city icon before the hometown and venue icon before the club.
   - Top area tighter: count, A-Z letters and range on one line.
   --------------------------------------------------------------------- */

/* 4a. Draw-type dots */
:is(:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)), #results-section) img[src*="courtGrid/images/" i] {
  display: inline-block;
  box-sizing: content-box;
  width: 0;
  height: 0;
  margin: 0 5px 0 0;
  padding: 4px;
  border: 0;
  border-radius: 50%;
  vertical-align: 0;
  background: var(--draw-dot, var(--muted));
}

:is(:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)), #results-section) img[src$="singleE.gif" i] { --draw-dot: var(--draw-single); }
:is(:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)), #results-section) img[src$="singleCons.gif" i] { --draw-dot: var(--draw-single-cons); }
:is(:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)), #results-section) img[src$="/cons.gif" i] { --draw-dot: var(--draw-cons); }
:is(:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)), #results-section) img[src$="doubleE.gif" i] { --draw-dot: var(--draw-double); }
:is(:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)), #results-section) img[src$="roundR.gif" i] { --draw-dot: var(--draw-rr); }
:is(:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)), #results-section) img[src$="poolPlay.gif" i] { --draw-dot: var(--draw-pool); }
:is(:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)), #results-section) img[src$="playoff.gif" i] { --draw-dot: var(--draw-playoff); }
:is(:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)), #results-section) img[src$="qualifier.gif" i] { --draw-dot: var(--draw-qualifier); }
:is(:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)), #results-section) img[src$="olympic-blue.gif" i] { --draw-dot: var(--draw-olympic-blue); }
:is(:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)), #results-section) img[src$="olympic-red.gif" i] { --draw-dot: var(--draw-olympic-red); }
:is(:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)), #results-section) img[src$="tripleKnockout-yellow.gif" i] { --draw-dot: var(--draw-triple-gold); }
:is(:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)), #results-section) img[src$="tripleKnockout-silver.gif" i] { --draw-dot: var(--draw-triple-silver); }
:is(:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)), #results-section) img[src$="tripleKnockout-bronze.gif" i] { --draw-dot: var(--draw-triple-bronze); }

/* 4b. City and venue icons in the "From" column */
#participants-list tr[bgcolor] > td:nth-last-child(2) p:not(:empty),
#players-name-division tr:not(:has(> td > h2)) > td:not(:first-child):not(:last-child) p {
  position: relative;
  padding-left: 17px;
}

#participants-list tr[bgcolor] > td:nth-last-child(2) p:not(:empty)::before,
#players-name-division tr:not(:has(> td > h2)) > td:not(:first-child):not(:last-child) p::before,
#participants-list tr[bgcolor] > td:nth-last-child(2) p:has(br)::after {
  position: absolute;
  left: 0;
  width: 12px;
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  color: var(--muted);
}

#participants-list tr[bgcolor] > td:nth-last-child(2) p:not(:empty)::before,
#players-name-division tr:not(:has(> td > h2)) > td:not(:first-child):not(:last-child) p::before {
  content: "\f64f";
  top: 0;
}

#participants-list tr[bgcolor] > td:nth-last-child(2) p:has(br)::after {
  content: "\f1ad";
  top: 18px;
}

/* 4c. Tighter top area */
#participants-title {
  margin-bottom: 10px;
}

#participants-sort-table {
  margin-bottom: 10px;
  padding-bottom: 10px;
}

#participants-title-sorted {
  margin-bottom: 10px;
}

#participants-title-sorted > h1 {
  margin-bottom: 10px;
}

/* count + letters + range on one line (wraps on small screens) */
:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) form[name="form1"] > table[bgcolor="#000066" i] {
  display: inline-block;
  margin: 0 10px;
  vertical-align: middle;
}

:is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) form input[name="toLetter"] {
  margin: 0;
  vertical-align: middle;
}

#participants-list {
  margin-top: 10px;
}

@media (max-width: 600px) {
  :is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) form[name="form1"] > table[bgcolor="#000066" i] {
    display: block;
    margin: 8px 0;
  }
}


/* ---------------------------------------------------------------------
   C05 · 5. PARTICIPANTS · 10-20 FOURTH REVIEW
   - Less red: division links (and the links on the by-state / city /
     country / school / club pages) are black, red on hover.
   - A small dot before every division link: grey until the include adds
     the draw image (then the draw-type colour, see C05 · 4).
   - Names show they open the player's profile: red, underlined, with a
     small profile icon on hover.
   - Print: black text, no grey bars or red, nothing but the list.
   --------------------------------------------------------------------- */
#participants-list tr[bgcolor] > td:last-child a:link,
#participants-list tr[bgcolor] > td:last-child a:visited,
#players-name-division p a:link,
#players-name-division p a:visited {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

#participants-list tr[bgcolor] > td:last-child a:hover,
#players-name-division p a:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* fallback dot (no draw image in the markup yet) */
#participants-list tr[bgcolor] > td:last-child a[href*="viewBracket" i]::before,
#players-name-division p a[href*="viewBracket" i]::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin: 0 6px 0 0;
  border: 2.5px solid var(--brand);
  border-radius: 50%;
  vertical-align: 2px;
}

#participants-list tr[bgcolor] > td:last-child img[src*="courtGrid/images/" i] + a[href*="viewBracket" i]::before,
#players-name-division p img[src*="courtGrid/images/" i] + a[href*="viewBracket" i]::before {
  display: none;
}

/* "Partner: Name" after a doubles division reads as quieter text */
#participants-list tr[bgcolor] > td:last-child p {
  color: var(--muted);
}

/* Ready for request 9: <span class="partner">Partner: Name</span> */
:is(#participants-list, #players-name-division) span.partner {
  white-space: nowrap;
  color: var(--muted);
}

:is(#participants-list, #players-name-division) span.partner::before {
  content: "\f500";
  margin: 0 4px 0 6px;
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 10px;
  color: var(--muted);
}

/* Names: hover shows they open the profile */
#participants-list .player-name a:link,
#participants-list .player-name a:visited,
#players-name-division h5 > a:first-child:link,
#players-name-division h5 > a:first-child:visited {
  text-decoration: none;
  transition: color 0.12s ease;
}

#participants-list .player-name a:hover,
#players-name-division h5 > a:first-child:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

#participants-list .player-name a::after,
#players-name-division h5 > a:first-child::after {
  content: "\f2bd";
  display: inline-block;
  margin-left: 6px;
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 11px;
  color: var(--brand);
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

#participants-list .player-name a:hover::after,
#participants-list .player-name a:focus-visible::after,
#players-name-division h5 > a:first-child:hover::after,
#players-name-division h5 > a:first-child:focus-visible::after {
  opacity: 1;
  transform: none;
}

#participants-list tr[bgcolor] > td[width="75"] a:hover img {
  box-shadow: 0 0 0 2px var(--brand);
}

@media print {
  :is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)),
  :is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)) *,
  #participants-list,
  #participants-list * {
    color: var(--print-ink) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #participants-list,
  #participants-list tr[bgcolor] > td,
  #players-name-division tr > td {
    border-color: var(--print-rule) !important;
  }

  #participants-list > table > tbody > tr:has(> td > h2) > td,
  #players-name-division tr:has(> td > h2) > td {
    border-bottom: 1.5px solid var(--print-ink) !important;
  }

  #participants-list tr[bgcolor] > td[width="75"],
  #participants-list .player-name a::after,
  #players-name-division h5 > a:first-child::after,
  #players-name-division h4,
  #players-name-division h5 a:not(:first-child),
  #players-name-division h2 input[name^="groupingCount"] {
    display: none !important;
  }

  #participants-list tr[bgcolor] > td,
  #players-name-division tr:not(:has(> td > h2)) > td {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }

  /* Only the event name and the list on paper */
  body:has(#participants-title, #participants-title-sorted) :is(#topMenu1, #mainMenu1, .masthead-horizontal-menu, #sponsors, #footer, #footer-2),
  body:has(#participants-title, #participants-title-sorted) .main-site-wrapper > tbody > tr > td > p[align="center"]:has(> font[size="1"] > a) {
    display: none !important;
  }

  body:has(#participants-title, #participants-title-sorted) {
    background: none !important;
  }

  #participants-list .player-name a,
  #players-name-division h5,
  #participants-list tr[bgcolor] p,
  #players-name-division p {
    font-size: 10pt !important;
  }
}


/* ---------------------------------------------------------------------
   C16 · 1. LOCKED / NOT-YET-AVAILABLE PAGES (10-20 fourth review)
   One standard for: no-participant-list.asp, no-starting-times.asp
   (Times), no-times-available.asp (Media after the event),
   no-draws-available.asp (Brackets), page-disabled.asp (any locked page,
   e.g. Divisions & fees). Results uses the same card (C08 · 2d).
   Live structure (event 54450): body > table[width=950][bgcolor] > td >
   masthead table, h1, content table (or h2), #sponsors, older footer.
   Page title on the left like every page; the message in a centred card
   with a red top line and a lock icon.
   --------------------------------------------------------------------- */
body > table[width="950"]:has(> tbody > tr > td > h1 + :is(table, h2)) > tbody > tr > td > h1 {
  width: calc(100% - (var(--gutter) * 2));
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 36px 0 18px;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.8px;
  text-align: left;
  color: var(--ink);
}

body > table[width="950"]:has(> tbody > tr > td > h1 + :is(table, h2)) > tbody > tr > td > h1 :is(font, strong) {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

body > table[width="950"]:has(> tbody > tr > td > h1 + :is(table, h2)) > tbody > tr > td > h1 br {
  display: none;
}

/* The card: the content table (or the h2 on the Media page), and on the
   Brackets page the h2 + table pair under the title */
body > table[width="950"]:has(> tbody > tr > td > h1 + :is(table, h2)) > tbody > tr > td > h1 + table,
body > table[width="950"]:has(> tbody > tr > td > h1 + :is(table, h2)) > tbody > tr > td > h1 + h2,
#division-list > #division-list-title + h2 {
  display: block;
  box-sizing: border-box;
  width: min(560px, calc(100% - (var(--gutter) * 2)));
  margin: 8px auto 28px;
  padding: 24px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  text-align: center;
  color: var(--secondary);
}

body > table[width="950"]:has(> tbody > tr > td > h1 + :is(table, h2)) > tbody > tr > td > h1 + :is(table, h2)::before,
#division-list > #division-list-title + h2::before {
  content: "\f023";
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--brand-soft);
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 16px;
  color: var(--brand);
}

/* Brackets: h2 is the card's top, the table below is its body */
#division-list > #division-list-title + h2 {
  margin-bottom: 0;
  padding-bottom: 6px;
  border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  box-shadow: none;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

#division-list > #division-list-title + h2 + table {
  display: block;
  box-sizing: border-box;
  width: min(560px, calc(100% - (var(--gutter) * 2)));
  margin: 0 auto 28px;
  padding: 0 28px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-align: center;
}

/* Inside every card: table cells as plain blocks, ad cells hidden */
:is(body > table[width="950"] > tbody > tr > td > h1 + table, #division-list > #division-list-title + h2 + table),
:is(body > table[width="950"] > tbody > tr > td > h1 + table, #division-list > #division-list-title + h2 + table) :is(tbody, tr) {
  border-spacing: 0;
}

:is(body > table[width="950"] > tbody > tr > td > h1 + table, #division-list > #division-list-title + h2 + table) > tbody,
:is(body > table[width="950"] > tbody > tr > td > h1 + table, #division-list > #division-list-title + h2 + table) > tbody > tr,
:is(body > table[width="950"] > tbody > tr > td > h1 + table, #division-list > #division-list-title + h2 + table) > tbody > tr > td:first-child {
  display: block;
  padding: 0;
}

:is(body > table[width="950"] > tbody > tr > td > h1 + table, #division-list > #division-list-title + h2 + table) > tbody > tr > td:not(:first-child) {
  display: none;
}

/* Text: one headline, quiet body, red links; no navy / orange / red fonts */
:is(body > table[width="950"] > tbody > tr > td > h1 + :is(table, h2), #division-list > #division-list-title + h2, #division-list > #division-list-title + h2 + table) :is(font, strong, b) {
  font-size: inherit;
  color: inherit;
}

:is(body > table[width="950"] > tbody > tr > td > h1 + :is(table, h2), #division-list > #division-list-title + h2 + table) :is(h2, h3, h4) {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--secondary);
}

:is(body > table[width="950"] > tbody > tr > td > h1 + table) td > :is(h2, h4):first-child,
:is(body > table[width="950"] > tbody > tr > td > h1 + table) td > h2:first-child > font[size],
body > table[width="950"] > tbody > tr > td > h1 + h2 > strong:first-child,
body > table[width="950"] > tbody > tr > td > h1 + h2 > strong:first-child > font,
:is(body > table[width="950"] > tbody > tr > td > h1 + table) td > p:first-child > font[color],
:is(body > table[width="950"] > tbody > tr > td > h1 + table) td > p:first-child > font[color] > strong {
  display: block;
  margin: 0 0 10px;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.35;
  color: var(--ink) !important;
}

:is(body > table[width="950"] > tbody > tr > td > h1 + table) td > h2:first-child > font[size],
body > table[width="950"] > tbody > tr > td > h1 + h2 > strong:first-child > font,
:is(body > table[width="950"] > tbody > tr > td > h1 + table) td > p:first-child > font[color] > strong {
  margin: 0;
}

/* Brackets placeholder lives in #division-list (no frame): title like
   every other page */
#division-list > #division-list-title {
  width: calc(100% - (var(--gutter) * 2));
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 36px 0 18px;
  text-align: left;
}

#division-list > #division-list-title > h1 {
  margin: 0;
  text-align: left;
}

:is(body > table[width="950"] > tbody > tr > td > h1 + table) td > p:first-child:has(> font[color]) {
  margin: 0;
}

:is(body > table[width="950"] > tbody > tr > td > h1 + :is(table, h2), #division-list > #division-list-title + h2 + table) p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--secondary);
}

:is(body > table[width="950"] > tbody > tr > td > h1 + :is(table, h2), #division-list > #division-list-title + h2, #division-list > #division-list-title + h2 + table) br {
  display: none;
}

:is(body > table[width="950"] > tbody > tr > td > h1 + :is(table, h2), #division-list > #division-list-title + h2 + table) :is(p, h2, h3, h4) br + br {
  display: none;
}

:is(body > table[width="950"] > tbody > tr > td > h1 + :is(table, h2), #division-list > #division-list-title + h2 + table) a:link,
:is(body > table[width="950"] > tbody > tr > td > h1 + :is(table, h2), #division-list > #division-list-title + h2 + table) a:visited {
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
}

:is(body > table[width="950"] > tbody > tr > td > h1 + :is(table, h2), #division-list > #division-list-title + h2 + table) a:hover {
  text-decoration: underline;
}

/* The date and time something opens: a small pill */
:is(body > table[width="950"] > tbody > tr > td > h1 + table) h2 font[color="#FF6600" i],
#division-list > #division-list-title + h2 + table h2 {
  display: inline-block;
  margin: 4px 0 0;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  font-size: 13px !important;
  font-weight: 700;
  color: var(--brand) !important;
}

:is(body > table[width="950"] > tbody > tr > td > h1 + table) h2 font[color="#FF6600" i]:empty,
:is(body > table[width="950"] > tbody > tr > td > h1 + table) h2 strong:has(> font[color="#FF6600" i]:empty) {
  display: none;
}

/* Page Disabled message (h4) was white on white */
body > table[width="950"] > tbody > tr > td > h1 + table td > h4:first-child {
  font-size: 16px;
}

/* Media page: software logo inside the message */
body > table[width="950"] > tbody > tr > td > h1 + h2 img {
  display: none;
}

body > table[width="950"] > tbody > tr > td > h1 + h2 > font[color="#000066" i] {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: var(--secondary);
}

@media (max-width: 600px) {
  body > table[width="950"]:has(> tbody > tr > td > h1 + :is(table, h2)) > tbody > tr > td > h1 {
    padding-top: 22px;
  }

  body > table[width="950"]:has(> tbody > tr > td > h1 + :is(table, h2)) > tbody > tr > td > h1 + :is(table, h2),
  #division-list > #division-list-title + h2,
  #division-list > #division-list-title + h2 + table {
    padding-left: 18px;
    padding-right: 18px;
  }
}


/* ---------------------------------------------------------------------
   C06 · 1. BRACKETS LIST (division-list.asp, #division-wrapper)
   10-20 review: back to the original table (same columns and order:
   Order | Division Details | Draw Type | Entries | History | Match |
   Print | View | Code) with the ORIGINAL draw-type images kept, made
   compact. Only the History / Match / Print / View GIF buttons are
   replaced, by Font Awesome icons in small round buttons.
   Markup checked on live event 54373.
   --------------------------------------------------------------------- */
#division-wrapper > table[width="800"] {
  width: auto;
  margin: 0 0 12px;
}

#division-wrapper > table[width="800"] td {
  padding: 0;
}

#division-wrapper > table[width="800"] font {
  font-size: 13px;
  line-height: 1.5;
  color: var(--secondary);
}

#division-wrapper > table[width="800"] font[color] strong {
  color: var(--ink);
}

#division-wrapper > form[name="divList"] > div,
#division-wrapper > form[name="divList"] > div > table,
#division-wrapper > form[name="divList"] > div > table > tbody,
#division-wrapper > form[name="divList"] > div > table > tbody > tr,
#division-wrapper td#divList,
#division-wrapper td#divList > div {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
}

#division-wrapper td#divList > div > table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* Header row (was grey with orange links) */
#division-wrapper td#divList tr[bgcolor="#CCCCCC" i] {
  background-color: var(--soft);
}

#division-wrapper td#divList tr[bgcolor="#CCCCCC" i] > td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

#division-wrapper td#divList tr[bgcolor="#CCCCCC" i] font {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

#division-wrapper td#divList tr[bgcolor="#CCCCCC" i] a:link,
#division-wrapper td#divList tr[bgcolor="#CCCCCC" i] a:visited {
  color: var(--muted);
  text-decoration: none;
}

#division-wrapper td#divList tr[bgcolor="#CCCCCC" i] a:hover font {
  color: var(--brand);
}

#division-wrapper td#divList tr[bgcolor="#CCCCCC" i] > td:nth-child(n + 5):nth-child(-n + 8) {
  text-align: center;
}

/* Rows: compact, zebra kept (#EEEEEE rows become a soft grey) */
#division-wrapper td#divList tr:not([bgcolor]) > td[bgcolor] {
  padding: 4px 8px;
  background-color: var(--surface);
  border-top: 1px solid var(--border);
  vertical-align: middle;
}

#division-wrapper td#divList tr:not([bgcolor]) > td[bgcolor="#EEEEEE" i] {
  background-color: var(--zebra);
}

#division-wrapper td#divList tr:not([bgcolor]):hover > td[bgcolor] {
  background-color: var(--brand-soft);
}

#division-wrapper td#divList td p {
  margin: 0;
}

#division-wrapper td#divList tr:not([bgcolor]) font[size="1"] {
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
}

/* Order */
#division-wrapper td#divList tr:not([bgcolor]) > td:first-child {
  width: 28px;
  text-align: center;
}

#division-wrapper td#divList tr:not([bgcolor]) > td:first-child font {
  font-size: 12px;
  color: var(--muted);
}

/* Division details */
#division-wrapper td#divList td.divNameCell font {
  font-weight: 700;
}

/* Draw type: original image, small and lined up */
#division-wrapper td#divList tr:not([bgcolor]) > td:nth-child(3) font {
  font-size: 12px;
  color: var(--secondary);
}

#division-wrapper td#divList td img[src*="courtGrid/images/" i] {
  width: 11px;
  height: 11px;
  margin-right: 4px;
  vertical-align: -1px;
}

/* Entries; "Team" as a small tag */
#division-wrapper td#divList tr:not([bgcolor]) > td:nth-child(4) {
  white-space: nowrap;
}

#division-wrapper td#divList tr:not([bgcolor]) > td:nth-child(4) br {
  display: none;
}

#division-wrapper td#divList tr:not([bgcolor]) > td:nth-child(4) font[color] {
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  font-size: 10px;
  font-weight: 700;
  color: var(--brand);
}

/* History / Match / Print / View: icon buttons instead of the GIFs */
#division-wrapper td#divList tr:not([bgcolor]) > td:nth-child(n + 5):nth-child(-n + 8) {
  width: 36px;
  padding-left: 2px;
  padding-right: 2px;
  text-align: center;
}

#division-wrapper td#divList a:has(> img[src*="matchHistory" i], > img[src*="match-search" i], > img[src*="print.gif" i], > img[src*="btnView" i]) > img {
  display: none;
}

#division-wrapper td#divList a:has(> img[src*="matchHistory" i], > img[src*="match-search" i], > img[src*="print.gif" i], > img[src*="btnView" i]) {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--soft);
  color: var(--ink);
  text-decoration: none;
  vertical-align: middle;
}

#division-wrapper td#divList a:has(> img[src*="matchHistory" i], > img[src*="match-search" i], > img[src*="print.gif" i], > img[src*="btnView" i])::before {
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 11px;
}

#division-wrapper td#divList a:has(> img[src*="matchHistory" i])::before { content: "\f1da"; }
#division-wrapper td#divList a:has(> img[src*="match-search" i])::before { content: "\f002"; }
#division-wrapper td#divList a:has(> img[src*="print.gif" i])::before { content: "\f02f"; }
#division-wrapper td#divList a:has(> img[src*="btnView" i])::before { content: "\f06e"; }

#division-wrapper td#divList a:has(> img[src*="btnView" i]) {
  background: var(--brand);
  color: var(--on-brand);
}

#division-wrapper td#divList a:has(> img[src*="matchHistory" i], > img[src*="match-search" i], > img[src*="print.gif" i]):hover {
  background: var(--brand-soft);
  color: var(--brand);
}

#division-wrapper td#divList a:has(> img[src*="btnView" i]):hover {
  background: var(--brand-hover);
}

/* Code */
#division-wrapper td#divList tr:not([bgcolor]) > td:last-child font {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  background: var(--brand-soft);
  font-size: 11px;
  color: var(--brand);
}


/* ---------------------------------------------------------------------
   C07 · 1. DRAW PAGES: BRACKET, ROUND ROBIN, POOL PLAY (10-20 review)
   Built from the live markup of event 54373:
     bracket.asp     #bracket-main-container > ... form > table[width=300]
                     > td (title, #drawStatus, #dropDown, table#drawWatermarkImg)
                     + td (table[width=65] > #divList)
     round-robin.asp #roundrobin-main-container > :is(#roundrobin-data-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"]))))
     pool-play.asp   table[width=1000] > table[width=1000] (no id)
     older layout    .main-site-wrapper > table[width=1000] with the
                     division menu and no wrapper ids (event 31929):
                     added to every rule inside :where(), so the
                     specificity of each rule stays the same
   THE BRACKET DRAWING ITSELF (table#drawWatermarkImg: lines, round colours,
   watermark and sponsor images) IS NOT TOUCHED. Only the frame, title,
   draw-type label, "View ... Draw/Bracket" link and the division menu are.
   (10-22: the drawing gets back the browser's own text size and line
   height, see "Bracket drawing: text size and line height" below.)
   Division menu side: --division-menu-order in :root (1 right, -1 left).
   --------------------------------------------------------------------- */
#roundrobin-main-container,
table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus),
.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])) {
  width: calc(100% - (var(--gutter) * 2));
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 36px 0 8px;
  text-align: left;
  color: var(--ink);
}

table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus),
.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])) {
  display: block;
}

/* Older page layout (no wrapper divs, e.g. event 31929): release every
   layout table around the division menu so the same rules apply */
:where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"]))) > tbody,
:where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"]))) > tbody > tr,
:where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"]))) > tbody > tr > td,
:where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"]))) form,
:where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"]))) :is(table, tbody):has(table[width="65"] td#divList),
:where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"]))) td:has(table[width="65"] td#divList):not(:has(> table[width="65"])),
:where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"]))) tr:has(table[width="65"] td#divList):not(:has(> td > table[width="65"])),
:where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"]))) td:has(> table table[width="65"]) > table,
:where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"]))) td:has(> table table[width="65"]) > table > tbody {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

/* Release the layout tables (white boxes, fixed widths, centring) */
#bracket-main-container > table,
#bracket-main-container > table > tbody,
#bracket-main-container > table > tbody > tr,
#bracket-main-container > table > tbody > tr > td,
#bracket-main-container > table > tbody > tr > td > table,
#bracket-main-container > table > tbody > tr > td > table > tbody,
#bracket-main-container > table > tbody > tr > td > table > tbody > tr,
#bracket-main-container > table > tbody > tr > td > table > tbody > tr > td,
:is(#bracket-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) form[name="form1"] > table[width="300"],
:is(#bracket-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) form[name="form1"] > table[width="300"] > tbody,
:is(#roundrobin-data-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) > table,
:is(#roundrobin-data-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) > table > tbody,
table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus) > tbody,
table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus) > tbody > tr,
table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus) > tbody > tr > td,
table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus) > tbody > tr > td > table[bgcolor],
table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus) > tbody > tr > td > table[bgcolor] > tbody,
table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus) > tbody > tr > td > table[bgcolor] > tbody > tr,
table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus) > tbody > tr > td > table[bgcolor] > tbody > tr > td,
table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus) > tbody > tr > td > table[bgcolor] > tbody > tr > td > table,
table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus) > tbody > tr > td > table[bgcolor] > tbody > tr > td > table > tbody {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

/* Bracket drawing: text size and line height (10-22 fix)
   Player view only. The bracket drawing is a set of side-by-side columns
   (one per round) of small tables, and each column is lined up with the
   next only by the fixed heights of spacer images in its rows. The page
   shell above sets 15px text with a 1.55 line height on every table, so
   any row holding text (player name, score, match number) grew by a few
   pixels. The early rounds have the most rows, so they grew the most and
   drifted away from the later rounds: the 32s off the 16s in a 32 draw,
   the 64s and 32s in a 64 draw. Director pages never had the shell, so
   they were fine. This gives the drawing back the browser's own table
   defaults (medium text, normal line height), the same values the
   director view uses. Checked on 32 and 64 draws, a qualifier, doubles
   and a combined division of event 31929: every row is within 1px of the
   director-style layout. Lines, colours, fonts and names are unchanged;
   the division menu (table[width=65]) is not included. */
:is(#bracket-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) form[name="form1"] > table[width="300"] > tbody > tr > td > table:has(table):not([width="65"]),
:is(#bracket-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) form[name="form1"] > table[width="300"] > tbody > tr > td > table:has(table):not([width="65"]) table {
  font-size: medium;
  line-height: normal;
}

/* Main column + division menu side by side */
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) tr:has(> td > table[width="65"] td#divList) {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) tr:has(> td > table[width="65"] td#divList) > td:not(:has(> table[width="65"])) {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  overflow-x: auto;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) tr:has(> td > table[width="65"] td#divList) > td:has(> table[width="65"]) {
  display: block;
  order: var(--division-menu-order);
  flex: 0 0 auto;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
}

/* 1a. Title, draw-type label, "View ... Draw / Bracket" link */
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) div[align]:has(> font > a#drawStatus) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 14px;
  text-align: left;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) div[align]:has(> font > a#drawStatus) br {
  display: none;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) div[align]:has(> font > a#drawStatus) :is(font[size="4"], font[size="5"]) {
  flex-basis: 100%;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--ink);
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) div[align]:has(> font > a#drawStatus) > b {
  flex-basis: 100%;
}

/* Draws with no draw-type link (qualifier brackets, seen on event 31929):
   same title; the subtitle ("Qualifier") becomes the grey label */
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) form[name="form1"] > table[width="300"] > tbody > tr > td > table:not(#drawWatermarkImg):not(:has(table)) > tbody > tr > td[style*="nowrap" i] > div[align]:not(:has(#drawStatus)) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 14px;
  text-align: left;
  white-space: normal;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) form[name="form1"] > table[width="300"] > tbody > tr > td > table:not(#drawWatermarkImg):not(:has(table)) > tbody > tr > td[style*="nowrap" i] > div[align]:not(:has(#drawStatus)) br {
  display: none;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) form[name="form1"] > table[width="300"] > tbody > tr > td > table:not(#drawWatermarkImg):not(:has(table)) > tbody > tr > td[style*="nowrap" i] > div[align]:not(:has(#drawStatus)) > font:has(> b) {
  flex-basis: 100%;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--ink);
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) form[name="form1"] > table[width="300"] > tbody > tr > td > table:not(#drawWatermarkImg):not(:has(table)) > tbody > tr > td[style*="nowrap" i] > div[align]:not(:has(#drawStatus)) > font:not(:has(> b)) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--soft);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) form[name="form1"] > table[width="300"] > tbody > tr > td > table:not(#drawWatermarkImg):not(:has(table)) > tbody > tr > td[style*="nowrap" i] > div[align]:not(:has(#drawStatus)) > font:not(:has(> b))::before {
  content: "\f0e8";
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 10px;
  color: var(--muted);
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) a#drawStatus:link,
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) a#drawStatus:visited {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--soft);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) a#drawStatus::before {
  content: "\f0e8";
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 10px;
  color: var(--muted);
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) a#drawStatus[href*="single-elimination" i] { --draw-dot: var(--draw-single); }
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) a#drawStatus[href*="consolation" i] { --draw-dot: var(--draw-single-cons); }
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) a#drawStatus[href*="double" i] { --draw-dot: var(--draw-double); }
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) a#drawStatus[href*="round-robin" i] { --draw-dot: var(--draw-rr); }
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) a#drawStatus[href*="pool-play" i] { --draw-dot: var(--draw-pool); }
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) a#drawStatus[href*="playoff" i] { --draw-dot: var(--draw-playoff); }

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) a#drawStatus:hover {
  border-color: var(--brand);
  color: var(--brand);
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) :is(#dropDown > a, #dropDown:is(a)):link,
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) :is(#dropDown > a, #dropDown:is(a)):visited {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--brand);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  color: var(--brand);
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) :is(#dropDown > a, #dropDown:is(a))::before {
  content: "\f0e8";
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 11px;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) :is(#dropDown > a, #dropDown:is(a)):hover {
  background: var(--brand);
  color: var(--on-brand);
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) :is(#dropDown > a, #dropDown:is(a)) :is(font, strong) {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* "View ... Bracket" inside a centred table / div (older layout) */
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table:has(> tbody > tr > td > div[align] > font > a#dropDown) {
  width: auto;
  max-width: 100%;
  margin: 0 0 12px;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) div[align]:has(> font > a#dropDown) {
  text-align: left;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) p:has(> a#dropDown) {
  margin: 0 0 16px;
  text-align: left;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) p:has(> a#dropDown) br {
  display: none;
}

/* Print / schedule / layout links as small outline buttons */
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#printTable table,
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#printTable table > tbody,
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#printTable table > tbody > tr {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: auto;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table:has(> tbody > tr > td#printTable),
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table:has(> tbody > tr > td#printTable) > tbody,
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table:has(> tbody > tr > td#printTable) > tbody > tr,
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#printTable {
  display: block;
  width: auto;
  margin: 0 0 16px;
  padding: 0;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#printTable > br,
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#printTable td:not(:has(a)) {
  display: none;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#printTable td {
  display: block;
  width: auto;
  padding: 0;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#printTable td div[align] {
  text-align: left;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#printTable a:link,
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#printTable a:visited {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#printTable a:hover {
  border-color: var(--brand);
  color: var(--brand);
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#printTable a img {
  display: none;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#printTable a[href*="print=YES" i]:not(:has(i))::before {
  content: "\f02f";
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 11px;
}

/* 1b. Bracket page: the drawing sits in a white card that scrolls
   sideways when it is wider than the screen. Inside: untouched. */
:is(#bracket-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) form[name="form1"] > table[width="300"] > tbody > tr > td:first-child {
  padding: 22px 24px !important;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}

:is(#bracket-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) form[name="form1"] > table[width="300"] > tbody > tr > td:first-child > table:first-child,
:is(#bracket-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) form[name="form1"] > table[width="300"] > tbody > tr > td:first-child > table:first-child > tbody,
:is(#bracket-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) form[name="form1"] > table[width="300"] > tbody > tr > td:first-child > table:first-child > tbody > tr,
:is(#bracket-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) form[name="form1"] > table[width="300"] > tbody > tr > td:first-child > table:first-child > tbody > tr > td {
  display: block;
  margin: 0;
  padding: 0;
  white-space: normal !important;
}

:is(#bracket-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) form[name="form1"] > table[width="300"] > tbody > tr > td:first-child > font[size="1"]:has(> br:only-child) {
  display: none;
}

/* 1c. Division menu (#divList beside every draw) */
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[width="65"]:has(td#divList) {
  width: 132px;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[width="65"]:has(td#divList) > tbody > tr > td#divList {
  padding: 8px 6px;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#divList > div[align] > table {
  width: 100%;
  border-collapse: collapse;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#divList tr[bgcolor="#CCCCCC" i] > td {
  padding: 2px 6px 8px;
  background: var(--surface);
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#divList tr[bgcolor="#CCCCCC" i] > td:first-child font[size] {
  font-size: 0;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#divList tr[bgcolor="#CCCCCC" i] > td:first-child font[size]::after {
  content: "DIVISIONS";
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--muted);
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#divList tr:not([bgcolor]) > td[bgcolor] {
  padding: 4px 6px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  vertical-align: middle;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#divList tr:not([bgcolor]):hover > td[bgcolor] {
  background: var(--brand-soft);
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#divList td div[align] {
  text-align: left;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#divList a:link,
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#divList a:visited {
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#divList a:hover {
  color: var(--brand);
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#divList td:last-child {
  white-space: nowrap;
  text-align: right;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#divList td:last-child img {
  width: 11px;
  height: 11px;
  vertical-align: -1px;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#divList td:last-child font {
  font-size: 11px;
  color: var(--muted);
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#divList td:last-child br {
  display: none;
}

/* 1d. Round robin and pool play standings (redesign proposal) */
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td[bgcolor="#DFFFDF" i]) {
  width: 100%;
  max-width: 100%;
  margin: 0 0 18px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  overflow: hidden;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td[bgcolor="#DFFFDF" i]) > tbody > tr > td {
  padding: 0;
  border: 0;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td[bgcolor="#DFFFDF" i]) table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 !important;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td[bgcolor="#DFFFDF" i]) td {
  padding: 7px 8px;
  border: 0 !important;
  border-top: 1px solid var(--border) !important;
  vertical-align: middle;
  font-size: 14px;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td[bgcolor="#DFFFDF" i]) td div[align] {
  text-align: inherit;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td[bgcolor="#DFFFDF" i]) font {
  font-size: inherit;
}

/* header rows: no yellow */
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td[bgcolor="#DFFFDF" i]) tr:is([bgcolor="#FFFF00" i], [bgcolor="#E6E6E6" i]) > td,
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td[bgcolor="#DFFFDF" i]) tr > td[bgcolor="#FFFF00" i] {
  padding: 6px 8px;
  background: var(--soft) !important;
  border-top: 0 !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td[bgcolor="#DFFFDF" i]) tr:is([bgcolor="#FFFF00" i], [bgcolor="#E6E6E6" i]) font[color],
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td[bgcolor="#DFFFDF" i]) tr > td[bgcolor="#FFFF00" i] font[color] {
  color: inherit;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td[bgcolor="#DFFFDF" i]) tr > td[bgcolor="#FFFF00" i] :is(font, strong) {
  font-size: inherit !important;
  font-weight: inherit;
  color: inherit !important;
}

/* "Group: 1" title in pool play */
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td[bgcolor="#DFFFDF" i]) tr[bgcolor="#FFFF00" i]:first-child > td:nth-child(2) {
  font-size: 13px;
  letter-spacing: 0.4px;
  text-align: left;
  color: var(--ink);
}

/* won / lost columns keep their green and red, softer */
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td[bgcolor="#DFFFDF" i]) tr:not([bgcolor="#FFFF00" i]) > td[bgcolor="#DFFFDF" i] {
  background: var(--won-soft);
  color: var(--success);
  text-align: center;
  font-weight: 700;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td[bgcolor="#DFFFDF" i]) tr:not([bgcolor="#FFFF00" i]) > td[bgcolor="#FFE1E1" i] {
  background: var(--lost-soft);
  color: var(--brand);
  text-align: center;
  font-weight: 700;
}

/* seed */
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td[bgcolor="#DFFFDF" i]) tr:not([bgcolor="#FFFF00" i]):not([bgcolor="#E6E6E6" i]) > td:first-child:not([bgcolor="#FFFF00" i]) {
  width: 34px;
  text-align: center;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td[bgcolor="#DFFFDF" i]) tr:not([bgcolor="#FFFF00" i]):not([bgcolor="#E6E6E6" i]) > td:first-child:not([bgcolor="#FFFF00" i]) font[color] {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--soft);
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
}

/* name + hometown */
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td[bgcolor="#DFFFDF" i]) tr:not([bgcolor="#FFFF00" i]):not([bgcolor="#E6E6E6" i]) > td:not([bgcolor="#FFFF00" i]):has(> div[align="left" i] > font > strong) {
  min-width: 170px;
  text-align: left;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td[bgcolor="#DFFFDF" i]) tr:not([bgcolor="#FFFF00" i]):not([bgcolor="#E6E6E6" i]) > td:not([bgcolor="#FFFF00" i]):has(> div[align="left" i] > font > strong) strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td[bgcolor="#DFFFDF" i]) font[color="ffffff" i] {
  display: inline !important;
  width: auto !important;
  height: auto !important;
  margin: 0 3px 0 0;
  padding: 0 !important;
  background: none !important;
  font-size: 0 !important;
  color: transparent !important;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td[bgcolor="#DFFFDF" i]) tr:not([bgcolor="#FFFF00" i]):not([bgcolor="#E6E6E6" i]) > td:not([bgcolor="#FFFF00" i]):has(> div[align="left" i] > font > strong) img {
  height: 14px;
  vertical-align: -2px;
}

:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td[bgcolor="#DFFFDF" i]) tr:not([bgcolor="#FFFF00" i]):not([bgcolor="#E6E6E6" i]) > td:not([bgcolor="#FFFF00" i]):has(> div[align="left" i] > font > strong) a i {
  margin: 0 1px;
  font-size: 11px;
  color: var(--brand);
}

/* place */
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td[bgcolor="#DFFFDF" i]) tr:not([bgcolor="#FFFF00" i]) > td:last-child:not([bgcolor="#FFFF00" i]) font[color="ff0000" i] {
  display: inline-block;
  min-width: 34px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--soft);
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
}

/* legend beside the standings */
:is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[cellpad]:has(i.fa-school-flag) {
  font-size: 12px;
  color: var(--muted);
}

/* pool groups side by side, wrapping */
table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus) form[name="form1"] > table:has(table[bordercolor="#000066" i]) > tbody > tr:first-child {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus) form[name="form1"] > table:has(table[bordercolor="#000066" i]),
table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus) form[name="form1"] > table:has(table[bordercolor="#000066" i]) > tbody {
  display: block;
  width: 100%;
}

table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus) form[name="form1"] > table:has(table[bordercolor="#000066" i]) > tbody > tr:first-child > td {
  display: block;
  flex: 1 1 100%;
  min-width: 0;
  overflow-x: auto;
}

table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus) form[name="form1"] > table:has(table[bordercolor="#000066" i]) > tbody > tr:first-child > td[width="3"] {
  display: none;
}

/* 1e. Round robin match list */
:is(#roundrobin-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:not(:has(td[bgcolor="#DFFFDF" i])) {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  overflow: hidden;
}

:is(#roundrobin-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:not(:has(td[bgcolor="#DFFFDF" i])) > tbody > tr > td {
  padding: 0;
  border: 0;
}

:is(#roundrobin-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:not(:has(td[bgcolor="#DFFFDF" i])) table {
  width: 100%;
  border-collapse: collapse;
}

:is(#roundrobin-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:not(:has(td[bgcolor="#DFFFDF" i])) tr[bgcolor="#FFFF00" i] > td {
  padding: 7px 10px;
  background: var(--soft);
  border: 0 !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

:is(#roundrobin-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:not(:has(td[bgcolor="#DFFFDF" i])) tr[bgcolor="#FFFF00" i] font {
  font-size: inherit;
}

:is(#roundrobin-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:not(:has(td[bgcolor="#DFFFDF" i])) tr:has(> td.horizontalLine) {
  display: none;
}

:is(#roundrobin-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:not(:has(td[bgcolor="#DFFFDF" i])) tr:not([bgcolor="#FFFF00" i]) {
  background: var(--surface);
}

:is(#roundrobin-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:not(:has(td[bgcolor="#DFFFDF" i])) tr[bgcolor="#E6FFFF" i] {
  background: var(--zebra);
}

:is(#roundrobin-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:not(:has(td[bgcolor="#DFFFDF" i])) tr:not([bgcolor="#FFFF00" i]) > td {
  padding: 7px 10px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--secondary);
}

:is(#roundrobin-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:not(:has(td[bgcolor="#DFFFDF" i])) font {
  font-size: inherit;
}

/* round, "1 vs 6", players, day / time, scores, code */
:is(#roundrobin-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:not(:has(td[bgcolor="#DFFFDF" i])) tr:not([bgcolor="#FFFF00" i]) > td:first-child {
  width: 44px;
  font-weight: 700;
  color: var(--muted);
}

:is(#roundrobin-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:not(:has(td[bgcolor="#DFFFDF" i])) tr:not([bgcolor="#FFFF00" i]) > td:nth-child(2) font[color] {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--soft);
  font-size: 12px;
  color: var(--secondary);
}

:is(#roundrobin-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:not(:has(td[bgcolor="#DFFFDF" i])) font[color="#0000FF" i] {
  font-weight: 700;
  color: var(--ink);
}

:is(#roundrobin-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:not(:has(td[bgcolor="#DFFFDF" i])) td:nth-child(3) font[color="#000000" i] {
  color: var(--secondary);
}

:is(#roundrobin-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:not(:has(td[bgcolor="#DFFFDF" i])) td:nth-child(3) font[color="#006600" i] {
  font-size: 11px;
  color: var(--muted);
}

:is(#roundrobin-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:not(:has(td[bgcolor="#DFFFDF" i])) td:nth-child(4) font[color="#006600" i] {
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--muted);
}

:is(#roundrobin-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:not(:has(td[bgcolor="#DFFFDF" i])) td:nth-child(4) font[color="#ff0000" i] {
  font-size: 12px;
  color: var(--ink);
}

:is(#roundrobin-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:not(:has(td[bgcolor="#DFFFDF" i])) td:nth-child(5) {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}

:is(#roundrobin-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:not(:has(td[bgcolor="#DFFFDF" i])) td:nth-child(6) a:link,
:is(#roundrobin-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:not(:has(td[bgcolor="#DFFFDF" i])) td:nth-child(6) a:visited {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  color: var(--muted);
}

:is(#roundrobin-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:not(:has(td[bgcolor="#DFFFDF" i])) td:nth-child(6) a:hover {
  color: var(--brand);
}

/* 1f. Phones and tablets: menu above as a strip, tables scroll */
@media (max-width: 900px) {
  :is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i] {
    display: block;
    overflow-x: auto;
  }

  :is(#bracket-main-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) form[name="form1"] > table[width="300"] > tbody > tr > td:first-child {
    padding: 16px !important;
  }

  :is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[width="65"]:has(td#divList) {
    width: 96px;
  }
}

/* Phones: the division menu goes UNDER the content (10-20: it took too
   much room on top), as a compact wrapping list */
@media (max-width: 600px) {
  :is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) tr:has(> td > table[width="65"] td#divList) {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  :is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) tr:has(> td > table[width="65"] td#divList) > td:not(:has(> table[width="65"])) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }

  :is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) tr:has(> td > table[width="65"] td#divList) > td:has(> table[width="65"]) {
    order: 2;
    position: static;
    width: 100%;
    max-height: none;
    overflow: visible;
  }

  :is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[width="65"]:has(td#divList) {
    width: 100%;
  }

  :is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#divList > div[align] > table > tbody {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px;
  }

  :is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#divList > div[align] > table > tbody > tr {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
  }

  :is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#divList > div[align] > table > tbody > tr[bgcolor="#CCCCCC" i] {
    flex-basis: 100%;
    border: 0;
    padding: 2px 4px;
    background: transparent !important;
  }

  :is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#divList > div[align] > table > tbody > tr[bgcolor="#CCCCCC" i] > td {
    background: transparent !important;
  }

  :is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#divList > div[align] > table > tbody > tr[bgcolor="#CCCCCC" i] > td:not(:first-child) {
    display: none;
  }

  :is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#divList tr:not([bgcolor]) > td[bgcolor] {
    padding: 0;
    border-top: 0;
  }
}


@media print {
  :is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) tr:has(> td > table[width="65"] td#divList) > td:has(> table[width="65"]),
  :is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td#printTable,
  :is(#bracket-main-container, #roundrobin-main-container, table[width="1000"] > tbody > tr > td > table[width="1000"]:has(#drawStatus), :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) #dropDown {
    display: none !important;
  }
}


/* 10-20: round robin standings stretch the full width (same as the match
   list under them); the small legend moves under the table */
:is(#roundrobin-data-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) tr:has(> td > table[cellpad]) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

:is(#roundrobin-data-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) tr:has(> td > table[cellpad]) > td {
  display: block;
  width: 100%;
  padding: 0;
}

:is(#roundrobin-data-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table:has(> tbody > tr > td > table[cellpad]),
:is(#roundrobin-data-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table:has(> tbody > tr > td > table[cellpad]) > tbody {
  display: block;
  width: 100%;
}

:is(#roundrobin-data-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) td:has(> table[cellpad]) {
  order: 2;
  margin-bottom: 14px;
}

:is(#roundrobin-data-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[cellpad],
:is(#roundrobin-data-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[cellpad] > tbody {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

:is(#roundrobin-data-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[cellpad] tr {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

/* "View Schedule" grid (Seed | Name | Round 1..n) */
:is(#roundrobin-data-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td table[width="85"]) td table[width="85"] {
  width: auto;
  min-width: 120px;
  border-collapse: collapse;
}

:is(#roundrobin-data-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td table[width="85"]) td table[width="85"] td {
  padding: 1px 0;
  border: 0 !important;
  font-size: 12px;
  line-height: 1.35;
  color: var(--secondary);
}

:is(#roundrobin-data-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td table[width="85"]) td table[width="85"] tr:first-child font {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

:is(#roundrobin-data-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td table[width="85"]) td table[width="85"] font[color] {
  color: inherit;
}

:is(#roundrobin-data-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td table[width="85"]) td table[width="85"] td[width="17"] b {
  display: inline-block;
  margin-right: 6px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  letter-spacing: 0.4px;
}

:is(#roundrobin-data-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td table[width="85"]) td table[width="85"] td[width="17"] font[color="#006600" i] b {
  background: var(--won-soft);
  color: var(--success);
}

:is(#roundrobin-data-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td table[width="85"]) td table[width="85"] td[width="17"] font[color="#FF0000" i] b {
  background: var(--lost-soft);
  color: var(--brand);
}

:is(#roundrobin-data-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td table[width="85"]) > tbody > tr > td > table > tbody > tr > td {
  padding: 10px 12px !important;
  border-top: 1px solid var(--border) !important;
  vertical-align: top;
}

:is(#roundrobin-data-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td table[width="85"]) > tbody > tr > td > table > tbody > tr > td:nth-child(2) {
  min-width: 190px;
}

:is(#roundrobin-data-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td table[width="85"]) > tbody > tr > td > table > tbody > tr > td:nth-child(2) font[size="2"] {
  white-space: nowrap;
}

:is(#roundrobin-data-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td table[width="85"]) > tbody > tr > td > table > tbody > tr > td[bgcolor="#FFFF00" i] {
  padding: 8px 12px !important;
  border-top: 0 !important;
  background: var(--soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

:is(#roundrobin-data-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td table[width="85"]) > tbody > tr > td > table > tbody > tr > td[bgcolor="#FFFF00" i] :is(font, strong) {
  font-size: inherit;
  color: inherit;
}

:is(#roundrobin-data-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td table[width="85"]) > tbody > tr > td > table > tbody > tr > td:first-child:not([bgcolor="#FFFF00" i]) font {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--soft);
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
}

:is(#roundrobin-data-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td table[width="85"]) td table[width="100%"] td {
  padding: 0;
  border: 0 !important;
  font-size: 12px;
  color: var(--muted);
}

:is(#roundrobin-data-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td table[width="85"]) td table[width="100%"] strong {
  font-size: 14px;
  color: var(--ink);
}

:is(#roundrobin-data-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td table[width="85"]) font[color="ffffff" i] {
  display: inline !important;
  padding: 0 !important;
  background: none !important;
  visibility: hidden;
}

:is(#roundrobin-data-container, :where(.main-site-wrapper > tbody > tr > td > table[width="1000"]:has(table[width="65"] td#divList):not(:has(#bracket-main-container, #roundrobin-main-container, table[width="1000"] table[width="65"])))) table[bordercolor="#000066" i]:has(td table[width="85"]) i {
  font-size: 11px;
  color: var(--brand);
}


/* ---------------------------------------------------------------------
   C18 · 1. TIMES PAGE (next-match.asp -> inc_nextMatch_data.asp)
   Live markup checked on event 54422 (10-20): #start-times-title, print
   link, club codes, "last updated" note, errors line, time zone, then
   #start-times-player with an h2 per participant and an h3 per match
   ("THU 7:20 PM - Men's Singles: A", view-draw button).
   --------------------------------------------------------------------- */
table[width="800"]:has(> tbody > tr > td > #start-times-title) {
  display: block;
  width: calc(100% - (var(--gutter) * 2));
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 36px 0 8px;
  background: transparent;
}

table[width="800"]:has(> tbody > tr > td > #start-times-title) > tbody,
table[width="800"]:has(> tbody > tr > td > #start-times-title) > tbody > tr,
table[width="800"]:has(> tbody > tr > td > #start-times-title) > tbody > tr > td {
  display: block;
  padding: 0;
  text-align: left;
}

#start-times-title > h1 {
  margin-bottom: 14px;
}

/* print button + club codes in one row */
#start-times-title + div > table {
  display: block;
  width: 100%;
  margin: 0 0 12px;
}

#start-times-title + div > table > tbody,
#start-times-title + div > table > tbody > tr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

#start-times-title + div > table > tbody > tr > td {
  display: block;
  width: auto;
  padding: 0;
  height: auto;
}

#start-times-title + div > table > tbody > tr > td div[align] {
  text-align: left;
}

#start-times-title + div a[href*="startTimes.asp" i]:has(> img) {
  display: none !important;
}

#start-times-title + div a[href*="PRINT=YES" i]:link,
#start-times-title + div a[href*="PRINT=YES" i]:visited {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}

#start-times-title + div a[href*="PRINT=YES" i]::before {
  content: "\f02f";
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 11px;
}

#start-times-title + div a[href*="PRINT=YES" i] br {
  display: none;
}

/* club codes as chips: "AFA  Air Force Academy Cadet Gym" */
#start-times-title + div table table table {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#start-times-title + div table table table > tbody {
  display: contents;
}

#start-times-title + div table table table[border] > tbody > tr:has(> td.horizontalLine),
#start-times-title + div table table table[border] > tbody > tr:first-child {
  display: none;
}

#start-times-title + div table table table[border] > tbody > tr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
}

#start-times-title + div table table table[border] > tbody > tr > td {
  padding: 0;
}

#start-times-title + div table table table[border] p {
  margin: 0;
}

#start-times-title + div table table table[border] > tbody > tr > td:first-child font {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  font-size: 11px;
  color: var(--brand);
}

#start-times-title + div table table table[border] > tbody > tr > td:last-child font {
  font-size: 12px;
  color: var(--secondary);
}

#start-times-title + div table table,
#start-times-title + div table table > tbody,
#start-times-title + div table table > tbody > tr,
#start-times-title + div table table > tbody > tr > td {
  display: block;
  padding: 0;
}

/* notes: last updated, errors, time zone */
#start-times-title ~ p {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

#start-times-title ~ h2 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

#start-times-title ~ h2 font {
  display: none;
}

#start-times-title ~ h2 a:link,
#start-times-title ~ h2 a:visited {
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
}

#start-times-title ~ h2 br,
#start-times-title ~ div > strong > br {
  display: none;
}

#start-times-title ~ div:has(> strong > font[color]) {
  margin: 0 0 16px;
}

#start-times-title ~ div > strong > font[color] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  background: var(--soft);
  font-size: 12px;
  color: var(--ink);
}

#start-times-title ~ div > strong > font[color]::before {
  content: "\f017";
  font-family: var(--icon-font);
  font-weight: 900;
  color: var(--brand);
}

/* "Times below are NOT accurate" box */
#start-times-title ~ div > table[bordercolor="#ff0000" i] {
  width: auto;
  margin: 0 0 16px;
  border: 1px solid var(--warning-line);
  border-left: 5px solid var(--warning-accent);
  border-radius: var(--radius-xs);
  border-collapse: separate;
  background: var(--warning-soft);
}

#start-times-title ~ div > table[bordercolor="#ff0000" i] td {
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: var(--warning);
}

#start-times-title ~ div > table[bordercolor="#ff0000" i] tr:first-child {
  display: none;
}

#start-times-title ~ div > table[bordercolor="#ff0000" i] :is(font, p) {
  font-size: 14px;
  color: inherit;
  text-align: left;
}

/* the list: one row per participant (10-20: single column) - name and
   hometown on the left, that person's matches stacked on the right */
#start-times-player > table {
  width: 100%;
}

#start-times-player > table > tbody > tr > td {
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
  column-gap: 0;
  padding: 8px 22px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-sm);
}

#start-times-player h2 {
  grid-column: 1;
  margin: 0;
  padding: 10px 0 4px;
  border-top: 1px solid var(--border);
  break-after: avoid;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--muted);
}

#start-times-player h2:first-child,
#start-times-player h2:first-child + h3 {
  border-top: 0;
}

#start-times-player h2 font {
  font-size: 15px;
}

#start-times-player h2 a:link,
#start-times-player h2 a:visited {
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
}

#start-times-player h2 a:hover {
  color: var(--brand);
  text-decoration: underline;
}

#start-times-player h3 {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 0 4px 24px;
  break-inside: avoid;
  font-size: 13px;
  font-weight: 400;
  color: var(--secondary);
}

#start-times-player h3 br {
  display: none;
}

#start-times-player h2 + h3 {
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

@media (max-width: 700px) {
  #start-times-player > table > tbody > tr > td {
    display: block;
    padding: 8px 16px 12px;
  }

  #start-times-player h2 + h3 {
    padding-top: 4px;
    border-top: 0;
  }

  #start-times-player h3 {
    padding-left: 0;
  }
}

#start-times-player h3 > a:has(> img) {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--soft);
  text-decoration: none;
  color: var(--ink);
}

#start-times-player h3 > a:has(> img) img {
  display: none;
}

#start-times-player h3 > a:has(> img)::before {
  content: "\f0e8";
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 10px;
}

#start-times-player h3 > a:has(> img):hover {
  background: var(--brand-soft);
  color: var(--brand);
}

#start-times-player h3 b {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--muted);
}

#start-times-player h3 b font {
  font-size: 13px;
  letter-spacing: 0;
  color: var(--ink);
}

@media print {
  #start-times-title + div,
  #start-times-title ~ h2 {
    display: none !important;
  }

  #start-times-player > table > tbody > tr > td {
    border: 0;
    padding: 0;
  }
}


/* ---------------------------------------------------------------------
   C08 · 1. RESULTS (#results-section)
   This page has no .main-site-wrapper, so its outer 1000px table is
   released here.
   --------------------------------------------------------------------- */
body:has(#results-section) {
  margin: 0;
  background: var(--page);
  font: 15px/1.55 var(--font-body);
  color: var(--ink);
}

table:has(> tbody > tr > td > #results-section) {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  color: var(--ink);
}

table:has(> tbody > tr > td > #results-section),
table:has(> tbody > tr > td > #results-section) > tbody,
table:has(> tbody > tr > td > #results-section) > tbody > tr,
table:has(> tbody > tr > td > #results-section) > tbody > tr > td,
table:has(> tbody > tr > td > table > tbody > tr > td > #results-section),
table:has(> tbody > tr > td > table > tbody > tr > td > #results-section) > tbody,
table:has(> tbody > tr > td > table > tbody > tr > td > #results-section) > tbody > tr,
table:has(> tbody > tr > td > table > tbody > tr > td > #results-section) > tbody > tr > td {
  display: block;
  width: auto;
}

table:has(> tbody > tr > td > #results-section) a:link,
table:has(> tbody > tr > td > #results-section) a:visited {
  color: var(--link);
}

table:has(> tbody > tr > td > #results-section) a:hover {
  color: var(--link-hover);
}

table:has(> tbody > tr > td > #results-section) > tbody > tr > td[bgcolor] {
  padding: 0;
  background-color: transparent;
}

table:has(> tbody > tr > td > #results-section) table {
  font-size: inherit;
  color: inherit;
}

#results-section table[bgcolor="#FFFFFF" i] {
  background-color: transparent;
}

#results-section > form > table,
#results-section > form > table > tbody,
#results-section > form > table > tbody > tr,
#results-section > form > table > tbody > tr > td,
#results-section > form > table > tbody > tr > td > table,
#results-section > form > table > tbody > tr > td > table > tbody,
#results-section > form > table > tbody > tr > td > table > tbody > tr,
#results-section > form > table > tbody > tr > td > table > tbody > tr > td {
  display: block;
  width: auto;
  padding: 0;
  text-align: left;
}

#results-section p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--secondary);
}

#results-section p br + br {
  display: none;
}

#results-section h2 {
  margin: 18px 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--secondary);
}

/* Browsers carry an unclosed <font size="5"> from the intro into this heading */
#results-section h2 font {
  font-size: inherit;
}

#results-section img[src*="print.gif"] {
  vertical-align: middle;
}

/* Results table: its outer holder table becomes a block, so the table
   itself scrolls sideways inside its own box on small screens */
#results-section table:has(> tbody > tr > td > table > tbody > tr[bgcolor="#FFFF00" i]),
#results-section table:has(> tbody > tr > td > table > tbody > tr[bgcolor="#FFFF00" i]) > tbody,
#results-section table:has(> tbody > tr > td > table > tbody > tr[bgcolor="#FFFF00" i]) > tbody > tr,
#results-section table:has(> tbody > tr > td > table > tbody > tr[bgcolor="#FFFF00" i]) > tbody > tr > td {
  display: block;
  width: 100%;
  padding: 0;
}

#results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) {
  display: table;
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

#results-section tr[bgcolor="#FFFF00" i] {
  background-color: var(--soft);
}

#results-section tr[bgcolor="#FFFF00" i] > td {
  padding: 12px 14px;
  white-space: nowrap;
}

#results-section tr[bgcolor="#FFFF00" i] font {
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}

#results-section tr:has(> td.horizontalLine) {
  display: none;
}

#results-section td[bgcolor="#FFFFFF" i] {
  padding: 14px;
  background-color: var(--surface);
  border-top: 1px solid var(--border);
  vertical-align: top;
}

#results-section td[bgcolor="#FFFFFF" i] p {
  margin: 0;
  line-height: 1.5;
  color: var(--ink);
}

#results-section td[bgcolor="#FFFFFF" i] font[size="1"] {
  font-size: 14px;
}

#results-section td[bgcolor="#FFFFFF" i] a:link,
#results-section td[bgcolor="#FFFFFF" i] a:visited {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  background: var(--brand-soft);
  border-radius: var(--radius-xs);
  font-weight: 800;
  text-decoration: none;
}

#results-section td[bgcolor="#FFFFFF" i] img[name="Picture"] {
  display: block;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  object-fit: cover;
  border-radius: 50%;
}

#results-section td[bgcolor="#FFFFFF" i]:has(img[name="Picture"]) font {
  font-weight: 700;
}


/* ---------------------------------------------------------------------
   C08 · 2. RESULTS PAGE · 10-20 KICKOFF
   Markup from inc_displayResults(_test).asp: a yellow header row and one
   <TR> per division: Code | Type | Name | # | Draw type | Winner |
   Runner-up | Semis/3rd | Semis/4th (| 5th-8th when shown).
   - Desktop: one card table; Type + Name read as one "Division" column;
     medal colours on the place headings; small round photos beside names.
   - Tablet/phone: each division becomes a card with 1st / 2nd / 3rd / 4th
     lines (no sideways scrolling).
   - "No Results Available" becomes the same placeholder card as Hotel and
     Sponsors. Bracket (draw) pages stay deferred.
   - Second 10-20 review: one font size smaller, tighter rows, winner less
     heavy; champion ring (gold) / runner-up ring (silver) on photos, a
     small gold dot when there is no photo; both print. Empty places
     (<font></font>) hidden on the phone cards.
   --------------------------------------------------------------------- */

/* 2a. The live include wraps the results table in <DIV ALIGN="CENTER"> */
#results-section table:has(> tbody > tr > td > div > table > tbody > tr[bgcolor="#FFFF00" i]),
#results-section table:has(> tbody > tr > td > div > table > tbody > tr[bgcolor="#FFFF00" i]) > tbody,
#results-section table:has(> tbody > tr > td > div > table > tbody > tr[bgcolor="#FFFF00" i]) > tbody > tr,
#results-section table:has(> tbody > tr > td > div > table > tbody > tr[bgcolor="#FFFF00" i]) > tbody > tr > td,
#results-section table:has(> tbody > tr > td > div > table > tbody > tr[bgcolor="#FFFF00" i]) > tbody > tr > td > div {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
}

/* 2b. Intro links get icons; the print GIF is replaced */
#results-section p a[href*="event-website" i]::before,
#results-section p a[href*="participants.asp" i]::before,
#results-section p a[href*="match-reporting" i]::before,
#results-section p a[href*="PRINT=YES" i]::before,
#results-section p a[href^="mailto:" i]::before {
  display: inline-block;
  width: 1.4em;
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 12px;
  color: var(--brand);
  text-decoration: none;
}

#results-section p a[href*="event-website" i]::before { content: "\f015"; }
#results-section p a[href*="participants.asp" i]::before { content: "\f0c0"; }
#results-section p a[href*="match-reporting" i]::before { content: "\f201"; }
#results-section p a[href*="PRINT=YES" i]::before { content: "\f02f"; }
#results-section p a[href^="mailto:" i]::before { content: "\f0e0"; margin-left: 4px; }

#results-section p a[href*="PRINT=YES" i] img,
#results-section p a[href*="PRINT=YES" i] > br {
  display: none;
}

#results-section p a:link,
#results-section p a:visited {
  font-weight: 600;
  text-decoration: none;
}

#results-section p a:hover {
  text-decoration: underline;
}

/* "Click the division code links ..." as a quiet hint */
#results-section h2 {
  margin: 8px 0 12px;
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
}

#results-section h2::before {
  content: "\f05a";
  margin-right: 8px;
  font-family: var(--icon-font);
  font-weight: 900;
  color: var(--muted);
}

/* 2c. Results table (desktop) */
#results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) {
  border-top: 3px solid var(--brand);
  overflow: hidden;
}

#results-section tr[bgcolor="#FFFF00" i] > td {
  padding: 6px;
  border-bottom: 1px solid var(--border);
}

#results-section tr[bgcolor="#FFFF00" i] div[align] {
  text-align: left;
}

/* Type + Name read as one column headed "Division"; # becomes "Players" */
#results-section tr[bgcolor="#FFFF00" i] > td:is(:nth-child(2), :nth-child(3), :nth-child(4)) font {
  font-size: 0;
}

#results-section tr[bgcolor="#FFFF00" i] > td:nth-child(2) font::before {
  content: "Division";
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
}

#results-section tr[bgcolor="#FFFF00" i] > td:nth-child(4) font::before {
  content: "Players";
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
}

/* Short place headings so 8 places fit: Semis / 3rd -> 3rd, Qtrs / 5th -> 5th */
#results-section tr[bgcolor="#FFFF00" i] > td:is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(n + 8)) font {
  font-size: 0;
  letter-spacing: 0;
}

#results-section tr[bgcolor="#FFFF00" i] > td:nth-child(n + 8) font::after {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
}

#results-section tr[bgcolor="#FFFF00" i] > td:nth-child(8) font::after { content: "3rd"; }
#results-section tr[bgcolor="#FFFF00" i] > td:nth-child(9) font::after { content: "4th"; }
#results-section tr[bgcolor="#FFFF00" i] > td:nth-child(10) font::after { content: "5th"; }
#results-section tr[bgcolor="#FFFF00" i] > td:nth-child(11) font::after { content: "6th"; }
#results-section tr[bgcolor="#FFFF00" i] > td:nth-child(12) font::after { content: "7th"; }
#results-section tr[bgcolor="#FFFF00" i] > td:nth-child(13) font::after { content: "8th"; }

/* Medal colours on the place headings */
#results-section tr[bgcolor="#FFFF00" i] > td:nth-child(n + 6) font::before {
  content: "\f5a2";
  margin-right: 6px;
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--tier-bronze);
}

#results-section tr[bgcolor="#FFFF00" i] > td:nth-child(6) font::before {
  content: "\f091";
  color: var(--tier-gold);
}

#results-section tr[bgcolor="#FFFF00" i] > td:nth-child(7) font::before {
  color: var(--tier-silver-icon);
}

#results-section tr[bgcolor="#FFFF00" i] > td:nth-child(n + 10) font::before {
  color: var(--muted);
}

#results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td[bgcolor] {
  padding: 5px 6px;
  border-top: 0;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

#results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]):last-child > td[bgcolor] {
  border-bottom: 0;
}

#results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]):hover > td[bgcolor] {
  background-color: var(--soft);
}

#results-section td[bgcolor="#FFFFFF" i]:first-child a:link,
#results-section td[bgcolor="#FFFFFF" i]:first-child a:visited {
  min-height: 24px;
  padding: 0 7px;
  font-size: 12px;
}

/* Division: type ("Men's Doubles") quieter, name ("Open") bold */
#results-section tr[bgcolor="#FFFF00" i] > td:nth-child(2),
#results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(2) {
  width: 1%;
  padding-right: 3px;
  white-space: nowrap;
}

#results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(3) {
  padding-left: 4px;
  white-space: nowrap;
}

#results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(2) font {
  font-size: 12px;
  color: var(--secondary);
}

#results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(2) b {
  font-weight: 600;
}

#results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(3) font {
  font-size: 13px;
}

#results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:is(:nth-child(4), :nth-child(5)) font {
  font-size: 12px;
  color: var(--muted);
}

#results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(4) {
  text-align: center;
}

/* Places: small round photo before the name */
#results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(n + 6) font {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.3;
}

/* Placements 1st-4th (fourth review): names black inside a thin metal
   outline by default; the --place-* tokens in :root switch to metal-
   coloured names instead (Option A). Empty places stay blank. */
#results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:is(:nth-child(6), :nth-child(7), :nth-child(8), :nth-child(9)) font:not(:empty) {
  display: inline-flex;
  max-width: 100%;
  padding: 2px 8px;
  border: 1.5px solid var(--place-3-ring);
  border-radius: 8px;
  color: var(--place-3-ink);
}

#results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(6) font:not(:empty) {
  border-color: var(--place-1-ring);
  color: var(--place-1-ink);
}

#results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(7) font:not(:empty) {
  border-color: var(--place-2-ring);
  color: var(--place-2-ink);
}

#results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:is(:nth-child(6), :nth-child(7), :nth-child(8), :nth-child(9)) font:has(img[name="Picture"]) {
  padding-left: 2px;
}

/* Quarter-final places (5th-8th) quieter */
#results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(n + 10) font {
  font-size: 12px;
  color: var(--secondary);
}

#results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(n + 6) b br {
  display: none;
}

#results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(n + 6) img[name="Picture"] {
  order: -1;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  box-sizing: content-box;
}

#results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(6) b {
  font-weight: 700;
}

#results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(7) b {
  font-weight: 600;
}

/* Champion marker: gold ring on the winner's photo, silver on the
   runner-up's (borders, so they print). No photo: a small gold dot. */
#results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(6) img[name="Picture"] {
  padding: 1px;
  border: 2px solid var(--tier-gold);
}

#results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(7) img[name="Picture"] {
  padding: 1px;
  border: 2px solid var(--tier-silver);
}

#results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(6) font:not(:empty):not(:has(img[name="Picture"]))::before {
  content: "";
  flex: none;
  width: 0;
  height: 0;
  border: 4px solid var(--tier-gold);
  border-radius: 50%;
}

/* 2d. "No Results Available at this time." */
#results-section h3 {
  width: fit-content;
  max-width: 100%;
  margin: 8px auto 24px;
  padding: 22px 28px;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  color: var(--secondary);
}

#results-section h3 > br,
#results-section h3 + br,
#results-section h3 + br + br {
  display: none;
}

#results-section h3::before {
  content: "\f091";
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--brand-soft);
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 16px;
  color: var(--brand);
}

/* 2e. Tablet and phone: one card per division */
@media screen and (max-width: 1100px) {
  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) {
    display: block;
    overflow: visible;
    background: none;
    border: 0;
  }

  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) > tbody {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  #results-section tr[bgcolor="#FFFF00" i],
  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:has(> td.horizontalLine) {
    display: none;
  }

  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    padding: 14px 16px 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--brand);
    border-radius: var(--radius-sm);
  }

  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td[bgcolor] {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    background: none;
  }

  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]):hover > td[bgcolor] {
    background: none;
  }

  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(2) {
    width: auto;
    padding-left: 4px;
  }

  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(3) {
    flex: 1 1 0;
    padding-left: 0;
  }

  /* line break after the title: players + draw type on one quiet line */
  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor])::after {
    content: "";
    order: 1;
    flex-basis: 100%;
  }

  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(n + 4) {
    order: 2;
  }

  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(4) {
    padding: 4px 0 10px;
    text-align: left;
    white-space: nowrap;
  }

  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(4) font::after {
    content: " players \00B7";
  }

  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(5) {
    flex: 1 1 0;
    padding: 4px 0 10px;
  }

  /* place lines */
  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(n + 6) {
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    min-height: 34px;
    border-top: 1px solid var(--border);
  }

  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(n + 6):has(> p > font:empty) {
    display: none;
  }

  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(n + 6)::before {
    content: "4th";
    justify-self: start;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    background: var(--tier-bronze-soft);
    font-size: 11px;
    font-weight: 800;
    color: var(--tier-bronze-ink);
  }

  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(6)::before {
    content: "1st";
    background: var(--tier-gold-soft);
    color: var(--tier-gold-ink);
  }

  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(7)::before {
    content: "2nd";
    background: var(--tier-silver-soft);
    color: var(--tier-silver-ink);
  }

  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(8)::before {
    content: "3rd";
  }

  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(10)::before { content: "5th"; background: var(--soft); color: var(--secondary); }
  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(11)::before { content: "6th"; background: var(--soft); color: var(--secondary); }
  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(12)::before { content: "7th"; background: var(--soft); color: var(--secondary); }
  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(13)::before { content: "8th"; background: var(--soft); color: var(--secondary); }
}

@media screen and (min-width: 601px) and (max-width: 1100px) {
  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) > tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* 2f. Printing: just the results */
@media print {
  #results-section p:not(table:has(> tbody > tr[bgcolor="#FFFF00" i]) p),
  #results-section h2,
  #results-section h2 + br {
    display: none;
  }

  /* fit all 13 columns on the page */
  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) {
    table-layout: fixed;
    width: 100%;
  }

  #results-section tr[bgcolor="#FFFF00" i] > td {
    padding: 4px 3px;
    white-space: normal;
  }

  #results-section tr[bgcolor="#FFFF00" i] > td:nth-child(1) { width: 7%; }
  #results-section tr[bgcolor="#FFFF00" i] > td:nth-child(2) { width: 10%; }
  #results-section tr[bgcolor="#FFFF00" i] > td:nth-child(3) { width: 8%; }
  #results-section tr[bgcolor="#FFFF00" i] > td:nth-child(4) { width: 5%; }
  #results-section tr[bgcolor="#FFFF00" i] > td:nth-child(5) { width: 10%; }

  #results-section tr[bgcolor="#FFFF00" i] font::before,
  #results-section tr[bgcolor="#FFFF00" i] font::after {
    font-size: 8px !important;
    letter-spacing: 0.4px !important;
  }

  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) td[bgcolor] {
    padding: 4px 3px;
    overflow-wrap: anywhere;
  }

  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td[bgcolor] font {
    font-size: 9px !important;
  }

  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(2) {
    white-space: normal;
  }

  #results-section tr[bgcolor="#FFFF00" i] > td:is(:nth-child(1), :nth-child(5), :nth-child(6), :nth-child(7)) font {
    font-size: 8px !important;
    letter-spacing: 0.4px !important;
  }

  /* photos left out of the printout; every winner gets the gold dot */
  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) img[name="Picture"] {
    display: none !important;
  }

  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(n + 6) font {
    display: block !important;
  }

  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:nth-child(6) font:not(:empty)::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 4px;
    border: 3px solid var(--tier-gold);
    border-radius: 50%;
  }

  #results-section td[bgcolor="#FFFFFF" i]:first-child a:link,
  #results-section td[bgcolor="#FFFFFF" i]:first-child a:visited {
    min-height: 0;
    padding: 0;
    background: none;
    font-size: 9px;
  }

  #results-section table:has(> tbody > tr[bgcolor="#FFFF00" i]) {
    border: 0;
  }
}


/* ---------------------------------------------------------------------
   C09 · 1. REGISTRATION — LOGIN STEP (#registration)
   Form action, field names, validation and the image submit button are
   unchanged; the button is overlaid so it keeps working.
   --------------------------------------------------------------------- */
#registration > form {
  max-width: 880px;
}

#registration #rules,
#registration #rules table,
#registration #rules tbody,
#registration #rules tr,
#registration #rules td {
  text-align: left;
}

#registration > form > div#rules {
  margin-bottom: 18px;
  padding: 24px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

#registration > form > div#rules h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  padding: 12px 16px;
  background: var(--success-soft);
  border-radius: var(--radius-xs);
  font-size: 15px;
  font-weight: 700;
  color: var(--success);
}

#registration > form > div#rules h1::before {
  content: "\f058";
  font-family: var(--icon-font);
  font-weight: 900;
}

#registration > form > div#rules br {
  display: none;
}

#registration > form > div#rules h3 {
  margin: 18px 0 8px;
  font-size: 16px;
  color: var(--ink);
}

#registration > form > div#rules ol {
  margin: 0;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.9;
}

#registration > form > div#rules ol i {
  margin-right: 4px;
}

#registration > form > br {
  display: none;
}

/* 1a. Login panel */
#registration > form > table[bgcolor] {
  width: 100%;
  margin-bottom: 18px;
  background-color: transparent;
}

#registration > form > table[bgcolor] div#rules {
  padding: 26px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-sm);
}

#registration > form > table[bgcolor] div#rules > table,
#registration > form > table[bgcolor] div#rules table[align="center" i] {
  margin: 0;
}

#registration > form > table[bgcolor] h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}

#registration > form > table[bgcolor] td[height="40"] {
  height: auto;
  padding-bottom: 14px;
}

#registration > form > table[bgcolor] p {
  margin: 0;
  font-size: 14px;
  color: var(--secondary);
}

#registration > form > table[bgcolor] i.fa-solid {
  color: var(--brand);
}

#registration input[name="uid"],
#registration input[name="pwd"] {
  width: 260px;
  max-width: 100%;
  margin-bottom: 4px;
}

#registration div:has(> input[type="image"]) {
  position: relative;
  display: inline-flex;
}

#registration div:has(> input[type="image"])::before {
  content: "Log in";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  min-height: 42px;
  padding: 0 22px;
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--radius-xs);
  font: 700 15px var(--font-body);
}

#registration div:has(> input[type="image"]:hover)::before {
  background: var(--brand-hover);
}

#registration div:has(> input[type="image"]:focus-visible)::before {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

#registration div > input[type="image"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Legacy height="1" / height="-1" cells would clip the notes inside them */
#registration td[height] {
  height: auto;
}

#registration td[bgcolor="#CCCCCC" i] {
  padding: 6px 10px;
  background-color: var(--soft);
  border-radius: var(--radius-xs);
}

#registration font[color="#FF0000" i] {
  color: var(--brand);
}

/* 1b. Entry steps (progress) — current step comes from currentStep.gif */
#entry-steps {
  margin: 0 0 8px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

#entry-steps > table {
  width: 100%;
  border-collapse: collapse;
}

#entry-steps > table > tbody > tr:first-child > td:has(img:not([src*="cancel"])),
#entry-steps > table > tbody > tr:first-child > td:not(:has(*)) {
  display: none;
}

#entry-steps > table > tbody > tr:first-child {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}

#entry-steps > table > tbody > tr:first-child > td:has(img[src*="cancel"]) {
  width: auto;
}

#entry-steps > table > tbody > tr:nth-child(2) {
  display: flex;
  counter-reset: entrystep;
}

#entry-steps > table > tbody > tr:nth-child(2) > td {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 4px;
  counter-increment: entrystep;
}

#entry-steps > table > tbody > tr:nth-child(2) > td div[align] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

#entry-steps > table > tbody > tr:nth-child(2) > td div[align]::before {
  content: counter(entrystep);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  font-weight: 800;
  color: var(--muted);
}

#entry-steps > table > tbody > tr:nth-child(2) p {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}

#entry-steps:has(tr:first-child > td:nth-child(1) img[src*="currentStep"]) tr:nth-child(2) > td:nth-child(1) div[align]::before,
#entry-steps:has(tr:first-child > td:nth-child(2) img[src*="currentStep"]) tr:nth-child(2) > td:nth-child(2) div[align]::before,
#entry-steps:has(tr:first-child > td:nth-child(3) img[src*="currentStep"]) tr:nth-child(2) > td:nth-child(3) div[align]::before,
#entry-steps:has(tr:first-child > td:nth-child(4) img[src*="currentStep"]) tr:nth-child(2) > td:nth-child(4) div[align]::before,
#entry-steps:has(tr:first-child > td:nth-child(5) img[src*="currentStep"]) tr:nth-child(2) > td:nth-child(5) div[align]::before {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--on-brand);
}

#entry-steps:has(tr:first-child > td:nth-child(1) img[src*="currentStep"]) tr:nth-child(2) > td:nth-child(1) p,
#entry-steps:has(tr:first-child > td:nth-child(2) img[src*="currentStep"]) tr:nth-child(2) > td:nth-child(2) p,
#entry-steps:has(tr:first-child > td:nth-child(3) img[src*="currentStep"]) tr:nth-child(2) > td:nth-child(3) p,
#entry-steps:has(tr:first-child > td:nth-child(4) img[src*="currentStep"]) tr:nth-child(2) > td:nth-child(4) p,
#entry-steps:has(tr:first-child > td:nth-child(5) img[src*="currentStep"]) tr:nth-child(2) > td:nth-child(5) p {
  font-weight: 700;
  color: var(--ink);
}


/* ---------------------------------------------------------------------
   C10 · 1. HOTEL AND MAP PAGES (#hotel-section)
   Sources: incWeb_eventHotel.asp (event-hotel.asp) and
            incWeb_eventMap.asp (event-map.asp).
   Both pages share #hotel-section, #hotel-section-title and #hotel-info.
     Hotel page: one div#hotel-info per hotel (the id repeats), each
                 holding .hotel-number / .hotel-address / .hotel-label /
                 .hotel-tag / .hotel-info, then the "Find Hotel" box.
     Map page:   one div#hotel-info with venue cells (td[colspan] rows)
                 and #map_canvas (Google map) and/or an uploaded map image.
   Hotel cards  = #hotel-info:has(.hotel-number)
   Map card     = #hotel-info:not(:has(.hotel-number))
   Cards use the director-card look: white, rounded, red line on top.
   --------------------------------------------------------------------- */
/* Layout: cards shrink to fit their content and sit centred, so a single
   hotel or a map no longer stretches across the page (2nd 10-19 meeting).
   The page title keeps its own full-width row. */
#hotel-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 22px;
}

#hotel-section > * {
  flex: 1 1 100%;
  min-width: 0;
}

/* Hotel cards: up to 520px each, side by side when there's room */
#hotel-section > #hotel-info:has(.hotel-number) {
  flex: 0 1 520px;
}

/* Map card: as wide as its map/venues need, never wider than the page */
#hotel-section > #hotel-info:not(:has(.hotel-number)) {
  flex: 0 1 auto;
  width: fit-content;
  max-width: 100%;
}

/* Legacy spacing: <br>s, empty <p>s and the empty header <div> */
#hotel-section > br,
#hotel-section > div > br,
#hotel-section > p:not(:has(*)),
#hotel-section > p:has(> font[color="#000066" i]:only-child):not(:has(br, img)) {
  display: none;
}

#hotel-section-title {
  margin: 0;
}

#hotel-section-title > h1 {
  margin-bottom: 0;
}

/* Shared card look */
#hotel-section #hotel-info {
  box-sizing: border-box;
  width: auto;
  margin: 0;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  text-align: left;
  color: var(--ink);
}

/* Resets use :where() so the specific layout rules below can win */
:where(#hotel-section #hotel-info) :is(table, tbody, tr, td) {
  display: block;
  width: auto;
  height: auto;
  padding: 0;
}

:where(#hotel-section #hotel-info) p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  text-align: left;
}

/* 1a. Hotel card header: hotel icon + name */
#hotel-info:has(.hotel-number) > table > tbody > tr:first-child h1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.2px;
  color: var(--ink);
}

#hotel-info:has(.hotel-number) > table > tbody > tr:first-child h1::before {
  content: "\f594";
  flex: 0 0 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 15px;
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: var(--radius-xs);
}

/* 1b. Logo beside the details (details go full width when there's no logo) */
#hotel-info:has(.hotel-number) td[width="48%"] {
  display: none;
}

#hotel-info:has(.hotel-number) td[width="48%"]:has(img) {
  display: block;
}

#hotel-info:has(.hotel-number) tr:has(> td[width="48%"] img) {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

#hotel-info:has(.hotel-number) td[width="48%"] div[align="center"] {
  text-align: left;
}

#hotel-info:has(.hotel-number) td[width="48%"] img {
  display: block;
  width: 100%;
  max-width: 120px;
  height: auto;
  border-radius: var(--radius-xs);
}

/* 1c. Phone, address, website: one line each with a red icon */
#hotel-info .hotel-number,
#hotel-info .hotel-address {
  display: block;
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  color: var(--ink);
}

#hotel-info .hotel-address {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  color: var(--secondary);
}

#hotel-info .hotel-number::before,
#hotel-info .hotel-address::before,
#hotel-info:has(.hotel-number) td[width="52%"] > table > tbody > tr:nth-child(3) p::before {
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  text-align: center;
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 13px;
  color: var(--brand);
}

#hotel-info .hotel-number::before {
  content: "\f095";
}

#hotel-info .hotel-address::before {
  content: "\f3c5";
}

#hotel-info:has(.hotel-number) td[width="52%"] > table > tbody > tr:nth-child(3) p {
  position: relative;
  margin-top: 4px;
  padding-left: 26px;
}

#hotel-info:has(.hotel-number) td[width="52%"] > table > tbody > tr:nth-child(3) p::before {
  content: "\f0ac";
}

/* Long booking links stay on one line and end with "…" */
#hotel-info:has(.hotel-number) td[width="52%"] > table > tbody > tr:nth-child(3) a {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 700;
}

/* 1d. Rates and special code: a grey panel, label left, price right */
#hotel-info:has(.hotel-number) table[width="80%"] {
  margin: 14px 0 0;
  padding: 6px 14px;
  background: var(--soft);
  border-radius: var(--radius-xs);
}

#hotel-info:has(.hotel-number) table[width="80%"] tr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}

#hotel-info:has(.hotel-number) table[width="80%"] tr:first-child {
  border-top: 0;
}

#hotel-info .hotel-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--secondary);
}

#hotel-info .hotel-tag {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}

/* Special code: shown as a code chip */
#hotel-info:has(.hotel-number) table[width="80%"] tr:last-child .hotel-tag {
  display: inline-block;
  padding: 3px 10px;
  background: var(--surface);
  border: 1px dashed var(--brand);
  border-radius: var(--radius-xs);
  font-family: Consolas, "Courier New", monospace;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--brand);
}

#hotel-info:has(.hotel-number) table[width="80%"] tr:last-child .hotel-tag:empty {
  display: none;
}

/* Director's notes about the hotel */
#hotel-info .hotel-info {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--secondary);
}

#hotel-info .hotel-info:empty {
  display: none;
}

/* 1e. Hotel partner box (Comencia).
   The ASP prints a blue "Find Hotel" text button and, below it, the partner
   logo; both link to find-hotel.asp (our hotel partner site). The text
   button is hidden; the logo link becomes the action, with a
   "Click here" button drawn after the logo. */
#hotel-section table:has(td[bgcolor="#0071C1" i]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 18px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

#hotel-section table:has(td[bgcolor="#0071C1" i])::before {
  content: "Need more hotel options? Book through our hotel partner.";
  flex: 1 1 auto;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}

#hotel-section table:has(td[bgcolor="#0071C1" i]) > tbody {
  display: block;
}

#hotel-section table:has(td[bgcolor="#0071C1" i]) tr {
  display: block;
  background: none;
}

#hotel-section table:has(td[bgcolor="#0071C1" i]) td {
  display: block;
  padding: 0;
  background: none;
}

/* Blue "Find Hotel" text button: hidden (same link as the logo) */
#hotel-section table:has(td[bgcolor="#0071C1" i]) tr:has(> td[bgcolor="#0071C1" i]) {
  display: none;
}

#hotel-section table:has(td[bgcolor="#0071C1" i]) div[align="center"] {
  text-align: left;
}

/* Partner logo + "Click here" as one link */
#hotel-section table:has(td[bgcolor="#0071C1" i]) a:has(> img):link,
#hotel-section table:has(td[bgcolor="#0071C1" i]) a:has(> img):visited {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  text-decoration: none;
}

#hotel-section table:has(td[bgcolor="#0071C1" i]) a:has(> img) img {
  display: block;
  max-width: 160px;
  max-height: 56px;
  width: auto;
  height: auto;
}

#hotel-section table:has(td[bgcolor="#0071C1" i]) a:has(> img)::after {
  content: "Click here \2192";
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 18px;
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--radius-xs);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

#hotel-section table:has(td[bgcolor="#0071C1" i]) a:has(> img):hover::after {
  background: var(--brand-hover);
}

#hotel-section table:has(td[bgcolor="#0071C1" i]) a:has(> img):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

#hotel-section table:has(td[bgcolor="#0071C1" i]) + br {
  display: none;
}

#hotel-section > div[align] {
  margin: 0;
}

/* No hotels posted yet (hotel page only) */
#hotel-section:not(:has(#hotel-info, img[src="nofile.gif"])) > #hotel-section-title::after {
  content: "No hotel block has been posted for this event yet.";
  display: block;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  margin: 18px auto 0;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  font-size: 15px;
  color: var(--secondary);
}

/* 1f. Map card: venue tiles, then the map full width */
#hotel-info:not(:has(.hotel-number)) > table > tbody > tr:first-child h1 {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--brand);
}

#hotel-info:not(:has(.hotel-number)) > table > tbody > tr:nth-child(2) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

#hotel-info:not(:has(.hotel-number)) > table > tbody > tr:nth-child(2) > td {
  flex: 1 1 240px;
  position: relative;
  padding: 14px 16px 14px 42px;
  background: var(--soft);
  border-radius: var(--radius-xs);
}

#hotel-info:not(:has(.hotel-number)) > table > tbody > tr:nth-child(2) > td::before {
  content: "\f3c5";
  position: absolute;
  top: 15px;
  left: 17px;
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 15px;
  line-height: 1;
  color: var(--brand);
}

#hotel-info:not(:has(.hotel-number)) > table > tbody > tr:nth-child(2) > td p {
  color: var(--secondary);
}

#hotel-info:not(:has(.hotel-number)) > table > tbody > tr:nth-child(2) > td p:first-child {
  margin-bottom: 2px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink);
}

#hotel-info:not(:has(.hotel-number)) > table > tbody > tr:nth-child(3) div[align="center"] {
  text-align: left;
}

#hotel-info:not(:has(.hotel-number)) > table > tbody > tr:nth-child(3) td[width="54%"] > div > p:not(:has(*)) {
  display: none;
}

/* Google map: full card width (overrides the 700 x 500 written in the page head) */
#hotel-section #hotel-info #map_canvas {
  width: 760px;
  max-width: 100%;
  height: 440px;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
}

/* Map image uploaded by the director */
#hotel-info:not(:has(.hotel-number)) img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 18px auto 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
}

/* 1g. No venue on file: the address prints as plain text; hide the broken image */
#hotel-section > p > font[color="#000066" i] {
  display: block;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
}

#hotel-section img[src="nofile.gif"] {
  display: none;
}

/* 1h. Hotel and Map · phone */
@media (max-width: 600px) {
  #hotel-section {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding-top: 22px;
  }

  #hotel-section #hotel-info {
    padding: 18px;
  }

  #hotel-info:has(.hotel-number) tr:has(> td[width="48%"] img) {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
  }

  #hotel-section #hotel-info #map_canvas {
    height: 300px;
  }

  #hotel-section table:has(td[bgcolor="#0071C1" i]) {
    padding: 16px 18px;
  }
}


/* ---------------------------------------------------------------------
   C11 · 1. SPONSORS PAGE (event-sponsors.asp → incWeb_eventSponsors.asp)
   Hooks: #sponsors-title, #sponsors-list (one per level, nested inside
   each other because the ASP never closes them), h5 level name,
   #sponsors-gold / #sponsors-silver / #sponsors-bronze (repeat per sponsor).
   Each level keeps its own colour (gold, silver, bronze) on the level
   label and on the top edge of each sponsor card. No red line here.
   The nested layout tables are flattened (display: contents) so every
   sponsor becomes one card in a grid:
     gold = one wide card per row, silver = two per row, bronze = three.
   --------------------------------------------------------------------- */
#sponsors-title {
  padding: 36px 0 0;
}

#sponsors-title > h1 {
  margin-bottom: 26px;
}

#sponsors-main:not(:has(*)) {
  display: none;
}

/* No sponsors yet: same notice style and wording pattern as the hotel
   page ("No hotel block has been posted for this event yet.") */
body:not(:has(#sponsors-list)) #sponsors-title::after {
  content: "No sponsors have been posted for this event yet.";
  display: block;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  margin: 18px auto 0;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  font-size: 15px;
  color: var(--secondary);
}

/* Level colours (set on each level's table) */
#sponsors-list > table[width="950"] {
  --tier: var(--border);
  --tier-soft: var(--soft);
  --tier-ink: var(--ink);
  --tier-icon: var(--secondary);
  display: block;
  margin: 0 auto 32px;
  background: transparent;
}

/* The ASP never closes the level <div>s, so the bottom table holding the
   footer ends up inside them: keep it full width with no cell padding. */
body:has(#sponsors-title) table[width="100%"]:has(#footer),
body:has(#sponsors-title) table[width="100%"]:has(#footer) > tbody,
body:has(#sponsors-title) table[width="100%"]:has(#footer) > tbody > tr,
body:has(#sponsors-title) table[width="100%"]:has(#footer) > tbody > tr > td {
  display: block;
  width: 100%;
  padding: 0;
}

#sponsors-list > table[width="950"]:has(#sponsors-gold) {
  --tier: var(--tier-gold);
  --tier-soft: var(--tier-gold-soft);
  --tier-ink: var(--tier-gold-ink);
  --tier-icon: var(--tier-gold);
}

#sponsors-list > table[width="950"]:has(#sponsors-silver) {
  --tier: var(--tier-silver);
  --tier-soft: var(--tier-silver-soft);
  --tier-ink: var(--tier-silver-ink);
  --tier-icon: var(--tier-silver-icon);
}

#sponsors-list > table[width="950"]:has(#sponsors-bronze) {
  --tier: var(--tier-bronze);
  --tier-soft: var(--tier-bronze-soft);
  --tier-ink: var(--tier-bronze-ink);
  --tier-icon: var(--tier-bronze);
}

#sponsors-list > table[width="950"] > tbody,
#sponsors-list > table[width="950"] > tbody > tr,
#sponsors-list > table[width="950"] > tbody > tr > td {
  display: block;
  width: auto;
  padding: 0;
  background: transparent;
}

/* Each level is centred: label above, cards centred below */
#sponsors-list > table[width="950"] > tbody > tr:first-child > td {
  text-align: center;
}

/* 1a. Level label: a rounded badge with a medal icon, in the level colour */
#sponsors-list h5 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 7px 14px;
  background: var(--tier-soft);
  border: 1px solid var(--tier);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--tier-ink);
}

#sponsors-list h5::before {
  content: "\f5a2";
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--tier-icon);
}

/* 1b. Flatten the layout tables inside each level */
:where(#sponsors-list > table[width="950"] > tbody > tr:nth-child(2) > td) :is(table, tbody, tr, td) {
  display: contents;
}

/* Spacer <br>s between the layout tables (not the line breaks inside
   a sponsor's details) */
:where(#sponsors-list > table[width="950"] > tbody > tr:nth-child(2) > td) > br,
:where(#sponsors-list > table[width="950"] > tbody > tr:nth-child(2) > td) :is(table, tbody, tr, td) > br {
  display: none;
}

/* Cards shrink to fit and sit centred (like the hotel and map cards).
   Size keeps the level order: gold widest, then silver, then bronze. */
#sponsors-list > table[width="950"] > tbody > tr:nth-child(2) > td {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

#sponsors-list tr:has(> td > #sponsors-gold) {
  flex: 0 1 720px;
}

#sponsors-list table:has(> tbody > tr > td > #sponsors-silver) {
  flex: 0 1 400px;
}

#sponsors-list table:has(> tbody > tr > td > #sponsors-bronze) {
  flex: 0 1 260px;
}

/* 1c. Sponsor cards (one per sponsor) */
#sponsors-list tr:has(> td > #sponsors-gold),
#sponsors-list table:has(> tbody > tr > td > #sponsors-silver),
#sponsors-list table:has(> tbody > tr > td > #sponsors-bronze) {
  display: flex;
  align-items: center;
  gap: 18px;
  box-sizing: border-box;
  min-width: 0;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--tier);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

#sponsors-list tr:has(> td > #sponsors-gold) {
  gap: 28px;
  padding: 24px 28px;
}

#sponsors-list table:has(> tbody > tr > td > #sponsors-bronze) {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

#sponsors-list tr:has(> td > #sponsors-gold) > td,
#sponsors-list table:has(> tbody > tr > td > #sponsors-silver) td,
#sponsors-list table:has(> tbody > tr > td > #sponsors-bronze) td {
  display: block;
  min-width: 0;
  padding: 0;
}

/* Logo cell (hidden when the sponsor has no logo) */
#sponsors-list tr:has(> td > #sponsors-gold) > td:not(:has(img)),
#sponsors-list table:has(> tbody > tr > td > #sponsors-silver) td:not(:has(img, #sponsors-silver)),
#sponsors-list table:has(> tbody > tr > td > #sponsors-bronze) td:not(:has(img, #sponsors-bronze)) {
  display: none;
}

#sponsors-list tr:has(> td > #sponsors-gold) > td:has(img) {
  flex: 0 0 240px;
}

#sponsors-list table:has(> tbody > tr > td > #sponsors-silver) td:has(img) {
  flex: 0 0 120px;
}

#sponsors-list table:has(> tbody > tr > td > #sponsors-bronze) td:has(img) {
  width: 100%;
}

#sponsors-list td:has(> #sponsors-gold),
#sponsors-list td:has(> #sponsors-silver) {
  flex: 1 1 auto;
}

#sponsors-list div[align="center"] {
  text-align: left;
}

#sponsors-list img[name="Tournament Sponsor"] {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 110px;
  object-fit: contain;
}

#sponsors-list tr:has(> td > #sponsors-gold) img[name="Tournament Sponsor"] {
  max-height: 150px;
}

/* 1d. Sponsor details: name on the first line, then phone, address, note */
#sponsors-gold,
#sponsors-silver,
#sponsors-bronze {
  width: auto;
  padding: 0;
}

#sponsors-gold h4,
#sponsors-silver h4,
#sponsors-bronze h4 {
  width: auto;
  margin: 0;
  padding: 0;
  background: none;
  text-align: left;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--secondary);
  overflow-wrap: anywhere;
}

#sponsors-gold h4::first-line,
#sponsors-silver h4::first-line,
#sponsors-bronze h4::first-line {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

#sponsors-gold h4::first-line {
  font-size: 20px;
}

#sponsors-list h4 a:link,
#sponsors-list h4 a:visited {
  font-weight: 700;
  text-decoration: none;
}

#sponsors-list h4 a:hover {
  text-decoration: underline;
}

/* 1e. Sponsors page · phone */
@media (max-width: 600px) {
  #sponsors-title {
    padding-top: 22px;
  }

  #sponsors-list tr:has(> td > #sponsors-gold) {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
  }

  #sponsors-list tr:has(> td > #sponsors-gold) > td:has(img) {
    flex-basis: auto;
  }

  #sponsors-list tr:has(> td > #sponsors-gold),
  #sponsors-list table:has(> tbody > tr > td > #sponsors-silver),
  #sponsors-list table:has(> tbody > tr > td > #sponsors-bronze) {
    flex-basis: 100%;
  }

  #sponsors-list table:has(> tbody > tr > td > #sponsors-silver) td:has(img) {
    flex-basis: 88px;
  }
}


/* ---------------------------------------------------------------------
   C12 · 1. CONTACT DIRECTOR PAGE (contact-director.asp →
   incWeb_contactDirector.asp)
   This page has no shared wrapper (see C02 · 1b in the core, which fixes
   the squeezed banner and blue footer links). Its content is a green
   bordered table (bordercolor="#339966"), shown here as the director card:
   white, rounded, red top line, centred.
   --------------------------------------------------------------------- */
body > table:not(.main-site-wrapper):has(#topMenu1 > table) > tbody > tr > td > div[align="center"]:not(:has(img, a, table)) {
  display: none;
}

table:has(> tbody > tr > td > table[bordercolor="#339966" i]) {
  display: block;
  border: 0;
  box-sizing: border-box;
  width: calc(100% - (var(--gutter) * 2));
  max-width: var(--page-max);
  height: auto;
  margin: 0 auto;
  padding: 36px 0 8px;
}

table:has(> tbody > tr > td > table[bordercolor="#339966" i]) > tbody,
table:has(> tbody > tr > td > table[bordercolor="#339966" i]) > tbody > tr,
table:has(> tbody > tr > td > table[bordercolor="#339966" i]) > tbody > tr > td {
  display: block;
  width: auto;
  padding: 0;
}

table:has(> tbody > tr > td > table[bordercolor="#339966" i]) p[align="left"] {
  display: none;
}

/* The card */
table[bordercolor="#339966" i] {
  display: block;
  box-sizing: border-box;
  width: 440px;
  max-width: 100%;
  margin: 0 auto;
  padding: 24px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  text-align: left;
}

table[bordercolor="#339966" i] > tbody,
table[bordercolor="#339966" i] > tbody > tr,
table[bordercolor="#339966" i] > tbody > tr > td {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
}

table[bordercolor="#339966" i] div[align="center"] {
  text-align: left;
}

/* Heading cell: "Contact Event Director" */
table[bordercolor="#339966" i] td[bgcolor] {
  margin-bottom: 12px;
}

table[bordercolor="#339966" i] td[bgcolor] font {
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
}

/* Details: name (first line), email button, phone */
table[bordercolor="#339966" i] > tbody > tr:last-child div {
  font-size: 15px;
  line-height: 1.7;
  color: var(--secondary);
}

table[bordercolor="#339966" i] > tbody > tr:last-child div::first-line {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}

table[bordercolor="#339966" i] a[href^="mailto:" i]:link,
table[bordercolor="#339966" i] a[href^="mailto:" i]:visited {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  margin: 10px 0 6px;
  padding: 0 16px;
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--radius-xs);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}

table[bordercolor="#339966" i] a[href^="mailto:" i]::after {
  content: "\f0e0";
  font-family: var(--icon-font);
  font-weight: 900;
}

table[bordercolor="#339966" i] a[href^="mailto:" i]:hover {
  background: var(--brand-hover);
}

table[bordercolor="#339966" i] a[href^="mailto:" i] + br {
  display: none;
}

@media (max-width: 600px) {
  table:has(> tbody > tr > td > table[bordercolor="#339966" i]) {
    padding-top: 22px;
  }

  table[bordercolor="#339966" i] {
    padding: 20px;
  }
}


/* ---------------------------------------------------------------------
   C13 · 1. PRIZES PAGE (event-prizes.asp → incWeb_eventPrizes.asp)
   The prize amounts come from the prize-money data (JSON file or
   allPrizeMoney), so only the table's look changes here. No ids: the
   table is the 800px table with the yellow (#FFFF00) header row sitting
   directly in the page wrapper; the title is the h1 just above it.
   Shown as a clean card table: medal colours on 1st / 2nd / 3rd, amounts
   right-aligned, notes under their division, divider <hr> rows removed.
   On phones the table scrolls sideways with the Division column pinned.
   --------------------------------------------------------------------- */
body:has(table.main-site-wrapper > tbody > tr > td > table[width="800"] > tbody > tr[bgcolor="#FFFF00" i]) table.main-site-wrapper > tbody > tr > td > h1 {
  box-sizing: border-box;
  width: calc(100% - (var(--gutter) * 2));
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 36px 0 22px;
  text-align: left;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--ink);
}

body:has(table.main-site-wrapper > tbody > tr > td > table[width="800"] > tbody > tr[bgcolor="#FFFF00" i]) table.main-site-wrapper > tbody > tr > td > h1 > font {
  font-size: inherit;
  color: inherit;
}

/* Event name becomes a small label above "PRIZES" */
body:has(table.main-site-wrapper > tbody > tr > td > table[width="800"] > tbody > tr[bgcolor="#FFFF00" i]) table.main-site-wrapper > tbody > tr > td > h1::first-line {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--brand);
}

/* The card */
table.main-site-wrapper > tbody > tr > td > table[width="800"]:has(> tbody > tr[bgcolor="#FFFF00" i]) {
  display: block;
  box-sizing: border-box;
  width: calc(100% - (var(--gutter) * 2));
  max-width: var(--page-max);
  margin: 0 auto;
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  text-align: left;
}

table[width="800"]:has(> tbody > tr[bgcolor="#FFFF00" i]) > tbody {
  display: table;
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

table[width="800"]:has(> tbody > tr[bgcolor="#FFFF00" i]) td {
  height: auto;
  padding: 13px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}

table[width="800"]:has(> tbody > tr[bgcolor="#FFFF00" i]) td p {
  margin: 0;
}

table[width="800"]:has(> tbody > tr[bgcolor="#FFFF00" i]) td font {
  font-size: inherit;
  color: inherit;
}

/* Amount columns line up on the right. The ASP writes "$" and the amount
   with a line break between them, which shows as "$ 500"; the negative
   word spacing closes that gap (amount cells hold no other spaces). */
table[width="800"]:has(> tbody > tr[bgcolor="#FFFF00" i]) tr > td:not(:first-child):not([colspan]) {
  text-align: right;
}

table[width="800"]:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:not(:first-child):not([colspan]):not([width="106"]) {
  word-spacing: -0.28em;
}

/* Division name */
table[width="800"]:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td:first-child,
table[width="800"]:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td[width="106"] {
  font-weight: 700;
  text-align: left;
}

/* When there's no 1st-place amount, the division is split over two cells */
table[width="800"]:has(> tbody > tr[bgcolor="#FFFF00" i]) td[width="111"] {
  width: 1%;
  padding-right: 4px;
}

table[width="800"]:has(> tbody > tr[bgcolor="#FFFF00" i]) td[width="106"] {
  padding-left: 0;
  text-align: left;
}

/* 1st place amount stands out */
table[width="800"]:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:not([bgcolor]) > td[colspan="2"] + td {
  font-weight: 800;
}

/* Header row (was bright yellow) */
table[width="800"]:has(> tbody > tr[bgcolor="#FFFF00" i]) tr[bgcolor="#FFFF00" i] > td {
  padding-top: 11px;
  padding-bottom: 11px;
  background: var(--soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--secondary);
}

table[width="800"]:has(> tbody > tr[bgcolor="#FFFF00" i]) tr[bgcolor="#FFFF00" i] font {
  color: inherit;
}

/* Medal icons on 1st, 2nd, 3rd */
table[width="800"]:has(> tbody > tr[bgcolor="#FFFF00" i]) tr[bgcolor="#FFFF00" i] > td:nth-child(2)::before,
table[width="800"]:has(> tbody > tr[bgcolor="#FFFF00" i]) tr[bgcolor="#FFFF00" i] > td:nth-child(3)::before,
table[width="800"]:has(> tbody > tr[bgcolor="#FFFF00" i]) tr[bgcolor="#FFFF00" i] > td:nth-child(4)::before {
  content: "\f5a2";
  margin-right: 6px;
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0;
}

table[width="800"]:has(> tbody > tr[bgcolor="#FFFF00" i]) tr[bgcolor="#FFFF00" i] > td:nth-child(2)::before {
  color: var(--tier-gold);
}

table[width="800"]:has(> tbody > tr[bgcolor="#FFFF00" i]) tr[bgcolor="#FFFF00" i] > td:nth-child(3)::before {
  color: var(--tier-silver-icon);
}

table[width="800"]:has(> tbody > tr[bgcolor="#FFFF00" i]) tr[bgcolor="#FFFF00" i] > td:nth-child(4)::before {
  color: var(--tier-bronze);
}

/* Notes ("Paid per team", trophies …) */
table[width="800"]:has(> tbody > tr[bgcolor="#FFFF00" i]) td[colspan="7"] {
  white-space: normal;
  font-size: 14px;
  font-style: italic;
  color: var(--secondary);
  text-align: left;
}

/* A division row followed by its note: no line between them */
table[width="800"]:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:has(> td[colspan="2"]):has(+ tr > td[colspan="7"]) > td {
  border-bottom: 0;
}

table[width="800"]:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:has(> td[colspan="2"]) + tr:has(> td[colspan="7"]) > td {
  padding-top: 0;
}

/* Last division: no line against the card edge (the last row is an <hr> row) */
table[width="800"]:has(> tbody > tr[bgcolor="#FFFF00" i]) > tbody > tr:nth-last-child(2) > td {
  border-bottom: 0;
}

/* Divider rows (<hr>) */
table[width="800"]:has(> tbody > tr[bgcolor="#FFFF00" i]) tr:has(> td > hr) {
  display: none;
}

/* The spacer paragraph under the table */
table.main-site-wrapper > tbody > tr > td > table[width="800"]:has(> tbody > tr[bgcolor="#FFFF00" i]) + p {
  margin: 0;
  height: 8px;
  overflow: hidden;
}

@media (max-width: 600px) {
  body:has(table.main-site-wrapper > tbody > tr > td > table[width="800"] > tbody > tr[bgcolor="#FFFF00" i]) table.main-site-wrapper > tbody > tr > td > h1 {
    padding-top: 22px;
  }

  table[width="800"]:has(> tbody > tr[bgcolor="#FFFF00" i]) td {
    padding: 11px 12px;
    font-size: 14px;
  }

  /* Division column stays visible while the amounts scroll */
  table[width="800"]:has(> tbody > tr[bgcolor="#FFFF00" i]) tr > td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: 1px 0 0 var(--border);
  }
}


/* ---------------------------------------------------------------------
   C14 · 1. DIVISIONS AND FEES PAGE (divisions-fees.asp →
   incWeb_divisionsFees.asp + inc_divFeesData.asp)
   Hook: #divisions-fees. Inside it (public view):
     h1 page title · red intro line · fee chart (table width=580,
     bgcolor=#000066) · "Additional Items" h1 + table (bgcolor=#000066) ·
     "… Offered" h1 · 800px table holding one table per division type
     (yellow type row, cyan header row, grey / team-coloured rows).
   Cards follow the site pattern: white, rounded, red top line, sized to
   their content and centred. Wide division tables scroll inside their
   own card on phones. The director's restriction-editing view (text
   inputs in the table) keeps its inputs; only colours and spacing apply.
   --------------------------------------------------------------------- */
#divisions-fees {
  box-sizing: border-box;
  width: calc(100% - (var(--gutter) * 2));
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 36px 0 8px;
  text-align: left;
  color: var(--ink);
}

#divisions-fees > form {
  margin: 0;
}

#divisions-fees > form > br,
#divisions-fees > br {
  display: none;
}

/* 1a. Page title ("DIVISIONS AND FEES") in sentence case */
#divisions-fees > h1:first-of-type {
  margin: 0 0 6px;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.8px;
  color: var(--ink);
  text-transform: lowercase;
}

#divisions-fees > h1:first-of-type::first-letter {
  text-transform: uppercase;
}

#divisions-fees > h1:first-of-type strong {
  font-weight: inherit;
}

/* Intro line ("Divisions and fees for this event.") */
#divisions-fees > form > font[color="#FF0000" i][size="4"] {
  display: block;
  margin: 0 0 24px;
  font-size: 16px;
  color: var(--secondary);
}

/* Section headings ("Additional Items to Purchase", "Division Offered") */
#divisions-fees > form > h1 {
  margin: 34px 0 16px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.2px;
  color: var(--ink);
  text-transform: lowercase;
}

#divisions-fees > form > h1::first-letter {
  text-transform: uppercase;
}

/* Shared card look */
#divisions-fees table[width="580"][bgcolor="#000066" i],
#divisions-fees > form > table[bgcolor="#000066" i]:not([width]),
#divisions-fees table[width="800"] > tbody > tr > td {
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

#divisions-fees p {
  margin: 0;
}

/* 1b. Fee chart: one card, label left, amount right */
#divisions-fees table[width="580"][bgcolor="#000066" i] {
  display: block;
  width: fit-content;
  min-width: min(420px, 100%);
  max-width: 100%;
  margin: 0 auto;
  padding: 16px 20px;
}

#divisions-fees table[width="580"][bgcolor="#000066" i]::before {
  content: "ENTRY FEES";
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--brand);
}

#divisions-fees table[width="580"][bgcolor="#000066" i] > tbody,
#divisions-fees table[width="580"][bgcolor="#000066" i] > tbody > tr,
#divisions-fees table[width="580"][bgcolor="#000066" i] > tbody > tr > td {
  display: block;
  width: auto;
  padding: 0;
}

#divisions-fees table[width="580"][bgcolor="#000066" i] table {
  width: 100%;
  border-collapse: collapse;
}

#divisions-fees table[width="580"][bgcolor="#000066" i] table tr {
  background: none;
}

#divisions-fees table[width="580"][bgcolor="#000066" i] table td {
  width: auto;
  height: auto;
  padding: 7px 0;
  border-top: 1px solid var(--border);
  background: none;
  font-size: 14px;
  vertical-align: top;
}

#divisions-fees table[width="580"][bgcolor="#000066" i] table tr:first-child td {
  border-top: 0;
}

#divisions-fees table[width="580"][bgcolor="#000066" i] table td:first-child:not([colspan]) div {
  text-align: left;
}

#divisions-fees table[width="580"][bgcolor="#000066" i] table td:first-child:not([colspan]) b,
#divisions-fees table[width="580"][bgcolor="#000066" i] table td:first-child:not([colspan]) strong {
  font-weight: 600;
  color: var(--secondary);
}

#divisions-fees table[width="580"][bgcolor="#000066" i] table td:last-child:not([colspan]) {
  padding-left: 24px;
}

#divisions-fees table[width="580"][bgcolor="#000066" i] table td:last-child:not([colspan]) div {
  text-align: right;
}

#divisions-fees table[width="580"][bgcolor="#000066" i] table td:last-child:not([colspan]) b {
  font-weight: 800;
  color: var(--ink);
}

#divisions-fees table[width="580"][bgcolor="#000066" i] font[color="#000000" i] {
  color: inherit;
}

/* Notes under a fee (early discount, late fee, at-the-door fee) */
#divisions-fees table[width="580"][bgcolor="#000066" i] table td[colspan] {
  padding-top: 0;
  border-top: 0;
}

#divisions-fees table[width="580"][bgcolor="#000066" i] table td[colspan] div {
  text-align: left;
}

#divisions-fees table[width="580"][bgcolor="#000066" i] table td[colspan] font[size="1"] {
  font-size: 12px;
  line-height: 1.5;
  color: var(--secondary);
}

/* Member-discount warning (capitals, red in the ASP) */
#divisions-fees table[width="580"][bgcolor="#000066" i] table td[colspan] font[color="#FF0000" i]:not([size]) {
  display: block;
  padding: 10px 14px;
  background: var(--warning-soft);
  border-left: 4px solid var(--warning-accent);
  border-radius: var(--radius-xs);
  font-size: 13px;
  color: var(--warning);
}

/* 1c. Additional items to purchase */
#divisions-fees > form > table[bgcolor="#000066" i]:not([width]) {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 6px 0;
  overflow-x: auto;
}

#divisions-fees > form > table[bgcolor="#000066" i]:not([width]) > tbody,
#divisions-fees > form > table[bgcolor="#000066" i]:not([width]) > tbody > tr,
#divisions-fees > form > table[bgcolor="#000066" i]:not([width]) > tbody > tr > td {
  display: block;
  padding: 0;
}

#divisions-fees table[width="750"] {
  width: auto;
  max-width: 760px;
  border-collapse: collapse;
}

#divisions-fees table[width="750"] tr {
  background: none;
}

#divisions-fees table[width="750"] td {
  padding: 9px 16px;
  border-top: 1px solid var(--border);
  background: none;
  font-size: 14px;
  line-height: 1.55;
  vertical-align: top;
}

#divisions-fees table[width="750"] div[align="right"] {
  text-align: left;
}

#divisions-fees table[width="750"] tr:first-child td {
  border-top: 0;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--secondary);
}

#divisions-fees table[width="750"] tr:first-child strong {
  font-weight: 700;
}

#divisions-fees table[width="750"] tr:not(:first-child) td:first-child {
  min-width: 160px;
}

#divisions-fees table[width="750"] tr:not(:first-child) td:last-child {
  text-align: right;
  white-space: nowrap;
}

#divisions-fees table[width="750"] tr:first-child td:last-child {
  text-align: right;
}

#divisions-fees table[width="750"] td:nth-child(2) {
  color: var(--secondary);
}

#divisions-fees table[width="750"] img {
  display: block;
  max-width: 120px;
  height: auto;
  margin-top: 8px;
  border-radius: var(--radius-xs);
}

/* 1d. Divisions offered: one card per division type, centred, wrapping */
#divisions-fees table[width="800"] {
  display: block;
  width: auto;
}

/* Two columns of division-type cards (5th 10-19 meeting), one column
   below 980px */
#divisions-fees table[width="800"] > tbody {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}

#divisions-fees table[width="800"] > tbody > tr {
  display: contents;
}

/* Cards fill their column; a type with extra columns (weight, belt)
   scrolls inside its card if needed */
#divisions-fees table[width="800"] > tbody > tr > td {
  display: block;
  min-width: 0;
  padding: 14px 14px 10px;
  overflow-x: auto;
}

#divisions-fees table[width="800"] > tbody > tr > td > div {
  text-align: left;
}

#divisions-fees table[width="800"] table {
  width: 100%;
  border-collapse: collapse;
}

#divisions-fees table[width="800"] table td {
  height: auto;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink);
}

#divisions-fees table[width="800"] table tr:last-child td {
  border-bottom: 0;
}

#divisions-fees table[width="800"] table tr {
  background: none;
}

/* Division type name (was the yellow row) = card heading */
#divisions-fees table[width="800"] tr[bgcolor="#FFFF00" i] > td {
  padding: 0 0 8px;
  border-bottom: 0;
  background: none;
}

#divisions-fees table[width="800"] tr[bgcolor="#FFFF00" i] div {
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

/* Column headings (was the cyan row) */
#divisions-fees table[width="800"] tr[bgcolor="#00FFFF" i] > td {
  padding-top: 6px;
  padding-bottom: 6px;
  background: var(--soft);
  white-space: normal;
  vertical-align: bottom;
}

#divisions-fees table[width="800"] tr[bgcolor="#00FFFF" i] font[size="1"] {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--secondary);
}

/* Division name column */
#divisions-fees table[width="800"] table tr:not([bgcolor]) > td:first-child {
  font-weight: 700;
}

/* Rows alternate white and light grey (5th 10-19 meeting); team
   divisions keep their light tint */
#divisions-fees table[width="800"] td[bgcolor="#E8E8E8" i],
#divisions-fees table[width="800"] td[bgcolor="#D7D7D7" i] {
  background: var(--surface);
}

#divisions-fees table[width="800"] table tr:not([bgcolor]):nth-child(even) > td[bgcolor="#E8E8E8" i],
#divisions-fees table[width="800"] table tr:not([bgcolor]):nth-child(even) > td[bgcolor="#D7D7D7" i] {
  background: var(--zebra);
}

#divisions-fees table[width="800"] td[bgcolor="#9BFFFF" i],
#divisions-fees table[width="800"] td[bgcolor="#CAFFFF" i] {
  background: var(--team-soft);
}

#divisions-fees table[width="800"] td[bgcolor="#FFAEFF" i],
#divisions-fees table[width="800"] td[bgcolor="#FF91FF" i] {
  background: var(--team-draw-soft);
}

#divisions-fees table[width="800"] td[bgcolor="#FF0000" i] {
  background: var(--brand-soft);
}

/* Online column: a check mark (or a dash) instead of a clickable box.
   Only in the public view; the director's restriction view keeps the
   real checkboxes. */
#divisions-fees:not(:has(input[name^="maxInDiv"])) input#offered[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 0;
  pointer-events: none;
}

#divisions-fees:not(:has(input[name^="maxInDiv"])) input#offered[type="checkbox"]::before {
  content: "\2013";
  font: 700 14px var(--font-body);
  color: var(--muted);
}

#divisions-fees:not(:has(input[name^="maxInDiv"])) input#offered[type="checkbox"]:checked::before {
  content: "\f00c";
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 14px;
  color: var(--success);
}

#divisions-fees table[width="800"] td:has(> p > font > input#offered) p {
  text-align: center;
}

/* Director's restriction view: text inputs inside the table */
#divisions-fees table[width="800"] input[type="text"] {
  width: 4em;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font: 14px var(--font-body);
}

/* Error / "not set up" notices */
#divisions-fees .alert-error-box {
  margin: 0 0 20px;
  padding: 14px 18px;
  background: var(--warning-soft);
  border: 1px solid var(--warning-line);
  border-left: 5px solid var(--warning-accent);
  border-radius: var(--radius-xs);
  color: var(--warning);
}

@media (max-width: 980px) {
  #divisions-fees table[width="800"] > tbody {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 1e. Divisions and fees · phone */
@media (max-width: 600px) {
  #divisions-fees {
    padding-top: 22px;
  }

  #divisions-fees table[width="580"][bgcolor="#000066" i] {
    width: auto;
    min-width: 0;
    padding: 16px 18px;
  }

  #divisions-fees table[width="800"] > tbody > tr > td {
    padding: 14px 0 8px 14px;
  }

  /* Division names stay visible while the fee columns scroll */
  #divisions-fees table[width="800"] table tr:not([bgcolor="#FFFF00" i]) > td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: 1px 0 0 var(--border);
  }

  /* Additional items: each item stacks (name and price, then description) */
  #divisions-fees > form > table[bgcolor="#000066" i]:not([width]) {
    width: auto;
    padding: 0;
  }

  #divisions-fees table[width="750"],
  #divisions-fees table[width="750"] > tbody {
    display: block;
    width: auto;
    max-width: none;
  }

  #divisions-fees table[width="750"] tr:first-child {
    display: none;
  }

  #divisions-fees table[width="750"] tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 14px;
    padding: 14px 16px;
    border-top: 1px solid var(--border);
  }

  #divisions-fees table[width="750"] tr:nth-child(2) {
    border-top: 0;
  }

  #divisions-fees table[width="750"] td {
    display: block;
    padding: 0;
    border-top: 0;
  }

  #divisions-fees table[width="750"] tr:not(:first-child) td:first-child {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  #divisions-fees table[width="750"] tr:not(:first-child) td:last-child {
    grid-column: 2;
    grid-row: 1;
  }

  #divisions-fees table[width="750"] tr:not(:first-child) td:nth-child(2):not(:last-child) {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 4px;
    font-size: 14px;
  }
}


/* ---------------------------------------------------------------------
   C15 · 1. MATCH REPORTING (match-reporting.asp → incWeb_matchReporting.asp
   + inc_mediaOptions.asp) — the "Media" menu page
   Neither media page uses the shared wrapper class; C02 · 1b in the core
   handles their outer tables. Hook here: form[name="form1"] holding the
   905px table whose first row is yellow (#FFFF00).
   The participant / division check list under "Generate Report" is
   written by code_media.asp (not supplied), so it only gets the page's
   type and spacing, not a specific layout yet.
   --------------------------------------------------------------------- */
form[name="form1"]:has(> table[width="905"] > tbody > tr[bgcolor="#FFFF00" i]) {
  box-sizing: border-box;
  width: calc(100% - (var(--gutter) * 2));
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 36px 0 8px;
  text-align: left;
}

form[name="form1"] > table[width="905"]:has(> tbody > tr[bgcolor="#FFFF00" i]) {
  display: block;
  width: auto;
}

form[name="form1"] > table[width="905"]:has(> tbody > tr[bgcolor="#FFFF00" i]) > tbody {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  column-gap: 28px;
  align-items: start;
}

form[name="form1"] > table[width="905"] > tbody > tr {
  display: contents;
}

form[name="form1"] > table[width="905"] > tbody > tr > td {
  display: block;
  padding: 0;
}

/* Title row ("Match Reporting", was yellow) */
form[name="form1"] > table[width="905"] > tbody > tr[bgcolor="#FFFF00" i] > td {
  grid-column: 1 / -1;
  margin-bottom: 18px;
  background: none;
}

form[name="form1"] > table[width="905"] > tbody > tr[bgcolor="#FFFF00" i] div[align="center"] {
  text-align: left;
}

form[name="form1"] > table[width="905"] > tbody > tr[bgcolor="#FFFF00" i] font[size="4"] {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.8px;
  color: var(--ink);
}

/* Spacer cell */
form[name="form1"] > table[width="905"] > tbody > tr > td:nth-child(2):not([colspan]) {
  display: none;
}

/* Intro text */
form[name="form1"] > table[width="905"] > tbody > tr:not([bgcolor]) > td:first-child p {
  max-width: 68ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--secondary);
}

form[name="form1"] > table[width="905"] > tbody > tr:not([bgcolor]) > td:first-child font[color="#FF0000" i] {
  color: var(--ink);
}

form[name="form1"] > table[width="905"] > tbody > tr:not([bgcolor]) > td:first-child p + p:not(:has(:not(br, font, strong))) {
  display: none;
}

/* Options box (cyan heading) as a card with the red top line */
form[name="form1"] > table[width="905"] td:has(> table td[bgcolor="#00FFFF" i]) > table {
  display: block;
  box-sizing: border-box;
  width: auto;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

form[name="form1"] > table[width="905"] td:has(> table td[bgcolor="#00FFFF" i]) > table > tbody,
form[name="form1"] > table[width="905"] td:has(> table td[bgcolor="#00FFFF" i]) > table > tbody > tr,
form[name="form1"] > table[width="905"] td:has(> table td[bgcolor="#00FFFF" i]) > table > tbody > tr > td {
  display: block;
  width: auto;
  height: auto;
  padding: 0;
}

form[name="form1"] > table[width="905"] td[bgcolor="#00FFFF" i] {
  margin-bottom: 8px;
  background: none;
}

form[name="form1"] > table[width="905"] td[bgcolor="#00FFFF" i] div[align="center"] {
  text-align: left;
}

form[name="form1"] > table[width="905"] td[bgcolor="#00FFFF" i] h1 {
  margin: 0;
}

form[name="form1"] > table[width="905"] td[bgcolor="#00FFFF" i] font[size="4"] {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--brand);
}

/* Option rows: label above its control */
form[name="form1"] > table[width="905"] td:has(> table td[bgcolor="#00FFFF" i]) table table {
  width: 100%;
  border-collapse: collapse;
}

form[name="form1"] > table[width="905"] td:has(> table td[bgcolor="#00FFFF" i]) table table td {
  padding: 8px 0;
  vertical-align: middle;
}

form[name="form1"] > table[width="905"] td:has(> table td[bgcolor="#00FFFF" i]) table table td:first-child p {
  margin: 0;
  padding-right: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--secondary);
}

form[name="form1"] > table[width="905"] td:has(> table td[bgcolor="#00FFFF" i]) table table p {
  margin: 0;
  font-size: 14px;
}

form[name="form1"] > table[width="905"] input[type="radio"] {
  accent-color: var(--brand);
  vertical-align: -2px;
}

form[name="form1"] > table[width="905"] select {
  box-sizing: border-box;
  width: 100%;
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--ink);
  font: 14px var(--font-body);
}

form[name="form1"] > table[width="905"] select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}

/* "Generate Report" / "Save" links as buttons */
form[name="form1"]:has(> table[width="905"]) a[href^="javascript:f_finish" i]:link,
form[name="form1"]:has(> table[width="905"]) a[href^="javascript:f_finish" i]:visited,
form[name="form1"]:has(> table[width="905"]) a[href^="javascript:savePlayerTracking" i]:link,
form[name="form1"]:has(> table[width="905"]) a[href^="javascript:savePlayerTracking" i]:visited {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 20px;
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--radius-xs);
  font: 700 15px var(--font-body);
  text-decoration: none;
}

form[name="form1"]:has(> table[width="905"]) a[href^="javascript:f_finish" i]::after,
form[name="form1"]:has(> table[width="905"]) a[href^="javascript:savePlayerTracking" i]::after {
  content: "\f061";
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 13px;
}

form[name="form1"]:has(> table[width="905"]) a[href^="javascript:f_finish" i]:hover,
form[name="form1"]:has(> table[width="905"]) a[href^="javascript:savePlayerTracking" i]:hover {
  background: var(--brand-hover);
}

/* Report list area under the options */
form[name="form1"] > table[width="905"] + table {
  width: 100%;
  margin-top: 26px;
}

form[name="form1"] > table[width="905"] + table td {
  padding: 4px 0;
}

form[name="form1"] > table[width="905"] + table div[align="center"] {
  text-align: left;
}

form[name="form1"] > table[width="905"] + table td[width="235"] {
  width: 0;
}

form[name="form1"] > table[width="905"] + table font[size="2"] {
  font-size: 13px;
  color: var(--muted);
}

form[name="form1"] > table[width="905"] + table a:link:not([href^="javascript:f_finish" i]),
form[name="form1"] > table[width="905"] + table a:visited:not([href^="javascript:f_finish" i]) {
  color: var(--brand);
}

/* "Tracking saved" confirmation (green box) */
table[bordercolor="#00FF00" i] {
  margin: 0 auto 22px;
  border: 1px solid var(--success);
  border-left: 5px solid var(--success);
  border-radius: var(--radius-xs);
  background: var(--success-soft);
}

table[bordercolor="#00FF00" i] td {
  border: 0;
  background: none;
}

table[bordercolor="#00FF00" i] font[color="#FFFFFF" i] {
  color: var(--success);
}


/* ---------------------------------------------------------------------
   C15 · 2. MEDIA REPORT (media-report.asp → incWeb_mediaReport.asp +
   inc_mediaReportData.asp)
   Hook: form[name="form1"] > table whose title is h1 > font[size=4] >
   strong ("MEDIA EVENT MATCH RESULTS"). Group headers are the yellow
   (#FFFF00) cells; totals are the orange / purple <font> lines. The match
   lines themselves come from code not supplied and keep their own markup.
   Prints cleanly (the page opens the print dialog with PRINT=YES).
   --------------------------------------------------------------------- */
form[name="form1"] > table:has(> tbody > tr > td > div > h1 > font[size="4"] > strong) {
  display: block;
  box-sizing: border-box;
  width: calc(100% - (var(--gutter) * 2));
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 36px 0 8px;
  background: none;
}

form[name="form1"] > table:has(> tbody > tr > td > div > h1 > font[size="4"] > strong) > tbody,
form[name="form1"] > table:has(> tbody > tr > td > div > h1 > font[size="4"] > strong) > tbody > tr,
form[name="form1"] > table:has(> tbody > tr > td > div > h1 > font[size="4"] > strong) > tbody > tr > td {
  display: block;
  padding: 0;
}

form[name="form1"] > table:has(> tbody > tr > td > div > h1 > font[size="4"] > strong) > tbody > tr > td > div[align="center"] {
  text-align: left;
}

/* Title in sentence case */
form[name="form1"] > table > tbody > tr > td > div > h1:has(> font[size="4"] > strong) {
  margin: 0 0 10px;
  text-transform: lowercase;
}

form[name="form1"] > table > tbody > tr > td > div > h1:has(> font[size="4"] > strong) font {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.8px;
  color: var(--ink);
}

form[name="form1"] > table > tbody > tr > td > div > h1:has(> font[size="4"] > strong)::first-letter {
  text-transform: uppercase;
  font-size: clamp(26px, 3vw, 34px);
}

/* Report details (event, date, time, report type) */
form[name="form1"] > table > tbody > tr > td > div:has(> h1 > font[size="4"] > strong) > p {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--secondary);
}

form[name="form1"] > table > tbody > tr > td > div:has(> h1 > font[size="4"] > strong) > p:nth-of-type(2) {
  margin-bottom: 20px;
}

/* Report actions in the details ("Generate New … Report", "Print /
   Download AP text file") as outline buttons */
form[name="form1"] > table > tbody > tr > td > div:has(> h1 > font[size="4"] > strong) > p a:link,
form[name="form1"] > table > tbody > tr > td > div:has(> h1 > font[size="4"] > strong) > p a:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin: 10px 8px 0 0;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
}

form[name="form1"] > table > tbody > tr > td > div:has(> h1 > font[size="4"] > strong) > p a:hover {
  border-color: var(--brand);
  color: var(--brand);
}

form[name="form1"] > table > tbody > tr > td > div:has(> h1 > font[size="4"] > strong) > p a[href*="mediaFiles" i]::before {
  content: "\f019";
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 12px;
}

form[name="form1"] > table > tbody > tr > td > div:has(> h1 > font[size="4"] > strong) > p a:not([href*="mediaFiles" i])::before {
  content: "\f2f9";
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 12px;
}

/* Check list boxes on the Media page (names from java_mediaReport.js):
   participants, states, countries, cities, clubs, schools, divisions,
   and players to track */
form[name="form1"] input[type="checkbox"]:is([name="UID"], [name="states"], [name="countries"], [name="cities"], [name="clubs"], [name="schools"], [name="divListID"], [name="trackUID"]) {
  width: 17px;
  height: 17px;
  margin: 0 8px 0 0;
  accent-color: var(--brand);
  vertical-align: -3px;
  cursor: pointer;
}


/* Group header (country, state, city, club or school; was yellow) */
form[name="form1"] table[width="100%"]:has(> tbody > tr > td[bgcolor="#FFFF00" i]) {
  width: 100%;
  margin: 22px 0 12px;
  border-collapse: collapse;
}

form[name="form1"] table[width="100%"] td[bgcolor="#FFFF00" i] {
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-xs);
}

form[name="form1"] table[width="100%"] td[bgcolor="#FFFF00" i] p {
  margin: 0;
}

form[name="form1"] table[width="100%"] td[bgcolor="#FFFF00" i] p > br:first-child {
  display: none;
}

form[name="form1"] table[width="100%"] td[bgcolor="#FFFF00" i] font[size="4"] {
  font-size: 18px;
  color: var(--secondary);
}

form[name="form1"] table[width="100%"] td[bgcolor="#FFFF00" i] font[size="4"] b {
  color: var(--ink);
}

form[name="form1"] table[width="100%"] td[bgcolor="#FFFF00" i] img[height="60"] {
  height: 40px;
  margin-right: 10px;
  vertical-align: middle;
}

/* Schedule / Results / Report / Summary links as small pills */
form[name="form1"] table[width="100%"] td[bgcolor="#FFFF00" i] a:link,
form[name="form1"] table[width="100%"] td[bgcolor="#FFFF00" i] a:visited {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 6px 0 0;
  padding: 4px 12px 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}

form[name="form1"] table[width="100%"] td[bgcolor="#FFFF00" i] a:hover {
  border-color: var(--brand);
  color: var(--brand);
}

form[name="form1"] table[width="100%"] td[bgcolor="#FFFF00" i] a img {
  height: 16px;
  width: auto;
}

/* Region action icons: the old little GIFs (match-search, teamScoreSheet,
   schools, lineChart) are swapped for Font Awesome icons in coloured
   circles, picked by what each link does. */
form[name="form1"] table[width="100%"] td[bgcolor="#FFFF00" i] a img {
  display: none;
}

form[name="form1"] table[width="100%"] td[bgcolor="#FFFF00" i] a::before {
  content: "\f0da";
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-soft);
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 11px;
  color: var(--brand);
}

form[name="form1"] table[width="100%"] td[bgcolor="#FFFF00" i] a[href*="mediaUpcomingByRegion" i]::before {
  content: "\f073";
}

form[name="form1"] table[width="100%"] td[bgcolor="#FFFF00" i] a[href*="mediaResultsByRegion" i]::before {
  content: "\f091";
  background: var(--tier-gold-soft);
  color: var(--tier-gold-ink);
}

form[name="form1"] table[width="100%"] td[bgcolor="#FFFF00" i] a[href*="matchReportByRegion" i]::before {
  content: "\f1ea";
}

form[name="form1"] table[width="100%"] td[bgcolor="#FFFF00" i] a[href*="matchSummaryByRegion" i]::before {
  content: "\f201";
  background: var(--success-soft);
  color: var(--success);
}

form[name="form1"] table[width="100%"] td[bgcolor="#FFFF00" i] a:hover::before {
  transform: scale(1.12);
}

/* Player-tracking box icons (send test text, logout, edit contact) */
form[name="form1"] a:has(> img[src*="sendText" i]) img,
form[name="form1"] a:has(> img[src*="logout" i]) img,
form[name="form1"] a:has(> img[src*="modify" i]) img {
  display: none;
}

form[name="form1"] a:has(> img[src*="sendText" i])::before,
form[name="form1"] a:has(> img[src*="logout" i])::before,
form[name="form1"] a:has(> img[src*="modify" i])::before {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--brand-soft);
  font-family: var(--icon-font);
  font-weight: 900;
  font-size: 12px;
  color: var(--brand);
  vertical-align: middle;
}

form[name="form1"] a:has(> img[src*="sendText" i])::before {
  content: "\f7cd";
}

form[name="form1"] a:has(> img[src*="logout" i])::before {
  content: "\f2f5";
}

form[name="form1"] a:has(> img[src*="modify" i])::before {
  content: "\f044";
}

/* Points totals (were orange and purple) */
form[name="form1"] font[color="#ff9900" i] {
  display: inline-block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--brand);
}

form[name="form1"] font[color="#663366" i] {
  display: inline-block;
  margin-top: 10px;
  font-size: 20px;
  color: var(--ink);
}

form[name="form1"] font[color="#ff0000" i][size="5"] {
  font-size: 16px;
  color: var(--brand);
}

/* ---------------------------------------------------------------------
   C15 · 3. MEDIA CHECK LIST (code_media.asp → HTMLdataStr)
   One outer table (border="1" bordercolor="#FF6600" bgcolor="#000066")
   holding 2–4 column cells, each with a table of rows: checkbox + name +
   red "(count)". Shown as one white card; the columns become CSS columns
   (same top-to-bottom alphabetical order) that reflow to fit the screen.
   Grey stripes removed; a ticked row turns light red.
   --------------------------------------------------------------------- */
form[name="form1"] td:has(> table[bordercolor="#FF6600" i][bgcolor="#000066" i]) > font {
  display: block;
  margin: 18px 0 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--secondary);
}

form[name="form1"] table[bordercolor="#FF6600" i][bgcolor="#000066" i] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

form[name="form1"] table[bordercolor="#FF6600" i][bgcolor="#000066" i] > tbody {
  display: block;
}

form[name="form1"] table[bordercolor="#FF6600" i][bgcolor="#000066" i] > tbody > tr {
  display: block;
  columns: 230px;
  column-gap: 12px;
}

/* Flatten the column cells and their inner tables */
form[name="form1"] table[bordercolor="#FF6600" i][bgcolor="#000066" i] > tbody > tr > td,
form[name="form1"] table[bordercolor="#FF6600" i][bgcolor="#000066" i] > tbody > tr > td > div,
form[name="form1"] table[bordercolor="#FF6600" i][bgcolor="#000066" i] > tbody > tr > td > div > font,
form[name="form1"] table[bordercolor="#FF6600" i][bgcolor="#000066" i] table,
form[name="form1"] table[bordercolor="#FF6600" i][bgcolor="#000066" i] table > tbody {
  display: contents;
}

/* One row per choice */
form[name="form1"] table[bordercolor="#FF6600" i][bgcolor="#000066" i] table tr {
  display: block;
  break-inside: avoid;
}

form[name="form1"] table[bordercolor="#FF6600" i][bgcolor="#000066" i] table td {
  display: block;
  padding: 7px 10px;
  border-radius: var(--radius-xs);
  background: transparent;
  line-height: 1.35;
}

form[name="form1"] table[bordercolor="#FF6600" i][bgcolor="#000066" i] table td:hover {
  background: var(--soft);
}

form[name="form1"] table[bordercolor="#FF6600" i][bgcolor="#000066" i] table td:has(input:checked) {
  background: var(--brand-soft);
}

form[name="form1"] table[bordercolor="#FF6600" i][bgcolor="#000066" i] table td > font {
  font-size: 14px;
  color: var(--ink);
}

form[name="form1"] table[bordercolor="#FF6600" i][bgcolor="#000066" i] font[color="#006600" i] {
  color: var(--secondary);
}

/* "(count)" after each name */
form[name="form1"] table[bordercolor="#FF6600" i][bgcolor="#000066" i] font[color="#ff0000" i] {
  font-size: 12px;
  color: var(--muted);
}

form[name="form1"] table[bordercolor="#FF6600" i][bgcolor="#000066" i] font[color="#ff0000" i] b {
  font-weight: 600;
}


/* ---------------------------------------------------------------------
   C15 · 4. MEDIA REPORT LINES (code_mediaMatchResults.asp)
   Per participant: table → [photo cell (rowspan 2) | grey name cell
   (#dcdcdc)] then a cell holding the match table. Match table: division
   header row (td colspan=3 #E4F0FE), one row per match (WON / LOST / TIE,
   round, players, score | opponent photo | history chart), then a points
   row (#B0C4DE). The by-division report uses the same match table.
   --------------------------------------------------------------------- */

/* Participant card */
form[name="form1"] table:has(> tbody > tr > td[bgcolor="#dcdcdc" i]) {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

form[name="form1"] table:has(> tbody > tr > td[bgcolor="#dcdcdc" i]) > tbody {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
}

form[name="form1"] table:has(> tbody > tr > td[bgcolor="#dcdcdc" i]) > tbody > tr {
  display: contents;
}

form[name="form1"] table:has(> tbody > tr > td[bgcolor="#dcdcdc" i]) > tbody > tr > td {
  display: block;
  min-width: 0;
  padding: 0;
}

form[name="form1"] table:has(> tbody > tr > td[bgcolor="#dcdcdc" i]) > tbody > tr > td[rowspan="2"] {
  grid-column: 1;
  grid-row: 1 / span 2;
}

form[name="form1"] table:has(> tbody > tr > td[bgcolor="#dcdcdc" i]) > tbody > tr > td:not([rowspan]) {
  grid-column: 2;
}

/* No photo (spacer image): drop the photo column */
form[name="form1"] table:has(> tbody > tr > td[rowspan="2"] img[src*="spacer.gif" i]) > tbody {
  grid-template-columns: 0 minmax(0, 1fr);
  column-gap: 0;
}

form[name="form1"] td[rowspan="2"]:has(img[src*="spacer.gif" i]) {
  display: none;
}

form[name="form1"] td[rowspan="2"] img[name="Picture"] {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
  background: var(--soft);
}

/* Name line (was grey) */
form[name="form1"] td[bgcolor="#dcdcdc" i] {
  background: none;
}

form[name="form1"] td[bgcolor="#dcdcdc" i] p {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--secondary);
}

form[name="form1"] td[bgcolor="#dcdcdc" i] font[size="4"] {
  font-size: 18px;
  color: var(--ink);
}

form[name="form1"] td[bgcolor="#dcdcdc" i] font[size="3"] {
  font-size: 14px;
  color: var(--secondary);
}

form[name="form1"] td[bgcolor="#dcdcdc" i] img {
  vertical-align: middle;
}

/* Match table */
form[name="form1"] table:has(> tbody > tr > td[colspan="3"][bgcolor="#E4F0FE" i]) {
  width: 100%;
  margin: 0 0 6px;
  border-collapse: collapse;
}

form[name="form1"] table:has(> tbody > tr > td[colspan="3"][bgcolor="#E4F0FE" i]) td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  vertical-align: middle;
}

/* Division header row */
form[name="form1"] td[colspan="3"][bgcolor="#E4F0FE" i] {
  background: var(--soft);
  border-bottom: 0;
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

form[name="form1"] td[colspan="3"][bgcolor="#E4F0FE" i] p {
  margin: 0;
}

form[name="form1"] td[colspan="3"][bgcolor="#E4F0FE" i] font[size="3"] {
  font-size: 15px;
}

form[name="form1"] td[colspan="3"][bgcolor="#E4F0FE" i] a:link,
form[name="form1"] td[colspan="3"][bgcolor="#E4F0FE" i] a:visited {
  color: var(--ink);
  text-decoration: none;
}

form[name="form1"] td[colspan="3"][bgcolor="#E4F0FE" i] a:hover {
  color: var(--brand);
  text-decoration: underline;
}

/* Draw type next to the division name (was green) */
form[name="form1"] td[colspan="3"][bgcolor="#E4F0FE" i] font[color="#006633" i] {
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--secondary);
}

/* Result word: WON / LOST / TIE as small tags */
form[name="form1"] font:is([color="00CC33" i], [color="ff0000" i], [color="ff9900" i]):not([size]) {
  display: inline-block;
  min-width: 38px;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-align: center;
}

form[name="form1"] b > font[color="00CC33" i] {
  background: var(--success-soft);
  color: var(--success);
}

form[name="form1"] b > font[color="ff0000" i] {
  background: var(--brand-soft);
  color: var(--brand);
}

form[name="form1"] b > font[color="ff9900" i] {
  background: var(--warning-soft);
  color: var(--warning);
}

/* Ranking / points next to a name (red, not inside <b>) */
form[name="form1"] td > font[color="ff0000" i] {
  min-width: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--brand);
}

/* Round "(Quarters)" and "def." (were green) */
form[name="form1"] table:has(> tbody > tr > td[colspan="3"][bgcolor="#E4F0FE" i]) tr:not(:first-child) font[color="#006633" i] {
  font-size: 13px;
  color: var(--muted);
}

form[name="form1"] table:has(> tbody > tr > td[colspan="3"][bgcolor="#E4F0FE" i]) em {
  font-style: normal;
}

/* Player names in a match */
form[name="form1"] table:has(> tbody > tr > td[colspan="3"][bgcolor="#E4F0FE" i]) tr:not(:first-child) a:link,
form[name="form1"] table:has(> tbody > tr > td[colspan="3"][bgcolor="#E4F0FE" i]) tr:not(:first-child) a:visited {
  color: var(--ink);
  text-decoration: none;
}

form[name="form1"] table:has(> tbody > tr > td[colspan="3"][bgcolor="#E4F0FE" i]) tr:not(:first-child) a:hover {
  color: var(--brand);
  text-decoration: underline;
}

/* Opponent photo and head-to-head chart columns */
form[name="form1"] table:has(> tbody > tr > td[colspan="3"][bgcolor="#E4F0FE" i]) td img[width="50"] {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 50%;
}

form[name="form1"] table:has(> tbody > tr > td[colspan="3"][bgcolor="#E4F0FE" i]) tr:not(:first-child) > td:not(:first-child) {
  width: 1%;
  white-space: nowrap;
  font-size: 12px;
  color: var(--muted);
}

form[name="form1"] table:has(> tbody > tr > td[colspan="3"][bgcolor="#E4F0FE" i]) tr:not(:first-child) > td:not(:first-child) img {
  vertical-align: middle;
}

/* Division points row (was steel blue) */
form[name="form1"] table:has(> tbody > tr > td[colspan="3"][bgcolor="#E4F0FE" i]) td[colspan="3"][bgcolor="#B0C4DE" i] {
  background: none;
  border-bottom: 0;
  font-size: 13px;
  color: var(--secondary);
}

form[name="form1"] td[colspan="3"][bgcolor="#B0C4DE" i] b {
  color: var(--ink);
}

@media (max-width: 600px) {
  form[name="form1"] table:has(> tbody > tr > td[bgcolor="#dcdcdc" i]) {
    padding: 14px;
  }

  form[name="form1"] table:has(> tbody > tr > td[bgcolor="#dcdcdc" i]) > tbody {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 12px;
  }

  form[name="form1"] td[rowspan="2"] img[name="Picture"] {
    width: 44px;
    height: 44px;
  }

  /* Opponent photo and chart drop below on phones */
  form[name="form1"] table:has(> tbody > tr > td[colspan="3"][bgcolor="#E4F0FE" i]) tr:not(:first-child) > td:not(:first-child) {
    display: none;
  }

  form[name="form1"] table[bordercolor="#FF6600" i][bgcolor="#000066" i] > tbody > tr {
    columns: 1;
  }
}

@media print {
  form[name="form1"] table:has(> tbody > tr > td[bgcolor="#dcdcdc" i]) {
    box-shadow: none;
    break-inside: avoid;
  }
}


@media (max-width: 900px) {
  form[name="form1"] > table[width="905"]:has(> tbody > tr[bgcolor="#FFFF00" i]) > tbody {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
  }
}

@media (max-width: 600px) {
  form[name="form1"]:has(> table[width="905"] > tbody > tr[bgcolor="#FFFF00" i]),
  form[name="form1"] > table:has(> tbody > tr > td > div > h1 > font[size="4"] > strong) {
    padding-top: 22px;
  }
}

/* Media report print: just the report */
@media print {
  body:has(form[name="form1"] h1 > font[size="4"] > strong) #topMenu1:has(> table) td[width="300"],
  body:has(form[name="form1"] h1 > font[size="4"] > strong) div:not(#siteMenu):has(> #mainMenu1),
  body:has(form[name="form1"] h1 > font[size="4"] > strong) #sponsors,
  body:has(form[name="form1"] h1 > font[size="4"] > strong) table[width="100%"]:has(> tbody > tr > td[bgcolor="#000066" i]),
  body:has(form[name="form1"] h1 > font[size="4"] > strong) table[width="100%"]:has(> tbody > tr > td[bgcolor="#000066" i]) + p {
    display: none !important;
  }

  body:has(form[name="form1"] h1 > font[size="4"] > strong) #topMenu1:has(> table) {
    background-image: none;
  }

  form[name="form1"] table[width="100%"] td[bgcolor="#FFFF00" i] a {
    display: none;
  }
}


/* ---------------------------------------------------------------------
   INNER PAGES · RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 600px) {
  #event-info,
  :is(#participants-wrapper, td:has(> #participants-title, > #participants-title-sorted)),
  #division-wrapper,
  #bracket-main-container,
  #roundrobin-main-container,
  #results-section,
  #registration > form {
    padding-top: 22px;
  }

  #event-info .event-info-card,
  #registration > form > div#rules,
  #registration > form > table[bgcolor] div#rules {
    padding: 20px;
  }

  #participants-title form select {
    min-width: 0;
    flex: 1 1 160px;
  }

  /* Participant rows become stacked cards */
  #participants-list > table,
  #participants-list > table > tbody {
    display: block;
  }

  #participants-list > table > tbody > tr:has(> td > h2) {
    display: block;
  }

  #participants-list tr[bgcolor] {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 12px;
    padding: 14px 16px;
    border-top: 1px solid var(--border);
  }

  #participants-list tr[bgcolor] > td {
    display: block;
    padding: 0;
    border-top: 0;
  }

  #participants-list tr[bgcolor] > td:first-child {
    grid-row: 1 / span 3;
    width: auto;
    padding: 0;
  }

  #participants-list tr[bgcolor] > td:not(:first-child) {
    grid-column: 2;
  }

  #division-wrapper td#divList > div {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #division-wrapper td#divList > div > table {
    width: max-content;
    min-width: 100%;
  }

  #division-wrapper td#divList tr > td {
    white-space: nowrap;
  }

  #registration > form > table[bgcolor] div#rules > table,
  #registration > form > table[bgcolor] div#rules > table > tbody,
  #registration > form > table[bgcolor] div#rules > table > tbody > tr,
  #registration > form > table[bgcolor] div#rules > table > tbody > tr > td,
  #registration > form > table[bgcolor] div#rules > table > tbody > tr > td > table,
  #registration > form > table[bgcolor] div#rules > table > tbody > tr > td > table > tbody,
  #registration > form > table[bgcolor] div#rules > table > tbody > tr > td > table > tbody > tr,
  #registration > form > table[bgcolor] div#rules > table > tbody > tr > td > table > tbody > tr > td {
    display: block;
    width: auto;
  }

  #registration > form > table[bgcolor],
  #registration > form > table[bgcolor] > tbody,
  #registration > form > table[bgcolor] > tbody > tr,
  #registration > form > table[bgcolor] > tbody > tr > td {
    display: block;
    width: auto;
  }

  #registration input[name="uid"],
  #registration input[name="pwd"] {
    width: 100%;
  }

  #entry-steps {
    padding: 16px 10px;
  }

  body:has(#topMenu1 > table) #sponsors {
    width: auto;
  }

  body:has(#topMenu1 > table) #sponsors td[width="700"] > table > tbody > tr {
    gap: 10px;
  }

  body:has(#topMenu1 > table) #sponsors td[width="700"] > table > tbody > tr > td {
    flex: 0 0 calc(50% - 5px);
  }

  body:has(#topMenu1 > table) #sponsors table[width="181"] td[bgcolor="#FFFFFF" i] {
    padding: 8px;
  }

  #entry-steps > table > tbody > tr:nth-child(2) p {
    font-size: 11px;
  }
}


/* ---------------------------------------------------------------------
   VARIANT · RACQUETBALL PHOTO SCENE
   Overrides scene tokens only. Everything above is shared.
   --------------------------------------------------------------------- */
:root {
  --scene-image: url("images/championship-scene-racquetball.jpg");
  --scene-position: 75% 15%;
}