/* backline: styles owned by the backline feature (docs/developers.md). Backline is .bl-, venues .vn-. Theme tokens only. */

/* ---------- shared: cards that are one big button, label/value lists, booking rows ---------- */
.bl-card, .vn-card { display: grid; gap: 5px; cursor: pointer; overflow-wrap: anywhere; }
.bl-card > span, .vn-card > span { display: block; min-width: 0; }
.bl-card-top, .vn-card-top { display: flex !important; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bl-card-name, .vn-card-name { min-width: 0; overflow-wrap: anywhere; }
.bl-card-top .pill, .vn-card-top .pill { flex: none; margin-top: 1px; }
.bl-kv, .vn-kv { display: grid; grid-template-columns: minmax(6.5rem, max-content) minmax(0, 1fr); gap: 7px 14px; margin: 0; align-items: baseline; }
.bl-kv dt, .vn-kv dt { color: var(--muted); font-size: .85rem; }
.bl-kv dd, .vn-kv dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
@media (max-width: 360px) { .bl-kv, .vn-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; } .bl-kv dd, .vn-kv dd { margin-bottom: 6px; } }
.bl-rows, .vn-rows { display: grid; gap: 8px; }
.bl-row, .vn-row { all: unset; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: center; width: 100%; min-height: var(--hit);
  padding: 9px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; color: var(--text); font: inherit; }
.bl-row:hover, .vn-row:hover { border-color: var(--accent); }
.bl-row:focus-visible, .vn-row:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.bl-row-date, .vn-row-date { font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; }
.bl-row-main, .vn-row-main { grid-column: 1 / -1; min-width: 0; overflow-wrap: anywhere; }
.vn-row-went { grid-column: 1 / -1; }
.bl-row-was, .vn-row-was { grid-column: 1 / -1; min-width: 0; overflow-wrap: anywhere; } /* "formerly The Night Owls", under the name of a booking from before its act changed its name */
.bl-row-warn, .vn-row-warn { grid-column: 1 / -1; color: var(--danger); font-size: .85rem; line-height: 1.35; }
.bl-sheet h3, .vn-sheet h3 { margin: 14px 0 6px; }
.bl-sheet .actions, .vn-sheet .actions, .bl-inv-sheet .actions { margin-top: 0; gap: 8px; }
/* Buttons in these sheets share a row (the core .stack makes every button full width, one per line). */
.bl-sheet .actions .btn, .vn-sheet .actions .btn, .bl-inv-sheet .actions .btn { width: auto; flex: 1 1 auto; justify-content: center; }

/* ---------- backline: the items ---------- */
/* Three tiles while each keeps 5.5rem (so with big text on a small phone, two a row): amounts fit rather than
   splitting mid-number, and labels wrap between words. */
