/* bookings: the calendar (js/bookings-cal.js, with js/bookings-kit.js for the lines a card adds), a booking's page and
   its boxes (js/pages/bookings.js, js/blocks/advance.js, lineup.js, notes.js). Theme tokens only; an act's own colour
   arrives as --act on the element that shows it. .bk-calview is the calendar's frame in every view (.bk-mode-month,
   -two, -week, -three, -day); .bk-monthview is on it only in the month, .bk-dayview only on one day. */

/* ------------------------------ the calendar's frame, in every view ------------------------------ */
.bk-head-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.page-head .bk-head-actions .btn { min-width: 0; }
.bk-calview > .page-head h1, .bk-dayview .cal-title, .bk-title { outline: none; }
/* The filter chips, under the calendar and above Coming up: nearer the calendar they filter than the list under them. */
.bk-filters { display: grid; gap: 2px; margin: -8px 0 12px; }
.bk-filters .chips { margin-bottom: 0; }
.bk-filters .chip { display: inline-flex; align-items: center; gap: 6px; }
.bk-swatch { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--act, var(--muted)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 30%, transparent); }

/* The row of view buttons: Month, 2 weeks, Week, 3 days, Day. On a narrow phone it scrolls sideways inside itself,
   so the page never does. */
.bk-cal-panel { min-width: 0; }
.bk-views { display: flex; gap: 3px; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 3px; margin-bottom: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.bk-views::-webkit-scrollbar { display: none; }
.bk-view { flex: 1 0 auto; min-height: var(--hit); padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: .88rem; white-space: nowrap; cursor: pointer; }
.bk-view:hover { background: var(--bg2); }
.bk-view.on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.bk-view:focus-visible { outline-offset: -3px; } /* inside the button: the row would clip a ring around it */
/* What a view draws: a swipe across it steps on or back, a scroll up or down is the page's. */
.bk-body { min-width: 0; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.bk-day-add { display: flex; margin-top: 10px; }

/* ------------------------------ month, two weeks and the week: day squares ------------------------------ */
.bk-day { min-width: 0; }
.bk-day .more { line-height: 1.2; }
/* status tones for the calendar's lines and dots, and for a block or pill with no act's colour */
.bk-dot, .bk-mini, .bk-ev { --tone: var(--muted); }
.bk-dot.st-offer, .bk-mini.st-offer, .bk-ev.st-offer { --tone: var(--accent); }
.bk-dot.st-confirmed, .bk-mini.st-confirmed, .bk-ev.st-confirmed, .bk-dot.st-settled, .bk-mini.st-settled, .bk-ev.st-settled { --tone: var(--ok); }
.bk-dot.st-advanced, .bk-mini.st-advanced, .bk-ev.st-advanced { --tone: var(--blue); }
.bk-dot.st-cancelled, .bk-mini.st-cancelled, .bk-ev.st-cancelled { --tone: var(--danger); }
/* phones: a dot per booking (hollow while on hold or an offer), a bar for a booking over several days */
.bk-minis { display: none; }
.bk-dots { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; margin-top: auto; }
.bk-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--act, var(--tone)); border: 1.5px solid var(--act, var(--tone)); }
.bk-dot.st-hold, .bk-dot.st-offer { background: transparent; }
.bk-dot.st-cancelled { opacity: .35; }
.bk-dot.st-done { opacity: .7; }
.bk-dot.bk-bar { order: -1; height: 6px; border-radius: 3px; flex: 0 0 100%; }
.bk-dot.bk-bar.bk-seg-start { flex-basis: calc(100% + 5px); margin-right: -5px; border-radius: 3px 0 0 3px; }
.bk-dot.bk-bar.bk-seg-mid { flex-basis: calc(100% + 10px); margin: 0 -5px; border-radius: 0; }
.bk-dot.bk-bar.bk-seg-end { flex-basis: calc(100% + 5px); margin-left: -5px; border-radius: 0 3px 3px 0; }
/* wider screens: a line per booking with its kind and name */
@media (min-width: 560px) {
  .bk-minis { display: grid; gap: 2px; min-width: 0; }
  .bk-dots { display: none; }
}
.bk-mini { display: block; min-width: 0; font-size: .7rem; line-height: 1.4; padding: 0 4px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text);
  background: color-mix(in srgb, var(--tone) 18%, var(--bg2)); border-left: 3px solid var(--act, var(--tone)); }
