/* Layout for the Tee Sheet console. Every control, status pill, alert, empty state, spinner,
   toolbar, drawer and dialog is a shared gk-* component, and bare fields, tables and
   disclosures take the gk-admin-native base the controller puts on .tsv. This file only
   places them, and the resource-lane grid, which is one view with one consumer.
   Every colour, space, size and radius is a shared token. Every rule is scoped under .tsv,
   the controller's own wrapper, so the same file loads in the standalone console and in
   Core's tenant admin without restyling either host. */
.tsv {
  --tsv-gutter: clamp(var(--space-lg), 2vw, var(--space-4xl));
  /* The one Tee Sheet density rule: a tee time is one row this high with a pointer, a touch target on touch. Rows sit
     a small gap apart, so a whole morning fits on a laptop, as on Chronogolf. */
  --tsv-row-height: 28px;
  --tsv-row-gap: var(--space-2xs);
  /* The time column: the hour marks are exactly this wide, so times, hour marks and prices line up. */
  --tsv-time-width: 4.5rem;
  --tsv-inner-radius: var(--radius-xs, 3px);
  min-width: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
}
.tsv [data-app-shell] { container: tee-sheet / inline-size; min-width: 0; }
.tsv [hidden] { display: none !important; }
.tsv .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.tsv a { color: var(--accent-text); }
.tsv :focus-visible { outline: var(--focus-outline-width) solid var(--focus-ring-color); outline-offset: var(--focus-outline-offset); }
.tsv h2, .tsv h3, .tsv h4 { margin: 0 0 var(--space-lg); color: var(--text); font-family: var(--font-display); line-height: var(--lh-snug); }
.tsv h2 { font-size: var(--fs-16); }
.tsv h3 { font-size: var(--fs-14); }
.tsv h4 { font-size: var(--fs-13); }
.tsv p { margin: 0 0 var(--space-md); }
.tsv ul, .tsv ol { margin: 0; padding-inline-start: var(--space-3xl); }
.tsv time { font-variant-numeric: tabular-nums; }
.tsv .form-guidance { margin: 0; color: var(--text-muted); font-size: var(--fs-13); }
.tsv gk-card section > :last-child, .tsv gk-card article > :last-child { margin-bottom: 0; }

/* Forms stack their groups; a control keeps its own width and a group fills the row. */
.tsv form { display: grid; gap: var(--space-lg); justify-items: start; }
.tsv form > .form-grid, .tsv form > gk-field, .tsv form > label, .tsv form > fieldset, .tsv form > details, .tsv form > p, .tsv form > section, .tsv form > div, .tsv form > gk-alert, .tsv form > gk-card, .tsv form > ul, .tsv form > ol { justify-self: stretch; }
.tsv .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-lg); }
.tsv .form-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.tsv .series-actions { width: 100%; }
.tsv gk-field, .tsv label, .tsv fieldset { min-width: 0; }
.tsv fieldset { display: grid; gap: var(--space-md); align-content: start; }
.tsv input:not([type="checkbox"]):not([type="radio"]), .tsv select { min-height: var(--gk-min-tap); }
.tsv select[multiple] { min-height: 5.5rem; }
.tsv .global-search { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-sm); width: 100%; min-width: 0; box-sizing: border-box; }
.tsv .global-search gk-field { flex: 1 1 15rem; min-width: 0; }
.tsv .global-search input { width: 100%; min-width: 0; box-sizing: border-box; }


/* The day sheet, as Chronogolf draws it. Above the sheets, one toolbar they all share (the search, the day's tools and
   Add tee sheet). Each sheet is a card with its own header: its date (prev, the day, next, and Today or the week strip),
   then its course and starting tee; its notices; then its own scroll of tee times. A tee time is one row: 32px with a
   pointer, 44px on touch. */
.tsv .ts-frame { display: grid; gap: var(--space-lg); padding: var(--space-lg) var(--tsv-gutter) 0; min-width: 0; }
.tsv .ts-frame--tv { padding-block: var(--space-2xl) 0; }
.tsv .ts-tv-date { margin: 0; font-size: var(--fs-24); font-weight: 600; }

/* The toolbar: the one search, then the day's tools as icon buttons. */
.tsv .ts-toolbar { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-sm); min-width: 0; }
.tsv .ts-search { display: block; flex: 1 1 12rem; max-width: 30rem; min-width: 0; margin: 0; }
.tsv .ts-search gk-field { display: block; }
.tsv .ts-tools { display: flex; align-items: center; gap: var(--space-2xs); margin-inline-start: auto; }
.tsv .ts-tool { --btn-pad: 0 var(--space-md); --btn-min-height: var(--control-height); --btn-gap: var(--space-xs); position: relative; }
.tsv summary.ts-tool { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); box-sizing: border-box; min-height: var(--control-height); padding: 0 var(--space-md); border-radius: var(--radius-control); color: var(--text); font-size: var(--fs-14); font-weight: 500; list-style: none; cursor: pointer; }
.tsv summary.ts-tool::-webkit-details-marker, .tsv summary.ts-tool::marker { display: none; content: none; }
/* The ⋮ menu is an icon alone: a square the height of the other tools, its dots on their centre line. */
.tsv .ts-menu:not(.ts-print) > summary.ts-tool { width: var(--control-height); padding: 0; }
.tsv summary.ts-tool:hover, .tsv .ts-menu[open] > summary.ts-tool { background: var(--primary-surface); }
.tsv .ts-tool .tool-icon { width: 18px; height: 18px; flex: none; }
.tsv .ts-tool[aria-pressed="true"] { --btn-ghost-bg: var(--primary-surface); --btn-ghost-color: var(--text); }
.tsv .tool-badge { position: absolute; inset-block-start: var(--space-3xs); inset-inline-end: var(--space-3xs); min-width: var(--space-2xl); padding-inline: var(--space-2xs); border-radius: var(--radius-pill); background: var(--primary); color: var(--primary-fg); font-size: var(--fs-12); font-weight: 600; line-height: var(--space-2xl); text-align: center; pointer-events: none; }
/* Beside a named tool the count follows the name instead of sitting on it; icon-only tools keep it on the corner. */
.tsv .ts-tool:has(.ts-tool-label:not(.sr-only)) .tool-badge { position: static; margin-inline-start: var(--space-2xs); }
.tsv .ts-menu { position: relative; display: flex; align-items: center; margin: 0; border: 0; border-radius: 0; background: transparent; }
.tsv .ts-menu > summary::before { content: none; display: none; }
.tsv .ts-menu > .ts-menu-list { margin: 0; }
.tsv .ts-menu-list { position: absolute; z-index: 30; inset-block-start: calc(100% + var(--space-2xs)); inset-inline-end: 0; display: grid; min-width: 12rem; padding: var(--space-2xs); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); box-shadow: var(--elevation-2); }
.tsv .ts-menu-list gk-button { --btn-justify: flex-start; --btn-font-weight: 500; }
/* A tool that shows its name needs no tooltip saying it again; the tooltip is for the icon-only toolbar on narrow screens. */
@container tee-sheet (min-width: 760px) {
  .tsv .ts-tools [data-tip]:has(.ts-tool-label)::after { content: none; }
}
@media (hover: hover) {
  .tsv [data-tip] { position: relative; }
  .tsv [data-tip]:is(:hover, :focus-visible, :focus-within)::after { content: attr(data-tip); position: absolute; z-index: 30; inset-block-start: calc(100% + var(--space-2xs)); inset-inline-start: 50%; transform: translateX(-50%); padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-control); background: var(--primary); color: var(--primary-fg); font-size: var(--fs-12); font-weight: 500; line-height: var(--lh-snug); white-space: nowrap; pointer-events: none; }
}

/* Freshness: one quiet line, only when the sheet is genuinely old. */
.tsv .ts-freshness { margin: 0; padding: var(--space-xs) var(--tsv-gutter) 0; color: var(--text-muted); font-size: var(--fs-13); }

/* The sheets: every open sheet is a column with its own header and scroll. */
.tsv .workspace { padding-block-start: var(--space-lg); }
.tsv .course-boards { display: grid; grid-template-columns: repeat(var(--open-sheets, 1), minmax(0, 1fr)); gap: var(--space-lg); align-items: start; }
.tsv .course-boards[data-open-sheets="1"] { --open-sheets: 1; }
.tsv .course-boards[data-open-sheets="2"] { --open-sheets: 2; }
.tsv .course-boards[data-open-sheets="3"] { --open-sheets: 3; }
.tsv .course-boards[data-open-sheets="4"] { --open-sheets: 4; }
.tsv .course-boards[data-compact="true"] { grid-template-columns: minmax(0, 1fr); }
.tsv .course-boards[data-compact="true"] > .course-sheet[data-panel-visible="false"] { display: none; }
.tsv .course-sheet { container: course-sheet / inline-size; min-width: 0; overflow: hidden; border: 0; border-radius: var(--radius-sm); background: var(--card); box-shadow: none; }

/* A sheet's header: the date in the middle, the course under it, then the week as one band across the sheet. */
.tsv .ts-sheet-head { display: grid; gap: var(--space-xs); padding: var(--space-sm) var(--space-sm) 0; }
.tsv .ts-sheet-line { position: relative; display: flex; justify-content: center; align-items: center; min-width: 0; }
.tsv .ts-sheet-pickers { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-xs); min-width: 0; }
.tsv .ts-date { flex-wrap: nowrap; gap: var(--space-2xs); }
.tsv .ts-date .admin-date-nav__day { font-size: var(--fs-32, 2rem); font-weight: 400; }
.tsv .ts-step { --btn-pad: 0; --btn-min-height: var(--control-height); flex: none; width: var(--control-height); }
.tsv .ts-step .tool-icon { width: 20px; height: 20px; }
.tsv .ts-date-pick { min-width: 0; padding-inline: var(--space-sm); background: none; color: inherit; font: inherit; cursor: pointer; }
/* The shared calendar opens under the sheet's date and never runs past the sheet. */
.tsv .ts-calendar { --gk-calendar-width: min(22.5rem, calc(100cqi - 2 * var(--space-md))); }
.tsv .ts-today { position: absolute; inset-inline-start: 0; display: none; }
/* The week is a band edge to edge under the course, square to the sheet; its days are small pressed tabs centred in it,
   so a wide sheet does not stretch them apart. */
