/* Final Buzzer design code (see .design/brand/CHARTER.md).
   Convention avoided: the slate-or-white AI payments dashboard with KPI cards, an activity feed
   with avatars and a chat panel.
   Metaphor: the tabletop flip scoreboard at mid-court. One object, the board, carries the day.
   1. Every game is a flap tile on the court grid; its money state is its face and its shape.
   2. One number gets flaps: seconds from the buzzer to the payout, in yellow (found detail 6).
   3. The decision waiting on Sam is the lead object on the board.
   4. Alumni Sans is for the wordmark and numerals only; words are Schibsted Grotesk.
   5. One theme: a dark board on a lit maple floor. The court grid is a Bryntum Scheduler wearing
      the board's own surface, not Bryntum's theme. */

@font-face { font-family: "Alumni Sans"; src: url("/type/AlumniSans.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/type/SchibstedGrotesk.ttf") format("truetype"); font-weight: 400 900; font-display: swap; }

:root {
  color-scheme: light;
  --floor: #E9EAEC; --floor-line: rgba(60,64,72,.25);
  --housing: #16171A; --rim: #2A2C31; --flap: #F4F5F2; --flap-lo: #E3E5E2; --split: #0A0B0C;
  --black-face: #2E3036; --ghost: #9EA2AA; --ghost-lo: #868A92; --keyline: #5C6068;
  --yellow: #F2C230; --yellow-lo: #E0AE1E;
  --ink: #16171A; --ink-muted: #4A4E56;
  --display: "Alumni Sans", "Arial Narrow", sans-serif;
  --body: "Schibsted Grotesk", Georgia, sans-serif;
  --chamfer: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
  --chamfer-3: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
  --top-half: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% 50%, 0 50%, 0 4px);
}

* { box-sizing: border-box; }
html { background: var(--floor); }
body { margin: 0; min-height: 100dvh; color: var(--ink); background: var(--floor); font-family: var(--body); font-size: 15px; line-height: 1.45; font-feature-settings: "kern"; }
/* proportional figures: Alumni Sans sets its comma and point on the tabular width, which opens gaps in
   "$3,145" and "40.2"; only the flap digits, which never carry punctuation, are tabular */
.num { font-family: var(--display); font-feature-settings: "kern"; }
.digit { font-variant-numeric: tabular-nums; }
::selection { background: var(--housing); color: var(--flap); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.housing :focus-visible { outline-color: var(--flap); }
.pick button:focus-visible, .btn:focus-visible, .pop > summary:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }
main:focus { outline: none; }
button { font: inherit; color: inherit; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--flap); color: var(--housing); padding: 8px 12px; }
.skip:focus { left: 8px; z-index: 10; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page { max-width: 1264px; margin: 0 auto; padding: 0 16px 40px; }

/* header */
.table-top { display: flex; align-items: center; gap: 24px; min-height: 56px; }
.lockup { display: flex; align-items: center; line-height: 0; text-decoration: none; }
.lockup .wm { height: 27px; width: auto; display: block; }
/* one status line: live, and who the next decision waits on */
.status { margin: 0 0 0 auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-muted); white-space: nowrap; }
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-muted); flex: none; }
.status.busy .dot { background: var(--ink); animation: pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity: .3; } }

/* pickers inside the housing: days on the board, days and courts on the scorer's phone */
.pick { display: flex; flex-wrap: wrap; gap: 4px; }
.pick button { border: 0; background: transparent; color: var(--ghost); font-weight: 600; font-size: 13px; line-height: 1; padding: 8px 10px; min-height: 36px; cursor: pointer; clip-path: var(--chamfer-3); }
.pick button .num { font-size: 15px; font-weight: 700; margin-left: 4px; }
.pick button:hover { color: var(--flap); }
.pick button[aria-current="date"], .pick button[aria-pressed="true"] { background: var(--flap); color: var(--housing); cursor: default; }