.bl-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.5rem), 1fr)); }
.bl-stats .stat b { font-size: clamp(.85rem, 4.2vw, 1.15rem); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.bl-stats .stat span { overflow-wrap: break-word; }
.bl-novalue { margin: -2px 0 10px; }
.bl-owners .bl-n, .vn-kinds .vn-n { opacity: .7; font-variant-numeric: tabular-nums; }
.chip.on .bl-n, .chip.on .vn-n { opacity: .85; }
/* On a wide screen the categories flow side by side in columns instead of one row each. */
@media (min-width: 760px) {
  .bl-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 16px; align-items: start; }
  .bl-groups .list { grid-template-columns: minmax(0, 1fr); }
}
.bl-group > h3 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 10px; } /* the total drops under the name when both do not fit */
.bl-group-sum { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bl-qty { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.bl-sub { overflow-wrap: anywhere; }
.bl-meta { display: flex !important; flex-wrap: wrap; align-items: center; gap: 5px 10px; margin-top: 2px; }
.bl-owner { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line); font-size: .8rem; max-width: 100%; overflow-wrap: anywhere; }
.bl-owner.band { color: var(--muted); }
.bl-loc { overflow-wrap: anywhere; }
.bl-serial { font-variant-numeric: tabular-nums; }
.bl-val { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl-link { all: unset; cursor: pointer; color: var(--accent); font-weight: 600; min-height: var(--hit); display: inline-flex; align-items: center; margin: -10px 0; overflow-wrap: anywhere; }
.bl-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.bl-in-packs { margin: 0; }

/* ---------- backline: the gear by band (item 17), folds that look and behave as the acts list's genre groups ---------- */
/* The heading is one button: the act's name, the count and the chevron on its first line; the total value and your
   investment on the line under it (each drops under the other where the two do not fit). */
.bl-bands { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.bl-band { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.bl-band-h { margin: 0; font-size: 1rem; line-height: 1.25; letter-spacing: 0; text-transform: none; color: inherit; }
.bl-band-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: 100%; min-height: var(--hit); padding: 7px 10px 7px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); color: inherit; font: inherit; font-size: 1.05rem; font-weight: 800; text-align: left; cursor: pointer; }
.bl-band-head:hover { border-color: var(--accent); }
.bl-band-head:hover .bl-band-name, .bl-band-head:focus-visible .bl-band-name { color: var(--accent); }
.bl-band-name { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.bl-band-n { flex: none; min-width: 2em; padding: 2px 8px; border-radius: 999px; background: var(--bg2); color: color-mix(in srgb, var(--muted) 70%, var(--text)); font-size: .85rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.bl-chev { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--bg2); color: var(--muted); transition: transform .2s; }
.bl-band-head[aria-expanded="true"] .bl-chev { transform: rotate(180deg); color: var(--accent); }
.bl-band-sum { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 0 14px; margin-top: -2px; padding-bottom: 2px; font-size: .85rem; font-weight: 500; line-height: 1.35; color: color-mix(in srgb, var(--muted) 70%, var(--text)); }
.bl-band-sum > span { min-width: 0; overflow-wrap: anywhere; }
.bl-band-sum b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl-band-list { padding-left: 10px; min-width: 0; }
/* A card in a fold is a little narrower: its value ("$1,234,567 each · $3,703,701") wraps between the amounts, never inside one. */
.bl-band-list .bl-val { white-space: normal; overflow-wrap: normal; text-align: right; }
.bl-band-list .bl-group > h3 { margin-top: 10px; }
.bl-band-list .bl-group:first-child > h3 { margin-top: 2px; }
@media (min-width: 760px) { .bl-band-list .bl-group > h3 { margin-top: 2px; } }
@media (prefers-reduced-motion: reduce) { .bl-chev { transition: none; } }

/* ---------- backline: stage packs ---------- */
.bl-intro { margin: -2px 0 12px; }
.bl-pack .card-row { align-items: flex-start; }
.bl-pack .card-row > .grow { min-width: 0; overflow-wrap: anywhere; padding-top: 4px; }
.bl-pack .icon-btn { margin-left: -4px; }
.bl-pack-line { font-size: .9rem; margin-top: 6px; overflow-wrap: anywhere; }
.bl-pack-line b { color: var(--muted); font-weight: 600; }
.bl-pack-notes { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 6px; }

/* ---------- backline: the inventory preview (the printed copy uses doc-css.js) ---------- */
.bl-inv-paper { max-height: 52vh; }
.bl-inv-paper table { min-width: 620px; }
.bl-inv-paper:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cs-paper .bl-inv tr.bl-cat td { font-weight: 700; background: color-mix(in srgb, var(--paper-ink) 7%, transparent); }
.cs-paper .bl-inv td.bl-no { opacity: .6; }
.bl-inv-actions { margin-top: 2px; }

/* ---------- venues ---------- */
.vn-kind { flex: none; }
/* The name wraps between words; the kind pill sits beside it while the name keeps about 7rem, else drops under it. */
.vn-card-top { flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; }
.vn-card-name { flex: 1 1 7rem; overflow-wrap: break-word; }
.vn-addr { overflow-wrap: anywhere; }
.vn-facts { display: flex !important; flex-wrap: wrap; gap: 5px 8px; margin-top: 2px; }
.vn-fact { padding: 2px 9px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line); font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vn-next { color: var(--accent); font-weight: 600; overflow-wrap: anywhere; }
.vn-top { display: grid; gap: 6px; justify-items: start; }
.vn-address { margin: 0; }
.vn-map { display: grid; gap: 6px; }
.vn-map .minimap { margin-bottom: 0; }
.vn-map .actions { margin-top: 0; }
.vn-contact-name { margin: 0 0 8px; font-weight: 600; overflow-wrap: anywhere; }
.vn-notes { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 560px) { .vn-sheet .actions .btn, .bl-sheet .actions .btn, .bl-inv-sheet .actions .btn { flex: 0 0 auto; } }

/* ---------- venues: house rules (js/venues-rules.js) ---------- */
/* The chip: on a show's card, on the venue's card and at the head of the full rules. --r is its colour (green, amber
   or red); a dot of it sits before the words, and the words say the same (never colour alone). It is a span inside
   cards that are buttons. It wraps on a narrow card and never makes the card wider. */
.vn-chip { --r: var(--ok); display: inline-block; justify-self: start; align-self: flex-start; max-width: 100%; overflow-wrap: anywhere; text-wrap: balance; padding: 2px 9px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--r) 55%, transparent); background: color-mix(in srgb, var(--r) 16%, var(--card)); color: var(--text);
  font-size: .76rem; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-align: left; text-transform: none; }
.vn-chip::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--r); margin-right: 6px; }
.vn-chip-nb { white-space: nowrap; } /* a chip's icon with the first letter after it, and a rule's last word with its ✗: each kept on one line */
.vn-chip-some { --r: var(--amber); }
.vn-chip-strict { --r: var(--danger); }
html[data-contrast=high] .vn-chip { border-width: 2px; border-color: var(--r); }

/* The full rules: a head line (the words "House rules" and the chip) and what is not allowed, allowed, good to know
   and written by hand. On a show's page they sit in a box of their own in the booking's header. Sizes are in rem, so
   the words follow the Text size setting; the list goes to one column where the box is under about 20 letters wide
   (a narrow phone, or large text), and under 360px for a browser without container queries. */
