/* Volleymate's app pages, on base.css: the page chrome, then a section per
   page in menu order. Wider than the what-if planner: brackets need room. */

/* ==== page chrome ==== */
body{max-width:1180px; padding-block:24px 60px;}
/* The all-courts grid benefits from every available desktop pixel. */
body:has(#view-schedule:not([hidden])){max-width:none;}
.app-shell{display:flex; align-items:flex-start; gap:16px;}
.app-content{min-width:0; flex:1;}
.view{margin-top:8px;}
section.card{margin-top:20px;}

/* menu */
.menu-button{
  align-self:flex-start; width:36px; height:36px; padding:0; border:1px solid var(--border); border-radius:8px;
  background:var(--surface-2); color:var(--fg); font:inherit; font-size:21px; line-height:1; cursor:pointer;
}
.menu-button:hover{border-color:var(--muted);}
.app-menu{
  position:sticky; top:16px; flex:0 0 min(230px,35vw); display:flex; flex-direction:column; gap:3px;
  padding:12px; border:1px solid var(--border); border-radius:10px; background:var(--surface);
}
.app-menu::before{content:""; display:block; aspect-ratio:1500 / 290; margin:2px 6px 14px; background:url("images/second.svg") center / contain no-repeat;}
.app-menu a{padding:10px 11px; border-radius:7px; color:var(--fg); text-decoration:none; font-size:14px; font-weight:600;}
.app-menu a:hover{background:var(--surface-2);}
.app-menu-divisions{display:flex; flex-direction:column; gap:2px; margin:-1px 0 4px 10px; padding-left:8px; border-left:1px solid var(--border);}
.app-menu-divisions a{padding:6px 8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:500;}
.app-menu-role{display:flex; flex-direction:column; gap:5px; margin:10px 10px 0; padding-top:12px; border-top:1px solid var(--border); color:var(--muted); font-size:12.5px; font-weight:600;}
.app-menu-role select{width:100%; padding:6px 8px; font:inherit; font-size:14px; font-weight:400;}

/* header: crumbs, title (editable for a division), planner link and tabs */
.page-head{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:end; gap:16px; position:relative;}
#crumbs a{color:inherit; text-decoration:none;}
#crumbs a:hover{text-decoration:underline;}
#crumbs .sep{color:var(--muted); margin:0 4px;}
#pageSub:empty{display:none;}
.title-line{display:flex; align-items:center; gap:8px;}
.title-line h1{margin:0;}
.title-edit{border:0; border-radius:6px; padding:4px 7px; background:transparent; color:var(--muted); font:inherit; cursor:pointer;}
.title-edit:hover{background:var(--surface-2); color:var(--fg);}
.title-name-input{width:min(460px,70vw); border:1px solid var(--accent); border-radius:8px; background:var(--surface-2); color:var(--fg); padding:3px 7px; font:inherit; font-weight:inherit;}
.tabs{display:flex; border:1px solid var(--border); border-radius:8px; overflow:hidden;}
.tabs a{padding:8px 16px; background:var(--surface-2); color:var(--muted); text-decoration:none; font-size:14px; font-weight:600;}
.head-actions{display:contents;}
/* Planner sits top right; the tabs get their own row under the title, at the
   content's left edge, just above the view. */
#plannerLink{grid-column:3; grid-row:1; align-self:end;}
.head-actions .tabs{grid-column:1 / -1; grid-row:2; justify-self:start;}
.head-actions .btn[aria-current="page"]{border-color:var(--accent); color:var(--accent);}
@media (max-width:700px){
  .app-shell{display:block;}
  .app-menu{position:static; width:100%; margin-bottom:12px;}
  .page-head{grid-template-columns:auto minmax(0,1fr);}
  .page-head #plannerLink{grid-column:1 / -1; grid-row:auto; justify-self:start;}
  .head-actions .tabs{grid-row:auto; justify-self:stretch; overflow-x:auto;}
  .tabs a{flex:1; text-align:center; white-space:nowrap;}
}

/* shared by the pages */
.toolbar{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:20px;}
.note-card{margin-top:20px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:14px;}
.empty-state{margin-top:24px; color:var(--muted);}
.empty-state a{color:var(--accent);}
.div-chip{display:inline-block; width:10px; height:10px; border-radius:3px; background:var(--div-color); margin-right:5px; vertical-align:0;}
.team-name{font-weight:600;}
.team-full{color:var(--muted); font-size:12px;}
.team-schedule-link{font:inherit; color:inherit; padding:0; border:0; background:transparent; cursor:pointer; text-align:inherit;}
.team-schedule-link:hover{color:var(--accent); text-decoration:underline;}
.chips .team-schedule-link{color:var(--accent);}
/* A match in a list (pools, a team's schedule, a court's schedule). */
.round-label{margin:14px 0 6px;}
.match-row{
  display:flex; flex-direction:column; gap:2px; width:100%;
  background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:7px 10px;
  margin-bottom:6px; cursor:pointer; color:var(--fg); font:inherit; font-size:13.5px; text-align:left;
}
.match-row:hover{border-color:var(--muted);}
.match-row .a, .match-row .b{text-align:left;}
.match-row .score{font-family:var(--font-mono); font-weight:600; color:var(--muted); text-align:left; font-variant-numeric:tabular-nums;}
.match-row .duty{display:block; margin-top:2px; font-family:var(--font-body); font-size:11px; font-weight:400; white-space:nowrap;}
.match-row .where{display:block; font-family:var(--font-body); font-size:11px; color:var(--muted); font-weight:400;}
.match-row .won{font-weight:700;}
.match-row .lost{color:var(--muted);}
.match-row.played .score{color:var(--fg);}
.fmt-note{display:block; font-family:var(--font-body); font-size:10.5px; font-weight:600; color:var(--accent-2);}
/* Score dialog. */
.dlg-head{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap;}
.dlg-tag{color:var(--muted); font-size:12px;}
.dlg-grid{display:grid; grid-template-columns:1fr repeat(var(--sets,1), 56px); gap:8px; align-items:center;}
.dlg-grid .h{text-align:center; line-height:1.3; font-weight:400;}
.dlg-grid .h .to{text-transform:none; letter-spacing:0; font-family:var(--font-mono);}
.dlg-grid input{
  width:100%; font-family:var(--font-mono); font-size:18px; font-weight:600; text-align:center;
  background:var(--surface-2); color:var(--fg); border:1px solid var(--border); border-radius:6px; padding:6px 0;
}
.dlg-grid .t{font-weight:600; font-size:14px;}
.dlg-error{color:var(--accent-2); font-size:13px; min-height:18px; margin:10px 0 0;}
.slot-teams{font-weight:600; margin-bottom:12px;}
.slot-grid{grid-template-columns:1.4fr 1fr 1fr;}
.slot-grid input, .slot-grid select{width:100%;}

/* ==== events ==== */
.event-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; margin-top:16px;}
.event-card{display:block; text-decoration:none; color:var(--fg); margin:0;}
.event-card:hover{border-color:var(--accent);}
.event-card-name{font-family:var(--font-display); font-weight:700; font-size:21px; text-transform:uppercase; margin-bottom:4px;}