/* the board */
.housing { position: relative; margin-top: 4px; color: var(--flap); background: var(--housing); border-radius: 14px; padding: 14px 16px 14px; box-shadow: 0 2px 0 var(--split); }
.topline { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.topline .days { margin-right: auto; }
.printed { margin: 0; font-size: 13px; font-weight: 500; color: var(--ghost); display: flex; flex-wrap: wrap; gap: 2px 16px; }
.printed b { color: var(--flap); font-weight: 600; }

/* the two rare things, folded away: the key and the gym closure */
.pop { position: relative; }
.pop > summary { list-style: none; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--ghost); padding: 8px 10px; min-height: 36px; display: flex; align-items: center; clip-path: var(--chamfer-3); }
.pop > summary::-webkit-details-marker { display: none; }
.pop > summary:hover, .pop[open] > summary { color: var(--flap); background: var(--black-face); }
.pop > :not(summary) { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--black-face); padding: 12px 14px; clip-path: var(--chamfer); box-shadow: 0 2px 0 var(--split); }
.scoreline { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 24px; align-items: center; padding: 0 0 12px; border-bottom: 1px solid var(--rim); margin-bottom: 6px; }
.scoreline:has(> .hold[hidden]) { grid-template-columns: 1fr; }

/* the held decision: a big flap caught mid-flip */
.hold .top { background: var(--flap); color: var(--housing); padding: 10px 16px 10px; clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%, 0 4px); }
.hold h2 { margin: 0 0 3px; font-size: 18px; font-weight: 700; line-height: 1.2; }
.hold h2 .num { font-size: 22px; }
.hold h2 small { margin-left: 10px; font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.hold .top p { margin: 0; font-size: 14px; line-height: 1.45; text-wrap: pretty; }
.hold .why { margin-top: 4px; font-size: 12px; color: var(--ink-muted); }
.hold .why summary { cursor: pointer; font-weight: 600; width: max-content; }
.hold .why p { font-size: 12px; margin-top: 3px; }
.hold .why p:empty { display: none; }
.hold .bottom { background: var(--black-face); margin-top: 2px; transform: translateY(2px); padding: 8px 12px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px)); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hold .bottom [hidden] { display: none; }
.hold .bottom small { flex-basis: 100%; }
.hold .bottom small { grid-column: 1 / -1; font-size: 12px; color: var(--ghost); }
.hold .bottom small:empty { display: none; }
.btn { border: 0; background: var(--flap); color: var(--housing); font-weight: 600; font-size: 13px; padding: 9px 16px; cursor: pointer; min-height: 40px; clip-path: var(--chamfer); }
.btn:hover { background: #FDFDFB; }
.btn:active { transform: translateY(1px); }
.btn.second { background: transparent; color: var(--flap); font-weight: 500; }
.btn.second:hover { background: var(--housing); }
.btn[disabled] { opacity: .55; cursor: default; }

/* the figures: one number on flaps, the rest as a line */
.figures { display: grid; gap: 8px; }
.speed { display: flex; align-items: center; gap: 16px; }
.digits { display: flex; gap: 4px; filter: drop-shadow(0 2px 0 var(--split)); perspective: 400px; }
.digit { position: relative; width: 50px; height: 70px; background: linear-gradient(180deg, var(--yellow) 0 50%, var(--yellow-lo) 50% 100%); color: var(--housing); clip-path: var(--chamfer); font-family: var(--display); font-weight: 800; font-size: 66px; line-height: 75px; text-align: center; }
.digit::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--split); }
.digit.ghosted { color: rgba(22,23,26,.22); }
/* while a decision waits on Sam, the words beside the yellow step back so the held card leads (the
   digits keep their yellow: dimmed on black it turns mustard) */
.scoreline:has(> .hold:not([hidden])) .speed .words strong { color: var(--ghost); }
@media (max-width: 900px) { .hold h2 .hint { display: none; } }
.speed .words { min-width: 0; }
.speed .words strong { display: block; font-size: 18px; font-weight: 700; line-height: 1.2; text-wrap: balance; }
.speed .words span { display: block; font-size: 13px; color: var(--ghost); line-height: 1.4; margin-top: 2px; text-wrap: pretty; }
.tally { margin: 0; font-size: 13px; color: var(--ghost); display: flex; flex-wrap: wrap; gap: 2px 16px; }
.tally .fig { white-space: nowrap; }
.tally .num { font-size: 22px; font-weight: 700; color: var(--flap); margin-right: 3px; }

