/* Shared styles for the staff tools (Run of show, Check-in). */
:root {
  /* Colors come from the event theme (/theme.css). */
  --bg: var(--t-bg); --surface: var(--t-surface); --ink: var(--t-ink); --muted: var(--t-muted); --line: var(--t-line);
  --accent: var(--t-accent); --accent-ink: var(--t-accent-ink);
  --done: var(--t-good); --done-bg: color-mix(in srgb, var(--t-good) 16%, var(--t-surface));
  --flag: var(--t-warn); --flag-bg: color-mix(in srgb, var(--t-warn) 15%, var(--t-surface));
  --danger: var(--t-danger); --danger-bg: color-mix(in srgb, var(--t-danger) 16%, var(--t-surface));
  --live: var(--t-accent-3); --live-bg: color-mix(in srgb, var(--t-accent-3) 16%, var(--t-surface)); --new: var(--t-accent-3);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.5 var(--t-body);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
button, input, select, textarea { font: inherit; color: inherit; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

.top { background: var(--t-bg-deep); border-bottom: 2px solid var(--accent); background-image: var(--t-pattern); }
.top .wrap { padding-top: 12px; padding-bottom: 10px; display: grid; gap: 10px; }
.title-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
h1 { margin: 0; font: 800 1.6rem/1.1 var(--t-display); letter-spacing: .02em; text-transform: uppercase; color: var(--t-highlight); }
h1 small { font-family: var(--t-body); text-transform: none; letter-spacing: 0; }
h2, h3 { font-family: var(--t-display); letter-spacing: .02em; }
h1 small { display: block; font-size: .85rem; font-weight: 400; color: var(--muted); }
.conn { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); margin-right: 6px; vertical-align: middle; }
.dot.live { background: var(--done); }
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  font-family: var(--t-display); letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--line); background: var(--bg); padding: 7px 14px; border-radius: var(--t-radius-sm); cursor: pointer;
  font-weight: 700; font-size: .92rem; white-space: nowrap;
}
.tabs button[aria-pressed="true"] { background: var(--t-highlight); border-color: var(--t-highlight); color: var(--t-highlight-ink); }
.bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

main.wrap { padding-top: 16px; padding-bottom: 60px; display: grid; gap: 16px; }

.btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 7px 14px; border-radius: var(--t-radius-sm);
  cursor: pointer; font-weight: 700; font-size: .92rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.good { background: var(--done); border-color: var(--done); color: #0b1a12; }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.btn.ghost { background: none; }
.btn.sm { padding: 4px 10px; font-size: .85rem; }
.btn:disabled { opacity: .5; cursor: default; }
.lock { border: 1px solid var(--flag); background: var(--flag-bg); color: var(--flag); padding: 6px 12px; border-radius: var(--t-radius-sm); cursor: pointer; font-weight: 700; font-size: .88rem; }
.lock.on { border-color: var(--done); background: none; color: var(--done); }

input[type="text"], input[type="search"], input[type="time"], input[type="number"], select, textarea {
  border: 1px solid var(--line); background: var(--bg); border-radius: var(--t-radius-sm); padding: 8px 10px; min-width: 0;
}
textarea { width: 100%; min-height: 160px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; }
label.f { display: grid; gap: 3px; font-size: .82rem; color: var(--muted); }
label.f input, label.f select { width: 100%; color: var(--ink); font-size: 1rem; }
.grid2 { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--t-radius); padding: 16px; }
.panel > h2, .panel > header h2 { margin: 0; font-size: 1.1rem; }
.panel > header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.panel.flush { padding: 0; overflow: hidden; }
.panel.flush > header { padding: 14px 16px 0; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.empty { color: var(--muted); padding: 12px 16px; }
.tag { display: inline-block; border: 1px solid var(--line); border-radius: var(--t-radius-sm); padding: 0 8px; font-size: .8rem; color: var(--muted); }
.tag.added { border-color: transparent; color: var(--new); font-weight: 700; padding: 0; }
.pill { display: inline-block; border-radius: var(--t-radius-sm); padding: 1px 9px; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.pill.done { background: var(--done-bg); color: var(--done); }
.pill.live { background: var(--live-bg); color: var(--live); }
.pill.late { background: var(--danger-bg); color: var(--danger); }
.pill.flag { background: var(--flag-bg); color: var(--flag); }
.pill.skip { background: var(--bg); color: var(--muted); }
.notice { background: var(--flag-bg); border: 1px solid var(--flag); color: var(--ink); border-radius: var(--t-radius); padding: 12px 14px; }
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 7px 8px; border-top: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 400; border-top: 0; white-space: nowrap; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  background: var(--ink); color: var(--surface); border-radius: var(--t-radius); padding: 10px 14px; display: flex; gap: 12px; align-items: center;
  box-shadow: 0 6px 24px rgb(0 0 0 / .25); max-width: calc(100% - 32px);
}
.toast[hidden] { display: none; }
.toast button { background: none; border: 1px solid var(--surface); color: var(--surface); border-radius: var(--t-radius-sm); padding: 4px 12px; font-weight: 700; cursor: pointer; }
dialog { border: 1px solid var(--line); border-radius: var(--t-radius); background: var(--surface); color: var(--ink); padding: 20px; width: min(620px, calc(100% - 24px)); max-height: calc(100% - 40px); }
dialog.pin { width: min(340px, calc(100% - 32px)); }
dialog::backdrop { background: rgb(0 0 0 / .45); }
dialog h2 { margin: 0 0 6px; font-size: 1.15rem; }
dialog p { margin: 0 0 12px; }
dialog .pin-input { width: 100%; font-size: 1.4rem; letter-spacing: .3em; text-align: center; }
dialog .row { display: flex; gap: 8px; margin-top: 14px; justify-content: flex-end; flex-wrap: wrap; }
dialog .err { color: var(--danger); font-size: .9rem; min-height: 1.3em; margin-top: 8px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }