.flush { margin-top: 0; }
.card textarea { margin: 4px 0 8px; }
.card .row { margin-bottom: 8px; }

/* --- running order list --- */
.list { list-style: none; padding: 0; margin: 0; counter-reset: cue; }
.list li { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.list .head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.list .idx { font: 600 13px var(--mono); color: var(--muted); min-width: 2.4em; }
.list .planned { font: 600 14px var(--mono); color: var(--accent); }
.list .t { font-weight: 600; flex: 1 1 160px; overflow-wrap: anywhere; }
.list .meta { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.list .notes { font-size: 13px; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.list .acts { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.list .acts button { min-height: 32px; padding: 2px 8px; font-size: 13px; }
.list li.editing { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- run mode: full-focus panel, CSP-safe (class toggles only, no inline style) ---
   body.run hides the editor outright (not just covers it) so it drops out of tab order too. */
body.run .wrap { display: none; }
#run-view { position: fixed; inset: 0; background: var(--bg); z-index: 50; overflow: auto; }
#run-view[hidden] { display: none; }
.run-inner { max-width: 640px; margin: 0 auto; padding: 20px 16px 40px; min-height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; gap: 8px; }
.run-top { width: 100%; justify-content: space-between; }
#run-title { font-size: clamp(20px, 5vw, 30px); margin: 4px 0; }
.countdown { font: 700 clamp(64px, 22vw, 160px)/1 var(--mono); letter-spacing: -0.02em; margin: 8px 0; }
.countdown.warn { color: var(--warn); }
#run-overunder.warn { color: var(--warn); font-weight: 600; }
#run-planned, #run-next { margin: 0; }
.run-controls { justify-content: center; margin-top: 12px; }
.run-controls button { min-width: 96px; min-height: 44px; }

@media (max-width: 480px) {
  .run-inner { padding: 12px 16px 24px; }
}

/* --- print: only #print-view renders, everything interactive is suppressed --- */
.print-only { display: none; }
@media print {
  .no-print { display: none !important; }
  .print-only { display: block; }
  body { background: #fff; color: #000; }
  #print-view h1 { font-size: 22px; margin: 0 0 4px; }
  #print-view table { width: 100%; border-collapse: collapse; margin-top: 10px; }
  #print-view th, #print-view td { text-align: left; padding: 4px 6px; border-bottom: 1px solid #ccc; font-size: 12px; vertical-align: top; }
  #print-view tfoot td { font-weight: 700; border-top: 2px solid #000; border-bottom: none; }
}

/* Connected event workflow, using the same shared surface and colour tokens. */
.flow-nav { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 16px; align-items: center; }
.flow-nav a, .flow-nav span { min-height: 40px; display: inline-flex; align-items: center; }
.flow-nav [aria-current] { font-weight: 700; color: var(--ink); }
.card + .card { margin-top: 12px; }
.handoff { border-color: var(--accent); margin-bottom: 12px; }
.handoff[hidden] { display: none; }
#handoff-details, #handoff-message, #status, #run-title { overflow-wrap: anywhere; }
#status:empty { display: none; }
#status { padding: 8px 0; }
.event-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0; }
.event-fields > div { min-width: 0; }
.event-fields label { display: block; }
#ev-location { margin: 4px 0 8px; }
#show-select { max-width: 100%; }
button:disabled { opacity: .6; cursor: default; }
@media (max-width: 390px) {
  .event-fields { grid-template-columns: 1fr; }
  .card { padding: 12px; }
}
@media print {
  #print-view { overflow-wrap: anywhere; }
}

/* A language change changes labels only; clock and duration values keep their order. */
.countdown, .planned, #cue-dur { direction: ltr; unicode-bidi: isolate; }
.flow-nav a, .flow-nav span, .run-controls button { overflow-wrap: anywhere; }
[dir="rtl"] .list .head { text-align: start; }
[dir="rtl"] #print-view th, [dir="rtl"] #print-view td { text-align: right; }

/* MARKED LAYER mobile-first-20261025: standalone controls stay usable at 320px. */
@media screen {
  body button, body select, body textarea, body summary, body .btn,
  body .event-list button, body .list .acts button, body .list .acts select,
  body .flow-nav a, body .flow-actions a, body .related a, body .jump a,
  body header.top a, body .check, body .tick,
  body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) {
    min-block-size: 44px; min-inline-size: 44px; max-inline-size: 100%;
  }
  body button, body .btn, body summary, body .flow-nav a, body .flow-actions a,
  body .related a, body .jump a, body header.top a { white-space: normal; overflow-wrap: anywhere; }
  body .btn, body .flow-nav a, body .flow-actions a, body .related a,
  body .jump a, body header.top a { display: inline-flex; align-items: center; }
  body .list .acts button, body .list .acts select { padding-block: 8px; }
  body summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  .row > *, .flow-nav > *, .flow-actions > *, .related > *, header.top > * { max-inline-size: 100%; }
}
@media screen and (max-width: 600px) {
  body input, body textarea, body select, body .list .acts select,
  body .language-control select { font-size: 16px; }
  .card, .field, .form, .event-fields, .tab-panel { min-inline-size: 0; }
  .coverage dt, .coverage dd, .totals dt { overflow-wrap: anywhere; }
}
@media screen and (max-width: 360px) {
  .card { padding: 12px; }
  .form, .event-fields { grid-template-columns: minmax(0, 1fr); }
  .coverage, .totals { grid-template-columns: minmax(0, 1fr); }
}