.tsv .ts-week-band { display: flex; justify-content: center; margin-inline: calc(-1 * var(--space-sm)); background: var(--admin-table-head); }
.tsv .ts-week { --radius-card: 0; --radius-btn: var(--tsv-inner-radius); --segmented-tray-bg: var(--admin-table-head); box-sizing: border-box; width: min(100%, 44rem); max-width: none; }
.tsv .ts-week-day { display: flex; flex-direction: row; justify-content: center; align-items: baseline; gap: var(--space-3xs); min-width: 0; height: calc(var(--control-height) - var(--space-sm)); padding: 0 var(--space-3xs); font-size: var(--fs-13); font-weight: 500; line-height: 1; }
.tsv .ts-week-day strong { font-size: var(--fs-13); font-weight: 600; }
.tsv .ts-sheet-close { position: absolute; inset-inline-end: 0; }
.tsv .ts-course-name { margin: 0; flex: 1; font-size: var(--fs-14); font-weight: 600; text-align: center; }
/* The course is one line across the sheet, its name and caret together in the middle: plain for the venue's first
   course, a solid bar for any other. */
.tsv .ts-course-pick { position: relative; display: flex; flex: 1 1 auto; justify-content: center; align-items: center; min-width: 0; border-radius: var(--tsv-inner-radius); }
.tsv .ts-course-pick:hover { background-color: var(--admin-table-head); }
.tsv .ts-course-pick[data-default="false"] { background-color: var(--primary); color: var(--primary-fg); }
.tsv .ts-course-pick > select { box-sizing: border-box; width: auto; max-width: 100%; min-height: calc(var(--control-height) - var(--space-xs)); padding-block: 0; padding-inline: var(--space-md) var(--space-2xl); border: 0; border-radius: var(--tsv-inner-radius); background-color: transparent; color: inherit; font: inherit; font-size: var(--fs-14); font-weight: 600; cursor: pointer; }
/* The starting tees are small tiles beside the course, the same grey and corner as the week: no outline, the chosen one solid. */
.tsv .ts-starts { flex: none; min-width: 0; --chip-radius: var(--tsv-inner-radius); --chip-min-height: calc(var(--control-height) - var(--space-xs)); --chip-pad-x: var(--space-md); }
.tsv .ts-starts > button { border-color: transparent; background: var(--admin-table-head); color: var(--text); font-weight: 500; }
.tsv .ts-starts > button:hover { border-color: transparent; background: var(--border); }
.tsv .ts-starts > button:is([aria-pressed="true"], [aria-checked="true"], .active) { border-color: transparent; background: var(--primary); color: var(--primary-fg); }
/* A narrow sheet keeps its week: each day stacks its weekday over its date, so all seven still fit. */
@container course-sheet (max-width: 520px) {
  .tsv .ts-week-day { flex-direction: column; align-items: center; gap: 0; height: auto; padding-block: var(--space-3xs); font-size: var(--fs-11); line-height: var(--lh-tight); }
  .tsv .ts-week-day strong { font-size: var(--fs-13); }
}

/* The sheet's notices: one quiet tinted line each, under its header; the full text is the tooltip. */
.tsv .ts-notices { display: grid; border-bottom: 1px solid var(--border); background: var(--caution-bg); }
.tsv .ts-notice { display: flex; align-items: baseline; gap: var(--space-sm); min-width: 0; margin: 0; padding: var(--space-xs) var(--space-md); color: var(--text); font-size: var(--fs-13); }
.tsv .ts-notice + .ts-notice { border-top: 1px solid var(--border); }
.tsv .ts-notice-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsv .ts-notice-meta { flex: none; color: var(--text-muted); font-size: var(--fs-12); }
.tsv .course-empty { display: grid; min-height: 16rem; align-items: center; padding: var(--space-lg); }
/* While a day loads: the outline of its tee times in the rows' own places, so nothing moves when they arrive. */
.tsv .ts-skeleton { display: grid; align-content: start; gap: var(--tsv-row-gap); padding-top: calc(var(--space-2xs) + var(--tsv-row-height) + var(--tsv-row-gap)); overflow: hidden; --skeleton-radius: var(--tsv-inner-radius); --skeleton-base: var(--admin-table-head); }
.tsv .ts-skeleton-row { display: grid; grid-template-columns: var(--tsv-time-width) 4.75rem minmax(0, 1fr) 2.75rem; align-items: center; height: var(--tsv-row-height); }
.tsv .ts-skeleton-row > gk-skeleton:last-child { --gk-skeleton-h: var(--tsv-row-height); }
.tsv gk-skeleton.ts-course-name { flex: none; margin-inline: auto; --gk-skeleton-h: var(--space-lg); }

/* A day panel (notices, summary, staff roles) opens above the sheets. */
.tsv .ts-panel { display: grid; gap: var(--space-lg); padding: var(--space-lg) var(--space-2xl); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow-sm); }
.tsv .ts-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.tsv .ts-panel-head h2 { margin: 0; font-size: var(--fs-16); }
.tsv .ts-panel-close { --btn-pad: 0; width: var(--control-height); }
.tsv .ts-panel .day-notices > h2 { display: none; }

/* One tee time is one row: time, price, the four places, then buggies and anything unusual. The scroll is the containing
   block of everything inside it, so hidden labels never stretch the page. */
.tsv .course-sheet .tee-grid-scroll { position: relative; container: tee-time-grid / inline-size; max-width: 100%; height: max(24rem, calc(100dvh - var(--tsv-sheet-top, 15rem) - var(--tsv-sheet-foot, var(--space-lg)))); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: var(--space-2xs) var(--space-sm) var(--space-sm); box-sizing: border-box; border: 0; border-radius: 0; }
/* The table does not clip, so its head row stays stuck to the top of the sheet's own scroll. */
.tsv .tee-grid { width: 100%; overflow: visible; table-layout: fixed; border: 0; border-radius: 0; border-collapse: separate; border-spacing: 0 var(--tsv-row-gap); background: transparent; }
.tsv .tee-grid :is(th, td) { border: 0; }
.tsv .tee-grid tbody tr:hover { background: transparent; }
/* While a search is typed the sheet stays whole: tee times that do not match fade, the matches keep their strength. */
.tsv .tee-grid tr[data-search-miss] > * { opacity: .28; }
.tsv .tee-grid tr[data-search-match] time { font-weight: 700; }
.tsv .tee-grid col.ts-col-time { width: var(--tsv-time-width); }
.tsv .tee-grid col.ts-col-price { width: 4.75rem; }
.tsv .tee-grid col.ts-col-status { width: 2.75rem; }
.tsv .tee-grid th, .tsv .tee-grid td { padding: 0; vertical-align: middle; text-align: start; font-weight: 400; }
/* The head row (Time, Price, Player 1 to N) is for assistive technology: the rows say what they are, as on Chronogolf. */
.tsv .tee-grid > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tsv .tee-grid thead th { position: sticky; z-index: 3; inset-block-start: 0; padding: var(--space-2xs) var(--space-xs); border-bottom: 1px solid var(--border); background: var(--admin-table-head); color: var(--text-muted); font-size: var(--fs-12); font-weight: 600; line-height: var(--lh-snug); }
.tsv .tee-grid thead th:first-child { padding-inline-start: var(--space-md); }
.tsv .tee-grid thead th:nth-child(2) { text-align: end; }
.tsv .player-column-headings { display: grid; grid-template-columns: repeat(var(--positions, 4), minmax(0, 1fr)); }
.tsv .player-column-headings > span, .tsv .player-column-generic { padding-inline: var(--space-sm); }
.tsv .tee-grid tbody > tr[data-slot-id] > * { height: var(--tsv-row-height); border: 0; vertical-align: middle; }
.tsv .tee-grid tbody > tr[data-slot-id] > th[scope="row"] { position: sticky; z-index: 1; inset-inline-start: 0; display: table-cell; padding: 0 var(--space-xs); background: var(--card); }
.tsv .tee-grid tbody > tr:focus-visible { outline-offset: var(--focus-outline-offset-inset); }
.tsv .tee-grid tbody > tr[data-drop-slot] { scroll-margin-block: var(--space-6xl); }
.tsv .tee-grid .slot-time { display: inline-flex; align-items: baseline; gap: var(--space-2xs); vertical-align: middle; }
.tsv .tee-grid time { font-size: var(--fs-13); font-weight: 500; font-variant-numeric: tabular-nums; }
/* The starting tee is small muted text after the time, shown only when the sheet holds more than one tee. */
.tsv .ts-start { margin-inline-start: var(--space-2xs); color: var(--text-muted); font-size: var(--fs-12); font-weight: 500; font-variant-numeric: tabular-nums; }
/* While a booking moves, each time is also a target for keyboard and click: it stays plain text that underlines on hover. */
.tsv .tee-grid .time-move-target { --btn-pad: 0; --btn-radius: 0; --btn-min-height: var(--tsv-row-height); --btn-ghost-bg: transparent; --btn-ghost-color: var(--text); --btn-font-weight: 500; --btn-font-size: var(--fs-13); }
.tsv .tee-grid .time-move-target:hover { text-decoration: underline; }
.tsv .ts-tick { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tsv-row-height); min-height: var(--tsv-row-height); margin-inline-end: var(--space-2xs); vertical-align: middle; cursor: pointer; }
.tsv .tee-grid:has(.ts-tick) col.ts-col-time { width: 6.5rem; }
.tsv .ts-tick > input { margin: 0; accent-color: var(--primary); }
.tsv .tee-grid th[scope="row"] > .slot-time, .tsv .tee-grid th[scope="row"] { white-space: nowrap; }
.tsv .tee-grid tr[data-time-selected="all"] > * { background: var(--primary-surface); }
.tsv .tee-grid tr[data-time-selected="all"] > th[scope="row"] { background: var(--primary-surface); box-shadow: inset 3px 0 0 var(--primary); }
.tsv .tee-grid tr[data-time-selected="partial"] > th[scope="row"] { box-shadow: inset 3px 0 0 var(--primary); }
/* The hour mark is as wide as the time column and starts where the times start; its rule runs across the places. */
.tsv .tee-grid .hour-divider th { padding: var(--space-xs) 0 0; background: var(--card); }
.tsv .hour-marker { display: flex; align-items: center; gap: var(--space-sm); }
.tsv .hour-pill { flex: none; box-sizing: border-box; width: var(--tsv-time-width); padding: 0 var(--space-xs); border-radius: var(--tsv-inner-radius); background: var(--admin-table-head); color: var(--text); font-size: var(--fs-12); font-weight: 600; line-height: var(--space-2xl); text-align: start; font-variant-numeric: tabular-nums; }
.tsv .hour-pill--now { background: var(--primary); color: var(--primary-fg); font-weight: 600; }
.tsv .hour-rule { flex: 1; min-width: 0; border-top: 1px solid var(--border); }
.tsv .hour-marker--now .hour-rule { border-top: 2px solid var(--primary); }
.tsv .tee-grid .current-time-line td { padding: 0; }