/* ==== event: details form, and the summary players see ==== */
.form-grid{display:grid; grid-template-columns:2fr 1fr; gap:12px;}
.form-grid .wide{grid-column:1 / -1;}
.form-grid label, .date-range label{display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--muted); font-weight:600;}
.form-grid select{max-width:none;}
.form-grid .row-actions{margin-top:0;}
.date-range{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:560px){.form-grid{grid-template-columns:1fr;}}
.event-facts{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 16px; margin:0;}
.event-facts dt{color:var(--muted); font-size:13px; font-weight:600;}
.event-facts dd{margin:0;}
.event-facts a{color:var(--accent);}
.event-map{display:block; width:100%; height:260px; margin-top:14px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2);}
.summary-heading{margin:22px 0 10px; font-size:20px;}
.summary-divisions{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px;}
.summary-division{display:block; margin:0; color:var(--fg); text-decoration:none; border-left:4px solid var(--div-color, var(--border));}
a.summary-division:hover{border-color:var(--accent); border-left-color:var(--div-color, var(--accent));}
.summary-division-name{font-weight:700; font-size:16px; margin-bottom:2px;}

/* ==== court planner: courts, then the site map ==== */
.cp-courts{display:flex; align-items:center; gap:10px 24px; flex-wrap:wrap; margin-top:20px;}
.cp-count{width:48px; padding:5px 6px; font-size:14px;}
.cp-names{margin-top:12px;}
.cp-names summary{cursor:pointer; font-size:13px; font-weight:600; color:var(--muted);}
.court-rows{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:8px 28px; margin-top:8px;}
/* short name, name, ✕ */
.court-row{display:grid; grid-template-columns:64px 1fr auto; gap:4px; align-items:center;}
.cp-toolbar{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:20px;}
.cp-tools{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:10px 0;}
.cp-courts .field-row, .cp-courts .check-row, .cp-toolbar .check-row, .cp-tools .check-row{margin:0;}
.cp-tools-sep{width:1px; align-self:stretch; background:var(--border); margin:0 4px;}
.cp-label-input{width:160px; padding:6px 9px; font:inherit; font-size:13px;}
/* The court strip floats at the top of the window while the map scrolls,
   and scrolls itself when an event has lots of courts. */
