/* USTA tournament pages: one document for the bracket and every group. Color sets the tone; every meaning has a second channel. */
:root {
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --paper:#f4f5f7; --paper-2:#eceef2; --plane:#fff; --plane-2:#f7f8fa; --line:#d9dde5; --line-2:#b3bac6; --line-3:#8a919e;
  --ink:#1c2130; --ink-2:#5d6575; --navy:#1b2150; --blue:#34489a; --link:#2a4a9e;
  --stone-w:#f6f4ee; --stone-w-edge:#c7c2b6; --stone-b:#2b2a28; --stone-b-edge:#111; --stone-b-ink:#f6f4ee;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --r1:4px; --r2:8px; --r3:12px;
  --e1: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(28,33,48,.06), 0 10px 24px -14px rgba(28,33,48,.28);
  --e2: 0 2px 6px -2px rgba(28,33,48,.18), 0 14px 28px -16px rgba(28,33,48,.32);
  --e3: 0 12px 28px -12px rgba(28,33,48,.3), 0 2px 6px rgba(28,33,48,.08);
  --inset: inset 0 2px 4px rgba(28,33,48,.12);
  --lift: translateY(-1px);
  --f-xs:12.5px; --f-s:13.5px; --f-m:15px; --f-l:17px; --f-xl:20px; --f-xxl:26px;
  --grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M0 .5H44M.5 0V44' stroke='rgba(27,33,80,.08)'/%3E%3Cpath d='M0-3.5 3.5 0 0 3.5-3.5 0Z' fill='rgba(27,33,80,.12)'/%3E%3C/svg%3E");
}

/* base */
*, ::before, ::after { box-sizing:border-box }
body { margin:0; font:400 var(--f-m)/1.45 var(--font); color:var(--ink); background:var(--paper) }
h1, h2, h3, h4, h5 { margin:0; color:var(--navy); font-weight:600; line-height:1.2 }
h2 { font-size:var(--f-xl); margin-bottom:var(--s3) }
a { color:var(--link) }
button { font:inherit }
:focus-visible { outline:2px solid var(--blue); outline-offset:2px }
.wrap { max-width:1160px; margin:0 auto; padding:0 var(--s5) }
.vh, .skip:not(:focus) { position:absolute;width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.skip { position:absolute; left:var(--s4); top:var(--s3);padding:var(--s2) var(--s3); font-weight:600; color:var(--navy); text-decoration:none; background:var(--plane); border-radius:var(--r2) }
.fine, .caption { font-size:var(--f-xs); color:var(--ink-2) }
.caption { margin:-4px 0 var(--s4) }
.num { text-align:right; font-variant-numeric:tabular-nums }
.tag { margin-left:var(--s2); padding:0 7px; font-size:var(--f-xs); color:var(--ink-2); background:var(--plane-2); border:1px solid var(--line); border-radius:999px; white-space:nowrap }
.dagger { font-weight:600 }
.dot { margin:0 2px; color:var(--ink-2) }
.from { font-style:italic; color:var(--ink-2) }
/* raised planes */
.card, .pcard, .tile[data-group], .info { background:var(--plane); border:1px solid var(--line); border-radius:var(--r2); box-shadow:var(--e1) }
.tile[data-group], .info { transition:box-shadow .16s, transform .16s }
.tile[data-group]:hover, .tile[data-group]:focus-visible, .info:hover, .info:focus-visible { box-shadow:var(--e2); transform:var(--lift) }

/* header */
.site { background:linear-gradient(rgba(255,255,255,0), var(--plane) 90%), var(--grid) var(--plane); border-bottom:3px solid var(--navy) }
.site .wrap { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s4); padding-top:var(--s4); padding-bottom:var(--s4) }
.logo img { display:block; height:44px; width:auto }
.title { flex:1 1 16em; min-width:0; padding-left:var(--s4); border-left:1px solid var(--line) }
.title h1 { font-size:var(--f-xxl) }
.sub { margin:2px 0 0; font-size:var(--f-s); color:var(--ink-2) }
.info { margin-left:auto; padding:var(--s2) var(--s3); font-size:var(--f-s); font-weight:600; color:var(--navy); text-decoration:none }