/* The price is a tag pointing at the places; one tap shows the price for each player type. A time with no rate has none. */
.tsv .tee-grid .slot-price { padding: 0 var(--space-2xs) 0 0; text-align: start; }
.tsv .tee-grid .compact-price { display: inline-flex; align-items: center; box-sizing: border-box; max-width: 100%; height: var(--tsv-row-height); margin: 0; padding: 0 calc(var(--space-sm) + var(--space-2xs)) 0 var(--space-xs); border-radius: var(--tsv-inner-radius) 0 0 var(--tsv-inner-radius); background: var(--admin-table-head); clip-path: polygon(0 0, calc(100% - var(--space-xs)) 0, 100% 50%, calc(100% - var(--space-xs)) 100%, 0 100%); font-variant-numeric: tabular-nums; vertical-align: middle; }
.tsv .tee-grid .compact-price { --btn-pad: 0; --btn-radius: 0; --btn-min-height: var(--tsv-row-height); --gk-min-tap: var(--tsv-row-height); --btn-ghost-color: var(--text); --btn-ghost-bg: transparent; }
.tsv .tee-grid .compact-price:hover { background: var(--border); }
.tsv .tee-grid .compact-price .price { display: inline; padding: 0; border: 0; background: none; color: var(--text); font-size: var(--fs-13); font-weight: 500; line-height: 1; white-space: nowrap; }
.tsv .rate-basis { color: var(--text-muted); font-size: var(--fs-12); }

/* The places of a tee time are one strip: square tiles a hairline apart, the strip's own ends rounded. No outline around
   it or round any tile: fills alone say free, booked, arrived or no-show. */
.tsv .golfers-cell { padding: 0; }
.tsv .player-positions { display: grid; grid-template-columns: repeat(var(--positions, 4), minmax(0, 1fr)); gap: 1px; align-items: stretch; height: var(--tsv-row-height); min-width: 0; overflow: hidden; border-radius: var(--tsv-inner-radius); background: var(--border); }
.tsv .player-positions > * { min-width: 0; }
.tsv .tee-party { position: relative; display: grid; grid-column: span var(--party-size, 1); min-width: 0; }
.tsv .tee-party:is(:hover, :focus-within) .player-position--occupied { background: color-mix(in srgb, var(--primary) 16%, var(--card)); }
.tsv .tee-party-players { display: grid; grid-template-columns: repeat(var(--party-size, 1), minmax(0, 1fr)); gap: 1px; height: 100%; }
.tsv .player-position { --btn-pad: 0 var(--space-xs); --btn-radius: 0; --btn-min-height: var(--tsv-row-height); --btn-justify: flex-start; --btn-font-size: var(--fs-13); --btn-font-weight: 500; --btn-gap: var(--space-2xs); --btn-ghost-color: var(--text); --btn-ghost-bg: transparent; width: 100%; height: 100%; min-width: 0; }
.tsv .player-position--occupied { position: relative; display: block; background: color-mix(in srgb, var(--primary) 9%, var(--card)); }
.tsv .player-position--occupied:is([data-attendance="arrived"], [data-attendance="checked_in"]) { background: color-mix(in srgb, var(--success-text) 18%, var(--card)); }
.tsv .player-position--occupied[data-attendance="no_show"] { background: color-mix(in srgb, var(--caution-text) 16%, var(--card)); --btn-ghost-color: var(--text-muted); }
.tsv .slot-name { display: block; min-width: 0; overflow: hidden; font-size: var(--fs-13); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
/* The orange dot means one thing: money is still owed on this booking. */
.tsv .slot-due { position: absolute; inset-block-start: var(--space-2xs); inset-inline-end: var(--space-2xs); width: var(--space-xs); height: var(--space-xs); border-radius: var(--radius-pill); background: var(--caution-text); }
/* A free place is a grey tile with a round + in the middle; hovering it darkens the tile and colours the +. */
.tsv .player-position--empty { --btn-justify: center; --btn-ghost-color: var(--card); background: var(--admin-table-head); }
.tsv .player-position--empty .available-place-cue { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--text-muted); color: var(--card); font-size: var(--fs-13); font-weight: 700; line-height: 1; opacity: .45; transition: opacity var(--dur-fast, 140ms), background var(--dur-fast, 140ms); }
.tsv .player-position--empty:is(:hover, :focus-within) { background: var(--border); }
.tsv .player-position--empty:is(:hover, :focus-within) .available-place-cue { background: var(--primary); opacity: 1; }
.tsv .player-position--empty[disabled] .available-place-cue { opacity: .2; }
/* Pointing at a free place lights it and the free places before it: the party that place would book. */
.tsv .player-position--empty:not([disabled]):has(~ .player-position--empty:hover) { background: var(--border); }
/* The places a booking in the panel is taking are held in the row until it is saved or closed. */
.tsv .player-position--empty[data-drafted] { background: color-mix(in srgb, var(--primary) 16%, var(--card)); }
.tsv .player-position--empty[data-drafted] .available-place-cue { opacity: 0; }
.tsv .player-position--unavailable { display: flex; align-items: center; justify-content: center; background: var(--admin-table-head); opacity: .6; }
/* Dragging a booking: it is picked up by itself; while it moves it fades where it was, the tee time under it lights when the
   party fits, and the tag under the pointer names it. */
.tsv .player-position[data-drag-reservation] { cursor: grab; }
.tsv .player-position[data-drag-reservation]:active { cursor: grabbing; }
.tsv .tee-party[data-moving] { opacity: .4; }
.tsv .tee-grid tr.move-target-valid .player-positions { background: color-mix(in srgb, var(--primary) 35%, var(--card)); }
.tsv .tee-grid tr.move-target-valid .player-position--empty { background: color-mix(in srgb, var(--primary) 12%, var(--card)); }
.tsv .tee-grid tr.move-target-valid .player-position--empty .available-place-cue { background: var(--primary); opacity: 1; }
.tsv .tee-grid tr.move-target-valid time, .tsv .tee-grid tr.move-target-pending time { color: var(--primary); font-weight: 700; }
.tsv .tee-grid tr.move-target-pending .player-positions { background: var(--primary); opacity: .7; }
.tsv .ts-drag-chip { position: fixed; inset-block-start: -100px; inset-inline-start: 0; padding: var(--space-2xs) var(--space-sm); border-radius: var(--tsv-inner-radius); background: var(--primary); color: var(--primary-fg); font-size: var(--fs-13); font-weight: 600; white-space: nowrap; pointer-events: none; }