.cp-strip{
  position:sticky; top:0; z-index:4; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 0; background:var(--bg); max-height:30vh; overflow-y:auto;
}
.cp-court-chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--accent); border-radius:8px;
  background:var(--surface-2); color:var(--fg); font-size:13px; font-weight:600; cursor:grab; touch-action:none; user-select:none;
}
.cp-court-chip.placed{border-color:var(--border); color:var(--muted);}
.cp-court-chip.placed::before{content:"✓"; color:var(--accent);}
/* A court not yet on the map stands out in white (dark text in either theme). */
.cp-strip .cp-court-chip[data-court]:not(.placed){background:#fff; color:#15201c;}
.cp-chip-remove{border:0; padding:0 2px; background:none; color:var(--muted); font:inherit; font-size:11px; cursor:pointer;}
.cp-chip-remove:hover{color:var(--accent-2);}
.cp-icon{font-size:16px; line-height:1;}
.cp-ghost{z-index:10; transform:translate(-50%,-50%); cursor:grabbing; box-shadow:0 4px 14px rgba(0,0,0,.35);}
/* A facility being carried: drawn as itself, centred on its spot. */
.cp-marker-ghost{position:fixed; z-index:10; pointer-events:none; transform:translate(-80px,-50px); --map-ink:#071012; --map-pick:#ffd34a;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.4));}
.cp-marker-ghost svg{display:block; overflow:visible;}
.cp-marker-ghost circle{fill:#fff; stroke:var(--map-ink);}
.cp-marker-ghost text{text-anchor:middle; dominant-baseline:central;}
.cp-marker-ghost .cp-arrow{stroke:#fff; stroke-linejoin:round;}
.cp-marker.carried{opacity:.3;}
.cp-stage{border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--surface-2);}
/* The map's own colors stay the same in either theme, to read over a photo. */
.cp-svg{
  --map-court:#2fd9c4; --map-court-fill:rgba(47,217,196,.18); --map-court-numbered:rgba(47,217,196,.32);
  --map-off:#8ca0b3; --map-off-fill:rgba(140,160,179,.35); --map-pick:#ffd34a; --map-pick-fill:rgba(255,211,74,.4); --map-ink:#071012;
  display:block; width:100%; height:auto; margin:0 auto; touch-action:none; user-select:none; cursor:crosshair;
}
.cp-svg.mode-numbering, .cp-svg.mode-facilities{cursor:default;}
.cp-blank{fill:var(--surface);}
.cp-grid{fill:none; stroke:var(--border); stroke-width:1;}
.cp-court{cursor:move;}
.cp-court-box{fill:var(--map-court-fill); stroke:var(--map-court);}
.cp-court.numbered .cp-court-box{fill:var(--map-court-numbered);}
.cp-court.disabled .cp-court-box{fill:var(--map-off-fill); stroke:var(--map-off); stroke-dasharray:6 4;}
.cp-court.selected .cp-court-box{stroke:var(--map-pick);}
.cp-court.drop-target .cp-court-box{fill:var(--map-pick-fill); stroke:var(--map-pick);}
.cp-preview{stroke-dasharray:6 4;}
.cp-net{stroke:#fff; opacity:.7;}
.cp-label{fill:#fff; stroke:var(--map-ink); paint-order:stroke; text-anchor:middle; dominant-baseline:central; font-family:var(--font-display); font-weight:700; pointer-events:none;}
.cp-court.disabled .cp-label{font-style:italic;}
.cp-handle{fill:var(--map-pick); stroke:var(--map-ink);}
.cp-handle[data-handle="rotate"]{cursor:grab;}
.cp-handle[data-handle="resize"]{cursor:nwse-resize;}
.cp-handle-line{stroke:var(--map-pick);}
.mode-numbering .cp-court{cursor:pointer;}
.mode-numbering .cp-court.numbered{cursor:grab;}
.cp-marker circle{fill:#fff; stroke:var(--map-ink);}
.cp-marker text{text-anchor:middle; dominant-baseline:central;}
.cp-svg:not(.mode-facilities) .cp-marker{pointer-events:none;}
.mode-facilities .cp-court{pointer-events:none;}
.mode-facilities .cp-marker{cursor:grab;}
.mode-facilities .cp-marker.selected circle{stroke:var(--accent);}
.cp-arrow{stroke:#fff; stroke-linejoin:round;}
.mode-facilities .cp-marker.selected .cp-arrow{stroke:var(--accent);}
.mode-facilities .cp-marker .cp-handle{cursor:grab;}
.cp-marker-label{font-family:var(--font-body); font-weight:600;}
.cp-color{width:36px; height:30px; padding:2px; border:1px solid var(--border); border-radius:6px; background:var(--surface); cursor:pointer;}

/* ==== event planner ==== */
.rules-divisions{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
.rules-divisions a{font-weight:600;}
.rules-dialog{width:min(560px, calc(100vw - 32px));}
.rules-dialog .row-actions{justify-content:flex-end;}
.rules-changes{list-style:none; margin:14px 0; padding:0; display:grid; gap:10px;}
.rules-changes li{padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2);}
.rules-changes .check-row, .rules-changes .count-label{margin:8px 0 0;}
.rules-change-name{font-weight:700;}
.rules-change-values{margin-top:3px; font-size:14px;}

/* ==== divisions: one shared grid, each row contributing its cells ==== */
.div-rows{display:grid; grid-template-columns:24px 34px minmax(180px,1fr) 30px 145px 52px 54px 30px; column-gap:10px; row-gap:8px; align-items:center;}
.div-rows > .empty{grid-column:1 / -1;}
.div-row{display:contents;}
.div-row.dragging > *{opacity:.3;}
.div-row .small{grid-column:6; margin:0; white-space:nowrap;}
.div-edit-name{grid-column:4;}
.div-row > .icon-btn:last-child{grid-column:8;}
.div-color{width:34px; height:30px; padding:2px; border:1px solid var(--border); border-radius:6px; background:var(--surface-2); cursor:pointer;}
.div-open{display:block; color:var(--fg); text-decoration:none; border:2px dashed var(--div-color, var(--border)); border-radius:8px; cursor:pointer;}
.div-open.has-teams{border-style:solid;}
.div-open:hover{border-color:var(--div-color, var(--accent)); color:var(--fg);}
.div-name-control{display:flex; align-items:stretch; min-width:0;}
.div-name-display{display:flex; align-items:center; min-width:0; flex:1; padding:8px 10px; font-size:14.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.div-name-inline{min-width:0; flex:1; border:0 !important; border-radius:5px; background:transparent; box-shadow:none !important;}
.div-name-inline:focus{background:color-mix(in srgb, var(--muted) 14%, transparent);}
.div-net-height{grid-column:5; width:145px; font-size:12px;}
.div-file{
  grid-column:7; display:flex; align-items:center; justify-content:center; min-width:54px; height:34px; padding:0 9px;
  border:1px dashed var(--muted); border-radius:8px; color:var(--muted); font-size:12px; cursor:pointer;
}
.div-file:hover{border-color:var(--accent); color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, transparent);}
.div-file.disabled{opacity:.45; cursor:not-allowed;}
/* A file dragged over a row: the whole row lights up. */
.div-file-drop{position:fixed; z-index:50; pointer-events:none; border:2px solid var(--accent); border-radius:10px; background:color-mix(in srgb, var(--accent) 16%, transparent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);}
.div-file-drop::after{content:"Drop to import teams"; position:absolute; right:10px; top:-11px; padding:1px 8px; border-radius:6px; background:var(--accent); color:var(--on-accent); font-size:11.5px; font-weight:700;}
.div-drag-preview{opacity:.86; filter:drop-shadow(0 6px 12px rgba(0,0,0,.24)); background:var(--surface); border-radius:8px; transform:rotate(.35deg);}
.div-drag-preview .div-rows{height:100%;}
.div-drag-preview .div-row.dragging > *{opacity:1;}
@media (max-width:760px){
  .div-rows{display:flex; flex-direction:column; gap:8px;}
  .div-row{
    display:grid; width:100%; gap:9px 10px; align-items:center;
    grid-template-columns:24px 34px minmax(0,1fr) auto auto;
    grid-template-areas:"grip color name name remove" "grip height height teams file";
  }
  .div-row .div-grip{grid-area:grip;}
  .div-row .div-color{grid-area:color;}
  .div-row .div-open{grid-area:name;}
  .div-row .div-net-height{grid-area:height;}
  .div-row .small{grid-area:teams;}
  .div-row .div-file{grid-area:file;}
  .div-row > .icon-btn:last-child{grid-area:remove;}
}

/* ==== division: teams ==== */
/* A plain seed list until a TD/admin clicks Edit. */
#view-teams:not(.editing) .teams-edit-only, #view-teams:not(.editing) .edit-col{display:none;}
.seeds-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px;}
.seeds-head .card-title{margin:0;}
.seeds-head .btn[aria-pressed="true"]{border-color:var(--accent); color:var(--accent);}
.drag-cell{width:24px; padding-right:0 !important;}
.drag-grip{display:grid; place-items:center; width:24px; height:28px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--muted); cursor:grab; touch-action:none;}
.drag-grip:hover{background:var(--surface-2); color:var(--fg);}
.drag-grip:active{cursor:grabbing;}
.drag-dots{width:10px; height:20px; background-image:radial-gradient(circle, currentColor 1.35px, transparent 1.55px); background-size:5px 4px;}
.seeds-table tr.dragging-seed{position:relative; z-index:2; background:var(--surface); box-shadow:0 4px 14px rgba(0,0,0,.25); cursor:grabbing;}
#view-teams.editing .seeds-table tbody tr{cursor:grab; touch-action:none; user-select:none;}
#view-teams.editing .seeds-table tbody tr button{cursor:pointer;}
.tag-pill{
  display:inline-block; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:600;
  border:1px solid var(--border); border-radius:4px; padding:0 5px; margin-left:6px; color:var(--muted); vertical-align:1px;
}
.tag-pill.q{color:var(--accent); border-color:var(--accent);}
.move-btns{white-space:nowrap; text-align:right;}
.move-btns button{width:26px; height:26px; border-radius:6px; border:1px solid var(--border); background:var(--surface-2); color:var(--fg); cursor:pointer; margin-left:4px;}
.move-btns button:disabled{opacity:.3; cursor:default;}
.move-btns button[data-remove]:hover{color:var(--accent-2); border-color:var(--accent-2);}
.dropzone{
  display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center;
  border:1.5px dashed var(--border); border-radius:10px; padding:26px 16px; cursor:pointer; background:var(--surface-2);
}
.dropzone span{color:var(--muted); font-size:12.5px; max-width:520px; line-height:1.5;}
.dropzone.over{border-color:var(--accent);}
.add-team{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)) 80px auto; gap:8px; margin-top:16px; align-items:center;}
.add-team-title{grid-column:1 / -1;}
.add-team .count-label{grid-column:1 / -1; margin:0;}
.add-team .count-label:empty{display:none;}
@media (max-width:640px){.add-team{grid-template-columns:1fr 1fr;} .add-team .points{grid-column:1;}}
/* Seed details (finals seeding). */
.seed-details{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.seed-details li{display:grid; grid-template-columns:28px 88px minmax(0, 1fr) auto; align-items:baseline; gap:10px; padding:7px 4px; border-top:1px solid var(--border); font-size:14px;}
.seed-details li:first-child{border-top:0;}
.seed-details .s, .seed-details .stats{color:var(--muted); font-family:var(--font-mono); font-size:12.5px;}
.seed-details .stats{white-space:nowrap;}
.seed-details .pool{color:var(--muted); white-space:nowrap;}
.seed-details .name{min-width:0;}
.seed-details .name > *{display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
@media (max-width:560px){.seed-details li{display:flex; flex-wrap:wrap; column-gap:10px; row-gap:2px;} .seed-details .name{flex:1 1 0;}}

/* ==== division: planner ==== */
.format-current, .pool-breakdown-current{display:flex; align-items:stretch; gap:10px;}
.pool-breakdown-current{margin-top:8px;}
.format-current #formatSelected, .pool-breakdown-current #poolSelected{flex:1; min-width:0;}
.format-current .format-card{height:100%;}
.pool-breakdown-current .pool-opt{height:100%; cursor:default;}
.format-current .btn, .pool-breakdown-current .btn{align-self:center;}
.format-edit-list, .pool-edit-list{display:grid; grid-template-columns:1fr; gap:8px;}
.custom-pools{margin-top:12px; padding:12px; border:1px dashed var(--border); border-radius:8px;}
.custom-pool-rows{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px 18px; margin-top:12px;}
.custom-pool-rows .field-row{margin:0;}
.custom-warn{min-height:18px; margin:10px 0 0;}
.custom-warn.bad{color:var(--accent-2);}
.pool-team-actions{display:flex; gap:8px; align-items:center;}
/* Final divisions (split format), and the TD's placement into them. */
.final-division{display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2);}
.final-division h4{margin:0; font-size:13.5px; font-weight:600; color:var(--fg);}
.placement-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; margin-top:12px;}
.placement-grid .final-division{align-items:stretch;}
.placement-grid ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px;}
.placement-team{display:flex; align-items:center; gap:8px; width:100%; padding:6px 8px; border:1px solid var(--border); border-radius:6px; background:var(--surface); color:var(--fg); font:inherit; font-size:14px; text-align:left; cursor:pointer;}
.placement-team:hover{border-color:var(--muted);}
.placement-team.picked{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent);}
.placement-team .s{min-width:18px; color:var(--muted); font-family:var(--font-mono); font-size:12.5px;}
.placement-team .meta{margin-left:auto; color:var(--muted); font-size:12.5px; white-space:nowrap;}
/* Courts and times. */
.court-picks{display:flex; flex-wrap:wrap; gap:8px;}
.court-pick{display:flex; align-items:center; gap:8px; padding:7px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); cursor:pointer; font-size:14px;}
.court-pick input{width:16px; height:16px; accent-color:var(--accent); margin:0;}
.court-pick .used{color:var(--muted); font-size:11.5px;}
.plan-warn{margin:10px 0 0; padding-left:18px;}
.plan-warn:empty{display:none;}
.plan-warn li{color:var(--accent-2); font-size:13px; margin:2px 0;}
/* Preview: stats and pools. */
.plan-stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:10px;}
.plan-stats .stat{background:var(--surface-2); border-radius:8px; padding:10px 6px;}
.finals-separate-config .plan-stats{margin-top:14px;}
.plan-pools{display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:10px; margin-top:14px;}
.pool-allocation-view{margin-top:0; margin-bottom:12px;}
.plan-pool, .pool-editor-pool{border:1px solid var(--border); border-radius:8px; padding:8px 10px;}
.plan-pool h4, .pool-editor-pool h4, .pool-editor-unassigned h4{margin:0 0 6px; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; font-size:15px;}
.pool-editor-pool h4, .pool-editor-unassigned h4{font-size:14px; color:var(--muted);}
.plan-pool ol{margin:0; padding-left:0; list-style:none; font-size:13px;}
.plan-pool li{display:flex; gap:8px; padding:2px 0;}
.plan-pool li .s{font-family:var(--font-mono); color:var(--muted); font-size:11.5px; width:22px; text-align:right; flex:0 0 auto;}
.plan-pool li.q{font-weight:600;}
.plan-pool .meta{color:var(--muted); font-size:11.5px; margin-top:6px;}
.plan-pool .court{color:var(--accent); font-size:11.5px; font-weight:600; margin:-2px 0 6px;}
/* Drag-and-drop pool editor. */
.pool-editor-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px; margin-top:10px;}
.pool-editor-pool{padding:8px;}
.pool-editor-unassigned{margin-bottom:12px; padding:8px; border:1px dashed var(--border); border-radius:8px;}
.pool-editor-unassigned h4 .meta{font-size:12px;}
.pool-editor-unassigned-list{display:flex; flex-wrap:wrap; gap:4px;}
.pool-editor-unassigned-team{margin-top:0;}
.pool-editor-team{
  display:flex; align-items:center; gap:6px; padding:6px 8px; margin-top:4px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:6px;
  font-size:12.5px; cursor:grab; touch-action:none; user-select:none;
}
.pool-editor-team .s{font-family:var(--font-mono); color:var(--muted); font-size:11px; flex:0 0 auto;}
.pool-editor-team.dragging{opacity:.35;}
.pool-editor-team.dragging.drop-preview-source{opacity:.45; filter:grayscale(1);}
.pool-editor-team.drop-preview-hidden, .pool-editor-empty.drop-preview-hidden{opacity:.18;}
.pool-editor-empty{
  display:flex; align-items:center; justify-content:center; min-height:32px; margin-top:4px;
  border:1px dashed var(--border); border-radius:6px; color:var(--muted); font-size:11.5px;
}
.pool-editor-empty.drop-target{color:var(--accent);}
.pool-editor-drop-preview{z-index:999; cursor:grabbing; box-shadow:0 4px 12px rgba(0,0,0,.24);}
.pool-editor-drag-preview{filter:grayscale(1); opacity:.68;}
.pool-editor-drag-ghost{
  opacity:.7; filter:grayscale(1); background:var(--surface-2); border:1px solid var(--accent); border-radius:6px;
  padding:6px 8px; font-size:12.5px; box-shadow:0 4px 12px rgba(0,0,0,.3);
}