/* main */
main { padding-top:var(--s5) }
main > section + section { margin-top:var(--s7) }
.status { margin:0 0 var(--s6); padding-left:var(--s4); border-left:3px solid var(--navy); font-size:var(--f-l) }

/* folds: JS toggles .open; without JS all are open. The body bleeds 12px sideways so shadows are not cut off */
.fold { display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease }
.fold-body { min-height:0; margin:0 -12px; padding:0 12px; overflow:hidden; visibility:hidden; transition:visibility 0s .28s }
.fold.open { grid-template-rows:1fr }
.fold.open .fold-body { visibility:visible; transition-delay:0s }
html:not(.js) .fold { grid-template-rows:1fr }
html:not(.js) .fold-body { visibility:visible }

/* group tiles: pressed in when open, a diamond pointer below; they and the open panel sit on the board (.plane) */
#groups .tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:var(--s3) }
.tile[data-group] { position:relative; display:grid; grid-template-columns:1fr auto; gap:2px var(--s2); min-height:44px; padding:var(--s3) var(--s4); text-align:left; color:var(--ink); cursor:pointer }
.tile-name { font-weight:600 }
.tile-meta, .tile-state { grid-column:1; font-size:var(--f-xs); color:var(--ink-2) }
.chev { grid-column:2; grid-row:1 / span 3; align-self:center; color:var(--ink-2) }
.tile[data-group][aria-expanded=true] { background:var(--plane-2); box-shadow:var(--inset); transform:none }
.tile[aria-expanded=true] .chev { transform:rotate(90deg) }
.tile[aria-expanded=true]::after { content:""; position:absolute; left:calc(50% - 4px); bottom:-9px; width:8px; height:8px; background:var(--plane); border:1px solid var(--line); transform:rotate(45deg) }
/* the fold clips at its edge, so the panel keeps a little room below it for its shadow */
.group .panel { margin:10px 0 var(--s3); padding:var(--s4) var(--s5) var(--s5); background:var(--plane); border:1px solid var(--line); border-radius:var(--r3); box-shadow:var(--e3) }
.group h3 { margin-bottom:var(--s3); font-size:var(--f-l) }

/* standings */
.standings { width:100%; table-layout:fixed; border-collapse:collapse; font-variant-numeric:tabular-nums }
.standings th { padding:var(--s2); font-size:var(--f-s); font-weight:600; letter-spacing:.04em; text-align:left; text-transform:uppercase; color:var(--ink-2); border-bottom:2px solid var(--line) }
.standings th.num { text-align:right }
.standings td { padding:var(--s2); border-bottom:1px solid var(--line); vertical-align:middle }
.standings .place { font-weight:600; white-space:nowrap }
/* a fixed table sizes its columns from the header row; the name takes the rest */
.standings th:first-child { width:64px }
.standings th:nth-child(3) { width:80px }
.standings th:nth-child(4) { width:76px }
.eq { font-weight:400; color:var(--ink-2) }
.hostrow td { padding:0; border:0 }

/* names, marks, flags */
.pname, .gname { display:inline-flex; align-items:center; gap:6px; max-width:100%; min-width:0; margin:-4px 0; padding:4px 2px; text-align:left; color:var(--ink); background:none; border:0; cursor:pointer }
.pname:hover .nm { text-decoration:underline; text-underline-offset:3px }
.gname { font-style:italic; color:var(--ink-2); text-decoration:underline dotted }
.flag { flex:none; width:20px; height:auto }
/* the 4px keeps the selected underline inside the clip */
.nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-bottom:4px; margin-bottom:-4px }
.mark { display:inline-block; width:.9em; color:var(--ink-2); visibility:hidden }
.win .mark { visibility:visible }
.win .nm, .is-sel .nm { font-weight:700 }
.is-sel .nm { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px }
/* silent for screen readers; older browsers keep the first */
.is-sel::before { content:"\25B8"; content:"\25B8" / ""; color:var(--ink-2) }
html:not(.js) .pname, html:not(.js) .gname { pointer-events:none; cursor:default }