/* A blocked or restricted tee time is one hatched band across its places, named by its reason. */
.tsv .ts-closed { display: flex; align-items: center; height: var(--tsv-row-height); padding: 0 var(--space-md); border-radius: var(--tsv-inner-radius); background: repeating-linear-gradient(135deg, var(--admin-table-head) 0 6px, var(--card) 6px 12px); color: var(--text-muted); font-size: var(--fs-12); font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tsv .tee-grid tr[data-restricted] > th[scope="row"] { box-shadow: inset 3px 0 0 var(--caution-text); }

/* The status cell: a buggy count, waiting golfers, anything unusual. */
.tsv .tee-grid .slot-context { padding-inline: var(--space-xs); overflow: hidden; color: var(--text-muted); font-size: var(--fs-12); white-space: nowrap; text-overflow: ellipsis; }
.tsv .slot-context > * { display: inline-flex; align-items: center; margin-inline-end: var(--space-xs); vertical-align: middle; }
.tsv .slot-buggy { gap: var(--space-3xs); color: var(--text); font-weight: 600; }
.tsv .slot-buggy .tool-icon { width: 16px; height: 16px; }
.tsv .slot-waiting { --btn-pad: 0 var(--space-xs); --btn-min-height: 0; --btn-sm-min-height: 0; }
.tsv .slot-flag { color: var(--caution-text); font-weight: 500; }
.tsv .move-target-invalid, .tsv .move-reconciliation-slot { outline: var(--focus-glow-width) solid var(--caution-text); outline-offset: var(--focus-outline-offset-inset); }
.tsv .move-reconciliation-slot { background: var(--caution-bg); }
.tsv .move-reconciliation-pin { margin-block: var(--space-xs) 0; }
.tsv .move-accepted { animation: accepted-move-highlight 0.9s ease-out; }
@keyframes accepted-move-highlight { from { outline: var(--focus-glow-width) solid var(--focus-ring-color); outline-offset: var(--focus-outline-offset-inset); } to { outline: var(--focus-glow-width) solid transparent; outline-offset: var(--focus-outline-offset-inset); } }

/* The Adjust bar is docked to the foot of the page. */
.tsv .ts-modebar { position: sticky; z-index: 6; inset-block-end: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); margin: 0 var(--tsv-gutter); padding: var(--space-sm) var(--space-6xl) var(--space-sm) var(--space-lg); border: 1px solid var(--border-strong); border-radius: var(--radius-card) var(--radius-card) 0 0; background: var(--card); box-shadow: var(--elevation-3); }
.tsv .ts-modebar-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-lg); }
.tsv .ts-modebar-head h2 { margin: 0; font-size: var(--fs-16); }
.tsv .ts-modebar-count { color: var(--text-muted); font-size: var(--fs-13); }
.tsv .ts-modebar-count strong { color: var(--text); }
.tsv .ts-modebar-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.tsv .ts-modebar-actions gk-button { --btn-min-height: var(--control-height); }
@container tee-sheet (max-width: 759px) {
  .tsv .ts-modebar { margin-inline: 0; border-inline: 0; border-radius: 0; }
  .tsv .ts-modebar-actions { flex-basis: 100%; gap: var(--space-xs); }
  .tsv .ts-modebar-actions gk-button { --btn-pad: 0 var(--space-md); }
}
.tsv .ts-modebar-note, .tsv .ts-modebar-review { margin: 0; flex-basis: 100%; font-size: var(--fs-13); }
.tsv .ts-modebar-review { display: flex; align-items: center; gap: var(--space-lg); }
.tsv .ts-modebar .mode-done { position: absolute; inset-block-start: 50%; inset-inline-end: var(--space-xs); transform: translateY(-50%); --btn-pad: 0; width: var(--gk-min-tap, 44px); }
.tsv .ts-modebar:has(.ts-modebar-actions) .mode-done { inset-block-start: var(--space-xs); transform: none; }
.tsv .ts-modebar .capacity-controls { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-sm); }
.tsv .ts-modebar .capacity-controls input { width: 5rem; }
.tsv .ts-modebar .capacity-controls:not(:has([data-capacity-action] option[value="squeeze"]:checked)) .squeeze-control { display: none; }

/* A phone shows one sheet: every row is still one line, a place names the surname only, the price is short. */
@container course-sheet (max-width: 520px) {
  .tsv .tee-grid { --tsv-time-width: 3.25rem; }
  .tsv .tee-grid col.ts-col-price { width: 3.75rem; }
  .tsv .tee-grid col.ts-col-status { width: 0; }
  .tsv .tee-grid:has(.ts-tick) col.ts-col-time { width: 5.25rem; }
  .tsv .tee-grid td.slot-context { display: none; }
  /* A phone keeps its first tee times high: the head row is for assistive technology only. */
  .tsv .tee-grid > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tsv .tee-grid tbody > tr[data-slot-id] > th[scope="row"] { padding-inline: var(--space-sm) 0; }
  .tsv .tee-grid time { font-size: var(--fs-13); }
  .tsv .tee-grid .slot-price { padding-inline: 0 var(--space-2xs); }
  .tsv .tee-grid .compact-price .price { font-size: var(--fs-12); }
  .tsv .player-position { --btn-pad: 0 var(--space-2xs); }
  .tsv .slot-initial { display: none; }
  .tsv .slot-name { font-size: var(--fs-12); }
  /* The starting tee sits under the time, so the time, the places and the price keep their own room. */
  .tsv .tee-grid .slot-time { flex-direction: column; align-items: flex-start; gap: 0; line-height: var(--lh-tight); }
  .tsv .ts-start { font-size: var(--fs-12); line-height: var(--lh-tight); }
  .tsv .ts-sheet-head { padding-inline: var(--space-sm); }
  /* The course and its starting tee share one row. */
  .tsv .ts-sheet-pickers { flex-wrap: nowrap; gap: var(--space-xs); }
  .tsv .ts-course-pick { flex: 0 1 auto; }
  .tsv .ts-course-pick > select { padding-inline-start: var(--space-sm); font-size: var(--fs-13); }
  .tsv .ts-starts { flex: none; --chip-pad-x: var(--space-sm); }
  /* A tee time of more than four places wraps them three to a line, so on a phone each place stays a whole target. */
  .tsv .player-positions[data-wrap] { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: var(--tsv-row-height); height: auto; }
  .tsv .player-positions[data-wrap] :is(.tee-party, .tee-party-players) { display: contents; }
  .tsv :where(.player-positions[data-wrap]) .player-position--occupied { background: color-mix(in srgb, var(--primary) 5%, var(--card)); }
  }
@container tee-sheet (max-width: 759px) {
  .tsv .ts-tool-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .tsv .ts-tool, .tsv summary.ts-tool { --btn-pad: 0; width: var(--control-height); padding: 0; }
  .tsv .ts-tools { gap: 0; }
}
@media (pointer: coarse) {
  .tsv { --tsv-row-height: var(--gk-min-tap, 44px); }
  .tsv .ts-closed { height: var(--tsv-row-height); }
}
@media (prefers-reduced-motion: reduce) {
  .tsv .move-accepted, .tsv .player-position--empty .available-place-cue { animation: none; transition: none; }
}

/* Alerts and receipts that sit between the page chrome and the workspace. */
.tsv [data-app-shell] > gk-alert, .tsv [data-tsv="banner"] > gk-alert { margin: var(--space-lg) var(--tsv-gutter); }
.tsv .workspace gk-alert, .tsv gk-sheet gk-alert, .tsv gk-modal gk-alert { margin-block: var(--space-lg); }
/* A saved change floats over the foot of the page, so confirming it never pushes the sheet down; the shared toolbar
   inside it is its whole look. */
.tsv .receipt--compact { position: fixed; z-index: 40; inset-block-end: var(--space-xl); inset-inline-start: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 2 * var(--space-lg)); margin: 0; }
.tsv .receipt--compact .receipt-detail { font-weight: 500; }
.tsv .receipt-summary, .tsv .receipt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); min-width: 0; }
.tsv .receipt-summary time { color: var(--text-muted); font-size: var(--fs-12); }
.tsv .receipt-detail { overflow-wrap: anywhere; }
.tsv .receipt-actions { max-width: 100%; }
.tsv .receipt-actions .admin-support-details { margin: 0; padding: 0; border: 0; background: transparent; min-width: 0; max-width: 100%; }
.tsv .receipt-actions .admin-support-details > summary { min-height: var(--gk-min-tap); padding: var(--space-sm); cursor: pointer; }
.tsv .receipt-actions .admin-support-details[open] { flex-basis: 100%; }
.tsv .receipt-actions .admin-support-details code { white-space: pre-wrap; overflow-wrap: anywhere; }
.tsv .downstream-results { display: grid; gap: var(--space-xs); }
.tsv .downstream-results li span { display: block; }
.tsv .global-search-results { margin: 0 var(--tsv-gutter) var(--space-lg); }
.tsv .global-search-results ol { display: grid; gap: var(--space-sm); }
.tsv .global-search-results li { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 2fr) auto; align-items: center; gap: var(--space-sm); }

/* The workspace. */
.tsv .workspace { display: grid; gap: var(--space-lg); align-content: start; padding: 0 var(--tsv-gutter) var(--space-8xl); }
/* The day's sheets end at the window's foot, so the page under them keeps no room of its own; while the Adjust or Move
   bar floats over the sheets, their scroll makes that room instead, so the last tee time can still be reached. */
