/* acts: the Acts page, the press kit, the input list editor and the stage plot (js/pages/acts.js, js/acts-rider.js,
   js/acts-docs.js). Colours come from the theme; an act's own colour arrives as --ac-color on its card. */

/* list */
/* A drop-down card: the head button opens the log under it; the dates coming up sit between. */
.ac-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; font-size: 1rem; border-left: 6px solid var(--ac-color, var(--accent)); padding: 0 12px 12px; }
.ac-card-head { display: grid; gap: 3px; width: 100%; text-align: left; background: none; border: 0; color: inherit; font: inherit; padding: 12px 0 0; cursor: pointer; min-height: var(--hit); }
.ac-card-head:hover .ac-card-name, .ac-card-head:focus-visible .ac-card-name { color: var(--accent); }
.ac-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ac-card-name { font-weight: 800; font-size: 1.08rem; overflow-wrap: anywhere; min-width: 0; }
.ac-chev { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--bg2); color: var(--muted); transition: transform .2s; }
.ac-card.open .ac-chev { transform: rotate(180deg); color: var(--accent); }
.ac-card-sub, .ac-seen-line { display: block; overflow-wrap: anywhere; }
.ac-seen-line b { font-weight: 800; }
.ac-seen-n { font-weight: 700; color: var(--accent); }
.ac-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ac-dates-head { width: 100%; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 700; }
.ac-date { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; min-height: 36px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg2); color: inherit; font: inherit; font-size: .88rem; cursor: pointer; text-align: left; }
.ac-date:hover, .ac-date:focus-visible { border-color: var(--accent); }
.ac-date b { white-space: nowrap; }
.ac-date-where { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ac-dates-more { align-self: center; }

/* the log under an open card */
.ac-pnl { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.ac-pnl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ac-seen-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ac-seen { display: flex; align-items: flex-start; gap: 6px; background: var(--bg2); border-radius: 10px; padding: 8px 4px 8px 10px; }
.ac-seen-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ac-seen-when { overflow-wrap: anywhere; }
.ac-seen-notes { margin: 0; overflow-wrap: anywhere; }
.ac-score { display: flex; align-items: center; gap: 2px; }
.ac-score > b { font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.ac-score-of { color: var(--muted); font-size: .8rem; margin-right: 8px; }
.ac-score-bar { flex: 1; max-width: 180px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.ac-score-bar i { display: block; height: 100%; background: var(--ac-color, var(--accent)); border-radius: 3px; }
.ac-pnl-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-pnl-actions .btn { flex: 1 1 auto; justify-content: center; }
/* An act nothing is logged for, for a role that doesn't score its own acts: Open the act on a line of its own, the ways
   to log a time seen under it. */
.ac-pnl-lead .btn.primary { flex-basis: 100%; }
/* Sample work (js/acts-sample.js), at the head of an open card for a producer, a manager and Jack of Trades: a small QR
   code (white, as every code, so it scans in the dark scheme too) beside the host in words; the words drop under the
   code when the card is too narrow for both (a phone with large text); Show big and Share link (and ✎ Edit while there
   is no sample work link) share a row under them. */
.ac-sample { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px; border-radius: 12px; background: var(--bg2); }
.ac-sample-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ac-sample .ac-sample-qr { flex: none; width: 104px; min-height: 104px; margin: 0; padding: 6px; border-radius: 10px; font-size: .72rem; line-height: 1.2; text-align: center; }
.ac-sample-text { display: grid; gap: 2px; flex: 1 1 9em; min-width: 0; overflow-wrap: anywhere; }
.ac-sample-h { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 700; color: color-mix(in srgb, var(--muted) 70%, var(--text)); }
.ac-sample-host { font-weight: 800; font-size: 1.05rem; }
.ac-sample-say { margin: 0; }
.ac-sample .ac-sample-say { color: color-mix(in srgb, var(--muted) 70%, var(--text)); } /* muted alone is under 4.5:1 on --bg2 in the light schemes */
.ac-sample-actions { margin: 0; gap: 6px; }
.ac-sample-actions .btn { flex: 1 1 auto; justify-content: center; }
.ac-sample-check, .ac-sample-check.warn { margin: 6px 0 0; font-size: .85rem; overflow-wrap: anywhere; } /* in rem: it follows the Text size setting */
.ac-sample-check:not(.warn) { color: color-mix(in srgb, var(--muted) 70%, var(--text)); }
.ac-sample-copy { width: 100%; }
.ac-pick { display: grid; gap: 2px; }
.ac-form-act { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 800; overflow-wrap: anywhere; }
.ac-form-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--ac-color, var(--accent)); }
.ac-slider { width: 100%; margin-top: 8px; accent-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .ac-chev { transition: none; } }
@media (forced-colors: active) { .ac-score-bar { border: 1px solid CanvasText; } .ac-score-bar i { background: Highlight; forced-color-adjust: none; } }
.ac-nomatch { padding: 8px 2px; }

/* main genres: the list folded under a heading per main genre, a button with the name, the count and the chevron (as
   on a card); an open group's cards sit under its heading, a little in from it. */
.ac-groups { gap: 10px; }
.ac-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ac-group-h { margin: 0; font-size: 1rem; line-height: 1.25; }
.ac-group-head { display: flex; align-items: center; gap: 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; }
.ac-group-head:hover { border-color: var(--accent); }
.ac-group-head:hover .ac-group-name, .ac-group-head:focus-visible .ac-group-name { color: var(--accent); }
.ac-group-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ac-group-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; }
.ac-group-head[aria-expanded="true"] .ac-chev { transform: rotate(180deg); color: var(--accent); }
.ac-group-list { padding-left: 10px; }
.ac-group-list > .card:last-child { margin-bottom: 4px; }

/* earlier names (an act that changed its name): "formerly The Night Owls" in small type under the name, on the act's
   card, its page and its row in "Did you see them?"; "as The Night Owls" on a night in its log from before the change;
   the list of them on the act's page; their rows in the act form (the name, the day it stopped being used and ✕; on
   a phone the name has a line of its own); the "New name?" sheet. */
.ac-formerly, .ac-as { display: block; margin: 0; font-size: .85rem; font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }
.ac-names { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.ac-names li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; background: var(--bg2); border-radius: 10px; padding: 8px 10px; overflow-wrap: anywhere; }
.ac-names li > * { min-width: 0; }
.ac-was-label, .ac-was-until { font-size: .8rem; color: var(--muted); font-weight: 600; }
.ac-was-rows { display: grid; gap: 8px; }
.ac-was-rows:empty { display: none; }
.ac-was-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: end; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.ac-was-name { grid-column: 1 / -1; }
.ac-was-until { display: grid; gap: 2px; min-width: 0; }
.ac-was-more { display: flex; }
.ac-was-del:hover { color: var(--danger); }
@media (min-width: 700px) { .ac-was-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; } .ac-was-name { grid-column: auto; } }
.ac-rename > p { margin: 0; }
.ac-rename-names { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 1.1rem; overflow-wrap: anywhere; }
.ac-rename-names > * { min-width: 0; }
.ac-rename-old, .ac-rename-arrow { color: var(--muted); }
.ac-rename-q { font-weight: 700; font-size: 1rem; } /* in rem, as the names above it: it follows the Text size setting */

