/* pickleball.css -- the pickleball ladder pages, in the Blue Sky style of
   design/mockups. Bowling keeps its own style.css; nothing here touches it. */
:root {
  --cream: #F8F5EB;
  --orange: #F38F47;
  --blue: #3092C2;
  --blue-dark: #1f6f99;
  --red: #D83320;
  --yellow: #FEF29D;
  --gold: #FFD65C;
  --aqua: #A6E0E1;
  --aqua-soft: #CDEDEE;
  --ink: #020202;
  --muted: #6b665a;
  --line: #e4ddcb;
  --up: #1f9d55;
}
* { box-sizing: border-box; }
body.pb { margin: 0; background: var(--cream); color: var(--ink); font-family: "Nunito", system-ui, sans-serif; font-size: 16px; }
.pb h1, .pb h2, .pb h3, .pb h4 { font-weight: 900; margin: 0; letter-spacing: -0.01em; }
.pb a { color: var(--blue-dark); }
.pb button { font-family: inherit; }
.muted { color: var(--muted); }
.note { font-size: 14px; color: var(--muted); }
.note.dark { color: #2f5f60; }
.spacer { flex: 1; }
.pad { padding: 0 18px 18px; }

/* Header */
.top { position: relative; min-height: 132px; display: flex; align-items: center; padding: 12px 36px; overflow: hidden; }
.top .swoosh { position: absolute; right: 0; top: 0; width: min(1060px, 90vw); height: 140px; pointer-events: none; }
.top .brand, .top .divider, .top h1, .top nav { position: relative; z-index: 1; }
.top .logo { display: block; width: 100px; height: 100px; }
.top .divider { width: 2px; height: 76px; background: var(--ink); margin: 0 30px 0 24px; }
.top h1 { font-size: 48px; line-height: 1; }
.top nav { position: absolute; right: 44px; bottom: 18px; display: flex; gap: 30px; align-items: center; font-size: 18px; font-weight: 700; flex-wrap: wrap; justify-content: flex-end; }
.top nav a { color: var(--ink); text-decoration: none; padding-bottom: 4px; }
.top nav a.on { color: var(--blue-dark); border-bottom: 3px solid var(--blue); }
.top nav a.other { font-size: 14px; color: var(--muted); text-decoration: underline; }
.top.admin-mode { box-shadow: inset 0 -5px 0 var(--blue); }
.admin-badge { background: var(--blue); color: #fff; border-radius: 8px; padding: 3px 10px; font-weight: 900; font-size: 15px; }
.top nav a.exit { color: var(--blue-dark); font-size: 15px; text-decoration: underline; }

/* The whole header (logo, menu, admin line, Season/League bar) stays put
   while the page scrolls -- on desktop only; on phones it would take too
   much of the screen, so there it scrolls away as before (owner's request).
   It needs its own cream background, since the header is otherwise
   transparent over the page. Anchor jumps land below it. */
@media (min-width: 641px) {
  .site-head { position: sticky; top: 0; z-index: 30; background: var(--cream); box-shadow: 0 1px 0 var(--line); }
  html { scroll-padding-top: 240px; }
}
/* The day list (Monday / Tuesday / ...) stays put too, just under the frozen
   header, while it is a sidebar (wider than 960 px; below that it is a row
   of buttons above the ladder). --head-h is the header's measured height,
   set by a one-line script in pbLayout (it differs in admin and when the
   Season/League bar wraps). */
@media (min-width: 961px) {
  .days { position: sticky; top: calc(var(--head-h, 200px) + 16px); }
}

/* Season / League selector bar (bowling's context bar) */
.ctx { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; padding: 10px 36px; background: #fffdf7; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ctx.admin { border-bottom-color: rgba(240, 115, 60, 0.55); }
.ctx-form { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; margin: 0; }
.ctx-kicker { font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ctx label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ctx select { font: inherit; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 800; color: var(--ink); background: #fff; border: 1.5px solid #cfc8b4; border-radius: 9px; padding: 6px 10px; max-width: 280px; }
.ctx-link { font-size: 15px; font-weight: 700; color: var(--muted) !important; text-decoration: none; }
.ctx-link.on, .ctx-link:hover { color: var(--ink) !important; text-decoration: underline; }

/* Page layout */
.page { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; padding: 16px 24px 36px 18px; }
.page.nodays { grid-template-columns: minmax(0, 1fr); padding-left: 24px; }
.days { background: #f3efe2; border-radius: 16px; padding: 14px 0; align-self: start; }
.days a { display: flex; flex-direction: column; margin: 4px 10px; padding: 12px 16px; border-radius: 12px; color: var(--ink); text-decoration: none; font-size: 19px; font-weight: 700; }
.days a small { font-size: 12px; font-weight: 700; color: var(--muted); }
.days a.on { background: var(--blue); color: #fff; }
.days a.on small { color: #e3f1f8; }
.days .note { padding: 8px 26px 0; line-height: 1.4; }
.main { background: var(--aqua-soft); border-radius: 18px; padding: 0 0 18px; min-width: 0; }
.titlebar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; padding: 20px 24px; }
.titlebar h2 { font-size: 40px; }
.titlebar h2.teamtitle { font-size: 42px; }
.weekpick { margin: 0; }
.weekpick select, select.input { font: inherit; font-weight: 800; }
.weekpick select { background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 9px 14px; font-size: 17px; }
.chip { background: #fff; border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 800; }
.chip.aqua { background: var(--aqua); }
.chip.soft { background: #f6f2e6; }
.chip.warm { background: #fbe0cc; color: #8a4515; }
.chip.b830-chip { background: var(--red); color: #fff; }
.chip.b700-chip { background: var(--orange); }
.chip.b530-chip { background: var(--gold); }
.btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 12px; padding: 10px 18px; font-size: 17px; font-weight: 800; border: 1.5px solid var(--line); background: #fff; color: var(--blue-dark) !important; text-decoration: none; cursor: pointer; line-height: 1.2; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff !important; }
.btn.danger { background: #fff; border-color: var(--red); color: var(--red) !important; }
.btn.danger.solid { background: var(--red); color: #fff !important; }
.btn.off, .btn:disabled { background: #e6e1d3; border-color: #e6e1d3; color: #9a9483 !important; cursor: not-allowed; }
.btn.small { font-size: 14px; padding: 7px 12px; }
.btn.tiny { font-size: 13px; padding: 4px 10px; border-radius: 8px; }
.btn.aqua { background: var(--aqua); border-color: var(--aqua); }
.btn.linkish { border: 0; background: none; padding: 6px 4px; text-decoration: underline; }
form.inline { display: inline; margin: 0; }
.flash { margin: 0 18px 14px; padding: 10px 16px; border-radius: 12px; background: #dff3e7; color: #146c3c; font-weight: 700; }
.flash.err { background: #fbe3df; color: #9e2415; }
.warn { color: #9e2415; font-weight: 700; }
.pad-s { padding: 10px 18px; }
.warnbox { border: 2px solid var(--red); }
.warnbox .why div { color: #9e2415; }
.warnbox-s { background: #fbe3df; border-radius: 10px; padding: 10px 14px; color: #9e2415; font-weight: 700; margin: 0 0 12px; }
.error { color: #9e2415; font-weight: 700; }

.cols { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; padding: 0 18px; }
.cols.wide-right { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); }
.stack { display: grid; gap: 16px; align-content: start; min-width: 0; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; padding: 0 18px; }

/* Block cards */
.block { background: #fff; border-radius: 16px; overflow: hidden; border: 1.5px solid var(--line); }
.bh, .row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 54px 82px 100px 58px 86px; align-items: center; column-gap: 4px; }
.bh { align-items: end; padding: 12px 16px 8px; color: #fff; }
.bh.flex { display: flex; justify-content: space-between; }
.bh h3 { font-size: 28px; grid-column: 1 / 3; }
.bh span { font-size: 13px; font-weight: 800; text-align: center; opacity: .95; }
.bh span b { font-weight: 800; }
.bh span b.sm { display: none; }
.adm .bh, .adm .row { grid-template-columns: 30px minmax(0, 1fr) 58px 46px 46px 50px 50px 54px 58px; }
.b830 .bh { background: var(--red); }
.b700 .bh { background: var(--orange); }
.b530 .bh { background: var(--gold); color: var(--ink); }
.row { padding: 9px 16px; font-size: 18px; }
.row + .row { border-top: 1px solid #f0ebdd; }
.row:nth-child(odd) { background: #fcfaf4; }
.row > span { text-align: center; }
.row > span:first-child { text-align: left; font-weight: 700; }
.row > span.nm { text-align: left; min-width: 0; overflow-wrap: break-word; }
.row.absent { color: #8f897a; }
.tag { font-size: 11px; font-weight: 800; font-style: normal; color: var(--muted); background: #f1ece0; border-radius: 6px; padding: 1px 6px; margin-left: 6px; }
.bfoot { padding: 8px 16px 10px; font-size: 14px; color: var(--muted); border-top: 1px solid #f0ebdd; background: #fffdf7; }
.mv { display: inline-block; width: 22px; height: 22px; vertical-align: middle; }
.mv.stay { width: 18px; height: 3px; background: #8a8576; border-radius: 2px; }
.mv.upa { background: var(--up); clip-path: polygon(50% 0, 100% 52%, 68% 52%, 68% 100%, 32% 100%, 32% 52%, 0 52%); }
.mv.dna { background: var(--red); clip-path: polygon(32% 0, 68% 0, 68% 48%, 100% 48%, 50% 100%, 0 48%, 32% 48%); }
.cb { display: inline-flex; width: 22px; height: 22px; border: 2px solid #b9b19b; border-radius: 6px; background: #fff; align-items: center; justify-content: center; font-size: 15px; font-weight: 900; font-style: normal; }
.cb.on { background: var(--red); border-color: var(--red); color: #fff; }
.cbx { display: inline-flex; cursor: pointer; }
.cbx input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cbx i { display: inline-flex; width: 24px; height: 24px; border: 2px solid #b9b19b; border-radius: 6px; background: #fff; align-items: center; justify-content: center; }
.cbx input:checked + i { background: var(--red); border-color: var(--red); }
.cbx input:checked + i::after { content: "✓"; color: #fff; font-weight: 900; font-style: normal; font-size: 15px; }
.cbx input:disabled + i { background: #efeadd; border-color: #d9d2bf; cursor: not-allowed; }
.cbx input:disabled:checked + i { background: #e7a79d; border-color: #e7a79d; }
.cbx input:focus-visible + i { box-shadow: 0 0 0 3px #d6ebf5; }
.cbx.busy i { opacity: .5; }

/* Panels and tables */
.panel { background: #fff; border-radius: 16px; border: 1.5px solid var(--line); overflow: hidden; }
.panel .ph { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 18px; }
.panel .ph h3 { font-size: 24px; }
.panel .ph.plain h3 { font-size: 21px; }
.panel.aqua .ph { background: var(--aqua); }
.panel.adminbox { border: 2px solid var(--blue); }
.panel.adminbox .ph { background: #e3f1f8; }
.panel.narrowp { max-width: 640px; }
.table-scroll { overflow-x: auto; }
.pb table { width: 100%; border-collapse: collapse; }
.pb th { font-size: 13px; font-weight: 800; text-align: center; padding: 8px 10px; background: #f6f2e6; border-bottom: 1px solid var(--line); }
.pb td { font-size: 16px; padding: 7px 10px; text-align: center; border-bottom: 1px solid #f0ebdd; }
.pb td.l, .pb th.l { text-align: left; }
.pb td b { font-weight: 900; }
tr.out td { background: #e7f3f3; color: #5b6b6b; }
tr.cut td { border-bottom: 3px solid var(--ink); }
tr.live td { background: #fffaf2; color: #6b665a; }
.tier { display: inline-block; min-width: 30px; padding: 1px 8px; border-radius: 999px; font-weight: 900; font-size: 14px; }
.t1 { background: var(--red); color: #fff; }
.t2 { background: var(--orange); color: var(--ink); }
.t3 { background: var(--gold); color: var(--ink); }
.day { font-size: 12px; font-weight: 800; color: var(--muted); background: #f1ece0; border-radius: 6px; padding: 1px 6px; margin-left: 6px; }
a.tm { text-decoration: none; color: #27303b; font-weight: 700; }
a.tm:hover { text-decoration: underline; }

/* Matches table: Block · Match · Score · Team · VS · Team · Score */
.mt td { padding: 7px 8px; }
.mt .blk { font-weight: 900; font-size: 19px; width: 92px; line-height: 1.1; border-right: 1px solid #efe9da; }
.mt .blk .to { font-size: 12px; font-weight: 700; margin-top: 4px; color: #6b5f10; }
.mt .m { width: 56px; font-weight: 800; color: var(--muted); }
.mt .s { width: 62px; background: #faf8f2; font-size: 17px; }
.mt .s.w { font-weight: 900; color: var(--blue-dark); }
.mt .s.in { padding: 4px 6px; background: #fff; }
.mt .vs { width: 36px; font-weight: 900; font-size: 13px; color: var(--muted); }
.mt tr.end td { border-bottom: 2px solid #e2dac4; }
.r830 .blk { background: #fbe1dc; color: #9e2415; }
.r700 .blk { background: #fde6d3; color: #8a4515; }
.r530 .blk { background: #fff1bf; color: #5c4a00; }
.r830 .tmc { background: #fff6f4; }
.r700 .tmc { background: #fff8f1; }
.r530 .tmc { background: #fffbea; }
.in-box, input.pbs { width: 100%; height: 36px; border-radius: 9px; border: 2px solid #cfc8b4; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; font-family: inherit; font-weight: 800; text-align: center; color: var(--ink); }
.in-box.auto { border-style: dashed; background: #f4f0e5; color: #9a9483; }
input.pbs.w { border-color: var(--blue); color: var(--blue-dark); font-weight: 900; background: #eef7fb; }
input.pbs:focus, input.pbb:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px #fbe0cc; }
input.saving { opacity: .6; }
input.saved-flash { box-shadow: 0 0 0 4px #c9ecd6 !important; }
input.error-flash { border-color: var(--red) !important; background: #fbe3df !important; }
input.half { border-color: #e2b04a !important; background: #fff8e1 !important; }
.help { font-size: 14px; color: #3c4a4a; padding: 10px 18px; background: #eaf6f6; border-bottom: 1px solid var(--line); line-height: 1.45; }
.why { font-size: 15px; line-height: 1.5; padding: 4px 18px 12px; }
.why div { padding: 3px 0; }
.up { color: var(--up); font-weight: 900; }
.dn { color: var(--red); font-weight: 900; }
.rosterline { padding: 6px 0; }
.addteam { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.addteam .pick { flex: 1; min-width: 220px; }

/* Bracket */
.bracket { display: grid; gap: 10px 14px; padding: 16px 18px 18px; overflow-x: auto; }
.bracket.compact { padding-top: 0; }
.round { display: flex; flex-direction: column; justify-content: space-around; gap: 10px; min-width: 150px; }
.rlabel { font-size: 13px; font-weight: 900; color: var(--muted); text-align: center; }
.match { border: 1.5px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; font-size: 15px; }
.slot { display: flex; align-items: center; gap: 8px; padding: 5px 8px; min-height: 32px; }
.slot + .slot { border-top: 1px solid #f0ebdd; }
.slot .sd { min-width: 24px; text-align: center; border-radius: 6px; font-size: 12px; font-weight: 900; padding: 2px 0; }
.slot .sd.byeb { background: #f1ece0; }
.slot .nm { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.slot .ps { font-weight: 900; color: var(--blue-dark); }
.slot.bye, .slot.tbd .nm { color: #9a9483; }
input.pbb { width: 44px; height: 28px; border: 2px solid #cfc8b4; border-radius: 7px; text-align: center; font: inherit; font-weight: 800; }
.champ { background: var(--gold); border-radius: 14px; padding: 14px; text-align: center; font-weight: 900; font-size: 18px; }
.champ-name { font-weight: 700; font-size: 15px; color: #6b5f10; margin-top: 4px; }

/* Team page */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0 18px 16px; }
.stat { background: #f6f2e6; border-radius: 12px; padding: 12px 14px; }
.stat.alt { background: #eaf6f6; }
.stat .k { font-size: 13px; font-weight: 800; color: var(--muted); }
.stat .v { font-size: 30px; font-weight: 900; }
.pill { display: inline-block; border-radius: 999px; padding: 3px 12px; font-size: 14px; font-weight: 900; background: #f1ece0; }
.pill.q { background: var(--gold); }
.pill.live { background: #fbe0cc; color: #8a4515; }
.card-body { padding: 6px 18px 16px; font-size: 16px; line-height: 1.6; }
.card-body.big { font-size: 18px; font-weight: 700; }
.bigrank { display: flex; align-items: baseline; gap: 12px; }
.bigrank .n { font-size: 42px; font-weight: 900; }
.badge-admin { background: var(--blue); color: #fff; border-radius: 8px; padding: 2px 9px; font-size: 13px; font-weight: 900; }
.kv { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 2px 10px; font-size: 15px; padding: 6px 0; border-top: 1px solid #f0ebdd; }
.kv:first-child { border-top: 0; }
.kv b { font-weight: 800; color: var(--muted); }
.status { display: inline-block; border-radius: 8px; padding: 3px 10px; font-size: 13px; font-weight: 900; letter-spacing: .04em; }
.status.active { background: #dff3e7; color: #146c3c; }
.status.retired { background: #ece7da; color: #6b665a; }
.avail { font-size: 14px; font-weight: 800; margin-top: 2px; min-height: 1em; }
.avail.ok { color: var(--up); }
.avail.taken { color: var(--red); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; align-items: center; }

/* Forms */
.field { display: grid; gap: 4px; margin-bottom: 12px; }
.field > span { font-size: 13px; font-weight: 800; color: var(--muted); }
.input { height: 42px; border: 1.5px solid #cfc8b4; border-radius: 10px; background: #fff; padding: 0 12px; font: inherit; font-size: 16px; width: 100%; display: flex; align-items: center; }
.input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px #d6ebf5; }
.input.muted { color: #6b665a; background: #f6f2e6; }
.input[readonly] { background: #f6f2e6; color: #6b665a; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr; gap: 10px; }
.two { display: grid; grid-template-columns: 1.5fr 1fr; gap: 8px; margin-top: 6px; }
.check { display: flex; gap: 8px; align-items: center; padding: 6px 0; font-size: 15px; }
.check .ok { color: var(--up); font-weight: 900; }
.check .wait { color: #b35c16; font-weight: 900; }
.check .bad { color: var(--red); font-weight: 900; }
.lock { font-size: 13px; color: #8a4515; font-weight: 700; }
.daypick { display: flex; gap: 8px; flex-wrap: wrap; }
.daypick label { cursor: pointer; }
.daypick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.daypick span { display: inline-block; border: 1.5px solid #cfc8b4; border-radius: 9px; padding: 7px 12px; font-weight: 800; background: #fff; }
.daypick input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.daypick input:focus-visible + span { box-shadow: 0 0 0 3px #d6ebf5; }
.lookrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lookrow select.input { width: auto; }
.lookrow input[type=color] { width: 42px; height: 38px; border: 1.5px solid #cfc8b4; border-radius: 8px; padding: 2px; background: #fff; }
.tog { border: 1.5px solid var(--line); border-radius: 999px; padding: 4px 10px; background: #fff; font-weight: 700; cursor: pointer; }
.settings { display: grid; gap: 16px; max-width: 820px; }
h2.section { font-size: 26px; margin: 22px 0 10px; }
.search { margin: 0; }
.search .input { width: 320px; max-width: 100%; }
.tabs { display: flex; gap: 6px; padding: 0 18px 12px; flex-wrap: wrap; }
.tabs a { padding: 8px 16px; border-radius: 10px; font-weight: 800; background: #fff; border: 1.5px solid var(--line); color: var(--ink); text-decoration: none; }
.tabs a.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.difgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 12px 0; }
.difblk { margin-bottom: 8px; }

/* Ladder setup: team pickers */
.slot-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 16px; }
.slot-row + .slot-row { border-top: 1px solid #f0ebdd; }
.slot-row .n { font-weight: 900; color: var(--muted); }
.pick { position: relative; }
.pick .input.chosen { font-weight: 800; border-color: var(--blue); }
.dropdown { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1.5px solid #cfc8b4; border-radius: 12px; z-index: 5; box-shadow: 0 10px 28px rgba(0,0,0,.14); overflow: hidden; max-height: 340px; overflow-y: auto; }
.dropdown .grp { font-size: 12px; font-weight: 900; color: var(--muted); padding: 8px 14px 4px; }
.dropdown .opt { padding: 9px 14px; font-size: 16px; display: flex; justify-content: space-between; gap: 10px; cursor: pointer; }
.dropdown .opt small { color: var(--muted); font-size: 13px; text-align: right; }
.dropdown .opt.hi, .dropdown .opt:hover { background: #eef7fb; }
.dropdown .opt.create { border-top: 1px solid #f0ebdd; color: var(--blue-dark); font-weight: 900; }
.dropdown .opt.dis { color: #9a9483; cursor: default; }

/* Dialogs */
.overlay { position: fixed; inset: 0; background: rgba(2, 2, 2, 0.45); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; z-index: 20; overflow-y: auto; }
.overlay[hidden] { display: none; }
.dialog { background: #fff; border-radius: 18px; width: 640px; max-width: 100%; overflow: hidden; border: 1.5px solid var(--line); margin: 0; }
.dialog.narrow { width: 520px; }
.dialog .mh { background: var(--aqua); padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; }
.dialog .mh h3 { font-size: 24px; }
.dialog .x { border: 0; background: none; font-size: 26px; font-weight: 900; cursor: pointer; }
.dialog .mb { padding: 16px 20px 6px; }
.dialog .mf { padding: 12px 20px 16px; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid #f0ebdd; }
.dialog h4 { margin: 6px 0 8px; font-size: 16px; }

/* Rearrange the ladder (admin pop-up) */
.rg-blocks { display: grid; gap: 10px; margin: 12px 0; }
.rg-block { border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
#rearrange { z-index: 40; }
.rg-head { padding: 6px 14px; font-weight: 900; font-size: 18px; color: #fff; }
.rg-block.b830 .rg-head { background: var(--red); }
.rg-block.b700 .rg-head { background: var(--orange); color: var(--ink); }
.rg-block.b530 .rg-head { background: var(--gold); color: var(--ink); }
.rg-slot { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-top: 1px solid #f0ebdd; }
.rg-slot.moved { background: #eef7fb; }
.rg-n { width: 22px; text-align: center; font-weight: 900; color: var(--blue-dark); flex: none; }
.rg-team { flex: 1; min-width: 0; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: #fffdf7; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; overflow-wrap: anywhere; }
.rg-team:hover { border-color: var(--blue); }
.rg-team:focus-visible { outline: none; box-shadow: 0 0 0 4px #d6ebf5; border-color: var(--blue); }
.rg-team.picked { border-color: var(--blue); background: #d6ebf5; box-shadow: 0 0 0 3px var(--blue); }
.rg-team.over { border-color: var(--blue); background: #d6ebf5; }
.rg-team.dragging { opacity: .35; }
.rg-team .tag { margin-left: 8px; font-size: 12px; }
.rg-ghost { position: fixed; z-index: 60; pointer-events: none; box-shadow: 0 8px 22px rgba(0, 0, 0, .25); background: #fff; border-color: var(--blue); cursor: grabbing; }
.dialog .mf .btn.linkish { margin-right: auto; }

/* Phones and small tablets */
@media (max-width: 960px) {
  .top { flex-wrap: wrap; padding: 10px 14px; min-height: 0; }
  .top .swoosh { opacity: .45; }
  .top .logo { width: 56px; height: 56px; }
  .top .divider { height: 42px; margin: 0 12px; }
  .top h1 { font-size: 26px; flex: 1; min-width: 0; }
  .top nav { position: static; width: 100%; margin-top: 8px; gap: 8px 16px; font-size: 16px; justify-content: flex-start; }
  .top nav a.other.wb { margin-left: auto; }
  .bh span b.lg { display: none; }
  .bh span b.sm { display: inline; }
  .ctx label { flex-wrap: wrap; }
  .ctx select { max-width: 100%; }
  .ctx { padding: 8px 16px; }
  .page, .page.nodays { grid-template-columns: minmax(0, 1fr); padding: 12px 8px 24px; gap: 12px; }
  .days { display: flex; flex-wrap: wrap; padding: 8px; }
  .days a { margin: 2px; padding: 8px 12px; font-size: 16px; }
  .days .note { display: none; }
  .cols, .cols.wide-right { grid-template-columns: minmax(0, 1fr); padding: 0 8px; }
  .titlebar { padding: 14px 12px; }
  .titlebar h2 { font-size: 30px; }
  .bh, .row { grid-template-columns: 20px minmax(0, 1fr) 26px 30px 30px 38px 40px; font-size: 15px; padding-left: 10px; padding-right: 10px; }
  .adm .bh, .adm .row { grid-template-columns: 18px minmax(0, 1fr) 34px 32px 22px 28px 28px 34px 34px; font-size: 14px; }
  .bh h3 { white-space: nowrap; }
  .bh span { font-size: 11px; }
  .bh h3 { font-size: 22px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row2, .row3, .difgrid { grid-template-columns: 1fr; }
  .mt .blk { width: 64px; font-size: 15px; }
  .pad { padding: 0 8px 12px; }
}

/* Logo: its cream rim vanished against the cream half of the header and
   showed over the stripes, so the logo looked off-centre. A soft outline
   shows the whole circle on any background. */
.top .logo { border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(39, 48, 59, .18), 0 2px 6px rgba(39, 48, 59, .18); }

/* ---- Phones (640px and narrower) ---- */
@media (max-width: 640px) {
  /* Tighter table cells so rankings and league lists fit without clipping. */
  .pb th { padding: 8px 5px; }
  .pb td { padding: 7px 5px; font-size: 15px; }
  .pb td .day { margin-left: 4px; }

  /* Admin ladder blocks: team name on its own line, the Abs / Sub boxes and
     numbers on the line below, still under their column headings. Stops
     names breaking mid-word ("Namtart-s"). */
  .adm .row { row-gap: 4px; align-items: center; }
  .adm .row > span:nth-child(1) { grid-row: 1; grid-column: 1; }
  .adm .row > .nm { grid-row: 1; grid-column: 2 / -1; }
  .adm .row > span:nth-child(3) { grid-row: 2; grid-column: 3; }
  .adm .row > span:nth-child(4) { grid-row: 2; grid-column: 4; }
  .adm .row > span:nth-child(5) { grid-row: 2; grid-column: 5; }
  .adm .row > span:nth-child(6) { grid-row: 2; grid-column: 6; }
  .adm .row > span:nth-child(7) { grid-row: 2; grid-column: 7; }
  .adm .row > span:nth-child(8) { grid-row: 2; grid-column: 8; }
  .adm .row > span:nth-child(9) { grid-row: 2; grid-column: 9; }

}

/* Ladder page rows: ladder beside matches, tournament boxes in a row below. */
.cols.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cols + .cols { margin-top: 18px; }
@media (max-width: 960px) {
  .cols.even { grid-template-columns: minmax(0, 1fr); }
  .cols + .cols { margin-top: 12px; }
}

/* The matches box measures its own width, so it can switch to cards. */
.panel:has(.mt) { container-type: inline-size; }
@container (max-width: 500px) {
  /* Matches: each match becomes a small card, one line per team with its
     score beside it; the block time becomes a band above its matches.
     Same HTML as the desktop table, only the layout changes. Applies whenever
     the matches box is narrow: on phones, and in the half-width column beside
     the ladder on smaller desktop screens. */
  .table-scroll:has(> .mt) { overflow-x: visible; }
  .mt, .mt tbody { display: block; width: 100%; }
  .mt tr:has(> th) { display: none; }
  .mt tr {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 58px;
    grid-template-areas: "blk blk blk" "m t1 s1" "m t2 s2";
    border-bottom: 1px solid #ece5d3;
  }
  .mt tr.end { border-bottom: 2px solid #e2dac4; }
  .mt td { display: block; border: 0; padding: 6px 8px; width: auto; }
  .mt tr.end td { border-bottom: 0; }
  .mt .blk {
    grid-area: blk; width: auto; display: flex; align-items: baseline; gap: 10px;
    text-align: left; font-size: 17px; padding: 8px 12px; border-right: 0;
  }
  .mt .blk .to { margin-top: 0; }
  .mt .m { grid-area: m; align-self: center; font-size: 13px; padding: 6px 0 6px 10px; text-align: left; }
  .mt .vs { display: none; }
  .mt .s + .tmc { grid-area: t1; }
  .mt .vs + .tmc { grid-area: t2; }
  .mt .m + .s { grid-area: s1; }
  .mt .tmc + .s { grid-area: s2; }
  .mt .tmc { text-align: left; padding: 9px 10px; line-height: 1.25; display: flex; align-items: center; }
  .mt .s { display: flex; align-items: center; justify-content: center; }
  .mt .s.in { padding: 4px 10px 4px 4px; min-width: 0; }
  .mt input.pbs, .mt .in-box { box-sizing: border-box; width: 100%; height: 40px; }
  .mt td.muted { grid-column: 1 / -1; text-align: left; }
}

/* Ladder block boxes measure their own width too: when a box is narrow
   (phones, or the ladder column on a mid-size screen) it uses the compact
   columns and short labels, so team names never squeeze to nothing. */
:has(> .bh) { container-type: inline-size; }
@container (max-width: 620px) {
  .bh, .row { grid-template-columns: 20px minmax(0, 1fr) 26px 30px 30px 38px 40px; font-size: 15px; padding-left: 10px; padding-right: 10px; }
  .adm .bh, .adm .row { grid-template-columns: 18px minmax(0, 1fr) 34px 32px 22px 28px 28px 34px 34px; font-size: 14px; }
  .bh h3 { white-space: nowrap; font-size: 22px; }
  .bh span { font-size: 11px; }
  .bh span b.lg { display: none; }
  .bh span b.sm { display: inline; }
}

/* ---- Ladder blocks: "Results" heading, and blocks with no results yet ---- */
/* A small "Results" heading sits over the W / PF / PA / Diff columns. */
.bh h3 { grid-row: 1 / 3; }
.bh > span { grid-row: 2; }
.bh > span.res {
  grid-row: 1; grid-column: 3 / 7; margin-bottom: 3px; padding-bottom: 2px;
  border-bottom: 1.5px solid currentColor; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.adm .bh > span.res { grid-column: 5 / 9; }

/* No results yet: the team names only, side by side, left to right. */
.nores .tlist { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
.nores .tlist .t {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  background: #fcfaf4; border: 1.5px solid #ece5d3; border-radius: 999px;
  padding: 5px 14px 5px 6px; font-size: 16px;
}
.nores .tlist .t > b {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: #f1ece0; font-size: 13px; font-weight: 900;
}
.nores .tlist .t .nm { min-width: 0; overflow-wrap: break-word; }
.nores .tlist .t.absent { color: #8f897a; }
/* Admin, no results yet: position, name, Absent, Sub. */
.adm.nores .bh, .adm.nores .row { grid-template-columns: 30px minmax(0, 1fr) 58px 46px; }
.adm.nores .row > span:nth-child(n) { grid-row: 1; grid-column: auto; }

/* Ladder page top row on desktop (user's request, 2026-09-28): the ladder
   gets about a third of the width and the Matches box the rest; while no
   ladder block has results (names only) the ladder gets even less. */
@media (min-width: 961px) {
  .cols:has(> .stack > .block) { grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr); }
}
.cols:has(> .stack > .block.nores):not(:has(> .stack > .block:not(.nores))) {
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr);
}
/* Below 1300 px (a smaller screen, or zoomed in) a third of the width is too
   cramped for the ladder, so the ladder and the Matches box stack, each full
   width, the same order as on phones. */
@media (max-width: 1300px) {
  .cols:has(> .stack > .block),
  .cols:has(> .stack > .block.nores):not(:has(> .stack > .block:not(.nores))) {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 960px) {
  .cols:has(> .stack > .block.nores):not(:has(> .stack > .block:not(.nores))) { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Matches table: clearer cell lines ---- */
/* Only while it is a table; the narrow card layout has its own lines below. */
@container (min-width: 501px) {
  .mt th { border-bottom: 2px solid #d9cfb5; }
  .mt td { border-bottom: 1px solid #ddd3bb; }
  .mt td + td, .mt .m { border-left: 1px solid #e3dac4; }
  .mt .blk { border-right: 1px solid #d9cfb5; }
  .mt tr.end td { border-bottom: 2px solid #c9bc98; }
}
@container (min-width: 501px) and (max-width: 680px) {
  /* Mid-width: slimmer fixed columns, more room for team names. */
  .mt .blk { width: 72px; font-size: 16px; }
  .mt .m { width: 44px; }
  .mt .s { width: 54px; }
  .mt .vs { width: 30px; }
}
/* Compressed match box (the card layout, 500 px wide or less): each match
   is its own outlined box, with a small "VS" tab on its left edge centred
   between the two teams and thin lines between the teams and the scores.
   Kept tight so more matches fit on a phone screen. */
@container (max-width: 500px) {
  .mt tr {
    grid-template-columns: 40px 30px minmax(0, 1fr) 58px;
    grid-template-areas: "blk blk blk blk" "m vs t1 s1" "m vs t2 s2";
    padding: 0 10px 3px 0;
  }
  .mt tr:has(> .blk) { padding-top: 0; }
  .mt tr > td.m { padding-top: 3px; }
  .mt td.vs {
    display: flex; grid-area: vs; align-items: center; justify-content: center;
    width: auto; padding: 0; margin-top: 3px;
    font-size: 11px; font-weight: 900; letter-spacing: .04em; color: #6b5f10;
    background: #f3eee0; border: 1.5px solid #c9bc98; border-right: 1px solid #ddd3bb;
    border-radius: 10px 0 0 10px;
  }
  .mt .s + .tmc, .mt .m + .s { margin-top: 3px; border-top: 1.5px solid #c9bc98; border-bottom: 1px solid #ddd3bb; }
  .mt .vs + .tmc, .mt .tmc + .s { border-bottom: 1.5px solid #c9bc98; }
  .mt .m + .s, .mt .tmc + .s { border-right: 1.5px solid #c9bc98; border-left: 1px solid #ece4cf; }
  .mt .m + .s { border-radius: 0 10px 0 0; }
  .mt .tmc + .s { border-radius: 0 0 10px 0; }
  .mt tr, .mt tr.end { border-bottom: 0; }
  .mt tr.end { padding-bottom: 8px; }
  .mt .tmc { padding-top: 7px; padding-bottom: 7px; }
  .mt .blk { margin-bottom: 3px; }
}

/* Phones: ladder blocks packed tighter (user's request, 2026-09-28): the
   8:30 / 7:00 / 5:30 boxes sit 4 px apart, shorter headers and rows, and
   slimmer number columns so team names get more room. */
@media (max-width: 640px) {
  .stack { gap: 4px; }
  .cols { gap: 10px; }
  .bh { padding-top: 7px; padding-bottom: 5px; }
  .bh h3 { font-size: 20px; }
  .row { padding-top: 5px; padding-bottom: 5px; }
  .bfoot { padding: 4px 10px 5px; font-size: 13px; }
  .nores .tlist { gap: 5px; padding: 7px 10px; }
  .nores .tlist .t { padding: 3px 10px 3px 4px; }
  .nores .tlist .t > b { width: 22px; height: 22px; }
  .block:not(.adm) .bh, .block:not(.adm) .row {
    grid-template-columns: 16px minmax(0, 1fr) 24px 28px 28px 34px 34px;
    column-gap: 3px; padding-left: 8px; padding-right: 8px;
  }
}

/* Team page "Week by week" / "All seasons" (user's request, 2026-09-28):
   the block is a chip in its block colour (red 8:30, orange 7:00, yellow
   5:30), everywhere. On phones each row is a tidy card: "Week N" with Next
   week on the right, then Block / Position / Finished, then four shaded
   tiles labelled in full (Wins, Points For, Points Against, Differential).
   The card layout follows the panel's own width (not the screen), so the
   tables never scroll sideways in the narrower desktop columns either. */
.chip.blk-chip { display: inline-block; font-size: 13px; padding: 3px 10px; white-space: nowrap; }
.panel:has(> .table-scroll > table.cards) { container-type: inline-size; }
@container (max-width: 700px) {
  /* Team page history tables: one card per row, each number labelled,
     instead of a table that slides sideways. */
  .table-scroll:has(> .cards) { overflow-x: visible; }
  .pb table.cards, .pb table.cards tbody { display: block; width: 100%; }
  .pb table.cards tr:has(> th) { display: none; }
  .pb table.cards tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 8px; padding: 10px 14px; border-bottom: 1px solid #f0ebdd; }
  .pb table.cards tr.live { background: #fffaf2; }
  .pb table.cards td { display: block; border: 0; padding: 0; text-align: left; font-size: 16px; background: none; }
  .pb table.cards td::before { display: block; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); margin-bottom: 1px; }
  .pb table.cards td.muted { grid-column: 1 / -1; }
  .pb table.cards td.muted::before { content: none; }
  /* Week by week: Week · Block · Position · Finish / W · PF · PA · Diff / Next week */
  .wk td:nth-child(1)::before { content: "Week"; }
  .wk td:nth-child(2)::before { content: "Block"; }
  .wk td:nth-child(3)::before { content: "Position"; }
  .wk td:nth-child(4)::before { content: "Finish"; }
  .wk td:nth-child(5)::before { content: "W"; }
  .wk td:nth-child(6)::before { content: "PF"; }
  .wk td:nth-child(7)::before { content: "PA"; }
  .wk td:nth-child(8)::before { content: "Diff"; }
  .wk td:nth-child(9) { grid-column: 1 / -1; }
  .wk td:nth-child(9)::before { content: "Next week: "; display: inline; }
  /* All seasons: Season · League · Day / Final spot · Tournament / W · PF · PA · Diff */
  .hist td:nth-child(1) { grid-column: 1 / -1; }
  .hist td:nth-child(2) { grid-column: span 2; }
  .hist td:nth-child(2)::before { content: "Final spot"; }
  .hist td:nth-child(7) { grid-column: span 2; order: 1; }
  .hist td:nth-child(7)::before { content: "Tournament"; }
  .hist td:nth-child(n+3):nth-child(-n+6) { order: 2; }
  .hist td:nth-child(3)::before { content: "W"; }
  .hist td:nth-child(4)::before { content: "PF"; }
  .hist td:nth-child(5)::before { content: "PA"; }
  .hist td:nth-child(6)::before { content: "Diff"; }
}
@container (max-width: 700px) {
  .pb table.cards.wk, .pb table.cards.hist { padding: 2px 0 6px; }
  .pb table.cards.wk tr, .pb table.cards.hist tr {
    margin: 8px 10px; padding: 10px 12px; background: #fff;
    border: 1.5px solid var(--line); border-radius: 12px;
  }
  .pb table.cards.wk tr.live { background: #fffaf2; }
  .pb table.cards.wk tr { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px 6px; }
  .pb .wk td:nth-child(1) { grid-row: 1; grid-column: 1 / 7; font-size: 19px; font-weight: 900; }
  .pb .wk td:nth-child(1)::before { content: "Week "; display: inline; font: inherit; text-transform: none; letter-spacing: 0; color: inherit; }
  .pb .wk td:nth-child(9) { grid-row: 1; grid-column: 7 / 13; text-align: right; align-self: center; font-weight: 800; }
  .pb .wk td:nth-child(9)::before { content: "Next week "; display: inline; margin-right: 4px; }
  .pb .wk td:nth-child(2), .pb .wk td:nth-child(3), .pb .wk td:nth-child(4) { grid-row: 2; grid-column: span 4; }
  .pb .wk td:nth-child(4)::before { content: "Finished"; }
  .pb .wk td:nth-child(n+5):nth-child(-n+8) { grid-row: 3; grid-column: span 3; }
  .pb .wk td:nth-child(n+5):nth-child(-n+8), .pb .hist td:nth-child(n+3):nth-child(-n+6) {
    background: #f6f2e6; border-radius: 8px; padding: 5px 4px 6px; text-align: center; font-size: 19px; font-weight: 900;
  }
  .pb .wk td:nth-child(n+5):nth-child(-n+8)::before, .pb .hist td:nth-child(n+3):nth-child(-n+6)::before {
    display: flex; align-items: flex-end; justify-content: center; min-height: 2.3em;
    font-size: 11px; line-height: 1.15; text-transform: none; letter-spacing: 0; margin-bottom: 2px;
  }
  .pb .wk td:nth-child(5)::before, .pb .hist td:nth-child(3)::before { content: "Wins"; }
  .pb .wk td:nth-child(6)::before, .pb .hist td:nth-child(4)::before { content: "Points For"; }
  .pb .wk td:nth-child(7)::before, .pb .hist td:nth-child(5)::before { content: "Points Against"; }
  .pb .wk td:nth-child(8)::before, .pb .hist td:nth-child(6)::before { content: "Differential"; }
  .pb table.cards.hist tr { gap: 8px 6px; }
  .pb .hist td:nth-child(1) { font-size: 17px; font-weight: 900; }
  .pb .wk .pill { white-space: nowrap; font-size: 12px; padding: 2px 9px; }
}

/* No divider line between the logo and the title (user's request, 2026-09-28). */
.top h1 { margin-left: 26px; }
@media (max-width: 960px) { .top h1 { margin-left: 14px; } }

/* Team page: Wins and Losses share one stat box, Losses on the right. */
.stat.wl .k, .stat.wl .v { display: flex; justify-content: space-between; gap: 10px; }

/* Team pickers (ladder setup, Add a team): let the suggestion list spill
   out of its box; .block / .panel clip their contents for the rounded
   corners, which cut the list off under the bottom slot. The box being
   typed in is lifted above the boxes after it. */
.block:has(.pick), .panel:has(.pick) { overflow: visible; }
.block:has(.pick) > .bh { border-radius: 14px 14px 0 0; }
.block:has(.pick:focus-within), .panel:has(.pick:focus-within) { position: relative; z-index: 6; }

/* Tournament "Through Week N" picker: the aqua chip is a dropdown. */
.throughpick { display: inline-flex; margin: 0; }
.throughpick select.chip { border: 0; font-family: inherit; color: inherit; cursor: pointer; }
.bfoot.provisional { color: #8a4515; background: #fdf1e6; }

/* Admin Players list (phone + email). Filters wrap; the table turns into
   one card per player when its panel is narrow (no sideways scrolling). */
.pfilters { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: flex-end; margin: 0; }
.pfilters .field { margin-bottom: 8px; min-width: 150px; flex: 1 1 150px; }
.pfilters .field.grow { flex: 2 1 220px; }
.pfilters .check { display: flex; align-items: center; gap: 8px; font-weight: 700; margin: 0 0 18px; flex: 1 1 100%; }
.pfilters .pf-actions { display: flex; gap: 8px; margin-bottom: 8px; }
.plist-panel { container-type: inline-size; }
.plist .tag { display: inline-block; font-size: 12px; padding: 2px 8px; margin-left: 6px; }
.plist td.em { overflow-wrap: anywhere; }
@container (max-width: 700px) {
  .plist, .plist tbody, .plist tr, .plist td { display: block; width: 100%; }
  .plist tr:first-child:has(th) { display: none; }
  .plist tr { padding: 10px 16px; border-top: 1px solid #f0ebdd; }
  .plist td { border: 0; padding: 2px 0; text-align: left; }
  .plist td[data-k]:not(:first-child)::before { content: attr(data-k) ": "; font-weight: 800; color: var(--muted); font-size: 13px; }
}

/* Header: the link to bowling is the Wonderbowl logo on a dark chip, at the
   right end of the menu (bowling pages mirror this with a Pickleball chip). */
.top nav a.other.wb { display: inline-flex; align-items: center; background: #111; border-radius: 10px; padding: 7px 12px; text-decoration: none; }
.top nav a.other.wb img { display: block; height: 18px; width: auto; }
.top nav a.other.wb:hover { background: #2a2a2a; }

/* Admin tools: their own line under the header's menu. */
.adminbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; padding: 8px 36px; background: #e3f1f8; border-top: 1px solid #c9e2ee; font-size: 16px; font-weight: 800; }
.adminbar a { color: var(--ink); text-decoration: none; padding-bottom: 2px; }
.adminbar a.on { color: var(--blue-dark); border-bottom: 3px solid var(--blue); }
.adminbar a.exit { color: var(--blue-dark); font-size: 15px; text-decoration: underline; margin-left: auto; }
@media (max-width: 960px) { .adminbar { padding: 8px 14px; gap: 8px 16px; } }