.tsv .workspace:has(> .course-boards) { padding-bottom: 0; }
.tsv:has(.ts-modebar) .course-sheet .tee-grid-scroll { padding-bottom: var(--space-8xl); }
.tsv .workspace > * { min-width: 0; }
.tsv .workspace:focus-visible { outline: none; }
.tsv .workspace-loading { display: grid; place-items: center; padding: var(--space-8xl) 0; }
.tsv .table-scroll { max-width: 100%; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); }
.tsv .table-scroll th, .tsv .table-scroll td { vertical-align: top; }
.tsv .slot-exception, .tsv .identity-warning { color: var(--caution-text); }
.tsv .select-control { min-height: var(--gk-min-tap); }
.tsv .price, .tsv .provenance { display: block; }
.tsv .price { font-weight: 700; }
.tsv .provenance { color: var(--text-muted); font-size: var(--fs-12); }
.tsv .explain-price { margin-top: var(--space-xs); }
.tsv .notice-composers { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
.tsv .queue-groups, .tsv .role-policy-list { display: grid; gap: var(--space-md); margin-block: var(--space-md); }
.tsv .role-policy-list > details { min-width: 0; }
.tsv .role-policy-list > details > summary { min-height: var(--gk-min-tap,44px); white-space: normal; overflow-wrap: anywhere; }
.tsv .queue-groups ol { display: grid; gap: var(--space-sm); }
.tsv .queue-groups li, .tsv .operator-history li, .tsv .role-policy li { display: grid; gap: var(--space-2xs); }
.tsv .operator-history ol, .tsv .role-policy ul { display: grid; gap: var(--space-sm); }
.tsv .operator-history li span, .tsv .role-policy li span, .tsv .queue-groups li span { color: var(--text-muted); }
.tsv .role-assignment { padding-top: var(--space-lg); border-top: 1px solid var(--border); }
.tsv .assignment-inventory { display: grid; gap: var(--space-lg); margin-top: var(--space-lg); }

/* Starter, Manager, Revenue, Marshal and TV views. */
.tsv .starter-view, .tsv .tv-view { display: grid; gap: var(--space-lg); }
.tsv .starter-selection [role="group"] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.tsv .starter-selection p { margin: 0; }
.tsv .starter-selection [role="group"] > div { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.tsv .starter-selection .starter-attendance-actions { flex-basis: 100%; align-items: end; }
.tsv .starter-attendance-actions label { flex: 1 1 11rem; }
.tsv .starter-attendance-preview ol { display: grid; gap: var(--space-sm); margin-bottom: 0; }
.tsv .starter-attendance-preview li { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: baseline; }
.tsv .starter-attendance-preview li ul { flex-basis: 100%; margin: 0; }
.tsv .starter-slot > header { display: grid; grid-template-columns: 5rem 1fr auto; gap: var(--space-sm); align-items: center; }
.tsv .starter-slot time { font-size: var(--fs-20); font-weight: 700; }
.tsv .starter-group { padding: var(--space-md); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); }
.tsv .starter-group > header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-bottom: var(--space-sm); }
.tsv .starter-group > header > div { flex: 1; min-width: 10rem; }
.tsv .starter-group > header > div > span { display: block; color: var(--text-muted); font-size: var(--fs-12); }
.tsv .starter-group > header time { font-size: var(--fs-20); font-weight: 700; }
.tsv .starter-group > footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-sm); }
.tsv .starter-group > footer gk-button { margin-left: auto; }
.tsv .unresolved-bookings { padding: var(--space-sm) var(--space-md); border: 1px solid var(--caution-text); border-radius: var(--radius-card); }
.tsv .starter-party { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(14rem, 2fr); gap: var(--space-md); padding-top: var(--space-md); }
.tsv .starter-party > div { display: grid; align-content: start; gap: var(--space-xs); }
.tsv .starter-party > div > span { color: var(--text-muted); }
.tsv .starter-party gk-button { display: block; }
.tsv .starter-notes { display: grid; gap: var(--space-2xs); margin: var(--space-xs) 0 0; }
.tsv .attendance-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; border-top: 1px solid var(--border); }
.tsv .attendance-actions > strong { margin-right: auto; }
.tsv .attendance-actions--selected { background: var(--primary-surface); }
.tsv .exception-list, .tsv .tv-view ol { display: grid; gap: var(--space-sm); padding: 0; list-style: none; }
.tsv .exception-list li { padding: var(--space-md) 0; border-bottom: 1px solid var(--border); }
.tsv .metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-lg); }
.tsv .tv-view { font-size: clamp(var(--fs-16), 2vw, var(--fs-24)); }
.tsv .tv-view li { display: grid; grid-template-columns: 6rem 1fr 1fr 1fr; gap: var(--space-2xl); padding: var(--space-lg) 0; border-bottom: 1px solid var(--border); }
.tsv .configuration-task > h3 { margin-block-end: var(--space-xs); font-size: var(--fs-20); font-weight: 500; }
.tsv .configuration-inventory > p { color: var(--text-muted); font-size: var(--fs-12); }
.tsv .inventory-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: var(--space-lg) var(--space-2xl); }
.tsv .inventory-grid article { min-width: 0; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-btn); background: var(--admin-table-head); }
.tsv .inventory-grid h4 { margin-block-end: var(--space-xs); }
.tsv .inventory-grid p { margin: 0; color: var(--text-muted); font-size: var(--fs-13); }
.tsv .inventory-grid ul { display: grid; gap: var(--space-sm); padding: 0; list-style: none; }
.tsv .inventory-grid li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); min-width: 0; overflow-wrap: anywhere; }
.tsv .clone-destinations, .tsv .operational-notes { display: grid; gap: var(--space-md); padding: 0; list-style: none; }
.tsv .operational-notes li { display: grid; gap: var(--space-sm); padding-bottom: var(--space-md); border-bottom: 1px solid var(--border); }
.tsv .operational-notes li > div { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.tsv .note-create { display: grid; gap: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--border); }
.tsv .round-operations { display: grid; gap: var(--space-md); padding: 0; list-style: none; }
.tsv .round-operations li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; border-top: 1px solid var(--border); }
.tsv .round-operations li > span { margin-right: auto; }