/* one act */
.ac-view .page-head { flex-wrap: wrap; }
.ac-hero { border-left: 6px solid var(--ac-color, var(--accent)); display: grid; gap: 4px; padding-left: 14px; }
.ac-title { font-size: 1.45rem; overflow-wrap: anywhere; }
.ac-links, .ac-contact { margin-top: 6px; gap: 8px; }
.card .ac-links .btn, .card .ac-contact .btn { flex: 0 1 auto; max-width: 100%; min-width: 0; }
.ac-addr { overflow-wrap: anywhere; min-width: 0; }
.ac-hint { margin: 6px 0 0; }
.ac-tabs { margin: 4px 0 6px; }
.ac-tabs button { padding-left: 6px; padding-right: 6px; }
.ac-sec { min-width: 0; }
.ac-none { margin: 4px 0; }
.ac-text { margin: 4px 0; overflow-wrap: anywhere; }
.ac-danger { margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--line); }
/* The times seen at the top of the Overview, for a role that follows acts (no press kit or rider tabs). */
.ac-about-seen { display: grid; gap: 8px; }
.ac-about-seen .ac-pnl-head h3 { margin-bottom: 0; }
@media (min-width: 700px) { .ac-about-seen .ac-pnl-actions .btn { flex: 0 1 auto; } } /* not a bar across a laptop screen */