.vn-rules { display: grid; gap: 6px; min-width: 0; font-size: 1rem; container: vn-rules / inline-size; }
.vn-rules-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.vn-rules-name { min-width: 0; overflow-wrap: anywhere; text-wrap: balance; }
.vn-rules-sec .vn-rules-name { display: none; } /* on the venue's sheet the section's heading already says "House rules" */
.vn-rules-sec > p { margin: 0; }
.vn-rules-list { display: grid; grid-template-columns: minmax(5.5rem, max-content) minmax(0, 1fr); gap: 4px 12px; margin: 0; align-items: baseline; }
.vn-rules-list dt { color: color-mix(in srgb, var(--muted) 70%, var(--text)); font-size: .85rem; } /* the plain --muted is under 4.5:1 on a show's page (--bg2) in several light themes */
.vn-rules-list dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 360px) { .vn-rules-list { grid-template-columns: minmax(0, 1fr); gap: 1px; } .vn-rules-list dd { margin-bottom: 5px; } .vn-rules-list dd:last-child { margin-bottom: 0; } }
@container vn-rules (max-width: 20em) { .vn-rules-list { grid-template-columns: minmax(0, 1fr); gap: 1px; } .vn-rules-list dd { margin-bottom: 5px; } .vn-rules-list dd:last-child { margin-bottom: 0; } }
.vn-rules-show { padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); }
html[data-contrast=high] .vn-rules-show { border-width: 2px; }

/* The House rules part of the venue form: a row per rule with two press-buttons (or a short list). On a phone the
   rule's name has a line of its own and the two buttons share the line under it; where the block is wide (about 30
   letters and up: a tablet, a laptop) they sit beside the name. Sizes are in rem here too. */
.vn-rules-edit { gap: 6px; font-size: 1rem; container: vn-rules-edit / inline-size; }
.vn-rules-title { font-weight: 700; }
.vn-rules-group { min-width: 0; margin-top: 4px; }
.vn-rule { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 6px; padding: 7px 0; border-top: 1px solid var(--line); }
.vn-rule-allow { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } /* "Not allowed" is the longer word */
.vn-rule-name { grid-column: 1 / -1; align-self: center; display: flex; align-items: baseline; gap: .3em; min-width: 0; overflow-wrap: break-word; } /* a long name wraps beside its picture, not under it */
.vn-rule-ico { flex: none; width: 1.3em; text-align: center; }
.vn-rule-pick select { grid-column: 1 / -1; }
.vn-rule-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-width: 0; min-height: var(--hit); padding: 6px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg2); color: var(--text); font: inherit; font-size: .85rem; font-weight: 600; line-height: 1.2; cursor: pointer; }
.vn-rule-says { min-width: 0; }
@media (hover: hover) { .vn-rule-btn:hover { border-color: var(--accent); } } /* not on a touch screen, where a hover would stay on a button just cleared */
/* The tick-box in each button: empty until the button is pressed, and always there, so a press changes no size. */
.vn-rule-mark { flex: none; display: inline-grid; place-items: center; width: 1.2em; height: 1.2em; border: 1.5px solid var(--muted); border-radius: 4px; background: var(--card); font-size: .95em; line-height: 1; }
.vn-rule-mark > span { visibility: hidden; }
.vn-rule-btn[aria-pressed=true] .vn-rule-mark > span { visibility: visible; }
/* Pressed: the tick or the cross, a thicker edge and a colour. Allowed is tinted green and Not allowed red; a fact's
   Yes and No are answers, not good and bad, so both take the app's own pressed look (the accent). */
.vn-rule-btn[aria-pressed=true] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent); color: var(--accent-ink); }
.vn-rule-btn[aria-pressed=true] .vn-rule-mark { border-color: var(--accent-ink); background: var(--accent-ink); color: var(--accent); }
.vn-rule-allow .vn-rule-btn[aria-pressed=true] { border-color: var(--r); box-shadow: inset 0 0 0 1px var(--r); background: color-mix(in srgb, var(--r) 20%, var(--card)); color: var(--text); }
.vn-rule-allow .vn-rule-btn[aria-pressed=true] .vn-rule-mark { border-color: var(--r); background: var(--r); color: var(--card); }
.vn-rule-allow .vn-rule-yes { --r: var(--ok); }
.vn-rule-allow .vn-rule-no { --r: var(--danger); }
html[data-contrast=high] .vn-rule-btn { border-width: 2px; }
html[data-contrast=high] .vn-rule-mark { border-width: 2px; border-color: var(--text); }
@container vn-rules-edit (min-width: 30em) {
  .vn-rule { grid-template-columns: minmax(0, 1fr) 6.5rem 8.4rem; column-gap: 6px; }
  .vn-rule-fact { grid-template-columns: minmax(0, 1fr) 7.45rem 7.45rem; }
  .vn-rule-name { grid-column: auto; padding-right: 4px; }
  .vn-rule-pick select { grid-column: 2 / -1; }
}
@media (forced-colors: active) {
  .vn-chip { border: 1px solid CanvasText; }
  .vn-rule .vn-rule-btn[aria-pressed=true] { border: 3px solid Highlight; } /* every pressed button alike: Allowed and Not allowed too */
}