/* ==== division: pools ==== */
.pool-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:16px; margin-top:12px;}
.pool-grid.single{grid-template-columns:minmax(0, 720px);}
.pool-card h2{font-size:22px; display:flex; justify-content:space-between; align-items:baseline;}
.pool-card h2 a{color:inherit; text-decoration:none;}
.pool-card h2 .meta{font-size:13px;}
.pool-card .courts{font-size:12px; margin-left:8px;}
.pool-card .done{color:var(--accent);}
/* The event's Pools page: progress, and what's on court. */
.pool-status-grid{grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));}
.pool-status h2{font-size:20px;}
.pool-progress{height:6px; margin:10px 0 12px; border-radius:3px; background:var(--surface-2); overflow:hidden;}
.pool-progress > span{display:block; height:100%; background:var(--div-color, var(--accent));}
.pool-status-where{margin:0 0 5px; font-size:12px; font-weight:600; color:var(--muted);}
.pool-game{display:block; color:inherit; text-decoration:none;}
.pool-game + .pool-game{margin-top:10px;}
.pool-game:hover .court-grid-match{border-color:var(--div-color, var(--accent));}
.pool-game .court-grid-match{cursor:pointer;}
/* One pool's page, and one match's. */
.pool-page-court{margin:12px 0 0; font-size:14px; color:var(--muted);}
.pool-page-court b{color:var(--fg);}
.pool-game-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:10px;}
.pool-game-list .pool-game + .pool-game{margin-top:0;}
.match-page{max-width:520px; margin-top:16px;}
.match-facts{margin-top:14px;}
.match-facts th{width:30%; vertical-align:top;}
.team-schedule-list{margin:16px 0 0;}
.team-schedule-list .round-label{margin-top:14px;}
.team-schedule-list .round-label:first-child{margin-top:0;}
.round-label a{color:inherit; text-decoration:none;}
.round-label a:hover{color:var(--accent);}
.team-schedule-row{cursor:default;}