/* bookings coming up */
.ac-bk { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 12px; align-items: center; }
.ac-bk-date { display: grid; text-align: center; line-height: 1.1; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 5px 2px; }
.ac-bk-date b { font-size: 1.25rem; }
.ac-bk-date span { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
/* The text keeps at least 7em, and its longest word, beside the status pill; when the row can't give it that (a narrow
   phone with large text, a long venue name), the pill drops under the text, so names wrap between words rather than
   inside them. A word wider than the whole row still breaks (break-word, within max-width). */
.ac-bk-body { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.ac-bk-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 7em; max-width: 100%; overflow-wrap: break-word; }
.ac-bk-body > .pill { flex: none; }

/* members */
.ac-mlist { display: grid; }
.ac-member { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 10px; }
.ac-member-main { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; min-height: var(--hit); cursor: pointer; border-radius: 10px; }
.ac-member-main:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ac-member-main:hover strong { color: var(--accent); }
.ac-member-text { display: grid; min-width: 0; overflow-wrap: anywhere; text-align: left; }

/* songs */
.ac-songs-card { display: grid; gap: 4px; }
.ac-counts { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.ac-counts b { font-size: 1.3rem; }
.ac-setline { overflow-wrap: anywhere; }

/* add members sheet */
.ac-addm-group h4 { margin: 12px 0 6px; }
.ac-addm-item { display: flex; align-items: center; gap: 12px; }
.ac-addm-item .ac-member-text { flex: 1; }
.ac-addm-plus { font-size: 1.3rem; color: var(--accent); font-weight: 800; }

/* press kit */
.ac-qr-card { text-align: center; }
.ac-qr-card h3 { margin-top: 2px; }
.ac-qr { margin-top: 4px; }
.ac-qr-full { width: min(100%, 64vh, 520px); }
.ac-qr-sheet { justify-items: center; text-align: center; }
.ac-qr-name { overflow-wrap: anywhere; }
.ac-missing { color: var(--accent); margin: 0 0 8px; }
.cs-paper.ac-paper { max-height: none; }
.cs-paper .ac-doc-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.cs-paper .ac-doc-intro { min-width: 0; overflow-wrap: anywhere; }
.cs-paper .ac-doc-qr { display: grid; justify-items: center; gap: 3px; font-size: .66rem; opacity: .8; text-align: center; max-width: 104px; overflow-wrap: anywhere; }
.cs-paper .ac-doc-qr-svg { width: 92px; height: 92px; }
.cs-paper .ac-doc-qr-svg svg { width: 100%; height: 100%; display: block; }
.cs-paper .cs-kv { overflow-wrap: anywhere; }
.cs-paper .ac-plot-svg { width: 100%; height: auto; display: block; }
@media (max-width: 420px) { .cs-paper .cs-kv { grid-template-columns: 92px minmax(0, 1fr); } }

/* tech rider: input list on the page */
.ac-in-wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 2px 8px; overflow-x: auto; }
.ac-in-screen { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ac-in-screen th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 6px 4px; border-bottom: 1px solid var(--line); font-weight: 700; }
.ac-in-screen td { padding: 7px 6px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.ac-in-screen tr:last-child td { border-bottom: 0; }
.ac-in-screen td.ac-ch { font-weight: 800; color: var(--accent); width: 2.2rem; font-variant-numeric: tabular-nums; }
.ac-in-note { font-size: .78rem; color: var(--muted); }

/* tech rider: the input list editor (a sheet) */
.ac-in-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin: 8px 0 4px; }
.ac-in-status { min-height: 1.2em; }
.ac-in-status .warn { margin: 6px 0 0; }
.ac-in-rows { display: grid; gap: 8px; margin: 8px 0 4px; }
.ac-in-row { display: grid; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.ac-in-l1 { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.ac-in-l2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.ac-in-row input { padding-left: 8px; padding-right: 8px; }
.ac-in-ch { text-align: center; font-weight: 800; color: var(--accent); -moz-appearance: textfield; appearance: textfield; }
.ac-in-ch::-webkit-outer-spin-button, .ac-in-ch::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ac-in-tools { display: flex; }
.ac-in-tools .icon-btn:disabled { opacity: .3; cursor: default; }
.ac-in-del:hover { color: var(--danger); }
.ac-in-editor .form-actions { bottom: -20px; }
@media (min-width: 700px) {
  .ac-in-row { grid-template-columns: 3.4rem minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.2fr) auto; align-items: center; }
  .ac-in-l1, .ac-in-l2 { display: contents; }
  .ac-in-tools { order: 9; }
}

/* tech rider: the stage plot */
.ac-plot > p { margin: 0 0 8px; }
.ac-stage-frame { padding: 6px 12px 8px; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); }
.ac-stage-back, .ac-audience { text-align: center; color: var(--muted); text-transform: uppercase; }
.ac-stage-back { font-size: .62rem; letter-spacing: .22em; margin-bottom: 4px; }
.ac-audience { margin-top: 8px; padding-top: 5px; border-top: 2px dashed var(--line); font-weight: 800; letter-spacing: .4em; font-size: .78rem; }
.ac-stage { position: relative; aspect-ratio: 3 / 2; border: 2px solid color-mix(in srgb, var(--text) 40%, var(--line)); border-radius: 8px; background: var(--card); touch-action: pan-y; }
.ac-side { position: absolute; bottom: 3px; font-size: .62rem; color: var(--muted); pointer-events: none; }
.ac-side-l { left: 6px; } .ac-side-r { right: 6px; }
.ac-stage-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 18px 24px; color: var(--muted); font-size: .9rem; pointer-events: none; }
.ac-pl { position: absolute; transform: translate(-50%, -50%); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab;
  max-width: 42%; min-height: 34px; padding: 4px 9px; border-radius: 9px; border: 1.5px solid var(--accent); background: var(--bg); color: var(--text);
  font: inherit; font-size: .78rem; font-weight: 700; line-height: 1.15; text-align: center; overflow-wrap: anywhere; z-index: 1; }