.bk-mini.st-hold, .bk-mini.st-offer { background: var(--bg2); outline: 1px dashed var(--tone); outline-offset: -1px; }
.bk-mini.st-cancelled { text-decoration: line-through; opacity: .55; }
.bk-mini.st-done, .bk-mini.st-settled { opacity: .8; }
.bk-mini.bk-seg-start { margin-right: -5px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.bk-mini.bk-seg-mid { margin: 0 -5px; border-radius: 0; border-left-width: 0; padding-left: 7px; }
.bk-mini.bk-seg-end { margin-left: -5px; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0; padding-left: 7px; }
.bk-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .75rem; margin-top: 8px; padding: 0 2px; }
.bk-legend > span { display: inline-flex; align-items: center; gap: 5px; }
/* two weeks and the week: taller squares with each booking's time and name on every screen. A square is a container.
   Where the time and the name do not both fit on one line (a phone, or large text), the name goes on a line of its own
   under the time, cut short with an ellipsis, and the text shrinks with the square (to .7rem at most) so the time always
   shows whole. Where a name would be too small to read (seven squares across 320 px), the time is alone. The first
   square and a 1st say the month in small letters, over the number where they do not fit side by side. */
.bk-day-tall { min-height: 78px; container: bk-square / inline-size; }
.bk-day-tall .bk-minis { display: grid; gap: 2px; min-width: 0; }
.bk-day-tall .bk-mini { display: flex; gap: .35em; font-size: clamp(.5rem, 26cqi, .7rem); font-variant-numeric: tabular-nums; }
.bk-mini-time { flex: none; }
.bk-mini-name { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bk-mon { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.bk-day.today .bk-mon { color: inherit; }
/* the time over the name, unless a square has room for both and ten letters of the name ("21:15" is about three
   times as wide as its text size, and a line's edges take 4px) */
@container bk-square (max-width: 6.5rem) {
  .bk-day-tall .bk-mini { flex-direction: column; gap: 0; line-height: 1.25; font-size: min(.7rem, calc((100cqi - 4px) / 3.1)); }
  .bk-day-tall .bk-mini-name { flex: none; }
}
@container bk-square (max-width: 32px) { .bk-mini-time + .bk-mini-name { display: none; } }
@container bk-square (max-width: 3rem) {
  .bk-more-word { display: none; }
  .bk-day-tall .num { font-size: clamp(.6rem, 44cqi, .8rem); }
  .bk-day-tall.today .num { padding: 0 4px; }
  .bk-mon { display: block; font-size: clamp(.45rem, 26cqi, .62rem); letter-spacing: 0; }
}
/* a phone: taller squares, for three bookings with a time and a name each; the room inside goes to the lines */
@media (max-width: 559px) { .bk-day-tall { min-height: 124px; padding-inline: 2px; } .bk-day-tall .bk-mini { padding: 0 1px; } .bk-day-tall .bk-mini:not(.bk-seg-mid, .bk-seg-end) { border-left-width: 2px; } }
/* Extra-large text on a very narrow phone: the weekdays over the squares stay apart. There a square of the two weeks
   has room for the time alone, and is no taller than its lines need. */
@media (max-width: 359px) { html[data-text=xlarge] .bk-cal .wd { font-size: .58rem; letter-spacing: 0; } .bk-day-tall { min-height: 78px; } }
@media (min-width: 560px) { .bk-day-tall { min-height: 132px; } }
/* The week: its seven squares are one row, as tall as the two weeks' two rows with the gap between them, so the calendar
   keeps its height from one view to the other and a square holds six lines before "+N". */
.bk-cal-week .bk-day-tall { min-height: 251px; }
@media (max-width: 359px) { .bk-cal-week .bk-day-tall { min-height: 159px; } }
@media (min-width: 560px) { .bk-cal-week .bk-day-tall { min-height: 267px; } }
@media (min-width: 1000px) { .bk-calview .bk-cal-week .bk-day-tall { min-height: 323px; } }

/* Coming up, under every view */
.bk-agenda-head { margin-top: 4px; }
.bk-agenda > .actions { margin-top: 0; }
.bk-card { display: flex; align-items: center; gap: 12px; border-left: 4px solid var(--act, var(--line)); }
.bk-date { flex: none; width: 3.2rem; display: grid; justify-items: center; gap: 1px; padding: 5px 0; border-radius: 10px; background: var(--bg2); color: var(--muted); font-size: .66rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .06em; }
.bk-date b { font-size: 1.35rem; color: var(--text); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.bk-card-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
/* The status sits beside the name while the name keeps about seven letters' width; on a narrow phone with large text it
   drops under the name instead, so the name is not broken inside its words (as the booking's own header does). */
.bk-card-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 4px 8px; }
.bk-card-title { flex: 1 1 7rem; min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
.bk-card-top .pill { flex: none; margin-top: 2px; }
.bk-card-sub { display: block; overflow-wrap: anywhere; }
/* what a card adds under its own lines (bookings-kit.js cardExtras): the overlap note and "Didn’t go"; the house-rules
   chip between them is css/backline.css's. The note's words carry its meaning, not its colour. */
.bk-overlap { display: block; font-size: .78rem; color: var(--amber); overflow-wrap: anywhere; }
.bk-went { justify-self: start; }
/* "formerly The Night Owls": a booking from before its act changed its name, in small type under the booking's name
   (a Coming up card, the booking's own header). */
.bk-formerly { display: block; font-size: .85rem; font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }
.bk-hero > .bk-formerly { margin-top: -8px; }
.bk-none { margin: 4px 2px 0; }
/* A view the filters leave empty: "Nothing on with these filters." and Clear the filters, at the top of what it draws. */
.bk-filtered { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 8px; }
.bk-filtered .bk-none { margin: 0 2px; font-size: .9rem; } /* in rem: it follows Text size */

/* ------------------------------ three days and one day: the time grid ------------------------------ */
/* --n: the days side by side (1 or 3); --hh: the height of an hour. The hours' gutter is sized in rem. */
.bk-grid { --gut: 2.9rem; display: grid; min-width: 0; }
.bk-grid-heads, .bk-grid-body { display: grid; grid-template-columns: var(--gut) repeat(var(--n), minmax(0, 1fr)); }
.bk-grid-head { display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 0; min-height: var(--hit); padding: 2px 2px 5px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: .72rem; line-height: 1.2; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.bk-grid-head:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.bk-grid-head .bk-daynum { font-size: 1rem; letter-spacing: 0; color: var(--text); }
/* today's number sits in a pill, as on the month's squares (a shape, not only a colour) */
.bk-grid-head.today .bk-daynum { padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
/* the "any time" row: no time yet, or a booking over several days (one pill across its days) */
.bk-any { display: grid; grid-template-columns: var(--gut) minmax(0, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bk-any-label { align-self: center; padding-right: 4px; font-size: .64rem; line-height: 1.15; color: var(--muted); }
.bk-any-pills { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-auto-flow: row dense; gap: 2px 0; min-width: 0; padding: 3px 0;
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: calc(100% / var(--n)) 100%; }
.bk-ev-any, .bk-block { box-sizing: border-box; display: block; min-width: 0; margin: 0; overflow: hidden; text-align: left; font: inherit; color: var(--text); cursor: pointer; touch-action: pan-y;
  background: color-mix(in srgb, var(--act, var(--tone)) 24%, var(--card)); background-clip: padding-box; border: 1px solid transparent; border-left: 3px solid var(--act, var(--tone)); border-radius: 6px; }
.bk-ev-any { min-height: calc(var(--hit) * .64); margin: 0 1px 0 2px; padding: 2px 6px; font-size: .72rem; line-height: 1.3; container: bk-entry / inline-size; }
.bk-any-text { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.bk-ev-any.bk-any-from { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }  /* it began before the first day shown */
.bk-ev-any.bk-any-on { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } /* it runs on after the last */
/* the hours: a line an hour, each booking a block at the time the band plays */
.bk-grid-body { position: relative; box-sizing: content-box; margin-top: .75rem; border-bottom: 1px solid var(--line); } /* its height is the hours' exactly; the last line is under them */
.bk-hours { position: relative; min-width: 0; }
.bk-hour { position: absolute; right: 5px; transform: translateY(-50%); font-size: .66rem; line-height: 1; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.bk-hour .bk-next { margin-left: 1px; font-size: .52rem; }
/* Small words on the calendar's panel (--bg2): the plain --muted there is under 4.5:1 in several light themes (Brass 3.95),
   and the accent “+1” under 3:1. Mixed with the text colour they read at 5.5:1 or better in every theme, as the digital
   player's small lines do; the “+1” takes its hour's colour. */
.cal .wd, .bk-none, .bk-hour, .bk-any-label, .bk-grid-head, .bk-went { color: color-mix(in srgb, var(--muted) 70%, var(--text)); }
.bk-hour .bk-next { color: inherit; }
.bk-col { position: relative; min-width: 0; border-left: 1px solid var(--line); background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% var(--hh); }
.bk-col.today { background-color: color-mix(in srgb, var(--accent) 7%, transparent); }
/* A block is a container, so a short one (less than two lines of its own text high, whatever the text size) puts its
   name and its time on one line. */
.bk-block { position: absolute; padding: 2px 4px; font-size: .7rem; line-height: 1.25; container: bk-entry / size; }
.bk-col .bk-ev.holding { position: absolute; } /* the press-and-hold fill makes a card relative: a block stays where it is */
.bk-block:focus-visible { z-index: 1; }
.bk-block-in { display: block; min-width: 0; height: 100%; } /* as tall as the block, so the name is at its top, where the set starts (a button would centre it) */
.bk-block-title, .bk-block-sub { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bk-block-sub { color: var(--muted); font-variant-numeric: tabular-nums; }
.bk-block-went { font-weight: 600; }
@container bk-entry (max-height: 2.45em) {
  .bk-block-in { display: flex; align-items: baseline; gap: .5em; height: auto; } /* the one line sits in the middle of a short block */
  .bk-block-title { flex: 1 1 auto; min-width: 0; }
  .bk-block-sub { flex: none; max-width: 60%; }
  .bk-block-where { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* out of sight, still read out */
}
/* a narrow block or pill (three days on a phone, sets side by side): the name and the time, without the kind's icon
   and the word before the time (out of sight, still read out), and cut clean where an ellipsis would take a letter's
   room */
@container bk-entry (max-width: 6em) {
  .bk-ico { display: none; }
  .bk-block-by { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .bk-block-title, .bk-block-sub { text-overflow: clip; }
}
.bk-mode-day .bk-block { padding: 2px 8px; font-size: .82rem; } /* an hour (52px) holds two lines of this text at every text size */
@media (min-width: 560px) { .bk-mode-three .bk-block { padding: 2px 6px; font-size: .78rem; } .bk-ev-any { font-size: .78rem; } }
/* one of many sets side by side: no padding, so the block can be as narrow as its lane */
.bk-grid .bk-col .bk-block-slim { padding-left: 1px; padding-right: 0; }
/* a hold or an offer is dashed, as its line in the month is; a cancelled booking is struck through and faded */
.bk-block.st-hold, .bk-block.st-offer, .bk-ev-any.st-hold, .bk-ev-any.st-offer { background-color: var(--card); border-style: dashed; border-color: var(--act, var(--tone)); border-left-style: solid; }
.bk-block.st-cancelled, .bk-ev-any.st-cancelled { opacity: .6; }
.bk-block.st-cancelled .bk-block-title, .bk-ev-any.st-cancelled .bk-any-text { text-decoration: line-through; }
.bk-grid-note { margin: 8px 2px 0; }
/* High contrast and forced colours: the buttons, blocks and pills keep an edge. */
html[data-contrast=high] .bk-views { border-width: 2px; }
html[data-contrast=high] .bk-block, html[data-contrast=high] .bk-ev-any { border-color: var(--line); border-left-color: var(--act, var(--tone)); }
@media (forced-colors: active) {
  .bk-views, .bk-block, .bk-ev-any { border: 1px solid CanvasText; }
  .bk-view.on, .bk-grid-head.today .bk-daynum { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* ------------------------------ the booking ------------------------------ */
.card.bk-hero { border-left-color: var(--act, var(--accent)); gap: 10px; } /* .card.bk-hero: styles.css sets the edge with .card.hero, which a single class would not out-rank */
/* As on a card: the status drops under the name where the name would be squeezed (a narrow phone, large text), so no word of it is broken. */
.bk-hero-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0 10px; }
.bk-title { flex: 1 1 8rem; font-size: 1.3rem; min-width: 0; overflow-wrap: anywhere; padding-top: 8px; }
.bk-title-ico { font-size: 1.15rem; }
.bk-status { flex: none; display: inline-flex; align-items: center; justify-content: flex-end; min-height: var(--hit); min-width: var(--hit); padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.bk-status .pill { font-size: .82rem; padding: 5px 11px; }
.bk-status:hover .pill { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.bk-when { overflow-wrap: anywhere; }
.bk-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.bk-time { display: grid; gap: 1px; align-content: start; padding: 6px 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); }
.bk-time > span { font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.bk-time b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.bk-time small { font-size: .72rem; }
.bk-next { margin-left: 3px; color: var(--accent); font-weight: 800; vertical-align: super; font-size: .68rem; }
.bk-time.late { border-color: var(--danger); } .bk-late { color: var(--danger); font-weight: 600; }
.bk-notimes { margin: 0; }
.bk-venue { display: grid; gap: 2px; }
.bk-venue-line { display: flex; align-items: flex-start; gap: 4px; }
.bk-venue-text { flex: 1; min-width: 0; display: grid; overflow-wrap: anywhere; }
.bk-venue-line .btn { flex: none; }
.bk-venue .actions { margin-top: 4px; }
.bk-hero .warn { margin: 0; }
.bk-act-row { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-act { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.bk-client { cursor: default; }
/* Score this show (a role that scores the acts it sees), and its score once logged */
.bk-score { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bk-score .btn.primary { min-width: 0; }
.bk-score-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bk-score-text b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
/* "Pick the act you saw…" is a sentence: where it would be squeezed beside its button, the button goes under it. */
.bk-score-noact .bk-score-text { flex: 1 1 9rem; }
/* The row's words follow the text size, and "Didn’t go" reads as the answer it is. */
.bk-score .bk-score-text { font-size: 1rem; }
.bk-score-went .bk-score-text { font-weight: 700; }
.bk-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.bk-contact-who { display: grid; min-width: 0; overflow-wrap: anywhere; }
.bk-contact-btns { display: flex; flex-wrap: wrap; gap: 6px; }
/* Duplicate, Add to calendar, Delete: three in a row while each one's longest word fits. A label wraps between words
   only (never "Duplicat/e"), so on a narrow screen the buttons wrap onto another row instead, and with large text on a
   phone each takes a row of its own, its icon beside the words. */
.bk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.bk-actions .btn { flex: 1 1 0; min-width: min-content; overflow-wrap: normal; flex-direction: column; justify-content: center; gap: 2px; min-height: 60px; padding: 6px 4px; font-size: .82rem; line-height: 1.15; text-align: center; white-space: normal; background: var(--bg2); }
.bk-actions .btn > span { font-size: 1.2rem; line-height: 1; }
@media (max-width: 400px) {
  html[data-text=large] .bk-actions { flex-direction: column; }
  html[data-text=large] .bk-actions .btn { flex: none; flex-direction: row; justify-content: flex-start; gap: 10px; min-height: var(--hit); padding: 6px 14px; text-align: left; }
}
@media (max-width: 480px) {
  html[data-text=xlarge] .bk-actions { flex-direction: column; }
  html[data-text=xlarge] .bk-actions .btn { flex: none; flex-direction: row; justify-content: flex-start; gap: 10px; min-height: var(--hit); padding: 6px 14px; text-align: left; }
}
.bk-actions .bk-delete { color: var(--danger); }
.bk-actions .bk-delete:hover { border-color: var(--danger); }

/* the boxes (blocks); the ones the role keeps out of the way sit in the More boxes fold, laid out the same */
.bk-blocks, .bk-more-blocks { display: grid; gap: 8px; align-items: start; }
.blk { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); scroll-margin-top: 12px; min-width: 0; }
.blk > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; min-height: calc(var(--hit) + 8px); }
.blk > summary::-webkit-details-marker { display: none; }
.blk > summary::after { content: '›'; content: '›' / ''; color: var(--muted); font-size: 1.3rem; transition: transform .15s ease; }
.blk[open] > summary::after { transform: rotate(90deg); }
.blk[open] > summary { border-bottom: 1px solid var(--line); }
.blk > summary:focus-visible { outline: 3px solid var(--focus); border-radius: var(--radius); }
.blk-ico { font-size: 1.25rem; width: 1.7rem; text-align: center; }
.blk-text { display: grid; min-width: 0; }
.blk-title { font-weight: 700; overflow-wrap: anywhere; }
.blk-sum { color: var(--muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blk-body { padding: 10px 12px 12px; display: grid; gap: 8px; min-width: 0; }
.blk-body > .warn { margin: 0; }
.bk-more { margin-top: 8px; border: 1px dashed var(--line); border-radius: var(--radius); scroll-margin-top: 12px; min-width: 0; }
.bk-more > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; min-height: calc(var(--hit) + 8px); color: var(--muted); }
.bk-more > summary::-webkit-details-marker { display: none; }
.bk-more > summary::after { content: '›'; content: '›' / ''; color: var(--muted); font-size: 1.3rem; transition: transform .15s ease; }
.bk-more[open] > summary::after { transform: rotate(90deg); }
.bk-more > summary:focus-visible { outline: 3px solid var(--focus); border-radius: var(--radius); }
.bk-more > summary .blk-title { color: var(--text); }
.bk-more-blocks { padding: 0 8px 8px; }

/* sheets: the kind of booking, its status */
.bk-kinds { display: grid; gap: 8px; }
.bk-kinds .card { margin: 0; }
.bk-kind { display: flex; align-items: center; gap: 12px; }
.bk-kind-ico { flex: none; width: 2.2rem; font-size: 1.7rem; text-align: center; }
.bk-kind-text { display: grid; gap: 2px; min-width: 0; }
@media (min-width: 560px) { .bk-kinds { grid-template-columns: 1fr 1fr; } }
.bk-status-list { display: grid; gap: 6px; }
.bk-status-opt { display: grid; grid-template-columns: 8.2rem minmax(0, 1fr) 1.2rem; align-items: center; gap: 10px; width: 100%; min-height: var(--hit); padding: 9px 12px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); font: inherit; cursor: pointer; }
.bk-status-opt:hover { border-color: var(--accent); }
.bk-status-opt.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.bk-status-opt .pill { justify-self: start; font-size: .8rem; }
.bk-tick { color: var(--accent); font-weight: 800; }
/* Where the pill's column would leave the help only a few words wide (a narrow phone, or large text), the help goes
   under the pill, across the option, with the tick beside them. */
@media (max-width: 340px) { .bk-status-opt { grid-template-columns: minmax(0, 1fr) 1.2rem; row-gap: 4px; } .bk-status-opt > .pill { grid-area: 1 / 1; } .bk-status-opt > .muted { grid-area: 2 / 1; } .bk-status-opt > .bk-tick { grid-area: 1 / 2 / 3 / 3; } }
@media (max-width: 380px) { html[data-text=large] .bk-status-opt { grid-template-columns: minmax(0, 1fr) 1.2rem; row-gap: 4px; } html[data-text=large] .bk-status-opt > .pill { grid-area: 1 / 1; } html[data-text=large] .bk-status-opt > .muted { grid-area: 2 / 1; } html[data-text=large] .bk-status-opt > .bk-tick { grid-area: 1 / 2 / 3 / 3; } }
@media (max-width: 480px) { html[data-text=xlarge] .bk-status-opt { grid-template-columns: minmax(0, 1fr) 1.2rem; row-gap: 4px; } html[data-text=xlarge] .bk-status-opt > .pill { grid-area: 1 / 1; } html[data-text=xlarge] .bk-status-opt > .muted { grid-area: 2 / 1; } html[data-text=xlarge] .bk-status-opt > .bk-tick { grid-area: 1 / 2 / 3 / 3; } }
.bk-venue-note { display: block; margin-top: 2px; }
.field .bk-bonus { justify-self: start; margin-top: 4px; }
.bk-del-when { display: block; }

/* ------------------------------ advance checklist ------------------------------ */
.bk-advance { display: grid; gap: 8px; }
.bk-progress .progress { margin: 6px 0 0; }
.bk-advance .check-item .icon-btn { font-size: 1rem; }
.bk-adv-add { margin-top: 2px; } .bk-adv-add input { flex: 1; }
.bk-adv-hint { margin: 0; }
.bk-email { display: grid; gap: 4px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.bk-email h4 { margin: 0; } .bk-email p { margin: 0; }
.bk-email .actions { margin-top: 4px; }
.bk-mail-preview { margin: 6px 0 0; }
.bk-mail-text { margin: 0; padding: 10px; max-height: 360px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: .82rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; color: var(--text); }

/* ------------------------------ line-up & gear ------------------------------ */
.bk-lineup { display: grid; gap: 12px; }
.bk-lineup h4 { margin: 0 0 2px; }
.bk-lineup .actions { margin-top: 6px; }
.bk-clashes { margin: 0; } .bk-clashes ul { margin: 4px 0 0; padding-left: 18px; }
.bk-rows { display: grid; }
.bk-person, .bk-gear-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); min-height: var(--hit); }
.bk-rows > :last-child { border-bottom: 0; }
.bk-av { width: 36px; height: 36px; font-size: .82rem; }
.bk-person.clash .bk-av { background: var(--danger); }
.bk-row-main { flex: 1; min-width: 0; display: grid; gap: 1px; overflow-wrap: anywhere; }
.bk-link { all: unset; box-sizing: border-box; cursor: pointer; font-weight: 700; color: var(--text); min-height: 28px; display: inline-flex; align-items: center; overflow-wrap: anywhere; }
.bk-link:hover { color: var(--accent); text-decoration: underline; }
.bk-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.bk-quick { display: inline-grid; place-items: center; text-decoration: none; }
.bk-clash { color: var(--danger); font-weight: 600; }
.bk-gear-cat + .bk-gear-cat { margin-top: 4px; }
.bk-cat { text-transform: uppercase; letter-spacing: .07em; font-size: .68rem; margin-top: 4px; }
.bk-gear-name { font-weight: 600; }

/* ------------------------------ notes ------------------------------ */
.bk-notes-wrap { display: grid; gap: 4px; }
.bk-notes { min-height: 128px; resize: vertical; }
.bk-notes-state { margin: 0; }

/* ------------------------------ laptops: the calendar beside what is coming up (in every view); the boxes two by two ------------------------------ */
@media (min-width: 1000px) {
  /* Column one: the calendar, then the chips under it (row 3 takes what the calendar needs past Coming up's heading, the
     last row what Coming up needs past that). Column two: Coming up. */
  .bk-calview { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto auto auto 1fr; column-gap: 28px; align-items: start; }
  .bk-calview > .page-head { grid-column: 1 / -1; grid-row: 1; }
  .bk-calview > .bk-cal-panel { grid-column: 1; grid-row: 2 / span 2; }
  .bk-calview > .bk-filters { grid-column: 1; grid-row: 4; }
  .bk-calview > .bk-agenda-head { grid-column: 2; grid-row: 2; margin-top: 0; }
  .bk-calview > .bk-agenda, .bk-calview > .empty { grid-column: 2; grid-row: 3 / span 2; }
  .bk-calview .bk-agenda .list { grid-template-columns: 1fr; }
  .bk-calview .bk-day { min-height: 104px; }
  .bk-calview .bk-day-tall { min-height: 160px; }
  .bk-actions { max-width: 620px; }
  .bk-blocks, .bk-more-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-blocks > .blk[open], .bk-more-blocks > .blk[open] { grid-column: 1 / -1; } /* closed boxes two by two; an open one takes the whole width, never leaving a gap beside it */
}

/* The legend shows the dot shapes (filled, hollow, faded); a day's dots take the act's colour, so the legend's are neutral. */
.bk-legend .bk-dot { --act: var(--text); }
/* Extra-large text on a small phone: the title gives way so the › button stays on screen. */
.bk-calview .cal-title { min-width: 0; }
/* The title gets a row of its own above ‹ Today › where it would be squeezed between them: with extra-large text, on
   a very narrow phone, and for a day's long name on any phone. */
html[data-text=xlarge] .bk-calview .cal-nav { flex-wrap: wrap; justify-content: space-between; }
html[data-text=xlarge] .bk-calview .cal-title { order: -1; flex-basis: 100%; }
@media (max-width: 359px) { .bk-calview .cal-nav { flex-wrap: wrap; justify-content: space-between; } .bk-calview .cal-title { order: -1; flex-basis: 100%; } }
@media (max-width: 479px) { .bk-dayview .cal-nav { flex-wrap: wrap; justify-content: space-between; } .bk-dayview .cal-title { order: -1; flex-basis: 100%; } }