/* ==== division: finals — one block per bracket (two for a split format) ==== */
.finals-block{margin-top:22px;}
.finals-block + .finals-block{border-top:1px solid var(--border); padding-top:22px;}
.finals-block .card{margin-top:12px;}
.finals-block > h2{font-size:22px; display:flex; gap:12px; align-items:baseline; flex-wrap:wrap;}
.finals-block > h2 .meta{font-size:13px;}
.finals-block > h2 a{color:inherit; text-decoration:none;}
.finals-block > h2 a:hover{color:var(--accent);}
.finals-block > h3{margin:18px 0 6px; font-size:16px; display:flex; gap:10px; align-items:baseline;}
.finals-block > h3 .meta{font-size:13px; font-weight:400; color:var(--muted);}
/* A bracket: absolutely positioned match cards over an SVG of connectors. */
.bracket-scroll{overflow-x:auto; margin-top:16px; padding-bottom:8px;}
.bracket{position:relative;}
.bracket svg{position:absolute; inset:0; overflow:visible; pointer-events:none;}
.b-section{position:absolute; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-weight:600; font-size:13px; color:var(--accent);}
.b-tag{position:absolute; font-family:var(--font-mono); font-size:10.5px; color:var(--muted); font-weight:600; white-space:nowrap;}
.b-where{font-weight:400;}
.b-match{
  position:absolute; display:flex; flex-direction:column; padding:0;
  background:var(--surface); border:1px solid var(--border); border-radius:8px; overflow:hidden;
  color:var(--fg); font:inherit; text-align:left;
}
button.b-match, a.b-match{cursor:pointer; text-decoration:none;}
button.b-match:hover, a.b-match:hover{border-color:var(--accent);}
.b-match.ready{border-color:var(--muted);}
.b-row{display:flex; align-items:center; gap:6px; flex:1; padding:0 8px; font-size:13px; min-width:0;}
.b-row + .b-row{border-top:1px solid var(--border);}
.b-row .s{font-family:var(--font-mono); font-size:10.5px; color:var(--muted); width:18px; flex:0 0 auto;}
.b-row .n{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.b-row .p{font-family:var(--font-mono); font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; flex:0 0 auto;}
.b-row.tbd .n{color:var(--muted); font-style:italic;}
.b-row.won{font-weight:700;}
.b-row.won .p{color:var(--accent);}
.b-row.lost{color:var(--muted);}
.b-champ{position:absolute; border:1px solid var(--accent); border-radius:8px; padding:6px 10px; background:var(--surface); font-weight:700; font-size:14px; white-space:nowrap;}
.b-champ .l{display:block; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-size:11px; color:var(--accent);}

/* ==== schedule: all courts, and one court ==== */
:root{--court-col:300px;} /* court schedule column width */
.sched-toolbar{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px;}
.schedule-filter-toggle, .squeeze-toggle{flex:none;}
@media (max-width:760px){.squeeze-toggle{display:none;}}
.schedule-filter-panel{flex-basis:100%; padding:10px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2);}
.schedule-actions{display:flex; align-items:center; gap:8px;}
.debug-regen{color:var(--accent-2); border-color:color-mix(in srgb, var(--accent-2) 55%, var(--border)); white-space:nowrap;}
.schedule-regen-status{margin:8px 0 0;}
.sched-warn{margin-top:14px; border-color:var(--accent-2);}
.sched-warn ul{margin:6px 0 0; padding-left:18px;}
.sched-warn li{display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--accent-2); font-size:13.5px; margin:2px 0;}
.warn-fix{flex:none; white-space:nowrap; padding:5px 8px; font-size:12px;}
.sched-board{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px, 1fr); gap:12px; overflow-x:auto; margin-top:16px; padding-bottom:8px;}
.sched-court h3{font-size:16px; margin:0 0 8px; position:sticky; top:0;}
.sched-court h3 a{color:inherit; text-decoration:none;}
.sched-court h3 a:hover{color:var(--accent); text-decoration:underline;}
.sched-court h3 .meta{font-size:12px;}
/* How far behind a court or pool is running (red when late). */
.court-status{margin:6px 0 0; font-size:13px;}
.lateness{color:var(--muted); font-weight:600;}
.lateness.behind{color:var(--accent-2);}
/* The timetable: times down the side, a column per court. */
.court-timetable{overflow-x:auto; margin-top:16px; padding-bottom:8px;}
.court-timetable-grid{display:grid; width:fit-content; min-width:max-content; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--border); gap:1px;}
.court-timetable-grid.squeeze-courts{min-width:0;}
.court-timetable-grid.court-single-grid{grid-template-columns:76px minmax(0,var(--court-col)); min-width:0; width:fit-content;}
.court-time-head, .court-head, .court-time, .court-grid-cell{background:var(--surface); padding:8px;}
.court-time.schedule-day-alt, .court-grid-cell.schedule-day-alt{background:color-mix(in srgb, var(--surface) 60%, var(--surface-2));}
.court-time-head, .court-head{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; font-size:15px; font-weight:600; position:sticky; top:0; z-index:1;}
.court-head a{color:var(--fg); text-decoration:none;}
.court-head a:hover{color:var(--accent);}
.court-head span, .court-height-summary{display:block; margin-top:2px; font-size:11px;}
.court-time{font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--muted);}
.court-time-day{display:block; font-family:var(--font-body); font-weight:600;}
.court-grid-cell{display:flex; flex-direction:column; max-width:var(--court-col); min-height:54px; padding:4px;}
.court-grid-cell:empty::after{content:""; display:block; min-height:46px;}
.court-grid-cell .court-grid-match, .court-grid-cell .court-drop-slot{flex:1; min-height:46px;}
.net-height-change{margin:3px 0 6px; padding:5px 6px; border:1px solid var(--accent-2); border-radius:5px; color:var(--accent-2); font-size:11px; font-weight:600; text-align:center;}
/* A match on the timetable: dashed until played; marching dashes while in progress. */
.court-grid-match{position:relative; margin:0; min-width:0; font-size:12px; padding:6px; border:2px dashed var(--div-color, var(--border));}
.court-grid-match:hover{border-color:var(--div-color, var(--accent));}
.court-grid-match.played{border-style:solid;}
.court-grid-match.in-progress{border-color:transparent;}
.court-grid-match.in-progress::before{
  content:""; position:absolute; inset:-2px; border-radius:8px; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, var(--div-color) 0 6px, transparent 6px 11px) top left / 22px 2px repeat-x,
    repeating-linear-gradient(180deg, var(--div-color) 0 6px, transparent 6px 11px) top right / 2px 22px repeat-y,
    repeating-linear-gradient(270deg, var(--div-color) 0 6px, transparent 6px 11px) bottom left / 22px 2px repeat-x,
    repeating-linear-gradient(0deg, var(--div-color) 0 6px, transparent 6px 11px) top left / 2px 22px repeat-y;
  background-position:0 0, 100% 0, 0 100%, 0 0;
  animation:running-dashes .7s linear infinite;
}
@keyframes running-dashes{to{background-position:22px 0, 100% 22px, -22px 100%, 0 -22px;}}
.court-grid-match.dragging{opacity:.3;}
/* While a drop is previewed: the dragged game's place shows empty, and a
   game it would swap with slides across into it. */