.ac-pl::before { content: ''; position: absolute; inset: -6px -3px; } /* a finger-sized target around a small box */
.ac-pl:hover { border-width: 2px; }
.ac-pl.ac-sel { background: var(--accent); color: var(--accent-ink); z-index: 2; }
.ac-pl.ac-dragging { cursor: grabbing; z-index: 3; outline: 2px dashed var(--accent); outline-offset: 3px; }
.ac-plot-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; padding: 8px 10px; border: 1px solid var(--accent); border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.ac-plot-tools .grow { min-width: 8rem; overflow-wrap: anywhere; }
.ac-quick { margin-top: 12px; }
.ac-quick-head { margin-bottom: 6px; font-weight: 600; }
.ac-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-chips .chip { font-size: .82rem; padding: 4px 11px; }
.ac-chip-member { border-color: var(--accent); }
.ac-chip-own { border-style: dashed; }

/* tech rider: riders and printing */
.ac-rider-texts { display: grid; gap: 8px; }
.ac-rider-text { margin: 0; }
.ac-rider-text h4 { margin-top: 0; }
.ac-rider-text p { margin: 4px 0 0; overflow-wrap: anywhere; }
.ac-rider-out { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.ac-rider-out p { margin: 0; }

/* wider screens: two columns */
@media (min-width: 700px) { .ac-rider-texts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) {
  .ac-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; align-items: start; }
  .ac-cols .list { grid-template-columns: 1fr; }
  .ac-rider #ac-riders, .ac-rider .ac-rider-out, .ac-about .ac-danger, .ac-about .ac-about-seen { grid-column: 1 / -1; }
  .ac-epk-wrap { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 28px; align-items: start; }
  .ac-epk-wrap .ac-qr-card { position: sticky; top: 16px; margin-top: 22px; }
}

/* The input list editor on a phone: mic/DI and stand share a row, the note gets a full line of its own. */
@media (max-width: 699.98px) { .ac-in-l2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ac-in-l2 > :last-child { grid-column: 1 / -1; } }

/* "Did you see them?" (js/acts-ask.js): the sheet of shows that are over, one row each with its Yes and No, and the
   control under Settings → Your role. A row's words keep at least 8em beside its buttons; when the row can't give
   them that (a narrow phone, large text), the buttons drop under the words. */
.ac-ask { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ac-ask > p { margin: 0; }
.ac-ask .actions { margin-top: 0; justify-content: flex-end; }
.ac-ask .ac-ask-list { grid-template-columns: minmax(0, 1fr); } /* one show to a line, newest first, on a laptop too */
.ac-ask-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 1rem; border-left: 6px solid var(--ac-color, var(--accent)); }
.ac-ask-main { display: grid; gap: 2px; flex: 1 1 8em; min-width: 0; overflow-wrap: anywhere; }
.ac-ask-answer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; }
.ac-ask-answer .btn { flex: none; min-width: 4.4em; }
.ac-ask-done { font-weight: 700; overflow-wrap: anywhere; }
.ac-ask-pref { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
/* The three choices share one row while it has room for their words, and stack when it has not (a narrow phone, large
   text): a choice is never broken inside a word, and never wider than its button. In between, the last one drops to a
   row of its own. Each button keeps room for its words in bold (the hidden copy under them), so nothing shifts when
   the choice in use changes. */
.ac-ask-pref .seg.wide { display: flex; flex-wrap: wrap; }
.ac-ask-pref .seg.wide button { flex: 1 1 calc((23em - 100%) * 999); min-width: auto; white-space: nowrap; overflow-wrap: normal; }
.ac-ask-pref .seg.wide button::after { content: attr(data-label); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 700; }
.ac-ask-note { margin: 8px 0 0; }
/* High contrast thickens every card's border to 2px all round: the act's colour keeps its wider edge. With forced
   colours the choice in use is told by the system's own highlight (its background would be flattened otherwise). */
html[data-contrast=high] .ac-ask-row { border-left-width: 6px; }
@media (forced-colors: active) { .ac-ask-pref .seg.wide button.on { background: Highlight; color: HighlightText; forced-color-adjust: none; } }