/* LiveEPK stage tools: stage plot maker + tech rider. Shared by /stage-plot-maker and /tech-rider-template.
   Expects the page to define --paper, --paper-2, --ink, --ink-2, --ink-3, --rule, --accent, --accent-2, --display, --sans, --mono. */

.spm { background: var(--paper-2); border: 1px solid var(--rule); padding: 1.1rem; }
.spm__fields { display: grid; grid-template-columns: 1.4fr 1.2fr 0.8fr 1.2fr; gap: 0.6rem 0.8rem; margin-bottom: 0.9rem; }
.spm__tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.7rem 1rem; margin-bottom: 0.9rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--rule); }
.tool { display: flex; flex-direction: column; }
.tool[hidden] { display: none; }
.tool--export { margin-left: auto; align-self: flex-end; }
.tool__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.spm__clear { margin-left: auto; }
.spm label.lbl, .spm h3.spm__h {
  font-family: var(--sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
  display: block; margin: 0 0 0.3rem;
}
.spm .lbl__soft { font-weight: 400; letter-spacing: 0.08em; text-transform: none; color: var(--ink-3); }
.spm h3.spm__h { margin: 1.3rem 0 0.5rem; }
.spm input[type="text"], .spm select, .spm textarea {
  width: 100%; font-family: var(--sans); font-size: 0.92rem; padding: 0.5rem 0.6rem;
  border: 1px solid var(--rule); background: #fff; color: var(--ink); border-radius: 0;
}
.spm input[type="text"]:focus, .spm select:focus, .spm textarea:focus, .spm td[contenteditable]:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.sbtn {
  font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.55rem 0.9rem; border: 1px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; transition: all 120ms ease;
}
.sbtn:hover { border-color: var(--accent-2); color: var(--accent-2); }
.sbtn--primary { background: var(--ink); color: var(--paper); }
.sbtn--primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--paper); }
.sbtn--quiet { border-color: var(--rule); color: var(--ink-2); }
.seg { display: inline-flex; border: 1px solid var(--ink); }
.seg button { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.55rem 0.8rem; border: none; background: #fff; color: var(--ink); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.tool select { width: auto; min-width: 0; }
.spm__custom { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--sans); font-size: 0.8rem; color: var(--ink-2); }
.spm__custom[hidden] { display: none; }
.spm input[type="number"] { width: 4.2rem; font-family: var(--sans); font-size: 0.92rem; padding: 0.5rem 0.4rem; border: 1px solid var(--rule); background: #fff; color: var(--ink); border-radius: 0; }

/* tabs */
.spm__tabs { display: flex; gap: 0.2rem; border-bottom: 1px solid var(--rule); margin-bottom: 1rem; }
.spm__tabs [role="tab"] {
  font-family: var(--sans); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.65rem 1rem 0.6rem; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--ink-3); cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.spm__tabs [role="tab"]:hover { color: var(--ink); }
.spm__tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.spm__tabnote { font-size: 0.58rem; font-weight: 500; letter-spacing: 0.08em; text-transform: none; color: var(--paper); background: var(--accent); padding: 0.12rem 0.4rem; }
.spm__tabnote[hidden] { display: none; }

.spm__body { display: grid; grid-template-columns: 176px 1fr; gap: 1rem; align-items: start; }
.spm__body[hidden], .spm__rider[hidden] { display: none; }
.spm__palette { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; align-content: start; max-height: 620px; overflow: auto; padding-right: 2px; }
.pal {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.45rem 0.2rem 0.35rem;
  background: #fff; border: 1px solid var(--rule); cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none;
  font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.03em; color: var(--ink-2); text-align: center; line-height: 1.2;
}
.pal:hover { border-color: var(--accent); color: var(--ink); }
.pal:active { cursor: grabbing; }
.pal svg { width: 34px; height: 34px; color: var(--ink); display: block; }
.spm__stage { background: #fff; border: 1px solid var(--rule); position: relative; }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.75rem 1rem 0.55rem; border-bottom: 1px solid var(--rule); }
.sheet-head__band { font-family: var(--display); font-size: 1.45rem; font-weight: 400; line-height: 1.1; color: var(--ink); }
.sheet-head__band.is-empty { color: var(--ink-3); }
.sheet-head__meta { font-family: var(--sans); font-size: 0.78rem; color: var(--ink-2); text-align: right; }
.sheet-head__meta.is-empty { color: var(--ink-3); }
.spm__stage svg { display: block; width: 100%; height: auto; touch-action: none; outline: none; }
.spm__stage svg:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.grid { stroke: #e8e2d6; stroke-width: 1; }
.stage-edge { fill: none; stroke: #1a1814; stroke-width: 2; }
.stage-label { font-family: var(--mono); font-size: 12px; font-weight: 500; fill: #8a8275; letter-spacing: 0.16em; }
.stage-note { font-family: var(--mono); font-size: 10.5px; fill: #a39b8d; letter-spacing: 0.04em; }
.item { cursor: grab; }
.item:active { cursor: grabbing; }
.item__label { font-family: var(--sans); font-size: 14px; font-weight: 500; fill: #1a1814; text-anchor: middle; pointer-events: none; }
.item .ring { fill: none; stroke: none; }
.item.is-selected .ring { stroke: #b85c3a; stroke-width: 2; stroke-dasharray: 5 4; }
.spm__inspector {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.7rem; min-height: 2.5rem;
  font-family: var(--sans); font-size: 0.78rem; color: var(--ink-3);
}
.spm__inspector input[type="text"] { width: 220px; }
.spm__inspector .sbtn { padding: 0.45rem 0.7rem; }
.spm__hint { font-family: var(--sans); font-size: 0.74rem; color: var(--ink-3); margin-top: 0.5rem; line-height: 1.5; }
.spm__hint kbd, .spm__keys kbd { font-family: var(--mono); font-size: 0.68rem; background: #fff; border: 1px solid var(--rule); padding: 0 0.3rem; }
.spm__keys { margin-top: 0.9rem; font-family: var(--sans); font-size: 0.76rem; color: var(--ink-2); }
.spm__keys-title { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 0.35rem; }
.spm__keys ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.3rem 1.2rem; }
.spm__keys li { line-height: 1.5; }
@media (hover: none) and (pointer: coarse) { .spm__keys { display: none; } }

/* rider tab */
.spm__include { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem; font-family: var(--sans); font-size: 0.86rem; color: var(--ink); margin-bottom: 0.9rem; cursor: pointer; }
.spm__include input { width: auto; margin: 0; accent-color: var(--accent); position: relative; top: 1px; }
.spm__include small { font-size: 0.74rem; color: var(--ink-3); }
.rider-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem 1rem; }
.rf--wide, .rf--sched { grid-column: 1 / -1; }
.rf--sched { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem 0.8rem; }
.rider-form textarea { min-height: 96px; }
#r-lineup { min-height: 88px; }
#r-bring, #r-need { min-height: 118px; }

.spm__list table { width: 100%; table-layout: fixed; border-collapse: collapse; background: #fff; font-family: var(--sans); font-size: 0.88rem; border: 1px solid var(--rule); }
.spm__list col.c-ch { width: 3rem; } .spm__list col.c-src { width: 26%; } .spm__list col.c-mic { width: 28%; } .spm__list col.c-act { width: 5.8rem; }
.spm__list td[contenteditable] { overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; min-height: 1.4em; }
.spm__list th { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--rule); }
.spm__list td { padding: 0.42rem 0.6rem; border-bottom: 1px solid var(--rule); vertical-align: top; line-height: 1.4; }
.spm__list tr:last-child td { border-bottom: none; }
.spm__list td.ch { color: var(--ink-3); font-family: var(--mono); width: 3rem; }
.spm__list td[contenteditable]:focus { background: #fffdf6; }
.spm__list td[contenteditable]:empty::before { content: attr(data-ph); color: #b8b0a2; }
.spm__list td.actions { width: 5.6rem; white-space: nowrap; text-align: right; }
.rowbtn { border: none; background: none; color: var(--ink-3); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 0.28rem; font-family: var(--sans); }
.rowbtn:hover { color: var(--accent-2); }
.addrow { margin-top: 0.5rem; }
.spm__two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.4rem; }
.spm textarea { min-height: 128px; resize: vertical; line-height: 1.45; }
.spm__save { margin-top: 1.2rem; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; align-items: center; justify-content: space-between; }
.spm__save p { font-size: 1.02rem; color: var(--ink-2); margin: 0; max-width: 56ch; }
.toast { position: fixed; left: 50%; bottom: 1.6rem; transform: translateX(-50%); background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 0.82rem; padding: 0.65rem 1.1rem; opacity: 0; transition: opacity 180ms ease; pointer-events: none; z-index: 2000; max-width: min(92vw, 40rem); text-align: center; }
.toast.is-on { opacity: 1; }
.print-text, .print-foot, .rider-sheet { display: none; }

@media screen and (max-width: 820px) {
  .spm { padding: 0.9rem 0.6rem; }
  .spm__stage { margin: 0 -0.6rem; border-left: none; border-right: none; }
  .spm__stage svg { width: 100%; }
  .spm__inspector, .spm__hint, .spm__keys, .spm__list, .spm__two, .spm__save, .spm__rider { margin-left: 0.1rem; margin-right: 0.1rem; }
  .spm__fields { grid-template-columns: 1fr 1fr; }
  .tool--export { margin-left: 0; }
  .tool select { min-width: 0; width: 100%; }
  .tool { width: 100%; }
  .spm__tabs [role="tab"] { flex: 1; justify-content: center; padding-left: 0.3rem; padding-right: 0.3rem; font-size: 0.68rem; white-space: nowrap; gap: 0.35rem; }
  .spm__body { grid-template-columns: 1fr; }
  .spm__palette { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-columns: 76px; gap: 0.4rem; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 0 0 0.5rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .pal { min-width: 0; touch-action: manipulation; scroll-snap-align: start; cursor: pointer; }
  .spm__list table, .spm__list thead, .spm__list tbody, .spm__list tr, .spm__list td { display: block; }
  .spm__list colgroup, .spm__list thead { display: none; }
  .spm__list tr { display: grid; grid-template-columns: 2.4rem 1fr 5.8rem; grid-template-areas: "ch source actions" "ch mic actions" "ch notes actions"; align-items: start; padding: 0.35rem 0.2rem; border-bottom: 1px solid var(--rule); }
  .spm__list tr:last-child { border-bottom: none; }
  .spm__list td { border: none; padding: 0.15rem 0.4rem; }
  .spm__list td.ch { grid-area: ch; width: auto; padding-top: 0.25rem; }
  .spm__list td[data-f="source"] { grid-area: source; font-weight: 500; font-size: 1rem; }
  .spm__list td[data-f="mic"] { grid-area: mic; }
  .spm__list td[data-f="notes"] { grid-area: notes; color: var(--ink-2); }
  .spm__list td.actions { grid-area: actions; align-self: center; text-align: right; width: auto; }
  .rowbtn { font-size: 1.25rem; padding: 0.2rem 0.4rem; }
  .spm__two, .rider-form, .rf--sched { grid-template-columns: 1fr; }
  .spm__inspector input[type="text"] { width: 100%; }
  .sheet-head { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
  .sheet-head__band { font-size: 1.25rem; }
  .sheet-head__meta { text-align: left; }
}

/* ---------- print: the sheet(s) ---------- */
@media print {
  body::before, #site-nav, #site-footer, .hero, .spm__tools, .spm__tabs, .spm__rider, .spm__palette, .spm__inspector, .spm__hint, .spm__keys,
  .rowbtn, th.actions, td.actions, .addrow, .guide, .spm__fields, .spm textarea, .spm__save, .toast { display: none !important; }
  html, body { background: #fff; color: #000; font-size: 11pt; overflow: visible; }
  .tool-wrap { max-width: none; padding: 0; }
  .spm { border: none; background: #fff; padding: 0; }
  .sheet-head { border-bottom: 1.5px solid #000; padding: 0 0 4pt; margin-bottom: 6pt; }
  .sheet-head__band { font-size: 20pt; color: #000; }
  .sheet-head__meta { font-size: 9.5pt; color: #333; }
  .sheet-head__band.is-empty, .sheet-head__meta.is-empty { color: #000; }
  .sheet-head__meta.is-empty { visibility: hidden; }
  .spm__body { display: block !important; }
  .spm__stage { border: none; break-inside: avoid; }
  .spm__stage svg { border: 1px solid #777; }
  .spm__stage svg { width: auto; max-width: 100%; max-height: 4.15in; margin: 0 auto; }
  .spm h3.spm__h { color: #000; margin: 7pt 0 3pt; font-size: 7pt; }
  .spm__list table { border: 1px solid #777; font-size: 8.5pt; }
  .spm__list th { color: #000; border-bottom: 1px solid #777; padding: 3pt 5pt; }
  .spm__list td { border-bottom: 1px solid #bbb; padding: 1.8pt 5pt; line-height: 1.25; }
  .spm__list td[contenteditable]:empty::before { content: ''; }
  .spm__two { display: grid; grid-template-columns: 1fr 1fr; gap: 8pt; margin-top: 0; }
  .print-text { display: block; white-space: pre-wrap; font-family: var(--sans); font-size: 8.5pt; line-height: 1.35; border: 1px solid #777; padding: 4pt 6pt; min-height: 36pt; }
  .print-foot { display: block; font-family: var(--sans); font-size: 8pt; color: #666; margin-top: 8pt; text-align: right; }
  .item .ring { display: none; }

  /* rider page: only when the rider is on and has text */
  .spm.has-rider .rider-sheet { display: block; break-after: page; page-break-after: always; }
  .rider-sheet__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9pt 12pt; }
  .rs { break-inside: avoid; }
  .rs--wide { grid-column: 1 / -1; }
  .rs h4 { font-family: var(--sans); font-size: 7pt; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #000; margin: 0 0 3pt; }
  .rs__text { white-space: pre-wrap; font-family: var(--sans); font-size: 9pt; line-height: 1.4; border: 1px solid #777; padding: 5pt 7pt; color: #000; }
  .rs__sched b { font-weight: 600; display: inline-block; min-width: 5.2em; }
}