/* The Gathering Well Pickleball Classic. Colors sampled from the event logo and bracket boards. */
:root {
  --navy: #244c5a;
  --navy-deep: #12394a;
  --clay: #b46a55;
  --clay-deep: #9a5643;
  --clay-action: #a35a46; /* buttons: white text on brand clay is 4.1:1, this is 5.1:1 */
  --cream: #efdbb2;
  --mist: #b5cfd0;
  --mist-soft: #e4eeee;
  --paper: #f7f5f1;
  --card: #ffffff;
  --ink: #1d3640;
  --muted: #4c636b;      /* 5.4:1 on the pale bars, 5.8:1 on the page */
  --line: #d5dfe1;
  --radius: 12px;
  --tap: 48px;
  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'DM Serif Display', Georgia, serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 500 16px/1.4 var(--font);
  /* Words never break mid-word; layouts are built so whole words fit. */
  overflow-wrap: normal; word-break: normal; hyphens: manual;
}
h1, h2, h3, p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.wrap.reading { max-width: 680px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; border-radius: 6px; }

/* ---------- header ---------- */
.top { background: var(--card); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
.top img { height: 52px; width: auto; }
.top .title { font: 700 18px/1.2 var(--font); color: var(--navy); }
.top .title small { display: block; font-weight: 500; font-size: 14px; color: var(--muted); }
.top .title small a { color: var(--muted); }
.top .homelink { display: block; }
.toplinks { display: flex; gap: 4px; margin-left: auto; }
.toplinks a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-weight: 700; font-size: 14px; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 20px; border-radius: 999px; border: 2px solid var(--navy);
  background: transparent; color: var(--navy); font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap;
}
.btn.primary { background: var(--clay-action); border-color: var(--clay-action); color: #fff; }
.btn.primary:hover { background: var(--clay-deep); border-color: var(--clay-deep); }
.btn.quiet { border-color: transparent; text-decoration: underline; text-underline-offset: 3px; padding: 0 8px; }
.btn.small { min-height: 40px; font-size: 14px; padding: 0 14px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .45; cursor: default; }

/* ---------- bracket switch + tabs ---------- */
.segment { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 16px 0 0; padding: 5px; background: var(--mist-soft); border-radius: 999px; }
.segment button { min-height: 44px; padding: 6px 6px; border: 0; border-radius: 999px; background: transparent; font-weight: 700; font-size: 14px; line-height: 1.15; color: var(--navy); }
.segment.four { grid-template-columns: repeat(4, 1fr); gap: 2px; }
.segment.four button { font-size: 13px; padding: 6px 2px; }
.segment button[aria-selected='true'] { background: var(--navy); color: #fff; }

.ribbon {
  margin: 22px auto 4px; width: fit-content; max-width: 100%; padding: 10px 44px; background: var(--clay); color: #fff;
  font: 700 20px/1.2 var(--font); text-align: center;
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%, 18px 50%);
}
.presented { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.presented img { height: 34px; width: auto; max-width: 130px; object-fit: contain; }

.tabs { display: flex; gap: 4px; margin: 20px 0 0; border-bottom: 2px solid var(--line); }
.tabs button { flex: 1; min-height: var(--tap); border: 0; background: none; font-weight: 700; font-size: 16px; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tabs button[aria-selected='true'] { color: var(--navy); border-bottom-color: var(--clay); }

/* ---------- my team ---------- */
.myteam { margin: 18px 0 0; background: var(--navy); color: #fff; border-radius: var(--radius); padding: 16px; }
.myteam .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cream); }
.myteam .where { font: 400 28px/1.15 var(--serif); margin-top: 2px; }
.myteam .detail { margin-top: 6px; font-size: 16px; color: #e6eff0; }

/* ---------- find your team + my page ---------- */
.find { margin-top: 28px; }
.find .eventline { margin: 0 0 10px; font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--clay-deep); }
.find h1 { font: 400 34px/1.1 var(--serif); color: var(--navy); }
.find p { margin-top: 8px; color: var(--muted); }
.field.big { margin-top: 16px; min-height: 60px; font-size: 18px; border-color: var(--navy); border-radius: 14px; -webkit-appearance: none; appearance: none; }
.results { display: grid; gap: 8px; margin-top: 10px; }
.pick { display: grid; gap: 2px; width: 100%; text-align: left; min-height: 60px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.pick:hover { border-color: var(--navy); }
.pick b { font-weight: 700; font-size: 16px; color: var(--navy); }
.pick span { font-size: 14px; color: var(--muted); }
.browse { border-top: 1px solid var(--line); }
.browse summary { min-height: var(--tap); display: flex; align-items: center; font-weight: 700; color: var(--navy); cursor: pointer; }
.browse .pick { margin-bottom: 8px; min-height: 52px; }
.hello { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.hello .btn.quiet { padding: 0; }
.hello b { display: block; font-size: 18px; color: var(--navy); }
.hello span { font-size: 14px; color: var(--muted); }
.myteam .where { font: 400 46px/1.05 var(--serif); margin-top: 4px; }
.myteam .when { font: 400 28px/1.2 var(--serif); color: var(--cream); margin-top: 2px; }
.myteam .detail.big { font-size: 18px; margin-top: 6px; }
.games { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.games li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; align-content: center; padding: 10px 14px; min-height: 90px; }
.games li + li { border-top: 1px solid var(--line); }
.games .meta { grid-column: 1 / -1; font-size: 14px; color: var(--muted); }
.games .opp { font-weight: 600; }
.games .res { font-weight: 700; color: var(--muted); white-space: nowrap; }
.games .res.won { color: #2c6e49; }
.standline { font-size: 18px; font-weight: 600; color: var(--navy); }
.round .btn.small { margin-top: 12px; }

/* ---------- results ---------- */
.restitle { font: 400 40px/1.1 var(--serif); color: var(--navy); margin-top: 24px; text-align: center; }
.ressub { text-align: center; color: var(--muted); margin-top: 4px; }
.resgroup { margin-top: 12px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.resgroup h3 { font: 700 12px/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 22px 0 0; }
.podium { display: grid; gap: 10px; margin-top: 16px; }
@media (min-width: 700px) { .podium { grid-template-columns: 1.3fr 1fr 1fr; } }
.place { padding: 16px 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.place.gold { background: var(--cream); border-color: var(--cream); }
.place .eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--clay-deep); }
.place b { display: block; font: 400 24px/1.2 var(--serif); color: var(--navy-deep); margin-top: 4px; }
.place.gold b { font-size: 28px; }

.teamsplit { border: 0; border-top: 2px solid var(--line); margin: 32px 0 8px; }
.follow { display: grid; gap: 6px; justify-items: start; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.follow span { font-size: 14px; color: var(--muted); }

/* ---------- courts now ---------- */
.crows { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.crow { display: grid; grid-template-columns: minmax(72px, auto) 1fr; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; min-height: 166px; }
.crow.mine { border: 2px solid var(--clay-action); }
.cbadge { display: grid; align-content: center; justify-items: center; gap: 2px; background: var(--navy); color: #fff; padding: 10px 8px; text-align: center; max-width: 124px; }
.crow.mine .cbadge { background: var(--clay-action); }
.cbadge span { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
.crow.mine .cbadge span { color: #fff; }
.cbadge b { font: 400 40px/1.25 var(--serif); }
.cbadge.word b { font: 700 13px/1.3 var(--font); letter-spacing: .02em; text-transform: uppercase; }
.cgame { padding: 12px 14px; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; min-width: 0; }
.cmeta { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--muted); margin-bottom: 8px; }
.crow.mine .cmeta { color: var(--clay-deep); }
.cteam { font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--navy); }
.cvs { display: flex; align-items: center; gap: 8px; margin: 5px 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cvs::after { content: ''; flex: 1; border-top: 1px solid var(--line); }

/* ---------- matches ---------- */
.round { margin-top: 26px; }
.round-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.round-head h2 { font: 700 18px/1.2 var(--font); color: var(--navy); }
.round-head .when { color: var(--muted); font-size: 14px; font-weight: 700; }
.round-head .now { margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--clay-deep); }
.match-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.match { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.match.mine { border-color: var(--clay); box-shadow: inset 4px 0 0 var(--clay); }
.match-meta { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; background: var(--mist-soft); font-size: 14px; font-weight: 700; color: var(--navy); }
.match-meta .state { color: var(--muted); white-space: nowrap; }
.side { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; min-height: 58px; flex: 1 0 auto; }
.side + .side { border-top: 1px solid var(--line); }
.side .who b, .side .who span { display: block; font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--ink); }
.side .who .seed { display: inline; font-size: 12px; font-weight: 700; color: var(--clay-deep); margin-right: 4px; }
.side.tbd .who b { color: var(--muted); }
.side .pts { font: 700 24px/1 var(--font); min-width: 30px; text-align: right; color: var(--muted); }
.side.won .who b, .side.won .who span { font-weight: 700; color: var(--navy); }
.side.won .pts { color: var(--clay-deep); }
.side.lost .who b, .side.lost .who span { color: var(--muted); }

/* ---------- bracket tree ---------- */
.group { margin-top: 26px; }
.group h2 { font: 700 18px/1.2 var(--font); color: var(--navy); }
.group .sub { font-size: 14px; color: var(--muted); margin-top: 2px; }
.tree { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; margin-top: 12px; align-items: center; }
.tree .semis { display: grid; gap: 14px; position: relative; }
.tree .semis .match { position: relative; overflow: visible; }
.tree .semis .match .match-meta { border-radius: var(--radius) var(--radius) 0 0; }
.tree .semis .match::after { content: ''; position: absolute; left: 100%; top: 50%; width: 12px; border-top: 2px solid var(--mist); }
.tree .semis::after { content: ''; position: absolute; left: calc(100% + 12px); top: 25%; bottom: 25%; border-right: 2px solid var(--mist); }
.tree .final { position: relative; }
.tree .final::before { content: ''; position: absolute; right: 100%; top: 50%; width: 11px; border-top: 2px solid var(--mist); }
.tree .match-meta { flex-direction: column; gap: 0; font-size: 12px; }
.tree .side { padding: 8px 10px; gap: 6px; }
.tree .side .who b, .tree .side .who span { font-size: 14px; }
.tree .side .pts { font-size: 18px; min-width: 22px; }
/* Grid children may never force the page wider than the screen. */
.tree .semis, .tree .final, .tree .match, .side .who { min-width: 0; }
/* Very narrow phones: the final sits under the semifinals instead of beside them. */
@media (max-width: 400px) {
  .tree { grid-template-columns: 1fr; row-gap: 14px; }
  .tree .semis::after, .tree .semis .match::after, .tree .final::before { display: none; }
}
/* On a phone each name may take two lines; every box is sized for that so they all match. */
@media (max-width: 560px) { .tree { column-gap: 20px; } .tree .side { min-height: 84px; } .tree .match-meta { min-height: 66px; justify-content: center; } }
.champion { margin-top: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--cream); color: var(--navy-deep); }
.champion .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.champion .name { font: 400 24px/1.2 var(--serif); margin-top: 2px; }
.note, .lead, .find p, .standline, .hint { max-width: 62ch; }
.note { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--mist-soft); color: var(--navy); font-size: 14px; }

/* ---------- standings ---------- */
.pools { display: grid; gap: 8px; }
@media (min-width: 860px) { .pools { grid-template-columns: 1fr 1fr; gap: 12px 24px; align-items: start; } }
.poolhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 18px; font: 700 16px/1.2 var(--font); color: var(--navy); }
.poolhead span { font-size: 14px; font-weight: 600; color: var(--muted); }
.thirdplace { margin-top: 18px; }
.thirdplace h3 { font: 700 12px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.thirdplace .match { max-width: 340px; }
.table { width: 100%; border-collapse: collapse; margin-top: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.table th { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); background: var(--mist); padding: 10px 8px; text-align: center; }
.table th.l, .table td.l { text-align: left; }
.table td { padding: 8px; border-top: 1px solid var(--line); text-align: center; font-weight: 600; height: 58px; }
.table td.rank { width: 38px; color: var(--muted); }
.table td.l b, .table td.l span { display: block; font-weight: 600; font-size: 16px; line-height: 1.3; }
.table tr.mine td { background: #fbf1ec; }
.table tr.band td { height: auto; padding: 6px 10px; background: var(--mist-soft); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); text-align: left; }

/* ---------- challenge court ---------- */
.board { margin-top: 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.board header { padding: 14px 16px; background: var(--mist-soft); }
.board h2 { font: 700 18px/1.2 var(--font); color: var(--navy); }
.board header p { font-size: 14px; color: var(--muted); margin-top: 2px; }
.board ol { list-style: none; margin: 0; padding: 0; }
.board li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 0 16px; min-height: 52px; border-top: 1px solid var(--line); }
.board li .board li .name small { display: block; color: var(--muted); font-size: 14px; font-weight: 500; }
.board li .val { font-weight: 700; font-size: 18px; color: var(--navy); }
.board li:first-child .val { color: var(--clay-deep); }
.board .empty { padding: 16px; color: var(--muted); font-size: 14px; }

/* ---------- footer + bottom nav ---------- */
.foot { margin-top: 40px; background: var(--card); border-top: 1px solid var(--line); padding: 22px 0 8px; }
.wall h2 { font: italic 400 28px/1.2 var(--serif); color: var(--navy); text-align: center; margin-bottom: 6px; }
.wall h3 { font: 700 12px/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: center; margin: 16px 0 8px; }
.wall ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
.wall li { width: calc((100% - 14px) / 2); }
.wall .logo { position: relative; display: block; aspect-ratio: 2.1; }
.wall .logo img { position: absolute; inset: 0; margin: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.wall .tier-serve li { width: calc((100% - 28px) / 3); }
@media (min-width: 600px) {
  .wall .logo { aspect-ratio: 1.6; }
  .wall .tier-paddle li { width: calc((100% - 42px) / 4); }
  .wall .tier-bracket li { width: calc((100% - 56px) / 5); }
  .wall .tier-serve li { width: calc((100% - 70px) / 6); }
}
@media (min-width: 900px) { .wall ul { gap: 10px 24px; } .wall .tier-paddle li { width: calc((100% - 96px) / 5); } .wall .tier-bracket li { width: calc((100% - 120px) / 6); } .wall .tier-serve li { width: calc((100% - 168px) / 8); } }
.tagline { background: var(--navy-deep); color: #fff; text-align: center; padding: 18px 16px; font: italic 400 24px/1.2 var(--serif); }
.tagline em { color: #e0927b; font-style: italic; }
.foot-links { background: var(--navy-deep); text-align: center; padding: 0 16px 28px; font-size: 14px; }
.foot-links p { color: #fff; margin-bottom: 8px; }
.foot-links a { color: var(--mist); display: inline-block; padding: 12px 8px; min-height: 44px; }
.status { text-align: center; font-size: 14px; color: var(--muted); margin-top: 18px; min-height: 18px; }
.status.bad { color: var(--clay-deep); font-weight: 700; }

.top { position: sticky; top: 0; z-index: 20; }
.topnav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 1px solid var(--line); }
.topnav button { min-height: 52px; border: 0; background: none; font-weight: 700; font-size: 15px; color: var(--muted); border-bottom: 3px solid transparent; padding: 0 4px; }
.topnav button[aria-selected='true'] { color: var(--navy); border-bottom-color: var(--clay); }

/* ---------- admin ---------- */
.gate { max-width: 420px; margin: 12vh auto 0; padding: 0 16px; text-align: center; }
.gate img { height: 96px; margin: 0 auto 18px; }
.gate h1 { font: 400 28px/1.2 var(--serif); color: var(--navy); }
.gate p { color: var(--muted); margin-top: 6px; }
.gate form { margin-top: 20px; display: grid; gap: 12px; }
.field { width: 100%; min-height: var(--tap); padding: 0 14px; border: 2px solid var(--line); border-radius: 10px; background: #fff; font-weight: 600; }
.field:focus { border-color: var(--navy); outline: none; }
.error { color: #a1301f; font-weight: 600; font-size: 14px; min-height: 20px; }

.panel-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.teamrow { display: grid; grid-template-columns: 48px 1fr; gap: 8px; align-items: center; margin-top: 10px; padding: 4px; border-radius: 12px; border: 2px solid transparent; }
.teamrow.isout .field { color: var(--muted); text-decoration: line-through; }
.outbtn { white-space: nowrap; }

.teamrow.picked, .teamrow.over { border-color: var(--clay); background: #fbf1ec; }
.grip { width: 48px; height: 48px; border-radius: 10px; border: 2px solid var(--line); background: #fff; font-weight: 700; color: var(--navy); cursor: grab; touch-action: none; }
.grip:disabled { cursor: default; border-color: transparent; background: none; color: var(--muted); }


.match.editable { cursor: pointer; }
.match.editable:hover { border-color: var(--navy); }
details.more { border-top: 1px solid var(--line); padding-top: 10px; }
details.more summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--navy); min-height: 44px; display: flex; align-items: center; }
details.more .inner { display: grid; gap: 10px; margin-top: 8px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lbl { display: block; font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }

.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.check { display: grid; grid-template-columns: 26px 44px 1fr; align-items: center; gap: 12px; min-height: 56px; padding: 6px 12px; border: 2px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; font-size: 14px; font-weight: 600; }
.check:hover { border-color: var(--navy); }
.check:has(input:checked) { border-color: var(--navy); background: var(--mist-soft); }
.check input { width: 24px; height: 24px; margin: 0; accent-color: var(--navy); cursor: pointer; }
.check img { width: 44px; height: 30px; object-fit: contain; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-top: 14px; }
.card h3 { font: 700 16px/1.2 var(--font); color: var(--navy); margin-bottom: 4px; }
.card .hint { font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.entryform { display: grid; grid-template-columns: 1fr 90px; gap: 8px; }
.entryform .btn { grid-column: 1 / -1; }
.entries { list-style: none; margin: 12px 0 0; padding: 0; }
.entries li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; min-height: 48px; border-top: 1px solid var(--line); font-size: 16px; }
.qr { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.qr svg { width: 180px; height: 180px; background: #fff; }
.qr .url { font-weight: 700; color: var(--navy); }

/* Sits ABOVE the help bubble, which is fixed to the same bottom corner: at narrow and
   middling widths the bubble used to cover the right of the toast, including Undo. */
.toast { position: fixed; left: 12px; right: 12px; bottom: 74px; z-index: 50; max-width: 560px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; background: var(--navy-deep); color: #fff; border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.25); font-size: 14px; font-weight: 600; }
.toast.bad { background: #8d2a1b; }
.toast .btn { border-color: #fff; color: #fff; }

/* ---------- scoring table: one board ---------- */
.offline { margin-top: 12px; padding: 12px 16px; border-radius: var(--radius); background: #8d2a1b; color: #fff; font-weight: 700; font-size: 14px; }
.openwarn { margin-top: 12px; font-size: 14px; color: var(--clay-deep); font-weight: 600; }
/* Scoring table home: the day at a glance */
.dash { margin-top: 18px; }
.hero { display: flex; align-items: center; gap: 28px; padding: 22px 28px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.hero img { width: 250px; height: auto; flex: none; }
.hero > div { border-left: 1px solid var(--line); padding-left: 28px; }
.hero h1 { font: 400 34px/1.05 var(--serif); color: var(--navy); }
.hero .sub { margin-top: 6px; font-size: 14px; color: var(--muted); }
.hero .clocklabel { margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hero .clock { font: 400 24px/1.1 var(--serif); color: var(--navy); margin-top: 2px; }
.tiles { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; margin-top: 12px; }
@media (min-width: 700px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile { display: grid; align-content: start; gap: 2px; text-align: left; min-height: 124px; height: 100%; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.tile:hover { border-color: var(--navy); }
.tile b { font: 400 28px/1.1 var(--serif); color: var(--navy); }
.tile span { font-size: 14px; font-weight: 700; color: var(--ink); }
.tile small { font-size: 12px; color: var(--muted); margin-top: auto; }
.tile.accent { background: var(--clay-action); border-color: var(--clay-action); }
.tile.accent b, .tile.accent span { color: #fff; } .tile.accent small { color: #fbe4dc; }
.lanes { display: grid; gap: 8px; margin-top: 12px; }
.lane { display: grid; grid-template-columns: 120px 1fr auto; grid-template-areas: "name word pct" "name bar pct"; gap: 4px 14px; align-items: center; text-align: left; min-height: 60px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.lane:hover { border-color: var(--navy); }
.ln-name { grid-area: name; font-weight: 700; color: var(--navy); }
.ln-word { grid-area: word; font-size: 14px; color: var(--muted); }
.ln-pct { grid-area: pct; font: 400 20px/1.15 var(--serif); color: var(--navy); }
.bar { grid-area: bar; display: block; height: 8px; border-radius: 999px; background: var(--mist-soft); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--clay); border-radius: 999px; }
@media (max-width: 560px) { .hero { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; } .hero img { width: 200px; } .hero > div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 14px; width: 100%; } .hero h1 { font-size: 28px; } .tile b { font-size: 24px; } .lane { grid-template-columns: 1fr auto; grid-template-areas: "name pct" "word pct" "bar bar"; } }
.scorehead { font: 400 28px/1.15 var(--serif); color: var(--navy); margin-top: 32px; }

/* Score: calm cards, one per game being played. The only accent on the screen is "Enter score". */
.livegroup { margin-top: 28px; }
.livehead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.livehead h2 { font: 400 28px/1.15 var(--serif); color: var(--navy); }
.livehead span { font-size: 16px; font-weight: 600; color: var(--muted); }
.livehead .btn.quiet { padding: 0; }
.livehead .btn.quiet:first-of-type { margin-left: auto; }
.laterbtns { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.livegames { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.game { display: flex; flex-direction: column; gap: 4px; text-align: left; min-height: 236px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.game:hover { border-color: var(--navy); }
.game .gc { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.game .gl { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: baseline; font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.game .gl i { font-style: normal; font-weight: 700; font-size: 24px; }
.game .vsline { font-size: 12px; font-weight: 600; color: var(--muted); }
.game .enter { margin-top: auto; display: block; text-align: center; padding: 12px; border-radius: 999px; background: var(--clay-action); color: #fff; font-weight: 700; font-size: 16px; }
.game .enter.waiting { background: var(--navy-deep); }
/* The button sits at the same height on every card; the last-score line has a fixed slot below it. */
.game .upnext { margin-top: 8px; min-height: 36px; }
.game { min-height: 268px; }
.game.done { background: transparent; border-style: dashed; }
.game.done .gl { font-size: 16px; font-weight: 500; color: var(--muted); }
.game.done .gl.won { color: var(--navy); font-weight: 700; }
.game .upnext { font-size: 14px; color: var(--muted); }
.alert { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; padding: 14px 16px; border-radius: var(--radius); background: #fbf1ec; color: var(--clay-deep); font-weight: 600; }
.later { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--line); }
.later li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 16px; }
details.quiet { margin-top: 22px; border-top: 1px solid var(--line); }
details.quiet > summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; font-weight: 700; font-size: 16px; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
details.quiet > summary::-webkit-details-marker { display: none; }
.chips.two { margin-top: 12px; }
@media (min-width: 700px) { .chips.two { grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto); gap: 6px 14px; } .chips.two .chip { margin-bottom: 0; } }
.ties { margin-top: 14px; }
.section { margin-top: 28px; }
.sechead, details.section > summary { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sechead h2, details.section > summary h2 { font: 400 28px/1.15 var(--serif); color: var(--navy); }
.sechead span, details.section > summary span { font-size: 14px; font-weight: 600; color: var(--muted); }
details.section > summary::after { content: 'Open'; margin-left: auto; font-size: 14px; font-weight: 700; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
details.section[open] > summary::after { content: 'Close'; }
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary { list-style: none; cursor: pointer; min-height: var(--tap); align-items: center; list-style-position: outside; }
.section .lead { color: var(--muted); margin-top: 4px; font-size: 16px; }
.cardgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.cardgrid .card { margin-top: 14px; }

.boardwrap { display: none; margin-top: 14px; }
.boardgrid { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--card); border: 2px solid var(--navy); }
.boardgrid th, .boardgrid td { border: 1px solid #9db3b9; }
.boardgrid thead th { background: var(--mist); color: var(--navy); font-weight: 700; padding: 10px 6px; }
.boardgrid .poolrow th { background: var(--mist-soft); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 6px; }
.boardgrid tbody th { width: 110px; padding: 8px; font-weight: 700; color: var(--navy); text-align: center; }
.boardgrid tbody th span { display: block; font-weight: 500; font-size: 14px; color: var(--muted); }
.boardgrid tbody th em { display: block; font-style: normal; font-weight: 600; font-size: 12px; color: var(--clay-deep); margin-top: 4px; }
.opencourt { display: grid; place-items: center; min-height: 104px; font-size: 14px; font-weight: 600; color: var(--muted); }
.byes { margin-top: 10px; font-size: 14px; color: var(--muted); }
.boardgrid tr.now tbody th, .boardgrid tr.now th { background: #fbf1ec; }
.boardgrid td { padding: 0; height: 1px; }
.cell { display: grid; align-content: center; gap: 6px; width: 100%; height: 100%; min-height: 104px; padding: 10px; border: 0; background: none; text-align: left; }
.cell:hover { background: var(--mist-soft); }
.cell .ln { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.cell .ln b { font-weight: 600; font-size: 14px; line-height: 1.25; }
.cell .ln i { font-style: normal; font-weight: 700; font-size: 20px; color: var(--muted); }
.cell .ln.won b { font-weight: 700; color: var(--navy); } .cell .ln.won i { color: var(--clay-deep); }
.cell .ln.lost b { color: var(--muted); }
.cell em { font-style: normal; font-size: 12px; color: var(--clay-deep); font-weight: 600; }
@media (min-width: 760px) { .boardwrap { display: block; } .boardlist { display: none; } }
@media (max-width: 1100px) { .cell { min-height: 152px; } }

.chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.chip { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: center; min-height: 78px; padding: 6px 10px; background: var(--card); border: 2px solid var(--line); border-radius: 10px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.chip[data-off] { cursor: default; touch-action: auto; }
.chip:nth-child(4), .chip:nth-child(8) { margin-bottom: 10px; }
.chip .n { font-weight: 700; color: var(--clay-deep); text-align: center; }
.chip .t b { display: block; font-size: 16px; font-weight: 600; line-height: 1.25; }
.chip .t span { display: block; font-size: 14px; color: var(--muted); }
.chip.picked { border-color: var(--clay); background: #fbf1ec; }
.chip.band { display: block; min-height: 0; border: 0; background: none; padding: 10px 2px 2px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); cursor: default; }
.ghost { position: fixed; z-index: 60; pointer-events: none; opacity: .92; box-shadow: 0 10px 30px rgba(0,0,0,.25); transform: rotate(-1.5deg); margin: 0; background: var(--card); }
body.dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
body.dragging [data-drop='seed'], .side[data-drop].over { outline: 2px dashed var(--mist); outline-offset: -4px; }
.side[data-drop].over { outline: 3px solid var(--clay); background: #fbf1ec; }
.ties { max-width: 62ch; margin: 0; padding-left: 18px; font-size: 14px; color: var(--ink); display: grid; gap: 6px; }

dialog.sheet { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); border: 0; border-radius: 18px; padding: 20px; color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
dialog.sheet::backdrop { background: rgba(18, 57, 74, .55); }
.sheet header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sheet header b { display: block; font-size: 18px; color: var(--navy); } .sheet header span { font-size: 14px; color: var(--muted); }
.srow { display: grid; grid-template-columns: 1fr 92px 76px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.srow.head { border-top: 0; padding: 14px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; }
.srow .nm { font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--navy); }
.scorebox { width: 100%; height: 64px; text-align: center; font: 700 28px/1 var(--font); border: 2px solid var(--line); border-radius: 12px; background: #fff; }
.scorebox:focus { border-color: var(--navy); outline: none; }
.wintick { display: grid; place-items: center; height: 64px; cursor: pointer; }
.wintick input { appearance: none; -webkit-appearance: none; width: 36px; height: 36px; margin: 0; border: 2px solid var(--muted); border-radius: 8px; background: #fff; cursor: pointer; display: grid; place-items: center; }
.wintick input:checked { background: var(--navy); border-color: var(--navy); }
.wintick input:checked::after { content: ''; width: 10px; height: 18px; border: solid #fff; border-width: 0 4px 4px 0; transform: rotate(45deg) translate(-1px, -2px); }
.sheet .error { margin-top: 8px; }
.choice { margin: 8px 0 4px; padding: 14px; border-radius: 12px; background: #fbf1ec; color: var(--clay-deep); font-size: 14px; }
.choice p { margin-bottom: 10px; }
.choice .pair .btn { white-space: normal; padding: 8px 12px; line-height: 1.25; }
.sheet details.more { margin-top: 16px; }
/* Without <dialog> support a browser renders the sheet as an ordinary always-visible block,
   so hide it explicitly and, when it is opened by hand, float it over the page with a backdrop. */
dialog.sheet:not([open]) { display: none; }
dialog.sheet.nodialog[open] { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 60; max-height: 88vh; overflow: auto; box-shadow: 0 0 0 100vmax rgba(18, 57, 74, .45); }

.sheet details.change { border: 0; padding: 0; margin-top: 10px; }
.sheet details.change > summary { min-height: 48px; padding: 0 16px; border: 2px solid var(--navy); border-radius: 999px; justify-content: center; font-size: 15px; }
.sheet details.change[open] > summary { border-radius: 14px 14px 0 0; }
.sheet details.change .inner { padding: 14px; border: 2px solid var(--navy); border-top: 0; border-radius: 0 0 14px 14px; }

/* ---------- help bubble ---------- */
.help { position: fixed; right: 14px; bottom: 14px; z-index: 45; display: grid; justify-items: end; gap: 10px; }
.help-pill { min-height: 48px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--navy-deep); color: #fff; font-weight: 700; font-size: 15px; box-shadow: 0 8px 24px rgba(18,57,74,.28); }
.help-pill .short { display: none; }
.help-pill.is-open { background: var(--clay-action); }
.help-panel { width: min(380px, calc(100vw - 28px)); max-height: min(560px, calc(100vh - 100px)); display: grid; grid-template-rows: auto 1fr auto auto; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 16px 48px rgba(0,0,0,.22); overflow: hidden; }
.help-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--navy-deep); color: #fff; }
.help-head b { font-size: 16px; }
.help-close { min-height: 36px; padding: 0 10px; border: 0; background: none; color: var(--mist); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.help-log { overflow-y: auto; padding: 14px; display: grid; gap: 10px; align-content: start; min-height: 160px; }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 15px; line-height: 1.4; white-space: pre-wrap; }
.msg.bot { background: var(--mist-soft); color: var(--ink); justify-self: start; border-bottom-left-radius: 4px; }
.msg.me { background: var(--navy); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.msg.thinking { color: var(--muted); }
.msg.thinking::after { content: '...'; }
.help-starters { display: grid; gap: 6px; padding: 0 14px 10px; }
.help-starters:empty { display: none; }
.starter { text-align: left; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: 14px; font-weight: 600; color: var(--navy); }
.starter:hover { border-color: var(--navy); }
.help-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px 14px 14px; border-top: 1px solid var(--line); }
.help-input { min-height: 44px; padding: 0 12px; border: 2px solid var(--line); border-radius: 10px; font-weight: 500; }
.help-input:focus { border-color: var(--navy); outline: none; }
.help-send { min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--clay-action); color: #fff; font-weight: 700; }
main { padding-bottom: 88px; }
@media (max-width: 480px) { .help-pill .long { display: none; } .help-pill .short { display: inline; } .help-pill { padding: 0 16px; } }

@media print {
  /* From the scoring table, printing means the QR code and nothing else. */
  body:has(.qrcard) main > *:not(.share), body:has(.qrcard) .share > *:not(.cardgrid), body:has(.qrcard) .cardgrid > *:not(.qrcard), body:has(.qrcard) #openwarn { display: none !important; }
  .qrcard { border: 0; } .qrcard .qr { display: grid; justify-items: center; text-align: center; } .qrcard .qr svg { width: 70vw; height: auto; }
  .top, .segment, .toast, .panel-actions, .help, .no-print { display: none !important; }
  body { background: #fff; }
}