/* the board: recessed, with its grid. The group stage (.plane) and the bracket (.board-wrap) both sit on one */
.plane, .board-wrap { padding:var(--s4); background:var(--paper-2) var(--grid); border-radius:var(--r3); box-shadow:var(--inset), 0 0 0 1px var(--line) }
/* bracket: raised cards, connectors beneath */
.scroll { overflow-x:auto; scroll-snap-type:x proximity }
.board-wrap { display:inline-block; min-width:100%; vertical-align:top }
/* 236px: four rounds fit inside the page width */
.board { display:grid; --gap:40px; grid-template-columns:repeat(var(--rounds), minmax(236px, 1fr)); grid-template-rows:auto repeat(var(--size), 1fr); column-gap:var(--gap); min-width:calc(var(--rounds) * 236px + (var(--rounds) - 1) * var(--gap)) }
.rh { grid-row:1; margin:0 0 var(--s3); font-size:var(--f-s); letter-spacing:.06em; text-align:center; text-transform:uppercase; color:var(--ink-2); scroll-snap-align:start }
.slot { position:relative; display:flex; flex-direction:column; justify-content:center; min-width:0; padding:var(--s2) 0 }
.slot.top::after, .slot.bottom::after { content:""; position:absolute; right:calc(var(--gap) / -2); width:calc(var(--gap) / 2); border:0 solid var(--line-2); border-right-width:2px }
.slot.top::after { top:50%; bottom:0; border-top-width:2px }
.slot.bottom::after { top:0; bottom:50%; border-bottom-width:2px }
.slot.fed::before { content:""; position:absolute; left:calc(var(--gap) / -2); top:50%; width:calc(var(--gap) / 2); border-top:2px solid var(--line-2) }
.card { padding:var(--s2) var(--s3) }
.card .prow { display:flex; align-items:center; gap:var(--s2); min-height:40px }
.card .prow + .prow { border-top:1px solid var(--line) }
.card .pname, .card .gname, .card .from { flex:1 1 auto; min-width:0 }
.prow .tiles, .m .tiles { display:inline-flex; flex:none; align-items:center; gap:4px }
.score { display:inline-grid; flex:none; place-items:center; min-width:26px; height:26px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink-2); border:1px solid var(--line-2); border-radius:var(--r1) }
.win .score { color:var(--stone-b-ink); background:var(--stone-b); border-color:var(--stone-b-edge) }
.cap { margin:var(--s1) 0 0; padding-top:var(--s1); font-size:var(--f-xs); color:var(--ink-2); border-top:1px solid var(--line) }
.key { margin-top:var(--s4); font-size:var(--f-s); color:var(--ink-2) }
.key summary { font-weight:600; color:var(--ink) }

/* stones: the only black and white on the page */
.tile.w, .tile.b, .tile.empty { position:relative; display:inline-grid; flex:none; place-items:center; width:26px; height:26px; font:700 13px/1 var(--font); text-decoration:none; border:1px solid; border-radius:var(--r1); box-shadow:inset 0 1px 0 rgba(255,255,255,.35) }
.tile.w { color:var(--ink); background:var(--stone-w); border-color:var(--stone-w-edge) }
.tile.b { color:var(--stone-b-ink); background:var(--stone-b); border-color:var(--stone-b-edge); box-shadow:inset 0 1px 0 rgba(255,255,255,.1) }
.tile.empty { background:transparent; border:1px dotted var(--line-3); box-shadow:none }
/* hit areas reach half-way across the gap, never onto a neighbor */
a.tile::before { content:""; position:absolute; inset:-7px -2px }
a.tile.blitz::before { inset:-2px }
.tile.blitz { width:20px; height:20px; margin:0 5px; border-radius:3px; transform:rotate(45deg) }
.tile.blitz > span { font-size:11px; transform:rotate(-45deg) }
.blitz-lbl { margin:0 2px 0 var(--s1); font-size:var(--f-xs); color:var(--ink-2) }