/* Prices view: the live grid, the calendar and the change tools. Layout only; the parts are shared recipes. */
.tsv .prices { display: grid; gap: var(--space-2xl); min-width: 0; }
.tsv .prices h2, .tsv .prices h3 { margin: 0; color: var(--text); font-weight: var(--fw-title); }
.tsv .prices h2 { font-size: var(--fs-section); line-height: 1.4; }
.tsv .prices h3 { font-size: var(--fs-panel); line-height: var(--lh-snug); }
/* The Course filter's value names the courses to show (keys k0k, k1k ...); an unchosen course's tees and later prices are hidden. No value means every course. */
.tsv .setup:has(gk-filter-chips.setup-courses[value]:not([value=""]):not([value*="k0k"])) [data-course="k0k"] { display: none; }
.tsv .setup:has(gk-filter-chips.setup-courses[value]:not([value=""]):not([value*="k1k"])) [data-course="k1k"] { display: none; }
.tsv .setup:has(gk-filter-chips.setup-courses[value]:not([value=""]):not([value*="k2k"])) [data-course="k2k"] { display: none; }
.tsv .setup:has(gk-filter-chips.setup-courses[value]:not([value=""]):not([value*="k3k"])) [data-course="k3k"] { display: none; }
.tsv .setup:has(gk-filter-chips.setup-courses[value]:not([value=""]):not([value*="k4k"])) [data-course="k4k"] { display: none; }
.tsv .setup:has(gk-filter-chips.setup-courses[value]:not([value=""]):not([value*="k5k"])) [data-course="k5k"] { display: none; }
.tsv .setup:has(gk-filter-chips.setup-courses[value]:not([value=""]):not([value*="k6k"])) [data-course="k6k"] { display: none; }
.tsv .setup:has(gk-filter-chips.setup-courses[value]:not([value=""]):not([value*="k7k"])) [data-course="k7k"] { display: none; }
.tsv .setup:has(gk-filter-chips.setup-courses[value]:not([value=""]):not([value*="k8k"])) [data-course="k8k"] { display: none; }
.tsv .setup:has(gk-filter-chips.setup-courses[value]:not([value=""]):not([value*="k9k"])) [data-course="k9k"] { display: none; }
.tsv .setup:has(gk-filter-chips.setup-courses[value]:not([value=""]):not([value*="k10k"])) [data-course="k10k"] { display: none; }
.tsv .setup:has(gk-filter-chips.setup-courses[value]:not([value=""]):not([value*="k11k"])) [data-course="k11k"] { display: none; }
.tsv .setup:has(gk-filter-chips.setup-courses[value]:not([value=""]):not([value*="k12k"])) [data-course="k12k"] { display: none; }
.tsv .setup:has(gk-filter-chips.setup-courses[value]:not([value=""]):not([value*="k13k"])) [data-course="k13k"] { display: none; }
.tsv .setup:has(gk-filter-chips.setup-courses[value]:not([value=""]):not([value*="k14k"])) [data-course="k14k"] { display: none; }
.tsv .setup:has(gk-filter-chips.setup-courses[value]:not([value=""]):not([value*="k15k"])) [data-course="k15k"] { display: none; }
.tsv .setup, .tsv .setup-part, .tsv .tee-times, .tsv .tee-times-day { display: grid; gap: var(--space-2xl); min-width: 0; }
.tsv .setup-part > h2, .tsv .tee-times h2 { margin: 0; font-size: var(--fs-section); font-weight: var(--fw-title); line-height: 1.4; }
.tsv .setup-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-2xl); min-width: 0; }
.tsv .setup-date { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); min-width: 0; margin: 0; }
.tsv .setup-date__pick { position: relative; box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--space-md); min-height: var(--control-height); padding: 0 var(--space-md); border-radius: var(--radius-control); color: var(--text); cursor: pointer; }
.tsv .setup-date__number { font-size: var(--fs-32); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.tsv .setup-date__text { display: grid; font-size: var(--fs-14); line-height: var(--lh-snug); }
.tsv .setup-date__text > :first-child { font-weight: 600; }
.tsv .setup-date__text > :last-child { color: var(--text-muted); font-size: var(--fs-13); }
.tsv .setup-step { --btn-pad: 0; --btn-min-height: var(--control-height); width: var(--control-height); }
.tsv .setup-step .tool-icon { width: 20px; height: 20px; }
.tsv .setup-wide { grid-column: 1 / -1; }
.tsv .setup-status { display: flex; align-items: center; gap: var(--space-sm); margin: 0; color: var(--text-muted); font-size: var(--fs-body); }
.tsv .setup-sections { display: grid; gap: var(--space-2xl); padding-block-start: var(--space-lg); }
.tsv .setup-date__pick:hover { background: var(--primary-surface); }
.tsv .setup-date__pick:focus-within { outline: var(--focus-outline-width) solid var(--focus-ring-color); outline-offset: var(--focus-outline-offset); }
.tsv .setup-date__pick > input { position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.tsv .setup-date__pick > input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.tsv .tee-times-day { max-width: 64rem; }
.tsv .tee-times-day th { vertical-align: middle; }
.tsv .setup-change { color: var(--text-muted); }
.tsv .setup-change > span { white-space: nowrap; }
.tsv .workspace:has(> .setup) { padding-inline: 0; }
.tsv .setup-tools:not(.setup-tools--nested) > details > summary { padding-inline-start: 0; }
.tsv .tee-times-day td:last-child { text-align: end; }
.tsv .setup-row-menu { display: inline-block; }
.tsv .setup-form[data-pristine] .admin-settings-section__save { display: none; }
.tsv .setup-slots { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.tsv .setup-slots :is(th, td) { padding: var(--space-sm) var(--space-lg); border-bottom: 1px solid var(--border); text-align: start; }
.tsv .setup-form[data-format-form]:has([name="format"] option[value="standard"]:checked) .setup-format:not([data-format~="standard"]),
.tsv .setup-form[data-format-form]:has([name="format"] option[value="shotgun"]:checked) .setup-format:not([data-format~="shotgun"]),
.tsv .setup-form[data-format-form]:has([name="format"] option[value="crossover"]:checked) .setup-format:not([data-format~="crossover"]),
.tsv .setup-form[data-format-form]:has([name="format"] option[value="custom"]:checked) .setup-format:not([data-format~="custom"]) { display: none; }
.tsv .setup-notice:empty { display: none; }
.tsv .setup-notice { display: grid; gap: var(--space-2xl); }
.tsv .setup-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); min-width: 0; }
.tsv .setup-mode { margin-inline-start: auto; color: var(--text-muted); font-size: var(--fs-body); }
.tsv .prices-live, .tsv .prices-set { display: grid; gap: var(--space-2xl); min-width: 0; }
.tsv .prices-set__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); }
.tsv .prices-set__head p { flex: 1 1 14rem; margin: 0; color: var(--text-muted); font-size: var(--fs-body); }
.tsv .setup-later, .tsv .setup-waiting { display: grid; gap: var(--space-sm); max-width: 64rem; margin: 0; padding: 0; list-style: none; }
.tsv .setup-later > li, .tsv .setup-waiting > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); min-width: 0; }
.tsv .setup-later > li > span, .tsv .setup-waiting > li > span { flex: 1 1 14rem; min-width: 0; color: var(--text); font-size: var(--fs-body); }
.tsv .prices-set__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-xs) var(--space-lg); }
.tsv .prices-set__head > h3 { grid-column: 1; grid-row: 1; }
.tsv .prices-set__head > .setup-row-menu { grid-column: 2; grid-row: 1; }
.tsv .prices-set__head > p { grid-column: 1 / -1; grid-row: 2; }
.tsv .prices-set { gap: var(--space-lg); }
.tsv .prices-change, .tsv .prices-grid-title { margin: 0; }
.tsv .prices-live th[scope="row"] { white-space: nowrap; }
.tsv .prices-grid :is(th, td) { padding-inline: var(--space-lg); }
@container tee-sheet (max-width: 720px) {
  .tsv .prices-live .prices-grid :is(th, td) { padding-inline: var(--space-sm) !important; font-size: var(--fs-body) !important; }
  .tsv .prices-live .prices-grid th[scope="row"] { font-size: var(--fs-body) !important; }
}
.tsv .setup-later > li > .setup-row-menu { margin-inline-start: auto; }
/* A tee time on a phone is two lines and a menu: the tee and its menu, then the times with their pace and the next change, then the dates. */
@container tee-sheet (max-width: 720px) {
  .tsv .tee-times-day table[data-gk-layout="compact"] > tbody > tr { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-xs); padding-inline: var(--space-sm) !important; }
  .tsv .tee-times-day table[data-gk-layout="compact"] > tbody > tr > td { grid-column: 1 / -1 !important; padding: 0; }
  .tsv .tee-times-day table[data-gk-layout="compact"] > tbody > tr > td:nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; }
  .tsv .tee-times-day table[data-gk-layout="compact"] > tbody > tr > td:nth-child(4) { grid-column: 2 !important; grid-row: 1 !important; align-self: start; margin-block: calc(var(--space-sm) * -1) 0; }
  .tsv .tee-times-day table[data-gk-layout="compact"] > tbody > tr > td:nth-child(2) { grid-row: 2 !important; }
  .tsv .tee-times-day table[data-gk-layout="compact"] > tbody > tr > td:nth-child(3) { grid-row: 3 !important; color: var(--text-muted); font-size: var(--fs-body); }
  .tsv .tee-times-day [data-gk-adaptive-label] { display: none !important; }
  .tsv .tee-times-day td:nth-child(1) > [data-gk-secondary] { display: inline; }
  .tsv .tee-times-day td:nth-child(1) > [data-gk-secondary]::before { content: " \00b7  "; }
  .tsv .tee-times-day td:nth-child(2) > [data-gk-secondary]:not(.setup-change) { display: inline; }
  .tsv .tee-times-day td:nth-child(2) > [data-gk-secondary]:not(.setup-change)::before { content: " \00b7  "; }
}
.tsv .prices-live { gap: var(--space-5xl); max-width: 64rem; }
.tsv .setup-note { margin: 0; color: var(--text-muted); font-size: var(--fs-body); }
.tsv .prices-live th[scope="row"] { color: var(--text); font-size: var(--fs-list-value); font-weight: var(--fw-ui); }
@container tee-sheet (min-width: 721px) {
  .tsv .prices-live th[scope="row"] { white-space: nowrap; }
}
.tsv .prices-live tbody tr:last-child > th { border-block-end: 0; }
.tsv .prices--source :is(th, td) { vertical-align: middle; }
.tsv .setup-na { color: var(--text-muted); font-size: var(--fs-body); }
.tsv .prices-source { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); }
.tsv .prices-source p { flex: 1 1 18rem; margin: 0; color: var(--text-muted); font-size: var(--fs-body); }
.tsv .prices--source gk-data-table { max-width: none; }
.tsv .prices--source tbody th { color: var(--text); font-size: var(--fs-list-value); font-weight: var(--fw-ui); text-align: start; }
.tsv .prices--source tbody th > [data-gk-secondary] { display: block; color: var(--text-muted); font-size: var(--fs-13); font-weight: 400; }
.tsv .prices--source tbody th details > summary { color: var(--text); font-weight: var(--fw-ui); }
.tsv .setup-steps { display: grid; }
.tsv .setup-form { display: grid; gap: var(--space-2xl); min-width: 0; }
.tsv .setup-fields { --admin-form-min: 13rem; --admin-form-gap: var(--space-2xl); }
.tsv .setup-form > footer { justify-self: stretch; }
.tsv .setup-fields gk-field:has(> .prices-unit) > input { padding-inline-end: 4rem; }
.tsv .prices-unit { position: absolute; inset-block-start: 50%; inset-inline-end: var(--space-lg); transform: translateY(-50%); color: var(--text-muted); font-size: var(--fs-13); pointer-events: none; }
.tsv .setup-hint { margin: 0; color: var(--text-muted); font-size: var(--fs-13); }
.tsv .setup-rules { display: grid; gap: var(--space-2xl); }
.tsv .setup-rule, .tsv .setup-dynamic { display: grid; gap: var(--space-2xl); min-width: 0; margin: 0; padding: var(--space-2xl) 0 0; border: 0; border-top: 1px solid var(--border); }
.tsv .setup-rule > legend, .tsv .setup-dynamic > legend { padding: 0; color: var(--text); font-size: var(--fs-body); font-weight: var(--fw-title); }
.tsv .setup-include { display: flex; align-items: center; gap: var(--space-sm); min-height: var(--gk-min-tap); font-weight: var(--fw-ui); }
.tsv .setup-row-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.tsv .setup-live-rules { display: grid; gap: var(--space-2xl); }
.tsv .setup-support > h3:first-of-type { margin-block-start: 0; }
.tsv .setup-support ul { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.tsv .setup-support h3 { margin-block: var(--space-lg) var(--space-sm); font-size: var(--fs-body); }
.tsv .selection-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); min-width: 0; max-width: 100%; }
.tsv .selection-tray { --gk-toolbar-pad-y: var(--space-sm); }
.tsv .selection-tray h2 { font-family: var(--font-body); font-size: var(--fs-14); }
.tsv .selection-count { display: grid; gap: var(--space-3xs); }
.tsv .selection-tray .selection-count { padding-inline-end: var(--gk-min-tap); }
.tsv .mode-done { position: absolute; inset-block-start: 0; inset-inline-end: 0; }
.tsv .selection-count > span { font-size: var(--fs-12); }
.tsv .capacity-controls { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); min-width: 0; }
.tsv .selection-tray .capacity-controls label { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; }
.tsv .capacity-controls input { width: 5rem; }
.tsv .capacity-controls:not(:has([data-capacity-action] option[value="squeeze"]:checked)) .squeeze-control { display: none; }

/* The reservation inspector (gk-sheet) and the consequence dialog (gk-modal). */
.tsv .drawer-heading { min-width: 0; }
.tsv .drawer-heading p, .tsv .drawer-heading h2, .tsv .drawer-heading span { margin: 0; }
.tsv .drawer-heading h2 { font-size: var(--fs-20); }
.tsv .drawer-heading p, .tsv .drawer-heading span { display: block; color: var(--text-muted); font-size: var(--fs-13); }
.tsv .dirty-status { display: block; margin-top: var(--space-xs); color: var(--caution-text); font-size: var(--fs-12); }
.tsv .dirty-status:empty { display: none; }

/* The booking panel, as Chronogolf lays it out: a bar naming the booking with its holes, date and time as small tiles; an icon
   rail down the left choosing one section; the section on a light grey ground with white player cards (no outline: the ground
   separates them); and the notes as a strip along the foot. One outline, the panel's own; everything inside is fill and space. */
