/* Owner-only visual system. Player and public-site themes remain independent. */
:root {
  /* Landing parity (Oct 2026): the dashboard now shares the homepage system (landing/assets/home.css):
     a near-white canvas, white panels with a hairline and a soft card shadow, grey #f4f4f2 tiles inside
     them, forest ink accents and ONE lime gradient action. Lime is a fill, never text. */
  color-scheme: light;
  --ink: #0a0a0a; --ink-2: #3c4043; --muted: #6f6f6f; --faint: #9a9a9a; --ink-soft: #6f6f6f;
  --paper: #ffffff; --soft: #f4f4f2; --line: #ececec; --line-2: #e2e2e2;
  --green: #075f42; --green-2: #0e7a55; --lime: #d7f46d; --lime-2: #a8dc3c; --lime-tint: #f3fbd6;
  --forest-950: #061f16; --forest-700: #075f42; --accent-ink: #075f42;
  --mint: #e8f6ec; --blue: #e6f3f7; --amber: #fbf3dd; --rose: #fdecec;
  --tint-mint: #e8f6ec; --tint-blue: #e6f3f7; --tint-amber: #fbf3dd; --tint-rose: #fdecec;
  --danger-ink: #b42318; --warning-ink: #8a5a00;
  --r: 12px; --r-md: 12px; --r-lg: 16px;
  --shadow: none; --shadow-sm: none;
  --card: #ffffff; --w-heavy: 600; --w-black: 650;
  --success: #1f9d55; --info: #2b7a90; --warn: #c08a00; --danger: #d92d20;
  --font-display: "Cal Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Elevation, the landing way: depth from a white panel's hairline + soft shadow on a
     slightly grey canvas, and grey tiles nested inside. */
  --canvas: #f7f7f4;
  --surface-1: #ffffff;                 /* panels */
  --surface-2: #f4f4f2;                 /* tiles and rows inside a panel */
  --surface-3: #ffffff;                 /* menus, popovers, dialogs (float shadow) */
  --recess: #ffffff;                    /* inputs: white well with a border */
  --hairline: #ececec;
  --hairline-strong: #e2e2e2;
  --hover: rgba(10, 10, 10, 0.04);
  --highlight: 0 0 0 0 transparent;     /* kept as a no-op so composite shadows stay valid */
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);
  --elev-2: 0 2px 6px rgba(0, 0, 0, 0.05), 0 16px 36px rgba(0, 0, 0, 0.08);
  --elev-3: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 18px 48px rgba(0, 0, 0, 0.12);
  --cta: linear-gradient(90deg, #9fe04a 0%, #c6ee5c 55%, #d7f46d 100%);
  --cta-glow: 0 8px 22px rgba(168, 220, 60, 0.45), 0 2px 0 rgba(255, 255, 255, 0.6) inset, 0 -2px 0 rgba(6, 31, 22, 0.08) inset;
  --r-sm: 8px;                          /* controls */
  --r-inner: 12px;                      /* tiles and rows inside a panel */
  --r-panel: 16px;                      /* panels */
  --r-pill: 999px;
}
body { background: var(--canvas); font-size: 14px; line-height: 1.5; }
.shell { grid-template-columns: 224px minmax(0, 1fr); transition: none; }
.sidebar { background: #ffffff; padding: 24px 12px 16px; overflow-y: auto; }
.side-head { padding: 0 12px 18px; }
.brand { border: 0; border-radius: 0; background: transparent; padding: 0; justify-content: flex-start; }
.brand img { width: 88px; }
.nav { gap: 4px; margin-top: 0; }
.nav-group { color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: .09em; padding: 20px 12px 8px; }
.nav a { min-height: 42px; border-radius: 8px; padding: 0 12px; font-weight: 500; font-size: 13px; }
.nav a.active { background: var(--lime-tint); color: var(--ink); box-shadow: none; }
.nav a:hover { background: var(--hover); transform: none; color: var(--ink); }
.nav-icon { background: none; }
.nav a.active .nav-icon { color: var(--accent-ink); background: none; }
.nav-count { color: var(--muted); background: transparent; border: 0; font-size: 10px; }
.sidebar-footer { margin-top: auto; padding-top: 24px; }
body.nav-collapsed .nav-group { display: none; }
.main { padding: 28px 32px 48px; min-width: 0; }
.topbar { align-items: center; padding: 0 0 24px; gap: 20px; border-bottom: 1px solid var(--line); }
.crumb { display: none; }
.topbar h1 { font-size: 27px; line-height: 1.25; font-weight: 650; letter-spacing: 0; margin: 0; }
.sub { margin: 6px 0 0; max-width: 62ch; font-size: 13px; color: var(--muted); }
.actions { gap: 8px; flex-wrap: wrap; }
.btn, button.btn { min-height: 40px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--paper); box-shadow: none; font-size: 12px; font-weight: 550; transition: background 140ms ease, border-color 140ms ease, transform 140ms ease; }
.btn:hover { background: var(--surface-2); border-color: var(--line-2); transform: none; }
.btn:active { transform: scale(.98); }
.btn--primary, button.btn--primary { background: var(--lime); border-color: var(--accent-ink); color: var(--forest-950); }
.btn--primary:hover { background: #e1f78f; border-color: #e1f78f; }
.btn--danger, button.btn--danger { background: var(--rose); color: var(--danger-ink); }
.btn--mini, button.btn--mini { min-height: 36px; padding: 7px 10px; font-size: 11px; }
.toolbar { display: none; }
.toolbar .menu-trigger { display: none; }
.login-strip { margin-bottom: 20px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); box-shadow: none; }
.login-strip strong { font-size: 12px; }
.login-strip p { font-size: 11px; color: var(--muted); margin: 3px 0 0; }
.login-strip .btn { display: none; }
.frontdesk-shell { gap: 22px; margin-top: 24px; }
.frontdesk-command { display: grid; grid-template-columns: 1fr auto; padding: 0; gap: 18px; background: none; border: 0; border-radius: 0; box-shadow: none; }
.frontdesk-command > div:first-child .label { display: none; }
.frontdesk-command h2 { font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.frontdesk-command p { font-size: 12px; line-height: 1.5; }
.frontdesk-command-actions { grid-row: 1; grid-column: 2; align-self: center; }
.frontdesk-command-actions [data-page-shortcut="schedule"], .frontdesk-command-actions [data-page-shortcut="messages"] { display: none; }
.frontdesk-command-actions .btn--primary { background: var(--paper); color: var(--ink); border-color: var(--line); }
.frontdesk-stats { grid-column: 1 / -1; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat.stat--compact { padding: 14px 20px; min-height: 100px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.stat.stat--compact:first-child { padding-left: 0; }
.stat.stat--compact:last-child { border-right: 0; }
.stat.stat--compact span { color: var(--muted); font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.stat.stat--compact strong { font-size: 29px; line-height: 1.4; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.stat.stat--compact small { font-size: 11px; color: var(--muted); }

.stat.stat--compact:nth-child(2) strong { color: var(--accent-ink); }
.frontdesk-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: stretch; }
.frontdesk-grid > .schedule-board { grid-column: 1; grid-row: 1; }
.today-rail { grid-column: 2; grid-row: 1; position: static; }
.inspector-panel { grid-column: 1 / -1; position: static; }
.inspector-panel summary { cursor: pointer; padding: 16px 20px; font-weight: 600; font-size: 13px; }
.inspector-panel summary span { margin-left: 12px; font-size: 12px; font-weight: 400; color: var(--muted); }
.inspector-panel[open] summary { border-bottom: 1px solid var(--line); }
.frontdesk-card, .card, .queue-console { background: var(--paper); border-color: var(--line); box-shadow: none; border-radius: 12px; }
.frontdesk-card-head { padding: 17px 20px; background: transparent; align-items: center; }
.frontdesk-card-head .label { display: none; }
.frontdesk-card-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.priority-list { padding: 0 16px; gap: 0; }
.priority-item { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 14px 0; background: transparent; box-shadow: none; gap: 8px; }
.priority-item:last-child { border-bottom: 0; }
.priority-item:hover { background: var(--hover); }
.priority-item.is-selected { outline: none; box-shadow: none; }
.priority-item.is-selected strong { color: var(--accent-ink); }
.priority-item strong { font-size: 12px; font-weight: 600; }
.priority-item span { font-size: 11px; line-height: 1.5; }
.status { background: var(--mint); color: var(--good, #157347); border-color: transparent; font-size: 10px; font-weight: 550; border-radius: 5px; }
.status.review { background: var(--amber); color: var(--warning-ink); border-color: transparent; }
.status.hold, .status.rejected { background: var(--rose); color: var(--danger-ink); border-color: transparent; }
.schedule-scroll { padding: 12px; }
.schedule-cell { background: transparent; border-color: var(--line); }
.schedule-cell.header { background: var(--surface-2); color: var(--muted); font-weight: 500; }
.schedule-slot { background: #ecf7df; color: var(--ink); border-color: rgba(7, 95, 66, 0.16); box-shadow: none; }
.schedule-slot small, .schedule-slot span { color: var(--ink-2); }
.schedule-slot.empty { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
.queue-console-head { grid-template-columns: minmax(0,1fr) auto; padding: 18px 20px; background: transparent; border-bottom: 1px solid var(--line); }
.queue-console-icon, .queue-console-title .label { display: none; }
.queue-console h3 { font-size: 14px; margin: 0; }
.queue-console p { font-size: 12px; color: var(--muted); }
.queue-metrics { padding: 12px 20px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.queue-metric { background: transparent; border: 0; border-radius: 0; border-right: 1px solid var(--line); }
.queue-metric:last-child { border-right: 0; }
.queue-metric strong { font-size: 21px; color: var(--ink); }
.queue-board { padding: 16px; gap: 12px; }
.queue-lane { background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; }
.queue-lane-head, .queue-card, .queue-player-card { background: var(--paper); border-color: var(--line); box-shadow: none; }
.business-desk-band { display: block; border-top: 1px solid var(--line); }
.frontdesk-support { border-bottom: 1px solid var(--line); }
.frontdesk-support > summary { padding: 17px 0; cursor: pointer; font-weight: 500; }
.frontdesk-support .frontdesk-card-head { padding: 8px 0 16px; }
.frontdesk-support .frontdesk-card-head h3 { font-size: 12px; color: var(--muted); font-weight: 400; }
.frontdesk-support .pipeline-grid, .frontdesk-support .ops-ledger-list, .frontdesk-support .venue-health-list { padding: 0 0 20px; }
.pipeline-column, .inspector-row, .ledger-row, .health-row { background: transparent; border-color: var(--line); }
.label { color: var(--muted); font-weight: 500; }
input, select, textarea, .access-form input, .menu-trigger { background: var(--recess); color: var(--ink); border-color: var(--line); border-radius: 7px; }
input::placeholder, textarea::placeholder { color: var(--faint); }
.page-head { margin-bottom: 16px; }
.page-head h2 { font-size: 18px; }
.page-head p { font-size: 12px; color: var(--muted); }
table { font-size: 12px; }
th { font-size: 10px; letter-spacing: .04em; color: var(--muted); background: transparent; font-weight: 500; text-transform: uppercase; }
td { padding-top: 16px; padding-bottom: 16px; border-color: var(--line); }
tbody tr:hover { background: var(--hover); }
.ops-card, .ops-item, .cal-toolbar, .calendar-toolbar, .calendar-cell { background: var(--paper); color: var(--ink); border-color: var(--line); }
.card.stat strong, .ops-grid .stat strong { color: var(--ink); }
.ops-grid { gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ops-grid > .stat { border: 0; border-radius: 0; background: none; padding: 16px; box-shadow: none; }
.ops-grid > .stat span { color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 12px; }
.ops-grid > .stat strong { font-size: 26px; }
.ops-board > *, .ops-grid > *, .owner-edit-grid > * { min-width: 0; }
.modal { background: var(--paper); color: var(--ink); border-color: var(--line); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.14); }
.modal-backdrop { background: rgba(6, 31, 22, 0.28); }
.access-screen { background: var(--surface-2); }
.access-panel { border: 1px solid var(--line); box-shadow: none; border-radius: 18px; }
.access-copy { background: var(--surface-2); color: var(--ink); }
.access-copy h2 { font-size: clamp(28px, 3vw, 42px); line-height: 1.15; }
.access-card { background: var(--paper); }
.access-card h2 { font-size: 24px; }
.access-note span { color: var(--muted); }
/* The sign-in panel stretches to the form's height, which left ~300px of empty dark
   green between the copy and the chips. The court render fills it: `lighten` keeps the
   panel colour wherever the render's near-black backdrop (21,23,20) is darker than the
   panel (25,33,21), so there is no rectangle seam. Hidden below 820px, where the panel
   stacks above the form and the form must stay in the first viewport. */
.access-art { flex: 1 1 auto; display: grid; place-items: center; min-height: 0; margin: 12px 0; }
/* Capped so the panel never grows past the sign-in card beside it (it did at 300px). */
.access-art img { width: 100%; max-width: 480px; height: auto; max-height: 240px; object-fit: contain; }
@media (max-width: 820px) { .access-art { display: none; } }
.auth-mode-note { color: var(--muted); }
.toast { background: var(--soft); color: var(--ink); border: 1px solid var(--line); }
@media (max-width: 1180px) {
  .shell { grid-template-columns: 196px minmax(0,1fr); }
  .main { padding: 24px; }
  .frontdesk-grid { grid-template-columns: minmax(0,1fr); }
  .today-rail { grid-column: 1; grid-row: 2; }
  .inspector-panel { grid-column: 1; }
  .priority-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 20px; }
  .business-desk-band { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 820px) {
  .shell, body.nav-collapsed .shell { display: block; }
  .sidebar { display: none; }
  .main { padding: 20px 16px 40px; }
  .topbar { flex-direction: column; align-items: stretch; gap: 16px; padding-bottom: 18px; }
  .topbar h1 { font-size: 25px; }
  .actions { display: flex; flex-wrap: nowrap; }
  .actions .btn { padding: 8px 14px; font-size: 12px; }
  .actions > .btn--primary { flex: 1; }
  .actions > a { display: none; }
  .toolbar { display: flex; justify-content: space-between; position: relative; margin: 16px 0; padding: 0; border: 0; background: none; }
  .toolbar .menu-trigger { display: flex; min-height: 44px; padding: 10px 14px; }
  .frontdesk-command { grid-template-columns: minmax(0,1fr); }
  .frontdesk-command-actions { grid-row: auto; grid-column: 1; justify-content: flex-start; }
  .frontdesk-stats { grid-row: 2; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; }
  .stat.stat--compact { padding: 14px 16px; min-height: 100px; }
  .stat.stat--compact:nth-child(odd) { padding-left: 0; }
  .stat.stat--compact:nth-child(even) { border-right: 0; }
  .stat.stat--compact:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .stat.stat--compact strong { font-size: 27px; }
  .priority-list { grid-template-columns: minmax(0,1fr); }
  .frontdesk-card-head { padding: 16px; }
  .inspector-panel summary span { display: block; margin: 4px 0 0; }
  .btn--mini, button.btn--mini { min-height: 44px; }
  .queue-metrics { padding: 12px; }
  .access-panel { border: 0; border-radius: 0; }
  .ops-board { grid-template-columns: minmax(0, 1fr); }
  .ops-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-row, .thread-row, .followup-row, .slot-row { grid-template-columns: minmax(0, 1fr); }
  .followup-actions { justify-content: flex-start; }
  .ops-board .panel-head { flex-wrap: wrap; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .btn:active { transform: none; }
}

.schedule-block { border: 1px solid var(--line); border-radius: 7px; padding: 12px; }
.menu-panel { overscroll-behavior: contain; }
@media (max-width: 700px) {
  .menu-item { min-height: 44px; }
}
.schedule-block.empty { border: 1px dashed var(--line); background: var(--surface-2); }
.priority-item { text-align: left; }
.queue-lane header { background: transparent; border-color: var(--line); }
.loading-overlay { background: var(--surface-2)e0; }
.calendar-lane { background: repeating-linear-gradient(to bottom, var(--paper) 0, var(--paper) 27px, var(--line) 27px, var(--line) 28px); }
.calendar-closure { background: repeating-linear-gradient(135deg, #efe9dc 0, #efe9dc 6px, #f7f3ea 6px, #f7f3ea 12px); }
.queue-action-btn.primary { color: var(--forest-950); }
.queue-action-btn:disabled, .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.ops-page > .page-head { align-items: center; }
.ops-page > .page-head > .btn { width: auto; justify-self: end; }
.topbar h1 { letter-spacing: 0; }


.workspace-source { display: inline-block; margin-bottom: 8px; font-size: 10px; padding: 3px 7px; border-radius: 4px; background: var(--amber); color: var(--warning-ink); }
.workspace-source[hidden] { display: none; }

@media (max-width: 820px) { .btn, button.btn { min-height: 44px; } }

/* Occasional workspace actions stay available without competing with the task. */
.workspace-utilities { position: relative; }
.workspace-utilities > summary { display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; }
.workspace-utilities > summary::-webkit-details-marker { display: none; }
.workspace-utilities > summary::after { content: ''; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1px 1px 0; transform: rotate(45deg) translateY(-2px); }
.workspace-utilities-list { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; width: 180px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); }
.workspace-utilities-list .btn { display: flex; width: 100%; min-height: 44px; justify-content: flex-start; border: 0; background: transparent; font-size: 13px; }
.workspace-utilities-list .btn:hover { background: var(--soft); }
.workspace-utilities-list > :last-child { border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; }
:where(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--forest-700); outline-offset: 3px; }
.priority-item:focus-visible { outline: 2px solid var(--forest-700); outline-offset: 2px; }

/* The day is the working surface; publishing opens only when requested. */
.schedule-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 20px; }
.schedule-workspace.is-editing { grid-template-columns: minmax(0, 1fr) 320px; }
.schedule-workspace > .schedule-board { grid-column: 1; grid-row: 1; min-width: 0; padding: 0; }
.schedule-workspace .frontdesk-card-head { padding: 18px 20px 12px; }
.schedule-context { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; }
.schedule-workspace .calendar-toolbar { padding: 0 20px 16px; }
.schedule-workspace .schedule-scroll { max-height: 640px; overflow: auto; overscroll-behavior: contain; padding: 0 20px 16px; }
.schedule-workspace .schedule-grid.resource-calendar { min-width: max(312px, calc(48px + (var(--cal-cols, 2) * 132px))); }
.schedule-workspace .calendar-head { grid-template-columns: 48px repeat(var(--cal-cols, 2), minmax(132px, 1fr)); }
.schedule-workspace .calendar-body { grid-template-columns: 48px 1fr; }
.calendar-court-title { display: flex; align-items: center; gap: 8px; }
.calendar-court-title img { flex: 0 0 60px; width: 60px; height: 40px; object-fit: contain; }
.calendar-court-title > div { min-width: 0; }
.calendar-court-title strong { overflow-wrap: anywhere; }
.schedule-workspace .calendar-event { align-content: start; gap: 2px; padding: 6px 8px; }
.schedule-workspace .calendar-event strong { font-size: 13px; line-height: 17px; }
.schedule-workspace .calendar-event span { line-height: 15px; }
.schedule-workspace .calendar-event.is-compact { padding: 4px 6px; gap: 0; }
.schedule-workspace .calendar-event.is-compact strong { line-height: 16px; }
.schedule-workspace .calendar-event.is-compact span { line-height: 14px; }
.schedule-workspace .calendar-event.is-short { padding: 2px 6px; }
.schedule-workspace .calendar-event.is-short strong { line-height: 16px; }
.schedule-workspace .calendar-event.is-short > span { display: none; }
.calendar-popover { width: min(280px, calc(100% - 16px)); background: var(--paper); color: var(--ink); border-color: var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); }
.calendar-popover-head { font-size: 14px; }
.calendar-field { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; }
#opsCalendarPopover .calendar-field input { min-height: 44px; font-size: 14px; }
.slot-editor { grid-column: 2; grid-row: 1; min-width: 0; border-top: 1px solid var(--line); padding-top: 16px; }
.slot-editor[hidden] { display: none; }
.slot-editor-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.slot-editor-head h3 { font-size: 17px; margin: 0; }
.slot-editor .owner-edit-grid { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.slot-editor .owner-edit-grid label { font-size: 12px; gap: 6px; color: var(--muted); }
.slot-editor #opsSlotFields input, .slot-editor #opsSlotFields select { width: 100%; min-width: 0; min-height: 44px; font-size: 14px; font-weight: 450; }
.slot-editor .field-note { font-size: 11px; font-weight: 400; }
.slot-editor-actions { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.slot-editor-actions .btn { min-height: 44px; }
.schedule-feedback { font-size: 13px; color: var(--muted); margin: 16px 0 0; }
.schedule-feedback[hidden] { display: none; }
.schedule-feedback.is-error { color: var(--danger-ink); }
.schedule-feedback.is-success { color: var(--success); }
.schedule-slot-history { margin-top: 24px; border-top: 1px solid var(--line); }
.schedule-slot-history > summary { cursor: pointer; padding: 16px 0; font-size: 13px; font-weight: 500; }
.schedule-slot-history .slot-row { background: transparent; }
@media (max-width: 1180px) {
  .schedule-workspace.is-editing { grid-template-columns: minmax(0, 1fr); }
  .slot-editor { grid-column: 1; grid-row: 1; }
  .schedule-workspace.is-editing > .schedule-board { grid-row: 2; }
  .calendar-court-title { gap: 4px; }
  .calendar-court-title img { width: 42px; height: 28px; flex-basis: 42px; }
}
@media (max-width: 600px) {
  .schedule-workspace { margin-top: 12px; gap: 20px; }
  .schedule-workspace .frontdesk-card-head { padding: 14px 10px; gap: 8px; flex-wrap: wrap; }
  .schedule-workspace .calendar-toolbar { padding: 0 10px 12px; }
  .schedule-workspace .schedule-scroll { padding: 0 6px 12px; max-height: 560px; }
  .schedule-workspace .calendar-head-cell { padding: 8px 6px; }
  .schedule-workspace .calendar-event { padding: 6px; font-size: 12px; }
  .schedule-workspace .calendar-event strong { font-size: 12px; }
  .calendar-court-title img { display: none; }
  .schedule-context { font-size: 11px; gap: 8px; }
  #opsCalendarPopover .calendar-field input { font-size: 16px; }
  .slot-editor #opsSlotFields input, .slot-editor #opsSlotFields select { font-size: 16px; }
}

/* Court objects are the navigation; the adjacent agenda carries the facts. */
.court-workspace-toolbar { display: flex; justify-content: space-between; gap: 16px; margin: 20px 0; }
.court-workspace-toolbar p { margin: 0; font-size: 13px; color: var(--muted); }
.court-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); gap: 28px; align-items: start; }
.court-board { min-width: 0; }
.court-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.court-tile { display: flex; flex-direction: column; min-width: 0; padding: 18px 0 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); cursor: pointer; font: inherit; text-align: left; -webkit-tap-highlight-color: transparent; }
.court-tile[aria-pressed="true"] { border-color: var(--accent-ink); }
.court-tile-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 18px; }
.court-tile-heading strong { font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.court-state { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.court-state::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--lime); }
.court-art { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; margin: 10px 0 0; }
.court-tile-caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.court-selection-mark { color: var(--ink); }
.court-tile[aria-pressed="true"] .court-selection-mark { color: var(--accent-ink); }
.court-tile.is-closed .court-state::before { background: #9a6a00; }
.court-tile.is-closed .court-art { filter: saturate(.15); opacity: .62; }
.court-art-caption { color: var(--muted); margin: 14px 0 0; font-size: 11px; }
.court-detail { min-width: 0; padding: 0 0 0 28px; border-left: 1px solid var(--line); }
.court-detail[hidden] { display: none; }
.court-detail-head .label { font-size: 10px; color: var(--muted); }
.court-detail-head h2 { font-size: 23px; line-height: 1.3; margin: 7px 0; overflow-wrap: anywhere; }
.court-detail-head p { color: var(--muted); font-size: 12px; margin: 0; }
.court-agenda-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 30px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.court-agenda-head h3 { margin: 0; font-size: 13px; font-weight: 600; }
.court-agenda-head > span { color: var(--muted); font-size: 10px; }
.court-agenda { list-style: none; padding: 0; margin: 0; }
.court-agenda-entry { display: grid; gap: 7px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.court-agenda-time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.court-agenda-entry strong { font-size: 14px; font-weight: 550; overflow-wrap: anywhere; }
.court-agenda-note { color: var(--muted); font-size: 11px; }
.court-agenda-entry.is-blocked .court-agenda-note { color: #9a6a00; }
.court-agenda-empty { display: grid; gap: 10px; padding: 28px 0; }
.court-agenda-empty strong { font-size: 14px; }
.court-agenda-empty span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.court-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.court-detail-actions .btn { min-height: 44px; flex: 1; white-space: nowrap; }
.court-detail-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.court-detail-footer > span { color: var(--muted); font-size: 11px; line-height: 1.5; max-width: 20ch; }
.court-detail-footer .btn { min-height: 44px; }
.court-notice { color: #9a6a00; font-size: 12px; line-height: 1.5; margin: 18px 0 0; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .court-art { transition: transform 180ms cubic-bezier(.25, 1, .5, 1); }
  .court-tile:hover .court-art { transform: translateY(-3px); }
  .court-tile:active .court-art { transform: translateY(0); transition-duration: 80ms; }
}
@media (max-width: 1150px) {
  .court-workspace { grid-template-columns: minmax(0, 1fr); }
  .court-detail { border-left: 0; border-top: 1px solid var(--line); padding: 24px 0 0; }
  .court-agenda { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  .court-detail-actions { max-width: 380px; }
  .court-detail-footer { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .court-workspace { gap: 22px; }
  .court-grid { gap: 10px; }
  .court-tile { padding-top: 14px; border-radius: 10px; }
  .court-tile-heading { flex-direction: column; align-items: flex-start; gap: 7px; padding: 0 12px; }
  .court-tile-heading strong { font-size: 16px; }
  .court-art { margin-top: 8px; }
  .court-tile-caption { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px 13px; }
  .court-art-caption { font-size: 10px; }
  .court-agenda-head { margin-top: 24px; }
  .court-agenda { display: block; }
  .court-detail-head h2 { font-size: 21px; }
  .court-detail-footer { justify-content: space-between; }
}

/* One contextual booking surface, shared by calendar, queue and follow-ups. */
.booking-dialog {
  color: var(--ink); background: var(--paper); border: 1px solid var(--line);
  border-radius: 16px 0 0 16px; padding: 0; margin: 0 0 0 auto;
  width: 480px; max-width: 100%; height: 100dvh; max-height: 100dvh;
  overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box;
  animation: none; transition: none;
}
.booking-dialog::backdrop { background: rgba(6, 31, 22, 0.28); }
body:has(.booking-dialog[open]) { overflow: hidden; }
.booking-dialog-head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 24px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 1; background: var(--paper);
}
.booking-dialog-head h2 { font-size: 14px; font-weight: 600; margin: 0; }
.booking-dialog .btn { min-height: 44px; font-size: 13px; white-space: normal; }
.booking-identity { display: flex; gap: 16px; align-items: center; padding: 24px; }
.booking-identity img { flex: 0 0 90px; object-fit: contain; }
.booking-identity > div { min-width: 0; }
.booking-identity span, .booking-identity p { color: var(--muted); font-size: 13px; }
.booking-identity h3 { font-size: 23px; line-height: 1.3; margin: 2px 0 4px; overflow-wrap: anywhere; }
.booking-identity p { margin: 0; }
.booking-facts { margin: 0; padding: 0 24px; }
.booking-facts > div { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.booking-facts dt { font-size: 12px; color: var(--muted); font-weight: 400; }
.booking-facts dd { font-size: 14px; margin: 0; overflow-wrap: anywhere; }
.booking-facts small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.booking-facts .booking-paid { color: var(--green); }
.booking-controls { border: 0; margin: 0; padding: 8px 24px 0; min-width: 0; }
.booking-dialog .inspector-actions { padding: 0 0 20px; border: 0; gap: 8px; }
.booking-dialog .inspector-actions .owner-action-note { grid-column: 1 / -1; color: var(--muted); }
.booking-dialog details { border-top: 1px solid var(--line); }
.booking-dialog summary { min-height: 48px; padding: 14px 0; cursor: pointer; font-size: 13px; font-weight: 500; }
.booking-dialog .booking-secondary { padding: 0; }
.booking-dialog .booking-secondary > div { border-top: 0; padding: 6px 0 12px; }
.booking-dialog .inspector-note { padding: 0 0 18px; gap: 8px; }
.booking-dialog .inspector-note textarea { width: 100%; min-height: 90px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 12px; font: inherit; resize: vertical; }
.booking-dialog .inspector-note small { font-size: 12px; font-weight: 400; color: var(--muted); line-height: 1.5; }
.booking-dialog .calendar-move-list { margin-bottom: 16px; }
.booking-dialog .calendar-popover-note { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 12px; }
.booking-feedback { margin: 16px 24px 0; padding: 10px 12px; font-size: 13px; background: var(--soft); border-radius: 8px; }
.booking-feedback[data-tone="error"] { color: var(--danger-ink); }
.booking-feedback[data-tone="success"] { color: var(--green); }
.booking-reference { margin: 0; padding: 16px 24px 24px; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .booking-dialog { width: 100%; border-radius: 0; border: 0; }
  .booking-dialog-head { padding: 12px 20px; }
  .booking-identity { padding: 20px; gap: 12px; }
  .booking-identity h3 { font-size: 22px; }
  .booking-facts { padding: 0 20px; }
  .booking-controls { padding: 8px 20px 0; }
  .booking-dialog .inspector-note textarea { font-size: 16px; }
  .booking-feedback { margin: 12px 20px 0; }
}
.booking-guest-button { appearance: none; background: none; border: 0; color: var(--ink); font: inherit; font-weight: 500; text-align: left; min-height: 44px; padding: 4px 0; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; cursor: pointer; }
.booking-guest-button:hover { color: var(--green); text-decoration-color: currentColor; }

/* Arrivals are a worklist. Counts filter the same rows instead of repeating lanes. */
.queue-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.queue-filter { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.queue-filter span { font-variant-numeric: tabular-nums; font-size: 11px; opacity: .8; }
.queue-filter:hover { color: var(--ink); background: var(--soft); }
.queue-filter[aria-pressed="true"] { color: var(--green); background: var(--lime-tint); }
.queue-filter:disabled { cursor: default; opacity: .6; }
.queue-arrivals { padding: 0 20px; min-width: 0; }
.arrival-columns, .arrival-row { display: grid; grid-template-columns: minmax(180px,1.35fr) minmax(145px,1fr) minmax(120px,.85fr) minmax(100px,.75fr) 134px; align-items: center; column-gap: 16px; }
.arrival-columns { padding: 12px 0 8px; font-size: 11px; color: var(--muted); }
.arrival-row { padding: 16px 0; min-height: 85px; border-top: 1px solid var(--line); font-size: 13px; }
.arrival-list > .arrival-row:first-child { border-top: 0; }
.arrival-row > div { min-width: 0; }
.arrival-row strong { font-weight: 500; font-size: 13px; overflow-wrap: anywhere; }
.arrival-row small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; line-height: 1.5; }
.arrival-guest { display: flex; align-items: center; gap: 12px; }
.arrival-guest > div { min-width: 0; }
.arrival-avatar { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--soft); color: var(--muted); font-size: 11px; font-weight: 500; }
.arrival-guest .booking-guest-button { min-height: 28px; padding: 0; font-size: 14px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; line-height: 1.4; }
.arrival-guest > div > strong { font-size: 14px; font-weight: 600; }
.arrival-guest .booking-guest-button:hover { text-decoration: underline; }
.arrival-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.arrival-status[data-state="playing"] { color: var(--green); }
.arrival-status[data-state="playing"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.arrival-status[data-state="done"] { color: var(--muted); }
.arrival-payment { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.arrival-payment[data-payment="paid"] { color: var(--green); }
.arrival-payment[data-payment="unpaid"] { color: var(--warning-ink); }
.arrival-actions { justify-self: end; }
.arrival-actions .btn { min-height: 44px; padding: 8px 12px; font-size: 12px; line-height: 1.4; font-weight: 500; white-space: nowrap; transform: none; }
.arrival-empty { display: flex; flex-direction: column; gap: 4px; padding: 28px 0; font-size: 13px; }
.arrival-empty strong { font-weight: 500; }
.arrival-empty span { color: var(--muted); font-size: 12px; }
@media (max-width: 1100px) {
  .arrival-columns { display: none; }
  .arrival-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 134px; grid-template-areas: "guest context action" "state payment action"; row-gap: 12px; padding: 18px 0; }
  .arrival-guest { grid-area: guest; }
  .arrival-context { grid-area: context; }
  .arrival-state { grid-area: state; }
  .arrival-payment { grid-area: payment; }
  .arrival-actions { grid-area: action; }
  .arrival-payment-label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; color: var(--muted); }
}
@media (max-width: 600px) {
  .queue-console-head { grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding: 16px; }
  .queue-console-head .btn { min-height: 44px; padding: 8px 10px; white-space: nowrap; }
  .queue-console-title p { margin-top: 4px; }
  .queue-filters { padding: 8px; gap: 0; }
  .queue-filter { flex: 1 0 30%; padding: 8px 6px; }
  .queue-arrivals { padding: 0 16px; }
  .arrival-row { grid-template-columns: minmax(0,1fr) 126px; grid-template-areas: "guest action" "context context" "state payment"; gap: 10px 12px; }
  .arrival-guest { gap: 8px; }
  .arrival-avatar { flex-basis: 28px; width: 28px; height: 28px; font-size: 10px; }
  .arrival-guest .booking-guest-button { min-height: 44px; }
  .arrival-guest small { margin-top: 0; }
  .arrival-context { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; }
  .arrival-context small { margin: 0; }
  .arrival-payment { text-align: right; }
  .arrival-payment-label { display: block; font-size: 11px; margin-bottom: 2px; }
}

/* ─────────────────────────────────────────────────────────────────────────────────────────
   DEPTH SYSTEM (Oct 2026)
   One container vocabulary on the elevation ladder in :root:
     canvas (page) < surface-1 (panel, elev-1) < surface-2 (raised tile/row) < surface-3 (overlay, elev-3)
     recess (inputs, wells) sits BELOW its panel.
   Rules: a nested container is either a surface-2 tile (a distinct object) or transparent
   with hairline dividers (a list row) — never a bordered box on its parent's own colour.
   Radii: 8 controls · 12 inner · 16 panels · pill. One primary button per page.
   ───────────────────────────────────────────────────────────────────────────────────────── */

/* Shell */
.sidebar { background: #ffffff; box-shadow: inset -1px 0 0 var(--hairline); }
.main { background: var(--canvas); }
.topbar { border-bottom: 0; padding-bottom: 20px; }
.nav a { border-radius: var(--r-sm); color: var(--muted); }
.nav a.active { background: var(--surface-2); color: var(--ink); box-shadow: var(--highlight), 0 1px 2px rgba(0, 0, 0, 0.05); }
.nav a:hover { background: var(--hover); }
.nav-count { font-variant-numeric: tabular-nums; }
.nav-count:empty, .nav-count[data-empty="true"] { display: none; }
.nav-tag { margin-left: auto; padding: 1px 6px; border-radius: var(--r-pill); font-size: 9px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--warning-ink); background: #fbf3dd; box-shadow: inset 0 0 0 1px rgba(154, 106, 0, 0.18); }

/* Panels — every top-level container */
.card, .frontdesk-card, .queue-console, .ops-card, .inspector-panel, .court-detail-panel {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-panel);
  box-shadow: var(--elev-1);
}
/* Nested containers become raised tiles, not boxes on the same colour */
.card .card, .frontdesk-card .card, .ops-card .card, .card .ops-item, .card .compact-card, .card .objective-card,
.card .wizard-summary-card, .card .phone-ad-card, .queue-lane, .ops-item {
  background: var(--surface-2);
  border: 0;
  border-radius: var(--r-inner);
  box-shadow: var(--highlight);
}
.queue-lane header, .queue-lane-head { background: transparent; }
.queue-card, .queue-player-card { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-sm); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }

/* Stats: ONE tile pattern everywhere (front desk, bookings/payments strip, ads KPIs) */
.frontdesk-stats, .ops-grid, .grid.kpis { gap: 12px; border: 0; }
.stat.stat--compact, .ops-grid > .stat, .grid.kpis > .card.stat {
  padding: 16px 18px; min-height: 0;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-inner);
  box-shadow: var(--elev-1);
}
.stat.stat--compact:first-child, .stat.stat--compact:nth-child(odd) { padding-left: 18px; }
.stat.stat--compact:last-child, .stat.stat--compact:nth-child(even), .stat.stat--compact:nth-child(-n+2) { border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.stat.stat--compact strong, .ops-grid > .stat strong, .grid.kpis > .card.stat strong { font-size: 26px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.grid.kpis > .card.stat .label, .ops-grid > .stat span:first-child { color: var(--muted); font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; }

/* Lists inside panels: transparent rows with hairline dividers; hover raises the row */
.priority-item, .inspector-row, .ledger-row, .health-row, .thread-row, .followup-row, .slot-row, .court-agenda-entry { background: transparent; border-color: var(--hairline); }
.priority-item:hover, .thread-row:hover, .followup-row:hover { background: var(--hover); border-radius: var(--r-sm); }

/* Tables: recessed header, hairline rows, raised hover */
th { background: transparent; box-shadow: inset 0 -1px 0 var(--hairline); color: var(--muted); }
td { border-color: var(--hairline); }
tbody tr { transition: background 120ms ease; }
tbody tr:hover { background: var(--hover); }

/* Controls */
.btn, button.btn { background: var(--surface-2); border: 1px solid var(--hairline-strong); border-radius: var(--r-sm); box-shadow: var(--highlight), 0 1px 2px rgba(0, 0, 0, 0.05); }
.btn:hover { background: var(--surface-2); border-color: var(--line-2); }
.btn--primary, button.btn--primary { background: var(--lime); border-color: transparent; color: var(--forest-950); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 16px -8px rgba(168, 220, 60, 0.45); }
.btn--primary:hover { background: #e1f78f; border-color: transparent; }
.btn--danger, button.btn--danger { background: #fdecec; border-color: rgba(180, 35, 24, 0.2); color: var(--danger-ink); }
input, select, textarea, .access-form input, .menu-trigger {
  background: var(--recess); border: 1px solid var(--hairline-strong); border-radius: var(--r-sm);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}
input:focus, select:focus, textarea:focus { border-color: rgba(7, 95, 66, 0.45); outline: none; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(7, 95, 66, 0.14); }

/* Overlays */
.modal, .workspace-utilities-list, .menu-panel, .calendar-popover, dialog { background: var(--surface-3); border: 0; border-radius: var(--r-panel); box-shadow: var(--elev-3); }
.modal-backdrop, dialog::backdrop { background: rgba(6, 31, 22, 0.28); backdrop-filter: blur(2px); }

/* Page heads: a lone action is a normal right-aligned button, never a full-width bar */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.page-head > .btn, .page-head > button.btn { width: auto; margin-left: auto; flex: 0 0 auto; }
/* "New slot" belongs to the pages that publish slots; elsewhere each page offers its own primary */
body:not([data-active-page="overview"]):not([data-active-page="schedule"]):not([data-active-page="courts"]) #opsNewSlotButton { display: none; }

/* Honest preview notice: compact, informative, not a shouting bar */
.preview-banner { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px 14px; border-radius: var(--r-inner); background: #fdf7e7; box-shadow: inset 0 0 0 1px rgba(154, 106, 0, 0.16); color: #7a5600; font-size: 12px; }
.preview-banner::before { content: ''; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--warning-ink); }

/* Schedule & courts keep their own surfaces but join the ladder */
.schedule-slot { box-shadow: var(--highlight), 0 1px 2px rgba(0, 0, 0, 0.05); border-radius: var(--r-sm); }
.schedule-slot.empty, .schedule-block.empty { background: transparent; border: 1px dashed var(--hairline-strong); box-shadow: none; }
.court-tile { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-panel); box-shadow: var(--elev-1); transition: transform 160ms ease, box-shadow 160ms ease; }
.court-tile:hover { transform: translateY(-2px); box-shadow: var(--elev-2); }
.court-tile[aria-pressed="true"] { border-color: rgba(7, 95, 66, 0.45); box-shadow: var(--elev-2), 0 0 0 1px rgba(7, 95, 66, 0.18); }
.court-detail { border-left: 0; padding: 20px; background: var(--surface-1); border-radius: var(--r-panel); box-shadow: var(--elev-1); border: 1px solid var(--hairline); }
@media (prefers-reduced-motion: reduce) { .court-tile:hover { transform: none; } }


/* Nested objects that were bordered boxes on their panel's own colour (census: 16). They are
   distinct objects (a venue field summary, a thread message, a funnel step), so they RAISE. */
.card .ops-row, .card .funnel-step { background: var(--surface-2); border: 0; border-radius: var(--r-inner); box-shadow: var(--highlight); }
.schedule-block, .schedule-block.empty { border-radius: var(--r-sm); }
/* Deliberate exception: the ad preview is a phone mockup, so its device radius and bezel stay. */

/* One panel header: title (+ optional meta on the right). The uppercase eyebrow restated the
   title on 13 panels ("THREADS / Recent guest conversations") — noise, and a generated-UI tell.
   Hidden only where a heading follows it, so a stand-alone label keeps its job. */
.panel-head > div > .label:has(+ h2, + h3) { display: none; }
.panel-head h3, .frontdesk-card-head h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
/* List rows read left to right like every other list (thread rows are buttons, which centre). */
#opsThreadList button, #opsThreadList .ops-row, .ops-list > button { text-align: left; justify-content: space-between; }

/* Booking row: one next step + a "More" menu (see renderOwnerBookingRowMenu). */
.owner-action-row--compact { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: nowrap; }
.row-menu { position: relative; }
.row-menu > summary { list-style: none; cursor: pointer; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu[open] > summary { background: var(--surface-2); }
.row-menu-list { position: fixed; z-index: 60; min-width: 220px; max-width: min(300px, calc(100vw - 16px)); padding: 6px; background: var(--surface-3); border-radius: var(--r-inner); box-shadow: var(--elev-3); display: grid; gap: 2px; }
.row-menu-list hr { border: 0; height: 1px; background: var(--hairline); margin: 4px 2px; }
.row-menu-item { display: grid; gap: 2px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.row-menu-item:hover:not(:disabled) { background: var(--hover); }
.row-menu-item.is-danger { color: var(--danger-ink); }
.row-menu-item:disabled { color: var(--muted); cursor: not-allowed; }
.row-menu-item small { font-size: 11px; color: var(--muted); line-height: 1.35; }
@media (max-width: 820px) { .row-menu-item { min-height: 44px; } }

/* Freshness control: replaces the bare "Refresh" button. It says how current the data is
   and IS the refresh action (see renderOwnerFreshness). */
.freshness { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline), var(--highlight); color: var(--muted); font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; transition: background-color 160ms ease, color 160ms ease; }
.freshness:hover { background: var(--surface-3); color: var(--ink); }
.freshness:focus-visible { outline: 2px solid var(--forest-700); outline-offset: 2px; }
.freshness-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.freshness-icon { width: 14px; height: 14px; opacity: 0.7; flex: none; }
.freshness[data-state="fresh"] .freshness-dot { background: var(--success); box-shadow: 0 0 0 3px rgba(31, 157, 85, 0.16); }
.freshness[data-state="aging"] .freshness-dot { background: var(--warn); }
.freshness[data-state="failed"] { color: var(--danger-ink); box-shadow: inset 0 0 0 1px rgba(180, 35, 24, 0.3), var(--highlight); }
.freshness[data-state="failed"] .freshness-dot { background: var(--danger); }
.freshness[data-state="refreshing"] { cursor: progress; }
.freshness[data-state="refreshing"] .freshness-icon { animation: freshness-spin 0.9s linear infinite; }
@keyframes freshness-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .freshness[data-state="refreshing"] .freshness-icon { animation: none; } }
@media (max-width: 820px) { .freshness { height: 44px; } #ownerFreshnessLabel { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; } }
.freshness[hidden] { display: none; }
.row-menu-list:not([data-placed]) { visibility: hidden; }

/* ─────────────────────────────────────────────────────────────────────────────────────────
   LANDING PARITY (Oct 2026)
   The owner dashboard speaks the homepage's language (landing/assets/home.css): Cal Sans
   headings over Inter, pill controls, ONE lime gradient action, white panels with a hairline
   and soft shadow on a near-white canvas, grey tiles inside, and Dink in empty states. It is
   still a dense working tool: no hero sections, no marketing copy inside workflows.
   ───────────────────────────────────────────────────────────────────────────────────────── */
body, button, input, select, textarea { font-family: var(--font-body); }
body { color: var(--ink); -webkit-font-smoothing: antialiased; }
.topbar h1, .page-head h2, .court-detail-head h2, .booking-identity h3, .access-copy h2, .access-card h2, .slot-editor-head h3 {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em;
}
.topbar h1 { font-size: 32px; line-height: 38px; }
.page-head h2 { font-size: 22px; line-height: 28px; }
.panel-head h3, .frontdesk-card-head h3, .queue-console h3 { font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: -0.005em; }
.sub, .page-head p { color: var(--muted); }
.stat.stat--compact strong, .ops-grid > .stat strong, .grid.kpis > .card.stat strong { font-family: var(--font-body); font-weight: 600; color: var(--ink); }
.stat.stat--compact:nth-child(2) strong { color: var(--accent-ink); }

/* Shell: a white sidebar like the homepage nav, active item in the lime tint */
.sidebar { background: #ffffff; box-shadow: inset -1px 0 0 var(--hairline); }
.nav-group { color: var(--faint); }
.nav a { color: var(--ink-2); font-weight: 500; }
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a.active { background: var(--lime-tint); color: var(--forest-950); box-shadow: inset 0 0 0 1px rgba(7, 95, 66, 0.12); }
.nav a.active .nav-icon { color: var(--forest-700); }
.nav-count { color: var(--faint); }
.nav-tag { color: #8a5a00; background: #fbf3dd; box-shadow: none; }

/* Controls: pills, as on the homepage */
.btn, button.btn {
  border-radius: var(--r-pill); background: #ffffff; border: 1px solid var(--line-2); color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); font-weight: 600; padding-left: 16px; padding-right: 16px;
}
.btn:hover { background: var(--surface-2); border-color: var(--line-2); }
.btn--primary, button.btn--primary {
  background: var(--cta); border: 0; color: var(--forest-950); box-shadow: var(--cta-glow);
}
.btn--primary:hover { background: var(--cta); filter: saturate(1.08) brightness(1.02); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(1px); }
.btn--danger, button.btn--danger { background: #fff; border-color: rgba(180, 35, 24, 0.24); color: var(--danger-ink); }
.btn--danger:hover { background: #fdecec; }
.btn--mini, button.btn--mini { padding-left: 12px; padding-right: 12px; }
input, select, textarea, .access-form input, .menu-trigger {
  background: #ffffff; border: 1px solid var(--line-2); border-radius: var(--r-inner); box-shadow: none; color: var(--ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--forest-700); box-shadow: 0 0 0 3px rgba(7, 95, 66, 0.12); }
:where(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--forest-700); outline-offset: 3px; }

/* Status chips: soft tints with readable ink */
.status { background: #e8f6ec; color: #157347; border: 0; border-radius: var(--r-pill); padding: 3px 9px; }
.status.review { background: #fbf3dd; color: #8a5a00; }
.status.hold, .status.rejected { background: #fdecec; color: var(--danger-ink); }

/* Tables and lists on white */
th { color: var(--faint); background: transparent; box-shadow: inset 0 -1px 0 var(--hairline); }
tbody tr:hover, .priority-item:hover, .thread-row:hover, .followup-row:hover { background: var(--hover); }

/* Overlays float like the homepage cards */
.modal, .workspace-utilities-list, .menu-panel, .calendar-popover, dialog, .row-menu-list { background: #ffffff; box-shadow: var(--elev-3); }
.booking-dialog { border: 0; box-shadow: var(--elev-3); }
.booking-dialog-head { background: #ffffff; }
.toast { background: var(--forest-950); color: #fff; border: 0; border-radius: var(--r-pill); box-shadow: var(--elev-2); }
.freshness { background: #ffffff; box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px rgba(0, 0, 0, 0.04); color: var(--muted); }
.freshness:hover { background: var(--surface-2); }
.workspace-source { background: #fbf3dd; color: #8a5a00; border-radius: var(--r-pill); padding: 3px 9px; }
.preview-banner { background: #fdf7e7; box-shadow: inset 0 0 0 1px rgba(154, 106, 0, 0.16); color: #7a5600; }

/* Schedule: lime-tinted booked slots, hatched closures in warm paper */
.schedule-slot { background: #ecf7df; color: var(--ink); border-color: rgba(7, 95, 66, 0.16); }
.schedule-slot small, .schedule-slot span { color: var(--ink-2); }
.schedule-cell.header { background: transparent; color: var(--faint); }

/* The court render has a near-black backdrop, so it sits in a deliberate dark frame
   (a "photo" of the court) instead of a black rectangle on a white card. */
.court-art { background: #151714; border-radius: var(--r-inner); width: calc(100% - 36px); margin: 12px 18px 0; }
.calendar-court-title img, .booking-identity img { background: #151714; border-radius: var(--r-sm); }
.court-tile { background: #ffffff; }
.court-tile[aria-pressed="true"] { border-color: var(--forest-700); box-shadow: var(--elev-2), 0 0 0 1px var(--forest-700); }
.court-state::before { background: var(--success); }
@media (max-width: 600px) { .court-art { width: calc(100% - 24px); margin: 8px 12px 0; } }

/* Empty states carry Dink, as in the app. The pose follows the context: "look" for
   filtered or searched lists, "wave" for nothing yet. */
.empty-state { display: grid; justify-items: center; gap: 6px; padding: 28px 20px; text-align: center; background: var(--surface-2); border: 0; border-radius: var(--r-inner); color: var(--muted); }
.empty-state::before { content: ""; width: 72px; height: 68px; background: url("/assets/dink/dink-wave.svg") center / contain no-repeat; margin-bottom: 4px; }
.empty-state strong { display: block; color: var(--ink); font-family: var(--font-display); font-weight: 400; font-size: 17px; letter-spacing: -0.005em; }
.pipeline-card:only-child:not([data-inspect-booking]) { color: var(--muted); }

/* Sign in: the homepage's welcome — Dink waving over a light panel */
.access-screen { background: var(--canvas); }
.access-panel { background: #ffffff; border: 1px solid var(--hairline); border-radius: 24px; box-shadow: var(--elev-2); overflow: hidden; }
.access-copy { background: var(--surface-2); color: var(--ink); }
.access-copy p { color: var(--muted); }
.access-card { background: #ffffff; }
.access-art img { max-height: 220px; mix-blend-mode: normal; }
.access-note span { color: var(--ink-2); background: #ffffff; border-color: var(--hairline); }
.access-form .btn--primary, .access-form button[type="submit"] { width: 100%; min-height: 52px; font-size: 16px; }
.loading-overlay { background: rgba(255, 255, 255, 0.9); }
/* One sign-in surface: the card is the panel's right half, not a second floating card
   (its own shadow + blur filled the grid gap with a smeared strip). */
.access-panel { gap: 0; }
.access-card { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 40px; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.access-copy { padding: 36px; }
@media (max-width: 820px) { .access-card { padding: 24px 20px 28px; } .access-copy { padding: 24px 20px 8px; } }
/* The front desk's two shortcuts are secondary; only "New slot" in the header is primary. */
.frontdesk-command-actions .btn--primary { background: #ffffff; border: 1px solid var(--line-2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); color: var(--ink); filter: none; }
/* Thread rows are list items inside the panel: grey tiles, like the message bubbles beside them. */
#opsThreadList button, #opsThreadList .ops-row { background: var(--surface-2); border: 0; border-radius: var(--r-inner); box-shadow: none; }
#opsThreadList button:hover { background: #ededea; }
.access-copy { border: 0; border-radius: 0; box-shadow: none; background-image: none; }
/* Field values are content, not labels: regular weight (they inherited the label's 600). */
input, select, textarea { font-weight: 400; font-size: 14px; }
/* Action feedback floats like the homepage toast instead of pushing the page down as a
   full-width bar (it also outlived the page it belonged to when you navigated quickly). */
#ownerMutationStatus { position: fixed; top: auto; right: auto; left: 50%; bottom: 24px; height: auto; min-height: 0; display: block; z-index: 80; transform: translateX(-50%); width: max-content; max-width: min(560px, calc(100vw - 32px)); margin: 0; padding: 12px 18px; border-radius: var(--r-pill); background: var(--forest-950); color: #fff; font-size: 14px; line-height: 20px; box-shadow: var(--elev-3); }
#ownerMutationStatus.toast--error { background: #fff; color: var(--danger-ink); box-shadow: var(--elev-3), inset 0 0 0 1px rgba(180, 35, 24, 0.25); }
#ownerMutationStatus[hidden] { display: none; }
@media (max-width: 820px) { #ownerMutationStatus { bottom: 16px; border-radius: 16px; } }

/* ─────────────────────────────────────────────────────────────────────────────────────────
   TODAY (front desk, Oct 2026): bar → chips → [courts board | arrivals rail]
   ───────────────────────────────────────────────────────────────────────────────────────── */
body[data-active-page="overview"] #opsNewSlotButton { display: none; }
.today { display: grid; gap: 16px; margin-top: 4px; }
.today-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px) auto; align-items: center; gap: 14px; }
.today-title h2 { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 28px; margin: 0; letter-spacing: -0.01em; }
.today-title p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.today-search { position: relative; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.today-search:focus-within { border-color: var(--forest-700); box-shadow: 0 0 0 3px rgba(7, 95, 66, 0.12); }
.today-search svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.today-search input { flex: 1; min-width: 0; height: 40px; border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; font-size: 14px; outline: 0; }
.today-search kbd { font: 600 11px/18px var(--font-body); padding: 0 6px; border: 1px solid var(--line-2); border-radius: 5px; color: var(--muted); background: var(--surface-2); }
.today-actions { display: flex; gap: 8px; }
.today-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.today-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 1px var(--hairline); color: var(--ink-2); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.today-chip b { color: var(--ink); font-weight: 600; }
button.today-chip { cursor: pointer; }
button.today-chip:hover { background: var(--surface-2); }
.today-chip.is-bad { background: #fdecec; box-shadow: none; color: var(--danger-ink); }
.today-chip.is-bad b { color: var(--danger-ink); }
.today-chip.is-warn { background: #fbf3dd; box-shadow: none; color: #8a5a00; }
.today-chip.is-warn b { color: #8a5a00; }
.today-chip[aria-pressed="true"] { box-shadow: inset 0 0 0 2px currentColor; }
.today-chip.is-link { color: var(--forest-700); background: transparent; box-shadow: none; padding: 0 6px; }
.today-chip.is-link b { color: var(--forest-700); }

.today-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: 16px; align-items: start; }
.today-board { min-width: 0; overflow: hidden; }
.today-board .frontdesk-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.today-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.today-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.today-legend i[data-k="on"] { background: #ecf7df; box-shadow: inset 0 0 0 1px rgba(7, 95, 66, 0.25); }
.today-legend i[data-k="due"] { background: #fff; box-shadow: inset 0 0 0 1.5px var(--forest-700); }
.today-legend i[data-k="unpaid"] { background: #fdecec; box-shadow: inset 0 0 0 1px rgba(180, 35, 24, 0.25); }
.today-legend i[data-k="proof"] { background: #fbf3dd; box-shadow: inset 0 0 0 1px rgba(138, 90, 0, 0.25); }
.today-legend i[data-k="free"] { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); border: 1px dashed var(--faint); }

.today-timeline { --tl-label: 132px; --tl-hour: 112px; overflow-x: auto; overscroll-behavior-x: contain; padding: 0 0 6px; scroll-behavior: smooth; }
.today-timeline .tl-grid { position: relative; display: grid; grid-template-columns: var(--tl-label) minmax(0, 1fr); width: calc(var(--tl-label) + var(--tl-hours, 18) * var(--tl-hour)); }
.tl-corner { position: sticky; left: 0; z-index: 4; background: #fff; }
.tl-hours { display: grid; grid-template-columns: repeat(var(--tl-hours, 18), minmax(0, 1fr)); }
.tl-hours span { padding: 8px 0 8px 6px; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; box-shadow: inset 1px 0 0 var(--hairline); }
.tl-court { position: sticky; left: 0; z-index: 3; display: grid; align-content: center; gap: 2px; min-height: 82px; padding: 8px 12px 8px 18px; background: #fff; box-shadow: inset 0 1px 0 var(--hairline), 1px 0 0 var(--hairline); }
.tl-court strong { font-size: 14px; font-weight: 600; }
.tl-court small { font-size: 12px; line-height: 16px; color: var(--muted); }
.tl-lane { position: relative; min-height: 82px; box-shadow: inset 0 1px 0 var(--hairline); background-image: linear-gradient(90deg, var(--hairline) 1px, transparent 1px); background-size: calc(100% / var(--tl-hours, 18)) 100%; }
.tl-block { position: absolute; top: 8px; bottom: 8px; display: grid; align-content: start; gap: 1px; min-width: 0; padding: 7px 9px; overflow: hidden; border: 1px solid transparent; border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-size: 12px; line-height: 16px; text-align: left; cursor: pointer; transition: box-shadow 0.15s, opacity 0.15s; }
.tl-block:hover:not(:disabled) { box-shadow: var(--elev-2); z-index: 2; }
.tl-block:disabled { cursor: default; }
.tl-block strong { font-size: 13px; line-height: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-block span { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-block em { justify-self: start; margin-top: 3px; padding: 0 7px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.75); font-style: normal; font-size: 11px; line-height: 18px; font-weight: 600; }
.tl-block[data-state="playing"], .tl-block[data-state="arrived"] { background: #ecf7df; border-color: rgba(7, 95, 66, 0.22); }
.tl-block[data-state="due"] { border: 1.5px solid var(--forest-700); }
.tl-block[data-state="late"] { border: 1.5px solid var(--danger); }
.tl-block[data-state="late"] em { color: var(--danger-ink); }
.tl-block[data-state="unpaid"] { background: #fdecec; border-color: rgba(180, 35, 24, 0.22); }
.tl-block[data-state="proof"] { background: #fbf3dd; border-color: rgba(138, 90, 0, 0.22); }
.tl-block[data-state="booked"] { border-color: var(--line-2); }
.tl-block[data-state="open"] { background: var(--surface-2); color: var(--muted); border-color: transparent; }
.tl-block.is-selected, .tl-block[aria-current="true"] { box-shadow: 0 0 0 2px var(--forest-700); }
.tl-closure { cursor: default; background: repeating-linear-gradient(135deg, #f4f1e8 0 6px, #faf8f2 6px 12px); border-color: #e8e1cf; color: #6b5a33; }
.tl-free { position: absolute; top: 8px; bottom: 8px; display: grid; place-items: center start; padding: 0 10px; border: 1px dashed var(--line-2); border-radius: 10px; color: var(--muted); font-size: 12px; font-weight: 500; pointer-events: none; }
.tl-now { position: absolute; top: 0; bottom: 0; z-index: 2; width: 2px; background: var(--danger); pointer-events: none; }
.tl-now span { position: absolute; top: 4px; left: 6px; padding: 0 6px; border-radius: var(--r-pill); background: var(--danger); color: #fff; font-size: 11px; line-height: 18px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tl-block.is-dimmed { opacity: 0.22; }

/* Rail: the arrivals list, compact, two lines per guest */
.today-arrivals { min-width: 0; }
.today-arrivals .queue-console-head { padding: 14px 16px; }
.today-arrivals .queue-filters { padding: 8px 10px; }
.today-arrivals .queue-filter { min-height: 34px; padding: 4px 10px; font-size: 12px; }
.today-arrivals .queue-arrivals { padding: 0 16px 6px; }
.today-arrivals .arrival-columns { display: none; }
.today-arrivals .arrival-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "guest action" "context context" "state payment"; gap: 4px 12px; min-height: 0; padding: 12px 0; font-size: 13px; }
.today-arrivals .arrival-guest { grid-area: guest; }
.today-arrivals .arrival-context { grid-area: context; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding-left: 44px; }
.today-arrivals .arrival-context strong { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.today-arrivals .arrival-context small { margin: 0; }
.today-arrivals .arrival-state { grid-area: state; display: flex; align-items: baseline; gap: 6px; padding-left: 44px; }
.today-arrivals .arrival-state small { margin: 0; }
.today-arrivals .arrival-payment { grid-area: payment; text-align: right; }
.today-arrivals .arrival-actions { grid-area: action; display: flex; gap: 6px; justify-self: end; align-self: start; }
.today-arrivals .arrival-avatar { flex-basis: 32px; }
.arrival-row.is-late .arrival-guest .booking-guest-button, .arrival-row.is-late .arrival-guest strong { color: var(--danger-ink); }
.arrival-late { color: var(--danger-ink); font-weight: 600; }
.arrival-done-note { font-size: 12px; color: var(--success); font-weight: 600; white-space: nowrap; }
.btn--ghost { background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: var(--muted) !important; }
[data-collect-booking].is-armed { background: var(--forest-950) !important; color: #fff !important; border-color: var(--forest-950) !important; }
.arrival-row[hidden] { display: none; }

@media (max-width: 1180px) {
  .today-grid { grid-template-columns: minmax(0, 1fr); }
  .today-arrivals { order: -1; }
  .today-bar { grid-template-columns: minmax(0, 1fr) minmax(220px, 1fr); }
  .today-actions { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .today-bar { grid-template-columns: minmax(0, 1fr); }
  .today-timeline { --tl-label: 104px; --tl-hour: 96px; }
  .tl-court { padding-left: 12px; }
  .today-legend { display: none; }
}
/* Today, pass 2: taller lanes so a block reads in three lines; the venue line is quiet. */
.tl-court, .tl-lane { min-height: 92px; }
.tl-block { padding: 8px 10px; gap: 2px; }
.today-title h2 { font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 20px; letter-spacing: 0; }
.today-title p { margin-top: 1px; }
.today-arrivals .queue-filters { gap: 2px; }
@media (max-width: 760px) { .today-actions [data-page-shortcut] { display: none; } .today-actions #todayAddWalkIn { width: 100%; } }
.today-board { overflow: clip; } /* hidden still lets scrollIntoView shift the whole card sideways */

/* Desk dialogs (Collect payment, Add walk-in): a centred card like the homepage form card. */
.desk-dialog { width: min(480px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--r-xl, 24px); background: #fff; color: var(--ink); box-shadow: var(--elev-3); }
.desk-dialog::backdrop { background: rgba(6, 31, 22, 0.28); }
.desk-form { display: grid; gap: 16px; padding: 22px 22px 20px; }
.desk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.desk-head h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 30px; }
.desk-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.desk-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); min-width: 0; }
.desk-form label small { font-weight: 400; color: var(--faint); }
.desk-form input:not([type="radio"]), .desk-form select { width: 100%; min-height: 46px; padding: 0 12px; font-size: 15px; }
.desk-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.desk-methods { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.desk-methods legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.desk-method { display: inline-flex !important; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-pill); cursor: pointer; font-size: 14px !important; color: var(--ink) !important; }
.desk-method input { position: absolute; opacity: 0; pointer-events: none; }
.desk-method:has(input:checked) { background: var(--lime-tint); border-color: rgba(7, 95, 66, 0.4); color: var(--forest-950) !important; font-weight: 600; }
.desk-method:has(input:focus-visible) { outline: 2px solid var(--forest-700); outline-offset: 2px; }
.desk-status { margin: 0; min-height: 20px; font-size: 13px; color: var(--muted); }
.desk-status[data-tone="error"] { color: var(--danger-ink); }
.desk-actions { display: flex; justify-content: flex-end; }
.desk-actions .btn--primary { min-height: 48px; padding: 0 26px; font-size: 15px; }
@media (max-width: 520px) { .desk-row { grid-template-columns: minmax(0, 1fr); } .desk-actions .btn--primary { width: 100%; } }