.court-grid-match.preview-source{opacity:0;}
.court-grid-match{transition:transform .18s ease;}
.court-grid-match.preview-target{position:relative; z-index:1; box-shadow:0 4px 14px rgba(0,0,0,.2);}
.court-grid-match .score{min-width:48px;}
.court-grid-match .pin{position:absolute; right:6px; top:3px; font-size:9px; color:var(--accent-2);}
/* Overlapping another game on its court (a conflict set). */
.court-grid-match.conflict{outline:2px solid var(--accent-2); outline-offset:1px;}
.court-grid-match .conflict-tag{position:absolute; right:6px; bottom:4px; padding:0 4px; border-radius:4px; background:var(--accent-2); color:#fff; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;}
.court-grid-match.just-moved{animation:court-moved 1.8s ease-out;}
.court-grid-match.just-moved::after{content:"moved"; position:absolute; right:5px; top:3px; color:var(--accent); font-size:10px; font-weight:700; animation:court-moved-label 1.8s ease-out forwards;}
@keyframes court-moved{0%{box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 60%, transparent);} 100%{box-shadow:0 0 0 0 transparent;}}
@keyframes court-moved-label{0%, 65%{opacity:1;} 100%{opacity:0;}}
/* A summary card's detailed view, shown on hover beside it. */
.game-popup{width:var(--court-col); max-width:calc(100vw - 16px); --surface-2:#fff; --fg:#15201c; --muted:#5b6b63;}
.game-popup .court-grid-match{margin:0; cursor:default; box-shadow:0 6px 20px rgba(0,0,0,.3);}
/* Where a dragged match can go. */
.court-drop-slot{display:none; width:100%; min-height:46px; border:1px dashed var(--accent); border-radius:6px; background:transparent; color:var(--accent); font:inherit; font-size:11px; cursor:copy;}
.is-dragging .court-drop-slot.eligible{display:flex; align-items:center; justify-content:center;}
.court-drop-slot.eligible:hover, .court-drop-slot.preview-target{background:color-mix(in srgb, var(--accent) 18%, transparent); border-style:solid;}
.court-timetable:not(.is-dragging) .court-drop-row, .court-drop-board:not(.is-dragging) .court-drop-row{display:none;}
/* A game's teams and scores, on the timetable and in lists. */
.game-detail, .game-summary{display:flex; flex-direction:column; gap:3px; text-align:left;}
.game-detail-meta, .game-detail-duty{font-family:var(--font-body); font-size:10px; color:var(--muted);}
.game-detail-team{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; align-items:baseline; font-size:15px; font-weight:400;}
.game-detail-team > span:first-child{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.game-detail-team.match-won{font-weight:700;}
.game-detail-score{display:grid; grid-auto-flow:column; grid-auto-columns:2ch; column-gap:7px; font-family:var(--font-mono); font-variant-numeric:tabular-nums; text-align:center; white-space:nowrap;}
.game-detail-score > span{text-align:center; font-weight:400;}
.game-detail-score:empty{display:none;}
.game-detail-team.match-won .game-detail-score > .set-won, .set-won{color:#1e6fb5; font-weight:700;}

/* Live scoring: the current set's points, and a dot for the serving team. */
.game-detail-score .live-points{color:var(--accent); font-weight:700;}
.live-serve{color:var(--accent); font-size:.7em; margin-right:2px;}
.live-line{font-weight:600;}

/* The scoring page: two big buttons, one per team, laid out as the teams
   stand (the team on the left first). */
.scorer{display:grid; gap:12px; max-width:760px;}
.scorer-status{display:flex; flex-wrap:wrap; gap:10px; align-items:baseline; font-size:13px;}
.scorer-saved{color:var(--muted);}
.scorer-saving{color:var(--accent);}
.scorer-offline{color:var(--accent-2); font-weight:600;}
.scorer-msg{color:var(--accent-2);}
.scorer-mute{margin-left:auto; padding:4px 10px; font-size:12px;}
.scorer-panel{display:grid; gap:10px;}
.scorer-field{display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.scorer-label{min-width:120px; color:var(--muted); font-size:13px;}
.scorer-play{display:grid; gap:10px;}
.scorer-set{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; color:var(--muted);}
.scorer-court{display:grid; grid-template-columns:1fr 1fr; gap:10px; position:relative;}
.scorer-team{
  display:grid; justify-items:center; gap:6px; padding:18px 10px; min-height:190px; cursor:pointer;
  background:var(--surface); color:var(--fg); border:2px solid var(--border); border-radius:14px; font:inherit;
  touch-action:pan-y; user-select:none; position:relative;
}
.scorer-team:active{z-index:1;}
/* Over the bottom of both scores while a side switch is due. */
.scorer-switch{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:2;
  padding:12px 22px; border:0; border-radius:999px; cursor:pointer; white-space:nowrap;
  background:var(--accent); color:var(--on-accent); font:inherit; font-weight:700; font-size:16px;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
}
.scorer-team:active{background:var(--surface-2);}
.scorer-team.serving{border-color:var(--accent);}
.scorer-name{font-weight:600; text-align:center;}
.scorer-points{font-family:var(--font-display); font-size:84px; line-height:1; font-variant-numeric:tabular-nums;}
.scorer-serve{font-size:13px; color:var(--accent); min-height:1.2em;}
.scorer-actions{display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; margin-top:16px;}
.scorer-ask{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 14px; border:1px dashed var(--accent); border-radius:10px;}
.scorer-more summary{cursor:pointer; color:var(--muted); font-size:13px;}
.scorer-more[open]{display:grid; gap:8px;}
.scorer-sub{margin:6px 0 0; font-size:14px;}
/* The four players in serving order: two staggered rows, read left to
   right, with a swap between each team's players. */
.scorer-rotation{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; max-width:640px;}
.scorer-swap{
  align-self:center; justify-self:center; width:40px; height:40px; cursor:pointer; font-size:20px; line-height:1;
  background:var(--surface-2); color:var(--fg); border:1px solid var(--border); border-radius:999px;
}
.scorer-swap:hover{border-color:var(--accent);}
.scorer-chip{
  display:grid; gap:1px; padding:7px 12px; cursor:pointer; text-align:left;
  background:var(--surface); color:var(--fg); border:1px solid var(--border); border-radius:10px; font:inherit; font-weight:600;
}
.scorer-chip:hover:not(:disabled){border-color:var(--accent);}
.scorer-chip:disabled{opacity:.45; cursor:default;}
.scorer-chip{overflow-wrap:anywhere;}
.scorer-chip.next{border:2px solid #2fae6d; background:rgba(47,174,109,.16);}
.scorer-chip-team{font-size:11px; font-weight:400; color:var(--muted);}
.scorer-log{margin:0; padding:0; list-style:none; font-size:13px; display:grid; gap:2px; align-content:start; max-height:320px; overflow-y:auto; font-variant-numeric:tabular-nums;}
.scorer-log li:first-child{font-weight:700;}
.scorer-log .auto{color:var(--muted);}
/* The finished match: winners' row first, sets won highlighted; then signatures. */
.scorer-final{border-collapse:collapse; font-size:18px;}
.scorer-final th{text-align:left; padding:6px 16px 6px 0; font-weight:600;}
.scorer-final td{padding:6px 10px; text-align:center; font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--muted);}
.scorer-final td.set-won{color:var(--fg); font-weight:700;}
.scorer-final .scorer-final-sets{font-size:26px; font-weight:700; color:var(--fg); background:var(--surface-2); border-radius:8px; min-width:2.2em;}
.scorer-final tr.won .scorer-final-sets{background:var(--accent); color:var(--on-accent);}
.scorer-sign-box{display:grid; gap:6px;}
.scorer-sign-head{display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--muted);}
svg.scorer-sign path{fill:none; stroke:#111; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}
.scorer-sign{display:block; width:100%; max-width:600px; aspect-ratio:600 / 180; background:#fff; border:1px solid var(--border); border-radius:10px; touch-action:none; cursor:crosshair;}
/* The timeout timer: over the whole page until it's tapped. */
.scorer-timer-back{position:fixed; inset:0; z-index:20; display:grid; place-items:center; background:rgba(0,0,0,.55); padding:16px;}
.scorer-timer{
  display:grid; justify-items:center; gap:10px; width:min(420px, 100%); padding:28px 20px; cursor:pointer;
  background:var(--surface); color:var(--fg); border:2px solid var(--accent); border-radius:18px; font:inherit;
  box-shadow:0 10px 40px rgba(0,0,0,.4);
}
.scorer-timer-label{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; font-size:22px; text-align:center;}
.scorer-timer-count{font-size:88px; line-height:1; font-variant-numeric:tabular-nums;}
.scorer-timer-count.done{color:var(--accent-2);}
.scorer-timer-hint{font-size:13px; color:var(--muted);}
.scorer-log-title{display:flex; justify-content:space-between; align-items:baseline;}
.scorer-clock{font-size:14px; color:var(--muted); letter-spacing:0;}
.scorer-time{color:var(--muted); margin-right:4px;}
.scorer-log .undone{text-decoration:line-through; color:var(--muted);}
.scorer-log .pending{font-style:italic;}
@media (max-width:520px){ .scorer-points{font-size:64px;} .scorer-team{min-height:150px;} }

/* The scoreboard. Basic: a card in the page. Classic (and with the server
   ball): a dark board, big numbers, sized to its box (container units) so it
   works in the page, on a phone on its side and full screen. */
.board-tools{display:flex; gap:8px; margin-bottom:10px;}
.board-settings{display:grid; gap:10px; margin-bottom:12px;}
.board-card{display:grid; gap:10px; max-width:560px;}
.board-head{margin:0; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; color:var(--muted);}
.board-table{border-collapse:collapse; font-size:20px;}
.board-table th{text-align:left; padding:6px 16px 6px 0; font-weight:600;}
.board-table td{padding:6px 10px; text-align:center; font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--muted);}
.board-table td.set-won{color:var(--fg); font-weight:700;}
.board-table .board-now{color:var(--accent); font-weight:700; font-size:28px;}
.board-table .board-sets{background:var(--surface-2); border-radius:8px; color:var(--fg); font-weight:700;}
.board-dot{color:var(--accent); font-size:.7em;}
.board-basic .board-strip{border-radius:8px;}

.board-classic, .board-ball{
  container-type:size; position:relative; display:grid; grid-template-rows:auto 1fr auto; gap:1.5cqw;
  aspect-ratio:16 / 9; max-width:960px; padding:2cqw; border-radius:14px; overflow:hidden;
  background:#0b1320; color:#f4f7fa; user-select:none;
}
.board-classic .board-head, .board-ball .board-head{text-align:center; color:#9fb0c2; font-size:3cqw;}
.board-teams{display:grid; grid-template-columns:1fr 1fr; gap:2cqw; min-height:0;}
.board-team{
  position:relative; display:grid; grid-template-rows:auto auto 1fr auto; justify-items:center; align-items:center;
  padding:1.5cqw; border-radius:1.5cqw; background:#16233a; border:.4cqw solid transparent; min-height:0;
}
.board-team.serving{border-color:#ffd34a;}
.board-name{font-family:var(--font-display); font-size:4.2cqw; font-weight:700; text-align:center; line-height:1.1;}
.board-team .board-sets{padding:.3cqw 1.6cqw; border-radius:1cqw; background:#ffd34a; color:#0b1320; font-family:var(--font-display); font-weight:700; font-size:3.4cqw; line-height:1.2;}
/* As big as the box allows, wide or tall (a phone on its side is wider than 16:9). */
.board-points{font-family:var(--font-display); font-weight:700; font-size:min(24cqw, 40cqh); line-height:.9; font-variant-numeric:tabular-nums;}
.board-serve{font-size:2.6cqw; color:#ffd34a; min-height:1.2em;}
/* Server ball: a ball over the serving team's score, the server's name under it. */
.server-ball{position:absolute; top:22%; right:5%; display:grid; justify-items:center; gap:.6cqw;}
.server-ball-dot{width:5cqw; height:5cqw; border-radius:50%; background:radial-gradient(circle at 35% 35%, #fff 0 30%, #ffd34a 31% 100%); box-shadow:0 0 0 .3cqw #0b1320;}
.server-ball-name{font-size:2.2cqw; color:#ffd34a; white-space:nowrap;}
/* Top / bottom: the device held tall. The same boxes, one above the other,
   with everything scaled to the narrower width. */
.board.stacked{aspect-ratio:9 / 16; max-width:480px;}
.board.stacked .board-teams{grid-template-columns:1fr; grid-template-rows:1fr 1fr;}
.board.stacked .board-name{font-size:7cqw;}
.board.stacked .board-team .board-sets{font-size:6cqw;}
.board.stacked .board-points{font-size:min(40cqw, 22cqh);}
.board.stacked .board-serve{font-size:4.5cqw;}
.board.stacked .server-ball-dot{width:9cqw; height:9cqw;}
.board.stacked .server-ball-name{font-size:4cqw;}
.board.stacked.board-classic .board-strip, .board.stacked.board-ball .board-strip{font-size:5cqw;}
/* Switch sides and timeouts: a strip of its own, never over a score. */
.board-strip-row{min-height:5cqw; display:grid; align-items:center;}
.board-strip{padding:.6em 1em; border-radius:.6em; text-align:center; font-weight:700; background:#ffd34a; color:#0b1320;}
.board-classic .board-strip, .board-ball .board-strip{font-size:3cqw;}
.board-strip.pause{background:#2f8fd9; color:#fff;}
/* The match over: names and every set's points, in the middle of the board. */
.board .board-final{grid-row:1 / -1; align-self:center; justify-self:center; display:grid; justify-items:center; gap:1em;}
.board-final-head{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em; color:var(--muted);}
.board-final table{border-collapse:collapse;}
.board-final th{text-align:left; padding:.3em 1em .3em 0; font-weight:600;}
.board-final td{padding:.3em .6em; text-align:center; font-family:var(--font-mono); font-variant-numeric:tabular-nums; opacity:.65;}
.board-final td.set-won{opacity:1; font-weight:700;}
.board-final tr.won th{font-weight:800;}
.board-basic .board-final{padding:24px; font-size:22px; width:fit-content; margin:0 auto;}
.board-classic .board-final, .board-ball .board-final{font-size:4.5cqw;}
.board-classic .board-final-head, .board-ball .board-final-head{color:#9fb0c2;}
.board.stacked .board-final{font-size:6.5cqw;}
.board-next{display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:.3em .7em; margin-top:.4em; font-size:.8em;}
.board-next-label{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em; opacity:.7;}
.board-next-time{font-family:var(--font-mono); font-weight:700;}
/* Full screen: the board alone, filling the screen (or covering the page
   where the browser can't go full screen); a tap comes back out. */
.board:fullscreen, .board.covering{max-width:none; width:100vw; height:100vh; aspect-ratio:auto; border-radius:0; cursor:pointer;}
.board.covering{position:fixed; inset:0; z-index:30;}
.board-basic:fullscreen, .board-basic.covering{display:grid; place-items:center; background:var(--bg);}

/* Pool colours: a light tint of the pool's colour over the usual surface
   (a transparent pool is left alone). */
.card.pool-tint{background:color-mix(in srgb, var(--pool-bg) 12%, var(--surface));}
.court-grid-match.pool-tint{background:color-mix(in srgb, var(--pool-bg) 20%, var(--surface));}
/* A team's place in its pool ("A1"), before its name. */
.pool-tag{display:inline-block; min-width:2.1em; margin-right:.3em; font-family:var(--font-mono); font-size:.85em; font-weight:700; color:var(--muted); text-transform:none; letter-spacing:0;}
/* The TD's pool colour menu, in the pool card's heading. */
.pool-color{position:relative; margin-left:auto; margin-right:10px; align-self:center;}
.pool-color summary{list-style:none;}
.pool-color summary::-webkit-details-marker{display:none;}
.pool-swatch{
  display:inline-grid; place-items:center; width:22px; height:22px; padding:0; cursor:pointer;
  border:1px solid var(--border); border-radius:50%; background:var(--swatch, var(--surface)); color:var(--muted);
  font:inherit; font-size:11px; font-weight:700; text-transform:none; letter-spacing:0;
}
.pool-swatch.clear{border-style:dashed;}
.pool-swatch.on{outline:2px solid var(--accent); outline-offset:1px;}
.pool-color-menu{
  position:absolute; right:0; top:30px; z-index:5; display:grid; grid-template-columns:repeat(7, 22px); gap:6px; padding:10px;
  background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.pool-swatch.custom{position:relative; overflow:hidden;}
.pool-swatch.custom input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:0; padding:0;}

/* Editing a division's pools: a pool select per team. */
.pool-edit{display:grid; gap:12px; max-width:640px;}
.pool-edit-table select{min-width:130px;}
.pool-edit-table tr.unplaced td{background:color-mix(in srgb, var(--accent-2) 10%, transparent);}

/* A custom pool order: one row per game, dragged by its grip, with its duty team. */
.pool-custom{list-style:none; margin:0 0 6px; padding:0; display:grid; gap:4px; max-width:340px;}
.pool-custom li{display:flex; align-items:center; gap:10px; padding:4px 8px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); cursor:grab; touch-action:none; user-select:none;}
.pool-custom li select{cursor:pointer;}
.pool-custom li.dragging{position:relative; z-index:2; cursor:grabbing; box-shadow:0 4px 14px rgba(0,0,0,.25); opacity:.9;}
.pool-custom-game{min-width:52px; font-weight:600;}

/* The court planner's public map library. */
.cp-courts #cpLibraryBtn{margin-left:auto;}
.cp-library{display:grid; gap:10px; margin:10px 0;}
.cp-lib-publish{display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.cp-lib-publish .cp-label-input{width:220px;}
.cp-lib-search{width:100%; max-width:360px;}
.cp-lib-list{display:grid; gap:6px; max-height:320px; overflow-y:auto;}
.cp-lib-item{display:flex; align-items:center; gap:10px; padding:6px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2);}
.cp-lib-item img, .cp-lib-noimg{width:72px; height:46px; object-fit:cover; border-radius:6px; flex:none; background:var(--surface);}
.cp-lib-noimg{display:grid; place-items:center; font-size:10px; color:var(--muted);}
.cp-lib-text{display:grid; flex:1; min-width:0;}
.cp-lib-text b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* Filming a match: the camera's preview, then the controls. */
.video-page{display:grid; gap:10px; max-width:760px;}
.video-preview{width:100%; aspect-ratio:16 / 9; background:#000; border-radius:12px; object-fit:contain;}
.video-status{margin:0; font-weight:600; color:var(--muted);}
.video-status.live{color:#e5484d;}