/* the court grid: a Bryntum Scheduler on the housing */
.courts { min-height: 120px; }
.courts .b-scheduler, .courts .b-grid-body-container, .courts .b-grid-header-container, .courts .b-grid-subgrid, .courts .b-grid-header, .courts .b-grid-row, .courts .b-grid-cell, .courts .b-timeline-subgrid, .courts .b-sch-timeaxis-cell, .courts .b-grid-splitter, .courts .b-grid-panel-body { background: var(--housing) !important; color: var(--flap); border-color: var(--rim) !important; box-shadow: none !important; }
.courts .b-scheduler { border: 0; font-family: var(--body); }
.courts .b-grid-header-container { border-bottom: 1px solid var(--rim) !important; }
.courts .b-grid-header .b-grid-header-text, .courts .b-sch-header-time-axis-cell, .courts .b-sch-header-time-axis-cell .b-sch-header-text { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--flap) !important; }
/* the hour sits on its line, at the left edge of its column, so a 10:15 start reads as a quarter past */
.courts .b-sch-header-time-axis-cell { background: var(--housing) !important; border-color: var(--rim) !important; justify-content: flex-start; padding-left: 4px; }
.courts .b-grid-header .b-grid-header-text { font-family: var(--body); font-size: 11px; font-weight: 500; }
.courts .b-sch-header-timeaxis-cell { border-color: var(--rim) !important; }
.courts .b-grid-row { border-bottom: 1px solid rgba(42,44,49,.8) !important; }
.courts .b-grid-row.b-selected .b-grid-cell, .courts .b-grid-row:hover .b-grid-cell { background: var(--housing) !important; }
.courts .b-grid-cell { font-size: 13px; font-weight: 700; color: var(--flap); padding: 0 6px 0 2px; display: block; white-space: normal; line-height: 1.15; }
.courts .b-grid-cell .court { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.courts .b-grid-cell small { display: block; font-weight: 400; font-size: 11px; color: var(--ghost); line-height: 1.1; margin-top: 2px; }
.courts .b-grid-splitter { width: 1px !important; min-width: 1px; }
.courts .b-column-line, .courts .b-column-line-major { border-left: 1px solid rgba(92,96,104,.4) !important; background: transparent !important; }
.courts .b-grid-header.b-depth-0 { border-bottom: 0; }
.courts .b-timeline-subgrid .b-grid-row:nth-child(5) { border-bottom-color: var(--keyline) !important; }
.courts .b-grid-vertical-scroller, .courts .b-virtual-scrollers { background: var(--housing); }
.courts .b-sch-event-wrap { padding: 0; }
.courts .b-sch-event { display: block; width: 100%; height: 100%; background: transparent !important; border: 0 !important; padding: 0 !important; color: inherit; border-radius: 0; font: inherit; overflow: visible; }
.courts .b-sch-event:hover, .courts .b-sch-event.b-sch-event-selected { background: transparent !important; }
.courts .b-sch-event-content { width: 100%; height: 100%; margin: 0; padding: 0; overflow: visible; }
.courts .b-sch-timerange.now-line, .courts .b-sch-line.now-line { background: var(--flap); width: 2px; border: 0; }
.courts .b-sch-timerange.now-line label, .courts .b-sch-line.now-line label { background: var(--flap); color: var(--housing); font-family: var(--display); font-weight: 700; font-size: 15px; padding: 0 5px; border: 0; clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% 100%, 0 100%, 0 3px); }
.courts .b-sch-header-timeaxis-cell.b-sch-timerange.now-line, .courts .b-sch-timerange.now-line.b-sch-timerange-header { background: transparent; color: var(--housing); }
.courts .b-timeaxis .b-sch-timerange.now-line { background: transparent; }