.tsv .ts-booking { --gk-sheet-pad-x: 0; }
/* One level of grouping inside the panel: a group is a heading and its fields, never a box in the box. */
.tsv .ts-editor fieldset { margin: 0 0 var(--space-lg); padding: 0; border: 0; min-width: 0; }
.tsv .ts-editor fieldset > legend { margin-block-end: var(--space-sm); padding: 0; font-size: var(--fs-14); font-weight: 600; }
.tsv .ts-editor [name="partySize"] { max-width: var(--control-width-sm, 8rem); }
.tsv .ts-panel-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); min-width: 0; padding-inline-start: var(--space-lg); }
.tsv .ts-panel-bar h2 { margin: 0; font-size: var(--fs-16); font-weight: 600; }
.tsv .ts-panel-party { color: var(--text-muted); font-size: var(--fs-13); }
.tsv .ts-panel-pills { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); }
.tsv .ts-pill { display: inline-flex; align-items: center; gap: var(--space-2xs); height: calc(var(--control-height) - var(--space-xs)); padding: 0 var(--space-sm); border: 0; border-radius: var(--tsv-inner-radius); background: var(--admin-table-head); color: var(--text); font: inherit; font-size: var(--fs-13); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tsv .ts-pill .tool-icon { width: 14px; height: 14px; color: var(--text-muted); }
.tsv .ts-pill--action { --btn-pad: 0 var(--space-sm); --btn-radius: var(--tsv-inner-radius); --btn-sm-min-height: calc(var(--control-height) - var(--space-xs)); --btn-ghost-bg: var(--admin-table-head); --btn-ghost-color: var(--text); --btn-gap: var(--space-2xs); --btn-font-weight: 500; padding: 0; }
.tsv .ts-panel-course { color: var(--text-muted); font-size: var(--fs-13); }
.tsv .ts-panel-bar .dirty-status { margin: 0; }
.tsv .ts-panel-body { display: grid; grid-template-columns: var(--space-6xl, 3rem) minmax(0, 1fr); align-items: start; min-height: 100%; background: var(--admin-table-head); }
.tsv .ts-panel-body > *, .tsv .ts-panel-form > * { grid-column: 2; min-width: 0; }
.tsv .ts-panel-form { display: contents; }
.tsv .ts-panel-body > gk-alert, .tsv .ts-panel-body > gk-button { margin: var(--space-md) var(--space-lg) 0; }
.tsv .ts-panel-rail { grid-column: 1; grid-row: 1 / span 40; align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: var(--space-3xs); padding: var(--space-sm) 0; background: var(--card); box-shadow: inset -1px 0 0 var(--border); }
.tsv .ts-rail-item { --btn-pad: 0; --btn-radius: var(--tsv-inner-radius); --btn-min-height: var(--space-5xl, 2.5rem); --btn-ghost-color: var(--text-muted); width: var(--space-5xl, 2.5rem); }
.tsv .ts-rail-item[aria-pressed="true"] { --btn-ghost-bg: var(--admin-table-head); --btn-ghost-color: var(--text); }
.tsv .ts-rail-item .tool-icon { width: 20px; height: 20px; }
.tsv .ts-rail-foot { margin-block-start: auto; padding-block-start: var(--space-md); }
.tsv .ts-panel-section { padding: var(--space-md) var(--space-lg) var(--space-lg); }
.tsv .ts-panel-section[hidden] { display: none; }
/* The golfers side by side, a white card each on the grey ground; they scroll sideways rather than wrap. */
.tsv .ts-players { display: flex; gap: var(--space-md); margin: 0 0 var(--space-md); padding: 0 0 var(--space-2xs); overflow-x: auto; list-style: none; }
.tsv .ts-player { display: grid; flex: 0 0 15rem; align-content: start; gap: var(--space-2xs); min-width: 0; padding: var(--space-sm) var(--space-md) var(--space-md); border: 0; border-radius: var(--radius-sm); background: var(--card); }
.tsv .ts-player[aria-current="true"] { background: color-mix(in srgb, var(--primary) 7%, var(--card)); }
.tsv .ts-player[data-attendance-state="no_show"] { background: color-mix(in srgb, var(--caution-text) 8%, var(--card)); }
.tsv .ts-player-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); height: var(--space-3xl); }
.tsv .ts-player-head > strong { min-width: 0; overflow: hidden; font-size: var(--fs-14); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.tsv .ts-player-meta { min-width: 0; overflow-wrap: anywhere; color: var(--text-muted); font-size: var(--fs-13); }
.tsv .ts-player-state { font-size: var(--fs-13); }
.tsv .ts-player-state[data-attendance-state="arrived"], .tsv .ts-player-state[data-attendance-state="checked_in"] { color: var(--success-text); }
/* Arrived, Check in and No-show are one segmented strip: square tiles a hairline apart, the strip's ends rounded. */
.tsv .ts-player-attendance { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1px; margin-block-start: var(--space-sm); overflow: hidden; border-radius: var(--tsv-inner-radius); background: var(--border); }
.tsv .ts-player-attendance gk-button { --btn-radius: 0; --btn-alt-bg: var(--admin-table-head); --btn-alt-border: transparent; --btn-primary-border: transparent; --btn-min-height: var(--control-height); }
.tsv .ts-player-menu > summary.ts-tool { --control-height: var(--space-3xl); min-height: var(--space-3xl); padding: 0; width: var(--space-3xl); }
.tsv .ts-editor-money { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-3xl); margin: 0; padding: var(--space-sm) 0 0; border: 0; }
.tsv .ts-editor-money > div { display: flex; align-items: baseline; gap: var(--space-sm); }
.tsv .ts-editor-money dt { color: var(--text-muted); font-size: var(--fs-13); }
.tsv .ts-editor-money dd { margin: 0; font-size: var(--fs-16); font-weight: 600; font-variant-numeric: tabular-nums; }
.tsv .ts-editor-money .party-payment:is([data-payment-state="unpaid"], [data-payment-state="partially_paid"], [data-payment-state="pending"]) { color: var(--caution-text); }
/* Charges are plain rows, a hairline apart. */
.tsv .ts-lines { display: grid; margin: 0 0 var(--space-md); padding: 0; list-style: none; background: var(--card); border-radius: var(--radius-sm); }
.tsv .ts-line { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) var(--space-md); font-size: var(--fs-13); font-variant-numeric: tabular-nums; }
.tsv .ts-line + .ts-line { box-shadow: inset 0 1px 0 var(--border); }
.tsv .ts-paid { margin: 0 0 var(--space-md); font-weight: 600; }
.tsv .ts-paid:is([data-payment-state="unpaid"], [data-payment-state="partially_paid"], [data-payment-state="pending"]) { color: var(--caution-text); }
/* The notes run along the foot of the panel, the width of the panel, on the note colour. */
.tsv .ts-panel-body .ts-notes { grid-column: 1 / -1; order: 99; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-md); }
.tsv .ts-notes, .tsv .ts-editor fieldset.ts-notes { margin: 0; padding: var(--space-sm) var(--space-lg); border: 0; background: var(--caution-bg); }
.tsv .ts-notes .ts-note-strip { flex: 1 1 auto; margin: 0; padding: 0; border: 0; background: transparent; }
.tsv .ts-notes .ts-note-strip > summary { min-height: 0; padding: 0; color: var(--text-muted); font-weight: 500; }
.tsv .ts-notes > legend { float: none; display: contents; font-size: var(--fs-13); font-weight: 600; }
.tsv .ts-notes--read > p { margin: 0; font-size: var(--fs-13); }
.tsv .ts-note-empty { color: var(--text-muted); }
.tsv .ts-note-strip > .note-create, .tsv .ts-notes .note-create { display: flex; flex-wrap: wrap; align-items: start; gap: var(--space-sm); padding: var(--space-xs) 0 0; border: 0; }
.tsv .ts-note-field { flex: 1 1 16rem; min-width: 0; }
.tsv .ts-note-field textarea { box-sizing: border-box; width: 100%; min-height: var(--control-height); resize: vertical; }
.tsv .ts-note-audience select { min-height: var(--control-height); }
.tsv .drawer:not(.ts-booking) [data-form="reservation"] { padding-top: var(--space-lg); }
/* A new booking: no rail, the golfer cards edit in place with underlined fields, the next golfer is a dashed card, and the
   contact and total sit on one line under them. */