/* player card */
.pcard { padding:var(--s3) var(--s4) }
.host .pcard { margin:var(--s2) 0 var(--s4) }
.pc-head { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s1) var(--s3) }
.pc-head h4 { display:flex; flex:1 1 auto; align-items:center; gap:6px; min-width:0; font-size:var(--f-l) }
.pc-lead { order:1; width:100%; margin:0; font-size:var(--f-s); color:var(--ink-2) }
.pc-close { margin-left:auto; padding:var(--s1) var(--s3); font-size:var(--f-s); color:var(--ink-2); background:none; border:1px solid var(--line); border-radius:999px; cursor:pointer }
html:not(.js) .pc-close { display:none }
.pc-sec { margin:var(--s4) 0 var(--s1); font-size:var(--f-s); text-transform:uppercase; color:var(--ink-2) }
.mlist { margin:0; padding:0; list-style:none }
.m { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s1) var(--s3); padding:var(--s2) 0; border-top:1px solid var(--line) }
.m-round { flex:none; min-width:5.5em; font-size:var(--f-s); color:var(--ink-2) }
.m-vs { flex:1 1 10em; min-width:0 }
#players { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:var(--s4) }
#players h2 { grid-column:1 / -1; margin:0 }
html.js #players { display:none }
@media (min-width:720px) { .slot-fold { display:none } }

/* footer */
.foot { margin-top:var(--s8); padding-top:var(--s5); padding-bottom:var(--s7); border-top:1px solid var(--line) }

/* phones: the bracket reads top to bottom */
@media (max-width:719.98px) {
  main > section + section { margin-top:var(--s6) }
  .board { display:block; min-width:0 }
  .plane, .board-wrap { padding:var(--s3) }
  .rh { display:block; margin:var(--s4) 0 var(--s2); text-align:left }
  .slot::before, .slot::after, .board-fold { display:none }
  .card .prow { flex-wrap:wrap }
}
/* 40px touch targets */
@media (max-width:719.98px), (pointer:coarse) {
  .pname, .gname { min-height:40px; margin:0 }
  .pc-close, .info { display:inline-flex; align-items:center; min-height:40px }
  .key summary { padding:10px 0 }
}
@media (max-width:479.98px) {
  .wrap { padding-left:var(--s4); padding-right:var(--s4) }
  .logo img { height:36px }
  .title h1 { font-size:var(--f-xl) }
  .info { flex-basis:100%; justify-content:center; margin-left:0; text-align:center }
  .tile.w, .tile.b, .tile.empty { width:30px; height:30px }
  .tile.blitz { width:24px; height:24px }
  .prow .tiles, .m .tiles { gap:6px }
  a.tile::before { inset:-7px -3px }
  .standings th, .standings td { padding:var(--s2) var(--s1) }
  .standings th { font-size:var(--f-xs); letter-spacing:0 }
  .standings th:first-child { width:48px }
  .standings th:nth-child(3) { width:60px }
  .standings th:nth-child(4) { width:58px }
  .group .panel { padding:var(--s3) }
  /* stacked tiles: a pointer would aim at the next tile */
  .tile[aria-expanded=true]::after { display:none }
}

/* motion and print */
/* page.js sets .boot until the first address is applied, so a link to another group does not animate the open one shut */
html.boot *, html.boot ::before, html.boot ::after { transition:none !important }
@media (prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth } }
@media (prefers-reduced-motion:reduce) { :root { --lift:none } *, ::before, ::after { transition:none !important } }
@media print {
  .fold { grid-template-rows:1fr }
  .fold-body { visibility:visible }
  html.js #players { display:grid }
  .skip, .pc-close, .info, .slot::before, .slot::after, .board-fold { display:none }
  .board { display:block; min-width:0 }
  .scroll { overflow:visible }
  .site, .plane, .board-wrap, .card, .pcard, .tile[data-group], .group .panel { background:none; box-shadow:none }
}