/* a flap tile, four states, four shapes */
.flap { position: relative; width: calc(100% - 3px); height: 100%; --face-bg: var(--black-face); --face-ink: var(--flap); }
.flap .face { position: absolute; inset: 0; background: var(--face-bg); color: var(--face-ink); padding: 2px 7px 0; clip-path: var(--chamfer); overflow: hidden; }
.flap .face::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--split); opacity: .85; }
.flap .vs { position: relative; z-index: 1; display: block; font-weight: 600; font-size: 11px; line-height: 11px; white-space: nowrap; overflow: hidden; }
.flap .vs span { display: block; white-space: nowrap; overflow: hidden; }
.flap .note { position: absolute; z-index: 1; left: 7px; right: 7px; bottom: 5px; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; line-height: 13px; color: var(--ghost); white-space: nowrap; }
.flap .note .num { font-size: 15px; font-weight: 700; }
.flap.scheduled { --face-bg: var(--keyline); --face-ink: var(--ghost); }
.flap.scheduled .face::before { content: ""; position: absolute; inset: 1px; background: var(--housing); clip-path: var(--chamfer-3); }
.flap.scheduled .face::after { opacity: .6; background: var(--keyline); }
.flap.scheduled .vs { font-weight: 500; }
.flap.scheduled .note { font-weight: 500; color: var(--ghost); }
.flap.live .face { padding-left: 11px; box-shadow: inset 4px 0 0 var(--flap); }
.flap.live .note { color: var(--flap); left: 11px; }
.flap.folded .face { box-shadow: inset 0 -4px 0 var(--ghost); }
.flap.paid { --face-bg: linear-gradient(180deg, var(--flap) 0 50%, var(--flap-lo) 50%); --face-ink: var(--housing); }
.flap.paid .note { color: var(--housing); }
.flap.paying { --face-bg: linear-gradient(180deg, var(--flap) 0 50%, var(--flap-lo) 50%); --face-ink: var(--housing); }
.flap.paying .note { color: var(--ink-muted); }
.flap.held .face.top { --face-bg: var(--flap); --face-ink: var(--housing); clip-path: var(--top-half); }
.flap.held .face.bottom { clip-path: polygon(0 calc(50% + 2px), 100% calc(50% + 2px), 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px)); transform: translateY(2px); }
.flap.held .face.bottom .note { color: var(--flap); }
.flap.held .face.bottom .vs, .flap.held .face.top .note { visibility: hidden; }
.flap.just-flipped .face { animation: settle 420ms cubic-bezier(.22,.9,.32,1.04) both; }
@keyframes settle { from { transform: rotateX(70deg); opacity: .4; } to { transform: none; opacity: 1; } }

/* the key, folded behind "Key" */
.key .legend { display: grid; gap: 8px; width: max-content; margin: 0; list-style: none; font-size: 12px; color: var(--flap); }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend i { position: relative; flex: none; width: 24px; height: 14px; display: block; clip-path: var(--chamfer-3); }
.legend .l-sched { background: var(--keyline); } .legend .l-sched::before { content: ""; position: absolute; inset: 1px; background: var(--housing); clip-path: var(--chamfer-3); }
.legend .l-live { background: var(--black-face); box-shadow: inset 4px 0 0 var(--flap); }
.legend .l-paid { background: linear-gradient(180deg, var(--flap) 0 50%, var(--flap-lo) 50%); }
.legend .l-held { background: linear-gradient(180deg, var(--flap) 0 50%, var(--black-face) 50%); }
.legend .l-fold { background: var(--black-face); box-shadow: inset 0 -3px 0 var(--ghost); }

/* the phone board */
.phone { display: none; }
.phone h3 { margin: 16px 0 8px; font-size: 15px; font-weight: 700; line-height: 1; color: var(--flap); }
.phone h3 .num { font-weight: 600; color: var(--ghost); font-size: 15px; margin-left: 6px; }
.prows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rim); }
.prows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; padding: 8px 2px; border-bottom: 1px solid var(--rim); }
.prows b { font-size: 15px; font-weight: 700; line-height: 1.25; }
.prows .when { font-size: 13px; font-weight: 600; color: var(--flap); text-align: right; }
.prows small { grid-column: 1 / -1; font-size: 11px; color: var(--ghost); }
.prows.later b { font-weight: 500; color: var(--ghost); }
.prows.later .when { color: var(--ghost); }
.minis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.minis li { background: linear-gradient(180deg, var(--flap) 0 50%, var(--flap-lo) 50%); color: var(--housing); clip-path: var(--chamfer); padding: 4px 6px 5px; position: relative; font-size: 11px; font-weight: 600; line-height: 16px; }
.minis li::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--split); opacity: .85; }
.minis li > span { display: block; }
.minis b.num { font-size: 15px; font-weight: 700; }
.minis li.held { background: linear-gradient(180deg, var(--flap) 0 50%, var(--black-face) 50%); }
.minis li.held > span:last-child { color: var(--flap); }