.tsv .ts-panel-body--plain { grid-template-columns: minmax(0, 1fr); }
.tsv .ts-panel-body--plain > * { grid-column: 1; }
.tsv .ts-panel-status { margin: var(--space-sm) var(--space-lg) 0; color: var(--text-muted); font-size: var(--fs-13); }
.tsv .ts-pill--select { padding-inline-end: 0; }
.tsv .ts-pill--select select { min-height: 0; height: 100%; padding: 0 var(--space-xl) 0 0; border: 0; background-color: transparent; color: inherit; font: inherit; cursor: pointer; }
.tsv .ts-line-input { box-sizing: border-box; width: 100%; min-height: var(--control-height); margin: 0; padding: 0 var(--space-2xs); border: 0; border-bottom: 1px solid var(--border-strong); border-radius: 0; background-color: transparent; color: var(--text); font: inherit; font-size: var(--fs-14); }
.tsv .ts-line-input:focus, .tsv .ts-line-input:focus-visible { outline: none; box-shadow: none; border-width: 0 0 2px; border-style: solid; border-color: transparent transparent var(--primary); }
/* Finding a customer is a quiet line over the golfers, opening in place: no box on the panel's ground. */
.tsv .ts-booking .customer-lookup { margin: var(--space-sm) var(--space-lg) 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.tsv .ts-booking .customer-lookup > summary { display: inline-flex; min-height: 0; padding: var(--space-2xs) 0; border: 0; color: var(--text-muted); font-size: var(--fs-13); font-weight: 500; }
.tsv .ts-booking .customer-lookup[open] { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); background: var(--card); }
.tsv .ts-player--edit { gap: var(--space-xs); }
.tsv .ts-card-remove { --btn-pad: 0; --btn-radius: var(--tsv-inner-radius); --btn-sm-min-height: var(--space-3xl); --btn-ghost-color: var(--text-muted); width: var(--space-3xl); }
.tsv .ts-card-remove .tool-icon, .tsv .ts-card-remove gk-icon { width: 16px; height: 16px; }
.tsv .ts-player-add { display: flex; flex: 0 0 9rem; }
/* The dashed card is the outline; the shared button inside it fills it with no outline of its own. */
.tsv :is(.ts-player-add, .ts-add-golfer) { display: flex; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm); }
.tsv :is(.ts-player-add, .ts-add-golfer):hover { border-color: var(--primary); }
.tsv :is(.ts-player-add, .ts-add-golfer) > gk-button { --btn-gap: var(--space-xs); --btn-radius: var(--radius-sm); --btn-ghost-color: var(--text-muted); --btn-font-size: var(--fs-13); --btn-min-height: 7rem; flex: 1; }
.tsv .ts-player-add .tool-icon { width: 24px; height: 24px; }
.tsv .ts-booking-contact { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-sm) var(--space-lg); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); background: var(--card); }
.tsv .ts-booking-contact > .ts-line-input { flex: 1 1 14rem; width: auto; }
.tsv .ts-booking-total { display: flex; align-items: baseline; gap: var(--space-sm); margin-inline-start: auto; color: var(--text-muted); font-size: var(--fs-13); }
.tsv .ts-booking-total strong { color: var(--text); font-size: var(--fs-16); font-variant-numeric: tabular-nums; }
.tsv .ts-line--total { font-weight: 600; }
.tsv .ts-plain-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.tsv .ts-price-sheet .ts-lines { max-width: 28rem; }
.tsv .ts-proposal-when { margin: 0 0 var(--space-sm); font-weight: 500; }
/* GolfKit's own new booking: the same golfer cards, built from the draft's golfer rows. */
.tsv .ts-new-golfers { display: flex; gap: var(--space-md); margin-block-end: var(--space-md); overflow-x: auto; }
.tsv .ts-golfer-cards { display: flex; gap: var(--space-md); }
.tsv .ts-golfer-cards > .native-golfer-draft { display: grid; flex: 0 0 15rem; align-content: start; gap: var(--space-xs); padding: var(--space-sm) var(--space-md) var(--space-md); border-radius: var(--radius-sm); background: var(--card); }
.tsv .ts-golfer-cards gk-field { --field-label-font-size: var(--fs-13); --field-label-color: var(--text-muted); }
.tsv .ts-golfer-cards input { box-sizing: border-box; width: 100%; min-height: var(--control-height); padding: 0 var(--space-2xs); border: 0; border-bottom: 1px solid var(--border-strong); border-radius: 0; background: transparent; box-shadow: none; }
.tsv .ts-golfer-cards input:focus { outline: none; box-shadow: none; border-bottom: 2px solid var(--primary); }
.tsv .ts-add-golfer { flex: 0 0 9rem; }
.tsv .ts-add-golfer .tool-icon { width: 24px; height: 24px; }
.tsv .ts-inline-select { display: flex; align-items: baseline; gap: var(--space-sm); color: var(--text-muted); font-size: var(--fs-13); }
.tsv .ts-inline-select select { width: auto; min-width: 8rem; }
.tsv .inspector-section { margin-block: var(--space-md); padding-block: var(--space-sm); border-bottom: 1px solid var(--border); }
.tsv .inspector-section h3 { margin: 0 0 var(--space-sm); font-size: var(--fs-16); }
.tsv .inspector-summary { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-md); }
.tsv .inspector-golfers { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); }
.tsv .inspector-golfers li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; border-top: 1px solid var(--border); }
.tsv .inspector-golfers li > div { flex: 1; min-width: 9rem; }
.tsv .inspector-golfers li > div > span { display: block; color: var(--text-muted); font-size: var(--fs-12); }
.tsv [class^="inspector-"] > summary { cursor: pointer; padding-block: var(--space-sm); font-weight: 600; }
.tsv .inspector-charges { width: 100%; font-size: var(--fs-12); }
.tsv .inspector-charges th, .tsv .inspector-charges td { padding: var(--space-xs); }
.tsv .preview-dialog > * + * { margin-top: var(--space-lg); }
.tsv .preview-dialog > [slot="actions"] { margin-top: 0; }
.tsv .preview-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--space-sm); }
.tsv .consequence-list { display: grid; gap: var(--space-sm); }
.tsv .consequence-list li span { display: block; color: var(--text-muted); }

/* The printable day sheet exists only on paper. */
.tsv .print-sheet { display: none; }
@container tee-sheet (max-width: 720px) {
.tsv .day-actions[open], .tsv .day-notices-disclosure[open] { grid-column: 1 / -1; }
  .tsv .global-search-results li { grid-template-columns: 1fr; }
  .tsv .view-tabs { max-width: 100%; }
  .tsv .workspace { padding-bottom: var(--space-4xl); }
.tsv .starter-slot > header, .tsv .starter-party, .tsv .tv-view li { grid-template-columns: 1fr; }
}
@container tee-sheet (max-width: 480px) {
  .tsv .workspace { padding-inline: var(--space-lg); }
.tsv [data-app-shell] > gk-alert { margin-inline: var(--space-sm); }
}
@media (pointer: coarse) {
  .tsv { --tsv-row-height: var(--gk-min-tap, 44px); }
}
@media (forced-colors: active) {
  .tsv .resource-lane-slot, .tsv .player-position--unavailable, .tsv .attendance-actions { border: 2px solid CanvasText; }
}
@media print {
  @page { size: A4; margin: 10mm; }
  /* Paper holds the printed sheet and nothing of the screen: no toolbar, Adjust bar, editor, banner or sheet chrome. */
  .tsv [data-app-shell] > :not(.print-sheet), .tsv gk-sheet, .tsv gk-modal, .tsv gk-alert { display: none !important; }
  .tsv .print-sheet { display: block; color: var(--text); background: var(--card); font: var(--fs-12) / var(--lh-snug) var(--font-body); }
  .tsv .print-sheet h1 { margin: 0 0 var(--space-2xs); font-size: var(--fs-16); }
  .tsv .print-sheet > p { margin: 0 0 var(--space-xs); }
  .tsv .print-sheet > p:last-child { margin: var(--space-xs) 0 0; break-inside: avoid; }
  .tsv .print-sheet gk-data-table { overflow: visible; border: 0; border-radius: 0; }
  .tsv .print-sheet table { width: 100%; table-layout: fixed; border-collapse: collapse; }
  .tsv .print-sheet thead { display: table-header-group; }
  .tsv .print-sheet th, .tsv .print-sheet td { padding: var(--space-3xs) var(--space-2xs); border: 1px solid var(--border-strong); text-align: left; }
  .tsv .print-sheet tr { break-inside: avoid; page-break-inside: avoid; }
  .tsv .print-sheet--day + .print-sheet--day { break-before: page; }
  .tsv .print-sheet--day .print-col-time { width: 16mm; }
  .tsv .print-sheet--day .print-col-notes { width: 45mm; }
  .tsv .print-sheet--day tr[data-closed] td { color: var(--text-muted); }
  .tsv .print-sheet small { color: var(--text-muted); font-size: var(--fs-12); }
  .tsv a { color: var(--text); text-decoration: none; }
}

.tsv .operational-messages, .tsv .allocation-workspace { display: block; margin-block: var(--space-md); }
.tsv .operational-messages form { display: grid; gap: var(--space-sm); margin-block: var(--space-sm); }
.tsv .operational-messages label { display: grid; gap: var(--space-3xs); }
.tsv .operational-messages textarea, .tsv .operational-messages input:not([type=checkbox]) { width: 100%; min-width: 0; }
.tsv .allocation-workspace form { display: grid; gap: var(--space-sm); margin-block: var(--space-sm); }
.tsv .allocation-workspace label { display: grid; gap: var(--space-3xs); }
.tsv .allocation-workspace input:not([type=checkbox]), .tsv .allocation-workspace textarea, .tsv .allocation-workspace select { width: 100%; min-width: 0; }

.tsv .configuration-task-stages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); margin-block-start: var(--space-2xl); align-items: start; }
.tsv .configuration-task-stages > :first-child { grid-column: 1 / -1; }
.tsv .configuration-task-step form { display: grid; gap: var(--space-lg); }
.tsv .configuration-task-step form > gk-button { justify-self: start; }
.tsv .support-details pre, .tsv .admin-support-details code { max-width: 100%; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.tsv .configuration-task .form-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.tsv .configuration-task input, .tsv .configuration-task select, .tsv .configuration-task textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.tsv .configuration-task-step, .tsv .configuration-task-step form { min-width: 0; grid-template-columns: minmax(0, 1fr); }
@container tee-sheet (max-width: 760px) {
  .tsv .configuration-task-stages { grid-template-columns: minmax(0, 1fr); }
}

/* Activity floats under the toolbar like a menu, so opening it never pushes the sheet down. */
.tsv [data-app-shell] { position: relative; }
.tsv .change-centre { position: absolute; z-index: 35; inset-block-start: calc(var(--space-lg) + var(--control-height) + var(--space-xs)); inset-inline-end: var(--tsv-gutter); box-sizing: border-box; width: min(28rem, calc(100% - 2 * var(--tsv-gutter))); max-height: min(70vh, 40rem); overflow: auto; margin: 0; padding: var(--space-md); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); box-shadow: var(--elevation-2); min-width: 0; }
.tsv .change-centre header, .tsv .change-centre-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); }
.tsv .change-centre h2 { margin: 0; }
.tsv .change-centre > p { color: var(--text-muted); font-size: var(--fs-12); }
.tsv .change-centre ol { list-style: none; padding: 0; margin-block: var(--space-sm); max-height: min(55vh, 36rem); overflow: auto; }
.tsv .change-centre li { display: flex; align-items: start; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm); border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.tsv .change-centre li > div { flex: 1 1 16rem; min-width: 0; }
.tsv .change-centre li p { margin-block: var(--space-2xs); }
.tsv .change-centre li.change-unread { border-inline-start: 3px solid var(--accent); }
.tsv .change-centre dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-2xs) var(--space-sm); font-size: var(--fs-12); margin-block: var(--space-xs); }
.tsv .change-centre dd { margin: 0; }
.tsv .change-centre time, .tsv .change-centre small { color: var(--text-muted); font-size: var(--fs-11); }
.tsv .change-new { display: inline-block; margin-inline-start: var(--space-xs); color: var(--accent); font-size: var(--fs-12); }