/* under the board */
.below { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; margin-top: 24px; align-items: start; }
.below h2 { margin: 0 0 8px; font-size: 15px; font-weight: 700; line-height: 1.2; }
.entries { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--floor-line); }
.entries li { display: grid; grid-template-columns: 48px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--floor-line); font-size: 13px; line-height: 1.45; text-wrap: pretty; }
.entries time { font-size: 18px; font-weight: 700; line-height: 1.1; }
.rate p { margin: 0 0 8px; font-size: 13px; color: var(--ink-muted); line-height: 1.45; text-wrap: pretty; }
.rate p b { color: var(--ink); font-weight: 600; }
footer { margin-top: 24px; font-size: 11px; color: var(--ink-muted); }

@media (max-width: 1100px) {
  .scoreline { grid-template-columns: 1fr; gap: 16px; }
  .below { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .table-top { flex-wrap: wrap; gap: 4px 12px; padding: 8px 0; }
  .lockup { padding: 6px 0; }
  .lockup .wm { height: 24px; }
  .nav { order: 3; flex-basis: 100%; margin-left: -10px; }
  .pick button, .btn, .pop > summary { min-height: 44px; }
  .housing { padding: 12px 10px; margin-left: -6px; margin-right: -6px; }
  .topline { flex-wrap: wrap; }
  .key { display: none; }
  .digit { width: 42px; height: 60px; font-size: 56px; line-height: 64px; }
  .hold .bottom .btn:first-child { flex-basis: 100%; }
  .courts { display: none; }
  .phone { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .flap.just-flipped .face { animation: none; }
  .btn:active { transform: none; }
}

/* page links */
.nav { display: flex; gap: 2px; margin-left: 8px; }
.nav a { color: var(--ink-muted); text-decoration: none; font-size: 13px; font-weight: 600; padding: 8px 10px; clip-path: var(--chamfer-3); }
.nav a[aria-current] { background: var(--housing); color: var(--flap); }

/* a gym closes: the form behind "Close a gym", and the plan the agent comes back with */
.close { display: grid; grid-template-columns: auto auto; gap: 8px 10px; align-items: center; width: max-content; }
.close label { font-size: 12px; color: var(--ghost); }
.close select { font: 600 13px/1 var(--body); color: var(--housing); background: var(--flap); border: 0; padding: 8px; clip-path: var(--chamfer-3); min-height: 36px; }
.close .btn { grid-column: 1 / -1; }
.plan { margin: 0 0 10px; background: var(--black-face); color: var(--flap); padding: 10px 14px 12px; clip-path: var(--chamfer); }
.plan h2 { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.plan h3 { margin: 10px 0 4px; font-size: 12px; font-weight: 600; color: var(--ghost); }
.plan p { margin: 0; font-size: 13px; }
.plan ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.45; }
.plan .quiet { color: var(--ghost); font-size: 12px; margin-top: 6px; }

/* a tile opens its game */
.courts .b-sch-event-wrap, .phone [data-game] { cursor: pointer; }
.courts .b-sch-event-wrap:hover .flap .face { filter: brightness(1.08); }
.game-card { position: relative; padding-right: 72px; }
.game-card:focus { outline: none; }
.game-card .where { color: var(--ghost); font-size: 12px; margin: 0 0 8px; }
.game-card p + p, .game-card ul + p { margin-top: 6px; }
.game-card ul { margin: 4px 0 0; }
.game-card a.btn { display: inline-flex; align-items: center; text-decoration: none; margin-top: 4px; }
.close-x { position: absolute; top: 8px; right: 8px; border: 0; background: transparent; color: var(--ghost); font-size: 12px; font-weight: 600; padding: 8px 10px; min-height: 36px; cursor: pointer; clip-path: var(--chamfer-3); }
.close-x:hover { color: var(--flap); background: var(--housing); }
.hold h2:focus { outline: none; }
.flap.final .face { padding-left: 11px; box-shadow: inset 4px 0 0 var(--yellow); }
.flap.final .note { color: var(--flap); left: 11px; }
.flap.unplayed { --face-bg: var(--keyline); --face-ink: var(--ghost); }
.flap.unplayed .face::before { content: ""; position: absolute; inset: 1px; background: var(--housing); clip-path: var(--chamfer-3); }