/* ============================================================
   Festival Planner — Epic Cinema
   Tokens follow the edition-workspace design handoff.
   Dark is the reference; light is the same system inverted.
   ============================================================ */

:root[data-theme="dark"], :root {
  /* the four steps of an edit, red to green (Stijn, 16 Oct 2026): post-production,
     the team board, the home page's To deliver, the editor's page */
  --st-todo: #e5484d; --st-todo-ink: #fff;
  --st-edit: #ff8a1f; --st-edit-ink: #1a1100;
  --st-review: #f5c518; --st-review-ink: #1a1400;
  --st-done: #30a46c; --st-done-ink: #fff;
  color-scheme: dark;

  --page:          #0f0f10;
  --panel:         #18181a;
  --track:         #27272a;
  --raised:        rgba(255,255,255,.03);

  --line:          rgba(255,255,255,.07);
  --line-control:  rgba(255,255,255,.15);
  --line-soft:     rgba(255,255,255,.12);
  --line-dashed:   rgba(255,255,255,.2);

  --text:          #f4f4f5;
  --text-list:     #d4d4d8;
  --text-2:        #a1a1aa;
  --text-3:        #63636b;
  --text-chip:     #a1a1aa;
  --text-invert:   #0f0f10;
  --chip-active:   #e4e4e7;

  --accent:        #ed1c24;          /* Epic Cinema red, sampled from the logo */
  --accent-wash:   rgba(237,28,36,.10);
  --accent-soft:   rgba(237,28,36,.13);
  --accent-line:   rgba(237,28,36,.42);
  /* the shooting schedule (design turn 8) */
  --ds-block:      #1c1c1f;
  --ds-block-line: #3a3a40;
  --ds-chip-line:  #333338;
  --ds-rule-hour:  #1f1f22;
  --ds-rule-half:  #151517;
  --ds-rule-quarter: #111113;
  --ds-set-off:    #111113;
  --ds-hatch:      rgba(255,255,255,.016);
  --brand:         #ed1c24;          /* the mark itself never shifts with the theme */

  --ok:            #4ade80;
  /* the same green filling a whole button is too loud on a dark ground, so the
     fill has its own, deeper value; the light theme keeps one green for both */
  --ok-fill:       #2b8f52;
  /* work in hand: begun, not finished. Its ink is near-black in both themes -
     white on yellow is unreadable whichever way round the page is */
  --busy:          #facc15;
  --busy-ink:      #1a1205;
  --planning:      #a1a1aa;
  --danger:        #f0a04b;
  --danger-wash:   rgba(240,160,75,.07);
  --danger-line:   rgba(240,160,75,.28);
  --am:            #ff7a1a;          /* the aftermovie team - orange beside the red of REC */
  --am-ink:        #1a0a00;
  --am-line:       rgba(255,122,26,.55);
  --am-wash:       rgba(255,122,26,.10);
  --special:       #ffb020;          /* special moments - the starred sets, the same yellow everywhere */
  --post:          #60a5fa;          /* in the edit - blue next to the red of coming up */
  --post-ink:      #0f0f10;
  --post-line:     rgba(96,165,250,.55);
  --post-wash:     rgba(96,165,250,.07);

  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --rail-w: 300px;
}

:root[data-theme="light"] {
  color-scheme: light;

  --page:          #f4f5f7;
  --panel:         #ffffff;
  --track:         #e3e6ec;
  --raised:        rgba(14,17,22,.03);

  --line:          rgba(14,17,22,.09);
  --line-control:  rgba(14,17,22,.18);
  --line-soft:     rgba(14,17,22,.14);
  --line-dashed:   rgba(14,17,22,.24);

  --text:          #12161c;
  --text-list:     #333c49;
  --text-2:        #626c7c;
  --text-3:        #8a929f;
  --text-chip:     #59616f;
  --text-invert:   #ffffff;
  --chip-active:   #1c222b;

  --accent:        #cc121a;          /* Epic red, a shade down so small text holds up on white */
  --accent-wash:   rgba(237,28,36,.07);
  --accent-soft:   rgba(237,28,36,.10);
  --accent-line:   rgba(237,28,36,.30);
  --ds-block:      #ffffff;
  --ds-block-line: #c9cfd8;
  --ds-chip-line:  #d5dae2;
  --ds-rule-hour:  rgba(14,17,22,.11);
  --ds-rule-half:  rgba(14,17,22,.05);
  --ds-rule-quarter: rgba(14,17,22,.03);
  --ds-set-off:    #eceef1;
  --ds-hatch:      rgba(14,17,22,.025);

  --ok:            #1f8a4c;
  --ok-fill:       #1f8a4c;
  --busy:          #eab308;
  --busy-ink:      #1a1205;
  --planning:      #8791a1;
  --danger:        #a2620a;
  --danger-wash:   rgba(162,98,10,.06);
  --danger-line:   rgba(162,98,10,.24);
  --am:            #d4580a;
  --am-ink:        #ffffff;
  --am-line:       rgba(212,88,10,.5);
  --am-wash:       rgba(212,88,10,.08);
  --special:       #b77800;
  --post:          #2563eb;
  --post-ink:      #ffffff;
  --post-line:     rgba(37,99,235,.5);
  --post-wash:     rgba(37,99,235,.06);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--page); color: var(--text);
  font-family: var(--sans); font-size: 13px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: var(--text-invert); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::placeholder { color: var(--text-3); }

/* ---------- shell ---------- */
.shell { display: flex; min-height: 100vh; }

/* ---------- master rail ---------- */
.rail {
  width: var(--rail-w); flex: none;
  border-right: 1px solid var(--line);
  padding: 16px 0; display: flex; flex-direction: column;
  height: 100vh; position: sticky; top: 0;
}
.rail-top { padding: 0 16px; flex: none; }

.logo {
  font: 800 16px var(--mono); letter-spacing: .06em;
  color: var(--text); margin-bottom: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
/* the lockup: EPIC (red) over PLANNER, together exactly as tall as the icon,
   in square letters with cut corners like Epic Cinema's */
.logo .word, .login-mark .word { display: inline-flex; flex-direction: column; gap: 5px; white-space: nowrap;
  font: 700 28px/.7 "Chakra Petch", "Arial Narrow", sans-serif; letter-spacing: .02em; -webkit-text-stroke: .6px currentColor; }
.logo .word .w1, .login-mark .word .w1 { color: var(--accent); }
.logo .word .w2, .login-mark .word .w2 { color: var(--text); }
.logo a { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.logo .btn { font-size: 20px; padding: 3px 9px 5px; line-height: 1; }
.logo-mark { height: 13px; width: auto; flex: none; display: block; }
.app-mark { width: 44px; height: 44px; flex: none; display: block; }
.app-mark .fill { fill: var(--brand, #ed1c24); }
.app-mark .knock { fill: #fff; }
.logo-mark .fill { fill: var(--brand, #ed1c24); }
.logo-mark .knock { fill: var(--page); }

.search {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: 7px; padding: 7px 10px;
}
.search input {
  border: none; background: none; outline: none; width: 100%;
  font: 400 12px var(--sans); color: var(--text);
}
.search .ic { color: var(--text-3); flex: none; display: grid; place-items: center; }

.filters { display: flex; gap: 6px; margin: 10px 0 4px; flex-wrap: wrap; }
.fchip {
  font: 600 10.5px var(--sans); color: var(--text-chip);
  border: 1px solid var(--line-soft); background: transparent;
  padding: 3px 9px; border-radius: 99px; cursor: pointer;
  transition: background .12s ease-out, color .12s ease-out, border-color .12s ease-out;
}
.fchip:hover { color: var(--text-list); border-color: var(--line-control); }
.field .chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 2px; }
.field .chips .fchip { font-size: 11.5px; padding: 5px 12px; }
.fchip.is-on {
  color: var(--text-invert); background: var(--chip-active); border-color: transparent;
}

.rail-list { overflow-y: auto; flex: 1; margin-top: 4px; }
.rail-list::-webkit-scrollbar { width: 8px; }
.rail-list::-webkit-scrollbar-thumb { background: var(--track); border-radius: 99px; }

.month {
  font: 700 9.5px var(--mono); letter-spacing: .14em;
  color: var(--text-3); padding: 16px 16px 7px; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.month + .month { padding-top: 10px; }

.ed-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  padding: 13px 16px 14px;
  background: none; border: 0;
  border-left: 4px solid transparent;
  border-bottom: 1px solid var(--line);
  cursor: pointer; transition: background .12s ease-out;
}
.ed-row:hover { background: var(--raised); }
.ed-row .body { flex: 1; min-width: 0; display: block; }
.ed-row .nm {
  display: block;
  font: 600 13px var(--sans); color: var(--text-list);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ed-row .sub,
.ed-row .job {
  display: block; margin-top: 4px;
  font: 400 11px var(--sans); color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ed-row .job { color: var(--accent); font-weight: 500; }

/* the date, on its own on the right */
.ed-row .when {
  flex: none; text-align: right; line-height: 1.1;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.ed-row .when .big {
  font: 600 13px var(--sans);
  color: var(--text-list); font-variant-numeric: tabular-nums;
}
.ed-row .when .small {
  font: 600 9.5px var(--sans); letter-spacing: .12em;
  color: var(--text-3); text-transform: uppercase;
}

.ed-row.is-sel {
  background: var(--accent-wash); border-left-color: var(--accent);
  padding-left: 12px;
}
.ed-row.is-sel .nm,
.ed-row.is-sel .when .big { color: var(--text); }
.ed-row.is-sel .sub, .ed-row.is-sel .when .small { color: var(--text-2); }
.ed-row.is-resting .nm,
.ed-row.is-resting .when .big { color: var(--text-2); }
.ed-row.is-resting.is-sel .nm,
.ed-row.is-resting.is-sel .when .big { color: var(--text); }

.month.is-quiet { opacity: .7; padding-top: 20px; }

.rail-foot {
  flex: none; padding: 10px 12px 0; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
/* the places as a quiet list, the one you are on lit; a new festival in red under it (Stijn, 27 Oct 2026) */
.rn-list { display: flex; flex-direction: column; gap: 2px; }
.rn-item { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px; color: var(--text-2); font-size: 14px; font-weight: 600; text-decoration: none; }
.rn-item:hover { color: var(--text); background: var(--raised); }
.rn-item.is-on { color: var(--text); background: var(--line); }
.rn-item svg { width: 17px; height: 17px; flex: none; }
/* feedback ready on a video: a small yellow dot at the end of its line */
.rn-dot { width: 8px; height: 8px; border-radius: 50%; background: #ffb020; margin-left: auto; }
.rn-new { width: 100%; font-size: 14px; font-weight: 700; padding: 11px 12px; border-radius: 9px; }
.rn-list:empty { display: none; }
/* the three boards as tiles in one row; Settings a square beside + New festival (Stijn, 2 Nov 2026) */
.rn-boards { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 6px; }
.rn-board { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 9px; border-radius: 10px; border: 1px solid var(--line); color: var(--text-2); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.rn-board svg { width: 19px; height: 19px; }
.rn-board:hover { color: var(--text); background: var(--raised); }
.rn-board.is-on { color: var(--text); background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent-line); }
.rn-act { display: flex; gap: 6px; }
.rn-act .rn-new { flex: 1; width: auto; }
.rn-set { flex: none; width: 44px; padding: 0; display: grid; place-items: center; border-radius: 9px; color: var(--text-2); }
.rn-set svg { width: 18px; height: 18px; }
.rn-set.is-on { color: var(--text); background: var(--line); }

/* ---------- detail pane ---------- */
.pane { flex: 1; padding: 24px 28px 60px; min-width: 0; }

.crumb { font: 500 11px var(--mono); color: var(--text-3); }
.crumb a:hover { color: var(--text-2); }

.title-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 8px; flex-wrap: wrap;
}
.title-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.title { font: 700 24px var(--sans); color: var(--text); letter-spacing: -.01em; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

.status {
  padding: 3px 10px; border-radius: 99px;
  font: 700 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line);
  white-space: nowrap;
}
.status.shot { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.status.planning { background: color-mix(in srgb, var(--planning) 12%, transparent); color: var(--planning); border-color: color-mix(in srgb, var(--planning) 35%, transparent); }

.btn {
  font: 600 12px var(--sans); color: var(--text);
  border: 1px solid var(--line-control); background: transparent;
  padding: 7px 13px; border-radius: 7px; cursor: pointer;
  transition: background .12s ease-out, border-color .12s ease-out, filter .12s ease-out;
  white-space: nowrap;
}
.btn:hover { background: var(--raised); border-color: var(--text-3); }
.btn-primary {
  font-weight: 700; color: #fff;          /* white on the red, in both themes */
  background: var(--accent); border-color: transparent;
}
.btn-primary:hover { filter: brightness(1.08); background: var(--accent); }
.btn-quiet { border-color: transparent; color: var(--text-2); padding: 5px 9px; }
.btn-quiet:hover { color: var(--text); background: var(--raised); border-color: transparent; }
.btn-sm { font-size: 11px; padding: 5px 10px; }
.btn-danger { color: var(--danger); border-color: var(--danger-line); }
.btn-go { font-weight: 700; color: #fff; background: var(--ok-fill); border-color: transparent; }
.btn-go:hover { filter: brightness(1.1); background: var(--ok-fill); }
/* a step that is finished: the button says so in green */
.btn-ok { font-weight: 700; color: #fff; background: var(--ok-fill); border-color: transparent; }
.btn-ok:hover { filter: brightness(1.1); background: var(--ok-fill); }
.btn-go:hover { filter: brightness(1.08); background: var(--ok); }
.btn-accent { color: var(--accent); border-color: var(--accent-line); background: var(--accent-wash); font-weight: 700; }
.btn-accent:hover { background: var(--accent); color: var(--text-invert); border-color: transparent; }
.btn-danger:hover { background: var(--danger-wash); border-color: var(--danger); }

.meta { font: 400 12.5px var(--sans); color: var(--text-2); margin-top: 4px; }
.meta .mono { font: 600 12px var(--mono); color: var(--text-list); }
.job-line {
  margin-top: 7px; display: inline-flex; align-items: center; gap: 7px;
  font: 600 11.5px var(--sans); color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: 99px; padding: 4px 11px;
}

.banner {
  display: flex; align-items: center; gap: 9px;
  margin-top: 14px; padding: 9px 12px; border-radius: 8px;
  font: 500 12px var(--sans); color: var(--danger);
  background: var(--danger-wash); border: 1px solid var(--danger-line);
}

/* ---------- cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.grid-7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 9px; padding: 14px; text-align: left; width: 100%;
  transition: background .12s ease-out, border-color .12s ease-out;
}
button.card { cursor: pointer; font: inherit; color: inherit; }
button.card:hover { background: color-mix(in srgb, var(--panel) 85%, var(--text)); border-color: var(--line-soft); }

.card-label { font: 700 9px var(--mono); letter-spacing: .14em; color: var(--text-3); }
.card-value { font: 600 14px var(--sans); color: var(--text); margin: 7px 0 9px; }
.bar { height: 4px; border-radius: 99px; background: var(--track); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width .25s ease-out; }
.bar > i.ok { background: var(--ok); }
.card-foot { font: 400 10.5px var(--sans); color: var(--text-2); margin-top: 8px; }

.section {
  font: 700 10px var(--mono); letter-spacing: .16em; color: var(--text-3);
  margin: 24px 0 10px; display: flex; align-items: center; gap: 10px;
}
.section .spacer { margin-left: auto; }
.section.is-bright > span:first-child { color: var(--text); }
.section .chip-count .accent { color: var(--accent); font-weight: 700; }

.day-card { padding: 12px 14px; }
.day-card .d { font: 700 12px var(--sans); color: var(--text); display: flex; align-items: flex-start; gap: 10px; }
.day-card .d > span:first-child { white-space: nowrap; }
.day-card .day-marks { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; font: 600 10.5px var(--sans); color: var(--accent); white-space: nowrap; line-height: 1.35; }
.day-card .l { font: 400 11.5px var(--sans); color: var(--text-2); margin-top: 4px; }
.day-card .c { font: 500 10.5px var(--mono); color: var(--text-3); margin-top: 6px; }

/* ---------- crew row ---------- */
.crew-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.stack { display: flex; }
.ava {
  width: 28px; height: 28px; border-radius: 99px; flex: none;
  background: var(--track); border: 2px solid var(--page);
  display: flex; align-items: center; justify-content: center;
  font: 700 9.5px var(--mono); color: var(--text-list);
}
.ava + .ava { margin-left: -8px; }
.ava.more { background: var(--panel); color: var(--text-3); box-shadow: inset 0 0 0 1px var(--line-soft); }
/* a real face when there is one */
.ava.has-photo { background-size: cover; background-position: center; border-color: var(--line-soft); }
/* a record with a picture the machine cannot reach: initials, and a dashed ring
   so you can see it is meant to have one */
.ava.no-photo { box-shadow: inset 0 0 0 1px var(--line-dashed); }
.ava-drop { cursor: pointer; }
.ava-drop:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.ava-drop.is-over { box-shadow: 0 0 0 3px var(--accent); }
.ava-xl { width: 64px; height: 64px; font-size: 18px; border-width: 1px; }
/* the picture field in the crew form */
.photo-drop {
  display: flex; align-items: center; gap: 14px; padding: 10px 12px;
  border: 1px dashed var(--line-dashed); border-radius: 10px; background: none;
}
.photo-drop.is-over { border-color: var(--accent); border-style: solid; background: color-mix(in srgb, var(--accent) 7%, transparent); }
.photo-drop.is-filled { border-style: solid; border-color: var(--line-soft); }
.photo-acts { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
/* getting the picture out is not the same kind of act as changing it, so it
   sits on its own at the right edge of the box */
.photo-save { margin-left: auto; }
.role-chip {
  font: 600 11px var(--mono); color: var(--text-2);
  border: 1px dashed var(--line-dashed); border-radius: 99px;
  padding: 5px 11px; background: none; cursor: pointer;
  transition: color .12s ease-out, border-color .12s ease-out;
}
.role-chip:hover { color: var(--text-list); border-color: var(--text-3); }
.link {
  font: 600 11.5px var(--sans); color: var(--accent);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.link:hover { filter: brightness(1.12); }

/* ---------- empty ---------- */
.empty { padding: 40px 10px; text-align: center; color: var(--text-3); }
.empty .t { font: 600 13px var(--sans); color: var(--text-2); }
.empty .d { font: 400 12px var(--sans); margin: 4px auto 14px; max-width: 340px; }

/* ---------- crew board ---------- */
.board { padding: 24px 28px 60px; max-width: 1100px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th {
  text-align: left; font: 700 9px var(--mono); letter-spacing: .14em;
  color: var(--text-3); padding: 10px 12px; border-bottom: 1px solid var(--line);
  white-space: nowrap; text-transform: uppercase;
}
.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--line); }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: var(--raised); }
.tbl .nm { font-weight: 600; color: var(--text); }
.tbl .note { font: 400 11px var(--sans); color: var(--text-3); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.pos-chip {
  display: inline-block; font: 500 10.5px var(--mono); color: var(--text-2);
  background: var(--track); border-radius: 5px; padding: 3px 7px; margin: 2px 4px 2px 0;
}
.table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; }

/* ---------- modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100; padding: 22px;
  background: rgba(6,8,11,.55); backdrop-filter: blur(3px);
  display: grid; place-items: center;
}
.modal.is-wide { width: min(860px, 100%); }
.modal {
  width: min(520px, 100%); background: var(--panel);
  border: 1px solid var(--line-soft); border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
}
.modal-head { padding: 15px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.modal-head h3 { font: 700 14px var(--sans); }
.modal-head .btn-quiet, .modal-head .btn-ghost { margin-left: auto; }
.modal-body { padding: 18px; overflow-y: auto; }
.modal-foot { padding: 13px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }
.modal-foot .spacer { flex: 1; }

.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font: 700 9px var(--mono); letter-spacing: .14em; color: var(--text-3); text-transform: uppercase; }
/* a field that has to be filled in and is not: its name in red, the box edged red */
.field.is-missing > label { color: var(--accent); }
.field.is-missing > .input, .field.is-missing > .select, .field.is-missing > .textarea { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.input, .select, .textarea {
  width: 100%; padding: 8px 10px; border-radius: 7px;
  background: var(--page); border: 1px solid var(--line-soft); color: var(--text);
  font: 400 12.5px var(--sans); transition: border-color .12s ease-out;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); }
.textarea { resize: vertical; min-height: 76px; line-height: 1.55; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .span-2 { grid-column: 1 / -1; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px);
  background: var(--panel); border: 1px solid var(--line-control);
  color: var(--text); padding: 10px 16px; border-radius: 9px;
  font: 500 12.5px var(--sans); box-shadow: 0 14px 34px rgba(0,0,0,.4);
  opacity: 0; pointer-events: none; transition: opacity .15s ease-out, transform .15s ease-out; z-index: 200;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .grid-5, .grid-6, .grid-7 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-5, .grid-6, .grid-7 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .shell { flex-direction: column; }
  .rail { width: 100%; height: auto; position: static; border-right: none; border-bottom: 1px solid var(--line); }
  .rail-list { max-height: 42vh; }
  .pane { padding: 20px 16px 50px; }
  .board { padding: 20px 16px 50px; }
}
@media (max-width: 520px) {
  .grid-4, .grid-5, .grid-6, .grid-7 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .title { font-size: 20px; }
}

/* ---------- timetable import ---------- */
.modal-wide { width: min(1120px, 100%); }
.modal-book { width: min(1460px, 100%); }
.modal-wide .modal-body { max-height: 62vh; }

.drop {
  border: 1px dashed var(--line-dashed); border-radius: 9px;
  padding: 16px; text-align: center; margin-bottom: 12px;
  font: 400 12.5px var(--sans); color: var(--text-2);
  transition: border-color .12s ease-out, background .12s ease-out;
}
.drop.is-over { border-color: var(--accent); background: var(--accent-wash); }
.drop-nda { margin: 0; padding: 8px 10px; min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.drop-nda.is-filled { border-style: solid; border-color: var(--line-soft); justify-content: flex-start; }
.drop-nda .nda-name { color: var(--text); }
.drop .hint { display: block; margin-top: 4px; font-size: 11px; color: var(--text-3); }

.paste-box {
  min-height: 190px; font: 400 12px var(--mono); line-height: 1.6;
  white-space: pre; overflow-wrap: normal; overflow-x: auto;
}

.read-summary {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 12px; border-radius: 8px;
  background: var(--page); border: 1px solid var(--line);
  font: 400 12px var(--sans); color: var(--text-2);
}
.read-summary b { color: var(--text); font-weight: 600; }
.read-summary .flag {
  font: 600 10.5px var(--mono); letter-spacing: .04em;
  padding: 3px 8px; border-radius: 99px;
  background: var(--danger-wash); border: 1px solid var(--danger-line); color: var(--danger);
}
.read-summary .flag.ok {
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border-color: color-mix(in srgb, var(--ok) 32%, transparent); color: var(--ok);
}

.map-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: 8px;
}
.map-label { font: 700 9px var(--mono); letter-spacing: .14em; color: var(--text-3); text-transform: uppercase; }
.map-pair { display: flex; align-items: center; gap: 5px; }
.map-pair > span { font: 400 11px var(--sans); color: var(--text-3); }
.select-sm { width: auto; padding: 4px 7px; font-size: 11.5px; border-radius: 6px; }

.preview-wrap { max-height: 44vh; overflow: auto; }
.tbl.preview td { padding: 6px 10px; font-size: 12px; }
.tbl.preview th { position: sticky; top: 0; background: var(--panel); z-index: 1; }
.tbl.preview tr.is-off { opacity: .38; }
.tbl.preview tr.is-bad td { background: var(--danger-wash); }
.tbl.preview .select-sm { min-width: 78px; }

.star {
  background: none; border: 0; cursor: pointer; font-size: 14px; line-height: 1;
  color: var(--text-3); padding: 2px 4px;
}
.star.is-on { color: var(--accent); }
.day-card .day-star { color: var(--accent); font-size: 10px; letter-spacing: 0; }

/* ● REC — "we record this set". Off: a hollow ring; on: a red light with a glow. */
.rec-dot {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  background: none; border: 0; cursor: pointer; padding: 2px 3px; width: 48px; justify-content: flex-start;
  font: 700 9.5px var(--mono); letter-spacing: .12em; color: var(--accent);
}
.rec-dot .dot {
  width: 10px; height: 10px; border-radius: 99px; box-sizing: border-box;
  border: 1.5px solid var(--text-3); background: transparent;
  transition: background .12s ease-out, border-color .12s ease-out, box-shadow .12s ease-out;
}
.rec-dot:hover .dot { border-color: var(--accent); }
.rec-dot.is-on .dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 8px var(--accent-line); }
.rec-count { color: var(--accent); font-weight: 600; }
.alarm {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  font: 700 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #fff;
  background: var(--accent); border-radius: 4px; padding: 2px 7px; cursor: help;
}
.alarm::before { content: ''; width: 6px; height: 6px; border-radius: 99px; background: #fff; opacity: .9; }
.alarm-sm { font-size: 7px; letter-spacing: .08em; padding: 1px 5px; gap: 4px; position: relative; }
.alarm-sm::before { width: 4px; height: 4px; }
.alarm-cell { width: 1px; white-space: nowrap; padding-left: 0 !important; }
/* the hover note: what is still missing */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 6px); z-index: 20;
  min-width: 180px; max-width: 280px; white-space: normal; text-transform: none; letter-spacing: 0;
  font: 400 11.5px var(--sans); color: var(--text); background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: 7px; padding: 7px 9px; box-shadow: 0 8px 24px rgba(0,0,0,.35); line-height: 1.4;
}
.set-row.is-rec { background: var(--accent-wash); }
.set-row.is-rec .set-act { font-weight: 600; }
.tbl.preview .rec-dot { padding: 0; width: auto; }

/* ---------- timetable screen ---------- */
.day-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 12px; }
.day-tab {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 9px 14px; border-radius: 9px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); color: var(--text-2);
  transition: border-color .12s ease-out, background .12s ease-out;
}
.day-tab:hover { border-color: var(--line-soft); }
.day-tab.is-on { border-color: var(--accent); background: var(--accent-wash); }
.day-tab .dt-day { font: 600 13px var(--sans); color: var(--text-list); }
.day-tab.is-on .dt-day { color: var(--text); }
.day-tab .dt-n { font: 400 10.5px var(--sans); color: var(--text-3); }

.day-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 8px;
  margin-bottom: 16px;
}
.day-bar .spacer { margin-left: auto; }
.day-call { font: 600 13px var(--sans); color: var(--text-list); font-variant-numeric: tabular-nums; }
.chip-count { font: 500 11px var(--sans); color: var(--text-3); }

.stage-stack { display: flex; flex-direction: column; gap: 12px; }
.card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.card-head h3 { font: 700 15px var(--sans); color: var(--text); }
.card-head .spacer { margin-left: auto; }
.stage-block .card-head h3 {
  font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-list);
}
.set-list { display: flex; flex-direction: column; }
.set-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-top: 1px solid var(--line);
}
.set-row:first-child { border-top: none; }
.set-row:hover { background: var(--raised); }
.set-time {
  flex: none; width: 96px; font: 500 11.5px var(--mono);
  color: var(--text-2); font-variant-numeric: tabular-nums;
}
.set-act { flex: 1; min-width: 0; font: 400 13px var(--sans); color: var(--text); }
.set-row.is-starred .set-act { font-weight: 600; }
.set-note { display: block; font: 400 11px var(--sans); color: var(--text-3); }
.set-actions { flex: none; display: flex; gap: 2px; opacity: 0; transition: opacity .12s ease-out; }
.set-row:hover .set-actions, .set-row:focus-within .set-actions { opacity: 1; }
@media (max-width: 820px) {
  .set-actions { opacity: 1; }
  .set-time { width: 84px; }
}

/* ---------- version compare ---------- */
.read-summary .flag.move {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent);
}
.change-list { display: flex; flex-direction: column; }
.change-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-top: 1px solid var(--line); cursor: pointer;
}
.change-row:first-child { border-top: none; }
.change-row:hover { background: var(--raised); }
.change-tag {
  flex: none; width: 62px; text-align: center;
  font: 700 9px var(--mono); letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 0; border-radius: 99px;
  background: var(--track); color: var(--text-3);
}
.kind-moved .change-tag, .kind-renamed .change-tag {
  background: var(--accent-soft); color: var(--accent);
}
.kind-new .change-tag {
  background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok);
}
.kind-gone .change-tag {
  background: var(--danger-wash); color: var(--danger);
}
.change-act { flex: 1; min-width: 0; font: 500 12.5px var(--sans); color: var(--text); display: flex; align-items: center; gap: 6px; }
.change-where { flex: none; font: 400 11px var(--mono); color: var(--text-3); }
.change-detail { flex: none; width: 200px; text-align: right; font: 400 11.5px var(--sans); color: var(--text-2); }
.kind-gone .change-act { text-decoration: line-through; color: var(--text-2); }
@media (max-width: 700px) {
  .change-where { display: none; }
  .change-detail { width: auto; }
}
.kind-yours .change-tag { background: var(--accent-soft); color: var(--accent); }
.read-summary .flag.mine { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }

/* ---------- booking crew ---------- */
.book-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.book-total { font: 600 12px var(--sans); color: var(--text-list); font-variant-numeric: tabular-nums; }
.fee-hint { font: 400 10.5px var(--sans); color: var(--text-3); }

/* on a narrow screen the columns would otherwise be quietly cut off at the
   edge - a scrollbar at least says there is more of the row than this */
.book-list { display: flex; flex-direction: column; overflow-x: auto; }
.book-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 6px; border-top: 1px solid var(--line); cursor: pointer;
}
.book-row:first-child { border-top: none; }
.book-row:hover { background: var(--raised); }
.book-row.is-booked { background: var(--accent-wash); }
.book-who { flex: 1; min-width: 130px; display: flex; flex-direction: column; gap: 1px; }
.book-name { font: 600 12.5px var(--sans); color: var(--text); }
.book-role { font: 400 11px var(--sans); color: var(--text-3); }
.book-elsewhere { font: 400 10.5px var(--sans); color: var(--text-3); }

.book-days { display: flex; gap: 4px; flex: none; }
.dpill {
  min-width: 30px; padding: 3px 6px; border-radius: 6px; cursor: pointer;
  font: 600 9.5px var(--mono); letter-spacing: .04em;
  background: transparent; border: 1px solid var(--line-soft); color: var(--text-3);
  transition: background .12s ease-out, color .12s ease-out, border-color .12s ease-out;
}
.dpill.is-on { background: var(--accent); border-color: transparent; color: var(--text-invert); }

.book-fee { display: flex; flex-direction: column; gap: 2px; flex: none; align-items: flex-end; }
/* the booked row as a grid: who · status · function · info · team · days · fee · actions;
   a second function lives on row 2 in the function and fee columns */
.book-row.is-grid {
  display: grid; align-items: center; column-gap: 10px; row-gap: 6px;
  grid-template-columns: minmax(130px, 1fr) 72px 128px 96px minmax(104px, 1fr) auto 80px 80px auto auto;
}
.book-row.is-grid .book-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.book-row.is-grid .c-who { grid-column: 1; align-self: center; }
.book-row.is-grid .c-status { grid-column: 2; align-self: center; }
.book-row.is-grid .c-fn { grid-column: 3; }
.book-row.is-grid .c-info { grid-column: 4; }
.book-row.is-grid .c-team { grid-column: 5; }
.book-row.is-grid .c-days { grid-column: 6; }
.book-row.is-grid .c-fee { grid-column: 7; justify-content: flex-end; }
.book-row.is-grid .c-transport { grid-column: 8; justify-content: flex-end; }
/* the extra line's detail spans the info and team columns */
.book-row.is-grid .c-detail { grid-column: 4 / 7; }
.book-detail { width: 100%; min-width: 0; padding: 5px 8px; font-size: 12px; }
.c-transport .input-fee::placeholder { font-size: 10.5px; letter-spacing: -.01em; }
.book-row.is-grid .c-total { grid-column: 9; justify-content: flex-end; align-self: center; }
.book-row.is-grid .c-act { grid-column: 10; justify-content: flex-end; gap: 4px; flex-wrap: nowrap; white-space: nowrap; }
/* fee plus every extra function plus the travel money: what this one costs */
.book-rowtotal { font: 600 13px var(--mono); color: var(--ok); white-space: nowrap; }
.book-rowtotal.is-none { color: var(--text-3); font-weight: 400; }
.book-row.is-grid .book-extras { display: contents; }
.book-cols { border-top: 0; padding-top: 0; padding-bottom: 2px; cursor: default; }
.book-cols .book-cell { font: 500 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.book-cols .c-fee, .book-cols .c-transport, .book-cols .c-total { justify-content: flex-start; }
.book-row.is-grid .book-clash { grid-column: 1 / -1; }
.book-row.is-grid .c-fn .select, .book-row.is-grid .c-info .select, .book-row.is-grid .c-team .select { width: 100%; min-width: 0; }
.fee-wrap { position: relative; }
.fee-wrap::before { content: '\20ac'; position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font: 500 12px var(--sans); color: var(--text-3); pointer-events: none; }
.fee-wrap .input-fee { padding-left: 22px; }
.book-row.is-locked .fee-wrap::before { left: 4px; }
.book-row.is-locked .select:disabled, .book-row.is-locked .input:disabled { opacity: .75; background: transparent; border-color: transparent; cursor: default; padding-left: 4px; }
.book-row.is-locked .select:disabled { appearance: none; -webkit-appearance: none; }
.book-row.is-locked .dpill:disabled { cursor: default; opacity: .9; }
.book-row.is-locked .link:disabled { display: none; }
.fee-wrap .input-fee { width: 80px; text-align: right; }
.fee-wrap.is-agreed .input-fee { border-color: var(--accent-line); }
.fee-wrap[data-tip]:hover::after { left: auto; right: 0; }
.c-fee .input-fee { width: 80px; text-align: right; }
.input-fee { width: 92px; padding: 5px 8px; font-size: 12px; text-align: right; }

.book-clash {
  flex-basis: 100%; margin-left: 34px;
  font: 500 10.5px var(--sans); color: var(--danger);
}

.clash-tag {
  margin-left: 8px; padding: 2px 7px; border-radius: 99px;
  font: 600 9px var(--mono); letter-spacing: .08em; text-transform: uppercase;
  background: var(--danger-wash); border: 1px solid var(--danger-line); color: var(--danger);
}

/* ---------- build and de-build days ---------- */
.dpill-build, .dpill-debuild { border-style: dashed; }
.dpill-build.is-on, .dpill-debuild.is-on {
  background: var(--track); border-color: var(--border-strong, var(--line-soft));
  border-style: solid; color: var(--text-2);
}
.day-card.is-build { background: var(--page); border-style: dashed; }
.day-card.is-build .d { color: var(--text-2); }
.day-card.is-build .l, .day-card.is-build .c { color: var(--text-3); }
.day-kind { font: 700 9px var(--mono); letter-spacing: .12em; color: var(--text-3); }

/* ---------- crew record + booking states ---------- */
.skill-head { display: flex; align-items: center; gap: 10px; margin: 20px 0 8px; }
.skill-head .spacer { margin-left: auto; }
.skill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 18px; }
.skill-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.skill-name { flex: 1; font: 400 12.5px var(--sans); color: var(--text-2); }
.stars { display: inline-flex; gap: 1px; flex: none; }
.star-btn {
  background: none; border: 0; cursor: pointer; padding: 1px 2px;
  font-size: 14px; line-height: 1; color: var(--text-3);
  transition: color .1s ease-out;
}
.star-btn.is-on { color: var(--accent); }
.star-btn:hover { color: var(--accent); }
.age-pair { display: flex; align-items: center; gap: 8px; }
.age-pair .input { flex: 1; }

.skill-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.pos-chip .lvl {
  margin-left: 5px; font: 700 9.5px var(--mono); color: var(--accent);
}

.status-pill {
  flex: none; padding: 3px 9px; border-radius: 99px; white-space: nowrap;
  font: 700 9px var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.status-pill.is-option {
  background: rgba(240,160,75,.14); border: 1px solid rgba(240,160,75,.4); color: #f0a04b;
}
.status-pill.is-booked {
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 36%, transparent); color: var(--ok);
}
.book-row.st-option { background: rgba(240,160,75,.06); }
.book-row.st-booked { background: color-mix(in srgb, var(--ok) 7%, transparent); }
.book-confirm { display: flex; gap: 4px; flex: none; }
.ava.is-option { box-shadow: inset 0 0 0 1.5px rgba(240,160,75,.75); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- stage plans ---------- */
.stage-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 20px 0 14px; }
.stage-tab {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 7px 12px; border-radius: 8px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); color: var(--text-2);
  transition: border-color .12s ease-out, background .12s ease-out;
}
.stage-tab:hover { border-color: var(--line-soft); }
.stage-tab.is-on { border-color: var(--accent); background: var(--accent-wash); }
.stage-tab .st-name { font: 600 11.5px var(--mono); letter-spacing: .06em; color: var(--text-list); }
.stage-tab.is-on .st-name { color: var(--text); }
.stage-tab .st-meta { font: 400 10px var(--sans); color: var(--text-3); }
.stage-tab.has-plan .st-meta { color: var(--ok); }

.plan-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(400px, 1fr); gap: 16px; align-items: start; }
.plan-wrap { display: flex; flex-direction: column; gap: 10px; }
.plan-stage {
  position: relative; background: var(--panel);
  border: 1px solid var(--line); border-radius: 9px; overflow: hidden;
  min-height: 180px; cursor: crosshair;
}
.plan-img { display: block; width: 100%; height: auto; }
/* the sketch that stands in for a plan */
/* the drawing carries its own edge - the card around it would be a second one */
.plan-stage.is-blueprint { background: none; border-color: transparent; }
.plan-blueprint { display: block; width: min(100%, calc(72vh * 440 / 520)); aspect-ratio: 440 / 520; height: auto; margin: 0 auto; }
.plan-blueprint .bp-wall { stroke: var(--line-control); }
.plan-blueprint .bp-divider { stroke: var(--line-soft); }
.plan-blueprint .bp-hatch { stroke: var(--track); }
.plan-blueprint .bp-door { fill: var(--page); stroke: var(--line-control); }
.plan-blueprint .bp-stage { fill: var(--page); stroke: var(--text-2); }
.plan-blueprint .bp-dj { stroke: var(--accent); }
.plan-blueprint .bp-axis { stroke: var(--line); }
.plan-blueprint .bp-scale { stroke: var(--text-3); }
.plan-blueprint .bp-label { fill: var(--text-3); }
.plan-blueprint .bp-label-stage { fill: var(--text-2); }
.plan-blueprint .bp-label-foh { fill: var(--text-2); }
.plan-blueprint .bp-label-dj { fill: var(--accent); font-weight: 700; }
.plan-blueprint .bp-label-faint { fill: var(--text-3); opacity: .8; }
.plan-pins { position: absolute; inset: 0; pointer-events: none; }
.btn-plus {
  width: 34px; height: 34px; border-radius: 9px; border: 0; cursor: pointer; flex: none;
  background: var(--accent); color: #fff; font: 800 22px/1 var(--sans); display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(237,28,36,.35); transition: filter .12s ease-out, transform .12s ease-out;
}
.btn-plus:hover { filter: brightness(1.1); transform: translateY(-1px); }
.plan-missing { padding: 26px; text-align: center; font: 400 12.5px var(--sans); color: var(--text-3); }
.plan-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.drop-big { padding: 46px 20px; }

.pin {
  /* the DOT sits on the stored spot; the label hangs off it to the right, or to the
     left (.is-flip) when two cameras are close together */
  position: absolute; transform: translate(-11px, -50%);
  display: flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: grab;
  pointer-events: auto; touch-action: none;
}
.pin.is-flip { flex-direction: row-reverse; transform: translate(calc(-100% + 11px), -50%); }
.pin.is-dragging { cursor: grabbing; z-index: 5; }
.pin-dot {
  min-width: 22px; height: 22px; padding: 0 4px; border-radius: 99px; flex: none;
  background: var(--page); border: 1.5px solid var(--accent); color: var(--accent);
  font: 800 10.5px var(--mono); line-height: 19px; text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.pin-label {
  font: 600 10.5px var(--sans); color: #fff; white-space: nowrap;
  background: rgba(14,17,22,.82); padding: 2px 7px; border-radius: 5px;
  border: 1px solid rgba(255,255,255,.16);
}
.pin-label .pin-op { display: block; font: 500 9.5px var(--sans); color: rgba(255,255,255,.75); margin-top: -1px; }
/* what the camera stands on, under its name */
.pin-label .pin-grip { display: block; font: 500 9.5px var(--mono); letter-spacing: .02em; color: rgba(255,255,255,.62); margin-top: -1px; }
.pin:hover .pin-grip { color: var(--text-invert); }
.pin:hover .pin-label { background: var(--accent); color: var(--text-invert); border-color: transparent; }
.pin:hover .pin-op { color: var(--text-invert); }
.pos-letter {
  flex: none; width: 24px; height: 24px; border-radius: 99px; display: grid; place-items: center;
  font: 800 10.5px var(--mono); color: var(--accent); background: transparent; border: 1.5px solid var(--accent);
}
.pos-letter.is-off { color: var(--text-3); border: 1.5px dashed var(--line-control); }
.stack-2 { display: flex; flex-direction: column; gap: 6px; }
.pos-needs { display: block; font: 400 11px var(--sans); color: var(--text-2); margin-top: 2px; white-space: pre-line; }

/* form bits: yes/no rows, units on inputs */
.field.is-check label.check-row { display: flex; align-items: center; gap: 8px; min-height: 34px; font: 400 12.5px var(--sans); color: var(--text-list); text-transform: none; letter-spacing: 0; cursor: pointer; }
.check { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.affix { display: flex; align-items: stretch; }
.affix .input { flex: 1; min-width: 0; }
.affix .affix-x {
  display: grid; place-items: center; padding: 0 10px; font: 600 12px var(--mono); color: var(--text-2);
  background: var(--raised); border: 1px solid var(--line-soft);
}
.affix.has-prefix .affix-x { border-right: 0; border-radius: 7px 0 0 7px; }
.affix.has-prefix .input { border-radius: 0 7px 7px 0; }
.affix.has-suffix .affix-x { border-left: 0; border-radius: 0 7px 7px 0; }
.affix.has-suffix .input { border-radius: 7px 0 0 7px; }

.pos-list { display: flex; flex-direction: column; }
.pos-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-top: 1px solid var(--line); cursor: pointer;
}
.pos-row:first-child { border-top: none; }
.pos-row:hover { background: var(--raised); }
.pos-row.is-unplaced .pos-name { color: var(--text-2); }
.pos-mark { flex: none; width: 12px; text-align: center; color: var(--accent); font-size: 11px; }
.pos-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pos-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.pos-name { font: 600 14px var(--sans); color: var(--text); min-width: 0; }
.pos-type { flex: none; font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.pos-spec { font: 400 11px var(--mono); color: var(--text-2); line-height: 1.45; }
.pos-spec.is-quiet { color: var(--text-3); font-family: var(--sans); }
/* the card in the camera: it is read off a screen at arm's length, so it gets
   real type and a little weight behind it */
.pos-card {
  flex: none; font: 600 12px var(--mono); letter-spacing: .04em; color: var(--accent);
  border: 1px solid var(--accent-line); border-radius: 5px; padding: 4px 9px; max-width: 160px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pos-op { flex: none; width: 16px; text-align: center; font: 700 14px var(--sans); color: var(--ok); }
/* the positions as a table: each thing in a column of its own */
.pos-row.is-grid { display: grid; grid-template-columns: 26px minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .9fr) 18px; gap: 0 12px; padding: 10px 16px; }
.pos-row.is-grid.has-more { grid-template-columns: 26px minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .9fr) 18px 30px; }
.pos-row.is-grid .pos-body { gap: 3px; }
.pos-row.is-grid .pos-type { font-size: 9px; letter-spacing: .1em; }
.pos-row.is-head { cursor: default; padding-top: 2px; padding-bottom: 8px; font: 600 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.pos-row.is-head:hover { background: none; }
.pos-row.is-head .pos-op { font: inherit; color: inherit; width: auto; }
.pos-row.is-head + .pos-row { border-top: 1px solid var(--line); }
/* a day: a quiet band over the column names */
.pos-dayband { display: flex; align-items: center; gap: 9px; padding: 9px 16px; margin: 14px 0 6px; border-radius: 8px;
  background: var(--raised); border: 1px solid var(--line);
  font: 600 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.pos-dayband:first-child { margin-top: 0; }
.pos-dayband b { font: 700 11.5px var(--mono); letter-spacing: .12em; color: var(--text); }
.pos-addrow { justify-content: flex-end; margin-bottom: 6px; }
.pos-col { font: 400 11.5px var(--mono); color: var(--text); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-col.is-none { color: var(--text-3); }
.pos-lens { display: flex; flex-direction: column; gap: 2px; text-overflow: clip; }
.pos-lens span { white-space: nowrap; }
.pos-cardcol { min-width: 0; display: flex; }
.pos-row.is-grid .pos-card { font-size: 11px; padding: 3px 7px; max-width: 100%; }
/* a narrow list drops the cards, never the lens: the cards are on the gear
   list too, the lens is what the operator needs to see here */
.pos-list:has(.is-grid) { container-type: inline-size; }
@container (max-width: 600px) {
  .pos-row.is-grid { grid-template-columns: 26px minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.1fr) 18px; }
  .pos-row.is-grid.has-more { grid-template-columns: 26px minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.1fr) 18px 30px; }
  .pos-row.is-grid > .pos-cardcol, .pos-row.is-head > span:nth-child(5) { display: none; }
}
.pos-more {
  flex: none; background: none; border: 0; cursor: pointer; padding: 4px 6px; border-radius: 6px;
  font: 500 12px var(--mono); letter-spacing: .2em; color: var(--text-2);
}
.pos-more:hover { background: var(--track); color: var(--text); }
/* legacy pieces still used by the pick list */
.pos-meta { font: 400 11px var(--sans); color: var(--text-3); }
.pos-actions { flex: none; display: flex; gap: 2px; }

/* the small menu under a ··· */
.menu-pop {
  position: absolute; z-index: 300; min-width: 150px; padding: 5px;   /* over any window it is opened from */
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: 9px;
  box-shadow: 0 12px 30px rgba(0,0,0,.4); display: flex; flex-direction: column;
  max-height: 60vh; overflow-y: auto;   /* a long catalogue scrolls rather than runs off */
}
.menu-item {
  text-align: left; background: none; border: 0; cursor: pointer; padding: 8px 10px; border-radius: 6px;
  font: 500 12.5px var(--sans); color: var(--text);
}
.menu-item:hover { background: var(--raised); }
.menu-item.is-danger { color: var(--danger); }
.menu-item.is-danger:hover { background: var(--danger-wash); }
/* the review page's download menu: name and what it is, the size on the right,
   a thin line between the three */
.menu-pop.rv-dlx { min-width: 270px; padding: 6px; gap: 5px; }
.rv-dlx .menu-item { position: relative; display: flex; align-items: center; gap: 18px; padding: 9px 12px; }
.rv-dlx .menu-item + .menu-item::before { content: ''; position: absolute; left: 12px; right: 12px; top: -3px; border-top: 1px solid var(--line); }
.rv-dlx-t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rv-dlx-t b { font: 600 13.5px var(--sans); color: var(--text); }
.rv-dlx-t small { font: 400 11.5px var(--sans); color: var(--text-3); }
.rv-dlx-s { font: 600 13.5px var(--sans); color: var(--text); white-space: nowrap; }

@media (max-width: 980px) {
  .plan-cols { grid-template-columns: minmax(0, 1fr); }
  .pos-actions { opacity: 1; }
}
.pos-row.pick { width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); cursor: pointer; }
.pos-row.pick:hover { background: var(--accent-wash); }
.pos-row.pick.is-new { border-top: none; }
.pos-row.pick.is-new .pos-mark { color: var(--accent); font-weight: 700; }
.pos-row.pick.is-new .pos-name { color: var(--accent); }

.gap-list { display: flex; flex-direction: column; }
.gap-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); }
.gap-row:first-child { border-top: none; }
.gap-count {
  flex: none; min-width: 28px; text-align: center; padding: 2px 6px; border-radius: 6px;
  font: 700 11px var(--mono); background: var(--track); color: var(--text-2);
}
.gap-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gap-reason { font: 500 12.5px var(--sans); color: var(--text-2); }
.gap-where { font: 400 11px var(--mono); color: var(--text-3); overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .sched-acts, .sched-why { display: none; }
  .sched-pos { width: 120px; }
  .sched-pick { width: 170px; }
}

/* ---------- shooting schedule: the Draaischema grid ----------
   Time runs down, positions run across. Built to the design handoff; the palette
   stays on this app's tokens so the light theme keeps working, and the type stays
   on the system stacks rather than pulling a webfont into an offline-first app. */
.ds-card {
  background: var(--page); border: 1px solid var(--line); border-radius: 12px;
  padding: 20px 22px 22px; margin-top: 16px; overflow-x: auto;
}
.ds-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ds-stage { font: 700 20px var(--sans); letter-spacing: .02em; color: var(--text); }
.ds-meta { font: 400 12px var(--mono); color: var(--text-3); }
.ds-pill {
  font: 500 11px var(--mono); letter-spacing: .06em; color: var(--text-2);
  background: none; border: 1px solid var(--line-soft); border-radius: 5px;
  padding: 6px 10px; cursor: pointer; white-space: nowrap;
}
.ds-pill:hover { border-color: var(--text-3); color: var(--text); }
.ds-pill.is-primary { background: var(--accent); border-color: transparent; color: var(--text-invert); font-weight: 700; }
.ds-pill.is-primary:hover { filter: brightness(1.08); }

.ds-colhead, .ds-body { display: flex; gap: 6px; min-width: 900px; }
.ds-colhead { border-bottom: 1px solid var(--line); padding-bottom: 8px; align-items: flex-end; }
.ds-gutter-head { width: 48px; flex: none; }
.ds-sets-head { width: 260px; flex: none; font: 500 10px var(--mono); letter-spacing: .12em; color: var(--text-3); }
.ds-poshead { flex: 1; min-width: 92px; display: flex; flex-direction: column; gap: 5px; }
.ds-posname {
  font: 600 13px var(--sans); color: var(--text-list);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-posspec {
  display: flex; align-items: baseline; gap: 6px;
  font: 500 8px var(--mono); letter-spacing: .12em; color: var(--text-3);
  white-space: nowrap; overflow: hidden;
}
.ds-posspec.is-relay { color: var(--accent); }
.ds-posgroup {
  font: 500 8px var(--mono); letter-spacing: .08em; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-posnote { color: var(--text-3); }
/* the shift length sits in a chip under the camera name — type a number, regenerate */
.ds-posspec-input {
  width: 40px; padding: 2px 8px; border-radius: 4px; text-align: center;
  background: var(--ds-block); border: 1px solid var(--ds-chip-line); color: var(--text);
  font: 500 11px var(--mono); letter-spacing: 0;
}
.ds-posspec-input:hover { border-color: var(--line-control); }
.ds-posspec-input:focus { outline: none; border-color: var(--accent); }

/* what each rotation actually produces — bodies, positions, on/off */
.ds-rots { display: flex; gap: 10px; flex-wrap: wrap; margin: -4px 0 14px; }
.ds-rot {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px;
  font: 500 9.5px var(--mono); letter-spacing: .08em; color: var(--text-3);
}
.ds-rot b { color: var(--text-2); font-weight: 600; }
.ds-rot.is-tight { border-color: var(--accent-line); }
.ds-rot.is-tight b { color: var(--accent); }

.ds-body { padding-top: 8px; position: relative; }
/* hour and half-hour rules run the full card width, under the labels and blocks */
.ds-rules { position: absolute; left: 0; right: 0; top: 8px; bottom: 0; pointer-events: none; }
/* a rule every quarter hour: the hour clearest, the half-hour quieter, the quarter faintest */
.ds-rules i { position: absolute; left: 0; right: 0; height: 1px; background: var(--ds-rule-quarter); }
.ds-rules i.is-half { background: var(--ds-rule-half); }
.ds-rules i.is-hour { background: var(--ds-rule-hour); }
.ds-gutter { width: 48px; flex: none; position: relative; }
.ds-tick {
  position: absolute; left: 0; transform: translateY(-50%);
  background: var(--page); padding: 2px 6px 2px 0;
  font: 400 10px var(--mono); color: var(--text-3);
}
.ds-tick.is-hour { font-weight: 600; color: var(--text-2); }
.ds-gutter.is-right .ds-tick { left: auto; right: 0; padding: 2px 0 2px 6px; }

.ds-sets { width: 260px; flex: none; position: relative; }
.ds-set {
  position: absolute; left: 0; right: 0; overflow: hidden; box-sizing: border-box;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 9px; display: flex; flex-direction: column; justify-content: center;
}
.ds-set-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ds-set-dur {
  flex: none; font: 400 9px var(--mono); color: var(--text-2);
  border: 1px solid var(--ds-chip-line); border-radius: 3px; padding: 1px 6px; white-space: nowrap;
}
.ds-set.is-off .ds-set-dur { color: var(--text-3); opacity: .8; }
.ds-set.is-key .ds-set-dur { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.35); }
.ds-set.is-tiny .ds-set-dur { display: none; }
.ds-set-name {
  display: block; font: 500 12px var(--sans); color: var(--text-list); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-set.is-tiny .ds-set-time, .ds-set.is-wrap .ds-set-time { display: none; }
.ds-set.is-wrap .ds-set-name {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ds-set-time { display: block; margin-top: 2px; font: 400 9px var(--mono); letter-spacing: .06em; color: var(--text-3); }
/* recorded: white, a red edge down the left · key set: red all over · the rest: greyed */
.ds-set.is-rec .ds-set-name { color: var(--text); font-weight: 600; }
.ds-set.is-off { background: var(--ds-set-off); border-color: transparent; }
.ds-set.is-off .ds-set-name { color: var(--text-3); }
.ds-set.is-off .ds-set-time { color: var(--text-3); opacity: .7; }
.ds-set.is-key { background: var(--accent); border-color: var(--accent); }
.ds-set.is-key .ds-set-name { color: #fff; font-weight: 600; }
.ds-set.is-key .ds-set-time { color: rgba(255,255,255,.72); }

.ds-col { flex: 1; min-width: 92px; position: relative; border-radius: 6px; }
.ds-col.is-relay { box-shadow: inset 0 0 0 1px var(--accent-line); }

/* a letter on every column head, the same one the camera plan and gear list use */
.hd-line { display: flex; align-items: center; gap: 7px; min-width: 0; }
.hd-letter {
  width: 17px; height: 17px; flex: none; border-radius: 50%; border: 1px solid var(--accent); color: var(--accent);
  font: 700 8px var(--mono); display: inline-flex; align-items: center; justify-content: center;
}

/* ---- unmanned cameras: a narrow lane, green while it rolls ---- */
.fc-head { width: 124px; flex: none; display: flex; flex-direction: column; gap: 5px; overflow: hidden; padding-right: 8px; }
.fc-name { display: flex; align-items: center; gap: 7px; font: 600 11.5px var(--sans); color: var(--text-list); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-sub { font: 500 8px var(--mono); letter-spacing: .08em; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-col { width: 124px; flex: none; position: relative; }
.fc-band {
  position: absolute; left: 6px; right: 10px; border-radius: 6px; box-sizing: border-box;
  background: color-mix(in srgb, var(--ok) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
}
/* every run of a fixed cam is a start and a stop, named inside its own band */
.fc-runtop, .fc-runbot { position: absolute; left: 8px; right: 6px; z-index: 3; display: flex; }
.fc-runtop { top: 5px; }
.fc-runbot { bottom: 5px; }
/* one set inside a run: click it and the camera sits that one out */
.fc-seg { position: absolute; left: 0; right: 0; background: none; border: 0; cursor: pointer; }
.fc-seg + .fc-seg { border-top: 1px solid color-mix(in srgb, var(--ok) 20%, transparent); }
.fc-seg:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* a set this camera sits out: click it and it rolls on that one too */
.fc-slot {
  position: absolute; left: 6px; right: 10px; box-sizing: border-box; cursor: pointer;
  background: none; border: 1px dashed var(--line-control); border-radius: 6px;
  color: var(--text-3); font: 400 12px var(--mono); line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.fc-slot span { opacity: 0; }
.fc-slot:hover { border-color: color-mix(in srgb, var(--ok) 55%, transparent); background: color-mix(in srgb, var(--ok) 5%, transparent); }
.fc-slot:hover span { opacity: 1; color: var(--ok); }
/* the rails above and below the grid: cards in, and who starts / stops */
.rail-row { padding-top: 0; padding-bottom: 0; align-items: center; min-height: 26px; }
.rail-row.is-top { margin-bottom: 2px; }
.rail-row.is-bottom { margin-top: 4px; }
.rail-cell { flex: 1; min-width: 92px; display: flex; align-items: center; }
.rail-cell.is-fixed { width: 124px; flex: none; }
.rail-row.is-top { margin-bottom: 2px; align-items: flex-end; }
.fc-by, .fc-stop {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left; white-space: nowrap;
  font: 600 10px var(--sans);
}
.fc-by { color: var(--ok); }
.fc-stop { color: var(--text-2); }
.fc-by b, .fc-stop b { font: 700 9px var(--mono); letter-spacing: .06em; }
.fc-by.is-empty, .fc-stop.is-empty { color: var(--text-3); }
.fc-by:hover, .fc-stop:hover { filter: brightness(1.25); }
.fc-by.is-empty:hover b, .fc-stop.is-empty:hover b { color: var(--accent); }
.fc-card {
  position: absolute; left: 12px; display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 4px;
  background: var(--ds-block); border: 1px solid var(--ds-chip-line);
  font: 600 9px var(--mono); letter-spacing: .04em; color: var(--text);
}
.fc-fill { position: absolute; left: 6px; right: 10px; font: 500 8px var(--mono); color: var(--text-3); }

/* the card an operated camera runs on, and the swap mark both kinds share */
.op-card {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 4px;
  background: var(--ds-block); border: 1px solid var(--ds-chip-line);
  font: 600 9px var(--mono); letter-spacing: .04em; color: var(--text);
}
.op-card em { font: 500 8px var(--mono); font-style: normal; color: var(--text-3); }
/* the night needs more cards than the camera plan carries */
.op-card.is-short {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.op-card.is-short em { color: var(--accent); }
.ds-warn {
  display: flex; align-items: center; gap: 10px; margin: -4px 0 12px;
  padding: 9px 12px; border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  font-size: 12.5px; color: var(--text);
}
.ds-warn-mark {
  width: 17px; height: 17px; flex: none; border-radius: 50%; background: var(--accent); color: #fff;
  font: 700 11px var(--sans); display: inline-flex; align-items: center; justify-content: center;
}
.ds-warn .btn { margin-left: auto; }
.sw { position: absolute; left: 4px; right: 8px; z-index: 4; pointer-events: none; text-align: right; }
.sw i { display: block; border-top: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent); }
.sw span {
  display: inline-block; margin-top: -7px; padding: 1px 6px; border-radius: 4px; pointer-events: auto;
  background: var(--page); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  font: 600 8.5px var(--mono); color: var(--accent); white-space: nowrap;
}

/* one shooter: name, exact span, a length chip. Neutral — red is kept for meaning */
.ds-shift {
  position: absolute; left: 1px; right: 1px; overflow: hidden; text-align: left; box-sizing: border-box;
  background: var(--ds-block); border: 1px solid var(--ds-block-line); border-radius: 6px;
  padding: 7px 9px; cursor: pointer; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  box-shadow: 0 1px 0 rgba(0,0,0,.4);
  transition: border-color .12s ease-out;
}
.ds-shift:hover { border-color: var(--accent); }
.ds-shift-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ds-who {
  display: block; font: 700 13px var(--sans); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-dur {
  flex: none; font: 400 9px var(--mono); color: var(--text-2);
  border: 1px solid var(--ds-chip-line); border-radius: 3px; padding: 1px 6px; white-space: nowrap;
}
.ds-when { display: block; margin-top: 3px; font: 400 10px var(--mono); letter-spacing: .04em; color: var(--text-list); }
/* half an hour is too short for two lines, so the times sit beside the name */
.ds-shift.is-short { padding: 4px 9px; justify-content: center; }
.ds-shift.is-short .ds-shift-top { align-items: baseline; justify-content: flex-start; gap: 6px; overflow: hidden; }
.ds-shift.is-short .ds-when { font-size: 9.5px; letter-spacing: .02em; }
.ds-shift.is-short .ds-who { flex: 0 1 auto; min-width: 0; }
.ds-shift.is-short .ds-when { display: block; margin-top: 0; flex: none; }
/* a quarter of an hour: one tight line, the chip gives way to the times */
.ds-shift.is-tiny { padding: 2px 8px; }
.ds-shift.is-tiny .ds-who { font-size: 11px; }
.ds-shift.is-tiny .ds-when { font-size: 9px; letter-spacing: .02em; }
/* a roaming shooter has a target, not a position */
.ds-roam { display: block; cursor: default; }
.ds-roam.is-pinned { background: var(--accent-wash); border-left: 2px solid var(--accent); }
.ds-roam.is-free { background: none; border-style: dashed; }
.ds-roam.is-walk { background: var(--track); border-style: dotted; opacity: .8; }
.ds-roam.is-walk .ds-who { font-size: 10px; color: var(--text-3); }
.ds-roam .ds-who { font-size: 11.5px; white-space: normal; line-height: 1.25; }
.ds-card.is-roaming .ds-stage { color: var(--accent); }
/* walked straight off another position — the one thing the rotation must not do */
.ds-shift.is-nobreak { border-color: var(--danger, var(--accent)); background: var(--danger-wash); }
.ds-shift.is-open { background: var(--danger-wash); border-style: dashed; }

.ds-slot {
  position: absolute; left: 1px; right: 1px; z-index: 2; overflow: hidden; text-align: left; box-sizing: border-box;
  background: transparent; border: 1px dashed var(--accent-line); border-radius: 6px; padding: 5px 7px; cursor: pointer;
  transition: background .12s ease-out, border-color .12s ease-out;
}
.ds-slot:hover { background: var(--accent-wash); border-style: solid; }
.ds-slot.is-on { background: var(--accent-soft); border: 1.5px solid var(--accent); }
.ds-slot-name { font: 500 11px var(--sans); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.ds-slot.is-on .ds-slot-name { color: var(--text); font-weight: 600; }
/* a break recedes: dashed, a faint hatch, two quiet lines */
.ds-dark {
  position: absolute; left: 1px; right: 1px; box-sizing: border-box;
  border: 1px dashed var(--line); border-radius: 6px;
  background-image: repeating-linear-gradient(45deg, var(--ds-hatch) 0 6px, transparent 6px 12px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; overflow: hidden;
}
.ds-dark span {
  font: 500 8px var(--mono); letter-spacing: .14em; color: var(--text-3);
  text-align: center; line-height: 1.3; padding: 0 4px; white-space: nowrap;
}
.ds-dark .ds-dark-span { letter-spacing: .06em; opacity: .75; }
/* dark on purpose is quiet; dark because there is nobody left is not */
.ds-dark.is-unstaffed { border-color: var(--danger, var(--accent)); background: var(--danger-wash); }
.ds-dark.is-unstaffed span { color: var(--danger, var(--accent)); opacity: 1; white-space: normal; }

.ds-legend {
  display: flex; gap: 26px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
  font: 400 10px var(--mono); letter-spacing: .08em; color: var(--text-3);
}
.ds-legend .is-red { color: var(--accent); }


/* ---------- teams ---------- */

.input-sm { padding: 6px 9px; font-size: 12.5px; border-radius: 7px; width: auto; min-width: 150px; }
.chip {
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line);
  background: none; color: var(--text-2); font: 500 11.5px var(--sans); cursor: pointer;
  transition: border-color .12s ease-out, color .12s ease-out, background .12s ease-out;
}
.chip:hover { border-color: var(--accent); color: var(--text); }
.chip.is-on { background: var(--accent-wash); border-color: var(--accent); color: var(--accent); }

.team-card {
  display: flex; flex-direction: column; gap: 7px; align-items: flex-start; text-align: left;
  padding: 15px 17px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; cursor: pointer; width: 100%;
  transition: border-color .12s ease-out;
}
.team-card:hover { border-color: var(--accent); }
.team-card.is-warn { border-color: var(--accent-line); }
.tc-kind { font: 600 9px var(--mono); letter-spacing: .14em; color: var(--text-3); }
.team-card.k-live .tc-kind, .team-card.k-aftermovie .tc-kind { color: var(--accent); }
.tc-name { font: 600 15px var(--sans); color: var(--text); }
.tc-where { font: 400 12px var(--sans); color: var(--text-2); }
.tc-people { display: flex; align-items: center; gap: 10px; margin-top: 3px; flex-wrap: wrap; }
.tc-count { font: 400 11px var(--sans); color: var(--text-3); }

/* ---------- edition overview (design turn 10C) ---------- */
.meta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.meta-row .meta { margin-top: 0; font-size: 13px; }
.ov-title { font: 600 15px var(--sans); color: var(--text-list); margin: 22px 0 10px; }
.ov-card { padding: 18px 16px; border-radius: 10px; text-align: center; }
.ov-name { font: 600 15px var(--sans); color: var(--text); }
.ov-todo { font: 400 11.5px var(--sans); color: var(--text-3); margin-top: 4px; }
/* grey = nothing yet · orange = work in progress · green = finished */
.ov-card.is-idle .ov-name { color: var(--text-3); }
.ov-card.is-busy { border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 8%, var(--panel)); }
.ov-card.is-busy .ov-name, .ov-card.is-busy .ov-todo { color: var(--danger); }
.ov-card.is-done { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 8%, var(--panel)); }
.ov-card.is-done .ov-name, .ov-card.is-done .ov-todo { color: var(--ok); }
.day-rows { display: flex; flex-wrap: wrap; gap: 12px; }
.day-row {
  width: 420px; max-width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 16px; display: flex; align-items: center; gap: 16px; text-align: left; cursor: pointer;
  transition: border-color .12s ease-out;
}
.day-row:hover { border-color: var(--line-soft); }
.day-row.is-add { border-style: dashed; }
.dr-name { font: 600 14px var(--sans); color: var(--text); }
.dr-sub { font: 400 12px var(--sans); color: var(--text-2); margin-top: 2px; }
.dr-right { font: 500 9px var(--mono); letter-spacing: .1em; color: var(--text-2); white-space: nowrap; }
/* design 13A: a day card with the load in a strip underneath */
.day-card2 {
  width: 470px; max-width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; padding: 0; text-align: left; cursor: pointer; transition: border-color .12s ease-out;
}
.day-card2:hover { border-color: var(--line-soft); }
.dc-top { padding: 13px 16px; display: flex; align-items: baseline; gap: 10px; }
.dc-name { font: 600 15px var(--sans); color: var(--text); }
.dc-sub { font: 400 12px var(--sans); color: var(--text-2); }
.dc-strip { display: flex; border-top: 1px solid var(--line); background: var(--page); }
.dc-cell { flex: 1; display: flex; align-items: baseline; gap: 6px; padding: 8px 16px; }
.dc-cell + .dc-cell { border-left: 1px solid var(--line); }
.dc-val { font: 700 14px var(--sans); color: var(--text); }
.dc-val.is-hot { color: var(--accent); }
.dc-star { font-size: 11px; margin-left: 1px; }
.dc-label { font: 500 8px var(--mono); letter-spacing: .12em; color: var(--text-3); }
.dr-marks { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.dr-mark { font: 500 9px var(--mono); letter-spacing: .08em; color: var(--text-3); white-space: nowrap; }
.dr-mark.is-rec::before { content: '\25cf  '; color: var(--accent); }
.dr-mark.is-rec, .dr-mark.is-key { color: var(--text-2); }
.dr-right.is-dim { color: var(--text-3); }
.ov-lists { display: flex; flex-direction: column; gap: 12px; max-width: 980px; margin-top: 22px; }
.stack-cards { display: flex; flex-direction: column; gap: 10px; }
.list-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px 2px; }
.lc-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; }
.lc-title { font: 600 15px var(--sans); color: var(--text-list); }
.lc-meta { font: 400 9px var(--mono); letter-spacing: .1em; color: var(--text-3); }
.lc-link {
  font: 500 10px var(--mono); letter-spacing: .08em; color: var(--accent);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.lc-link:hover { text-decoration: underline; }
.lc-row {
  display: flex; align-items: center; gap: 10px; padding: 12px 0; width: 100%;
  border: 0; border-top: 1px solid var(--line); background: none; text-align: left; cursor: pointer;
}
.lc-row:hover .lc-name { color: var(--text); }
.lc-name { font: 600 13px var(--sans); color: var(--text-list); }
.lc-name.is-dim { color: var(--text-2); }
.lc-sub { font: 400 9px var(--mono); letter-spacing: .04em; color: var(--text-3); }
.lc-count { font: 400 12px var(--sans); color: var(--text-2); }
.lc-who { font: 400 12px var(--sans); color: var(--text-2); margin-left: 4px; }
.stack-cards .ov-title { margin: 0; }
.ov-lists { gap: 10px; }
.stack-cards + .stack-cards { margin-top: 12px; }
.lc-pills { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.lc-pill {
  font: 500 9px var(--mono); letter-spacing: .1em; color: var(--accent);
  border: 1px solid var(--accent-line); border-radius: 20px; padding: 2px 9px; white-space: nowrap;
}
.lc-pill.is-dim { color: var(--text-3); border-color: var(--line-soft); }
.lc-pill.is-warn { color: var(--danger); border-color: var(--danger-line); }
.lc-plus {
  width: 22px; height: 22px; border-radius: 50%; border: 1px dashed var(--line-dashed); flex: none;
  color: var(--text-3); font: 500 10px var(--mono); display: inline-flex; align-items: center; justify-content: center;
}
.lc-hint { font: 400 12px var(--sans); color: var(--text-3); }
.lc-ava { width: 24px; height: 24px; border: 1.5px solid var(--accent); background: var(--track); font-size: 8px; }
.lc-ava.is-option { border-color: var(--danger); color: var(--danger); box-shadow: none; }
.lc-status { font: 500 9px var(--mono); letter-spacing: .08em; color: var(--ok); }
.lc-status.is-option { color: var(--danger); }
.lc-status.is-late { color: var(--accent); }

/* ---------- post-production (design 14A) ---------- */
/* one control per column: the stepper is the status, green is only delivered */
/* the recording-time table: one row per camera body */
.rt-row {
  display: grid; grid-template-columns: 1.4fr 1fr 0.8fr 0.8fr 1fr 0.6fr 0.6fr 0.6fr;
  gap: 0 10px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--line-soft);
}
.rt-row:last-child { border-bottom: 0; }
.rt-row.is-head {
  padding-bottom: 9px; border-bottom: 1px solid var(--line);
  font: 700 8.5px var(--mono); letter-spacing: .14em; color: var(--text-3);
}
.rt-row.is-head .is-derived { opacity: .7; }
.rt-body { display: block; font: 600 13px var(--sans); color: var(--text); }
.rt-cams { display: block; font: 500 8px var(--mono); letter-spacing: .1em; color: var(--text-3); margin-top: 3px; }
.rt-in { width: 100%; padding: 6px 9px; font-family: var(--mono); font-size: 12.5px; }
.rt-in.is-time { text-align: center; border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.rt-hint { display: block; font: 500 8px var(--mono); letter-spacing: .08em; color: var(--text-3); margin-top: 4px; text-align: center; }
.rt-der { font-family: var(--mono); font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.rt-empty { padding: 16px 2px; font-size: 12.5px; color: var(--text-3); }

/* ---------- gear list (design 15D) ---------- */
.gl-card { background: var(--page); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 16px; }

/* the matrix: the rig, per position, per category */
.gl-mhead, .gl-mrow, .gl-msub { display: grid; grid-template-columns: 180px repeat(6, 1fr); gap: 0 10px; }
.gl-mhead {
  padding: 10px 18px; border-bottom: 1px solid var(--line);
  font: 500 8.5px var(--mono); letter-spacing: .14em; color: var(--text-3);
}
.gl-colhead {
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
  font: inherit; letter-spacing: inherit; color: inherit;
}
.gl-colhead:hover { color: var(--text-2); }
.gl-colhead.is-picked { color: var(--accent); }
.gl-mrow { padding: 11px 18px; align-items: start; }
.gl-mrow:hover { background: color-mix(in srgb, var(--panel) 45%, transparent); }
/* one camera, with its shoot lines, is one block - and the line between two
   cameras is the only heavy one on the list */
.gl-block + .gl-block, .gl-shared { border-top: 1px solid var(--line-soft); }
.gl-block.is-open { padding-bottom: 4px; }
.gl-block.is-open + .gl-block { padding-top: 2px; }
.gl-who { display: flex; align-items: flex-start; gap: 9px; }
.gl-pin {
  width: 20px; height: 20px; flex: none; border-radius: 50%; margin-top: 1px;
  border: 1px solid var(--accent); color: var(--accent); background: none; cursor: pointer;
  font: 700 9px var(--mono); display: inline-flex; align-items: center; justify-content: center;
}
.gl-pin:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.gl-pin.is-picked { background: var(--accent); color: #fff; }
.gl-posname { display: block; font: 600 13px var(--sans); color: var(--text); line-height: 1.25; }
.gl-posname.is-btn { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.gl-posname.is-btn:hover { color: var(--accent); }
/* a kit that is not a camera on the plan: same row, no letter */
.gl-pin.is-loose { border-style: dashed; color: var(--text-3); border-color: var(--line-control); font-size: 12px; }
.gl-pin.is-loose:hover { border-color: var(--accent); color: var(--accent); background: none; }
.gl-pin.is-loose.is-picked { background: var(--accent); color: #fff; border-color: var(--accent); }
.gl-addkit {
  flex: none; background: none; border: 1px dashed var(--line-control); border-radius: 6px;
  padding: 5px 10px; cursor: pointer; font: 500 8.5px var(--mono); letter-spacing: .12em; color: var(--text-3);
}
.gl-addkit:hover { border-color: var(--accent); color: var(--accent); }
.gl-postype { display: block; font: 500 8px var(--mono); letter-spacing: .12em; color: var(--text-3); margin-top: 2px; }
.gl-cell { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }

.gl-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 4px;
  border: 1px solid var(--line-control); background: none; cursor: pointer;
  font: 400 11px var(--sans); color: var(--text-2); white-space: nowrap;
}
.gl-chip:hover { color: var(--text); border-color: var(--text-3); }
.gl-chip.is-crew { border-style: dashed; }
.gl-chip.is-none { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--text-2); }
.gl-chip.is-dragging { opacity: .45; }
/* ticked, on its way to a lane */
.gl-chip.is-picked {
  border-color: var(--accent); color: var(--text);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.gl-chip.is-picked .gl-grab { opacity: 1; color: var(--accent); }
.gl-grab { font: 400 8px var(--mono); color: var(--line-control); opacity: 0; margin-right: -2px; cursor: grab; }
.gl-chip:hover .gl-grab { opacity: 1; }
.gl-cdot { display: inline-flex; padding: 2px; margin: -2px; border-radius: 50%; }
.gl-cdot:hover { background: color-mix(in srgb, var(--text) 12%, transparent); }
.gl-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex: none; background: var(--text-3); }
.gl-dot.is-crew { background: none !important; border: 1px solid var(--ok); }
.gl-dot.is-none { background: var(--accent); }
.gl-slot {
  width: 52px; height: 22px; border: 1px dashed var(--line-control); border-radius: 4px;
  background: none; color: var(--text-3); font-size: 11px; line-height: 1; cursor: pointer;
}
.gl-slot:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.gl-slot.is-quiet { opacity: 0; width: 26px; }
.gl-mrow:hover .gl-slot.is-quiet, .gl-shared:hover .gl-slot.is-quiet, .gl-slot.is-quiet:focus { opacity: 1; }

/* one camera over more than one shoot: the kit row is what gets hired, the lines
   under it are what differs on that shoot */
.gl-mrow.is-kit.is-open { padding-bottom: 5px; }
.gl-perkit {
  display: inline; margin-left: 9px; padding: 0; background: none; border: 0; cursor: pointer;
  font: 500 8px var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--line-control); opacity: 0; transition: opacity .12s;
}
.gl-mrow:hover .gl-perkit, .gl-perkit.is-on, .gl-perkit:focus { opacity: 1; }
.gl-perkit.is-on { color: var(--text-3); }
.gl-perkit:hover { color: var(--accent); }
.gl-unkit {
  margin-left: 7px; padding: 0; background: none; border: 0; cursor: pointer; flex: none;
  font: 500 10px var(--mono); line-height: 1; color: var(--line-control); opacity: 0; transition: opacity .12s;
}
.gl-msub:hover .gl-unkit, .gl-unkit:focus { opacity: 1; }
.gl-unkit:hover { color: var(--danger); }

.gl-mrow.is-one .gl-pin { border-style: dashed; }
.gl-msub {
  padding: 5px 18px 6px; align-items: center;
  border-top: 1px solid color-mix(in srgb, var(--line-soft) 55%, transparent);
  background: color-mix(in srgb, var(--panel) 30%, transparent);
}
.gl-msub:hover { background: color-mix(in srgb, var(--panel) 60%, transparent); }
.gl-msub .gl-who { padding-left: 29px; }
.gl-sublbl { font: 500 8px var(--mono); letter-spacing: .12em; color: var(--text-3); line-height: 1.5; white-space: nowrap; }
.gl-msub .gl-who { align-items: center; flex-wrap: nowrap; }
.gl-same { font: 400 10.5px var(--sans); font-style: italic; color: var(--text-3); opacity: .75; }
.gl-msub:hover .gl-slot.is-quiet { opacity: 1; }

.gl-shared { display: flex; align-items: center; gap: 12px; padding: 13px 18px; }
.gl-sharedlbl { font: 500 8px var(--mono); letter-spacing: .14em; color: var(--text-3); width: 170px; flex: none; }

/* the dock: where every item comes from */
.gl-dock { padding: 12px 18px 14px; background: var(--panel); }
.gl-dockhead { display: flex; align-items: baseline; gap: 10px; padding-bottom: 9px; }
.gl-docktitle { font: 500 9px var(--mono); letter-spacing: .14em; color: var(--text-2); }
.gl-dockwarn { font: 500 9px var(--mono); letter-spacing: .08em; color: var(--accent); }
.gl-docktitle.is-live { color: var(--accent); }
.gl-dockclear {
  background: none; border: 1px solid var(--line-control); color: var(--text-3);
  font: 500 8px var(--mono); letter-spacing: .1em; padding: 2px 7px; border-radius: 4px; cursor: pointer;
}
.gl-dockclear:hover { color: var(--text); border-color: var(--text-3); }
/* with something ticked every lane is a button */
.gl-dock.is-picking .gl-lane:not(.is-new) { border-style: dashed; }
.gl-dock.is-picking .gl-lane:not(.is-new):hover {
  border-style: solid; border-color: var(--lane, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lane, var(--accent)) 14%, transparent);
}
.gl-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.gl-lane {
  position: relative; text-align: left; background: var(--page); border: 1px solid var(--line-control);
  border-radius: 9px; padding: 10px 12px; cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.gl-lane:hover, .gl-lane:focus-visible { border-color: var(--text-3); outline: none; }
.gl-lane.is-live { border-style: dashed; }
.gl-lane.is-over {
  border-style: solid; border-color: var(--lane, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lane, var(--accent)) 14%, transparent);
  background: color-mix(in srgb, var(--lane, var(--accent)) 7%, var(--page));
}
.gl-lane.is-crewlane { border-style: dashed; }
.gl-lane.is-unsourced {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, var(--page));
}
.gl-lane.is-unsourced .gl-lanename { color: color-mix(in srgb, var(--accent) 65%, var(--text)); }
.gl-lane.is-settled .gl-lanename, .gl-lane.is-settled .gl-lanemeta { color: var(--text-3); }
.gl-lane.is-settled .gl-dot.is-none { background: var(--text-3); }
.gl-lane.is-new {
  border-style: dashed; color: var(--text-3); font: 500 9px var(--mono); letter-spacing: .12em;
  display: flex; align-items: center; justify-content: center;
}
.gl-lane.is-new:hover { color: var(--text); }
.gl-lanetop { display: flex; align-items: center; gap: 7px; }
.gl-lanetop .gl-dot { width: 7px; height: 7px; }
.gl-lanename { font: 600 12px var(--sans); color: var(--text); }
.gl-lanecog { margin-left: auto; background: none; border: 0; color: var(--text-3); font-size: 13px; line-height: 1; cursor: pointer; }
.gl-lanecog:hover { color: var(--text); }
.gl-lanemeta { font: 500 8px var(--mono); letter-spacing: .1em; color: var(--text-3); margin-top: 5px; }
.gl-lanenote { font: 500 8px var(--mono); letter-spacing: .1em; color: var(--text-3); margin-top: 7px; }
.gl-lanewarn { font: 500 8px var(--mono); letter-spacing: .1em; color: var(--accent); margin-top: 7px; }
.gl-lanestatus { display: block; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.gl-lanestatus:hover { text-decoration: underline; }
.gl-lanestatus.is-sent { color: var(--danger); }
.gl-lanestatus.is-ok { color: var(--ok); }
.gl-lanehint { font: 500 8px var(--mono); letter-spacing: .1em; color: var(--text-3); margin-top: 7px; }
.gl-lane.is-open .gl-lanehint { color: var(--text-2); }
.gl-laneact {
  margin-top: 7px; background: none; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent); font: 500 8px var(--mono); letter-spacing: .1em; padding: 3px 7px; border-radius: 4px; cursor: pointer;
}
.gl-laneact:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.gl-lanebar { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.gl-bar { flex: 1; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.gl-bar i { display: block; height: 100%; background: var(--ok); }
.gl-barnote { font: 500 8px var(--mono); color: var(--text-2); }
.gl-drop {
  font: 500 8px var(--mono); letter-spacing: .1em; margin-top: 7px;
  color: color-mix(in srgb, var(--lane, var(--accent)) 70%, var(--text));
}

/* every lane's sheet, all open, side by side */
.gl-sheets { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; margin-top: 12px; align-items: start; }
.gl-sheet { background: var(--page); border: 1px solid var(--line); border-radius: 9px; padding-bottom: 8px; }
.gl-sheet.is-unsourced { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.gl-sheethead { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.gl-sheethead .gl-dot { width: 7px; height: 7px; }
.gl-sheetname { font: 600 13px var(--sans); color: var(--text); }
.gl-sheetsub { font: 500 8px var(--mono); letter-spacing: .1em; color: var(--text-3); }
.gl-sheetcount { margin-left: auto; font: 500 9px var(--mono); color: var(--text-2); }
.gl-cat { padding: 9px 14px 3px; font: 500 8.5px var(--mono); letter-spacing: .12em; color: var(--text-3); }
.gl-line { display: flex; align-items: center; gap: 9px; padding: 4px 14px; font-size: 12.5px; color: var(--text); }
.gl-line .check { width: 15px; height: 15px; flex: none; }
.gl-line.is-done .gl-what { color: var(--text-3); }
.gl-qty { font-family: var(--mono); font-size: 11px; color: var(--text-2); width: 24px; flex: none; }
.gl-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* which body the cards belong to - a Komodo card is not a Handycam card */
.gl-for {
  font: 500 8.5px var(--mono); letter-spacing: .1em; color: var(--text-3); white-space: nowrap;
  border: 1px solid var(--line-soft); border-radius: 4px; padding: 1px 5px; text-transform: uppercase;
}
.gl-cams { margin-left: auto; display: flex; gap: 3px; flex: none; }
.gl-cams span {
  font: 700 9px var(--mono); color: var(--accent); border-radius: 4px; padding: 1px 4px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.gl-cams span.is-all { color: var(--text-3); border-color: var(--line-control); }
.gl-legend { margin-top: 14px; font: 500 9px var(--mono); letter-spacing: .1em; color: var(--text-3); }
@media (max-width: 1240px) {
  .gl-card { overflow-x: auto; }
  .gl-mhead, .gl-mrow, .gl-msub, .gl-shared, .gl-block { min-width: 1080px; }
}

/* the festival's two Frame.io shares, above the tables */
.pp-hubwrap { margin-top: 20px; }
.pp-hubname { font: 700 22px var(--sans); color: var(--text); margin: 0 0 10px; letter-spacing: -.2px; }
.pp-hubname.is-btn { display: inline-flex; align-items: baseline; gap: 9px; background: none; border: 0; padding: 0; cursor: pointer; }
.pp-hubname.is-btn:hover { color: var(--accent); }
.pp-hubedit-i { font-style: normal; font-size: 13px; color: var(--text-3); opacity: 0; transition: opacity .12s; }
.pp-hubname.is-btn:hover .pp-hubedit-i { opacity: 1; }
.pp-hub {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--page); border: 1px solid var(--line); border-radius: 10px;
}
.pp-hublead { font-size: 13px; color: var(--text-2); padding-right: 2px; }
.pp-hubbtn {
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  border: 1px solid var(--line-control); color: var(--text);
  font: 500 12.5px var(--sans); padding: 6px 14px; border-radius: 7px; cursor: pointer;
}
.pp-hubbtn:hover { border-color: var(--accent); color: var(--accent); }
.pp-hubbtn.is-empty { border-style: dashed; color: var(--text-3); background: none; }
.pp-hubedit {
  margin-left: auto; background: none; border: 1px solid var(--line-control); color: var(--text-3);
  font-family: var(--mono, ui-monospace, monospace); font-size: 10px; letter-spacing: .08em;
  padding: 4px 9px; border-radius: 5px; cursor: pointer;
}
.pp-hubedit:hover { color: var(--text); border-color: var(--text-3); }
/* editing notes: one text field per festival - the producer writes, editors read */
.pp-notes { margin-top: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.pp-notes-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.pp-notes-lead { font: 600 13px var(--sans); color: var(--text); }
.pp-notes-who { font: 500 9px var(--mono); letter-spacing: .14em; color: var(--text-2); }
.pp-notes-saved { margin-left: auto; font: 600 9px var(--mono); letter-spacing: .14em; color: var(--ok); }
.pp-notes-text {
  display: block; width: 100%; box-sizing: border-box; min-height: 58px; resize: vertical;
  background: var(--page); border: 1px solid var(--line-control); border-radius: 7px; padding: 9px 12px;
  font: 400 13px/1.55 var(--sans); color: var(--text);
}
.pp-notes-text:focus { outline: none; border-color: var(--text-3); }
.pp-notes-text::placeholder { color: var(--text-3); }
.pp-notes-links { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-notes-links:not(:empty) { margin-top: 8px; }
.pp-notes-body { font: 400 13.5px/1.6 var(--sans); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.pp-notes-link { font: inherit; color: inherit; text-decoration: none; }
.pp-notes-link b { font-weight: 600; color: var(--task); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pp-notes-link:hover b { text-decoration-thickness: 2px; }
.pp-notes-where { font-size: .88em; color: var(--text-3); }
.pp-notes.is-read { border-left: 3px solid var(--text); }

/* the producer's switch: do the editors on this festival see each other */
.pp-teamswitch {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 1px solid var(--line-control); color: var(--text-3);
  font: 500 10px var(--mono, ui-monospace, monospace); letter-spacing: .08em;
  padding: 4px 9px; border-radius: 5px; cursor: pointer;
}
.pp-teamswitch i { width: 7px; height: 7px; border-radius: 50%; background: var(--track); box-shadow: inset 0 0 0 1px var(--line-soft); }
.pp-teamswitch.is-on { color: var(--text-2); }
.pp-teamswitch.is-on i { background: var(--ok); box-shadow: none; }
.pp-teamswitch:hover { color: var(--text); border-color: var(--text-3); }
.pp-teamswitch + .pp-hubedit { margin-left: 0; }

/* ---- the team board, under each festival on an editor's page ---- */
.pp-team { background: var(--page); border: 1px solid var(--line); border-radius: 12px; margin-top: 16px; }
.pp-team-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 18px 4px; }
.pp-team-title { font: 600 16px var(--sans); color: var(--text); }
.pp-team-sub { font: 500 9px var(--mono); letter-spacing: .14em; color: var(--text-2); }
.pp-team-note { font: 600 9px var(--mono); letter-spacing: .14em; color: var(--accent); }
.pp-team-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: 600 9px var(--mono); letter-spacing: .16em; color: var(--ok); }
.pp-team-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent); }
/* one bar for the whole package, split by where each edit is */
.pp-team-bar { display: flex; gap: 2px; height: 8px; margin: 12px 18px 8px; border-radius: 99px; overflow: hidden; }
.pp-team-bar b { display: block; height: 100%; }
.pp-team-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0 18px 14px; font: 500 9px var(--mono); letter-spacing: .12em; color: var(--text-3); }
.pp-team-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pp-team-legend i { width: 8px; height: 8px; border-radius: 2px; }
.pp-team .is-done { --lane: var(--st-done); } .pp-team .is-review { --lane: var(--st-review); }
.pp-team .is-editing { --lane: var(--st-edit); } .pp-team .is-todo { --lane: var(--st-todo); }
.pp-team-bar b, .pp-team-legend i, .pp-team-lane h4 i { background: var(--lane); }
/* who is on it */
.pp-team-crew { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 16px; border-bottom: 1px solid var(--line); }
.pp-team-mate { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border: 1px solid var(--line-soft); border-radius: 99px; }
.pp-team-mate .pp-ava { width: 24px; height: 24px; font-size: 8px; }
.pp-team-mate b { font: 600 12.5px var(--sans); color: var(--text); }
.pp-team-mate em { font: 500 9px var(--mono); letter-spacing: .1em; color: var(--text-3); font-style: normal; }
/* yours: marked in the text colour - white on dark, near-black on light. Red
   on this board already means in review and close to the deadline. */
.pp-team-mate.is-me { border-color: color-mix(in srgb, var(--text) 35%, transparent); background: color-mix(in srgb, var(--text) 6%, transparent); }
.pp-team-you { font: 700 8px var(--mono); letter-spacing: .14em; color: var(--text); }
.pp-team-mini { width: 40px; height: 4px; border-radius: 9px; background: var(--track); overflow: hidden; }
.pp-team-mini i { display: block; height: 100%; background: var(--ok); }
/* four lanes, To do to Delivered */
.pp-team-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 16px 18px 12px; }
.pp-team-lane h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font: 600 9px var(--mono); letter-spacing: .16em; color: var(--text-2); }
.pp-team-lane h4 i { width: 8px; height: 8px; border-radius: 50%; }
.pp-team-lane h4 span { color: var(--text-3); font-weight: 500; }
.pp-team-tile { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 10px 11px 9px; margin-bottom: 8px; }
.pp-team-tile.is-me { border-color: color-mix(in srgb, var(--text) 35%, transparent); box-shadow: inset 3px 0 0 var(--text); }
.pp-team-tile.is-done { opacity: .6; }
.pp-team-name { font: 600 12.5px/1.3 var(--sans); color: var(--text); overflow-wrap: anywhere; }
.pp-team-kind { margin-top: 3px; font: 500 8.5px var(--mono); letter-spacing: .1em; color: var(--text-2); }
.pp-team-foot { display: flex; align-items: center; gap: 6px; margin-top: 9px; min-width: 0; }
.pp-team-who { font: 500 11px var(--sans); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-team-due { margin-left: auto; flex: none; font: 600 9px var(--mono); letter-spacing: .1em; color: var(--text); }
.pp-team-due.is-soon { color: var(--accent); }
.pp-team-due.is-done { color: var(--ok); }
/* the board, and beside it who moved what */
.pp-team-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
.pp-team-body.no-feed { grid-template-columns: minmax(0, 1fr); }
.pp-team-claps { flex: none; font: 600 9px var(--mono); color: var(--text-2); }
.pp-team-feed { border-left: 1px solid var(--line); padding: 16px 18px 12px; min-width: 0; }
.pp-team-feed h4 { margin: 0 0 6px; font: 600 9px var(--mono); letter-spacing: .16em; color: var(--text-2); }
.pp-team-ev { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.pp-team-ev:last-child { border-bottom: 0; }
.pp-team-ev .pp-ava { margin-top: 1px; }
.pp-team-evt { flex: 1; min-width: 0; font: 400 12px/1.4 var(--sans); color: var(--text-2); overflow-wrap: anywhere; }
.pp-team-evt b { color: var(--text); font-weight: 600; }
.pp-team-evt .to-done { color: var(--ok); font-weight: 600; }
.pp-team-evt .to-review { color: var(--accent); font-weight: 600; }
.pp-team-evt .to-editing { color: var(--busy); font-weight: 600; }
.pp-team-evt .to-todo { color: var(--text-3); font-weight: 600; }
.pp-team-when { display: block; margin-top: 3px; font: 500 8.5px var(--mono); letter-spacing: .1em; color: var(--text-3); }
.pp-team-five {
  flex: none; align-self: center; font: 600 11px var(--mono); color: var(--text-2); background: none;
  border: 1px solid var(--line-soft); border-radius: 99px; padding: 3px 9px; white-space: nowrap; cursor: pointer;
}
.pp-team-five:hover { color: var(--text); border-color: var(--text-3); }
.pp-team-five.is-on { color: var(--busy); border-color: color-mix(in srgb, var(--busy) 45%, transparent); background: color-mix(in srgb, var(--busy) 9%, transparent); }
.pp-team-five.is-static { cursor: default; }
.pp-team-five:disabled { opacity: .5; cursor: wait; }
@container (max-width: 980px) {
  .pp-team-body { grid-template-columns: minmax(0, 1fr); }
  .pp-team-feed { border-left: 0; border-top: 1px solid var(--line); }
}

/* LETS GOOOO and Good Job! - once, in the middle, click to close early */
.pp-gif {
  position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .35); cursor: pointer; animation: pp-gif-in .2s ease-out;
}
.pp-gif img {
  display: block; width: min(480px, 86vw); height: auto; max-height: 72vh; object-fit: contain;
  border-radius: 14px; box-shadow: 0 24px 80px rgba(0, 0, 0, .55); animation: pp-gif-pop .34s cubic-bezier(.2, 1.4, .4, 1);
}
.pp-gif.is-out { opacity: 0; transition: opacity .3s; }
@keyframes pp-gif-in { from { opacity: 0; } }
@keyframes pp-gif-pop { from { transform: scale(.85); opacity: 0; } }

/* narrow: two lanes a row, then one - measured on the board itself, not the
   screen, since the list above can make the page wider than the phone */
.pp-team { container-type: inline-size; }
@container (max-width: 760px) { .pp-team-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 460px) { .pp-team-board { grid-template-columns: minmax(0, 1fr); } }

/* a line of help under a dialog field */
.field-hint { margin-top: 5px; font-size: 11.5px; color: var(--text-3); line-height: 1.4; }

/* show order vs deadline */
.pp-sortwrap { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
/* whole delivery name on every row, or just what this one is */
.pp-names {
  display: inline-flex; align-items: center; gap: 7px; background: none; cursor: pointer;
  border: 1px solid var(--line-control); border-radius: 7px; padding: 5px 10px;
  font: 500 8.5px var(--mono); letter-spacing: .12em; color: var(--text-3);
}
.pp-names:hover { color: var(--text-2); }
.pp-names.is-on { color: var(--text); border-color: var(--line-soft); }
.pp-namesbox {
  width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--line-control);
  display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 9px;
}
.pp-names.is-on .pp-namesbox { background: var(--accent); border-color: var(--accent); color: #fff; }
.pp-sortlead { font-size: 12.5px; color: var(--text-3); }
.pp-sort { display: inline-flex; border: 1px solid var(--line-control); border-radius: 8px; overflow: hidden; }
.pp-sortbtn {
  background: none; border: 0; color: var(--text-3); cursor: pointer;
  font: 500 12.5px var(--sans); padding: 6px 14px;
}
.pp-sortbtn + .pp-sortbtn { border-left: 1px solid var(--line-control); }
.pp-sortbtn:hover { color: var(--text); }
.pp-sortbtn.is-on { background: var(--accent); color: #fff; }

.pp-card {
  background: var(--page); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; margin-top: 16px;
}
.pp-cardhead { display: flex; align-items: center; gap: 12px; padding: 14px 18px; flex-wrap: wrap; }
.pp-day { font: 600 16px var(--sans); color: var(--text); }
/* on an editor's own page the card is a whole job, so its name carries */
.pp-day.is-project { color: var(--accent); font-size: 17px; letter-spacing: -.01em; }
.pp-daysub { font: 400 10px var(--mono); letter-spacing: .06em; color: var(--text-2); }
.pp-bar { width: 120px; height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; margin-left: 4px; }
.pp-bar > i { display: block; height: 100%; background: var(--ok); border-radius: 2px; transition: width .2s ease-out; }
.pp-barnote { font: 500 9px var(--mono); letter-spacing: .08em; color: var(--text-2); }
.pp-load {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px;
  border: 1px solid var(--line-soft); border-radius: 20px;
  font: 500 9px var(--mono); letter-spacing: .08em; color: var(--text-2); white-space: nowrap;
}
.pp-noeditor {
  font: 500 9px var(--mono); letter-spacing: .08em; color: var(--accent);
  border: 1px solid var(--accent-line); border-radius: 20px; padding: 4px 10px; white-space: nowrap;
}

/* every heading is a sort control: it lights up and carries the arrow when the
   list is on it, and sits quiet with a faint one when it is not */
.pp-sorth {
  display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none;
  cursor: pointer; font: inherit; letter-spacing: inherit; color: inherit; text-align: left;
}
.pp-sorth:hover { color: var(--text); }
.pp-sorth.is-on { color: var(--accent); }
.pp-arrow { font-style: normal; font-size: 7px; opacity: 0; transition: opacity .12s; }
.pp-sorth:hover .pp-arrow { opacity: .55; }
.pp-sorth.is-on .pp-arrow { opacity: 1; }
.pp-sorthint { font: 500 9px var(--mono); letter-spacing: .1em; color: var(--text-3); text-transform: uppercase; }

/* ---------- confirming the editors ---------- */
.ec-btn.is-live { border-color: var(--accent-line); background: var(--accent-wash); }
.ec-btn.is-done { color: var(--text-3); border-color: var(--line); }
.ec-btn.is-done:hover { color: var(--text-2); }
.ec-n { font: 600 10px var(--mono); background: var(--accent); color: #fff; border-radius: 20px; padding: 1px 6px; margin-left: 7px; }
.ec-tick { color: var(--ok); font-size: 13px; margin-right: 6px; }
.ec-send { border-color: var(--accent-line); background: var(--accent); color: #fff; font-weight: 700; }
.ec-send:hover { background: var(--accent); filter: brightness(1.08); }
.btn.is-done { color: var(--text-3); border-color: var(--line); }

.ec-list { margin: 0 -18px; }
.ec-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 160px 96px 250px; gap: 12px; align-items: center;
  padding: 12px 18px; border-top: 1px solid var(--line);
}
.ec-row.is-off { opacity: .55; }
.ec-name { display: block; font: 600 13.5px var(--sans); color: var(--text); }
.ec-sub { display: block; font: 400 10px var(--mono); letter-spacing: .06em; color: var(--text-3); margin-top: 3px; }
.ec-pill { font: 500 8.5px var(--mono); letter-spacing: .12em; border-radius: 20px; padding: 3px 9px;
  display: inline-block; color: var(--text-3); border: 1px solid var(--line); white-space: nowrap; }
.ec-pill.is-new { color: var(--accent); border-color: var(--accent-line); background: var(--accent-wash); }
.ec-pill.is-upd { color: var(--danger); border-color: var(--danger-line); background: var(--danger-wash); }
.ec-moved { font: 400 10.5px var(--sans); color: var(--danger); margin-top: 4px; }
.ec-tot { font: 500 13px var(--mono); text-align: right; color: var(--text); }
.ec-tot em { display: block; font-style: normal; font: 500 8px var(--mono); letter-spacing: .12em; color: var(--text-3); margin-top: 2px; }
.ec-act { text-align: right; display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.ec-invite { border-color: var(--accent-line); color: var(--accent); }
.ec-invite:hover { background: var(--accent-wash); }
.ec-foot-wrap { justify-content: flex-start; }
.ec-foot { display: flex; align-items: center; gap: 12px; width: 100%; }
.ec-sum { font: 500 10px var(--mono); letter-spacing: .1em; color: var(--text-3); }
.ec-foot .btn { margin-left: auto; }

/* the rows show the short name: this says what the copy button gives */
.pp-copynote {
  display: flex; align-items: center; gap: 6px; padding: 0 18px 8px;
  font: 500 8.5px var(--mono); letter-spacing: .1em; color: var(--text-3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.pp-copynote b { color: var(--text-2); font-weight: 500; }
.pp-copynote i { font-style: normal; color: var(--text-3); }
.pp-copyicon { display: inline-flex; opacity: .7; }
.pp-copyicon svg { width: 11px; height: 11px; }

.pp-head, .pp-row {
  display: grid; grid-template-columns: minmax(190px, 1fr) 70px 112px 62px 132px 72px 72px 92px 150px 186px 26px; gap: 0 9px;
  align-items: center; padding: 11px 18px; position: relative;
}
/* no COST column - an editor, or any account but the owner's. The server does
   not send the field to them either. */
.pp-head.no-cost, .pp-row.no-cost {
  grid-template-columns: minmax(190px, 1fr) 70px 112px 62px 132px 72px 92px 150px 186px 26px;
}
/* seven columns is wider than a laptop on a busy festival: the card scrolls
   sideways rather than squeezing the names. contain keeps that width inside the
   card - without it a phone lays the whole page out as wide as the table and
   zooms out, instead of letting just the table scroll */
.pp-card { overflow-x: auto; contain: inline-size; }
.pp-head, .pp-row { min-width: 1325px; }
.pp-head.no-cost, .pp-row.no-cost { min-width: 1245px; }
.pp-editsel { width: 100%; min-width: 0; }
.pp-editkind { font: 400 11.5px var(--sans); color: var(--text-2); }
.pp-lenwrap { display: flex; align-items: center; gap: 5px; min-width: 0; }
.pp-lenbox { width: 48px; min-width: 0; padding-left: 6px; padding-right: 4px; text-align: right; }
.pp-lenbox::-webkit-outer-spin-button, .pp-lenbox::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pp-lenbox { -moz-appearance: textfield; }
.pp-lenx { font: 500 8px var(--mono); letter-spacing: .1em; color: var(--text-3); }
.pp-len { font: 400 11.5px var(--mono); color: var(--text-2); }
/* the money: what the editor gets, and what the client pays */
.pp-moneywrap { display: flex; align-items: center; gap: 3px; min-width: 0; }
.pp-eur { font: 500 10px var(--mono); color: var(--text-3); flex: none; font-style: normal; }
.pp-moneybox { width: 100%; min-width: 0; padding-left: 5px; padding-right: 4px; text-align: right; }
.pp-money { font: 400 11.5px var(--mono); color: var(--text-2); display: inline-flex; align-items: baseline; gap: 2px; }
.pp-money.is-muted { color: var(--text-3); }
/* what goes out reads green against what comes in, and red once it is the
   bigger of the two; the budget itself stays plain */
.pp-moneybox.is-fee, .pp-money.is-fee { color: var(--ok); }
.pp-moneybox.is-fee.is-over, .pp-money.is-fee.is-over { color: var(--accent); }
.pp-moneybox.is-budget, .pp-money.is-budget { color: var(--text); }
/* no budget on this account: the fee is just a number */
.pp-moneybox.is-plain, .pp-money.is-plain { color: var(--text); }
.pp-money-row { display: inline-flex; align-items: center; gap: 9px; }
.pp-mtot {
  display: inline-flex; align-items: baseline; gap: 2px; white-space: nowrap;
  font: 500 11px var(--mono); color: var(--text-2);
  border: 1px solid var(--line-soft); border-radius: 20px; padding: 3px 9px;
}
.pp-mtot i { font-style: normal; font-size: 9px; color: var(--text-3); }
.pp-mtot em { font-style: normal; font-size: 8px; letter-spacing: .12em; color: var(--text-3); margin-left: 4px; }
.pp-mtot.is-mine { color: var(--ok); font-size: 14px; padding: 5px 11px;
                   border-color: color-mix(in srgb, var(--ok) 40%, transparent);
                   background: color-mix(in srgb, var(--ok) 8%, transparent); }
.pp-mtot.is-mine i { font-size: 11px; color: color-mix(in srgb, var(--ok) 75%, transparent); }
.pp-mtot.is-mine em { font-size: 8px; color: color-mix(in srgb, var(--ok) 70%, transparent); margin-left: 6px; }
.pp-mtot.is-cost { color: var(--text); }
.pp-mtot.is-left { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.pp-mtot.is-left i, .pp-mtot.is-left em { color: color-mix(in srgb, var(--ok) 75%, transparent); }
.pp-mtot.is-over { color: var(--accent); border-color: var(--accent-line); }
.pp-mtot.is-over i, .pp-mtot.is-over em { color: color-mix(in srgb, var(--accent) 80%, transparent); }
.pp-name.is-btn { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.pp-name.is-btn:hover { color: var(--accent); }
.pp-head {
  padding: 0 18px 7px; border-bottom: 1px solid var(--line);
  font: 500 9px var(--mono); letter-spacing: .14em; color: var(--text-2);
}
.pp-row { border-bottom: 1px solid var(--line); }
.pp-row:last-child { border-bottom: 0; }
/* the zebra: mixed from --text, so it lands right in both themes. Hover sits
   above both bands, or it would vanish on every other row. */
.pp-row.is-band { background: color-mix(in srgb, var(--text) 4%, transparent); }
.pp-row:hover, .pp-row.is-band:hover { background: color-mix(in srgb, var(--text) 9%, transparent); }
/* delivered: quieter, never struck through */
.pp-row.is-done { opacity: .55; }
.pp-row.is-done:hover { opacity: .8; }

.pp-cell.c-what { display: flex; align-items: flex-start; gap: 8px; }
.pp-what { min-width: 0; flex: 1; }
.pp-line { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.pp-subline { display: flex; align-items: center; gap: 10px; margin-top: 3px; flex-wrap: wrap; }
.pp-name { font: 600 14px var(--sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-sub { font: 400 10px var(--mono); letter-spacing: .06em; color: var(--text-2); }
.pp-key { font: 500 8px var(--mono); letter-spacing: .1em; color: var(--accent); white-space: nowrap; }
.pp-chip {
  font: 500 8px var(--mono); letter-spacing: .1em; color: var(--text-2);
  border: 1px solid var(--line-soft); border-radius: 3px; padding: 1px 5px; white-space: nowrap;
}
.pp-chip.is-warn { color: var(--danger); border-color: var(--danger-line); }
.pp-copy {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border: 1px solid transparent; border-radius: 5px; background: none; color: var(--text-3); cursor: pointer;
}
.pp-copy:hover { color: var(--text); border-color: var(--line-soft); }
/* the tick sits out of the way until you need it */
.pp-check { flex: none; opacity: 0; margin-top: 3px; transition: opacity .12s ease-out; }
.pp-row:hover .pp-check, .pp-check:checked, .pp-check:focus { opacity: 1; }

.pp-ava {
  width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--track);
  border: 1px solid var(--line-soft); color: var(--text-list);
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 7px var(--mono);
}
.pp-ava.is-sm { width: 18px; height: 18px; font-size: 7px; }
.pp-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; background: none; border: 0; padding: 0; text-align: left; }
.pp-who.is-btn { cursor: pointer; }
.pp-whoname { font: 400 12.5px var(--sans); color: var(--text-list); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-who.is-btn:hover .pp-whoname { color: var(--text); }
.pp-assign {
  font: 500 9px var(--mono); letter-spacing: .08em; color: var(--accent);
  border: 1px dashed var(--accent-line); border-radius: 20px; padding: 4px 12px;
  background: none; cursor: pointer; white-space: nowrap;
}
.pp-assign:hover { border-style: solid; background: var(--accent-wash); }

.pp-duewrap { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; background: none; border: 0; padding: 0; text-align: left; }
.pp-duewrap.is-btn { cursor: pointer; }
/* the countdown leads, the date sits under it as the smaller of the two */
.pp-count { font: 600 13px var(--mono); letter-spacing: .01em; color: var(--text); line-height: 1.15; white-space: nowrap; }
.pp-count.is-late { color: var(--accent); }
.pp-date { font: 400 9px var(--mono); letter-spacing: .06em; color: var(--text-3); white-space: nowrap; }
.pp-date.is-only { font-size: 10px; color: var(--text-list); }
.pp-date.is-late { color: var(--accent); }
.pp-dash { font: 400 11px var(--mono); color: var(--text-2); }
.pp-duewrap.is-btn:hover .pp-dash, .pp-duewrap.is-btn:hover .pp-date { color: var(--text-2); }

/* an edit that is somebody else's, on a card where some of them are yours */
.pp-row.is-theirs .pp-name, .pp-row.is-theirs .pp-count { color: var(--text-2); }
.pp-name.is-late { color: var(--accent); }
.pp-row.is-theirs .pp-whoname { color: var(--text-3); }
.pp-row.is-theirs .pp-ava { opacity: .55; }
/* two things never step back, whoever the edit belongs to: a deadline that is
   nearly here or already gone, and the name of an edit that has run past it */
.pp-row.is-theirs .pp-count.is-late, .pp-row.is-theirs .pp-name.is-late { color: var(--accent); }
.pp-row.is-theirs:hover .pp-name { color: var(--text); }

/* the four-step stepper - the only status control */
.pp-step { display: inline-flex; border: 1px solid var(--line-soft); border-radius: 6px; overflow: hidden; width: fit-content; }
.pp-stepbtn {
  font: 500 8.5px var(--mono); letter-spacing: .06em; padding: 5px 9px;
  color: var(--text-2); background: none; border: 0; border-left: 1px solid var(--line); cursor: pointer;
}
.pp-stepbtn:first-child { border-left: 0; }
.pp-stepbtn:hover { color: var(--text); background: var(--panel); }
.pp-stepbtn.is-on { font-weight: 700; }
.pp-stepbtn.is-on.is-todo { background: var(--st-todo); color: var(--st-todo-ink); }
/* in edit: started, and the one step where the work is actually happening */
.pp-stepbtn.is-on.is-editing { background: var(--st-edit); color: var(--st-edit-ink); }
.pp-stepbtn.is-on.is-review { background: var(--st-review); color: var(--st-review-ink); }
.pp-delivered {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer;
  font: 500 9px var(--mono); letter-spacing: .1em; color: var(--ok); white-space: nowrap;
}
.pp-tick {
  width: 14px; height: 14px; flex: none; border-radius: 50%; font-size: 8px;
  background: color-mix(in srgb, var(--ok) 15%, transparent); border: 1px solid var(--ok);
  display: inline-flex; align-items: center; justify-content: center;
}
.pp-cell.c-more { display: flex; justify-content: flex-end; }
.pp-more {
  background: none; border: 0; color: var(--text-3); font: 500 12px var(--mono); cursor: pointer;
  padding: 2px 4px; border-radius: 5px; opacity: 0;
}
.pp-row:hover .pp-more { opacity: 1; }
.pp-more:hover { color: var(--text); background: var(--panel); }

.pp-addrow { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.pp-hint { font: 400 12px var(--sans); color: var(--text-3); }
.pp-legend { margin-top: 18px; font: 400 9px var(--mono); letter-spacing: .1em; color: var(--text-2); }

/* ---------- teams dialog (design turn 9): one card per team ---------- */
.modal-teams { width: min(1040px, 100%); border-radius: 14px; box-shadow: 0 24px 80px rgba(0,0,0,.5); }
.modal-teams .modal-body { max-height: 66vh; }
.modal-teams .modal-head { align-items: center; gap: 12px; }
.modal-teams .modal-head h3 { font: 600 18px var(--sans); }
.tm-meta { font: 400 11px var(--mono); letter-spacing: .1em; color: var(--text-3); align-self: center; }
.tm-esc {
  margin-left: auto; font: 500 10px var(--mono); letter-spacing: .08em; color: var(--text-2);
  background: none; border: 1px solid var(--line-soft); border-radius: 5px; padding: 6px 12px; cursor: pointer;
}
.tm-esc:hover { color: var(--text); border-color: var(--text-3); }
.tm-x { margin-left: auto; }
.tm-intro { font: 400 13px var(--sans); color: var(--text-2); margin-bottom: 16px; }
.team-edit { display: flex; flex-direction: column; gap: 12px; }
.tm-card {
  background: var(--page); border: 1px solid var(--line-soft); border-radius: 10px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.tm-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.tm-row.is-reach { align-items: center; gap: 14px; }
.tm-field { display: flex; flex-direction: column; gap: 5px; }
.tm-label { font: 500 9px var(--mono); letter-spacing: .12em; color: var(--text-3); }
.tm-name {
  width: 220px; background: var(--input-bg, var(--panel)); border: 1px solid var(--line-control); border-radius: 6px;
  padding: 9px 12px; font: 600 15px var(--sans); color: var(--text); box-sizing: border-box;
}
.tm-name:focus { outline: none; border-color: var(--accent); }
.tm-count { font: 400 11px var(--mono); color: var(--text-2); margin-bottom: 9px; }
.tm-remove {
  font: 500 10px var(--mono); letter-spacing: .08em; color: var(--accent);
  background: none; border: 0; padding: 0; margin-bottom: 9px; cursor: pointer;
}
.tm-remove:hover { text-decoration: underline; }
.tm-rule { width: 1px; height: 22px; background: var(--line); }
.tm-note { font: 400 12px var(--sans); color: var(--text-3); }
.tm-stages { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.tm-chip {
  font: 500 10px var(--mono); letter-spacing: .08em; color: var(--text-2);
  background: none; border: 1px solid var(--line-soft); border-radius: 20px; padding: 5px 12px; cursor: pointer;
  transition: border-color .12s ease-out, color .12s ease-out;
}
.tm-chip:hover { border-color: var(--text-3); color: var(--text); }
.tm-chip.is-on { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); padding: 5px 14px; }
.tm-add {
  border: 1px dashed var(--line-dashed, var(--line-soft)); border-radius: 10px; padding: 13px 18px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
/* the segmented switch */
.seg { display: inline-flex; border: 1px solid var(--line-soft); border-radius: 6px; overflow: hidden; margin-bottom: 1px; }
.seg-opt {
  font: 500 10px var(--mono); letter-spacing: .08em; padding: 8px 14px; color: var(--text-3);
  background: none; border: 0; cursor: pointer;
}
.seg-opt:hover { color: var(--text); }
.seg-opt.is-on { background: var(--track); color: var(--text); font-weight: 700; }
.seg-opt.is-off { color: var(--text-3); opacity: .45; cursor: not-allowed; }
.seg-accent .seg-opt.is-on { background: var(--accent); color: var(--text-invert); }
.tm-btn {
  font: 500 11px var(--mono); letter-spacing: .08em; color: var(--text-2);
  background: none; border: 1px solid var(--line-soft); border-radius: 6px; padding: 9px 16px; cursor: pointer;
}
.tm-btn:hover { color: var(--text); border-color: var(--text-3); }
.tm-btn.is-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.tm-btn.is-primary:hover { filter: brightness(1.08); }
.modal-teams .kit { margin-top: 2px; }
.team-row { border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px; }
.team-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.team-note { font: 400 11.5px var(--sans); color: var(--text-3); }
.team-count { font: 500 11px var(--mono); color: var(--text-2); }
.team-roams { display: block; margin-top: 10px; font: 400 12px var(--sans); color: var(--text-3); }
.team-stages { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.team-add { display: flex; gap: 8px; margin-top: 4px; }
.team-walk {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
}
.team-walk label { font: 500 12px var(--sans); color: var(--text-2); }

.book-team { min-width: 150px; }
.book-info { min-width: 120px; max-width: 160px; }
.book-team.is-empty {
  font: 400 11.5px var(--sans); color: var(--text-3); background: none;
  border: 1px dashed var(--line); border-radius: 7px; padding: 6px 10px; cursor: pointer;
}
.book-team.is-empty:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- mobile team: the run sheet ---------- */

.ds-card.is-runsheet .ds-stage { color: var(--accent); }
.rs-kit {
  display: grid; grid-template-columns: 34px 110px 1fr 110px 150px; gap: 0 12px;
  margin: 2px 0 10px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.rs-cam { display: contents; }
.rs-cam > * { padding: 7px 0; border-top: 1px solid var(--line); font: 400 12px var(--sans); color: var(--text-2); }
.rs-cam:first-child > * { border-top: none; }
.rs-cam > b { padding-left: 12px; font: 600 12px var(--mono); color: var(--accent); }
.rs-cam.is-hand > b { color: var(--text-2); }
.rs-cam-name { font-weight: 600; color: var(--text); }
.rs-cam-who { font-weight: 600; color: var(--text); }
.rs-cam-cards { font: 400 11px var(--mono); color: var(--text-3); padding-right: 12px; }
.rs-rules { font: 400 12px var(--sans); color: var(--text-3); margin-bottom: 14px; line-height: 1.5; }

.rs-lines { display: flex; flex-direction: column; }
.rs-row {
  display: grid; grid-template-columns: 108px minmax(220px, 1fr) minmax(0, 1.4fr); gap: 0 16px;
  align-items: baseline; padding: 8px 10px; border-top: 1px solid var(--line-soft);
}
.rs-row:first-child { border-top: none; }
.rs-at { font: 500 11.5px var(--mono); color: var(--text-2); white-space: nowrap; }
.rs-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rs-main b { font: 600 13px var(--sans); color: var(--text); }
.rs-sub { font: 400 11px var(--sans); color: var(--text-3); }
.rs-warn { font: 600 11px var(--sans); color: var(--danger, var(--accent)); }
.rs-extra { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; min-width: 0; }
.rs-cards { font: 500 11px var(--mono); color: var(--text-2); }
.rs-place { font: 400 11.5px var(--sans); color: var(--text-2); }
.rs-note { font: 400 11px var(--sans); color: var(--text-3); font-style: italic; }
.rs-edit {
  font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); background: none; border: 1px dashed var(--line); border-radius: 999px;
  padding: 2px 8px; cursor: pointer; opacity: 0; transition: opacity .12s ease-out;
}
.rs-row:hover .rs-edit { opacity: 1; }
.rs-edit:hover { color: var(--accent); border-color: var(--accent); }

.rs-row.is-move { background: var(--panel); border-radius: 6px; margin-top: 6px; border-top: none; }
.rs-row.is-move b { color: var(--text); letter-spacing: .02em; }
.rs-row.is-move.is-tight { box-shadow: inset 2px 0 0 var(--danger, var(--accent)); }
.rs-row.is-move.is-tight .rs-at { color: var(--danger, var(--accent)); }
.rs-row.is-set .rs-at { color: var(--text); }
.rs-row.is-set.is-own b { color: var(--accent); }
.rs-row.is-swap b, .rs-row.is-swap .rs-at { color: var(--accent); }
.rs-row.is-break { opacity: .75; }
.rs-row.is-break b { font-weight: 500; color: var(--text-2); }
.rs-row.is-end b { font-weight: 500; color: var(--text-2); }
.rs-lane { font: 400 11.5px var(--sans); color: var(--text-2); white-space: nowrap; }
.rs-lane b { font: 600 11px var(--mono); color: var(--accent); }

/* ---------- mobile team: the kit editor ---------- */

.kit { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.kit-head, .kit-row {
  display: grid; grid-template-columns: 44px 100px 96px 112px 96px 118px 150px 72px 30px;
  gap: 6px; align-items: center;
}
.kit-head { font: 500 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); padding: 0 0 6px; }
.kit-row { padding: 3px 0; }
.input-xs { padding: 5px 7px; font-size: 12px; border-radius: 6px; width: 100%; min-width: 0; }
.kit-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 10px; }
.kit-rule { display: inline-flex; align-items: center; gap: 6px; font: 400 12px var(--sans); color: var(--text-2); }

/* ---------- timetable: who records a starred set ---------- */

.rec-controls { display: inline-flex; align-items: center; gap: 5px; margin-right: 8px; }
.rec-team.is-unset { border-color: var(--accent-line); color: var(--accent); }
.rec-flag {
  font: 500 10px var(--mono); letter-spacing: .04em; color: var(--text-3);
  background: none; border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; cursor: pointer;
}
.rec-flag:hover { border-color: var(--accent); color: var(--text); }
.rec-flag.is-on { background: var(--accent-wash); border-color: var(--accent); color: var(--accent); }
.banner.is-quiet { border-color: var(--line); color: var(--text-3); background: none; }

/* ---------- mobile team: the full-day map (design 5B) ---------- */

.mm-spine-head { width: 170px; flex: none; font: 500 10px var(--mono); letter-spacing: .12em; color: var(--text-3); }
.mm-body { position: relative; margin-top: 8px; }
.mm-bands { position: absolute; left: 0; right: 0; top: 8px; pointer-events: none; }
.mm-band {
  position: absolute; left: 0; right: 0; border-radius: 6px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
}
.mm-band.is-move {
  background-image: repeating-linear-gradient(45deg, var(--hatch, rgba(127,127,127,.09)) 0 6px, transparent 6px 12px);
}
.mm-band-label { font: 500 9px var(--mono); letter-spacing: .1em; color: var(--text-3); position: relative; z-index: 5; }
.mm-band.is-move .mm-band-label { color: var(--text-2); }
.mm-band.is-move.is-tight .mm-band-label { color: var(--accent); font-weight: 700; }
/* a break is the one thing on the map that should not look like nothing */
.mm-band.is-break {
  background: rgba(234, 160, 28, .10); border-left: 3px solid #eaa01c;
}
.mm-band.is-break .mm-band-label { color: #eaa01c; font-weight: 600; }
.mm-band.is-break.is-offload { background: rgba(232, 121, 29, .13); border-left-color: #e8791d; }
.mm-band.is-break.is-offload .mm-band-label { color: #ff9a3c; }
/* the stage chip rides the top edge of its band, so it never sits on a card chip */
.mm-chip {
  position: absolute; right: 6px; top: -9px; z-index: 6;
  font: 700 9px var(--mono); letter-spacing: .08em; padding: 2px 7px; border-radius: 3px;
}
.mm-grid { position: relative; z-index: 1; }
.mm-spine { width: 170px; flex: none; position: relative; }
.mm-spine .ds-set { right: 4px; padding: 4px 8px; }
.mm-spine .ds-set-name { font-size: 11px; }

.mm-block {
  position: absolute; left: 1px; right: 1px; overflow: hidden; box-sizing: border-box;
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: 5px; padding: 4px 7px;
}
.mm-block.alt { background: var(--surface-2, var(--track)); }
.mm-block.is-tick { border-left: 2px solid var(--accent); }
.mm-block.is-wrapped { background: none; border: 1px dashed var(--line); }
.mm-block.is-wrapped .ds-who, .mm-block.is-wrapped .ds-when { color: var(--text-3); }
.mm-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.mm-card {
  font: 500 8px var(--mono); letter-spacing: .06em; color: var(--accent);
  border: 1px solid var(--accent-line); border-radius: 3px; padding: 1px 5px; white-space: nowrap; flex: none;
}
.mm-card.is-keep { color: var(--text-3); border-color: var(--line); }
.mm-tag {
  display: block; font: 500 8px var(--mono); letter-spacing: .04em; color: var(--accent);
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85;
}
.mm-swap { position: absolute; right: 6px; transform: translateY(-50%); }

/* ---------- functions ---------- */
.fn-list { display: flex; flex-direction: column; gap: 8px; }
.fn-row { display: flex; align-items: center; gap: 10px; }
.fn-row.is-gone .input { opacity: .4; text-decoration: line-through; }
.fn-select { min-width: 140px; }

/* ---------- sync: the server, login, access ---------- */

.sync-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px;
  border: 1px solid var(--line); border-radius: 999px; background: none; cursor: pointer;
  font: 500 10.5px var(--mono); letter-spacing: .06em; color: var(--text-2); text-transform: uppercase;
}
.sync-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.sync-pill.is-on i { background: #2f9e44; }
.sync-pill.is-busy i { background: #eaa01c; }
.sync-pill.is-off i { background: var(--danger, var(--accent)); }
.sync-pill:hover { border-color: var(--accent); color: var(--text); }

.modal-backdrop.is-login { background: var(--bg); }
.modal.login { width: min(400px, 92vw); padding: 30px 30px 26px; display: flex; flex-direction: column; gap: 10px; }
.modal.login h3 { margin: 6px 0 0; font: 600 20px var(--sans); color: var(--text); }
.login-mark { display: flex; justify-content: flex-start; align-items: center; gap: 12px; }
.login-mark .app-mark { width: 44px; height: 44px; }
.login-note { margin: 0 0 8px; font: 400 12.5px var(--sans); color: var(--text-3); line-height: 1.5; }
.login-err { min-height: 16px; font: 500 12px var(--sans); color: var(--danger, var(--accent)); }

/* ---- login page: the form on a dark card (#146, #123, #124) ---- */
/* always dark, whatever the planner's theme */
.modal-backdrop.ls { display: grid; place-items: start center; padding: 24px 16px; overflow-y: auto; background: #0b0b0c; backdrop-filter: none; -webkit-backdrop-filter: none; color-scheme: dark; }
.modal.login.ls-card { position: relative; z-index: 1; margin: auto 0; width: min(440px, 100%); max-height: none; overflow: visible; gap: 0; padding: 30px 30px 26px;
  border-radius: 18px; background: rgba(14,14,16,.74); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 120px rgba(0,0,0,.7);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); color: #f4f4f5; font: 400 15px/1.5 var(--sans); }
.ls-card .login-mark { margin-bottom: 26px; }
.ls-card .login-mark .word .w2 { color: #f4f4f5; }
.ls-head:not(:has(.ls-sub)) { margin-bottom: 24px; }
.ls-head h3, .modal.login.ls-card h3 { margin: 0; font: 700 26px/1.15 var(--sans); letter-spacing: -.01em; color: #f4f4f5; }
.ls-sub { margin: 6px 0 24px; font-size: 14.5px; color: #a1a1aa; overflow-wrap: anywhere; }
.ls-card .login-note { margin: -12px 0 20px; color: #a1a1aa; }
.ls-card .field { gap: 0; margin-bottom: 16px; }
.ls-card .field label { display: block; margin: 0 0 6px; font: 700 10.5px var(--mono); letter-spacing: .14em; color: #71717a; }
.ls-lrow { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px; }
.ls-card .ls-lrow label { margin: 0; }
.ls-card .input { height: 46px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: #f4f4f5; font: 400 15px var(--sans); }
.ls-card .input::placeholder { color: #71717a; }
.ls-card .input:focus { border-color: rgba(255,255,255,.45); box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
.ls-card .input:disabled { opacity: .5; }
.ls-card .input:-webkit-autofill { -webkit-text-fill-color: #f4f4f5; box-shadow: 0 0 0 100px #1c1c1f inset; caret-color: #f4f4f5; }
.ls-card a { color: #a1a1aa; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.2); }
.ls-card a:hover { color: #f4f4f5; }
.ls-card .ls-link { font-size: 12.5px; border-bottom-color: rgba(255,255,255,.25); }
.ls-small { margin: 14px 0 0; font-size: 12.5px; color: #71717a; }
.ls-small:empty { display: none; }
.ls-notyou, .ls-hint { margin: 6px 0 0; font-size: 12px; }
.ls-card .login-err { min-height: 0; margin: -4px 0 12px; }
.ls-card .login-err:empty { display: none; }
.ls-btn { width: 100%; height: 48px; border-radius: 10px; font: 700 15px var(--sans); }
.ls-btn:disabled { opacity: .6; cursor: default; }
.ls-btn2 { height: 46px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); color: #f4f4f5; font-weight: 600; font-size: 14.5px; }
.ls-btn2:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.3); }
/* passkeys (Stijn, 29 Oct 2026) */
.ls-or { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: #52525b; font: 700 10px var(--mono); letter-spacing: .14em; }
.ls-or::before, .ls-or::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.1); }
.ls-pk { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; border-radius: 10px; height: 48px; cursor: pointer; }
.ls-ico { display: inline-grid; place-items: center; }
.ls-ico svg { width: 20px; height: 20px; }
.psk-modal { width: min(560px, 100%); }
.psk-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 110px 32px; gap: 14px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--line); font-size: 14px; }
.psk-head { font: 700 9.5px var(--mono); letter-spacing: .14em; color: var(--text-3); padding-top: 0; }
.psk-dev { display: flex; align-items: center; gap: 10px; min-width: 0; }
.psk-dev .ls-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--track); color: var(--text-2); flex: none; }
.psk-dev .ls-ico svg { width: 16px; height: 16px; }
.psk-t { font: 12.5px var(--mono); color: var(--text-2); }
.ls-lines { display: grid; grid-template-columns: 90px 1fr; gap: 8px 12px; align-items: baseline; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); font-size: 13.5px; color: #d4d4d8; }
.ls-lk { font: 700 10px var(--mono); letter-spacing: .14em; color: #71717a; }
.ls-card .ls-back { align-self: flex-start; margin: -6px 0 18px; font-size: 13px; border: 0; }
.ls-icon { width: 52px; height: 52px; margin-bottom: 18px; border-radius: 14px; display: grid; place-items: center; color: #ff5a60; background: rgba(237,28,36,.14); border: 1px solid rgba(237,28,36,.35); }
.ls-icon svg { width: 26px; height: 26px; }
.ls-sentto { margin: -10px 0 22px; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); font-size: 13.5px; color: #a1a1aa; overflow-wrap: anywhere; }
.ls-sentto b { color: #f4f4f5; font-weight: 600; }
.ls-ok { display: flex; align-items: center; gap: 8px; margin: -6px 0 16px; font-size: 12.5px; color: #4ade80; }
/* the eye: show or hide what was typed, a tip above it says which */
.ls-pw { position: relative; }
.ls-card .ls-pw .input { padding-right: 50px; }
.ls-card .ls-pw.has-extra .input { padding-right: 120px; }
.ls-pw-r { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; }
.ls-pw-r .ls-link { margin-right: 8px; }
.ls-eye { position: relative; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px;
  display: grid; place-items: center; background: none; color: #a1a1aa; cursor: pointer; }
.ls-eye svg { width: 20px; height: 20px; }
.ls-pw.is-empty .ls-eye { display: none; }
.ls-eye:hover, .ls-eye:focus-visible { background: rgba(255,255,255,.08); color: #fff; outline: none; }
.ls-eye:hover::after, .ls-eye:focus-visible::after { content: attr(data-hint); position: absolute; bottom: calc(100% + 8px); right: -4px; white-space: nowrap;
  padding: 5px 9px; border-radius: 7px; background: #f4f4f5; color: #111; font: 600 12px var(--sans); pointer-events: none; }
.ls-eye:hover::before, .ls-eye:focus-visible::before { content: ''; position: absolute; bottom: calc(100% - 2px); right: 8px; border: 5px solid transparent; border-top-color: #f4f4f5; pointer-events: none; }
.ls-foot { position: fixed; left: 24px; right: 24px; bottom: 20px; display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; }
.ls-rec { display: inline-flex; align-items: center; gap: 8px; font: 700 10.5px var(--mono); letter-spacing: .2em; color: #ed1c24; }
.ls-rec::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #ed1c24; box-shadow: 0 0 12px #ed1c24; animation: ls-blink 1.6s steps(2, start) infinite; }
@keyframes ls-blink { 50% { opacity: .25; } }
.ls-clock { text-align: right; font: 700 26px var(--mono); letter-spacing: .04em; color: rgba(255,255,255,.85); font-variant-numeric: tabular-nums; }
.ls-clock small { display: block; font: 700 9.5px var(--mono); letter-spacing: .2em; color: #ed1c24; }
@media (max-width: 980px), (max-height: 680px) { .ls-foot { display: none; } }
@media (max-width: 760px) { .modal.login.ls-card { padding: 24px 20px; } }
@media (prefers-reduced-motion: reduce) { .ls-rec::before { animation: none; } }

.stack-v { display: flex; flex-direction: column; gap: 6px; }
.user-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; }
.user-row.is-off { opacity: .55; }
.user-row .book-who { flex: 1; }

.hist-row { display: grid; grid-template-columns: 44px 150px 90px 1fr auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line-soft); font: 400 12px var(--sans); color: var(--text-2); }
.hist-row.is-now { color: var(--text); }
.hist-v { font: 500 11px var(--mono); color: var(--text-3); }
.hist-when { font: 400 11px var(--mono); color: var(--text-3); }
.hist-by { font-weight: 600; }
.hist-sum { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* an invited editor sees one column, no rail */
.pane.is-solo { max-width: 1280px; margin: 0 auto; }
.pp-check { width: 13px; height: 13px; }

/* where the cut lives - paste a frame.io link straight in */
.pp-linkwrap { display: flex; align-items: center; gap: 6px; min-width: 0; width: 100%; }
.pp-linkbox {
  flex: 1; min-width: 0; padding: 5px 8px; font: 400 11px var(--mono); letter-spacing: 0;
  text-overflow: ellipsis; background: transparent; border-color: transparent;
}
.pp-linkbox:hover { border-color: var(--line-soft); }
.pp-linkbox:focus { border-color: var(--accent); background: var(--panel); }
.pp-linkbox::placeholder { color: var(--text-3); font-family: var(--sans); font-size: 11.5px; }
.pp-open {
  flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--accent-line); border-radius: 5px; color: var(--accent);
  font: 500 11px var(--mono); text-decoration: none;
}
.pp-open:hover { background: var(--accent-wash); }

/* the delivered burst */
.pp-confetti { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 60; }
.pp-confetti > i {
  position: absolute; left: 0; top: 0; width: 6px; height: 6px; border-radius: 1px;
  animation: pp-pop .95s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes pp-pop {
  0%   { transform: translate(0, 0) rotate(0deg) scale(.6); opacity: 0; }
  12%  { opacity: 1; }
  60%  { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); opacity: 1; }
  100% { transform: translate(calc(var(--dx) * 1.15), calc(var(--dy) + 26px)) rotate(var(--rot)) scale(.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .pp-confetti { display: none; } }

/* the full-screen moment when an editor's whole job is delivered:
   cannons on the floor, a bang, a fast climb, a slow fall */
.pp-party {
  position: fixed; inset: 0; z-index: 400; overflow: hidden; cursor: pointer;
  background: radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,.42), rgba(0,0,0,.72));
  transition: opacity .35s ease;
}
.pp-party.is-out { opacity: 0; }

/* the muzzle flash at the floor */
.pp-bang {
  position: absolute; bottom: -30px; width: 220px; height: 220px; margin-left: -110px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,.12) 45%, transparent 70%);
  animation: pp-bang .5s ease-out both;
}
@keyframes pp-bang {
  0%   { transform: scale(.15); opacity: 0; }
  18%  { transform: scale(.9);  opacity: 1; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* the shell carries the sideways travel, at a steady speed */
.pp-party > i {
  position: absolute; bottom: -10px; pointer-events: none;
  animation: pp-side calc(var(--rise) + var(--fall)) cubic-bezier(.08,.62,.3,1) var(--delay) both;
}
/* the bit inside it climbs, hangs, and comes down slowly, spinning all the way */
.pp-party > i > b {
  display: block; border-radius: 2px;
  animation: pp-arc calc(var(--rise) + var(--fall)) var(--delay) both;
}
@keyframes pp-side {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--drift)); }
}
@keyframes pp-arc {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0;
         animation-timing-function: cubic-bezier(.06,.7,.35,1); }      /* the bang: fast off the floor */
  4%   { opacity: 1; }
  38%  { transform: translateY(var(--peak)) rotate(calc(var(--spin) * .4)); opacity: 1;
         animation-timing-function: cubic-bezier(.45,.02,.75,.55); }   /* apex, then it lets go */
  92%  { opacity: 1; }
  100% { transform: translateY(102vh) rotate(var(--spin)); opacity: 0; }
}

.pp-party-note {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  text-align: center; padding: 26px 40px; border-radius: 18px;
  background: var(--panel, #16181c); border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  animation: pp-party-in .5s cubic-bezier(.18,.9,.25,1.1) .18s both;
}
.pp-party-t { font-size: 26px; font-weight: 700; letter-spacing: .2px; color: var(--text); }
.pp-party-s { margin-top: 8px; font-size: 14px; color: var(--text-2); }
@keyframes pp-party-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.86); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .pp-party { display: none; } }

/* ---------- stage build: decks, ground space, power ----------
   Brown means the stage crew has work here. Solid brown gets built and stands
   above the floor; a hatched outline gets nothing built and only has to stay
   empty. Everything else on the plan stays red, so the two never argue. */
:root {
  --deck:      #4a3524;
  --deck-line: #7a5837;
  --deck-text: #f0dcc4;
  --deck-sel:  #c98d4e;
  --deck-dim:  #a3794c;
}
[data-theme="light"] {
  --deck:      #6b4b30;
  --deck-line: #8a6640;
  --deck-text: #fdf2e5;
  --deck-sel:  #9c6a35;
  --deck-dim:  #7d5a36;
}

.sb-host { position: absolute; inset: 0; pointer-events: none; }
.sb-layer { position: absolute; inset: 0; }
.sb-area {
  position: absolute; border-radius: 3px; pointer-events: auto; cursor: grab;
  transform-origin: center center;
}
.sb-area.is-deck {
  background: var(--deck); border: 1.5px solid var(--deck-line);
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 1px, transparent 1px 14px);
}
.sb-area.is-ground {
  border: 1.5px dashed var(--deck-line);
  background-image: repeating-linear-gradient(45deg, rgba(138,102,64,.16) 0 1px, transparent 1px 7px);
}
.sb-area.is-sel { border-color: var(--deck-sel); box-shadow: 0 0 0 1px color-mix(in srgb, var(--deck-sel) 35%, transparent); }
.sb-area.is-ghost { pointer-events: none; opacity: .7; }
.sb-area.is-live { cursor: grabbing; }
/* the name lies on the floor of the shape, the size hangs under it - both out
   of the middle, which is where the cameras go */
.sb-tag {
  position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%);
  text-align: center; white-space: nowrap; pointer-events: none;
}
.sb-area.is-deck .sb-tag { text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.sb-tag b { display: block; font: 700 11px var(--sans); letter-spacing: 0; color: #fff; font-size: calc(11px * var(--fs, 1)); }
.sb-area.is-ground .sb-tag b { color: color-mix(in srgb, var(--deck-line) 55%, var(--text)); }
.sb-size-out {
  position: absolute; left: 50%; top: 100%; margin-top: 5px; transform: translateX(-50%);
  white-space: nowrap; pointer-events: none;
  font: 600 9.5px var(--mono); letter-spacing: .04em; color: var(--deck-dim);
}
.sb-h {
  position: absolute; width: 9px; height: 9px; background: #fff;
  border: 1px solid var(--deck-line); border-radius: 2px;
}
.sb-nw { left: -5px; top: -5px; cursor: nwse-resize; }
.sb-ne { right: -5px; top: -5px; cursor: nesw-resize; }
.sb-sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.sb-se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.sb-n  { left: 50%; top: -5px; margin-left: -5px; cursor: ns-resize; }
.sb-s  { left: 50%; bottom: -5px; margin-left: -5px; cursor: ns-resize; }
.sb-w  { left: -5px; top: 50%; margin-top: -5px; cursor: ew-resize; }
.sb-e  { right: -5px; top: 50%; margin-top: -5px; cursor: ew-resize; }
.sb-rot {
  position: absolute; left: 50%; top: -24px; transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 50%; background: var(--page);
  border: 1.5px solid var(--deck-sel); color: var(--deck-sel);
  font: 700 9px var(--mono); display: flex; align-items: center; justify-content: center; cursor: grab;
}
body.sb-grabbing, body.sb-grabbing * { cursor: grabbing !important; user-select: none; }

.sb-pw { position: absolute; transform: translate(-50%,-50%); display: flex; align-items: center; gap: 5px;
  pointer-events: auto; cursor: grab; }
.sb-pw-dot {
  width: 22px; height: 22px; flex: none; border-radius: 5px; background: var(--page);
  border: 1.5px solid var(--danger); color: var(--danger); font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.sb-pw.is-sel .sb-pw-dot { box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 30%, transparent); }
.sb-pw b { font: 600 9px var(--mono); letter-spacing: .06em; color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); border-radius: 4px;
  padding: 2px 5px; background: var(--page); white-space: nowrap; }

.sb-tools {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 5;
  display: flex; gap: 3px;
  background: var(--panel); border: 1px solid var(--line-control); border-radius: 10px; padding: 4px;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
}
.sb-tool {
  width: 46px; height: 44px; border-radius: 7px; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--text-2);
}
.sb-tool .sb-glyph { font-size: 18px; line-height: 1; }
.sb-tool small { font: 600 7.5px var(--mono); letter-spacing: .08em; }
.sb-tool:hover { background: var(--line); color: var(--text); }
.sb-tool.is-on { background: var(--accent); color: #fff; }
.sb-tool:disabled { opacity: .3; cursor: default; }

.sb-insp {
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 13px 15px 15px;
}
.sb-insp-h { display: flex; align-items: center; gap: 8px; }
.sb-insp-h b { font: 600 14px var(--sans); color: var(--text); }
.sb-swatch { width: 20px; height: 20px; flex: none; border-radius: 4px; background: var(--deck); border: 1px solid var(--deck-line); }
.sb-swatch.is-ground { background: none; border-style: dashed; }
.sb-swatch.is-pw { background: none; border-color: var(--danger); color: var(--danger);
  display: flex; align-items: center; justify-content: center; font-size: 10px; }
.sb-l { font: 500 8px var(--mono); letter-spacing: .14em; color: var(--text-3); margin: 13px 0 5px; }
.sb-in {
  width: 100%; border: 1px solid var(--line-control); border-radius: 6px; background: var(--page);
  padding: 7px 9px; font: 600 12.5px var(--sans); color: var(--text);
}
.sb-in.is-off { border-style: dashed; background: none; color: var(--text-3); }
.sb-note { font-weight: 500; resize: vertical; font-family: var(--sans); }
.sb-row { display: flex; gap: 6px; }
.sb-num { position: relative; flex: 1; display: block; }
.sb-num em { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-style: normal; font: 500 9px var(--mono); color: var(--text-3); pointer-events: none; }
.sb-num .sb-in { padding-right: 32px; }
.sb-hint { font: 500 10.5px var(--sans); color: var(--text-3); margin-top: 6px; line-height: 1.45; }
/* how big the name is printed on the plan */
.sb-fs { display: flex; align-items: center; gap: 6px; }
.sb-fsb {
  width: 30px; height: 28px; flex: none; border: 1px solid var(--line-control); border-radius: 7px;
  background: none; color: var(--text-2); font: 500 15px var(--sans); line-height: 1; cursor: pointer;
}
.sb-fsb:hover { border-color: var(--accent); color: var(--accent); }
.sb-fsnum { min-width: 46px; text-align: center; font: 500 11px var(--mono); color: var(--text); }
.sb-fsr {
  margin-left: auto; background: none; border: 0; cursor: pointer; padding: 4px 2px;
  font: 500 8.5px var(--mono); letter-spacing: .12em; color: var(--text-3);
}
.sb-fsr:hover { color: var(--accent); }
.sb-seg { display: flex; border: 1px solid var(--line-control); border-radius: 7px; overflow: hidden; }
.sb-seg-b { flex: 1; padding: 7px 0; border: 0; background: none; cursor: pointer;
  font: 600 11px var(--sans); color: var(--text-3); }
.sb-seg-b.is-on.is-deck { background: var(--deck); color: var(--deck-text); }
.sb-seg-b.is-on.is-ground { color: var(--deck-sel); box-shadow: inset 0 0 0 1.5px var(--deck-line); }
.sb-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.sb-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-list);
  border: 1px solid var(--line-control); border-radius: 4px; padding: 3px 8px; }
.sb-chip u { text-decoration: none; width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid var(--accent); color: var(--accent); font: 700 7px var(--mono);
  display: flex; align-items: center; justify-content: center; }
.sb-chip.is-empty { border-style: dashed; color: var(--text-3); }
.sb-chip.is-pw { border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); }
.sb-del { display: block; margin-top: 14px; }

.sb-list { padding: 0; }
.sb-list-h { display: flex; align-items: baseline; gap: 10px; padding: 11px 15px 9px; }
.sb-list-h b { font: 600 13px var(--sans); color: var(--text); }
.sb-list-h span { font: 500 9px var(--mono); letter-spacing: .12em; color: var(--text-3); }
/* every cell starts on its own column line - the sheet is read down, not across */
.sb-r, .sb-cols {
  display: grid; grid-template-columns: 28px 58px minmax(110px, 1.1fr) 112px minmax(0, 1.5fr) 54px;
  gap: 0 12px; align-items: center; justify-items: start; text-align: left;
  padding: 9px 15px; border-top: 1px solid var(--line);
}
.sb-r { cursor: pointer; }
.sb-cols { padding-top: 7px; padding-bottom: 6px; }
.sb-cols span { font: 500 8px var(--mono); letter-spacing: .14em; color: var(--text-3); }
.sb-note-cell {
  font: 500 11.5px var(--sans); color: var(--text-list); line-height: 1.35;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.sb-note-cell.is-empty { color: var(--text-3); }
.sb-r:hover, .sb-r.is-sel { background: var(--ds-block); }
.sb-b { width: 24px; height: 20px; border-radius: 4px; font: 700 9px var(--mono);
  display: flex; align-items: center; justify-content: center;
  background: var(--deck); border: 1px solid var(--deck-line); color: var(--deck-text); }
.sb-b.is-ground { background: none; border-style: dashed; color: var(--deck-dim); }
.sb-b.is-pw { background: none; border-color: var(--danger); color: var(--danger); border-radius: 5px; }
.sb-kind { font: 600 8px var(--mono); letter-spacing: .14em; color: var(--deck-dim); }
.sb-name { font: 600 13px var(--sans); color: var(--text); }
.sb-size { font: 600 11.5px var(--mono); color: var(--text-list); }
.sb-size small { display: block; font: 400 9px var(--mono); color: var(--text-3); margin-top: 3px; }
/* a plug's line says the kind first, then where it stands */
.sb-size b + span { display: block; font-weight: 400; font-size: 9px; color: var(--text-3); margin-top: 3px; }
.sb-cams { display: flex; gap: 4px; }
.sb-cam { width: 19px; height: 19px; border-radius: 50%; border: 1px solid var(--accent); color: var(--accent);
  font: 700 8px var(--mono); font-style: normal; display: flex; align-items: center; justify-content: center; }


/* ---------- zoom and pan on the plan ----------
   One transformed box holds the image and every layer, so a zoomed plan needs
   no other change: the fraction maths reads the box it is actually drawn in. */
.plan-stage { overflow: hidden; }
.plan-view { transform-origin: 0 0; will-change: transform; }
.sb-zoom {
  position: absolute; right: 10px; bottom: 10px; z-index: 5;
  display: flex; align-items: center; gap: 2px;
  background: var(--panel); border: 1px solid var(--line-control); border-radius: 9px; padding: 3px;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
}
.sb-zoom b { min-width: 42px; text-align: center; font: 600 10px var(--mono); color: var(--text-2); }
.sb-z {
  width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  color: var(--text-2); font: 600 14px var(--sans); line-height: 1;
}
.sb-z.is-wide { width: auto; padding: 0 9px; font: 600 9px var(--mono); letter-spacing: .1em; }
.sb-z:hover { background: var(--line); color: var(--text); }
.sb-pan-hint {
  position: absolute; left: 10px; bottom: 12px; z-index: 4; pointer-events: none;
  font: 500 8px var(--mono); letter-spacing: .12em; color: var(--text-3);
}
body.sb-panning .plan-stage, body.sb-panning .plan-stage * { cursor: grab !important; }

/* the panel's own footer: save lets the shape go, remove takes it away */
.sb-foot { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.sb-foot .sb-del { margin-top: 0; }

/* detach: it still stands there, the deck just stops carrying it */
.sb-off {
  margin-left: 3px; width: 15px; height: 15px; flex: none; border: 0; border-radius: 3px;
  background: none; color: var(--text-3); cursor: pointer;
  font: 700 11px var(--sans); line-height: 1; padding: 0;
}
.sb-off:hover { background: var(--accent); color: #fff; }
.sb-off.is-back:hover { background: var(--ok-fill); }
.sb-chip.is-loose { border-style: dashed; color: var(--text-3); }
.sb-loose { margin-top: 5px; }

/* ---------- callsheet ----------
   Design 1C "Red Rail". These are printed pages, so the colours are literal and
   the fonts are the sheet's own - the app around them stays as it is. */
.cs-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; margin-top: 18px; }
.cs-pages-col { min-width: 0; }
.cs-fit { transform-origin: 0 0; }
.cs-pages { display: flex; flex-direction: column; gap: 22px; width: 794px; }

.cs-page {
  width: 794px; height: 1123px; background: #F7F6F2; color: #111; position: relative; overflow: hidden;
  box-sizing: border-box; display: grid; grid-template-columns: 64px 1fr;
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 13px; line-height: 1.5;
  box-shadow: 0 12px 40px rgba(0,0,0,.18); border-radius: 0;
}
.cs-page * { box-sizing: border-box; }
.cs-rail { background: #E31B23; color: #fff; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 40px 0; }
.cs-rail-t { writing-mode: vertical-rl; transform: rotate(180deg); font: 400 10px 'Michroma', sans-serif; letter-spacing: .24em; white-space: nowrap; }
.cs-rail-n { font: 400 12px 'Michroma', sans-serif; }
.cs-body { padding: 44px 52px 80px 48px; display: flex; flex-direction: column; gap: 22px; position: relative; min-width: 0; }
.cs-foot { position: absolute; left: 48px; right: 52px; bottom: 30px; display: flex; justify-content: space-between; align-items: flex-end; font-size: 9.5px; color: #6B6B68; line-height: 1.4; gap: 16px; }
.cs-foot-l { max-width: 480px; }
.cs-foot-r { white-space: nowrap; }

.cs-logo { height: 42px; width: auto; align-self: flex-start; }
.cs-logo-s { height: 26px; width: auto; }
.cs-head { display: flex; justify-content: space-between; align-items: center; }
.cs-page-t { font: 400 18px 'Michroma', sans-serif; }
.cs-title-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.cs-title { font: 700 44px 'Orbitron', 'Michroma', sans-serif; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; }
.cs-date { font-size: 12px; color: #6B6B68; text-align: right; line-height: 1.4; padding-bottom: 4px; }
.cs-rule { border-top: 2px solid #111; padding-top: 16px; }
.cs-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cs-two.cs-gap { gap: 20px 28px; }
.cs-two.cs-gap-s { gap: 14px 28px; font-size: 12.5px; }
.cs-three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; font-size: 12px; line-height: 1.45; }
.cs-span { grid-column: 1 / -1; }
.cs-field { display: flex; flex-direction: column; gap: 5px; }
.cs-label { font-size: 10px; letter-spacing: .16em; color: #E31B23; text-transform: uppercase; font-weight: 700; }
.cs-label-muted { font-size: 10px; letter-spacing: .12em; color: #6B6B68; text-transform: uppercase; font-weight: 700; }
.cs-big { font-size: 16px; font-weight: 600; }
.cs-muted { font-size: 12px; color: #6B6B68; }
.cs-muted2 { color: #444; }
.cs-small { font-size: 12px; padding-top: 14px; gap: 28px; }
.cs-b { font-weight: 700; }
.cs-red { color: #E31B23; font-weight: 600; }
.cs-p { font-size: 13px; color: #444; }
.cs-pre { white-space: pre-line; }
.cs-empty { font-size: 12px; color: #6B6B68; font-style: italic; }
.cs-lead { color: #E31B23; font-weight: 700; }
.cs-black { background: #111; color: #fff; padding: 14px 18px; font-size: 12px; line-height: 1.5; }
.cs-black.cs-fine { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.cs-fine-n { font: 700 28px 'Barlow Condensed', 'Barlow', sans-serif; color: #E31B23; white-space: nowrap; }
.cs-block { display: flex; flex-direction: column; gap: 6px; }
.cs-h-row { display: flex; justify-content: space-between; align-items: baseline; }
.cs-h { font: 400 11px 'Michroma', sans-serif; letter-spacing: .18em; }
.cs-sub { font-size: 11px; letter-spacing: .12em; color: #6B6B68; text-transform: uppercase; border-top: 2px solid #111; padding-top: 10px; }

.cs-team-r { display: grid; grid-template-columns: 1.2fr 1fr 1.3fr 1.8fr; gap: 0 10px; padding: 10px 0; border-top: 1px solid #D9D8D3; font-size: 12.5px; }
.cs-crew-r { display: grid; gap: 0 14px; padding: 7px 0; border-top: 1px solid #D9D8D3; font-size: 13px; align-items: center; }
.cs-time { font: 700 24px 'Barlow Condensed', 'Barlow', sans-serif; line-height: 1; color: #E31B23; }
.cs-time.is-missing { color: #C9C8C4; }
.cs-pos { display: flex; justify-content: space-between; gap: 8px; }

.cs-plan { display: flex; flex-direction: column; padding-top: 0; }
.cs-plan .cs-label-muted { padding: 10px 0 4px; font-weight: 400; }
.cs-plan-r { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid #D9D8D3; }
.cs-time-xl { font: 700 34px 'Barlow Condensed', 'Barlow', sans-serif; line-height: 1; color: #E31B23; }
.cs-plan-i { font-size: 15px; font-weight: 600; }

.cs-legend { font-size: 12px; color: #6B6B68; display: flex; align-items: center; gap: 8px; }
.cs-legend i { width: 10px; height: 10px; background: #2FBF5B; display: inline-block; }
.cs-tts { display: grid; grid-template-columns: 1fr; gap: 0 22px; margin-top: 4px; }
.cs-tts.is-many { grid-template-columns: 1fr 1fr; }
.cs-tt { border: 1px solid #111; font-size: 11px; line-height: 1.3; align-self: start; }
.cs-tt-h { background: #111; color: #fff; padding: 3px 8px; font-weight: 700; letter-spacing: .04em; }
.cs-tt-r { display: grid; grid-template-columns: 82px 1fr; gap: 8px; padding: 3px 8px; border-top: 1px solid #D9D8D3; }
.cs-tt-r.is-rec { background: #D9F2E0; }
.cs-tt-t { color: #444; font-variant-numeric: tabular-nums; }
.cs-tt-a { font-weight: 600; }

.cs-cam { font-size: 12px; margin-top: 2px; }
.cs-cam-h, .cs-cam-r { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1.2fr; gap: 0 10px; padding: 7px 0; border-top: 1px solid #D9D8D3; }
.cs-cam-h { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #6B6B68; border-top: 0; padding-top: 0; }

.cs-office { display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; align-items: start; }
.cs-room-r { display: grid; grid-template-columns: 64px 1fr 1fr; gap: 8px; padding: 8px 0; border-top: 1px solid #D9D8D3; font-size: 12.5px; }
.cs-map { width: 100%; height: 300px; object-fit: contain; object-position: top; background: #EEEDE8; }
.cs-map.is-empty { display: flex; align-items: center; justify-content: center; border: 1px dashed #C9C8C4;
  background: repeating-linear-gradient(135deg, #EEEDE8 0 10px, #F7F6F2 10px 20px); font: 12px ui-monospace, monospace; color: #6B6B68; text-align: center; }

.cs-conf { font-size: 11.5px; line-height: 1.5; color: #444; display: flex; flex-direction: column; gap: 4px; }
.cs-bul { display: flex; flex-direction: column; gap: 8px; }
.cs-bul-r { display: grid; grid-template-columns: 8px 1fr; gap: 8px; }
.cs-bye { margin-top: auto; font: 400 16px 'Michroma', sans-serif; letter-spacing: .1em; color: #E31B23; }

/* the gate: what still has to go green */
.cs-gate { margin-top: 18px; padding: 18px 20px; }
.cs-gate-t { font: 600 15px var(--sans); color: var(--text); }
.cs-gate-d { font-size: 13px; color: var(--text-2); margin-top: 6px; }
.cs-gate-l { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.cs-gate-c { font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); border-radius: 99px; padding: 5px 10px; }

/* the panel: what only production knows */
.cs-panel { display: flex; flex-direction: column; gap: 12px; }
.cs-sec { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 8px; }
.cs-sec-h { font: 500 8.5px var(--mono); letter-spacing: .16em; color: var(--text-3); }
.cs-lab { font: 500 8px var(--mono); letter-spacing: .14em; color: var(--text-3); margin-top: 4px; }
.cs-in { font-size: 12.5px; }
textarea.cs-in { font-family: var(--sans); resize: vertical; line-height: 1.4; }
.cs-time-in { width: 108px; flex: none; }
.cs-day-in { width: 110px; flex: none; }
.cs-ct { display: flex; flex-direction: column; gap: 4px; }
.cs-ct-r { display: flex; align-items: center; gap: 6px; }
.cs-ct-r.is-head span { font: 500 8px var(--mono); letter-spacing: .12em; color: var(--text-3); }
.cs-ct-r.is-head span:first-child { flex: 1; }
.cs-ct-r.is-head span:not(:first-child):not(:last-child) { width: 108px; flex: none; }
.cs-ct-r.is-head span:last-child { flex: 1; }
.cs-ct-n { flex: 1; min-width: 0; font: 600 12.5px var(--sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-ct-r > .cs-in:last-child { flex: 1; min-width: 0; }
.cs-team { display: flex; flex-direction: column; gap: 8px; }
.cs-given { display: flex; flex-wrap: wrap; gap: 4px; }
.cs-team-e { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.cs-team-e .cs-in:nth-child(4) { grid-column: 1 / -1; }
.cs-team-e .link { justify-self: end; }
.cs-pl { display: flex; flex-direction: column; gap: 6px; }
.cs-pl-r { display: flex; align-items: center; gap: 6px; }
.cs-pl-r .cs-in:not(.cs-time-in):not(.cs-day-in) { flex: 1; min-width: 0; }
.cs-rooms { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.cs-room-e { display: grid; grid-template-columns: 96px 1fr auto; gap: 6px; align-items: start; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 32px; }
.cs-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--text-list);
  border: 1px solid var(--line-control); border-radius: 4px; padding: 3px 4px 3px 8px; }
.cs-map-drop { min-height: 44px; }

/* the mail dialog */
.cs-mail { display: grid; grid-template-columns: 1fr 1.2fr; gap: 22px; }
.cs-mail-l, .cs-mail-r { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cs-rcpt { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }
.cs-rcpt-r { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 6px; cursor: pointer; font-size: 12.5px; }
.cs-rcpt-r:hover { background: var(--line); }
.cs-rcpt-r.is-off { opacity: .5; cursor: default; }
.cs-rcpt-r .fee-hint { margin-left: auto; }
.cs-has { font: 600 9px var(--mono); letter-spacing: .08em; color: var(--ok); }
.cs-mail .textarea { min-height: 200px; font-size: 12.5px; }

@media (max-width: 1240px) { .cs-cols { grid-template-columns: 1fr; } }

/* print: the pages and nothing else, one per sheet of A4 */
@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #fff !important; }
  body * { visibility: hidden; }
  .cs-pages, .cs-pages * { visibility: visible; }
  .cs-fit { transform: none !important; height: auto !important; }
  .cs-pages { position: absolute; left: 0; top: 0; width: 210mm; gap: 0; }
  .cs-page { width: 210mm; height: 297mm; box-shadow: none; page-break-after: always; break-after: page;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cs-page:last-child { page-break-after: auto; break-after: auto; }
}

/* ---------- production needs: the client's sheet ----------
   The "Syndicate 2026 redesign" handoff: Archivo and IBM Plex Mono, ink on
   paper, no rail. The plan is drawn the way it is on screen, in the sheet's
   own colours, because the page never sees the app's theme. */
.pn-measure { position: fixed; left: -20000px; top: 0; }
.cs-page.pn-page {
  display: flex; flex-direction: column; grid-template-columns: none; padding: 44px 48px 40px;
  background: #fbfaf8; color: #141414; font-family: 'Archivo', Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.45;
}
.pn-page > * { flex: none; }
.pn-page a { color: #ED1C24; text-decoration: none; }
.pn-mono, .pn-crumb, .pn-eyebrow, .pn-eyebrow-red, .pn-facts, .pn-th, .pn-foot, .pn-counts, .pn-id, .pn-num, .pn-cam, .pn-tag, .pn-pin-l, .pn-nts, .pn-card-c { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; }
.pn-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 2px solid #141414; }
.pn-page .pn-logo { width: auto; }
.pn-crumb { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #6b6762; display: flex; gap: 14px; align-items: center; }
.pn-crumb i { color: #ED1C24; font-style: normal; font-size: 8px; }
.pn-crumb .is-ink { color: #141414; font-weight: 600; }
.pn-foot { display: flex; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 10px; border-top: 1px solid #d9d5cf; font-size: 9.5px; color: #6b6762; letter-spacing: .04em; }
.pn-foot-r { white-space: nowrap; }
/* the cover */
.pn-title-grid { display: grid; grid-template-columns: 1fr 240px; gap: 32px; padding-top: 36px; align-items: end; }
.pn-eyebrow-red { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #ED1C24; font-weight: 600; }
.pn-h1 { margin: 10px 0 0; font-size: 60px; line-height: .95; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; }
.pn-subline { margin-top: 12px; font-size: 16px; color: #6b6762; font-weight: 500; }
.pn-facts { margin: 0; display: grid; grid-template-columns: 1fr; font-size: 12px; border-top: 1px solid #141414; }
.pn-fact { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #d9d5cf; }
.pn-fact dt { color: #6b6762; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; align-self: center; }
.pn-fact dd { margin: 0; font-weight: 600; text-align: right; }
.pn-brief { margin: 36px 0 0; font-size: 16px; line-height: 1.55; max-width: 560px; }
.pn-brief b { font-weight: 700; }
.pn-sec { margin-top: 32px; }
.pn-sec-l { margin-top: 36px; }
.pn-eyebrow { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #6b6762; margin-bottom: 8px; }
.pn-legend { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; font-size: 12.5px; line-height: 1.45; }
.pn-legend.is-4 { grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.pn-legend b { font-weight: 700; }
.pn-lg { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.pn-sw { width: 26px; height: 26px; box-sizing: border-box; }
.pn-sw.is-ground { border: 1.5px dashed #ED1C24; background: rgba(237,28,36,.06); }
.pn-sw.is-deck { border: 1.5px solid #141414; background: #e9e5df; }
.pn-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pn-card { border-top: 2px solid #141414; padding-top: 10px; }
.pn-card-n { font-weight: 700; font-size: 14px; }
.pn-card-n span { color: #6b6762; font-weight: 500; }
.pn-card-c { font-size: 12px; margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.pn-red { color: #ED1C24; }
/* the stage page */
.pn-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-top: 24px; }
.pn-h2 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; line-height: 1; }
.pn-counts { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #6b6762; display: flex; gap: 14px; }
.pn-counts span + span::before { content: '·'; margin-right: 14px; }
.pn-counts b { color: #141414; font-weight: 600; }
.pn-plan-outer { position: relative; margin-top: 18px; display: flex; justify-content: center; }
/* one line, tight around the drawing itself - the same edge the screen shows */
.pn-plan { position: relative; flex: none; overflow: visible; border: 1px solid #141414; background: #fff; box-sizing: content-box; }
.pn-plan-img { position: absolute; inset: 0; background-repeat: no-repeat; background-size: 100% 100%; }
.pn-plan .plan-blueprint { display: block; width: 100%; height: 100%; margin: 0; aspect-ratio: auto; }
.pn-plan .plan-blueprint .bp-wall { stroke: #141414; }
.pn-plan .plan-blueprint .bp-divider { stroke: #141414; }
.pn-plan .plan-blueprint .bp-hatch { stroke: #ebe8e2; }
.pn-plan .plan-blueprint .bp-door { fill: #fbfaf8; stroke: #141414; }
.pn-plan .plan-blueprint .bp-stage { fill: #f6f4f0; stroke: #141414; }
.pn-plan .plan-blueprint .bp-dj { stroke: #141414; fill: #fff; }
.pn-plan .plan-blueprint .bp-axis { stroke: #d9d5cf; }
.pn-plan .plan-blueprint .bp-label { fill: #6b6762; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; }
.pn-plan .plan-blueprint .bp-label-stage, .pn-plan .plan-blueprint .bp-label-foh { fill: #141414; }
.pn-plan .plan-blueprint .bp-label-dj { fill: #141414; font-weight: 500; }
.pn-plan .plan-blueprint .bp-label-faint { fill: #9a958e; }
.pn-nts { position: absolute; right: 0; bottom: -13px; font-size: 8.5px; color: #9a958e; letter-spacing: .08em; text-transform: uppercase; }
.pn-area { position: absolute; box-sizing: border-box; transform-origin: center center; }
.pn-area.is-ground { border: 1.5px dashed #ED1C24; background: rgba(237,28,36,.06); }
.pn-area.is-deck { border: 1.5px solid #141414; background: rgba(20,20,20,.08);
  background-image: repeating-linear-gradient(90deg, rgba(20,20,20,.08) 0 1px, transparent 1px 12px); }
.pn-tag { position: absolute; left: 50%; top: 100%; margin-top: 3px; transform: translateX(-50%); white-space: nowrap;
  font-size: 9px; color: #6b6762; background: rgba(251,250,248,.85); padding: 0 3px; }
.pn-area.is-ground .pn-tag { color: #ED1C24; }
.pn-plug { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none;
  border-radius: 4px; background: #141414; color: #ffd400; font-size: 11px; line-height: 1; }
.pn-plug.is-lg { width: 26px; height: 26px; font-size: 13px; }
.pn-pins { position: absolute; inset: 0; }
.pn-pin { position: absolute; transform: translate(-11px, -50%); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pn-pin.is-flip { flex-direction: row-reverse; transform: translate(calc(-100% + 11px), -50%); }
.pn-cam { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; box-sizing: border-box;
  border-radius: 50%; background: #ED1C24; color: #fff; font-weight: 600; font-size: 11.5px; }
.pn-cam.is-roam { background: #fff; border: 1.5px solid #ED1C24; color: #ED1C24; }
.pn-cam.is-lg { width: 26px; height: 26px; }
.pn-pin-l { font-size: 9.5px; color: #141414; background: rgba(255,250,248,.88); padding: 1px 3px; line-height: 1.25; }
.pn-pin-l b { font-weight: 600; display: block; }
/* what it stands on, and who is on it */
.pn-pin-g { display: block; font-style: normal; font-size: 8.5px; color: #6b6762; }
.pn-pin-o { display: block; font-style: normal; font-size: 8.5px; color: #9a958e; }
/* close-ups: a letter in the booth on the plan, a numbered callout, the drawing under it */
.pn-pin.is-mini { transform: translate(-8px, -50%); }
.pn-pin.is-mini .pn-cam { width: 16px; height: 16px; font-size: 8.5px; }
.pn-cu-mark { position: absolute; transform: translate(4px, calc(-100% - 3px)); z-index: 2; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: #141414; color: #fff; font: 700 10.5px 'Inter', sans-serif; }
.pn-cus { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 30px; }
.pn-cu { width: 336px; }
.pn-cu-h { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-size: 11px; letter-spacing: .04em; color: #141414; }
.pn-cu-n { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #141414; color: #fff; font-size: 10px; font-weight: 700; }
.pn-cu-box { position: relative; border: 1px solid #141414; background: #fff; box-sizing: content-box; }
.pn-cu-none { position: absolute; inset: 0; display: grid; place-items: center; font-size: 9px; color: #9a958e; }
/* the tables */
.pn-table { display: flex; flex-direction: column; margin-top: 22px; }
.pn-table + .pn-table { margin-top: 20px; }
.pn-tg, .pn-tp, .pn-tw, .pn-sum { display: grid; gap: 0 12px; align-items: center; font-size: 12.5px; }
.pn-tg { grid-template-columns: 44px 128px 76px minmax(0, 1fr) 56px; }
.pn-tg > .pn-tick, .pn-tg.pn-th > span:nth-child(5) { text-align: center; }
/* the camera letters on a deck, or fed by a socket - the dots of the drawing */
.pn-for { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.pn-for:empty::before { content: '—'; color: #9a958e; }
.pn-ac { color: #ED1C24; font-weight: 600; }
.pn-tick { font-family: 'Archivo', Helvetica, Arial, sans-serif; font-weight: 700; font-size: 14px; color: #141414; }
.pn-tp { grid-template-columns: 30px 104px 76px minmax(0, 1fr); }
/* the producer's note under where the socket goes */
.pn-tp-note { grid-column: 4; margin-top: 2px; }
/* the power point's number: a red bubble on the mark, the same in the table */
.pn-plugn { display: inline-grid; place-items: center; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: #ED1C24; color: #fff; font: 700 9px var(--mono); line-height: 1; }
.pn-plugmark .pn-plugn { position: absolute; top: -7px; left: calc(50% + 4px); border: 1.5px solid #fff; z-index: 2; }
/* which plug and how many, in a column of its own so it reads down the page */
.pn-amp { font: 700 11.5px var(--mono); letter-spacing: .02em; white-space: nowrap; color: #1d2430; }
.pn-amp.is-32 { color: #8a6500; }
.pn-sum { grid-template-columns: minmax(0, 1.6fr) 90px 90px 120px 120px 60px; }
.pn-th { padding: 6px 0; border-top: 2px solid #141414; border-bottom: 1px solid #141414; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #6b6762; font-weight: 500; }
.pn-sum > span:not(:first-child) { text-align: right; }
.pn-tg > span:last-child { text-align: center; }
.pn-tr { padding: 7px 0; border-bottom: 1px solid #d9d5cf; }
.pn-sum.pn-tr { padding: 12px 0; border-bottom: 1px solid #141414; }
.pn-sum + .pn-sum.pn-tr { border-top: 0; }
.pn-sum .pn-num { font-weight: 600; }
/* ---- needs: the stages left out ---- */
.pn-sum.pn-none { display: block; padding: 10px 0; color: #6b6762; }
.pn-none b { color: #141414; font-weight: 700; }
.pn-b { font-weight: 600; }
.pn-id { font-weight: 600; color: #ED1C24; }
.pn-mono.is-s { font-size: 11.5px; }
.pn-num { font-weight: 600; }
.is-muted { color: #9a958e; font-weight: 400; }
.pn-note { font-size: 12px; line-height: 1.35; white-space: pre-line; }
.pn-empty { font-size: 12.5px; color: #6b6762; font-style: italic; margin-top: 22px; }

/* ---------- camera overview: one landscape page per stage ----------
   The production-needs paper on its side: the plan on the left, the cameras
   in a table on the right (camsheet.js). */
.ov-pages { width: 1123px; }
/* Camera overview: the plan the full height on the left, the list and the
   close-ups beside it. One face for the words (Archivo), mono only for the
   small labels. */
.cs-page.ov-page { width: 1123px; height: 794px; padding: 30px 38px 22px; font-family: 'Archivo', 'Inter', system-ui, sans-serif; }
.ov-head { display: flex; align-items: baseline; gap: 18px; padding-bottom: 12px; border-bottom: 2px solid #141414; }
.ov-head .pn-h2 { font-size: 30px; white-space: nowrap; }
.ov-crumb { gap: 10px; font-size: 10px; }
.ov-head .pn-counts { white-space: nowrap; font-size: 10.5px; }
.ov-logo { height: 22px; align-self: center; }
.pn-page > .ov-cols { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 700px minmax(0, 1fr); gap: 0 30px; padding-top: 16px; }
.ov-map, .ov-side, .ov-list { min-width: 0; display: flex; flex-direction: column; }
.ov-plan.pn-plan-outer { margin-top: 0; justify-content: flex-start; }
.ov-eyebrow { font: 600 9.5px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: #141414; padding-bottom: 7px; }
.ov-cu-eye { margin-top: 18px; }
.pn-cus.ov-cus { margin-top: 0; gap: 10px 14px; }
.ov-cus .pn-cu-h { font: 600 9.5px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .1em; margin-bottom: 5px; }
.ov-cus .pn-cu-h b { font-weight: 600; }
.ov-cus .pn-cu-n { width: 16px; height: 16px; font: 700 9px 'Archivo', sans-serif; }
/* the list */
.ov-t { display: grid; grid-template-columns: 24px minmax(0, 1.25fr) minmax(0, .85fr) minmax(0, 1.05fr) 52px; gap: 0 10px; align-items: center; font-size: 11px; line-height: 1.25; color: #141414; }
.ov-t > span { min-width: 0; overflow-wrap: anywhere; }
.ov-t > span:first-child { display: flex; }
.ov-th { padding: 0 0 5px; border-bottom: 1.5px solid #141414; font: 500 8.5px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #6b6762; }
.ov-tr { padding: 5px 0; border-bottom: 1px solid #e4e0da; }
.ov-t .pn-cam { width: 20px; height: 20px; font: 700 10px 'Archivo', sans-serif; }
.ov-cn b { display: block; font-weight: 700; font-size: 11.5px; }
.ov-cn i { display: block; font-style: normal; font-size: 9.5px; color: #6b6762; }
.ov-t .is-muted { color: #b5b0a8; }
.ov-l1 { white-space: nowrap; }
.ov-lens { font-variant-numeric: tabular-nums; }
.ov-t > span.ov-op, .ov-th > span:last-child { text-align: center; }
.ov-op { font: 700 13px 'Archivo', sans-serif; color: #141414; }
.ov-off { color: #ED1C24 !important; }
.ov-list.is-tight1 .ov-tr { padding: 3px 0; }
.ov-list.is-tight2 .ov-tr { padding: 2px 0; font-size: 10.5px; }
.ov-list.is-tight2 .ov-cn i { display: inline; margin-left: 6px; }
.ov-list.is-tight2 .ov-cn b { display: inline; }
.ov-list.is-tight2 .ov-t .pn-cam { width: 17px; height: 17px; font-size: 9px; }
.ov-list.is-tight3 .ov-tr { padding: 1px 0; font-size: 10px; line-height: 1.15; }
.ov-list.is-tight3 .ov-t > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-list.is-tight3 .ov-cn i:not(.ov-off) { display: none; }
/* the plan: a solid label on a busy render, in the same face as the list */
.ov-page .pn-plan { border: 0; outline: 1px solid #141414; }
.ov-page .pn-pin-l { font-family: 'Archivo', sans-serif; background: #fff; padding: 2px 5px 2px 4px; border-radius: 2px; box-shadow: 0 0 0 .5px rgba(20,20,20,.25); line-height: 1.2; }
.ov-page .pn-pin-l b { font-weight: 700; font-size: 9.5px; }
.ov-page .pn-pin-g, .ov-page .pn-pin-o { font-size: 8px; color: #6b6762; }
.ov-page .pn-cam { box-shadow: 0 0 0 1.5px #fff; }
/* on a drawing a dot is only its letter: a little smaller, so close ones keep apart */
.pn-plan.is-letters .pn-cam, .pn-cu-box.is-letters .pn-cam { width: 19px; height: 19px; font-size: 9.5px; box-shadow: 0 0 0 1.5px #fff; }
.pn-plan.is-letters .pn-pin, .pn-cu-box.is-letters .pn-pin { transform: translate(-9.5px, -50%); }
/* production needs: the drawing with the camera list beside it */
.pn-planrow { display: flex; gap: 24px; align-items: flex-start; margin-top: 18px; }
.pn-planrow.is-alone { display: block; }
.pn-planrow > .pn-plan-outer { margin-top: 0; flex: none; }
.pn-side { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pn-side > .pn-eyebrow { color: #141414; font-weight: 600; margin-bottom: 4px; padding-bottom: 6px; border-bottom: 1.5px solid #141414; }
.pn-srow { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 9px; align-items: center; padding: 5px 0; border-bottom: 1px solid #e4e0da; }
.pn-srow .pn-cam { width: 20px; height: 20px; font-size: 10px; }
.pn-sname b { display: block; font: 700 11px 'Archivo', sans-serif; line-height: 1.2; }
.pn-sname i { display: block; font: 400 8.5px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .02em; font-style: normal; color: #6b6762; margin-top: 1px; }
.pn-sname i.pn-sneed { color: #ED1C24; }
/* a small map of one part of the plan, its tables beside it */
.pn-beside { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 22px; align-items: start; margin-top: 22px; }
.pn-beside + .pn-beside { margin-top: 28px; }
.pn-beside-m .pn-plan-outer { margin-top: 0; justify-content: flex-start; }
.pn-beside-m .pn-tag { font-size: 6.5px; padding: 0 2px; }
.pn-beside-m .pn-nts { display: none; }
.pn-beside-t > .pn-table:first-child { margin-top: 0; }
.pn-beside-t .pn-tg { grid-template-columns: 30px 110px 60px minmax(0, 1fr) 44px; gap: 0 8px; font-size: 11.5px; }
.pn-beside-t .pn-tp { grid-template-columns: 22px 108px 48px minmax(0, 1fr); gap: 0 8px; font-size: 11.5px; }
.pn-beside-t .pn-for .pn-cam { width: 16px; height: 16px; font-size: 8.5px; }
.pn-beside-t .pn-th { font-size: 9px; letter-spacing: .08em; }
.pn-side.is-tight1 .pn-srow { padding: 3px 0; }
.pn-side.is-tight2 .pn-srow { padding: 1px 0; }
.pn-side.is-tight2 .pn-sname i { display: none; }
.ov-page .pn-tag { font-size: 8px; }
.ov-page .pn-nts { bottom: -14px; }
/* a booth with a close-up: outlined, and a tag that says where to look */
.pn-cu-see { position: absolute; border: 1.5px dashed #ED1C24; background: rgba(237,28,36,.08); box-sizing: border-box; pointer-events: none; }
.pn-cu-mark.is-see { transform: translate(-50%, -50%); z-index: 3; width: auto; height: auto; border-radius: 3px; gap: 5px; padding: 2px 6px 2px 2px; background: #141414; box-shadow: 0 0 0 1.5px #fff;
  font: 600 8px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.pn-cu-mark.is-see b { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: #fff; color: #141414; font: 700 8.5px 'Archivo', sans-serif; letter-spacing: 0; }
.cs-file { display: flex; align-items: center; gap: 10px; font-size: 12.5px; min-height: 22px; }
.cs-send { display: flex; align-items: center; gap: 10px; margin-top: 8px; }

/* ---------- the venue: the floor under the cameras ----------
   Screen colours from the theme; the paper (Production Needs) overrides them. */
:root { --vn-line: #a1a1aa; --vn-faint: #3a4250; --vn-text: #a1a1aa; --vn-fill: rgba(255,255,255,.03); --vn-hatch: rgba(255,255,255,.06); --vn-fly: #4fb3e8; --vn-red: #ed1c24; }
[data-theme="light"], .theme-light { --vn-line: #4b5563; --vn-faint: #c9cdd4; --vn-text: #4b5563; --vn-fill: rgba(0,0,0,.03); --vn-hatch: rgba(0,0,0,.08); }
.sb-mode { display: flex; border: 1px solid var(--line-control); border-radius: 7px; overflow: hidden; margin-right: 2px; }
.sb-mode-b { border: 0; background: none; cursor: pointer; padding: 0 10px; height: 44px; font: 600 9px var(--mono); letter-spacing: .1em; color: var(--text-2); }
.sb-mode-b.is-on { background: var(--text); color: var(--page); }
.sb-sep { width: 1px; height: 30px; background: var(--line-control); margin: 0 3px; align-self: center; }
.sb-tools.is-venue .sb-tool { width: 44px; }
.plan-canvas { display: block; width: min(100%, calc(72vh * 440 / 520)); aspect-ratio: 440 / 520; height: auto; margin: 0 auto;
  border: 1px solid var(--vn-faint); background: var(--page); box-sizing: border-box; }
.plan-stage.is-venue .plan-pins, .plan-stage.is-venue .sb-layer { opacity: .35; pointer-events: none; }
.plan-stage.is-venue .plan-img { opacity: .45; }
.vn-layer { position: absolute; inset: 0; pointer-events: none; }
.vn-layer.is-live .vn { pointer-events: auto; cursor: grab; }
.vn { position: absolute; box-sizing: border-box; transform-origin: center center; font-family: var(--mono); }
.vn-name { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none;
  font: 500 8.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--vn-text);
  /* --fs is the text size set on the object itself */
  font-size: calc(8.5px * var(--fs, 1)); }
.vn.is-tall > .vn-name { transform: translate(-50%, -50%) rotate(-90deg); }
.vn.is-backstage { background: repeating-linear-gradient(45deg, var(--vn-hatch) 0 4px, transparent 4px 10px); border: 1px solid var(--vn-faint); }
.vn.is-backstage .vn-name { left: 10px; top: 50%; transform: translateY(-50%); }
.vn.is-stage { border: 1.5px solid var(--vn-line); background: var(--vn-fill); }
.vn.is-stage .vn-name, .vn.is-foh .vn-name { left: 10px; top: 10px; transform: none; font-size: calc(9px * var(--fs, 1)); }
.vn.is-booth { border: 1.5px solid var(--vn-red); background: var(--vn-fill); }
.vn.is-booth .vn-name { top: -6px; transform: translate(-50%, -100%); color: var(--vn-red); font-weight: 700; }
.vn.is-foh { border: 1.5px solid var(--vn-line); background: var(--vn-fill); }
.vn.is-seats { border: 1px solid var(--vn-faint); background: repeating-linear-gradient(180deg, var(--vn-faint) 0 1px, transparent 1px 7px); }
.vn.is-seats.is-tall { background: repeating-linear-gradient(90deg, var(--vn-faint) 0 1px, transparent 1px 7px); }
.vn-tiers { position: absolute; inset: 0; display: flex; }
.vn-tiers.is-x { flex-direction: row; } .vn-tiers.is-y { flex-direction: column; }
.vn-tier { position: relative; flex: 1; border: 0 solid var(--vn-faint); }
.vn-tiers.is-x .vn-tier + .vn-tier { border-left-width: 1px; }
.vn-tiers.is-y .vn-tier + .vn-tier { border-top-width: 1px; }
.vn-tier.is-t2 { background: repeating-linear-gradient(180deg, var(--vn-line) 0 1px, transparent 1px 7px); opacity: .55; }
.vn-tier.is-t3 { background: repeating-linear-gradient(180deg, var(--vn-line) 0 1px, transparent 1px 5px); opacity: .7; }
.vn.is-tall .vn-tier.is-t2 { background: repeating-linear-gradient(90deg, var(--vn-line) 0 1px, transparent 1px 7px); }
.vn.is-tall .vn-tier.is-t3 { background: repeating-linear-gradient(90deg, var(--vn-line) 0 1px, transparent 1px 5px); }
.vn.is-tall .vn-tier .vn-name { transform: translate(-50%, -50%) rotate(-90deg); }
.vn-stack b { display: block; font-weight: 500; }
.vn.is-catwalk { border: 1.5px solid var(--vn-line); background: var(--vn-fill); }
.vn.is-barrier { border: 1.5px dashed var(--vn-line); }
.vn.is-barrier .vn-name { left: auto; right: 6px; top: 50%; transform: translateY(-50%); font-size: calc(7.5px * var(--fs, 1)); }
.vn.is-object { border: 1px solid var(--vn-line); }
.vn.is-object .vn-name { font-size: calc(7.5px * var(--fs, 1)); letter-spacing: .08em; }
.vn.is-flying { border: 1.5px dashed var(--vn-fly); background: repeating-linear-gradient(-45deg, rgba(79,179,232,.18) 0 1px, transparent 1px 6px); }
.vn.is-flying .vn-name { color: var(--vn-fly); font-weight: 700; }
.vn.is-label { border: 0; }
.vn.is-label .vn-name { color: var(--vn-text); font-size: calc(9px * var(--fs, 1)); }
.vn.st-hatched { background: repeating-linear-gradient(45deg, var(--vn-hatch) 0 4px, transparent 4px 10px) !important; }
.vn.st-dashed { border-style: dashed !important; }
.vn.st-solid { border-style: solid !important; }
.vn.st-red { border-color: var(--vn-red) !important; }
.vn.st-red .vn-name { color: var(--vn-red); }
.vn.is-sel { outline: 1.5px solid var(--accent); outline-offset: 1px; }
.vn.is-ghost { pointer-events: none; opacity: .7; }
.vn.is-live { cursor: grabbing; }
.vn-layer .sb-h, .vn-layer .sb-rot { pointer-events: auto; }
/* the inspector and the card */
.vn-sw { width: 20px; height: 14px; flex: none; border: 1.5px solid var(--vn-line); border-radius: 2px; box-sizing: border-box; }
.vn-sw.is-backstage { background: repeating-linear-gradient(45deg, var(--vn-hatch) 0 2px, transparent 2px 5px); border-color: var(--vn-faint); }
.vn-sw.is-booth { border-color: var(--vn-red); }
.vn-sw.is-seats { background: repeating-linear-gradient(180deg, var(--vn-line) 0 1px, transparent 1px 4px); border-color: var(--vn-faint); }
.vn-sw.is-barrier { border-style: dashed; }
.vn-sw.is-flying { border-style: dashed; border-color: var(--vn-fly); }
.vn-sw.is-label { border: 0; }
.vn-kind { margin-left: auto; font: 600 8.5px var(--mono); letter-spacing: .1em; color: var(--accent); background: var(--accent-wash); padding: 3px 7px; border-radius: 5px; }
.vn-chip { border: 1px solid var(--line-control); background: none; border-radius: 6px; padding: 5px 9px; cursor: pointer;
  font: 600 9.5px var(--mono); letter-spacing: .06em; color: var(--text-2); }
.vn-chip.is-on { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
.vn-chip.is-save { border-style: dashed; }
.vn-chip:disabled { opacity: .4; cursor: default; }
.vn-saved { display: inline-flex; align-items: center; }
.vn-saved .vn-chip { border-radius: 6px 0 0 6px; }
.vn-x { border: 1px solid var(--line-control); border-left: 0; border-radius: 0 6px 6px 0; background: none; color: var(--text-3); cursor: pointer; padding: 4px 7px; font-size: 12px; line-height: 1; height: 26px; }
.vn-x:hover { color: var(--danger); }
.vn-body { padding: 0 15px 12px; }
.vn-cols { display: grid; grid-template-columns: 28px 78px minmax(0, 1fr) auto; gap: 0 10px; padding: 7px 15px 5px; border-top: 1px solid var(--line);
  font: 500 8px var(--mono); letter-spacing: .14em; color: var(--text-3); }
.vn-r { display: grid; grid-template-columns: 28px 78px minmax(0, 1fr) auto; gap: 0 10px; align-items: center; padding: 8px 15px; border-top: 1px solid var(--line); cursor: pointer; font-size: 12.5px; }
.vn-r:hover { background: var(--line); }
.vn-r.is-sel { background: var(--accent-wash); }
.vn-r-k { font: 600 8.5px var(--mono); letter-spacing: .1em; color: var(--text-3); }
.vn-r-n { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vn-r-s { font: 500 10px var(--mono); color: var(--text-3); white-space: nowrap; }
.vn-foot { padding: 4px 15px 12px; }
.vn-foot .sb-del { margin-top: 6px; }
.vn-insp .sb-foot { flex-wrap: wrap; gap: 8px 12px; }

/* ---------- close-ups: the DJ booth and FOH drawn big ---------- */
/* inside a box with a drawing, a camera is a small lettered dot - the badge opens the rest */
.pin.is-mini { transform: translate(-8px, -50%); }
.pin.is-mini .pin-dot { min-width: 16px; height: 16px; padding: 0 3px; font-size: 8.5px; line-height: 13px; border-width: 1.5px; }
.pin.is-mini .pin-label { display: none; }
.pin.is-mini:hover .pin-label { display: block; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); }
/* the badge hangs above the box's top corner, on a short leader - beside it is
   where the wing cameras usually are */
.cu-badge {
  position: absolute; transform: translate(8px, calc(-100% - 10px)); z-index: 3; pointer-events: auto;
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 9px 3px 3px; border-radius: 99px; cursor: pointer;
  background: rgba(14,17,22,.9); border: 1px solid var(--accent); color: #fff; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.cu-badge::after { content: ''; position: absolute; left: -8px; bottom: -10px; width: 13px; height: 1.5px; background: var(--accent);
  transform: rotate(-51deg); transform-origin: 0 50%; }
.cu-badge.is-left { transform: translate(calc(-100% - 8px), calc(-100% - 10px)); }
.cu-badge.is-left::after { left: auto; right: -8px; transform: rotate(51deg); transform-origin: 100% 50%; }
.cu-badge.is-below { transform: translate(8px, 10px); }
.cu-badge.is-below.is-left { transform: translate(calc(-100% - 8px), 10px); }
.cu-badge.is-below::after { bottom: auto; top: -10px; transform: rotate(51deg); }
.cu-badge.is-below.is-left::after { transform: rotate(-51deg); }
.cu-badge:hover { background: var(--accent); }
.cu-badge .cu-t { font: 700 9.5px var(--mono); letter-spacing: .1em; }
.cu-badge .cu-go { font-size: 11px; color: var(--accent); }
.cu-badge:hover .cu-go { color: #fff; }
.cu-n { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 99px; flex: none;
  background: var(--accent); color: #fff; font: 800 10px var(--mono); }
.cu-n.is-big { width: 26px; height: 26px; font-size: 12.5px; margin-right: 10px; }
.cu-modal { width: min(1080px, 100%); }
.cu-head { gap: 8px; }
.cu-head h3 { font-size: 17px; margin-right: 6px; }
.cu-meta { font: 500 9.5px var(--mono); letter-spacing: .14em; color: var(--text-3); }
.cu-head .btn-quiet { margin-left: 0; }
.cu-head .btn.is-on { border-color: var(--accent); color: var(--accent); }
.cu-body { padding: 14px; }
.cu-stage { background: var(--page); border: 1px solid var(--line); border-radius: 9px; padding: 14px; display: grid; place-items: center; }
.cu-view { position: relative; width: fit-content; max-width: 100%; cursor: crosshair; }
.cu-img { display: block; max-width: 100%; max-height: 62vh; width: auto; height: auto; user-select: none; }
.cu-foot { justify-content: flex-start; flex-wrap: wrap; align-items: center; }
/* the sketch that stands in until the top view comes */
.cu-view.is-sketch { background: var(--panel); border-radius: 6px; }
.cu-sk { display: block; width: 100%; height: 100%; color: var(--text-3); }
.pn-cu-box .cu-sk { position: absolute; inset: 0; color: #141414; }
.cu-hint { font: 400 12.5px var(--sans); color: var(--text-2); }
.cu-hint b { color: var(--text); font-weight: 600; }
/* on paper */
.pn-plan { --vn-line: #141414; --vn-faint: #b9b5ae; --vn-text: #6b6762; --vn-fill: #fff; --vn-hatch: #e4e1db; --vn-fly: #2b95c9; --vn-red: #ED1C24; }
.pn-plan .plan-canvas { width: 100%; height: 100%; margin: 0; aspect-ratio: auto; border: 0; background: #fbfaf8; }
.pn-plan .vn.is-backstage { background: repeating-linear-gradient(135deg, #f1efeb 0 6px, #fbfaf8 6px 12px); border-color: #141414; }
.pn-plan .vn.is-stage, .pn-plan .vn.is-foh, .pn-plan .vn.is-catwalk { background: #f6f4f0; }
.pn-plan .vn.is-booth { background: #fff; border-color: #141414; }
.pn-plan .vn.is-booth .vn-name { color: #141414; }
.pn-plan .vn.is-seats { background: repeating-linear-gradient(180deg, #d9d5cf 0 1px, transparent 1px 7px); border-color: #b9b5ae; }
.pn-plan .vn.is-seats.is-tall { background: repeating-linear-gradient(90deg, #d9d5cf 0 1px, transparent 1px 7px); }
.pn-plan .vn-tier.is-t2, .pn-plan .vn-tier.is-t3 { opacity: 1; }
.pn-plan .vn-tier.is-t2 { background: repeating-linear-gradient(180deg, #9a958e 0 1px, transparent 1px 7px); }
.pn-plan .vn.is-tall .vn-tier.is-t2 { background: repeating-linear-gradient(90deg, #9a958e 0 1px, transparent 1px 7px); }
.pn-plan .vn.is-flying { background: repeating-linear-gradient(-45deg, rgba(43,149,201,.22) 0 1px, transparent 1px 6px); }
/* the forecast at the top right of the callsheet cover */
.cs-cover-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.cs-wx { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cs-wx-h { font-size: 9.5px; letter-spacing: .16em; color: #6B6B68; text-transform: uppercase; font-weight: 700; }
.cs-wx-none { font-size: 11px; color: #9a958e; }
.cs-wx-days { display: flex; gap: 6px; }
.cs-wx-d { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 70px; padding: 6px 8px 7px; border: 1px solid #D9D8D3; background: #fff; }
.cs-wx-day { font-size: 9px; letter-spacing: .12em; color: #6B6B68; font-weight: 700; }
.cs-wx-i { width: 26px; height: 26px; fill: none; stroke: #111; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; color: #111; }
.cs-wx-t { font-size: 13px; line-height: 1.1; white-space: nowrap; }
.cs-wx-t b { font-weight: 700; } .cs-wx-t span { color: #6B6B68; }
.cs-wx-m { font-size: 9.5px; color: #6B6B68; white-space: pre; }
/* venue mode: the cameras, decks and plugs are on show but out of reach */
.plan-stage.is-venue .pin, .plan-stage.is-venue .sb-area, .plan-stage.is-venue .sb-pw, .plan-stage.is-venue .sb-layer .sb-h, .plan-stage.is-venue .sb-layer .sb-rot { pointer-events: none !important; }
/* the two that matter most on the map are red - on the palette too */
.sb-tools .sb-tool.is-red { color: var(--accent); background: var(--accent-wash); }
.sb-tools .sb-tool.is-red.is-on { background: var(--accent); color: #fff; }
.vn.is-foh { border-color: var(--vn-red); }
.vn.is-foh .vn-name { color: var(--vn-red); font-weight: 700; }
.pn-plan .vn.is-foh { border-color: #ED1C24; background: #fff; }
.pn-plan .vn.is-foh .vn-name { color: #ED1C24; }
/* a person: a dot with a name beside it */
.vn.is-person { border: 0; overflow: visible; }
.vn-head { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; background: var(--vn-line); box-sizing: border-box; border: 1.5px solid var(--page); }
.vn.is-person .vn-name { left: 100%; top: 50%; transform: translateY(-50%); margin-left: 5px; text-transform: none; letter-spacing: 0; font: 600 9px var(--sans); color: var(--vn-text); font-size: calc(9px * var(--fs, 1)); }
.pn-plan .vn-head { background: #141414; border-color: #fbfaf8; }
.vn-sw.is-person { border-radius: 50%; width: 14px; background: var(--vn-line); }
.sb-tools.is-venue { gap: 1px; padding: 3px; }
.sb-tools.is-venue .sb-tool { width: 38px; height: 42px; }
.sb-tools.is-venue .sb-tool small { font-size: 6.5px; letter-spacing: .04em; }
.sb-tools.is-venue .sb-mode-b { padding: 0 7px; height: 42px; }
.vn.is-person.is-sel { outline: 0; }
.vn.is-person.is-sel .vn-head { box-shadow: 0 0 0 2px var(--accent); }
/* shoot or festival, on the new-shoot dialog */
.kind-seg { display: flex; }
.kind-seg .seg-opt { flex: 1; font: 700 12px var(--sans); letter-spacing: 0; padding: 9px 14px; }
.kind-seg .seg-opt.is-on { background: var(--accent); color: #fff; }
/* a person is round whatever the plan's shape: the height follows the width */
.vn.is-person { aspect-ratio: 1 / 1; height: auto !important; min-width: 14px; }
/* where the name sits, when you say so - both axes are set, so the box's
   own default is out of the way */
.vn.is-placed > .vn-name { left: auto; right: auto; top: auto; bottom: auto; margin: 0; transform: none; }
.vn.is-placed.lv-top > .vn-name { top: 6px; }
.vn.is-placed.lv-bot > .vn-name { bottom: 6px; }
.vn.is-placed.lv-above > .vn-name { bottom: 100%; margin-bottom: 4px; }
.vn.is-placed.lv-below > .vn-name { top: 100%; margin-top: 4px; }
.vn.is-placed.lh-left > .vn-name { left: 8px; }
.vn.is-placed.lh-right > .vn-name { right: 8px; }
.vn.is-placed.lv-mid > .vn-name { top: 50%; transform: translateY(-50%); }
.vn.is-placed.lh-mid > .vn-name { left: 50%; transform: translateX(-50%); }
.vn.is-placed.lv-mid.lh-mid > .vn-name { transform: translate(-50%, -50%); }
.vn.is-placed.is-tall.lv-mid.lh-mid > .vn-name { transform: translate(-50%, -50%) rotate(-90deg); }
.vn-stray { margin-bottom: 4px; }
.fn-venue { max-width: 190px; font-size: 11.5px; }
.fn-move { display: flex; flex-direction: column; gap: 1px; flex: none; }
.fn-arrow { width: 20px; height: 15px; border: 1px solid var(--line-control); background: none; color: var(--text-2); border-radius: 4px;
  font-size: 9px; line-height: 1; cursor: pointer; padding: 0; }
.fn-arrow:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.fn-arrow:disabled { opacity: .25; cursor: default; }
/* stage or shoot, on one line of the stages dialog */
.row-seg { flex: none; }
.row-seg .seg-opt { padding: 5px 9px; font-size: 9px; letter-spacing: .1em; }
.row-seg .seg-opt.is-on { background: var(--track); color: var(--text); }

/* ---------- two-factor ---------- */
.tf-flag { margin-left: 8px; font-size: 10px; letter-spacing: .08em; padding: 1px 6px; border-radius: 999px;
           border: 1px solid var(--line); color: var(--text-3); }
.tf-flag.is-on { border-color: rgba(74, 222, 128, .45); color: var(--ok); }
.modal.tf { width: min(560px, calc(100vw - 32px)); }
.tf-pair { display: flex; gap: 18px; align-items: flex-start; margin-top: 4px; }
.tf-qr { background: #fff; padding: 8px; border-radius: 10px; line-height: 0; flex: 0 0 auto; }
.tf-qr svg { display: block; max-width: 100%; height: auto; image-rendering: pixelated; }
.tf-side { flex: 1 1 auto; min-width: 0; }
.tf-key { display: block; margin: 6px 0 12px; padding: 8px 10px; border-radius: 8px; background: var(--line-soft);
          font-size: 12px; letter-spacing: .06em; word-break: break-all; color: var(--text-2); }
.tf-row { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.tf-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0 2px; }
.tf-codes code { padding: 9px 10px; border-radius: 8px; background: var(--line-soft); border: 1px solid var(--line);
                 font-size: 13px; letter-spacing: .08em; text-align: center; color: var(--text); }
@media (max-width: 560px) {
  .tf-pair { flex-direction: column; align-items: center; }
  .tf-side { width: 100%; }
  .tf-codes { grid-template-columns: 1fr; }
}

/* the message box of an outgoing mail: plain text, in a plain-text font */
.textarea.mail-body { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
                      font-size: 12.5px; line-height: 1.55; }

/* ---------- a socket on the stage plan says which plug and how many ---------- */
.sb-pw-tag { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 2px);
             font: 600 8.5px var(--mono); letter-spacing: .04em; white-space: nowrap;
             padding: 1px 4px; border-radius: 4px; background: var(--panel);
             border: 1px solid var(--line); color: var(--text-2); pointer-events: none; }
.sb-pw-tag.is-32 { color: var(--busy); border-color: color-mix(in srgb, var(--busy) 45%, transparent); }
.sb-seg-b.is-on.is-amp { background: var(--accent); color: var(--text-invert); }
.sb-qtyrow { align-items: center; gap: 6px; }
.sb-qty { width: 58px; text-align: center; }
.sb-step { width: 26px; height: 26px; flex: none; border-radius: 6px; border: 1px solid var(--line);
           background: var(--panel); color: var(--text-2); font-size: 14px; line-height: 1; cursor: pointer; }
.sb-step:hover { color: var(--text); border-color: var(--line-control); }
/* the socket mark on the printed plan: the bolt, and under it which plug */
.pn-plugmark { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column;
               align-items: center; gap: 1px; }
.pn-plugtag { font: 700 7px var(--mono); letter-spacing: .04em; white-space: nowrap;
              padding: 0 3px; border-radius: 3px; background: #fff; border: .5px solid #c9ced8; color: #1d2430; }
.pn-plugmark.is-32 .pn-plugtag { border-color: #b98900; color: #7a5c00; }

/* which of the three the production-needs sheet is about */
.pn-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pn-pick-l { font: 500 9px var(--mono); letter-spacing: .12em; color: var(--text-3); margin-right: 2px; }
.pn-pick-b { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line);
             background: transparent; color: var(--text-3); font: 600 11px var(--sans); cursor: pointer; }
.pn-pick-b:hover { color: var(--text-2); border-color: var(--line-control); }
.pn-pick-b.is-on { background: var(--accent); border-color: transparent; color: var(--text-invert); }

/* ---------- build and strike ---------- */
.modal-build { width: min(1180px, 100%); }
.bp-list { display: flex; flex-direction: column; gap: 6px; }
.bp-row { display: grid; align-items: center; gap: 8px;
          grid-template-columns: 200px 132px 150px minmax(0, 1fr) 190px 150px 22px; }
.bp-row.bp-head { padding: 0 0 2px; }
.bp-head .bp-c { font: 500 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.bp-row .bp-c { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bp-row .bp-c select, .bp-row .bp-c input { width: 100%; min-width: 0; }
.bp-times { gap: 4px; }
.bp-times i { font-style: normal; color: var(--text-3); }
.bp-row .bp-c input.bp-t { width: 56px; flex: none; text-align: center; }
.bp-by .seg-opt { padding: 5px 8px; font-size: 9px; letter-spacing: .06em; }
.bp-row.is-them .bp-c input { border-color: color-mix(in srgb, var(--busy) 45%, var(--line)); }
.pn-tw { grid-template-columns: 86px 108px minmax(0, 1fr) 210px 104px; }
/* no row points at the plan: that column is left out */
.pn-tw.is-slim { grid-template-columns: 86px 108px minmax(0, 1fr) 104px; }
.pn-when-t { font: 700 12.5px var(--mono); color: #1d2430; white-space: nowrap; }
.pn-whose { font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; text-align: right; color: #8b8f98; }
.pn-whose.is-them { color: #8a6500; }
.pn-tw.is-them .pn-when-t { color: #8a6500; }
.pn-lg-w { flex: none; align-self: flex-start; text-align: left; border: 1px solid #b98900; border-radius: 4px; padding: 2px 5px; }

/* which layers of the stage plan are drawn */
.sb-see { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0 0 12px; }
.sb-see-l { font: 500 9px var(--mono); letter-spacing: .12em; color: var(--text-3); margin-right: 1px; }
.sb-see-b { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line);
            background: transparent; color: var(--text-3); font: 600 10.5px var(--sans); cursor: pointer; }
.sb-see-b:hover { color: var(--text-2); border-color: var(--line-control); }
.sb-see-b.is-on { background: var(--track); border-color: transparent; color: var(--text); }

/* ---------- packing: one festival's gear list for whoever packs it ----------
   Its own tab on an invited packer's page (assets/js/views/packing.js). The
   camera table borrows the gear list's grid; on a narrow screen it turns into
   a card per camera, and the boxes get bigger - it is used in a storage room. */
.pk-tabs { display: inline-flex; margin: 16px 0 2px; border: 1px solid var(--line-soft); border-radius: 9px; overflow: hidden; max-width: 100%; }
.pk-tab { display: flex; align-items: baseline; gap: 8px; padding: 9px 16px; font: 500 14px var(--sans); color: var(--text-2); background: none; border: 0; cursor: pointer; white-space: nowrap; }
.pk-tab + .pk-tab { border-left: 1px solid var(--line-soft); }
.pk-tab em { font: 600 9px var(--mono); letter-spacing: .12em; color: var(--text-3); font-style: normal; }
.pk-tab:hover { color: var(--text); }
.pk-tab.is-on { background: var(--track); color: var(--text); }
.pk-tab.is-on em { color: var(--text-2); }
.pk-n { align-self: center; font: 700 9px var(--mono); color: var(--busy-ink); background: var(--busy); border-radius: 99px; padding: 2px 6px; }
.pk { container-type: inline-size; }
.pk-job + .pk-job { margin-top: 40px; }
.pk-head { display: flex; align-items: center; gap: 16px; margin-top: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.pk-fest { font: 600 20px var(--sans); color: var(--accent); }
.pk-sub { font: 500 9.5px var(--mono); letter-spacing: .14em; color: var(--text-2); margin-top: 4px; }
.pk-prog { margin-left: auto; min-width: 220px; }
.pk-prog b { display: flex; align-items: baseline; gap: 6px; font: 600 22px var(--sans); color: var(--text); }
.pk-prog b span { font: 500 10px var(--mono); letter-spacing: .12em; color: var(--text-2); }
.pk-bar { height: 7px; border-radius: 99px; background: var(--track); overflow: hidden; margin-top: 6px; }
.pk-bar i { display: block; height: 100%; background: var(--ok); }
.pk-wait { font: 600 9px var(--mono); letter-spacing: .12em; color: var(--busy); margin-top: 8px; }
.pk-wait:empty { display: none; }
.pk-sec { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 26px 0 0; }
.pk-sec h2 { margin: 0; font: 600 15px var(--sans); color: var(--text); }
.pk-sec > span { font: 500 9px var(--mono); letter-spacing: .14em; color: var(--text-2); }
.pk-sec .pk-key { margin-left: auto; display: flex; gap: 14px; flex-wrap: wrap; }
.pk-sec .pk-key i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; }
/* the camera table, read-only: nothing to drag, nothing to add */
.pk-table .gl-mrow:hover { background: none; }
.pk-chip { cursor: default; }
.pk-chip:hover { color: var(--text-2); border-color: var(--line-control); }
.pk-chip.is-packed { opacity: .55; }
.pk-tick { color: var(--ok); font-weight: 700; }
.pk-pin { cursor: default; }
.pk-pin:hover { background: none; }
.pk-pin.is-kit { border-style: dashed; color: var(--text-3); border-color: var(--line-control); }
.pk-none { font: 500 11px var(--mono); color: var(--text-3); padding-left: 4px; }
.pk-shared { background: color-mix(in srgb, var(--panel) 50%, transparent); }
.pk-sharedcell { grid-column: 2 / -1; }
.pk-sharedlabel { font: 500 9px var(--mono); letter-spacing: .14em; color: var(--text-2); }
.pk-cams { display: none; }
.pk-cam { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-top: 8px; }
.pk-camhead { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.pk-camhead em { margin-left: auto; font: 600 9px var(--mono); letter-spacing: .1em; color: var(--text-2); font-style: normal; }
.pk-camchips { display: flex; flex-wrap: wrap; gap: 5px; }
/* the pack list: a whole line is the tap target */
.pk-line { cursor: pointer; padding-top: 7px; padding-bottom: 7px; }
.pk-line .check { width: 18px; height: 18px; }
.pk-line:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.pk-by { font: 600 8px var(--mono); letter-spacing: .12em; color: var(--busy); border: 1px solid color-mix(in srgb, var(--busy) 45%, transparent); border-radius: 4px; padding: 1px 5px; flex: none; }
.pk-remove { flex: none; width: 24px; height: 24px; border: 0; background: none; color: var(--text-3); font-size: 16px; cursor: pointer; border-radius: 6px; }
.pk-remove:hover { color: var(--accent); background: var(--accent-wash); }
.pk-added { background: var(--panel); border: 1px dashed var(--line-dashed); border-radius: 10px; padding-bottom: 12px; align-self: start; }
.pk-added .gl-sheethead { border-bottom: 0; }
.pk-add { display: flex; gap: 8px; padding: 6px 14px 0; }
.pk-add .input { flex: 1; min-width: 0; }
.pk-add .pk-qty { flex: 0 0 64px; }
/* a phone, or any narrow window: cards per camera, bigger boxes */
@container (max-width: 760px) {
  .pk-table { display: none; }
  .pk-cams { display: block; margin-top: 10px; }
  .pk-head { flex-wrap: wrap; gap: 10px; }
  .pk-prog { min-width: 0; width: 100%; margin: 0; }
  .pk-sheets { grid-template-columns: minmax(0, 1fr); }
  .pk-line { padding: 10px 12px; }
  .pk-line .check { width: 22px; height: 22px; }
}
@media (max-width: 520px) {
  .pk-tabs { display: flex; }
  .pk-tab { flex: 1; justify-content: center; padding: 10px 8px; }
}

/* ---------- the pack list as a PDF: A4, ink on paper (Paper makes the file) ---------- */
.cs-page.pk-paper { display: block; height: auto; min-height: 1123px; background: #fff; padding: 44px 46px;
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif; font-size: 11px; line-height: 1.35; overflow: visible; }
.pk-paper h1 { margin: 0; font-size: 30px; letter-spacing: -.01em; line-height: 1.1; }
.pkp-mono { font-family: 'IBM Plex Mono', Menlo, monospace; font-size: 10px; letter-spacing: .12em; color: #555; text-transform: uppercase; }
.pkp-top { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2.5px solid #111; padding-bottom: 10px; }
.pkp-right { text-align: right; line-height: 1.6; }
.pkp-by { display: flex; gap: 24px; margin: 12px 0 16px; }
.pkp-by span { flex: 1; border-bottom: 1px solid #999; padding-bottom: 3px; }
.pk-paper h3 { font-size: 12px; margin: 16px 0 7px; letter-spacing: .08em; text-transform: uppercase; display: flex; gap: 12px; align-items: baseline; break-after: avoid; }
.pk-paper h3 small { font-family: 'IBM Plex Mono', Menlo, monospace; font-size: 8.5px; letter-spacing: .12em; color: #777; font-weight: 400; }
.pkp-m { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pkp-m th { font-family: 'IBM Plex Mono', Menlo, monospace; font-size: 8px; letter-spacing: .14em; color: #666; font-weight: 500; text-align: left; padding: 0 5px 5px; border-bottom: 1.5px solid #111; }
.pkp-m th:first-child { width: 17%; }
.pkp-m td { font-size: 10px; line-height: 1.35; padding: 6px 5px; border-bottom: 1px solid #d9d9d9; vertical-align: top; }
.pkp-m td + td, .pkp-m th + th { border-left: 1px solid #e6e6e6; }
.pkp-m tr { break-inside: avoid; }
.pkp-shared td { background: #f4f4f4; }
.pkp-cam { display: flex; gap: 6px; align-items: flex-start; font-weight: 700; }
.pkp-cam i { flex: none; width: 15px; height: 15px; border: 1.3px solid #111; border-radius: 50%; font: 700 8px 'IBM Plex Mono', Menlo, monospace; font-style: normal; display: inline-flex; align-items: center; justify-content: center; }
.pkp-cam i.is-kit { border-style: dashed; }
.pkp-it { display: block; }
.pkp-it + .pkp-it { margin-top: 2px; }
.pkp-rent { font-family: 'IBM Plex Mono', Menlo, monospace; font-size: 7px; letter-spacing: .08em; border: 1px solid #111; border-radius: 2px; padding: 0 2px; margin-left: 3px; }
.pkp-none { color: #aaa; }
.pkp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.pkp-ln { display: flex; gap: 7px; align-items: center; font-size: 10.5px; padding: 3px 0; border-bottom: 1px solid #eee; break-inside: avoid; }
.pkp-ln i, .pkp-blank i { width: 10px; height: 10px; border: 1.3px solid #111; border-radius: 2px; flex: none; }
.pkp-ln b { width: 22px; font-weight: 600; font-family: 'IBM Plex Mono', Menlo, monospace; font-size: 9px; }
.pkp-ln span { flex: 1; }
.pkp-ln em { font-style: normal; font-family: 'IBM Plex Mono', Menlo, monospace; font-size: 8.5px; color: #444; }
.pkp-cat { font-family: 'IBM Plex Mono', Menlo, monospace; font-size: 8px; letter-spacing: .14em; color: #777; margin: 8px 0 2px; }
.pkp-blank { height: 19px; border-bottom: 1px solid #bbb; display: flex; align-items: center; }
.pkp-foot { margin-top: 16px; display: flex; justify-content: space-between; }
@media print {
  .cs-page.pk-paper { width: 210mm; min-height: 297mm; height: auto; padding: 14mm 14mm; page-break-after: auto; break-after: auto; }
}
/* the gear page: who packs this festival, live */
.pk-who { display: inline-flex; align-items: center; gap: 8px; padding: 4px 11px 4px 4px; border: 1px solid var(--line-soft); border-radius: 99px;
  background: none; font: 600 12px var(--sans); color: var(--text); cursor: pointer; }
.pk-who:hover { border-color: var(--text-3); }
.pk-who em { font: 600 9px var(--mono); letter-spacing: .1em; color: var(--ok); font-style: normal; }
.gl-chip .pk-by { margin-left: 2px; padding: 0 4px; font-size: 7px; }
/* the sort bar on a phone: the buttons keep their words, the hint makes room */
@media (max-width: 520px) {
  .pp-sortwrap { flex-wrap: wrap; row-gap: 8px; }
  .pp-sorthint { display: none; }
  .pp-sortbtn { white-space: nowrap; }
}

/* ---------- a stage filmed on more than one day: the plan per day ---------- */
.plan-days { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 12px 0 12px; }
/* what is only there on another day: faint, and out of the way of the mouse */
.pin.is-otherday, .sb-area.is-otherday, .sb-pw.is-otherday { opacity: .28; filter: grayscale(1); pointer-events: none; }
/* ALL DAYS in EDIT: a version per day - still clicked, it opens on its day */
.pin.is-dayonly, .sb-area.is-dayonly, .sb-pw.is-dayonly { opacity: .5; }
.pin-label .pin-day { display: block; font: 600 8.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-top: 1px; }
.pin:hover .pin-day { color: var(--text-invert); }
.pos-day { font: 600 8.5px var(--mono); letter-spacing: .1em; color: var(--accent); margin-left: 6px; white-space: nowrap; }

/* the tool bar sits above the drawing, not over it */
.plan-wrap > .sb-tools { position: static; transform: none; align-self: flex-start; box-shadow: none; }
/* one row over the plan: the days, then what to show */
.plan-days .sb-see { margin: 0; }
.plan-day { display: inline-flex; align-items: center; gap: 7px; }
.plan-day .plan-day-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--day, var(--accent)); flex: none; }
.plan-day.is-on { border-color: var(--day, var(--accent)); color: var(--day, var(--accent)); background: color-mix(in srgb, var(--day, var(--accent)) 12%, transparent); }
.plan-day-ask { font-size: 12px; }
/* ALL DAYS: a spot, deck or plug that is only some days' wears its day's colour */
.pin.has-day .pin-dot { border-color: var(--day); color: var(--day); }
.pin.has-day .pin-day { color: var(--day); }
.sb-area.has-day { border-color: var(--day) !important; }
.sb-pw.has-day .sb-pw-dot { box-shadow: 0 0 0 2px var(--day); }
/* a stage drawing dragged over the sketch */
.plan-stage.is-drop { outline: 2px dashed var(--accent); outline-offset: -4px; }
.vn-card.is-folded .sb-list-h { padding-bottom: 12px; }

/* ---------- the close-ups under the drawing ---------- */
.cu-strip { border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px 14px; background: var(--panel); }
.cu-strip-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cu-strip-h b { font: 700 10px var(--mono); letter-spacing: .14em; color: var(--text-2); }
.cu-strip-h span { font: 500 9px var(--mono); letter-spacing: .12em; color: var(--text-3); }
.cu-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; align-items: start; }
.cu-card { border: 1px solid var(--line-control); border-radius: 8px; padding: 10px; background: var(--page); display: flex; flex-direction: column; gap: 8px; }
.cu-card.is-empty { border-style: dashed; }
.cu-card-h { display: flex; align-items: center; gap: 8px; }
.cu-card-h b { font-size: 13px; }
.cu-card-m { margin-left: auto; font: 500 9px var(--mono); letter-spacing: .12em; color: var(--text-3); white-space: nowrap; }
.cu-card-p { margin: 0; font-size: 12px; color: var(--text-3); line-height: 1.45; }
.cu-card-f { display: flex; gap: 6px; flex-wrap: wrap; }
.cu-thumb { position: relative; width: 100%; background: var(--panel); border-radius: 5px; overflow: hidden; cursor: zoom-in; }
.cu-thumb img { display: block; width: 100%; height: auto; }
.cu-thumb .cu-sk { position: absolute; inset: 0; }
.cu-thumb-dot { position: absolute; transform: translate(-50%, -50%); width: 17px; height: 17px; border-radius: 99px;
  border: 1.5px solid var(--day, var(--accent)); background: var(--page); color: var(--day, var(--accent)); font: 800 8.5px/14px var(--mono); text-align: center; }

/* editing a sketch: its parts as boxes to drag and size */
.cu-view.is-editing .plan-pins { opacity: .25; pointer-events: none; }
.cu-view.is-editing { cursor: default; }
.cu-parts { position: absolute; inset: 0; }
.cu-part { position: absolute; border: 1.5px dashed var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 3px;
  cursor: move; touch-action: none; }
.cu-part.is-live, .cu-part:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.cu-part-l { position: absolute; left: 4px; top: 2px; font: 700 8.5px var(--mono); letter-spacing: .1em; color: var(--accent); pointer-events: none; white-space: nowrap; }
.cu-part-h { position: absolute; width: 11px; height: 11px; background: var(--panel); border: 1.5px solid var(--accent); border-radius: 2px; touch-action: none; }
.cu-part-h.is-nw { left: -6px; top: -6px; cursor: nwse-resize; }
.cu-part-h.is-ne { right: -6px; top: -6px; cursor: nesw-resize; }
.cu-part-h.is-sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.cu-part-h.is-se { right: -6px; bottom: -6px; cursor: nwse-resize; }

/* a deck, floor space or plug in its own window: the panel's fields, without its title bar */
.sb-modal { width: min(440px, 100%); }
.sb-modal .sb-insp { border: 0; background: none; padding: 0; margin: 0; box-shadow: none; position: static; }
.sb-modal .sb-insp-h { display: none; }

/* decks, floor space and plugs inside a close-up */
.cu-build { position: absolute; inset: 0; overflow: hidden; }   /* what reaches past the booth is cut at its edge */
.pn-cu-build { position: absolute; inset: 0; overflow: hidden; }
.cu-build.is-off { opacity: .3; pointer-events: none; }
.cu-area { position: absolute; border-radius: 3px; transform-origin: center center; cursor: pointer; }
.cu-area.is-deck { background: var(--deck); border: 1.5px solid var(--deck-line); opacity: .92;
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 1px, transparent 1px 14px); }
.cu-area.is-ground { border: 1.5px dashed var(--deck-line); background-image: repeating-linear-gradient(45deg, rgba(138,102,64,.16) 0 1px, transparent 1px 7px); }
.cu-area.is-ghost { pointer-events: none; opacity: .7; }
.cu-area-t { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font: 700 10px var(--sans); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.cu-area.is-ground .cu-area-t { color: color-mix(in srgb, var(--deck-line) 55%, var(--text)); text-shadow: none; }
.cu-pw { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 4px; cursor: grab; z-index: 2; }
.cu-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.cu-tools-l { font: 600 9px var(--mono); letter-spacing: .14em; color: var(--text-3); margin-right: 4px; }
.cu-tools-h { margin-left: auto; font-size: 11.5px; color: var(--text-3); }

/* a deck or floor space picked in a close-up: its corners size it */
.cu-area.is-picked { outline: 2px solid var(--deck-sel, var(--accent)); outline-offset: 1px; }
.cu-h { position: absolute; width: 11px; height: 11px; background: var(--panel); border: 1.5px solid var(--deck-sel, var(--accent)); border-radius: 2px; z-index: 2; }
.cu-h.is-nw { left: -6px; top: -6px; cursor: nwse-resize; }
.cu-h.is-ne { right: -6px; top: -6px; cursor: nesw-resize; }
.cu-h.is-sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.cu-h.is-se { right: -6px; bottom: -6px; cursor: nwse-resize; }

/* a timetable through the kept saves */
.tt-hist { display: flex; flex-direction: column; }
.tt-hist-row { display: grid; grid-template-columns: 56px 170px 120px 170px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 4px; border-top: 1px solid var(--line); font-size: 12.5px; }
.tt-hist-row.is-drop { background: var(--accent-wash); }
.tt-hist-row.is-drop .tt-hist-n { color: var(--accent); font-weight: 600; }
.tt-hist-row .hist-sum { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* sets left behind by a removed or renamed stage */
.tt-stray { margin: 14px 0 4px; padding: 11px 14px; border: 1px solid var(--accent); border-radius: 9px; background: var(--accent-wash); display: flex; flex-direction: column; gap: 9px; }
.tt-stray-t { font-size: 13px; color: var(--text-2); }
.tt-stray-t b { color: var(--text); }
.tt-stray-a { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tt-stray-put { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); }
.tt-stray-put .select { width: auto; }

/* a booth or FOH with a close-up: on the plan it says so, and what is in it is drawn there */
.pin.is-inbox { display: none; }
.cu-see { position: absolute; z-index: 2; pointer-events: auto; cursor: zoom-in; border: 1.5px dashed var(--accent); border-radius: 3px;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent) 0 4px, transparent 4px 9px);
  display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0; transform-origin: center center; }
.cu-see span { font: 700 8.5px var(--mono); letter-spacing: .1em; color: var(--accent); white-space: nowrap; background: var(--page); padding: 1px 4px; border-radius: 3px; }
.cu-see:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }

.plan-day-note { font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--day); margin-left: 6px; }
.plan-day-note.is-ov { color: var(--text-3); }
.scope-note { display: flex; flex-direction: column; gap: 8px; }
.scope-note .scope-t { line-height: 1.5; }
.pos-unused { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.pos-unused-l { font: 600 9px var(--mono); letter-spacing: .1em; color: var(--text-3); }
.pos-unused .vn-chip b { color: var(--accent); margin-right: 2px; }
.plan-lock-b { font: 600 10px var(--mono); letter-spacing: .12em; padding: 0 12px; border: 0; background: transparent; color: var(--text-3); border-radius: 6px; cursor: pointer; min-height: 30px; }
.plan-lock-b.is-on { background: var(--text); color: var(--page); }
.plan-lock-b.is-on.is-edit { background: var(--accent); color: #fff; }
.form-grid.is-readonly, .sb-insp.is-readonly .sb-seg, .sb-insp.is-readonly .sb-chips, .sb-insp.is-readonly .sb-row { pointer-events: none; }
.form-grid.is-readonly input, .form-grid.is-readonly select, .form-grid.is-readonly textarea, .sb-insp.is-readonly .sb-in { opacity: .75; }
.ro-note { font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); align-self: center; }
.plan-day-more { margin-left: 2px; }

/* the ··· inside a day's square */
.plan-day .plan-day-dots { margin-left: 4px; padding: 0 5px; border-radius: 4px; letter-spacing: 1px; line-height: 1.4; color: inherit; opacity: .7; cursor: pointer; }
.plan-day .plan-day-dots:hover { opacity: 1; background: color-mix(in srgb, var(--day, var(--accent)) 22%, transparent); }

/* a camera opened on one day's plan: what an edit there means */
.split-note { font-size: 12.5px; color: var(--text-2); line-height: 1.5; padding: 9px 12px; border: 1px solid var(--line-control); border-radius: 8px; background: var(--page); }
.split-note b { color: var(--text); }
.sb-split { margin: 0 0 12px; }

/* ---------- crew window: in option / booked / add someone ---------- */
.modal.bk { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.bk-head { gap: 18px; align-items: center; }
.bk-head h3 { margin: 0; }
.bk-job { color: var(--text-2); font-weight: 500; }
.bk-vr { width: 1px; height: 24px; background: var(--line); flex: none; }
.bk-stats { display: flex; gap: 16px; }
.bk-stat { display: inline-flex; align-items: baseline; gap: 6px; font: 600 9.5px var(--mono); letter-spacing: .12em; color: var(--text-3); }
.bk-stat b { font: 650 17px var(--sans); letter-spacing: 0; }
.bk-stat.is-ok b { color: var(--ok); }
.bk-stat.is-opt b { color: var(--busy); }
.bk-stat.is-open b { color: var(--text-2); }
.bk-cost { font: 600 17px var(--mono); color: var(--ok); white-space: nowrap; }
.bk-cost small { font: 500 11px var(--sans); color: var(--danger); margin-left: 6px; }
.bk-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; min-height: 0; flex: 1; overflow: hidden; }
.bk-main { padding: 18px 22px 22px; overflow-y: auto; border-right: 1px solid var(--line); }
.bk-side { padding: 18px 18px; overflow-y: auto; background: rgba(0,0,0,.12); display: flex; flex-direction: column; }
.bk-sec { display: flex; align-items: center; gap: 9px; margin: 6px 0 10px; }
.bk-sec + .bk-card, .bk-sec + .bk-list { margin-top: 0; }
.bk-card + .bk-sec, .bk-list + .bk-sec { margin-top: 22px; }
.bk-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.bk-dot.is-opt { background: var(--busy); }
.bk-dot.is-ok { background: var(--ok); }
.bk-dot.is-open { background: var(--text-3); }
.bk-n { font: 600 10px var(--mono); color: var(--text-3); }
.bk-hint { font-size: 12px; color: var(--text-3); }
.bk-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bk .spacer { flex: 1; }
.bk-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bk-name { font: 620 14px var(--sans); color: var(--text); }
.bk-sub { font-size: 12px; color: var(--text-2); }
.bk-clash { font: 600 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--danger); margin-top: 2px; }
.bk-else { font-size: 11px; color: var(--text-3); }
.bk-more { width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text-2); letter-spacing: .1em; cursor: pointer; flex: none; }
.bk-more:hover { border-color: var(--line-control); color: var(--text); }
/* in option: a card of its own */
.bk-card { border: 1px solid rgba(250,204,21,.34); background: rgba(250,204,21,.12); border-radius: 12px; padding: 14px 16px 12px; margin-bottom: 12px; }
/* an open spot: the same card, nobody on it yet */
.bk-card.is-open { border: 1.5px dashed var(--line-control); background: var(--panel); }
.bk-card.is-filling { border-color: var(--ok); }
.ava.is-open { background: transparent; border: 1.5px dashed var(--line-control); color: var(--text-3); }
.status-pill.is-open { background: transparent; border: 1px dashed var(--line-control); color: var(--text-2); }
.bk-put.is-filling { border-color: var(--ok); color: var(--ok); }
.bk-total { font: 650 17px var(--mono); color: var(--ok); white-space: nowrap; }
.bk-total.is-none { color: var(--text-3); font: 500 11px var(--sans); }
.bk-fields { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 14px; align-items: flex-end; }
.bk-fields > .bk-f { flex: none; min-width: 0; }
.bk-fields > .bk-f.is-info { flex: 1 1 170px; max-width: 280px; }
.bk-fields > .bk-f.is-money { width: 96px; }
/* Function: which team(s) - Livesets, Aftermovie, Livestream, one or more */
.bk-jobs { display: flex; gap: 5px; flex-wrap: nowrap; }
.bk-job { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-control); background: var(--page); color: var(--text-3); font: 600 12.5px var(--sans); cursor: pointer; white-space: nowrap; }
.bk-job i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
.bk-job:hover { color: var(--text-2); }
.bk-job.is-livesets i { border-color: var(--accent); } .bk-job.is-aftermovie i { border-color: var(--am); } .bk-job.is-livestream i { border-color: #22d3ee; } .bk-job.is-shoot i { border-color: var(--text-2); }
.bk-job.is-on.is-livesets { color: #ff8a8e; border-color: var(--accent-line); background: var(--accent-wash); } .bk-job.is-on.is-livesets i { background: var(--accent); }
.bk-job.is-on.is-aftermovie { color: #ffb27a; border-color: var(--am-line); background: var(--am-wash); } .bk-job.is-on.is-aftermovie i { background: var(--am); }
.bk-job.is-on.is-livestream { color: #7ee6f5; border-color: rgba(34,211,238,.55); background: rgba(34,211,238,.10); } .bk-job.is-on.is-livestream i { background: #22d3ee; }
.bk-job.is-on.is-shoot { color: var(--text); border-color: var(--line-soft); } .bk-job.is-on.is-shoot i { background: var(--text-2); }
.bk-job-team { width: auto !important; }
.bk-jobt.is-livesets { color: #ff8a8e; } .bk-jobt.is-aftermovie { color: #ffb27a; } .bk-jobt.is-livestream { color: #7ee6f5; }
:root[data-theme="light"] .bk-job.is-on.is-livesets, :root[data-theme="light"] .bk-jobt.is-livesets { color: var(--accent); }
:root[data-theme="light"] .bk-job.is-on.is-aftermovie, :root[data-theme="light"] .bk-jobt.is-aftermovie { color: var(--am); }
:root[data-theme="light"] .bk-job.is-on.is-livestream, :root[data-theme="light"] .bk-jobt.is-livestream { color: #0e7490; }
.bk-f label { display: block; font: 600 9.5px var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.bk-f .select, .bk-f .book-team { width: 100%; min-width: 0; }
.bk-f .select, .bk-f .book-team, .bk-card .bk-in, .bk-extra .select { height: 34px; font-size: 13px; }
.bk-add-fn { color: var(--text-2); }
.bk-add-fn:hover { color: var(--text); }
.bk-f.is-days .book-days { gap: 6px; }
.bk-card .dpill { min-width: 52px; height: 32px; font: 650 11px var(--mono); letter-spacing: .08em; }
.bk-money { display: block; }
.bk-money .bk-in, .bk-in { width: 100%; }
.bk-money .bk-in { text-align: right; padding-left: 22px; }
.bk-extra { flex: 1 1 100%; display: grid; grid-template-columns: 14px minmax(0, 1.3fr) minmax(0, 2.4fr) 96px 30px; gap: 12px; align-items: center; }
.bk-fields.no-rates .bk-extra { grid-template-columns: 14px minmax(0, 1.3fr) minmax(0, 2.4fr) 30px; }
.bk-fields > .bk-f.is-note { flex: 1 1 200px; }
/* wide enough: the first line and the extra lines share one grid - Function
   under Function, Extra info under Extra info, the amount under the fee */
@media (min-width: 901px) {
  .bk-fields { display: grid; grid-template-columns: max-content minmax(150px, 1fr) minmax(140px, 1.5fr) max-content 96px 96px; gap: 10px 14px; }
  .bk-fields.no-rates { grid-template-columns: max-content minmax(150px, 1fr) minmax(140px, 1.5fr) max-content 30px; }
  .bk-fields > .bk-f.is-info { max-width: none; }
  .bk-fields > .bk-f.is-money { width: auto; }
  .bk-fields > .bk-extra { display: contents; }
  .bk-extra > .bk-plus { grid-column: 1; justify-self: end; align-self: center; }
  .bk-extra > .select { grid-column: 2; }
  .bk-extra > .bk-in { grid-column: 3; }
  .bk-extra > .bk-money { grid-column: 5; }
  .bk-extra > .bk-x { grid-column: 6; align-self: center; }
  .bk-fields.no-rates .bk-extra > .bk-x { grid-column: 5; }
}
.bk-plus { color: var(--text-3); text-align: center; }
.bk-x { width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text-3); font-size: 16px; cursor: pointer; }
.bk-x:hover { color: var(--text); border-color: var(--line-control); }
.bk-add-fn { margin-top: 10px; font-size: 12.5px; }
/* booked: one line each */
.bk-list { border: 1px solid var(--line); border-radius: 12px; }
.bk-line { display: grid; grid-template-columns: minmax(200px, 1.1fr) minmax(0, 1.6fr) auto 110px auto; gap: 16px; align-items: center; padding: 11px 14px; }
.bk-line + .bk-line { border-top: 1px solid var(--line); }
.bk-line:hover { background: var(--raised); }
.bk-fn { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13px; }
.bk-fn em { font-style: normal; color: var(--text-2); }
.bk-fn-x { font-size: 12px; color: var(--text-2); }
.bk-fn-x b { color: var(--text); font-weight: 500; }
.bk-mini { display: flex; gap: 5px; }
.bk-d { font: 650 10px var(--mono); letter-spacing: .08em; padding: 4px 7px; border-radius: 6px; background: var(--accent-soft); color: #ff8a8f; }
.bk-d.is-build, .bk-d.is-debuild { background: transparent; border: 1px dashed var(--accent-line); }
.bk-amt { text-align: right; font: 600 13.5px var(--mono); color: var(--text); white-space: nowrap; }
.bk-amt.is-none { color: var(--text-3); font-weight: 400; }
.bk-amt small { display: block; font: 500 11px var(--sans); color: var(--text-3); margin-top: 3px; }
.bk-acts { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.bk-sum { display: flex; justify-content: flex-end; gap: 24px; padding: 12px 14px 0; font-size: 12px; color: var(--text-2); }
.bk-sum b { font: 600 13px var(--mono); color: var(--text); margin-left: 8px; }
.bk-sum b.is-total { color: var(--ok); }
/* add someone */
.bk-search { margin: 10px 0; }
.bk-search .input { width: 100%; }
.bk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.bk-pool { display: flex; flex-direction: column; }
.bk-person { display: flex; align-items: center; gap: 11px; padding: 9px 6px; border-radius: 9px; }
.bk-person + .bk-person { border-top: 1px solid var(--line); }
.bk-person .bk-id { flex: 1; }
.bk-person .bk-name { font-size: 13px; }
.bk-person .bk-sub { font-size: 11.5px; }
.bk-put { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-control); background: transparent; color: var(--text); font-size: 16px; cursor: pointer; flex: none; }
.bk-put:hover { background: var(--text); color: var(--page); }
.bk-new { margin-top: 12px; padding: 10px; border: 1px dashed var(--line-control); border-radius: 9px; background: transparent; color: var(--text-2); font-size: 12.5px; cursor: pointer; }
.bk-new:hover { color: var(--text); border-color: var(--text-2); }
@media (max-width: 900px) {
  .bk-body { grid-template-columns: 1fr; overflow-y: auto; }
  .bk-main { border-right: 0; overflow: visible; }
  .bk-fields { grid-template-columns: 1fr 1fr; }
  .bk-line { grid-template-columns: 1fr auto; }
}

/* ---------- timetable: the night as a running order ---------- */
.tt-meta-star { color: #ffb020; }
.tt-days { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 16px; }
.tt-day { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 210px; padding: 10px 16px; border: 1px solid var(--line-control); border-radius: 12px; background: transparent; color: var(--text-2); cursor: pointer; text-align: left; }
.tt-day b { font: 600 14px var(--sans); color: var(--text-list); }
.tt-day span { font: 500 10.5px var(--mono); letter-spacing: .05em; color: var(--text-3); }
.tt-day:hover { border-color: var(--line-soft); }
.tt-day.is-on { border-color: var(--accent); background: var(--accent-wash); }
.tt-day.is-on b { color: var(--text); }
.tt-day.is-on span { color: var(--text-2); }
.tt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.tt-stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.tt-stage { padding: 0; overflow: visible; }
.tt-stage-h { display: flex; align-items: center; gap: 8px; padding: 14px 18px 10px; }
.tt-stage-h b { font: 700 11px var(--mono); letter-spacing: .14em; color: var(--text); }
.tt-glance { font: 600 10px var(--mono); letter-spacing: .14em; color: var(--text-3); }
.tt-stage-h .spacer { flex: 1; }
.tt-count { font: 500 11px var(--mono); color: var(--text-3); }
.tt-count .is-rec { color: var(--accent); }
.tt-count .is-star { color: #ffb020; }
.tt-night { padding: 0 18px 12px; border-bottom: 1px solid var(--line); }
.tt-bar { position: relative; height: 26px; border-radius: 6px; background: #0b0e13; overflow: hidden; }
.tt-bar i { position: absolute; top: 0; bottom: 0; background: rgba(237,28,36,.58); border-right: 1px solid #0b0e13; }
.tt-bar i.is-alt { background: rgba(237,28,36,.40); }
.tt-bar i.is-off { background: #2e2e33; }
.tt-bar i.is-moment { background: #ffb020; min-width: 3px; z-index: 1; }
.tt-ticks { position: relative; height: 15px; margin-top: 5px; }
.tt-ticks span { position: absolute; transform: translateX(-50%); font: 500 10px var(--mono); color: var(--text-3); white-space: nowrap; }
.tt-ticks span.is-edge { transform: none; }
.tt-ticks span.is-end { transform: translateX(-100%); }
.tt-ticks span.is-mid { color: var(--text); font-weight: 700; }
.tt-cols, .tt-row { display: grid; grid-template-columns: 132px 124px minmax(0, 1fr) auto 30px 34px; gap: 14px; align-items: center; padding: 0 18px; }
.tt-cols { padding-top: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.tt-cols span { font: 600 9.5px var(--mono); letter-spacing: .13em; color: var(--text-3); }
.tt-row { min-height: 44px; border-top: 1px solid var(--line); }
.tt-list > :first-child { border-top: 0; }
.tt-row:hover { background: var(--raised); }
.tt-time { font: 600 13px var(--mono); color: var(--text); white-space: nowrap; }
.tt-to { color: var(--text-2); font-weight: 500; }
.tt-len { --tt-lenw: 88px; display: flex; align-items: center; gap: 8px; }
/* a narrower window: tighter columns and a shorter length bar, so the act keeps its room */
@media (max-width: 1440px) {
  .tt-grid { grid-template-columns: minmax(0, 1fr) 270px; }
  .tt-cols, .tt-row { grid-template-columns: 108px 80px minmax(0, 1fr) auto 26px 30px; gap: 10px; }
  .tt-len { --tt-lenw: 44px; }
  .tt-moment { grid-template-columns: 108px minmax(0, 1fr) auto 26px 30px; gap: 10px; }
  .tt-cols.am-row, .tt-row.am-row { grid-template-columns: 108px 80px minmax(0, 1fr) 96px 28px 66px 28px; }
  .tt-row.am-row .am-pill { width: 92px; }
  .tt-row.am-row .am-pill.is-live { width: 62px; }
}
.tt-len i { display: block; height: 5px; border-radius: 3px; background: rgba(237,28,36,.6); }
.tt-len em { font: 500 11px var(--mono); font-style: normal; color: var(--text-2); }
.tt-act { display: flex; align-items: baseline; gap: 8px; min-width: 0; background: none; border: 0; padding: 0; text-align: left; color: var(--text); cursor: pointer; }
.tt-act b { font: 600 14px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-act small { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-act:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--text-3); }
.tt-row.is-norec .tt-time, .tt-row.is-norec .tt-act b { color: var(--text-2); }
.tt-row.is-norec .tt-len i { background: #2e2e33; }
.tt-recc { display: flex; align-items: center; gap: 6px; justify-self: start; }
.tt-rec { display: inline-flex; align-items: center; gap: 7px; font: 700 9.5px var(--mono); letter-spacing: .12em; color: var(--accent); padding: 5px 10px; border-radius: 999px; border: 1px solid var(--accent-line); background: var(--accent-wash); cursor: pointer; white-space: nowrap; }
.tt-rec::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.tt-rec.is-off { color: var(--text-3); border-color: var(--line-control); background: transparent; }
.tt-rec.is-off::before { width: 5px; height: 5px; background: transparent; border: 1.5px solid var(--text-3); }
.tt-rec:hover { border-color: var(--accent); }
.tt-star { background: none; border: 0; color: var(--text-3); font-size: 16px; cursor: pointer; padding: 0; }
.tt-star.is-on { color: #ffb020; }
.tt-star:hover { color: #ffb020; }
.tt-more { width: 30px; height: 28px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--text-3); letter-spacing: .1em; cursor: pointer; }
.tt-more:hover, .tt-row:hover .tt-more, .tt-moment:hover .tt-more { color: var(--text); }
.tt-more:hover { border-color: var(--line-control); }
.tt-moment { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto 30px 34px; gap: 14px; align-items: center; min-height: 36px; padding: 0 18px; border-top: 1px solid var(--line); background: rgba(255,176,32,.10); }
.tt-moment .tt-time, .tt-moment .tt-to { color: #ffb020; }
.tt-moment .tt-to { opacity: .75; }
.tt-mname { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font: 700 11.5px var(--mono); letter-spacing: .13em; color: #ffb020; text-transform: uppercase; }
.tt-mname span { margin-left: 10px; font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--text-2); }
.tt-moment.is-norec { background: rgba(255,176,32,.05); }
.tt-midnight { display: flex; align-items: center; gap: 12px; padding: 9px 18px; font: 600 10px var(--mono); letter-spacing: .14em; color: var(--text-3); border-top: 1px solid var(--line); }
.tt-midnight::before, .tt-midnight::after { content: ''; flex: 1; height: 1px; background: var(--line-control); }
.tt-midnight + * { border-top: 0; }
/* the day panel */
.tt-side { padding: 18px; position: sticky; top: 12px; }
.tt-lbl { font: 600 10px var(--mono); letter-spacing: .14em; color: var(--text-3); }
.tt-lbl.is-rec { color: var(--accent); }
.tt-big { margin: 8px 0 10px; font: 700 22px var(--mono); color: var(--text); }
.tt-big small { font: 500 12px var(--sans); color: var(--text-2); margin-left: 8px; }
.tt-big.is-none { font: 500 14px var(--sans); color: var(--text-3); }
.tt-kv { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.tt-kv b { font: 600 13px var(--mono); color: var(--text); }
.tt-kv b.is-star { color: #ffb020; }
/* ---- now on the timetable (show day) ---- */
.tt-day { position: relative; }
.tt-day span.tt-today { position: absolute; top: 10px; right: 12px; font: 700 9.5px var(--mono); letter-spacing: .14em; color: #fff; background: var(--accent); padding: 3px 7px; border-radius: 999px; }
.tt-night.has-now { position: relative; }
.tt-bar i.is-run { box-shadow: inset 0 0 0 2px rgba(255,255,255,.85); z-index: 1; }
.tt-bar .tt-played { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(0,0,0,.5); z-index: 2; pointer-events: none; }
.tt-nowline { position: absolute; top: -5px; height: 36px; width: 0; margin-left: -1px; border-left: 2px solid var(--accent); z-index: 3; box-shadow: 0 0 8px rgba(237,28,36,.6); pointer-events: none; }
.tt-nowline::before { content: ""; position: absolute; left: -5px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.tt-nowtag { position: absolute; top: 35px; transform: translateX(-50%); font: 700 10px var(--mono); line-height: 14px; color: #fff; background: var(--accent); padding: 1px 6px; border-radius: 4px; z-index: 3; }
.tt-row.is-now, .tt-moment.is-now { background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--accent); }
.tt-moment.is-now { background: linear-gradient(90deg, rgba(237,28,36,.16), rgba(255,176,32,.10)); }
.tt-row.is-past, .tt-moment.is-past { opacity: .5; }
.tt-act .tt-onnow, .tt-mname .tt-onnow { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; font: 700 9.5px var(--mono); letter-spacing: .12em; color: #fff; background: var(--accent); padding: 3px 8px; border-radius: 999px; white-space: nowrap; align-self: center; }
.tt-onnow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.tt-act .tt-left, .tt-mname .tt-left { margin-left: 0; font: 500 10.5px var(--mono); letter-spacing: .02em; color: var(--text-2); white-space: nowrap; align-self: center; }
.tt-mname .tt-left { margin-left: 8px; }
.tt-nowbox { margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--accent-line); border-radius: 12px; background: var(--accent-wash); }
.tt-nowbox-h { display: flex; align-items: center; gap: 8px; font: 700 10px var(--mono); letter-spacing: .14em; color: var(--accent); margin-bottom: 8px; }
.tt-nowbox-h::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.tt-nowbox-r { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 4px 0; font: 500 13px var(--sans); color: var(--text); }
.tt-nowbox-r span { font: 600 10px var(--mono); letter-spacing: .1em; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-nowbox-r b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-nowbox-r em { font: 500 10.5px var(--mono); font-style: normal; color: var(--text-2); }
.tt-recbox { margin-top: 12px; padding: 12px; border: 1px solid var(--accent-line); background: var(--accent-wash); border-radius: 10px; }
.tt-recbox-h { display: flex; align-items: center; }
.tt-recbox-h .spacer { flex: 1; }
.tt-recbox-h b { font: 600 13px var(--mono); }
.tt-rectime { margin: 8px 0 2px; font: 500 12px var(--mono); color: var(--text-2); letter-spacing: .04em; }
.tt-rectime b { font: 600 22px var(--mono); color: var(--text); letter-spacing: 0; }
.tt-meter { height: 6px; border-radius: 3px; background: #2e2e33; margin: 10px 0; overflow: hidden; }
.tt-meter i { display: block; height: 100%; background: var(--accent); }
.tt-seg { display: flex; gap: 6px; }
.tt-seg button { flex: 1; font: 600 10.5px var(--mono); letter-spacing: .08em; padding: 7px; border-radius: 7px; border: 1px solid var(--line-control); background: transparent; color: var(--text-2); cursor: pointer; }
.tt-seg button.is-on { background: var(--text); color: var(--page); border-color: var(--text); }
.tt-km { margin-top: 16px; display: flex; flex-direction: column; }
.tt-km-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; background: none; border: 0; color: var(--text); font-size: 13px; text-align: left; cursor: pointer; }
.tt-km-row i { font-style: normal; color: #ffb020; }
.tt-km-t { font: 600 12px var(--mono); color: var(--text-2); width: 46px; }
.tt-add { margin-top: 14px; width: 100%; padding: 10px; border: 1px dashed var(--line-control); border-radius: 10px; background: transparent; color: var(--text-2); font-size: 13px; cursor: pointer; }
.tt-add:hover { color: var(--text); border-color: var(--text-2); }
@media (max-width: 1000px) {
  .tt-grid { grid-template-columns: 1fr; }
  .tt-side { position: static; }
  .tt-cols { display: none; }
  .tt-row { grid-template-columns: 110px minmax(0, 1fr) auto 30px 34px; }
  .tt-row .tt-len { display: none; }
  .tt-row.am-row { grid-template-columns: 110px minmax(0, 1fr) auto 30px auto 34px; }
}

/* ---------- shooting schedule: a colour per person ---------- */
.ds-head { align-items: center; gap: 10px; margin-bottom: 12px; }
.ds-chip { font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); padding: 5px 10px; border: 1px solid var(--line-control); border-radius: 999px; white-space: nowrap; }
.ds-chip.is-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.ds-chip.is-warn { color: var(--danger); border-color: var(--danger-line); }
.ds-pill { font: 600 12px var(--sans); letter-spacing: 0; padding: 7px 12px; border-radius: 8px; border-color: var(--line-control); color: var(--text); }
.ds-lbl { font: 600 10px var(--mono); letter-spacing: .14em; color: var(--text-3); margin-right: 4px; }
.ds-crew { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.ds-who-chip { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px var(--sans); color: var(--text); padding: 5px 11px 5px 8px; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.ds-who-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.ds-who-chip em { font: 500 10.5px var(--mono); font-style: normal; color: var(--text-2); }
.ds-who-chip:hover { border-color: var(--c); }
.ds-who-chip.is-on { background: var(--c); border-color: var(--c); color: #0f0f10; }
.ds-who-chip.is-on i { background: #0f0f10; }
.ds-who-chip.is-on em { color: rgba(14,17,22,.7); }
/* ---- now on the schedule (show day) ---- */
.ds-live { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; }
.ds-live i, .dt-today i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.day-tab .dt-today { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-weight: 600; }
.ds-who-chip { position: relative; }
.ds-who-chip.is-live { border-color: var(--accent-line); }
.ds-live-dot { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--page), 0 0 0 5px rgba(237,28,36,.28); }
.ds-onnow { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font: 600 10px var(--mono); letter-spacing: .12em; color: var(--accent); white-space: nowrap; }
.ds-onnow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(237,28,36,.25); }
.ds-now { position: absolute; left: 0; right: 0; height: 0; margin-top: -1px; border-top: 2px solid var(--accent); z-index: 2; pointer-events: none; box-shadow: 0 0 10px rgba(237,28,36,.55); }
.ds-now::after { content: ""; position: absolute; right: -1px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.ds-now span { position: absolute; left: 0; top: -10px; font: 700 10.5px var(--mono); letter-spacing: .04em; line-height: 14px; color: #fff; background: var(--accent); padding: 2px 6px; border-radius: 5px; }
/* the names and times stay readable on top of the line */
.ds-card.has-now .ds-shift-top, .ds-card.has-now .ds-shift > .ds-when, .ds-card.has-now .ds-set-line, .ds-card.has-now .ds-set-time {
  position: relative; z-index: 3; text-shadow: 0 1px 2px var(--page), 0 0 4px var(--page); }
.ds-groups { display: flex; gap: 6px; min-width: 900px; margin-bottom: 2px; }
.ds-grp { flex: none; font: 700 10px var(--mono); letter-spacing: .15em; color: var(--text-3); padding-bottom: 6px; border-bottom: 1px solid var(--line-control); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-grp.is-sets { width: 260px; }
/* column heads: name, then camera and cards as tags, then the shift length */
.ds-colhead { align-items: flex-start; padding-top: 10px; padding-bottom: 10px; }
.ds-sets-head { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; align-self: flex-end; font: 400 12px var(--sans); letter-spacing: 0; color: var(--text-2); }
.ds-sets-head b { color: var(--text); font-weight: 600; }
.ds-sets-head b.is-star { color: #ffb020; }
.ds-poshead { min-width: 150px; gap: 7px; }
.ds-posname { font: 650 13px var(--sans); color: var(--text); white-space: normal; line-height: 1.25; }
.hd-line { align-items: flex-start; min-height: 32px; }
.hd-letter { width: 19px; height: 19px; font-size: 9px; border-width: 1.5px; }
.ds-tags { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.ds-tag { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; font: 550 11px var(--sans); color: var(--text); background: rgba(255,255,255,.06); padding: 3px 7px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-tag.is-card { background: transparent; border: 1px solid var(--line-control); color: var(--text-2); }
.ds-tag.is-card.is-short { border-color: var(--accent-line); color: var(--accent); }
.ds-cardico { flex: none; width: 8px; height: 10px; border: 1.3px solid currentColor; border-radius: 1px; clip-path: polygon(0 0, 65% 0, 100% 28%, 100% 100%, 0 100%); opacity: .7; }
.ds-posspec { font: 400 12px var(--sans); letter-spacing: 0; color: var(--text-2); align-items: center; }
.ds-posspec b { color: var(--text); font-weight: 600; }
.ds-posspec em { font-style: normal; }
.ds-posspec.is-relay em { color: var(--accent); }
.ds-posspec-input { width: 44px; font: 600 11.5px var(--mono); padding: 2px 6px; border-radius: 6px; border-color: var(--line-control); background: var(--page); }
.ds-posgroup { font: 500 11px var(--sans); letter-spacing: 0; }
.fc-head { gap: 7px; padding-right: 6px; }
.fc-name { font: 650 12.5px var(--sans); color: var(--text); white-space: normal; line-height: 1.25; align-items: flex-start; min-height: 32px; }
/* sets: recorded solid, not recorded dashed and grey, the key set yellow */
.ds-set.is-off { background: transparent; border: 1px dashed rgba(255,255,255,.1); }
.ds-set.is-key { background: rgba(255,176,32,.12); border: 1px solid rgba(255,176,32,.55); }
.ds-set.is-key .ds-set-name { color: #ffb020; }
.ds-set.is-key .ds-set-time { color: var(--text-2); }
.ds-set.is-key .ds-set-dur { color: #ffb020; border-color: rgba(255,176,32,.45); }
.ds-col, .rail-cell { min-width: 150px; }
/* a shift in its person's colour */
.ds-shift.has-c { background: color-mix(in srgb, var(--c) 20%, var(--panel)); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); border-left: 4px solid var(--c); }
.ds-shift.has-c:hover { border-color: var(--c); }
.ds-shift.has-c .ds-dur { border-color: color-mix(in srgb, var(--c) 45%, transparent); color: var(--text); }
.ds-shift .ds-when { color: var(--text-2); }
/* breaks: a faint hatch, no words */
.ds-dark:not(.is-unstaffed) { background: repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 6px, transparent 6px 12px); border-color: transparent; }
/* fixed cams: who starts and stops, with their colour */
.fc-by, .fc-stop { color: var(--text); }
.fc-by b, .fc-stop b { font: 600 11px var(--sans); letter-spacing: 0; }
.fc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); margin-left: auto; flex: none; }
.fc-by.is-empty, .fc-stop.is-empty { color: var(--text-3); }
/* following one person: everyone else steps back */
.ds-card.is-following .ds-shift:not(.is-me), .ds-card.is-following .fc-by:not(.is-me), .ds-card.is-following .fc-stop:not(.is-me) { opacity: .22; }
.ds-card.is-following .ds-shift.is-me { box-shadow: 0 0 0 2px var(--c); }
/* the legend: what the colours mean, in a line */
.ds-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; font: 400 12px var(--sans); letter-spacing: 0; text-transform: none; color: var(--text-2); }
.ds-legend span { display: inline-flex; align-items: center; gap: 7px; }
.ds-legend i { display: inline-block; width: 18px; height: 12px; border-radius: 3px; flex: none; }
.ds-legend .lg-shift { background: color-mix(in srgb, #5b8def 30%, var(--panel)); border-left: 3px solid #5b8def; }
.ds-legend .lg-break { border: 1px solid var(--line-control); background: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 3px, transparent 3px 6px); }
.ds-legend .lg-fixed { background: color-mix(in srgb, var(--ok) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); }
.ds-legend .lg-key { background: rgba(255,176,32,.15); border: 1px solid rgba(255,176,32,.55); }
.ds-legend .lg-off { border: 1px dashed rgba(255,255,255,.25); }
.ds-legend .lg-swap { height: 0; border-top: 1px dashed var(--accent); border-radius: 0; }

.ds-shift:not(.is-short) .ds-when { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.ds-shift:not(.is-short) .ds-when .ds-dur { font-size: 9.5px; }

/* ---------- gear list: suppliers on top, per camera | pack lists ---------- */
.gl-title { align-items: flex-start; }
.gl-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gl-mchip { font: 600 10.5px var(--mono); letter-spacing: .06em; padding: 5px 10px; border: 1px solid var(--line-control); border-radius: 999px; color: var(--text-2); }
.gl-mchip.is-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.gl-mchip.is-warn { color: var(--accent); border-color: var(--accent-line); }
.gl-more { letter-spacing: .1em; color: var(--text-2); }
.gl-sups { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 14px; }
.gl-sups > .gl-sup { flex: 1 1 210px; }
.gl-sups > .gl-sup.is-new { flex: 0 0 130px; }
.gl-sup { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 96px; padding: 12px 14px; border-radius: 12px; cursor: pointer; text-align: left;
  background: var(--panel); border: 1px solid var(--line-control); color: var(--text); font: inherit; }
.gl-sup:hover { border-color: color-mix(in srgb, var(--s) 60%, transparent); }
.gl-sup.is-focus { border-color: var(--s); box-shadow: 0 0 0 1px var(--s); }
.gl-sup.is-over, .gl-sup.is-live { border-style: dashed; border-color: var(--s); }
.gl-sup .gl-lanetop { display: flex; align-items: center; gap: 8px; }
.gl-sq { width: 10px; height: 10px; border-radius: 3px; background: var(--s); flex: none; }
.gl-sup .gl-lanename { font: 650 14.5px var(--sans); color: var(--text); }
.gl-kind { margin-left: auto; font: 600 9.5px var(--mono); letter-spacing: .1em; color: var(--text-3); }
.gl-sup .gl-lanecog { margin-left: 2px; }
.gl-supd { font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.gl-supd b { color: var(--text); font-weight: 600; }
.gl-supd.is-quiet { color: var(--text-3); }
.gl-supd.is-small { font-size: 11.5px; }
.gl-supd.is-ok { color: var(--ok); }
.gl-sup .gl-bar { height: 5px; border-radius: 3px; background: var(--track); overflow: hidden; }
.gl-sup .gl-bar i { display: block; height: 100%; background: var(--ok); }
.gl-sup .gl-lanestatus { align-self: flex-start; margin-top: 2px; }
.gl-sup.is-unsourced.is-settled { border: 1px dashed var(--line-control); background: transparent; --s: #63636b; }
.gl-sup.is-unsourced .gl-lanename { color: var(--text); }
.gl-sup.is-unsourced.is-open-items { border-color: var(--accent-line); background: var(--accent-wash); }
.gl-sup .gl-laneact { align-self: flex-start; }
.gl-sup.is-new { border-style: dashed; background: transparent; align-items: center; justify-content: center; color: var(--text-2); font-size: 13px; }
.gl-sup.is-new:hover { color: var(--text); border-color: var(--text-2); }
.gl-pickbar { display: flex; align-items: center; gap: 8px; margin: -4px 0 12px; padding: 8px 12px; border: 1px solid var(--accent-line); background: var(--accent-wash); border-radius: 10px; font-size: 13px; color: var(--text-2); }
.gl-pickbar b { color: var(--text); }
.gl-pickbar .btn { margin-left: auto; }
.gl-tabs { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.gl-tab { font: 500 13.5px var(--sans); padding: 8px 14px; border-radius: 9px; border: 0; background: transparent; color: var(--text-2); cursor: pointer; }
.gl-tab em { font: 600 10.5px var(--mono); font-style: normal; margin-left: 6px; opacity: .7; }
.gl-tab.is-on { background: var(--text); color: var(--page); font-weight: 600; }
.gl-tabs .spacer { flex: 1; }
.gl-hint { font-size: 12px; color: var(--text-3); }
.gl-hint b { color: var(--text); }
.gl-filters { display: flex; gap: 6px; }
.gl-filter { font-size: 12.5px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-control); background: transparent; color: var(--text-2); cursor: pointer; }
.gl-filter.is-on { background: var(--text); color: var(--page); border-color: var(--text); }
/* the table */
.gl-card { margin-top: 0; background: var(--panel); border-radius: 14px; }
.gl-mhead { padding-top: 12px; padding-bottom: 12px; }
.gl-grp { display: flex; align-items: center; gap: 8px; padding: 14px 18px 4px; font: 700 10px var(--mono); letter-spacing: .16em; color: var(--text-3); border-top: 1px solid var(--line); }
.gl-grp em { font-style: normal; opacity: .7; }
.gl-grp + .gl-block .gl-mrow { border-top: 0; }
.gl-chip { background: color-mix(in srgb, var(--s) 9%, var(--panel)); border: 1px solid color-mix(in srgb, var(--s) 32%, transparent); border-left: 3px solid var(--s); color: var(--text); }
.gl-chip:hover { border-color: color-mix(in srgb, var(--s) 70%, transparent); border-left-color: var(--s); }
.gl-chip.is-crew { border-style: dashed; border-left-style: solid; }
.gl-chip.is-none { border-style: dashed; border-left: 3px solid var(--accent); color: var(--text-2); }
.gl-chip.is-dim { opacity: .25; }
.gl-chip .gl-cdot { display: none; }
.gl-emptycell { display: inline-flex; align-items: center; gap: 4px; }
.gl-dash { font-style: normal; color: var(--text-3); }
.gl-mrow:hover .gl-dash, .gl-msub:hover .gl-dash { display: none; }
.gl-msub.is-alike { align-items: center; }
.gl-alike { grid-column: 2 / -1; font-size: 12px; font-style: italic; color: var(--text-3); padding: 2px 0; }
.gl-key { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; font-size: 12px; color: var(--text-2); }
.gl-key span { display: inline-flex; align-items: center; gap: 6px; }
.gl-key i { width: 14px; height: 10px; border-radius: 3px; background: var(--s); }
.gl-key .is-none i { background: transparent; border: 1px dashed var(--accent); }
/* the pack lists */
.gl-packs { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.gl-packmain, .gl-packside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.gl-pack { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; padding: 0; margin: 0; }
.gl-pack .gl-sheethead { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.gl-pack .gl-sheetname { font: 700 16px var(--sans); color: var(--text); }
.gl-pack .gl-sheetsub { font: 600 9.5px var(--mono); letter-spacing: .1em; color: var(--text-3); }
.gl-pack .gl-sheetcount { margin-left: auto; font-size: 12px; color: var(--text-2); }
.gl-pack .gl-sheetcount b { font: 700 15px var(--mono); color: var(--text); margin-right: 3px; }
.gl-sheetbar { height: 5px; background: var(--track); }
.gl-sheetbar i { display: block; height: 100%; background: var(--ok); }
.gl-packcols { columns: 2 280px; column-gap: 28px; padding: 4px 18px 16px; }
.gl-packside .gl-packcols { columns: 1; }
.gl-catgrp { break-inside: avoid; padding-top: 8px; }
.gl-pack .gl-cat { font: 700 11px var(--mono); letter-spacing: .14em; color: var(--text); margin: 8px 0 4px; }
.gl-pack .gl-line { display: grid; grid-template-columns: 22px 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 13.5px; }
.gl-pack.is-unsourced .gl-line, .gl-pack .gl-line:not(:has(.gl-box)) { grid-template-columns: 34px minmax(0, 1fr) auto; }
.gl-box { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border-radius: 5px; border: 2px solid var(--line-control); cursor: pointer; display: grid; place-items: center; }
.gl-box:checked { background: var(--ok-fill); border-color: var(--ok-fill); }
.gl-box:checked::after { content: '\2713'; color: #fff; font-size: 11px; font-weight: 800; }
.gl-pack .gl-qty { font: 600 12px var(--mono); color: var(--text-2); }
.gl-pack .gl-what { min-width: 0; color: var(--text); }
.gl-pack .gl-line.is-done .gl-what { color: var(--text-2); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); }
.gl-pack .gl-for { margin-left: 8px; font: 600 9.5px var(--mono); letter-spacing: .06em; color: var(--text-3); border: 1px solid var(--line-control); border-radius: 4px; padding: 1px 5px; }
.gl-pack .gl-cams { display: flex; gap: 3px; }
.gl-packnone { padding: 14px 18px; font-size: 13px; color: var(--text-2); line-height: 1.6; }
.gl-packnone b { color: var(--text); }
@media (max-width: 1000px) { .gl-packs { grid-template-columns: 1fr; } }

.gl-packside .gl-sheethead { flex-wrap: wrap; row-gap: 4px; }
.gl-packside .gl-sheetsub { order: 3; flex-basis: 100%; }

.gl-sup .gl-lanename, .gl-kind { white-space: nowrap; }
.gl-sup .gl-lanename { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ---------- post-production: summary, links, sections, delivered chips ---------- */
.pp-title-job { color: var(--text-2); font-weight: 500; }
.pp-hubwrap { margin-top: 14px; }
.pp-hub { background: transparent; border: 0; padding: 0; gap: 8px; }
.pp-hublead { font: 600 10px var(--mono); letter-spacing: .14em; color: var(--text-3); padding-right: 4px; }
.pp-hubbtn { display: inline-flex; align-items: center; gap: 7px; background: var(--panel); border-radius: 9px; padding: 7px 12px; font-size: 13px; }
.pp-hubbtn i { font-style: normal; color: var(--text-3); }
.pp-hubbtn:hover i { color: inherit; }
.pp-hubedit { margin-left: 0; border-color: transparent; font: 500 12.5px var(--sans); letter-spacing: 0; color: var(--text-2); padding: 6px 8px; }
.pp-hubname { font: 500 12.5px var(--sans); margin: 0; }
.pp-hubname.is-btn { align-items: center; gap: 8px; color: var(--text-2); padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px; }
.pp-hubname.is-btn:hover { color: var(--text); }
.pp-hubname-l { font: 600 9.5px var(--mono); letter-spacing: .12em; color: var(--text-3); }
.pp-hubname .pp-hubedit-i { opacity: .6; }
.btn.pp-teamswitch { margin-left: 0; display: inline-flex; align-items: center; gap: 8px; font: 550 13px var(--sans); letter-spacing: 0; color: var(--text); padding: 8px 13px; border-radius: 8px; }
.pp-morebtn { letter-spacing: .1em; color: var(--text-2); }
.pp-sum { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; margin-top: 16px; }
.pp-sum.is-one { grid-template-columns: 1fr; }
.pp-sum-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; }
.pp-sum-top { display: flex; align-items: baseline; gap: 12px; }
.pp-sum-top b { font-size: 15px; }
.pp-sum-lbl { font: 600 10px var(--mono); letter-spacing: .12em; color: var(--text-3); }
.pp-sum-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--track); margin: 10px 0 8px; }
.pp-sum-bar i, .pp-sum-legend i { display: block; }
.pp-sum-bar .is-done, .pp-sum-legend .is-done { background: var(--st-done); }
.pp-sum-bar .is-review, .pp-sum-legend .is-review { background: var(--st-review); }
.pp-sum-bar .is-editing, .pp-sum-legend .is-editing { background: var(--st-edit); }
.pp-sum-bar .is-todo, .pp-sum-legend .is-todo { background: var(--st-todo); }
.pp-sum-legend { display: flex; flex-wrap: wrap; gap: 16px; font: 600 10px var(--mono); letter-spacing: .08em; color: var(--text-2); }
.pp-sum-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pp-sum-legend i { width: 8px; height: 8px; border-radius: 2px; }
.pp-sum-money { display: flex; gap: 28px; align-items: flex-end; }
.pp-sum-money span { display: block; font: 600 10px var(--mono); letter-spacing: .12em; color: var(--text-3); }
.pp-sum-money b { display: block; font: 700 21px var(--mono); margin-top: 4px; }
.pp-sum-money b.is-cost { color: var(--text-2); }
.pp-sum-money b.is-left { color: var(--ok); }
.pp-sum-money b.is-over { color: var(--accent); }
.pp-notes { border-radius: 14px; padding: 14px 18px; margin-top: 14px; }
.pp-notes.is-read { border-left: 1px solid var(--line); }
.pp-card { background: var(--panel); border-radius: 14px; }
/* rows: calmer, no stripes - the sections do the grouping */
.pp-row.is-band { background: transparent; }
.pp-row:hover, .pp-row.is-band:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.pp-head, .pp-row { padding-top: 13px; padding-bottom: 13px; }
.pp-row .pp-name { font-size: 14.5px; font-weight: 650; }
.pp-stepbtn.is-on.is-done { background: var(--st-done); color: var(--st-done-ink); }
.pp-sec { display: flex; align-items: center; gap: 9px; padding: 14px 18px 8px; border-top: 1px solid var(--line); }
.pp-sec i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.pp-sec b { font-size: 13px; }
.pp-sec em { font: 600 10px var(--mono); font-style: normal; color: var(--text-3); }
.pp-sec.is-late i, .pp-sec.is-today i { background: var(--accent); }
.pp-sec.is-late b { color: var(--accent); }
.pp-sec.is-week i { background: var(--busy); }
.pp-sec.is-done i { background: var(--ok); }
.pp-sec-toggle { background: none; border: 0; font: 600 10px var(--mono); letter-spacing: .12em; color: var(--text-3); cursor: pointer; }
.pp-sec-toggle:hover { color: var(--text); }
.pp-donechips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 18px 16px; }
.pp-donechip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; padding: 7px 12px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 7%, transparent); }
.pp-donechip em { font: 600 10px var(--mono); font-style: normal; color: var(--ok); }
/* confirm the editors: a card per editor, its colour is where it stands */
.ec-intro { color: var(--text-2); font-size: 13px; margin: 0 0 12px; }
.ec-list { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ec-card { border: 1px solid var(--line-control); border-radius: 12px; overflow: hidden; }
.ec-card .ec-row { border-top: 0; padding: 12px 14px; }
.ec-card.is-changed { border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
.ec-card.is-new { border-color: var(--accent-line); }
.ec-card.is-sent { border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.ec-card.is-nofee { opacity: .85; }
.ec-name { font-size: 15px; }
.ec-sub { font: 400 12px var(--sans); letter-spacing: 0; color: var(--text-2); }
.ec-pill.is-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.ec-lines { border-top: 1px solid var(--line); padding: 8px 14px 10px 60px; }
.ec-line { display: grid; grid-template-columns: minmax(0, 1fr) 170px 90px; gap: 10px; align-items: center; font-size: 13px; padding: 4px 0; }
.ec-line.is-more { display: block; color: var(--text-3); }
.ec-l-mv { font: 600 11px var(--mono); color: var(--danger); }
.ec-l-mv s { color: var(--text-3); }
.ec-l-fee { text-align: right; font: 600 12.5px var(--mono); }
.ec-l-fee.is-none { color: var(--accent); }
@media (max-width: 900px) { .pp-sum { grid-template-columns: 1fr; } }

/* the copy button: a real target, not a speck beside the name */
.pp-copy { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--line-control); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; flex: none; }
.pp-copy svg { width: 16px; height: 16px; }
.pp-copy:hover { color: var(--text); border-color: var(--text-2); background: color-mix(in srgb, var(--text) 6%, transparent); }

/* sections as blocks: one tint per urgency, rows tight inside with one hairline.
   12px of margin plus 6px of padding keeps every column under its heading. */
.pp-group { margin: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.015); }
.pp-group:last-child { margin-bottom: 12px; }
.pp-group .pp-sec { border-top: 0; padding: 10px 6px 4px; }
.pp-group .pp-row { padding: 9px 6px; border-bottom: 0; border-top: 1px solid var(--line); background: transparent; }
.pp-group .pp-sec + .pp-row { border-top: 0; }
.pp-group .pp-row:hover { background: rgba(255,255,255,.035); }
.pp-group .pp-donechips { padding: 4px 6px 12px; }
.pp-group.is-late { background: rgba(237,28,36,.09); border-color: rgba(237,28,36,.35); }
.pp-group.is-today { background: rgba(237,28,36,.05); border-color: rgba(237,28,36,.22); }
.pp-group.is-week { background: rgba(250,204,21,.035); border-color: rgba(250,204,21,.18); }
.pp-group.is-none { background: transparent; border-style: dashed; }
.pp-group.is-done { background: rgba(74,222,128,.03); border-color: rgba(74,222,128,.18); }
.pp-group.is-today .pp-sec b, .pp-group.is-late .pp-sec b { color: #ff6b70; }
.pp-group.is-week .pp-sec b { color: var(--busy); }
.pp-group.is-done .pp-sec b { color: var(--ok); }
.pp-group { min-width: 1141px; }
.pp-group:has(.pp-row.no-cost) { min-width: 1061px; }
.pp-group .pp-row, .pp-group .pp-row.no-cost { min-width: 0; }

/* ---------- edition home (Sep 2026) ---------- */

.eh-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 22px 0 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 8px 16px; }
.eh-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; background: none; border: 0; color: var(--text); cursor: pointer; padding: 0 4px; font-family: var(--sans); }
.eh-step:not(:last-child)::after { content: ''; position: absolute; top: 15px; left: calc(50% + 21px); right: calc(-50% + 21px); height: 2px; background: var(--track); }
.eh-step.is-done:not(:last-child)::after { background: var(--ok-fill); }
.eh-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 800 13px var(--mono); border: 2px solid var(--line-control); color: var(--text-3); background: var(--page); margin-bottom: 3px; transition: transform .12s; }
.eh-step:hover .eh-dot { transform: scale(1.08); }
.eh-step b { font-size: 14px; font-weight: 650; }
.eh-step small { font-size: 12px; color: var(--text-2); line-height: 1.3; }
.eh-step.is-done .eh-dot { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, #fff 28%, var(--ok-fill)), var(--ok-fill) 70%); border-color: var(--ok-fill); color: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok-fill) 14%, transparent), 0 0 12px color-mix(in srgb, var(--ok-fill) 40%, transparent); }
.eh-step.is-done:not(:last-child)::after { box-shadow: 0 0 5px color-mix(in srgb, var(--ok-fill) 40%, transparent); }
.eh-step.is-done small { color: var(--ok); }
.eh-step.is-busy .eh-dot { border-color: var(--danger); color: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 16%, transparent); }
.eh-step.is-busy b, .eh-step.is-busy small { color: var(--danger); }
.eh-step.is-idle b { color: var(--text-2); }

.eh-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.eh-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.eh-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.eh-ch { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.eh-ch > b { font-size: 16px; font-weight: 700; }
.eh-lbl { font: 600 10px var(--mono); letter-spacing: .14em; color: var(--text-3); }
.eh-link { margin-left: auto; font: 550 12.5px var(--sans); color: var(--accent); background: none; border: 0; cursor: pointer; padding: 2px 0; }
.eh-link:hover { text-decoration: underline; }
.eh-link.is-quiet { color: var(--text-2); }
.eh-link.is-quiet + .eh-link { margin-left: 14px; }

.eh-next { border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: color-mix(in srgb, var(--danger) 5%, var(--panel)); }
/* to deliver - at the bottom of Next up from the first show day */
.td { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 12px; }
.td-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.td-h b { font: 700 10px var(--mono); letter-spacing: .14em; color: var(--text-2); }
.td-h span { font: 600 10.5px var(--mono); letter-spacing: .08em; color: var(--text-3); }
.td-r { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 7px 0; font-size: 13.5px; }
.td-n b { font-weight: 600; display: block; }
.td-r small { color: var(--text-2); font-size: 12px; }
.td-bar { display: flex; height: 6px; border-radius: 4px; overflow: hidden; background: var(--track); margin-top: 4px; }
.td-bar i { display: block; height: 100%; }
.td-bar i.is-todo { background: var(--st-todo); }
.td-bar i.is-edit { background: var(--st-edit); }
.td-bar i.is-review { background: var(--st-review); }
.td-bar i.is-done { background: var(--st-done); }
.td-d { font: 700 10px var(--mono); letter-spacing: .05em; padding: 3px 7px; border-radius: 6px; white-space: nowrap; color: var(--text-2); background: var(--track); }
.td-d.is-late { color: #ff6b70; background: rgba(237,28,36,.12); }
.td-d.is-soon { color: #ffb020; background: rgba(255,176,32,.12); }
.td-d.is-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.eh-ny { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.eh-ch + .eh-ny { border-top: 0; padding-top: 2px; }
.eh-ny-t { flex: 1; min-width: 0; }
.eh-ny-t small { display: block; color: #2b8f52; font-size: 11.5px; margin-top: 2px; }
.eh-empty { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.45; }
.eh-col > .ly { margin-top: 0; }
.eh-todo { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.eh-ch + .eh-todo { border-top: 0; padding-top: 2px; }
.eh-todo > i { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; font: 800 12px var(--mono); font-style: normal; background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.eh-todo.is-quiet > i { background: var(--raised); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); }
.eh-todo-t { flex: 1; min-width: 0; }
.eh-todo-t b { font-size: 14px; font-weight: 600; }
.eh-todo-t small { display: block; font-size: 12px; color: var(--text-2); margin-top: 2px; }
.eh-todo.is-quiet .eh-todo-t b { color: var(--text-2); }
/* ---- next up after the show ---- */
.eh-after { font: 600 9.5px var(--mono); letter-spacing: .12em; color: var(--post); border: 1px solid var(--post-line); border-radius: 4px; padding: 2px 6px; }

.eh-stats { display: flex; gap: 28px; margin: 2px 0 14px; }
.eh-stats b { display: block; font: 800 22px var(--mono); }
.eh-stats span { font: 600 10px var(--mono); letter-spacing: .12em; color: var(--text-3); }
.eh-stats .is-rec b { color: var(--accent); }
.eh-stats .is-key b { color: #ffb020; }
.eh-empty { font-size: 13px; color: var(--text-3); }
.eh-strip-row { display: flex; align-items: center; gap: 10px; }
.eh-strip-row + .eh-strip-row { margin-top: 5px; }
.eh-strip-l { width: 92px; flex: none; font: 600 9.5px var(--mono); letter-spacing: .08em; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eh-strip { position: relative; flex: 1; height: 28px; border-radius: 7px; background: var(--track); overflow: hidden; }
.eh-strip i { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--text-3) 45%, var(--track)); border-right: 2px solid var(--panel); }
.eh-strip i.is-rec { background: color-mix(in srgb, var(--accent) 70%, var(--track)); }
.eh-strip i.is-key { background: #ffb020; }
.eh-ticks { margin-top: 6px; }
.eh-ticks.is-labelled { padding-left: 102px; }
.eh-ticks > div { position: relative; height: 12px; }
.eh-ticks span { position: absolute; transform: translateX(-50%); font: 500 10px var(--mono); color: var(--text-3); }
.eh-ticks span:first-child { transform: none; }
.eh-side { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border: 1px dashed var(--line-control); border-radius: 12px; background: none; color: var(--text); cursor: pointer; text-align: left; font-family: var(--sans); }
.eh-side b { font-size: 14px; font-weight: 600; }
.eh-side span { flex: 1; font-size: 12.5px; color: var(--text-2); }
.eh-side em { font: 700 9.5px var(--mono); letter-spacing: .12em; font-style: normal; color: var(--text-3); }
.eh-side:hover { border-color: var(--text-3); }

.eh-team { display: flex; align-items: center; gap: 10px; width: 100%; padding: 4px 0 8px; background: none; border: 0; color: var(--text); cursor: pointer; text-align: left; font-family: var(--sans); flex-wrap: wrap; }
.eh-team b { font-size: 14.5px; font-weight: 650; }
.eh-team small { margin-left: auto; font-size: 12.5px; color: var(--text-2); }
.eh-tags { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.eh-tag { font: 700 9.5px var(--mono); letter-spacing: .1em; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; padding: 3px 8px; }
.eh-tag.is-dim { color: var(--text-2); border-color: var(--line-control); }
.eh-tag.is-warn { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.eh-covered { font: 600 10px var(--mono); letter-spacing: .1em; color: var(--text-3); margin: -2px 0 12px; }
.eh-people { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.eh-person { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); color: var(--text); cursor: pointer; text-align: left; min-width: 0; font-family: var(--sans); }
.eh-person:hover { border-color: var(--line-control); }
.eh-person .eh-ava { width: 30px; height: 30px; border: 0; font-size: 10px; }
.eh-pn { flex: 1; min-width: 0; }
.eh-pn b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eh-pn small { display: block; font-size: 11.5px; color: var(--text-2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eh-person em { font: 700 9px var(--mono); letter-spacing: .1em; font-style: normal; color: var(--ok); flex: none; }
.eh-person em.is-option, .eh-person em.is-open { color: var(--danger); }
.eh-person.is-open { border-style: dashed; background: none; }
.eh-person.is-open .eh-pn b { color: var(--text-2); }
.eh-add { width: 100%; padding: 14px; border: 1px dashed var(--line-control); border-radius: 10px; background: none; color: var(--text-2); font: 500 13px var(--sans); cursor: pointer; text-align: left; }
.eh-info { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; font-size: 13px; }
.eh-info span { font: 600 10px var(--mono); letter-spacing: .12em; color: var(--text-3); padding-top: 3px; }
.eh-notes { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--text-2); white-space: pre-wrap; }

/* the slim bar on every other page of the edition */
.eh-bar { display: flex; align-items: center; gap: 4px; padding: 4px; margin-bottom: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.eh-home { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; margin-right: 4px; border-right: 1px solid var(--line); color: var(--text); text-decoration: none; white-space: nowrap; flex: none; border-radius: 8px 0 0 8px; }
.eh-home:hover .eh-hname { text-decoration: underline; }
.eh-chev { font-size: 18px; line-height: 1; color: var(--text-3); margin-top: -2px; }
.eh-hname { font-weight: 700; font-size: 13.5px; }
.eh-home em { font: 600 10px var(--mono); letter-spacing: .1em; color: var(--text-3); font-style: normal; }
.eh-home em.is-live { color: var(--accent); }
.eh-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.eh-tabs::-webkit-scrollbar { display: none; }
.eh-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 8px; border: 0; background: none; color: var(--text-2); font: 500 13px var(--sans); cursor: pointer; white-space: nowrap; flex: none; }
.eh-tab:hover { background: var(--raised); color: var(--text); }
.eh-tab i { width: 15px; height: 15px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 800 8.5px var(--sans); font-style: normal; border: 1.5px solid var(--line-control); }
.eh-tab.is-done i { background: var(--ok-fill); border-color: var(--ok-fill); color: #fff; }
.eh-tab.is-busy { color: var(--danger); }
.eh-tab.is-busy i { border-color: var(--danger); }
.eh-tab.is-on, .eh-tab.is-on:hover { background: var(--text); color: var(--page); font-weight: 650; }
.eh-tab.is-on.is-busy i { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 25%, transparent); }

@media (max-width: 1100px) {
  .eh-grid { grid-template-columns: 1fr; }
  .eh-steps { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 18px; }
  .eh-step:nth-child(4)::after { display: none; }
}
@media (max-width: 640px) {
  .eh-steps { display: flex; flex-direction: column; padding: 8px 14px; gap: 0; }
  .eh-step { flex-direction: row; text-align: left; gap: 12px; padding: 7px 0; }
  .eh-step .eh-dot { width: 26px; height: 26px; font-size: 11px; margin: 0; flex: none; }
  .eh-step small { margin-left: auto; text-align: right; }
  .eh-step:not(:last-child)::after { display: none; }
  .eh-people { grid-template-columns: 1fr; }
  .eh-hname { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
  .eh-home em { display: none; }
}
.eh-tab.is-on.is-idle i { border-color: var(--text-3); }

/* gear list: a header per stage, a line per day for a camera that changes */
.gl-stagehead { display: flex; align-items: baseline; gap: 14px; padding: 14px 18px 12px; background: var(--track); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gl-stagehead b { font: 800 16px var(--sans); letter-spacing: .02em; color: var(--text); }
.gl-stagehead span { font: 600 10px var(--mono); letter-spacing: .12em; color: var(--text-2); }
.gl-mhead + .gl-stagehead { border-top: 0; }
.gl-stagehead + .gl-grp { border-top: 0; }
.gl-daywho { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gl-msub.is-day .gl-sublbl { font-size: 9.5px; font-weight: 700; color: var(--text-2); }
.gl-dayname { font: 600 12.5px var(--sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-daysame { font-size: 11px; font-style: italic; color: var(--text-3); }
.gl-msub.is-day { align-items: center; padding-top: 7px; padding-bottom: 7px; }

/* edition home: the year tabs, and one strip - name, four facts, pencil */
.eh-years { display: flex; gap: 2px; padding-left: 14px; }
.eh-year { padding: 6px 14px 7px; font: 600 12.5px var(--sans); color: var(--text-3); background: none; border: 1px solid transparent; border-bottom: 0; border-radius: 9px 9px 0 0; cursor: pointer; margin-bottom: -1px; position: relative; }
.eh-year:hover { color: var(--text); }
.eh-year.is-on { background: var(--panel); color: var(--text); border-color: var(--line); cursor: default; }
.eh-year.is-add { font-size: 14px; padding: 5px 12px 7px; }
.eh-facts { display: grid; grid-template-columns: auto minmax(0, 1.35fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .9fr) auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.eh-fname { display: flex; flex-direction: column; justify-content: center; padding: 12px 24px 12px 18px; min-width: 0; }
.eh-fname h1 { margin: 0; font-size: 25px; font-weight: 750; letter-spacing: -.01em; white-space: nowrap; color: var(--text); }
.eh-fname span { margin-top: 3px; font: 700 10px var(--mono); letter-spacing: .12em; color: var(--danger); }
.eh-fname span.is-live { color: var(--accent); }
.eh-fname span.is-past { color: var(--text-3); }
.eh-fact { display: flex; gap: 11px; align-items: flex-start; padding: 12px 16px; min-width: 0; border-left: 1px solid var(--line); }
.eh-fico svg { width: 17px; height: 17px; margin-top: 16px; fill: none; stroke: var(--text-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.eh-fbody { min-width: 0; }
.eh-fbody small { display: block; font: 600 9.5px var(--mono); letter-spacing: .14em; color: var(--text-3); }
.eh-fbody b { display: block; margin-top: 4px; font-size: 14.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eh-fbody b.is-quiet { color: var(--text-3); font-weight: 500; }
.eh-fbody > span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eh-ftags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.eh-deliver { font: 700 9.5px var(--mono); letter-spacing: .12em; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.eh-fend { display: flex; align-items: center; padding: 0 14px; border-left: 1px solid var(--line); }
.eh-pencil { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line-control); background: none; display: grid; place-items: center; cursor: pointer; }
.eh-pencil:hover { background: var(--raised); border-color: var(--text-3); }
.eh-pencil svg { width: 16px; height: 16px; fill: none; stroke: var(--text-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1100px) {
  .eh-facts { grid-template-columns: 1fr 1fr; position: relative; }
  .eh-fname { grid-column: 1 / -1; padding-right: 64px; border-bottom: 1px solid var(--line); }
  .eh-fact:nth-child(2), .eh-fact:nth-child(4) { border-left: 0; }
  .eh-fact:nth-child(n+4) { border-top: 1px solid var(--line); }
  .eh-fend { position: absolute; top: 12px; right: 0; border: 0; }
}
@media (max-width: 640px) {
  .eh-facts { grid-template-columns: 1fr; }
  .eh-fact { border-left: 0; }
  .eh-fact + .eh-fact { border-top: 1px solid var(--line); }
  .eh-fname h1 { white-space: normal; }
}


/* festival list (R1): calendar tile, name and place, the seven steps, countdown */
.rail-list .month { border-bottom: 0; padding: 16px 16px 6px; }
.rail-list .month ~ .month { border-top: 1px solid var(--line); margin-top: 8px; }
.rl-row { display: flex; gap: 12px; align-items: center; width: calc(100% - 16px); margin: 2px 8px; padding: 10px; border-radius: 10px; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; font-family: var(--sans); }
.rl-row:hover { background: var(--raised); }
.rl-row.is-sel { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-control); }
.rl-cal { width: 50px; flex: none; text-align: center; border-radius: 8px; background: var(--track); padding: 5px 0 4px; }
.rl-cal small { display: block; font: 700 8.5px var(--mono); letter-spacing: .1em; color: var(--accent); white-space: nowrap; }
.rl-cal b { display: block; font: 800 17px var(--mono); line-height: 1.1; color: var(--text); }
.rl-row.is-sel .rl-cal { background: var(--accent); }
.rl-row.is-sel .rl-cal small { color: #fff; opacity: .85; }
.rl-row.is-sel .rl-cal b { color: #fff; }
.rl-body { flex: 1; min-width: 0; display: block; }
.rl-top { display: flex; align-items: baseline; gap: 8px; }
.rl-nm { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-cd { flex: none; font: 700 9.5px var(--mono); letter-spacing: .06em; color: var(--text-3); }
.rl-cd.is-soon { color: var(--danger); }
.rl-cd.is-live { color: var(--accent); }
.rl-sub { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-bar { display: flex; gap: 3px; align-items: center; margin-top: 6px; }
.rl-bar i { width: 14px; height: 4px; border-radius: 2px; background: var(--track); flex: none; }
.rl-bar i.is-done { background: var(--ok-fill); }
.rl-bar i.is-busy { background: var(--danger); }
.rl-bar em { font-style: normal; font: 600 9.5px var(--mono); letter-spacing: .08em; color: var(--text-3); margin-left: 6px; }
.rl-row.is-past { opacity: .6; }
.rl-row.is-past:hover, .rl-row.is-past.is-sel { opacity: 1; }

/* every show its own card; red = coming up, blue = in the edit */
.rail-list .month.rl-h { display: flex; align-items: center; gap: 8px; border: 0; margin: 0; padding: 16px 18px 8px; font: 700 10.5px var(--mono); letter-spacing: .14em; color: var(--text); }
.rail-list .month.rl-h ~ .month.rl-h { border-top: 0; margin-top: 6px; }
.rl-h .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex: none; }
.rl-h .n { font: 700 10px var(--mono); letter-spacing: 0; border-radius: 99px; padding: 1px 7px; background: var(--track); color: var(--text-2); }
.rl-h .ln { flex: 1; height: 1px; background: var(--line); }
.rl-h.is-up .dot, .rl-h.is-up .n { background: var(--accent); }
.rl-h.is-up .n { color: #fff; }
.rl-h.is-post .dot, .rl-h.is-post .n { background: var(--post); }
.rl-h.is-post .n { color: var(--post-ink); }
.rail-list .month.rl-h.is-done { color: var(--text-3); }
.rl-row { width: calc(100% - 20px); margin: 0 10px 7px; padding: 11px 10px; background: var(--panel); border: 1px solid var(--line); }
.rl-row:hover { background: var(--panel); border-color: var(--line-control); }
.rl-row.is-sel { box-shadow: none; border-color: var(--accent-line); background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.rl-sub { color: var(--text-list); }
.rl-cd { font-size: 10px; color: var(--text-2); background: var(--track); border-radius: 99px; padding: 2px 7px; }
.rl-cd.is-soon { color: var(--danger); background: var(--danger-wash); }
.rl-cd.is-live { color: #fff; background: var(--accent); }
.rl-row.is-post .rl-cal { background: transparent; box-shadow: inset 0 0 0 1px var(--post-line); }
.rl-row.is-post .rl-cal small { color: var(--post); }
.rl-row.is-post.is-sel { border-color: var(--post-line); background: color-mix(in srgb, var(--post) 6%, var(--panel)); }
.rl-row.is-post.is-sel .rl-cal { background: var(--post); box-shadow: none; }
.rl-row.is-post.is-sel .rl-cal small { color: var(--post-ink); opacity: .8; }
.rl-row.is-post.is-sel .rl-cal b { color: var(--post-ink); }

/* day card: one quiet line under the day - stage, hours, length */
.eh-day .eh-ch { margin-bottom: 2px; }
.eh-dmeta { font-size: 13px; color: var(--text-2); margin-bottom: 14px; }
.eh-dmeta b { color: var(--text); font-weight: 600; }
.eh-dmeta i { font-style: normal; color: var(--text-3); margin: 0 7px; }
.rl-bar em.is-late { color: var(--danger); }
.rl-bar.is-post b { display: block; width: 84px; height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; flex: none; }
.rl-bar.is-post b i { display: block; height: 100%; width: 0; background: var(--ok-fill); border-radius: 2px; }
.eh-covered.is-warn { color: var(--danger); }
.eh-ch + .eh-team { padding-top: 0; }

/* a heading inside a form: which part of the window this is */
.form-sec { display: flex; align-items: baseline; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-top: 4px; }
.form-sec b { font: 700 11px var(--mono); letter-spacing: .14em; color: var(--text); }
.form-sec span { font-size: 12px; color: var(--text-3); }
.field:has(> .form-sec) > label:empty { display: none; }
.field:has(> .form-sec) ~ .field:has(> .form-sec) { margin-top: 10px; }
.cs-rooms-list { margin-top: 12px; }
.cs-rooms-list .cs-room-r:last-child { border-bottom: 1px solid #D9D8D3; }
.cs-office { margin-top: 8px; }
.cs-hotel { margin-top: 22px; }
.cs-hotel .cs-rooms-list { margin-top: 12px; }

/* timetable: all sets, or only what we record with the breaks between */
.tt-mode { display: flex; justify-content: flex-end; }
.tt-modeseg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line-control); border-radius: 9px; background: var(--panel); }
.tt-modeseg button { font: 600 12.5px var(--sans); color: var(--text-2); background: none; border: 0; border-radius: 6px; padding: 6px 12px; cursor: pointer; }
.tt-modeseg button:hover { color: var(--text); }
.tt-modeseg button.is-on { background: var(--text); color: var(--page); }
.tt-gap { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: center; padding: 0 18px; min-height: 36px; border-top: 1px dashed var(--line-control);
  background: repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in srgb, var(--text) 3%, transparent) 8px 16px); }
.tt-gap + .tt-row, .tt-gap + .tt-moment { border-top: 1px dashed var(--line-control); }
.tt-gap .tt-time { color: var(--text-3); }
.tt-gap-t { font: 600 11px var(--mono); letter-spacing: .08em; color: var(--text-3); }
.tt-gap-t b { color: var(--text-2); font-weight: 700; }
.tt-gap.is-empty { display: block; padding: 12px 18px; font-size: 13px; background: none; border-top: 0; }

/* ---------- post-production rewards: fire, early, stamp, badges, wrap-up ---------- */
.pp-fire { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 8px 1px 6px; border-radius: 999px; font-size: 11.5px; line-height: 18px;
  background: rgba(255,120,40,.12); border: 1px solid rgba(255,120,40,.35); color: #ffb070; white-space: nowrap; }
.pp-fire b { font-weight: 650; }
.pp-fire.is-new { animation: rw-glow 1.6s ease-out 3; }
@keyframes rw-glow { 0% { box-shadow: 0 0 0 0 rgba(255,120,40,.55), 0 0 18px rgba(255,120,40,.5); } 100% { box-shadow: 0 0 0 10px rgba(255,120,40,0), 0 0 0 rgba(255,120,40,0); } }
.pp-early { display: inline-block; margin-left: 8px; transform: rotate(-7deg); font: 900 9.5px var(--mono); letter-spacing: .14em; color: #ffc53d;
  border: 1.5px solid #ffc53d; border-radius: 5px; padding: 2px 6px; background: rgba(255,197,61,.08); }
:root[data-theme="light"] .pp-early { color: #a86b00; border-color: #d99a00; }

.rw-toasts { position: fixed; top: 16px; right: 16px; z-index: 400; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.rw-toast { pointer-events: auto; width: min(380px, calc(100vw - 32px)); display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; cursor: pointer;
  color: #fff; box-shadow: 0 18px 50px rgba(0,0,0,.55); animation: rw-in .45s cubic-bezier(.2,1.4,.4,1); }
.rw-toast.is-fire { background: linear-gradient(135deg, #2a1810, #1c1410); border: 1px solid rgba(255,120,40,.5); box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 40px rgba(255,120,40,.22); }
.rw-toast.is-badge { background: linear-gradient(135deg, #2a2210, #17150e); border: 1px solid rgba(255,197,61,.5); box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 40px rgba(255,197,61,.2); }
.rw-toast-i { font-size: 32px; line-height: 1; }
.rw-toast b { display: block; font-size: 14.5px; }
.rw-toast span { display: block; font-size: 12.5px; color: rgba(255,255,255,.7); margin-top: 2px; }
.rw-toast.is-out { opacity: 0; transform: translateX(30px); transition: opacity .35s, transform .35s; }
@keyframes rw-in { from { opacity: 0; transform: translateY(-14px) scale(.9); } to { opacity: 1; transform: none; } }

.rw-stamp { position: absolute; z-index: 350; pointer-events: none; display: grid; place-items: center; overflow: visible; }
.rw-ink { font: 900 26px var(--mono); letter-spacing: .16em; color: #4ade80; border: 4px solid #4ade80; border-radius: 10px; padding: 4px 18px;
  background: rgba(14,17,22,.82); text-shadow: 0 0 18px rgba(74,222,128,.45); white-space: nowrap;
  animation: rw-slam .34s cubic-bezier(.3,1.6,.5,1) both; }
.rw-stamp.is-gold .rw-ink { color: #ffc53d; border-color: #ffc53d; text-shadow: 0 0 18px rgba(255,197,61,.5); }
@keyframes rw-slam { 0% { opacity: 0; transform: rotate(-9deg) scale(2.6); filter: blur(3px); } 55% { opacity: 1; transform: rotate(-9deg) scale(.92); filter: none; } 100% { transform: rotate(-9deg) scale(1); } }
.rw-dust { position: absolute; left: 50%; top: 50%; width: 180px; height: 70px; margin: -35px 0 0 -90px; border-radius: 50%;
  border: 2px dashed rgba(74,222,128,.55); opacity: 0; animation: rw-dust .6s ease-out .14s both; }
.rw-stamp.is-gold .rw-dust { border-color: rgba(255,197,61,.6); }
@keyframes rw-dust { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.1); } }
.rw-stamp.is-out { opacity: 0; transition: opacity .35s; }
.rw-hit { animation: rw-shake .3s ease-in-out .14s; }
@keyframes rw-shake { 0%,100% { transform: none; } 20% { transform: translate(-3px, 1px); } 40% { transform: translate(3px, -1px); } 60% { transform: translate(-2px, 0); } 80% { transform: translate(2px, 1px); } }
.rw-landed { animation: rw-land .9s cubic-bezier(.2,1,.3,1); }
@keyframes rw-land { 0% { transform: translateY(-14px); opacity: 0; background: rgba(74,222,128,.22); } 60% { opacity: 1; background: rgba(74,222,128,.14); } 100% { transform: none; } }

.rw-shelf { margin-top: 18px; padding: 0; overflow: hidden; }
.rw-shelf-h { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 18px; background: none; border: 0; color: var(--text); cursor: pointer; text-align: left; font-family: var(--sans); }
.rw-shelf-h b { font-size: 15px; }
.rw-shelf-n { font: 600 10px var(--mono); letter-spacing: .12em; color: var(--text-3); }
.rw-shelf-icons { display: inline-flex; gap: 4px; font-size: 18px; }
.rw-shelf-t { font-size: 12.5px; color: var(--accent); }
.rw-badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 18px 18px; }
.rw-badges.is-shut { display: none; }
.rw-badge { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); min-width: 0; }
.rw-badge-i { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: var(--track); }
.rw-badge.is-red .rw-badge-i { background: rgba(237,28,36,.15); }
.rw-badge.is-gold .rw-badge-i { background: rgba(255,197,61,.15); }
.rw-badge.is-violet .rw-badge-i { background: rgba(140,120,255,.18); }
.rw-badge.is-green .rw-badge-i { background: rgba(74,222,128,.15); }
.rw-badge.is-orange .rw-badge-i { background: rgba(255,120,40,.15); }
.rw-badge b { display: block; font-size: 13.5px; }
.rw-badge small { display: block; font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
.rw-badge.is-locked { opacity: .42; }
.rw-badge.is-locked .rw-badge-i { filter: grayscale(1); }
@media (max-width: 900px) { .rw-badges { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rw-badges { grid-template-columns: 1fr; } }

.rw-wrap-back { display: grid; place-items: center; }
.rw-wrap-box { display: flex; flex-direction: column; align-items: center; gap: 14px; animation: rw-in .5s cubic-bezier(.2,1.3,.4,1); max-height: 100vh; overflow: auto; padding: 16px; }
.rw-wrap-acts { display: flex; gap: 8px; }
.rw-wrap-sparks { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.rw-wrap-sparks i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; animation: rw-fall 2.6s ease-in both; }
@keyframes rw-fall { to { transform: translateY(105vh) rotate(720deg); } }
.rw-wrap-btn { border-color: rgba(237,28,36,.5); }
.rw-wrap-list { display: flex; flex-direction: column; gap: 6px; }
.rw-wrap-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); color: var(--text); cursor: pointer; text-align: left; font-family: var(--sans); }
.rw-wrap-row b { font-size: 13.5px; flex: 1; }
.rw-wrap-row span { font-size: 12px; color: var(--text-2); }
.rw-wrap-row em { font-style: normal; font-size: 12px; color: var(--accent); }
.pp-sound { min-width: 38px; }
.pp-donefire { font-size: 12px; }
.pp-doneearly { font: 900 8.5px var(--mono); letter-spacing: .12em; color: #ffc53d; border: 1.2px solid #ffc53d; border-radius: 4px; padding: 1px 4px; transform: rotate(-6deg); display: inline-block; }
.pp-donechip.is-early { border-color: rgba(255,197,61,.45); }
.pp-donechip.is-glow { animation: rw-glow 1.6s ease-out 3; }
.rw-shelf-h .spacer { flex: 1; }
.rl-bar em { white-space: nowrap; }

/* ---------- what the crew need: their own page (#/r/...) ---------- */
.ask { flex: 1; min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; padding: 28px 16px 60px; background: var(--page); }
.ask-card { width: 100%; max-width: 440px; }
.ask-brand { font: 700 11px var(--mono); letter-spacing: .14em; color: var(--text-3); }
.ask-brand b { color: var(--accent); }
.ask h1 { margin: 16px 0 6px; font-size: 28px; line-height: 1.15; }
.ask-sub { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.ask-sub b { color: var(--text); }
.ask-qs { margin-top: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden; }
.ask-q { display: flex; align-items: center; gap: 12px; padding: 14px; }
.ask-q + .ask-q, .ask-nights, .ask-sum + .ask-sum { border-top: 1px solid var(--line); }
.ask-i { font-size: 22px; width: 28px; text-align: center; flex: none; }
.ask-q b { flex: 1; font-size: 16px; line-height: 1.25; }
.ask-yn { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line-control); border-radius: 10px; flex: none; }
.ask-yn button { font: 600 15px var(--sans); color: var(--text-2); background: none; border: 0; border-radius: 7px; padding: 9px 16px; cursor: pointer; }
.ask-yn button.is-on { background: var(--text); color: var(--page); }
.ask-nights { padding: 12px 14px 16px 54px; }
.ask-nl { font-size: 13.5px; color: var(--text-2); margin-bottom: 10px; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-chips button { font: 500 14.5px var(--sans); color: var(--text-2); background: none; border: 1px solid var(--line-control); border-radius: 999px; padding: 9px 14px; cursor: pointer; }
.ask-chips button.is-on { background: var(--text); color: var(--page); border-color: var(--text); font-weight: 650; }
.ask-send, .ask-again { margin-top: 18px; width: 100%; padding: 16px; border-radius: 12px; border: 0; background: var(--accent); color: #fff; font: 700 16px var(--sans); cursor: pointer; }
.ask-send:disabled { opacity: .4; cursor: default; }
.ask-again { background: none; border: 1px solid var(--line-control); color: var(--text); }
.ask-fine { margin: 12px 0 0; font-size: 13px; color: var(--text-3); text-align: center; }
.ask-err { margin: 12px 0 0; font-size: 14px; color: var(--danger); min-height: 0; }
.ask-err:empty { display: none; }
.ask-done { margin-top: 26px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; font-weight: 800; background: var(--ok-fill); color: #fff; }
.ask-sum { display: flex; align-items: center; gap: 12px; padding: 13px 14px; font-size: 15px; }
.ask-sum span:nth-child(2) { flex: 1; }
.ask-sum b { color: var(--text-2); font-weight: 600; text-align: right; }
.ask-sum b.is-yes { color: var(--ok); }

/* in Book crew: what each person asked for, and the export */
.cn-line { display: flex; align-items: center; gap: 4px; margin-top: 5px; flex-wrap: wrap; }
.cn-i { width: 26px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 12.5px; line-height: 1; border: 0; padding: 0; cursor: pointer;
  background: var(--track); opacity: .32; filter: grayscale(1); }
span.cn-i { cursor: default; }
.cn-i.is-yes { opacity: 1; filter: none; background: color-mix(in srgb, var(--ok) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 45%, transparent); }
.cn-i.is-no { opacity: .5; filter: grayscale(1); box-shadow: inset 0 0 0 1px var(--line-control); }
.cn-i.is-ours { margin-left: 9px; position: relative; }
.cn-i.is-ours::before { content: ''; position: absolute; left: -7px; top: 3px; bottom: 3px; width: 1px; background: var(--line-control); }
.cn-note { margin-left: 8px; font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.cn-note.is-wait { color: var(--danger); }
.cn-seen { display: flex; gap: 4px; flex-basis: 100%; margin-top: 2px; }
.cn-seen-k { font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); align-self: center; margin-right: 2px; white-space: nowrap; }
.cn-s { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 11.5px; line-height: 1; box-shadow: inset 0 0 0 1px var(--line-control); opacity: .45; filter: grayscale(1); }
.cn-s em { font-style: normal; font-weight: 500; opacity: .8; }
.cn-s.is-on { opacity: 1; filter: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 55%, transparent); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.cn-s.is-wait { opacity: 1; filter: grayscale(.4); box-shadow: inset 0 0 0 1.5px rgba(255,176,32,.7); background: rgba(255,176,32,.1); }
.bk-remind { color: #ffb020; }
.cn-copy { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; }
.cn-copy:hover { text-decoration: underline; }
.cn-export { border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: var(--ok); }
.cn-copy { margin-left: 4px; }
/* the needs as a column of their own after the days: icons, the note under them */
.bk-line { grid-template-columns: minmax(200px, 1.1fr) minmax(0, 1.6fr) auto 270px 110px auto; }
.cn-line { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin-top: 0; }
.cn-status { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.cn-icons .cn-seen { flex-basis: auto; margin: 0 0 0 9px; padding-left: 9px; border-left: 1px solid var(--line-control); gap: 4px; }
.cn-icons { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; row-gap: 3px; }
/* a small hover label under each icon: what it is and where it stands. The
   icon lights up while it shows - dimmed, it would dim its label too */
.cn-i[data-tip]:hover, .cn-s[data-tip]:hover { opacity: 1; filter: none; }
.cn-i[data-tip]:hover::after, .cn-s[data-tip]:hover::after { left: 50%; transform: translateX(-50%); min-width: 0; max-width: none; white-space: nowrap;
  padding: 4px 8px; font-size: 11px; border-radius: 6px; z-index: 30; }
.cn-line .cn-note { margin-left: 0; }
@media (max-width: 900px) { .bk-line { grid-template-columns: 1fr auto; } }

/* ---------- Book crew as a page ---------- */
.bk-title .title-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bk-page { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: clip; }
.bk-page .bk-body { overflow: visible; flex: none; }
.bk-page .bk-main, .bk-page .bk-side { overflow: visible; }
.bk-foot { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 12px 18px;
  background: var(--panel); border-top: 1px solid var(--line); box-shadow: 0 -8px 20px rgba(0,0,0,.18); }
.bk-foot .spacer { flex: 1; }
.bk-foot .bk-hint.is-dirty { color: var(--danger); font-weight: 600; }
.bk-foot .btn:disabled { opacity: .45; cursor: default; }
/* on the page the list is narrower than the old wide window: tighter columns,
   a slimmer side panel, and below 1400px the side panel goes under the list */
.bk-page .bk-body { grid-template-columns: minmax(0, 1fr) 300px; }
.bk-page .bk-line { grid-template-columns: minmax(136px, 1fr) minmax(100px, 1.1fr) auto 270px 78px auto; gap: 11px; padding-top: 7px; padding-bottom: 7px; }
.bk-page .bk-fn-main { overflow-wrap: anywhere; }
@media (max-width: 1400px) {
  /* minmax(0, ...): a column that may shrink - plain 1fr grows to its widest
     card, and on a phone the page then clipped it off on the right */
  .bk-page .bk-body { grid-template-columns: minmax(0, 1fr); }
  .bk-page .bk-side { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) { .bk-page .bk-line { grid-template-columns: 1fr auto; } }
/* the days in a close-up, the same tabs as over the big plan */
.cu-days { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
/* the day tabs over the timetable: the day in full, the hours, then what is on it */
.tt-day { gap: 4px; min-width: 230px; padding: 11px 16px 12px; }
.tt-day b { font: 700 15px var(--sans); }
.tt-day span.tt-day-h { font: 400 12.5px var(--sans); letter-spacing: 0; color: var(--text-2); }
.tt-day span.tt-day-c { display: flex; gap: 10px; font: 400 12px var(--sans); letter-spacing: 0; color: var(--text-2); }
.tt-day-c span { font: inherit; letter-spacing: 0; color: inherit; }
.tt-day-c span.is-rec { color: #ff5a60; }
.tt-day-c span.is-star { color: #ffb020; }
:root[data-theme="light"] .tt-day-c span.is-rec { color: var(--accent); }
:root[data-theme="light"] .tt-day-c span.is-star { color: #b77800; }
.tt-days { align-items: center; }
.tt-days .tt-mode { margin-left: auto; }
.bk-title { margin-bottom: 18px; align-items: center; }
/* a key set is marked by its colour alone - yellow, no star */
.tt-km-n { color: #ffb020; }
:root[data-theme="light"] .tt-km-n { color: #b77800; }
.cs-tt-a.is-key { color: #b77800; }
/* callsheet side panel: the recording settings per camera body */
.cs-rec { display: flex; flex-direction: column; gap: 5px; margin: 4px 0 10px; }
.cs-rec-r { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 42px 30px 30px; gap: 6px; align-items: center; }
.cs-rec-b { font-size: 12px !important; }
.cs-rec-hide { font-size: 12px; text-align: center; }
.cs-rec-r.is-off .cs-rec-b, .cs-rec-r.is-off .input { opacity: .35; }
.cs-rec-r.is-off .cs-rec-b { text-decoration: line-through; }
.cs-rec-all { font-size: 11.5px; white-space: nowrap; }
.cs-pl-r.is-off .input { opacity: .4; text-decoration: line-through; }
.cs-rec-r.is-head span { font: 600 9px var(--mono); letter-spacing: .12em; color: var(--text-3); text-transform: uppercase; }
.cs-rec-b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-rec-r .input { min-width: 0; }
/* callsheet livesets: what we do not record steps back, what we do gets a red dot */
.cs-tt-r:not(.is-rec) .cs-tt-t, .cs-tt-r:not(.is-rec) .cs-tt-a { color: #9A9A96; font-weight: 500; }
.cs-tt-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #E31B23; margin-right: 6px; vertical-align: 1px; }
/* schedule: a red recording dot before every shooter and every camera start */
.rec-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ed1c24; margin-right: 5px; vertical-align: 1px; flex: none; font-style: normal; }

/* edition home: the promoter's deadlines */
.eh-dl-r { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 92px; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.eh-ch + .eh-dl-r { border-top: 0; padding-top: 2px; }
.eh-dl-tick { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-control); background: none; color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; cursor: pointer; padding: 0; }
.eh-dl-tick:disabled { opacity: .35; cursor: default; }
.eh-dl-n { font-weight: 600; }
.eh-dl-d { color: var(--text-2); font-size: 12.5px; white-space: nowrap; }
.eh-dl-d.is-add { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; font: inherit; font-size: 12.5px; }
.eh-dl-w { text-align: right; font: 600 11px var(--mono); color: var(--text-3); white-space: nowrap; }
.eh-dl-r.is-soon .eh-dl-w { color: var(--danger); }
.eh-dl-r.is-late .eh-dl-w, .eh-dl-r.is-late .eh-dl-n { color: var(--accent); }
.eh-dl-r.is-done .eh-dl-tick { background: var(--ok-fill); border-color: var(--ok-fill); }
.eh-dl-r.is-done .eh-dl-n, .eh-dl-r.is-done .eh-dl-d { color: var(--text-3); }
.eh-dl-r.is-done .eh-dl-w { color: var(--ok); }
.eh-dl-r.is-none .eh-dl-n { color: var(--text-2); }
/* the packer's list: when to pick a rental up and bring it back */
.pk-when { padding: 6px 14px 8px; font: 700 10.5px var(--mono); letter-spacing: .08em; color: var(--danger); border-bottom: 1px solid var(--line); }
.pkp-when { font: 700 10px var(--mono); letter-spacing: .08em; color: #b3261e; margin: -4px 0 8px; }

/* ---------- a crew member's own page (#/r/... once the call sheet is out) ----------
   Made for an iPhone at night: always dark, whatever the planner's theme. */
.cp { flex: 1; width: 100%; min-width: 0; min-height: 100vh; background: #0f0f10; color: #f4f4f5; font-family: var(--sans); -webkit-text-size-adjust: 100%; }
.cp-body { max-width: 480px; margin: 0 auto; padding: calc(14px + env(safe-area-inset-top)) 18px calc(104px + env(safe-area-inset-bottom)); }
.cp-brand { display: flex; justify-content: space-between; gap: 10px; font: 700 10px var(--mono); letter-spacing: .18em; color: #a1a1aa; margin: 4px 0 14px; }
.cp-brand b { color: #ed1c24; }
.cp-preview { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: rgba(255,176,32,.12); color: #ffb020; font: 700 10.5px var(--mono); letter-spacing: .12em; }
.cp-hi { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.015em; line-height: 1.15; }
/* the greeting stands apart from the cards under it */
.cp-hi + .cp-hcard { margin-top: 16px; }
.cp-who { color: #a1a1aa; font-size: 14.5px; margin: 4px 0 14px; }
.cp-days { display: flex; gap: 6px; margin: 0 0 12px; overflow-x: auto; }
.cp-days button { flex: none; padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.15); background: none; color: #a1a1aa; font: 600 13.5px var(--sans); }
.cp-days button.is-on { background: #f4f4f5; color: #0f0f10; border-color: #f4f4f5; }
.cp-call { border-radius: 20px; padding: 16px 16px 14px; background: linear-gradient(160deg, #3a0d10, #1a0d10 60%, #18181a); border: 1px solid rgba(237,28,36,.42); }
.cp-call.is-tbc { background: #18181a; border-color: rgba(255,255,255,.1); }
.cp-k { font: 700 10px var(--mono); letter-spacing: .18em; color: #ff6b70; }
.cp-t { font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -.02em; margin: 8px 0 6px; font-variant-numeric: tabular-nums; }
.cp-call.is-tbc .cp-t { font-size: 34px; color: #a1a1aa; }
.cp-w { font-size: 14.5px; color: #d4d4d8; }
.cp-note { display: inline-block; margin-top: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 12.5px; font-weight: 600; }
.cp-n { font-size: 12.5px; color: #a1a1aa; margin-top: 8px; line-height: 1.4; }
.cp-btns { display: flex; gap: 8px; margin-top: 12px; }
.cp-bt { flex: 1; display: block; text-align: center; padding: 11px 8px; border-radius: 12px; background: rgba(255,255,255,.08); color: #f4f4f5; font: 600 14px var(--sans); text-decoration: none; border: 0; cursor: pointer; }
.cp-bt.is-red { background: #ed1c24; color: #fff; }
.cp-bt:disabled { opacity: .5; }
.cp-wide { width: 100%; margin-top: 12px; padding: 14px; font-size: 15.5px; }
.cp-big2 { display: flex; gap: 8px; margin-top: 10px; }
.cp-big2 button { flex: 1; text-align: left; border-radius: 16px; padding: 12px; background: #18181a; border: 1px solid rgba(255,255,255,.08); color: #f4f4f5; cursor: pointer; }
.cp-big2 i { font-style: normal; font-size: 20px; display: block; margin-bottom: 6px; }
.cp-big2 b { display: block; font-size: 14px; }
.cp-big2 small { display: block; color: #a1a1aa; font-size: 12px; line-height: 1.3; margin-top: 2px; }
.cp-sec { font: 700 10px var(--mono); letter-spacing: .18em; color: #63636b; margin: 20px 2px 8px; }
.cp-tl { background: #18181a; border-radius: 16px; padding: 4px 14px; border: 1px solid rgba(255,255,255,.07); }
.cp-tr { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); position: relative; }
.cp-tr:last-child { border-bottom: 0; }
.cp-h { font: 700 13px var(--mono); width: 46px; flex: none; color: #d4d4d8; padding-top: 1px; }
.cp-x { min-width: 0; }
.cp-x b { font-size: 14.5px; font-weight: 600; }
.cp-x small { display: block; color: #a1a1aa; font-size: 12.5px; margin-top: 2px; }
.cp-tr.is-me::before { content: ''; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: #5b8def; }
.cp-tr.is-key .cp-x b { color: #ffb020; }
.cp-tr.is-wrap .cp-h, .cp-tr.is-wrap .cp-x b { color: #4ade80; }
.cp-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ed1c24; margin-right: 7px; vertical-align: 2px; }
.cp-sq { display: inline-block; width: 7px; height: 7px; background: #d4d4d8; margin-right: 7px; vertical-align: 1px; }
.cp-empty { color: #a1a1aa; font-size: 14px; line-height: 1.45; background: #18181a; border-radius: 16px; padding: 14px; margin: 0; }
.cp-fb { border-color: rgba(91,141,239,.4); }
.cp-fb-t { width: 100%; margin-top: 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: #0f0f10; color: #fafafa; font: 15px/1.45 var(--sans); padding: 12px; resize: vertical; box-sizing: border-box; }
.cp-fb .ask-send { margin-top: 10px; padding: 13px; }
.cp-card p.cp-fb-mine { margin-top: 8px; padding: 9px 11px; border-radius: 10px; background: rgba(91,141,239,.1); color: #e4e4e7; }
.cp-card { background: #18181a; border-radius: 16px; padding: 14px; border: 1px solid rgba(255,255,255,.07); margin-bottom: 10px; }
.cp-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cp-ic { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.07); display: grid; place-items: center; font-size: 16px; flex: none; }
.cp-hd b { font-size: 15.5px; }
.cp-card p { margin: 0; color: #d4d4d8; font-size: 14px; line-height: 1.45; white-space: pre-line; }
.cp-card p.cp-m { color: #a1a1aa; font-size: 13px; margin-top: 8px; }
.cp-tag { display: inline-block; margin-top: 9px; padding: 4px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: rgba(74,222,128,.12); color: #4ade80; }
.cp-map { display: block; width: 100%; margin-top: 10px; border-radius: 12px; background: #fff; }
.cp-warn { border-radius: 14px; padding: 12px 14px; margin: 10px 0; background: rgba(237,28,36,.10); border: 1px solid rgba(237,28,36,.42); font-size: 13px; line-height: 1.45; color: #ffb3b5; }
.cp-warn b { color: #fff; }
.cp-room { display: flex; gap: 8px; margin-top: 10px; }
.cp-room div { flex: 1; background: rgba(255,255,255,.05); border-radius: 10px; padding: 8px 10px; }
.cp-room small { display: block; font: 700 9px var(--mono); letter-spacing: .14em; color: #63636b; }
.cp-room b { font-size: 15px; }
.cp-need { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14.5px; border-bottom: 1px solid rgba(255,255,255,.06); }
.cp-need b { color: #4ade80; font-size: 14px; }
.cp-need b.is-no { color: #a1a1aa; }
.cp-chg { margin-top: 8px; background: none; border: 0; padding: 4px 0; color: #ff6b70; font: 600 14px var(--sans); cursor: pointer; }
.cp-wx { display: flex; gap: 8px; }
.cp-wx div { flex: 1; background: #18181a; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 10px; text-align: center; font-size: 12.5px; color: #a1a1aa; }
.cp-wx b { display: block; color: #f4f4f5; font-size: 17px; margin: 2px 0; }
.cp-ppl { padding: 2px 14px; }
.cp-p { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.cp-p:last-child { border-bottom: 0; }
.cp-av { width: 36px; height: 36px; border-radius: 50%; background: #2e2e33; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.cp-nm { flex: 1; font-size: 14.5px; min-width: 0; }
.cp-nm small { display: block; color: #a1a1aa; font-size: 12.5px; }
.cp-cl { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; text-decoration: none; background: rgba(74,222,128,.14); flex: none; }
.cp-cl.is-wa { background: rgba(255,255,255,.07); }
.cp-foot { text-align: center; color: #63636b; font-size: 12px; line-height: 1.45; margin: 16px 8px 0; }
.cp-tabs { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; background: #0c0c0d; border-top: 1px solid rgba(255,255,255,.08); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); z-index: 5; }
.cp-tabs button { flex: 1; max-width: 160px; background: none; border: 0; color: #63636b; font: 600 11px var(--sans); padding: 2px 0; cursor: pointer; }
.cp-tabs i { display: block; font-style: normal; font-size: 21px; margin-bottom: 3px; filter: grayscale(1); opacity: .55; }
.cp-tabs button.is-on { color: #f4f4f5; }
.cp-tabs button.is-on i { filter: none; opacity: 1; }
.cp-sheet-bg { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.cp-sheet { position: relative; width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; background: #1e1e21; color: #f4f4f5; border-radius: 22px 22px 0 0; padding: 10px 18px calc(18px + env(safe-area-inset-bottom)); font-family: var(--sans); }
.cp-grab { width: 38px; height: 5px; border-radius: 3px; background: #3f3f46; margin: 0 auto 12px; }
.cp-x-btn { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: #d4d4d8; font-size: 13px; cursor: pointer; }
.cp-sheet h3 { margin: 0 0 4px; font-size: 20px; font-weight: 800; }
.cp-sm { color: #a1a1aa; font-size: 13.5px; line-height: 1.4; margin: 0 0 12px; }
.cp-sm.cp-c { text-align: center; margin-top: 10px; }
.cp-evd { font: 700 10px var(--mono); letter-spacing: .16em; color: #63636b; margin: 10px 2px 6px; }
.cp-ev { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-radius: 12px; background: #131315; margin-bottom: 6px; }
.cp-ev > i { width: 4px; align-self: stretch; border-radius: 2px; background: #5b8def; flex: none; }
.cp-ev.is-call > i { background: #ed1c24; }
.cp-ev.is-wrap > i { background: #4ade80; }
.cp-ev .cp-h { width: 44px; font-size: 12.5px; }
.cp-ev b { display: block; font-size: 14px; font-weight: 600; }
.cp-ev small { color: #a1a1aa; font-size: 12px; }
.cp-opt { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 2px; border-top: 1px solid rgba(255,255,255,.07); font-size: 14px; }
.cp-opt small { display: block; color: #a1a1aa; font-size: 12px; margin-top: 2px; text-align: right; }
.cp-opt span small { text-align: left; }
.cp-sw { width: 46px; height: 28px; border-radius: 14px; border: 0; background: #3f3f46; position: relative; flex: none; cursor: pointer; }
.cp-sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left .15s; }
.cp-sw.is-on { background: #34c759; }
.cp-sw.is-on::after { left: 21px; }
.cp-wpi { display: block; margin: 0 auto; width: 62%; max-width: 230px; aspect-ratio: 390 / 844; border-radius: 24px; border: 4px solid #2e2e33; background: #0f0f10; object-fit: cover; }
.cn-open { margin-left: 0; font-size: 11.5px; }

/* ---------- packing: some off a line, and the list of what was taken before ---------- */
.pk-minus { flex: none; width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--line-control); background: none; color: var(--text-2); font: 600 15px var(--sans); line-height: 1; cursor: pointer; opacity: 0; }
.pk-line:hover .pk-minus, .pk-minus:focus-visible { opacity: 1; }
.pk-minus:hover { color: var(--text); border-color: var(--text-2); }
.gl-qty s, .pkp-ln s { color: var(--text-3); margin-right: 3px; text-decoration-thickness: 1.5px; }
.pk-off { display: block; margin-top: 2px; font: 700 9px var(--mono); letter-spacing: .06em; color: #ffb020; }
.pk-undo { background: none; border: 0; padding: 0 0 0 8px; font: inherit; letter-spacing: 0; color: var(--accent); text-decoration: underline; cursor: pointer; }
.pk-line.is-gone .gl-what { color: var(--text-3); }
.pk-offtag { margin-left: 6px; font: 700 8.5px var(--mono); letter-spacing: .06em; color: #ffb020; background: rgba(255,176,32,.12); border: 1px solid rgba(255,176,32,.35); border-radius: 5px; padding: 1px 5px; white-space: nowrap; }
.pk-offbg { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; justify-content: center; }
.pk-offbox { width: 100%; max-width: 520px; background: var(--panel); color: var(--text); border-radius: 20px 20px 0 0; padding: 10px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px rgba(0,0,0,.45); }
.pk-offbox.is-pop { position: fixed; width: 320px; border-radius: 12px; padding: 14px; border: 1px solid var(--line-control); }
.pk-offbox.is-pop .pk-grab { display: none; }
.pk-grab { width: 38px; height: 5px; border-radius: 3px; background: var(--line-control); margin: 0 auto 12px; }
.pk-offbox h3 { margin: 0 0 2px; font-size: 17px; }
.pk-offbox p { margin: 0 0 12px; color: var(--text-2); font-size: 13px; }
.pk-lab { font: 600 9px var(--mono); letter-spacing: .14em; color: var(--text-3); margin-bottom: 6px; }
.pk-whys { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pk-whys button { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line-control); background: none; color: var(--text-2); font: 500 13.5px var(--sans); cursor: pointer; }
.pk-whys button.is-on { background: var(--text); color: var(--page); border-color: var(--text); font-weight: 650; }
.pk-other { width: 100%; margin-bottom: 10px; }
.pk-cnt { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 14px; font-size: 13.5px; }
.pk-step { display: inline-flex; align-items: center; border: 1px solid var(--line-control); border-radius: 9px; flex: none; }
.pk-step button { width: 34px; height: 34px; background: none; border: 0; color: var(--text-2); font: 500 18px var(--sans); cursor: pointer; }
.pk-step b { min-width: 24px; text-align: center; font-size: 15px; }
.pk-offbtns { display: flex; gap: 8px; }
.pk-offbtns .btn { flex: 1; justify-content: center; }
.pk-add .pk-qty { flex: none; }
.pk-add .pk-step button { width: 30px; height: 32px; }
.pk-drop { margin: 6px 14px 0; background: var(--panel-2, #1e1e21); border: 1px solid var(--line-control); border-radius: 10px; overflow: hidden; box-shadow: 0 14px 30px rgba(0,0,0,.35); }
.pk-droph { font: 600 9px var(--mono); letter-spacing: .14em; color: var(--text-3); padding: 8px 12px 4px; }
.pk-opt { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--line); font-size: 14px; cursor: pointer; }
.pk-opt b { flex: 1; font-weight: 500; }
.pk-opt u { text-decoration: none; font-weight: 700; color: var(--text); background: color-mix(in srgb, #5b8def 25%, transparent); border-radius: 3px; }
.pk-opt small { font: 500 10px var(--mono); color: var(--text-3); }
.pk-opt.is-sel, .pk-opt:hover { background: color-mix(in srgb, #5b8def 14%, transparent); }
.pk-opt.is-new b { color: #5b8def; font-weight: 600; }
.pk-forget { background: none; border: 0; color: var(--text-3); cursor: pointer; font-size: 12px; padding: 0 2px; }
.pk-forget:hover { color: var(--danger); }
@media (max-width: 700px) {
  .pk-minus { opacity: 1; width: 30px; height: 30px; font-size: 17px; }
}

/* ---------- the crew link for somebody who also packs or edits: Home · Crew · Packing · Edits ---------- */
.cp-seg { display: flex; background: #18181a; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; padding: 3px; margin: 0 0 12px; }
.cp-seg button { flex: 1; padding: 8px 4px; border-radius: 8px; border: 0; background: none; color: #a1a1aa; font: 600 13px var(--sans); cursor: pointer; }
.cp-seg button.is-on { background: #f4f4f5; color: #0f0f10; }
.cp-hcard { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: #18181a; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 13px 14px; margin-bottom: 9px; color: #f4f4f5; cursor: pointer; font-family: var(--sans); }
.cp-hcard.is-hot { background: linear-gradient(160deg, #3a0d10, #1a0d10 60%, #18181a); border-color: rgba(237,28,36,.42); }
.cp-hic { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.07); display: grid; place-items: center; font-size: 20px; flex: none; }
.cp-htx { flex: 1; min-width: 0; display: block; }
.cp-htx b { display: block; font-size: 15px; }
.cp-htx small { display: block; color: #a1a1aa; font-size: 12.5px; margin-top: 2px; }
.cp-htx small.is-late { color: #ff6b70; }
.cp-hk { display: block; font: 700 9.5px var(--mono); letter-spacing: .14em; color: #ff6b70; margin-bottom: 3px; }
.cp-hbig { display: block; font-size: 26px; font-weight: 800; line-height: 1; margin: 2px 0; }
.cp-hbar { display: block; height: 5px; border-radius: 99px; background: #232a33; margin-top: 7px; overflow: hidden; }
.cp-hbar i { display: block; height: 100%; background: #4ade80; }
.cp-hgo { color: #63636b; font-size: 20px; flex: none; }
.cp-link { background: none; border: 0; padding: 0; color: #ff6b70; font: inherit; text-decoration: underline; cursor: pointer; }
.cp-login .cp-lab { font: 600 9.5px var(--mono); letter-spacing: .14em; color: #63636b; margin: 12px 0 6px; }
.cp-in { width: 100%; box-sizing: border-box; padding: 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.15); background: #0f0f10; color: #f4f4f5; font: 16px var(--sans); }
.cp-in:focus { outline: none; border-color: #5b8def; }
.cp-err { color: #ff6b70; font-size: 13.5px; margin: 10px 0 0; }
.cp-err:empty { display: none; }
.cp-body.is-wide { max-width: 1240px; }
.cp-acct { color: var(--text); }
.cp-acct .pk-job:first-child .pk-head { margin-top: 0; }
@media (min-width: 900px) {
  /* on a computer the jobs sit as tabs on top, like the planner */
  .cp-tabs { position: sticky; top: 0; bottom: auto; padding: 8px; border-top: 0; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(14,17,22,.96); }
  .cp-tabs button { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; max-width: 170px; padding: 8px 0; border-radius: 9px; }
  .cp-tabs button.is-on { background: #232326; }
  .cp-tabs i { display: inline; font-size: 16px; margin: 0; }
  .cp .cp-body { padding-bottom: 60px; }
}
/* on a phone the name and its note wrap rather than being cut short */
.pk-line .gl-what { white-space: normal; overflow: visible; text-overflow: clip; min-width: 0; }
.pk-off { white-space: normal; }
.pk-chipoff { text-decoration: line-through; color: var(--text-3); }
/* the producer's pack list: the number is a button */
.gl-qtybtn { background: none; border: 0; padding: 2px 4px; margin: -2px -4px; border-radius: 5px; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.gl-qtybtn:hover, .gl-qtybtn:focus-visible { background: var(--track); color: #fff; }
.gl-qtybtn:hover s, .gl-qtybtn:focus-visible s { color: rgba(255,255,255,.55); }
/* on the light theme white would vanish: the darkest text instead */
:root[data-theme="light"] .gl-qtybtn:hover, :root[data-theme="light"] .gl-qtybtn:focus-visible { color: var(--text); }
.gl-qtyrows .pk-cnt { margin: 0 0 8px; }
.gl-qtywho { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gl-qtyl { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); display: grid; place-items: center; font: 700 9px var(--mono); }
.gl-qtyl.is-all { width: auto; padding: 0 5px; border-radius: 5px; border-color: var(--line-control); color: var(--text-2); }
.gl-what .pk-by, .gl-what .pk-offtag { margin-left: 8px; }

/* ---------- the event page (#/v/...) ---------- */
.eh-bar.is-bare { margin-top: 14px; }
.ev-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 14px; }
.ev-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ev-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ev-grid + .ev-card { margin-top: 14px; }
.ev-ch { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ev-ch > b { font-size: 15px; font-weight: 700; }
.ev-ch > span { font: 600 9.5px var(--mono); letter-spacing: .14em; color: var(--text-2); }
.ev-link { margin-left: auto; font: 600 12.5px var(--sans); color: var(--accent); background: none; border: 0; cursor: pointer; padding: 0; }
.ev-link:hover { text-decoration: underline; }
.ev-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ev-f { padding: 11px 16px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); min-width: 0; }
.ev-f:nth-child(3n) { border-right: 0; }
.ev-f.is-wide { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
.ev-f small { display: block; font: 600 9px var(--mono); letter-spacing: .14em; color: var(--text-3); margin-bottom: 3px; }
.ev-f b { font-size: 14px; font-weight: 600; }
.ev-f b.is-line { display: block; }
/* for next year: the notes card, and last year's notes at the top of the next edition */
.ny-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.ny-tag { font: 700 9px var(--mono); letter-spacing: .08em; padding: 4px 6px; border-radius: 5px; background: var(--track); color: var(--text-2); white-space: nowrap; min-width: 82px; text-align: center; border: 0; margin-top: 1px; }
.ny-tag.is-cam { color: #5b8def; background: rgba(91,141,239,.12); }
.ny-tag.is-gear { color: #e0a63d; background: rgba(224,166,61,.12); }
.ny-tag.is-crew { color: #2b8f52; background: rgba(43,143,82,.14); }
select.ny-cat { appearance: none; -webkit-appearance: none; cursor: pointer; text-align-last: center; }
select.ny-cat:disabled { cursor: default; opacity: 1; }
.ny-txt { flex: 1; min-width: 0; }
.ny-txt .ev-in { display: block; }
.ny-by { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.ny-row.is-crew .ny-by { color: #2b8f52; }
.ny-x { background: none; border: 0; color: var(--text-3); font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 4px; }
.ny-x:hover { color: var(--danger); }
.ny-add { display: flex; gap: 8px; padding: 10px 16px; align-items: center; border-bottom: 1px solid var(--line); }
.ny-add .input { flex: 1; height: 32px; min-width: 0; }
.ny-add .ny-addcat { width: 128px; height: 32px; }
.ev-card.ny-wide { margin-top: 14px; }
.ly { margin-top: 14px; border: 1px solid rgba(91,141,239,.45); background: color-mix(in srgb, #5b8def 7%, var(--panel)); border-radius: 14px; overflow: hidden; }
.ly-h { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ly-h b { font-size: 15px; }
.ly-h span { font: 600 9.5px var(--mono); letter-spacing: .14em; color: #5b8def; }
.ly .ny-row { align-items: center; padding: 9px 16px; }
.ly .ny-row:last-child { border-bottom: 0; }
.ny-done { font: 700 9.5px var(--mono); letter-spacing: .06em; border: 1px solid var(--line-control); background: none; color: var(--text-2); border-radius: 6px; padding: 4px 8px; cursor: pointer; white-space: nowrap; }
.ny-done:disabled { cursor: default; }
.ny-row.is-done .ny-txt { color: var(--text-3); text-decoration: line-through; }
.ny-row.is-done .ny-done { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.ly.is-short { margin: 10px 0 12px; border-radius: 12px; }
.ly.is-short .ly-h { padding: 8px 14px 0; border-bottom: 0; }
.ly.is-short .ly-h b { font: 700 9.5px var(--mono); letter-spacing: .12em; color: #5b8def; text-transform: uppercase; }
.ly.is-short .ny-row { padding: 6px 14px 9px; border-bottom: 0; }
.ev-in { margin: -3px -7px; padding: 3px 7px; border-radius: 7px; cursor: text; }
.ev-in + .ev-in { margin-top: -1px; }
.ev-in:not(.is-editing):hover { background: color-mix(in srgb, var(--text) 6%, transparent); box-shadow: inset 0 0 0 1px var(--line-control); }
.ev-in.is-editing { cursor: default; padding-block: 4px; }
.ev-in-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); }
.ev-in-row + .ev-in-row { margin-top: 6px; }
.ev-in .input, .ev-in .select { height: 30px; padding: 4px 8px; font-size: 13.5px; }
.ev-in .ev-in-number { width: 58px; }
.ev-in .ev-in-time { width: 66px; font-family: var(--mono); }
.ev-in .ev-in-sel { width: auto; min-width: 120px; }
.ev-in .ev-in-area { width: 100%; height: auto; min-height: 72px; resize: vertical; font-size: 13.5px; line-height: 1.45; }
.ev-in-hint { margin: 5px 0 0 !important; font-size: 11px !important; color: var(--text-3) !important; }
.ev-f b.is-quiet, .ev-card .is-quiet { color: var(--text-3); font-weight: 500; }
.ev-f p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-2); }
.ev-f p.ev-notes { color: var(--text); white-space: pre-line; font-size: 13.5px; }
.ev-prov { display: grid; grid-template-columns: 170px 112px minmax(0, 1fr); }
.ev-pr { display: contents; }
.ev-pr > * { padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; min-height: 46px; }
.ev-pr[onclick], .ev-pr > * { cursor: default; }
.ev-pr:hover > * { background: color-mix(in srgb, var(--text) 3%, transparent); cursor: pointer; }
.ev-pk { gap: 9px; font-weight: 600; font-size: 13.5px; }
.ev-pk i { font-style: normal; width: 22px; text-align: center; font-size: 16px; }
.ev-pv { flex-direction: column; align-items: flex-start !important; justify-content: center; gap: 2px; font-size: 13.5px; min-width: 0; }
.ev-pv small { color: var(--text-2); font-size: 12px; white-space: pre-line; }
.ev-pre { white-space: pre-line; }
.ev-pr.is-no .ev-pk, .ev-pr.is-no .ev-pv { color: var(--text-3); }
.ev-yn { display: inline-flex; border: 1px solid var(--line-control); border-radius: 7px; overflow: hidden; }
.ev-yn button { font: 700 9.5px var(--mono); padding: 5px 7px; border: 0; background: none; color: var(--text-3); cursor: pointer; }
.ev-yn button:disabled { cursor: default; }
.ev-yn button.is-on.is-true { background: #2b8f52; color: #fff; }
.ev-yn button.is-on.is-false { background: var(--line-control); color: var(--text); }
.ev-yn button.is-on.is-null { background: #e0a63d; color: #0f0f10; }
.ev-times { display: flex; flex-wrap: wrap; gap: 4px; }
.ev-tm { font: 600 11px var(--mono); background: var(--track); border-radius: 5px; padding: 2px 6px; }
.ev-tm em { font-style: normal; color: var(--text-2); margin-right: 5px; }
.ev-map { max-width: 160px; max-height: 90px; border-radius: 6px; margin-top: 6px; border: 1px solid var(--line); background: #fff; }
.ev-mapedit { display: flex; align-items: center; gap: 12px; }
.ev-mapedit .ev-map { margin-top: 0; }
.ev-flow { margin: 0; padding: 10px 16px; font-size: 12px; color: var(--text-2); background: color-mix(in srgb, #5b8def 8%, transparent); }
.ev-flow b { color: var(--text); }
.ev-tedit { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ev-trow { display: flex; align-items: center; gap: 6px; }
.ev-trow .select { width: 96px; }
.ev-trow .ev-hm { width: 70px; }
.ev-dl { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; cursor: pointer; }
.ev-dl:last-child, .ev-ct:last-child { border-bottom: 0; }
.ev-dl:hover, .ev-ct[onclick]:hover, .ev-ct:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.ev-dld { font: 600 11px var(--mono); width: 54px; color: var(--text-2); }
.ev-dln { flex: 1; }
.ev-dl.is-done .ev-dln { color: var(--text-3); }
.ev-pill { font: 700 9.5px var(--mono); letter-spacing: .05em; border-radius: 6px; padding: 3px 7px; white-space: nowrap; }
.ev-pill.is-late { color: #ff6b70; background: rgba(237,28,36,.12); }
.ev-pill.is-soon { color: #ffb020; background: rgba(255,176,32,.12); }
.ev-pill.is-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.ev-pill.is-done, .ev-pill.is-none { color: var(--text-2); background: var(--track); }
.ev-ct { display: flex; align-items: center; gap: 11px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.ev-ct[onclick] { cursor: pointer; }
.ev-av { width: 34px; height: 34px; border-radius: 50%; background: var(--track); display: grid; place-items: center; font: 700 12px var(--sans); flex: none; }
.ev-ctt { flex: 1; min-width: 0; font-size: 13.5px; }
.ev-ctt small { display: block; color: var(--text-2); font-size: 12px; }
.ev-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--track); display: grid; place-items: center; font-size: 13px; text-decoration: none; color: var(--text); flex: none; }
.ev-empty { margin: 0; padding: 12px 16px; color: var(--text-3); font-size: 13px; }
.ev-drop { margin: 14px 16px; border: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 5%, transparent);
  border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 16px; cursor: pointer; flex-wrap: wrap; }
.ev-drop.is-over { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ev-drop.is-off { cursor: default; opacity: .6; border-color: var(--line-control); }
.ev-drop b { display: block; font-size: 14.5px; }
.ev-drop small { color: var(--text-2); font-size: 12.5px; }
.ev-dico { width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 15%, transparent); display: grid; place-items: center; font-size: 20px; flex: none; }
.ev-busy { margin-left: auto; width: 360px; max-width: 100%; background: var(--page); border: 1px solid var(--line-control); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; cursor: default; }
.ev-busy[hidden] { display: none; }
.ev-busy i { display: block; height: 5px; border-radius: 99px; background: var(--track); margin-top: 7px; overflow: hidden; }
.ev-busy u { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.ev-busy small { display: block; margin-top: 5px; font-size: 11.5px; }
.ev-doc { padding: 6px 16px 14px; border-top: 1px solid var(--line); }
.ev-dh { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.ev-dh b { font-size: 14.5px; }
.ev-dh small { display: block; font-size: 11.5px; color: var(--text-2); }
.ev-pdf { width: 28px; height: 34px; border-radius: 5px; background: var(--accent); color: #fff; font: 800 8px var(--mono); display: grid; place-items: center; flex: none; }
.ev-dact { margin-left: auto; display: flex; gap: 6px; }
.ev-dact button, .ev-dact a { font: 500 12px var(--sans); color: var(--text-2); background: none; border: 1px solid var(--line-control); border-radius: 7px; padding: 5px 9px; cursor: pointer; text-decoration: none; }
.ev-dact button:hover, .ev-dact a:hover { color: var(--text); }
.ev-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ev-tile { position: relative; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #fff; outline: 1px solid var(--line-control); cursor: zoom-in; }
.ev-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ev-tile span { position: absolute; left: 5px; bottom: 4px; font: 700 9px var(--mono); color: #fff; background: rgba(0,0,0,.65); border-radius: 4px; padding: 1px 5px; }
.ev-tile:hover { outline: 2px solid var(--accent); }
.ev-more { margin-top: 8px; background: none; border: 0; color: var(--text-2); font: 500 12.5px var(--sans); cursor: pointer; padding: 0; }
.ev-more:hover { color: var(--text); }
.ev-view { position: fixed; inset: 0; z-index: 80; background: rgba(5,6,8,.96); display: flex; align-items: center; justify-content: center; }
.ev-vstage { position: absolute; inset: 52px 70px 24px; display: flex; align-items: center; justify-content: center; }
.ev-vimg { max-width: 100%; max-height: 100%; border-radius: 6px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.ev-vtop { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; font: 600 11px var(--mono); letter-spacing: .12em; color: #d4d4d8; }
.ev-vact { display: flex; gap: 10px; align-items: center; }
.ev-vact a { color: #d4d4d8; text-decoration: none; letter-spacing: .08em; }
.ev-vact button { width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; }
.ev-varr { position: absolute; top: 50%; margin-top: -24px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: #fff; font-size: 26px; cursor: pointer; z-index: 2; }
.ev-varr.is-l { left: 14px; } .ev-varr.is-r { right: 14px; }
@media (max-width: 900px) {
  .ev-grid { grid-template-columns: 1fr; }
  .ev-facts { grid-template-columns: 1fr 1fr; }
  .ev-f:nth-child(3n) { border-right: 1px solid var(--line); }
  .ev-f:nth-child(2n) { border-right: 0; }
  .ev-prov { grid-template-columns: 1fr auto; }
  .ev-pv { grid-column: 1 / -1; padding-top: 0 !important; min-height: 0 !important; }
  .ev-pr > .ev-pk, .ev-pr > .ev-pyc { border-bottom: 0; }
  .ev-tiles { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .ev-vstage { inset: 52px 8px 24px; }
  .ev-varr { display: none; }
}
.cp-times { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 8px; }
.cp-tm { font: 600 12px var(--mono); background: rgba(255,255,255,.07); border-radius: 6px; padding: 4px 8px; color: #f4f4f5; }
.cp-tm em { font-style: normal; color: #a1a1aa; margin-right: 6px; }
/* the event page's add and edit: a big red +, a big pencil */
.ev-act { margin-left: auto; width: 34px; height: 34px; flex: none; border-radius: 9px; border: 1px solid var(--line-control); background: none; display: grid; place-items: center; cursor: pointer; align-self: center; }
.ev-act svg { width: 18px; height: 18px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ev-act.is-plus { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ev-act.is-plus svg { stroke: var(--accent); width: 20px; height: 20px; stroke-width: 2.6; }
.ev-act.is-plus:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.ev-act.is-pencil { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ev-act.is-pencil svg { stroke: var(--accent); }
.ev-act.is-pencil:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.ev-ch { align-items: center; }
.ev-dots { width: 30px; height: 30px; flex: none; border-radius: 8px; border: 0; background: none; color: var(--text-2); font-size: 18px; line-height: 1; cursor: pointer; }
.ev-dots:hover { background: var(--track); color: var(--text); }
.cs-onevent { font-size: 12.5px; color: var(--text-2); background: color-mix(in srgb, #5b8def 8%, transparent); border-radius: 8px; padding: 8px 10px; margin: 4px 0 8px; line-height: 1.45; }
.cs-onevent a { color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
/* accreditation, parking, media cabin: no switch, the words start after the name */
.ev-pv.is-span { grid-column: span 2; }
@media (max-width: 900px) { .ev-pv.is-span { grid-column: 1 / -1; } }
/* Epic's production team: full width, in columns like on the call sheet */
.ev-tm-r { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 66px 26px;
  align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.ev-tm-r:last-child { border-bottom: 0; }
.ev-tm-r.has-rv { grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1.25fr) 66px 26px; }
.ev-tm-rv .ev-rv { margin-left: 0; }
.ev-tm-r[onclick] { cursor: pointer; }
.ev-tm-r:not(.is-head):hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.ev-tm-r.is-head { padding-top: 8px; padding-bottom: 6px; font: 600 9px var(--mono); letter-spacing: .14em; color: var(--text-3); }
.ev-tm-r b { font-weight: 600; }
.ev-tm-r a { color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-tm-r a:hover { text-decoration: underline; }
.ev-tm-pos { color: var(--accent); font-weight: 600; }
.ev-tm-pos small { color: var(--text-3); font-weight: 400; font-size: inherit; }
.ev-tm-lang { color: var(--text-2); }
.ev-tm-ic { display: flex; gap: 6px; }
.ev-tm-r > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-tm-r > .ev-tm-ic { overflow: visible; }

/* ---------- the teams on one line-up: Overview · Livesets · Aftermovie ---------- */
.team-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line-control); border-radius: 10px; background: var(--panel); }
.team-seg button { display: inline-flex; align-items: center; gap: 7px; font: 600 13px var(--sans); color: var(--text-2); background: none; border: 0; border-radius: 7px; padding: 6px 13px; cursor: pointer; }
.team-seg button:hover { color: var(--text); }
.team-seg button i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.team-seg button i.is-rec { background: var(--accent); }
.team-seg button i.is-am { background: var(--am); }
.team-seg button em { font: 700 10px var(--mono); font-style: normal; opacity: .75; }
.team-seg button.is-on { background: var(--text); color: var(--page); }
.team-seg button.is-on.is-aftermovie { background: var(--am); color: var(--am-ink); }
.team-seg button.is-on i { box-shadow: 0 0 0 1.5px var(--page); }
.team-seg button.is-on.is-aftermovie i { background: var(--am-ink); box-shadow: none; }

/* the timetable's aftermovie tab: the same strip and table, orange */
.tt-bar i.is-am { background: rgba(255,122,26,.62); }
.tt-bar i.is-am.is-alt { background: rgba(255,122,26,.44); }
.tt-count .is-am, .tt-day-c span.is-am, .am-count-m { color: var(--am); }
/* the same columns as the liveset tab; the extra info rides along after the act */
.am-actc { display: flex; align-items: center; gap: 10px; min-width: 0; }
.am-actc .tt-act { flex: 0 1 auto; }
.am-actc .am-info { flex: 0 1000 auto; min-width: 40px; }
.tt-row.am-row .tt-len i { background: rgba(255,122,26,.65); }
.tt-row.am-row.is-noam .tt-time, .tt-row.am-row.is-noam .tt-act b { color: var(--text-2); }
.tt-row.am-row.is-noam .tt-len i { background: #2e2e33; }
.tt-row.am-row.is-special { background: rgba(255,176,32,.10); }
.tt-row.am-row.is-special .tt-time, .tt-row.am-row.is-special .tt-to { color: var(--special); }
.tt-row.am-row.is-special .tt-act b { font: 700 11.5px var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--special); }
.tt-row.am-row.is-special .tt-len i { background: var(--special); }
.am-pill { justify-self: end; font: 700 9.5px var(--mono); letter-spacing: .1em; color: var(--am); padding: 5px 10px; border-radius: 999px; border: 1px solid var(--am-line); background: var(--am-wash); cursor: pointer; white-space: nowrap; }
.am-pill.is-off { color: var(--text-3); border-color: var(--line-control); background: transparent; }
/* the aftermovie timetable: AFTERMOVIE · KEY · LIVE, three marks in columns
   of their own, the pills one width and centred (Stijn, 23 Oct 2026) */
.tt-cols.am-row, .tt-row.am-row { grid-template-columns: 132px 124px minmax(0, 1fr) 104px 34px 76px 34px; }
.tt-cols.am-row .is-mid { text-align: center; }
.tt-row.am-row .am-pill { justify-self: center; width: 100px; text-align: center; padding-left: 0; padding-right: 0; }
.tt-row.am-row .am-pill.is-live { width: 70px; }
.tt-row.am-row .tt-star { justify-self: center; }
.am-pill.is-off { border-style: dashed; }
.am-livebox { border: 1px solid var(--am-line); background: var(--am-wash); border-radius: 12px; padding: 12px 14px; margin-top: 12px; }
.am-lb-r { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--am-line); margin-top: 8px; }
.am-lb-t { font: 600 11px var(--mono); color: var(--text-2); }
.am-lb-n b { display: block; font: 600 13px var(--sans); color: var(--text); }
.am-lb-n small { display: block; font: 500 11px var(--sans); color: var(--text-3); }
.am-lb-go { border: 0; background: none; padding: 0; font: 600 12px var(--sans); color: var(--am); cursor: pointer; white-space: nowrap; }
.am-lb-no { font: 500 11px var(--sans); color: var(--text-3); }
.am-pill:hover:not(:disabled) { border-color: var(--am); color: var(--am); }
/* what is not in it stays quiet until the row is pointed at - the sets that
   are in it are what the eye should find. On a touch screen it stays as it is. */
@media (hover: hover) {
  .tt-rec.is-off { border-color: transparent; opacity: .45; }
  .tt-row:hover .tt-rec.is-off, .tt-rec.is-off:focus-visible { border-color: var(--line-control); opacity: 1; }
}
.am-info { justify-self: start; max-width: 100%; font: 500 12px var(--sans); color: var(--text-list); background: var(--track); border: 1px solid transparent; border-radius: 6px; padding: 3px 9px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.am-info.is-empty { background: transparent; border: 1px dashed var(--line-control); color: var(--text-3); opacity: 0; }
.tt-row:hover .am-info.is-empty, .am-info.is-empty:focus-visible { opacity: 1; }
.am-info:hover:not(:disabled) { border-color: var(--line-soft); }
.tt-lbl.is-am { color: var(--am); }
.am-box { margin-top: 12px; padding: 12px; border: 1px solid var(--am-line); background: var(--am-wash); border-radius: 10px; }
.am-box .tt-recbox-h b { font: 600 13px var(--mono); }
.tt-rectime { margin: 8px 0 2px; font: 500 12px var(--mono); color: var(--text-2); letter-spacing: .04em; }
.tt-rectime b { font: 600 22px var(--mono); color: var(--text); letter-spacing: 0; }
.tt-meter.is-am { margin-bottom: 2px; }
.tt-meter.is-am i { background: var(--am); }
.am-side-sec { margin-top: 18px; display: flex; flex-direction: column; }
.am-side-sec .tt-lbl { margin-bottom: 4px; }
.am-x { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); text-align: left; cursor: pointer; font-size: 13px; }
.am-x:disabled { cursor: default; }
.am-x-t { font: 600 11.5px var(--mono); color: var(--am); }
.am-x-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-x small { color: var(--text-3); font-size: 11.5px; }
.am-note { display: flex; flex-direction: column; gap: 3px; width: 100%; margin-top: 16px; padding: 11px 12px; border: 1px solid var(--line-control); border-radius: 10px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.am-note.is-empty { border-style: dashed; }
.am-note small { color: var(--text-3); font-size: 11px; }
.am-note-t { margin-top: 5px; font-size: 12.5px; line-height: 1.55; white-space: pre-line; color: var(--text-list); }
.am-note-t.is-empty { color: var(--text-3); }
.am-note:disabled { cursor: default; }

/* the overview: the teams side by side */
.ov-stage { padding: 0 0 14px; }
.ov-lanes { padding: 0 18px; }
.ov-lane { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 10px; margin-bottom: 6px; }
.ov-bar { height: 16px; border-radius: 4px; }
.ov-lbl { display: flex; align-items: center; gap: 7px; font: 700 9.5px var(--mono); letter-spacing: .12em; }
.ov-lbl i { width: 7px; height: 7px; border-radius: 50%; }
.ov-lbl.is-rec { color: var(--accent); } .ov-lbl.is-rec i { background: var(--accent); }
.ov-lbl.is-am { color: var(--am); } .ov-lbl.is-am i { background: var(--am); }
.tt-bar i.is-rec { background: rgba(237,28,36,.58); }
.tt-bar i.is-rec.is-alt { background: rgba(237,28,36,.40); }
.ov-ticks { margin-left: 122px; }
.ov-sp { padding: 16px 18px; }
.ov-sp-r { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.ov-sp .tt-lbl + .ov-sp-r { margin-top: 8px; }
.ov-sp-t { font: 700 12px var(--mono); color: var(--special); }
.ov-sp-r b { font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--special); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-sp-r small { color: var(--text-3); font-size: 12px; }
.ov-sp-w { display: flex; gap: 5px; }
.ov-tag { font: 700 9px var(--mono); letter-spacing: .1em; border-radius: 999px; padding: 3px 8px; }
.ov-tag.is-rec { color: var(--accent); border: 1px solid var(--accent-line); }
.ov-tag.is-am { color: var(--am); border: 1px solid var(--am-line); }
.ov-tiles { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; }
.ov-tile { display: block; padding: 15px 16px; border-left: 4px solid var(--accent); text-decoration: none; color: var(--text); }
.ov-tile.is-am { border-left-color: var(--am); }
.ov-tile:hover { border-color: var(--line-soft); }
.ov-tile.is-rec:hover { border-left-color: var(--accent); } .ov-tile.is-am:hover { border-left-color: var(--am); }
.ov-t1 { display: flex; align-items: center; font: 700 15px var(--sans); }
.ov-t1 span { margin-left: auto; font: 600 12px var(--sans); color: var(--accent); }
.ov-tile.is-am .ov-t1 span { color: var(--am); }
.ov-big { font: 800 26px var(--mono); margin: 8px 0 4px; }
.ov-big small { font: 500 12px var(--sans); color: var(--text-2); margin-left: 8px; }
.ov-li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--text-2); }
.ov-li b { font: 600 12.5px var(--mono); color: var(--text); }
.ov-li.is-warn b { color: var(--danger); }

/* the schedule's aftermovie tab */
.am-count { font: 700 11.5px var(--mono); color: var(--am); white-space: nowrap; }
.am-count.is-ok, .am-n.is-ok, .am-sheet-t em.is-ok { color: var(--ok); }
.am-view { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line-control); border-radius: 999px; background: var(--panel); }
.am-view button { font: 600 12.5px var(--sans); color: var(--text-2); background: none; border: 0; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.am-view button.is-on { background: var(--text); color: var(--page); }
.am-notebar { display: flex; align-items: baseline; gap: 12px; width: 100%; margin: 4px 0 14px; padding: 10px 14px; border: 1px solid var(--line-control); border-radius: 10px; background: transparent; color: var(--text); text-align: left; cursor: pointer; font-size: 13px; line-height: 1.5; }
.am-notebar b { font: 700 9.5px var(--mono); letter-spacing: .13em; color: var(--text-3); white-space: nowrap; }
.am-notebar span { white-space: pre-line; }
.am-notebar.is-empty { border-style: dashed; color: var(--text-3); }
.am-notebar:disabled { cursor: default; }
.am-plan { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 14px; align-items: start; }
.am-list { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.am-lh { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.am-lh b { font: 700 10px var(--mono); letter-spacing: .14em; color: var(--text-2); }
.am-n { font: 700 11px var(--mono); color: var(--am); }
.am-lt { display: flex; gap: 5px; padding: 9px 14px 6px; }
.am-lt button { font: 500 11.5px var(--sans); color: var(--text-3); background: none; border: 1px solid var(--line-control); border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.am-lt button.is-on { color: var(--text); border-color: var(--text-3); }
.am-lr { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 14px; border-bottom: 1px solid var(--line); }
.am-lr-t { font: 600 11.5px var(--mono); color: var(--text-2); }
.am-lr-x { min-width: 0; }
.am-lr-x b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-lr-x.is-edit { cursor: pointer; }
.am-lr-x.is-edit:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--text-3); }
.am-lr-x small { display: block; font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-lr.is-given b { color: var(--text-2); font-weight: 500; }
.am-lr.is-special { background: rgba(255,176,32,.07); }
.am-lr.is-special .am-lr-t, .am-lr.is-special b { color: var(--special); }
.am-lr.is-extra small { font-style: italic; }
.am-chips { display: flex; gap: 3px; }
.am-av { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-control); background: transparent; color: var(--text-3); font: 700 9.5px var(--sans); display: grid; place-items: center; padding: 0; cursor: pointer; flex: none; }
.am-av:hover:not(:disabled) { border-color: var(--text-2); color: var(--text); }
.am-av.is-on { background: var(--text); border-color: var(--text); color: var(--page); }
.am-av:disabled { cursor: default; }
.am-av.is-head { width: 24px; height: 24px; color: var(--text-list); border-color: var(--line-soft); cursor: default; }
.am-chips.is-small .am-av { width: 21px; height: 21px; font-size: 8.5px; }
.am-hint, .am-empty { margin: 0; padding: 11px 14px; font-size: 11.5px; line-height: 1.55; color: var(--text-3); }
.am-hint b { color: var(--text-list); font-weight: 600; }
.am-tl { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; position: sticky; top: 12px; }
.am-tl.is-empty { padding: 40px; text-align: center; color: var(--text-3); }
.am-tl-h, .am-tl-b { display: grid; }
.am-tl-h { border-bottom: 1px solid var(--line); }
.am-tl-h > div { display: flex; align-items: center; gap: 8px; padding: 10px; border-left: 1px solid var(--line); min-width: 0; }
.am-tl-h b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-tl-h small { margin-left: auto; font: 600 10px var(--mono); color: var(--text-3); white-space: nowrap; }
.am-tl-b { position: relative; }
.am-gut { position: relative; }
.am-gut span { position: absolute; right: 8px; transform: translateY(-6px); font: 600 9.5px var(--mono); color: var(--text-3); }
.am-lane { position: relative; border-left: 1px solid var(--line); background-image: linear-gradient(to bottom, var(--line) 0, var(--line) 1px, transparent 1px); background-repeat: repeat-y; }
.am-bk { position: absolute; z-index: 2; border-radius: 7px; background: var(--raised-2, #1d1d20); border: 1px solid var(--line-control); padding: 6px 8px; overflow: hidden; }
.am-bk.is-extra { border-style: dashed; }
.am-bk.is-special { background: rgba(255,176,32,.10); border-color: rgba(255,176,32,.55); }
.am-bk.is-special b, .am-bk.is-special small { color: var(--special); }
.am-bk b { display: block; font-size: 12px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-bk small { display: block; font-size: 10.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-bk em { display: inline-block; margin-top: 4px; font-style: normal; font-size: 10px; color: var(--text-list); background: var(--track); border-radius: 4px; padding: 1px 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-with { display: block; margin-top: 3px; font-size: 10px; color: var(--text-2); }
.am-same { position: absolute; left: 3px; right: 3px; border: 1px dashed var(--line-dashed); border-radius: 9px; }
.am-tl-empty { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; pointer-events: none; }
.am-tl-empty > div { max-width: 360px; text-align: center; padding: 18px 24px; border: 1px dashed var(--line-control); border-radius: 12px; background: var(--panel); color: var(--text-3); font-size: 13px; line-height: 1.6; }
.am-tl-empty b { display: block; color: var(--text); font-size: 15px; margin-bottom: 4px; }
.am-sheets { display: flex; flex-direction: column; gap: 14px; }
.am-sheet { background: var(--panel); border: 1px solid var(--line-control); border-radius: 12px; overflow: hidden; }
.am-sheet-t { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px; border-bottom: 1px solid var(--line-control); }
.am-sheet-t b { font-size: 15px; }
.am-sheet-t span { font-size: 12.5px; color: var(--text-2); }
.am-sheet-t em { font: 700 11px var(--mono); font-style: normal; color: var(--am); }
.am-sheet-n { display: block; width: 100%; padding: 9px 14px; border: 0; border-bottom: 1px solid var(--line-control); background: transparent; color: var(--text); text-align: left; font-size: 12.5px; line-height: 1.55; white-space: pre-line; cursor: pointer; }
.am-sheet-n.is-empty { color: var(--text-3); }
.am-sheet-n:disabled { cursor: default; }
.am-sheet-n b { display: block; font: 700 9.5px var(--mono); letter-spacing: .12em; color: var(--text-3); margin-bottom: 2px; }
.am-table { width: 100%; border-collapse: collapse; }
.am-table th { font: 700 9.5px var(--mono); letter-spacing: .12em; color: var(--text-2); text-align: left; padding: 8px 12px; background: var(--raised); border-bottom: 1px solid var(--line-control); }
.am-table td { padding: 7px 12px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); font-size: 12.5px; vertical-align: middle; }
.am-table td:last-child { border-right: 0; }
.am-table tr:last-child td { border-bottom: 0; }
.am-st-t { font: 600 12px var(--mono); white-space: nowrap; width: 1%; color: var(--text-list); }
.am-st-a { color: var(--text-2); white-space: nowrap; width: 1%; }
.am-st-x { font-weight: 600; }
.am-st-i { color: var(--text-2); }
.am-st-w { width: 1%; }
.am-table tr.is-special td { background: rgba(255,176,32,.09); }
.am-table tr.is-special .am-st-t, .am-table tr.is-special .am-st-x { color: var(--special); }
.am-table tr.is-extra .am-st-x { font-style: italic; font-weight: 500; }
.am-per-h { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.am-per-h b { font: 700 10.5px var(--mono); letter-spacing: .14em; color: var(--text-2); }
.am-per-h span { font-size: 12px; color: var(--text-3); }
.am-per { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.am-sheet.is-one .am-sheet-t b { font-size: 14px; }
@media (max-width: 1100px) { .am-plan { grid-template-columns: 1fr; } .am-tl { position: static; } .am-per { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { .ov-tiles { position: static; } }
:root[data-theme="light"] .am-bk { background: #fff; }
:root[data-theme="light"] .tt-row.am-row.is-special, :root[data-theme="light"] .am-lr.is-special, :root[data-theme="light"] .am-table tr.is-special td { background: rgba(255,176,32,.14); }


/* the crew page: an aftermovie shooter's sheet - small, so a whole night fits across a phone */
.cp-amnote { margin: 14px 0 10px; padding: 9px 12px; border: 1px solid rgba(240,160,75,.35); background: rgba(240,160,75,.07); border-radius: 12px; font-size: 12.5px; line-height: 1.5; color: #fde2c2; white-space: pre-line; }
.cp-amnote b { display: block; font: 700 9px var(--mono); letter-spacing: .14em; color: #f0a04b; margin-bottom: 2px; }
.cp-amsheet { margin-top: 12px; background: #141416; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; overflow: hidden; }
.cp-amsheet-t { text-align: center; font: 650 12.5px var(--sans); padding: 7px; border-bottom: 1px solid rgba(255,255,255,.1); color: #f4f4f5; }
.cp-amsheet table { width: 100%; border-collapse: collapse; }
.cp-amsheet th { font: 700 7px var(--mono); letter-spacing: .1em; color: #a1a1aa; text-align: left; padding: 5px 4px; background: #1b1b1e; border-bottom: 1px solid rgba(255,255,255,.12); }
.cp-amsheet td { padding: 5px 4px; border-bottom: 1px solid rgba(255,255,255,.07); border-right: 1px solid rgba(255,255,255,.05); vertical-align: top; font-size: 9px; line-height: 1.3; color: #a1a1aa; }
.cp-amsheet td:last-child { border-right: 0; }
.cp-amsheet tr:last-child td { border-bottom: 0; }
.cp-am-t { font: 600 8.5px var(--mono); color: #d4d4d8 !important; white-space: nowrap; background: rgba(255,255,255,.025); }
.cp-am-x { font-weight: 650; font-size: 9.5px !important; color: #f4f4f5 !important; }
.cp-am-a { white-space: nowrap; }
.cp-amsheet tr.is-special td { background: rgba(255,176,32,.09); }
.cp-amsheet tr.is-special .cp-am-t, .cp-amsheet tr.is-special .cp-am-x { color: #ffb020 !important; }
.cp-amsheet tr.is-extra .cp-am-x { font-style: italic; font-weight: 500; }

/* ---------- the crew page on a phone: everything fits the width ---------- */
@media (max-width: 640px) {
  .bk-page .bk-main { padding: 14px 12px 16px; }
  .bk-page .bk-side { padding: 14px 12px; }
  .bk-card { padding: 12px 12px 10px; }
  .bk-card .bk-top { flex-wrap: wrap; row-gap: 6px; }
  .bk-card .bk-top .bk-id { flex: 1 1 140px; min-width: 0; }
  .bk-card .bk-top .spacer { display: none; }
  .bk-card .bk-top .bk-total { margin-left: auto; }
  .bk-fields { gap: 10px; }
  .bk-fields > .bk-f { min-width: 0; max-width: 100%; }
  .bk-fields > .bk-f.is-jobs, .bk-fields > .bk-f.is-info, .bk-fields > .bk-f.is-days { flex: 1 1 100%; max-width: none; }
  .bk-fields > .bk-f.is-money { flex: 1 1 0; width: auto; }
  .bk-jobs { flex-wrap: wrap; }
  .bk-f.is-days .book-days { flex-wrap: wrap; }
  .bk-card .dpill { min-width: 46px; }
  .bk-extra { grid-template-columns: 14px minmax(0, 1fr) 30px !important; }
  .bk-extra > .bk-in, .bk-extra > .bk-money { grid-column: 2 / 3; }
  .bk-page .bk-line { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; padding: 11px 10px; }
  .bk-page .bk-line > * { min-width: 0; }
  .bk-page .bk-line .bk-fn, .bk-page .bk-line .bk-mini { grid-column: 1 / -1; }
  .bk-mini { flex-wrap: wrap; }
  .bk-title .title-left { gap: 8px 12px; }
}

@media (max-width: 640px) {
  /* the team switch scrolls sideways instead of pushing the page wider */
  .team-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .team-seg::-webkit-scrollbar { display: none; }
  .team-seg button { flex: none; padding: 6px 10px; }
  /* the timetable keeps its full width - the names stay readable and the
     list scrolls sideways (Stijn: we can always scroll right) */
  .tt-stack { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tt-stage { min-width: 720px; }
  /* the aftermovie sheets: the tables scroll sideways in their own box */
  .am-sheet { overflow-x: auto; }
  .am-table { min-width: 520px; }
  .am-sheet-t { flex-wrap: wrap; }
  .am-plan .am-tl { overflow-x: auto; }
  .am-tl-h, .am-tl-b { min-width: 520px; }
}

/* the stage plans' day cards - the timetable's, with the day's own colour */
/* room between the day cards and the plan's toolbar under them */
.plan-days:has(.plan-dcards) { margin-bottom: 16px; row-gap: 8px; }
.plan-dcards { display: flex; gap: 10px; flex-wrap: wrap; }
/* the day cards sit under the stage buttons: the same small type, not the timetable's big cards */
.plan-dcard { position: relative; min-width: 150px; padding: 8px 40px 8px 13px; border-radius: 10px; }
.plan-dcard b { font: 600 12px var(--sans); }
.plan-dcard b { display: flex; align-items: center; gap: 8px; }
.plan-dcard .tt-day-c span { color: var(--text-2); }
/* one line per card now: the ··· sits beside the day, in the middle */
.plan-dcard .plan-day-dots { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); margin: 0; color: var(--text-3); font: 700 11px/1 var(--sans); letter-spacing: .12em; padding: 4px 5px; border-radius: 6px; }
.plan-dcard .plan-day-dots:hover { color: var(--text); background: var(--raised); }
.fn-used { font: 500 11px var(--mono); color: var(--text-3); white-space: nowrap; }
.is-functions .fn-row { display: grid !important; grid-template-columns: 18px minmax(0, 1fr) 70px auto; align-items: center; gap: 10px; }
.is-functions .fn-row > span[style] { display: none; }
.is-functions .fn-row .chip { white-space: nowrap; }
.fn-used { text-align: right; }
.is-functions .fn-row .input { width: 100%; min-width: 0; }
.is-functions .fn-row .chip { justify-self: start; }
.is-functions .fn-row .chip { width: 100%; justify-self: stretch; text-align: center; font-size: 11.5px; padding-left: 6px; padding-right: 6px; }
.fn-used { font-size: 10.5px; }
.fn-grip { color: var(--text-3); cursor: grab; letter-spacing: -2px; font-size: 15px; text-align: center; user-select: none; touch-action: none; padding: 6px 0; }
.fn-grip:hover { color: var(--text); }
.is-functions .fn-row.is-dragging { opacity: .85; background: var(--raised); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.is-functions .fn-row.is-dragging .fn-grip { cursor: grabbing; color: var(--text); }


/* ---------- crew booking: calm colours (Oct 2026, option A) ----------
   Red is Epic's colour, REC and warnings - on the crew page it made every
   booking shout. The days are white when somebody is on them (build days stay
   grey), and the team says itself with a small coloured dot. */
.dpill.is-on { background: #e4e4e7; color: #111113; border-color: transparent; }
.dpill-build.is-on, .dpill-debuild.is-on { background: var(--track); color: var(--text-2); border-color: var(--line-soft); }
.bk-d { background: var(--track); color: var(--text-list); }
.bk-d.is-build, .bk-d.is-debuild { background: transparent; border: 1px dashed var(--line-control); color: var(--text-3); }
.bk-jobt { display: inline-flex; align-items: center; gap: 6px; color: var(--text) !important; }
.bk-jobt::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--jc, var(--text-3)); flex: none; }
.bk-jobt.is-livesets { --jc: var(--accent); } .bk-jobt.is-aftermovie { --jc: var(--am); } .bk-jobt.is-livestream { --jc: #22d3ee; }
.bk-job.is-on.is-livesets, .bk-job.is-on.is-aftermovie, .bk-job.is-on.is-livestream, .bk-job.is-on.is-shoot {
  color: var(--text); background: var(--track); border-color: var(--line-control); }
:root[data-theme="light"] .dpill.is-on { background: #1c222b; color: #fff; }
:root[data-theme="light"] .bk-jobt.is-livesets, :root[data-theme="light"] .bk-jobt.is-aftermovie, :root[data-theme="light"] .bk-jobt.is-livestream,
:root[data-theme="light"] .bk-job.is-on.is-livesets, :root[data-theme="light"] .bk-job.is-on.is-aftermovie, :root[data-theme="light"] .bk-job.is-on.is-livestream { color: var(--text); }
/* in review: the client's move - calm, no deadline warning */
.pp-count.is-client { font: 600 10.5px var(--mono); letter-spacing: .1em; color: var(--text-2); }
.pp-sec.is-review i { background: var(--accent); }
.pp-group.is-review { background: transparent; }
.pp-group.is-review .pp-sec b { color: var(--text); }
/* the aftermovie schedule: click into a shooter's column to add something there */
.am-lane.is-addable { cursor: copy; }
.am-lane.is-addable:hover { background-color: rgba(255,255,255,.015); }
.am-bk.is-edit { cursor: pointer; }
.am-bk.is-edit:hover { border-color: var(--text-3); }


/* ---------- the aftermovie's own tasks (not a set on the timetable) ----------
   a soft blue, wherever they show: the plan, the list, the sheets, the phone */
:root { --task: #7cb4ff; --task-wash: rgba(124,180,255,.10); --task-line: rgba(124,180,255,.5); }
:root[data-theme="light"] { --task: #2563eb; --task-wash: rgba(37,99,235,.07); --task-line: rgba(37,99,235,.4); }
.am-bk.is-extra { background: var(--task-wash); border: 1px dashed var(--task-line); }
.am-bk.is-extra b { color: var(--task); }
.am-bk.is-extra.is-edit:hover { border-color: var(--task); }
.am-lr.is-extra { box-shadow: inset 3px 0 0 var(--task-line); }
.am-lr.is-extra .am-lr-t, .am-lr.is-extra .am-lr-x b { color: var(--task); }
.am-table tr.is-extra td { background: var(--task-wash); }
.am-table tr.is-extra .am-st-x { color: var(--task); }
.am-x .am-x-t, .am-x .am-x-n { color: var(--task); }
.cp-amsheet tr.is-extra td { background: rgba(124,180,255,.08); }
.cp-amsheet tr.is-extra .cp-am-x { color: #7cb4ff !important; }

/* ---------- a live shoot on an aftermovie act: red, with a red remark ---------- */
.am-live-t { display: block; font: 700 9.5px var(--mono); font-style: normal; letter-spacing: .1em; color: var(--accent); margin-top: 2px; }
.am-st-i .am-live-t { display: inline; }
.am-bk.is-live { background: rgba(237,28,36,.14); border: 1px solid var(--accent-line); border-left: 3px solid var(--accent); }
.am-bk.is-live b { color: var(--text); }
.am-lr.is-live { box-shadow: inset 3px 0 0 var(--accent); background: rgba(237,28,36,.06); }
.am-table tr.is-live td { background: rgba(237,28,36,.07); }
.cp-amsheet tr.is-live td { background: rgba(237,28,36,.09); }
.cp-am-live { color: #ff6b6b; font-weight: 700; }
/* where a click in a shooter's column puts a task: a grey quarter of an hour */
.am-ghost { display: none; position: absolute; left: 6px; right: 6px; z-index: 1; border-radius: 6px; background: rgba(255,255,255,.07);
  border: 1px dashed rgba(255,255,255,.22); font: 600 9.5px var(--mono); color: var(--text-2); padding: 2px 6px; line-height: 1.2; pointer-events: auto; }
:root[data-theme="light"] .am-ghost { background: rgba(14,17,22,.06); border-color: rgba(14,17,22,.25); }
.am-st-i.is-edit { cursor: pointer; }
.am-st-i.is-edit:hover { background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-control); }
.am-st-i.is-edit:empty::after { content: '+ info'; color: var(--text-3); opacity: 0; }
tr:hover > .am-st-i.is-edit:empty::after { opacity: 1; }
/* the automatic 'a liveset is recorded here' on an aftermovie act */
.am-rec-t { display: inline-flex; align-items: center; gap: 5px; font: 600 9.5px var(--mono); letter-spacing: .06em; color: var(--text-2);
  border: 1px solid var(--line-control); border-radius: 99px; padding: 1px 7px; margin: 3px 6px 0 0; white-space: nowrap; }
.am-rec-t i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.am-lr-x .am-rec-t { margin-top: 2px; }
.am-st-i .am-rec-t { margin-top: 0; }
.cp-am-rec { color: #d4d4d8; font-weight: 600; }
.cp-am-rec::before { content: '\25cf '; color: #ed1c24; }
.am-st-x.is-edit { cursor: pointer; }
.am-st-x.is-edit:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--text-3); }
/* a small teal REC beside the stage: a liveset is recorded there - teal, so it never reads as the red of a live shoot */
.am-rec-dot, .cp-am-dot { display: inline-block; border: 1px solid #3fd0c9; border-radius: 2px; color: #3fd0c9; font: 700 5.6px/1 -apple-system, Helvetica, Arial, sans-serif; letter-spacing: .06em; padding: 1.4px 2.1px .7px; margin-left: 5px; vertical-align: 1.5px; font-style: normal; }
:root[data-theme="light"] .am-rec-dot { border-color: #0f9b95; color: #0f9b95; }
.am-rec-legend { display: flex; align-items: center; gap: 2px; padding: 7px 14px; font-size: 11.5px; color: var(--text-3); border-bottom: 1px solid var(--line); }
.am-rec-legend .am-rec-dot { margin: 0 7px 0 0; }
.am-list .am-rec-legend { border-bottom: 0; padding: 4px 14px 0; }
.cp-amlegend { display: flex; align-items: center; gap: 6px; margin: 10px 2px -4px; font-size: 11px; color: #71717a; }
.cp-amlegend .cp-am-dot { margin-left: 0; }

/* the stages dialog: every row on one line - name, venue, stage/shoot, key, counts, remove */
.is-stages .fn-row .input { flex: 1 1 160px; min-width: 0; }
.is-stages .fn-row .chip, .is-stages .fn-row .chip-count, .is-stages .fn-row .btn { white-space: nowrap; flex: none; }
.is-stages .fn-row .chip-count { min-width: 92px; text-align: right; }

.is-stages .fn-row .chip { min-width: 104px; text-align: center; }

/* ---------- the crew page on a laptop: two columns, the schedule gets the room ---------- */
@media (min-width: 900px) {
  .cp-body:not(.is-wide) { max-width: 1040px; padding-left: 32px; padding-right: 32px; padding-top: 26px; }
  .cp-cols { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 16px; }
  .cp-side { position: sticky; top: 72px; }
  .cp-main > :first-child { margin-top: 0; }
  .cp-main .cp-sec:first-child { margin-top: 2px; }
  .cp-amsheet-t { font-size: 15px; padding: 11px; }
  .cp-amsheet th { font-size: 9px; padding: 9px 12px; }
  .cp-amsheet td { font-size: 13px; padding: 10px 12px; line-height: 1.4; }
  .cp-amsheet td.cp-am-t { font-size: 12px !important; }
  .cp-amsheet td.cp-am-x { font-size: 13.5px !important; }
  .cp-am-dot { font-size: 7px; padding: 2px 3px 1px; vertical-align: 2px; }
  .cp-amlegend { font-size: 12.5px; margin-top: 0; }
  .cp-flow { columns: 2; column-gap: 16px; margin-top: 16px; }
  .cp-flow > * { break-inside: avoid; }
  .cp-flow > .cp-sec { break-after: avoid; }
}
/* the Google Calendar button under the red one */
.cp-gcal { margin-top: 8px; }
/* where an aftermovie task is: a stage, or something else typed in */
.am-where { display: flex; flex-direction: column; gap: 6px; }
/* the stage as a tag in its own colour, in the acts list */
.am-stg { display: inline-block; padding: 0 6px; border-radius: 4px; font-style: normal; font-weight: 600; font-size: 10.5px; line-height: 16px;
  background: color-mix(in srgb, var(--c) 18%, transparent); color: color-mix(in srgb, var(--c) 72%, #fff); }
:root[data-theme="light"] .am-stg { color: color-mix(in srgb, var(--c) 70%, #000); background: color-mix(in srgb, var(--c) 14%, transparent); }
/* the tick that selects a whole card, in front of NAME */
.pp-headname { display: inline-flex; align-items: center; gap: 8px; }
.pp-checkall { width: 13px; height: 13px; flex: none; margin: 0; }
/* a set link copies on a click; the pencil, on hover, changes it */
.pp-hubpen { margin-left: 4px; padding: 0 3px; border-radius: 4px; opacity: 0; color: var(--text-3); transition: opacity .12s; }
.pp-hubbtn:hover .pp-hubpen { opacity: 1; }
.pp-hubpen:hover { color: var(--text); background: var(--track); }

/* the tick sits level with the name, not above it */
.pp-row .pp-check { margin-top: 11px; }
/* the TYPE column: a recorded set, or custom content in the aftermovie's blue */
.pp-type { display: inline-block; font: 700 8.5px var(--mono); letter-spacing: .1em; padding: 3px 6px; border-radius: 4px; color: var(--text-2); background: color-mix(in srgb, var(--text) 7%, transparent); }
.pp-type.is-content { color: var(--task); background: var(--task-wash); }
.pp-showlead { margin-left: 14px; }
/* a post table folds shut on a click on its head */
.pp-cardhead.is-foldable { cursor: pointer; user-select: none; }
.pp-cardhead.is-foldable:hover .pp-day { color: var(--text); }
.pp-fold { width: 12px; font-size: 10px; color: var(--text-3); flex: none; }
.pp-cardhead.is-foldable:hover .pp-fold { color: var(--text); }
/* the status: one big button in the colour of its step, a list to pick from */
.pp-step.is-one { border: 0; border-radius: 0; overflow: visible; width: 100%; }
.pp-statbtn { width: 100%; max-width: 186px; display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 0; border-radius: 8px; cursor: pointer;
  font: 700 10px var(--mono); letter-spacing: .1em; white-space: nowrap; transition: filter .12s; }
.pp-statbtn:hover { filter: brightness(1.12); }
.pp-statbtn:disabled { cursor: default; }
.pp-statl { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.pp-statv { opacity: .65; font-size: 9px; }
.pp-statbtn.is-todo { background: var(--st-todo); color: var(--st-todo-ink); }
.pp-statbtn.is-editing { background: var(--st-edit); color: var(--st-edit-ink); }
.pp-statbtn.is-review { background: var(--st-review); color: var(--st-review-ink); }
.pp-statbtn.is-done { background: var(--st-done); color: var(--st-done-ink); }
.pp-statpop { padding: 5px; }
.pp-statopt { display: flex; align-items: center; gap: 9px; width: 100%; font: 600 10.5px var(--mono); letter-spacing: .1em; }
.pp-statopt.is-on { background: var(--raised); }
.pp-statdot { width: 9px; height: 9px; border-radius: 50%; flex: none; border: 1px solid var(--line-control); }
.pp-statdot.is-todo { background: var(--st-todo); }
.pp-statdot.is-editing { background: var(--st-edit); }
.pp-statdot.is-review { background: var(--st-review); }
.pp-statdot.is-done { background: var(--st-done); }
.pp-statck { margin-left: auto; opacity: .6; }
/* no deadline yet: "Set a deadline" where it can be set, "Not set" where it cannot */
.pp-nodue { font: 500 11px var(--sans); color: var(--text-3); white-space: nowrap; }
.pp-duewrap.is-btn:hover .pp-nodue.is-set { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
/* the editing notes: Save shows them as the editors read them, Edit opens them again */
.pp-notes-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
/* the editing notes as a short list - for the producer and for the editors */
.pp-notes.is-shown { padding: 14px 18px 6px; }
.pp-notes.is-shown .pp-notes-head { margin-bottom: 6px; }
.pp-notes-lead { font-size: 14px; }
.pp-notes-count { font: 500 11.5px var(--sans); color: var(--text-3); }
.pp-notes-edit { margin-left: auto; }
.pp-point { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font: 400 13.5px/1.5 var(--sans); color: var(--text); overflow-wrap: anywhere; }
.pp-point i { width: 6px; height: 6px; border-radius: 50%; background: var(--text); flex: none; transform: translateY(-2px); }
.pp-notes.is-read.is-shown { border-left: 1px solid var(--line); }
/* the callsheet panel: a few texts shown small, with Edit */
.cs-mini { display: flex; flex-direction: column; gap: 6px; font-family: var(--sans); }
.cs-mini-r { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; font-size: 12.5px; line-height: 1.45; }
.cs-mini-r b { font-weight: 600; color: var(--text-2); }
.cs-mini-r span { color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-mini-r span.is-empty { color: var(--text-3); }
.cs-mini-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
/* the hotel rooms, in the hotel dialog on the Event page */
.ev-rooms { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ev-room { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; }

.ev-room .ev-room-n { width: 100%; min-width: 0; }
/* a section that is only an Edit button until it is opened */
.cs-sec-h:has(.cs-sec-edit) { display: flex; align-items: center; }
.cs-sec-edit { margin-left: auto; font-family: var(--sans); letter-spacing: 0; }


/* ---------- Settings: the company (admins only) ---------- */
/* the callsheet beside the fields grows with the screen: 300px on a laptop, up to 440px on a big one */
.st-wrap { --st-pw: clamp(300px, calc(50vw - 330px), 440px); display: grid; grid-template-columns: 180px minmax(0, 1fr) var(--st-pw); gap: 18px; align-items: start; margin-top: 16px; }
.st-body { container-type: inline-size; }
/* the fields no longer push the page wide, so the page takes the room itself */
.board:has(> .st-wrap) { flex: 1 1 auto; }
.st-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 16px; }
.st-tab { text-align: left; background: none; border: 0; border-radius: 8px; padding: 9px 12px; font: 600 13.5px var(--sans); color: var(--text-2); cursor: pointer; }
.st-tab small { display: block; font: 500 9.5px var(--mono); letter-spacing: .08em; color: var(--text-3); margin-top: 2px; }
.st-tab:hover { color: var(--text); }
.st-tab.is-on { background: var(--raised); color: var(--text); }
.st-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; }
.st-h { display: flex; align-items: baseline; gap: 10px; font: 700 10px var(--mono); letter-spacing: .14em; color: var(--text-2); margin-bottom: 10px; }
.st-h em { margin-left: auto; font: 400 11.5px var(--sans); letter-spacing: 0; color: var(--text-3); font-style: normal; }
.st-row { display: grid; grid-template-columns: minmax(120px, .6fr) minmax(0, 1fr); gap: 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.st-row:first-of-type { border-top: 0; }
.st-row.is-wide { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.st-lead { margin: -2px 0 4px; }
.st-grow { min-height: 0; overflow: hidden; resize: none; }
.st-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
/* a narrow middle column: the words above the field instead of beside it */
@container (max-width: 520px) { .st-row { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
.st-lab { font: 600 13px var(--sans); color: var(--text); }
.st-lab small { display: block; font: 400 11.5px var(--sans); color: var(--text-3); margin-top: 2px; }
.st-in { width: 100%; min-width: 0; }
.st-note { font: 400 11.5px var(--sans); color: var(--text-3); }
.st-logo { display: flex; align-items: center; gap: 14px; }
.st-logo-box { width: 180px; height: 64px; border-radius: 10px; border: 1px dashed var(--line-control); display: grid; place-items: center; background: var(--page); padding: 10px; }
.st-logo-box.is-light { background: #fff; }
.st-logo-box .logo-mark { height: 18px; }
.st-logo-img { max-width: 100%; max-height: 44px; display: block; }
.st-logo-acts { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.logo-mark.is-img { height: 18px; max-width: 120px; object-fit: contain; }
.st-col { display: flex; align-items: center; gap: 10px; }
.st-colour { width: 36px; height: 30px; padding: 0; border: 1px solid var(--line-control); border-radius: 8px; background: none; cursor: pointer; }
.st-hex { font: 600 12.5px var(--mono); color: var(--text); }
.st-team { display: flex; flex-direction: column; }
.st-tr { display: grid; grid-template-columns: 1.2fr 1fr .8fr 40px 22px; grid-template-areas: "name pos langs copy del" "phone email email . ."; gap: 8px 10px; align-items: end; padding: 12px 0; border-top: 1px solid var(--line); }
.st-tr:first-child { border-top: 0; padding-top: 2px; }
.st-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.st-f > span { font: 600 9px var(--mono); letter-spacing: .12em; color: var(--text-3); }
.st-f-name { grid-area: name; } .st-f-pos { grid-area: pos; } .st-f-langs { grid-area: langs; } .st-f-phone { grid-area: phone; } .st-f-email { grid-area: email; }
.st-f-copy { grid-area: copy; align-items: center; padding-bottom: 8px; }
.st-tr .st-del { grid-area: del; padding-bottom: 8px; }
.st-del { color: var(--text-3); font-size: 16px; }
.st-del:hover { color: var(--accent); }
.st-team-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.st-prev { position: sticky; top: 22px; border: 1.5px dashed var(--line-control); border-radius: 16px; padding: 24px 16px 16px; margin-top: 6px; }
/* it says what it is: a preview, on the frame's top edge */
.st-prev::before { content: 'PREVIEW'; position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 3px 12px; border: 1px solid var(--line-control); border-radius: 999px;
  background: var(--bg); font: 700 10px var(--mono); letter-spacing: .16em; color: var(--text); white-space: nowrap; }
.st-prev .st-frame { width: 100%; }
.st-ph { font: 700 10px var(--mono); letter-spacing: .14em; color: var(--text-2); margin-bottom: 8px; }
/* an A4 page, drawn at 210mm and shown at the panel's width */
.st-frame { width: var(--st-pw); aspect-ratio: 210 / 297; overflow: hidden; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); background: #fff; margin-bottom: 12px; }
/* Mails: the booking mail and the fire */
.st-mail { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; font-family: var(--sans); }
.st-mail-h { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font: 600 12.5px var(--sans); color: var(--text); }
.st-mail-h span { font: 600 9px var(--mono); letter-spacing: .12em; color: var(--text-3); text-transform: uppercase; padding-top: 3px; }
.st-mail-b { padding: 12px 14px 14px; font: 400 12px/1.55 var(--sans); color: var(--text-2); white-space: pre-wrap; }
.st-mail-own { display: block; color: var(--text); background: var(--accent-wash); box-shadow: inset 2px 0 0 var(--accent); border-radius: 4px; padding: 6px 8px; margin: 0 -8px; }
.st-pv { padding: 4px 14px; }
.st-pv-r { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.st-pv-r:first-child, .st-pv-ev:first-child { border-top: 0; }
.st-pv-r > span:first-child { color: var(--text-3); }
.st-code { font: 600 13px var(--mono); color: var(--text); background: var(--raised); border-radius: 6px; padding: 3px 8px; }
.st-pv-ev { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.st-pv-ev b { font: 700 12.5px var(--mono); }
.st-pv-ev small { font: 500 11px var(--mono); color: var(--text-3); }
.st-gap { margin-top: 16px; }
/* the parts of a preview, apart */
.st-prev .st-ph { margin-top: 18px; }
.st-prev > .st-ph:first-child, .st-pair .st-ph { margin-top: 0; }
.st-pair { margin-top: 18px; }
.st-mini, .st-mail, .st-frame { margin-bottom: 0; }
/* Branding: a small left bar, the top of the cover and the wallpaper */
.st-mini { position: static; width: auto; height: auto; min-height: 0; display: block; border: 1px solid var(--line); border-radius: 12px; padding: 14px 12px 12px; overflow: hidden; pointer-events: none; }
.st-mini .rail-foot { position: static; border-top: 0; padding: 12px 0 0; margin: 0; }
.st-cap { margin: 6px 0 14px; }
.st-pair { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 12px; align-items: start; }
.st-frame.is-top { width: 100%; aspect-ratio: auto; height: 242px; }
.st-phone { width: 112px; height: 242px; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); background: #0b0b0c; }
.st-phone img { width: 100%; display: block; }
.st-scale { width: 210mm; transform: scale(.378); transform-origin: 0 0; pointer-events: none; }
@media (max-width: 1200px) { .st-wrap { grid-template-columns: 190px minmax(0, 1fr); } .st-prev { display: none; } }
@media (max-width: 760px) { .st-wrap { grid-template-columns: minmax(0, 1fr); } .st-nav { flex-direction: row; overflow-x: auto; position: static; } .st-row { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* ---------- rotations: the semi-automatic way (Oct 2026) ----------
   The rotation bar above the grid, and the pop-up. */
.ds-rotbar { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; }
.ds-rotchip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; border-radius: 9px; border: 1px dashed rgba(96,165,250,.5); background: rgba(96,165,250,.07);
  font: 600 10.5px var(--mono); letter-spacing: .08em; color: #bfdbfe; }
.ds-rotchip b { font-weight: 700; color: #dbeafe; }
.ds-rotchip em { font-style: normal; color: #fbbf24; letter-spacing: .04em; }
.ds-rotchip.is-tight { border-color: rgba(251,191,36,.55); }
.ds-rotchip button { background: none; border: 1px solid rgba(96,165,250,.35); border-radius: 6px; padding: 3px 8px; font: 600 11px var(--sans); letter-spacing: 0; color: #93c5fd; cursor: pointer; }
.ds-rotchip button:hover { color: #fff; border-color: #93c5fd; }
.rt-form { display: flex; flex-direction: column; }
.rt-lab { font: 700 10px var(--mono); letter-spacing: .14em; color: var(--text-2); margin: 16px 0 8px; }
.rt-lab:first-child { margin-top: 0; }
.rt-lab small { font: 400 11.5px var(--sans); letter-spacing: 0; color: var(--text-3); margin-left: 8px; }
.rt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rt-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line-control); background: none;
  font: 600 12.5px var(--sans); color: var(--text-3); cursor: pointer; }
.rt-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--text-3)); opacity: .5; }
.rt-chip.is-on { color: var(--text); border-color: var(--c, var(--text-2)); background: var(--track); }
.rt-chip.is-on i { opacity: 1; }
.rt-seg { display: inline-flex; align-self: flex-start; border: 1px solid var(--line-control); border-radius: 9px; overflow: hidden; }
.rt-seg button { background: none; border: 0; padding: 7px 13px; font: 700 12px var(--mono); color: var(--text-2); cursor: pointer; }
.rt-seg button + button { border-left: 1px solid var(--line-control); }
.rt-seg button.is-on { background: #e4e4e7; color: #111113; }
.rt-key { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 6px; border-radius: 9px; background: rgba(255,176,32,.07); border: 1px solid rgba(255,176,32,.4); }
.rt-key b { color: #ffb020; font: 700 12.5px var(--sans); }
.rt-key > span { font: 500 11px var(--mono); color: var(--text-3); }
.rt-key-pick { margin-left: auto; display: flex; gap: 6px; }
.rt-sel { width: auto; min-width: 0; padding-top: 5px; padding-bottom: 5px; font-size: 12.5px; }
.rt-sum { margin-top: 16px; padding: 10px 12px; border-radius: 9px; background: var(--page); border: 1px solid var(--line); font: 400 12.5px/1.5 var(--sans); color: var(--text-2); }
.rt-sum b { color: var(--text); }
:root[data-theme="light"] .ds-rotchip { color: #1d4ed8; background: rgba(37,99,235,.06); border-color: rgba(37,99,235,.4); }
:root[data-theme="light"] .ds-rotchip b { color: #1e3a8a; }
:root[data-theme="light"] .ds-rotchip button { color: #1d4ed8; border-color: rgba(37,99,235,.35); }
:root[data-theme="light"] .rt-seg button.is-on { background: #1c222b; color: #fff; }
/* PLAN: Manual · Semi-automatic · Automatic, at the top of the schedule */
.plan-sw { display: inline-flex; align-items: center; gap: 8px; margin-right: 4px; }
.plan-sw-l { font: 700 10px var(--mono); letter-spacing: .14em; color: var(--text-3); }
.plan-sw-seg { display: inline-flex; border: 1px solid var(--line-control); border-radius: 10px; overflow: hidden; }
.plan-sw-seg button { background: none; border: 0; padding: 8px 14px; font: 600 13px var(--sans); color: var(--text-2); cursor: pointer; }
.plan-sw-seg button + button { border-left: 1px solid var(--line-control); }
.plan-sw-seg button:hover { color: var(--text); }
.plan-sw-seg button.is-on { background: #e4e4e7; color: #111113; }
:root[data-theme="light"] .plan-sw-seg button.is-on { background: #1c222b; color: #fff; }
/* the rotation's real breaks, under its summary */
.rt-breaks { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; color: var(--text-2); }
.rt-breaks b { color: var(--text); }
.rt-warn { margin-top: 6px; color: #fbbf24; }
.day-tabs-gap { flex: 1; }
.day-tabs .plan-sw { align-self: center; margin-right: 0; }
/* Settings: a field that is not right yet (a mail address that is not one) */
.st-in.is-bad, .input.is-bad { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }

/* ---------- show day (views/showday.js) ---------- */
.eh-tab.eh-show { color: #ff6b70; }
.eh-tab.eh-show i { width: 8px; height: 8px; border-radius: 50%; background: #ff4d55; box-shadow: 0 0 0 3px rgba(255,77,85,.2); }
.sd { display: flex; flex-direction: column; gap: 14px; padding-bottom: 24px; }
.sd-top { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.sd-top h1 { margin: 0; font-size: 26px; letter-spacing: -.01em; }
.sd-sub { font: 600 11px var(--mono); letter-spacing: .14em; color: var(--text-2); margin-top: 4px; }
.sd-clock { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.sd-clock b { font: 700 42px/1 var(--mono); letter-spacing: -.02em; }
.sd-live { font: 700 11px var(--mono); letter-spacing: .14em; color: #ff4d55; display: flex; gap: 7px; align-items: center; }
.sd-live i { width: 9px; height: 9px; border-radius: 50%; background: #ff4d55; box-shadow: 0 0 0 5px rgba(255,77,85,.18); }
.sd-phase { font: 700 11px var(--mono); letter-spacing: .14em; color: var(--text-3); }
.sd-watch { align-self: center; }
.sd-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.sd-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sd-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.sd-h { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.sd-h b { font-size: 16px; }
.sd-k { font: 700 10px var(--mono); letter-spacing: .14em; color: var(--text-3); }
.sd-k.is-red { color: #ff4d55; }
.sd-k.is-orange { color: #ff7a1a; }
.sd-r { margin-left: auto; font: 600 11.5px var(--mono); letter-spacing: .06em; color: var(--text-2); }
.sd-hd { font: 700 9.5px var(--mono); letter-spacing: .12em; color: var(--text-3); padding-top: 7px !important; padding-bottom: 7px !important; }
.sd-stages { display: grid; grid-template-columns: 100px minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.3fr); font-size: 14.5px; }
.sd-stages > div, .sd-am > div { padding: 10px 12px; border-bottom: 1px solid var(--line); min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.sd-sn { font: 700 13px var(--mono); letter-spacing: .06em; }
.sd-art { font-weight: 700; }
.sd-art small, .sd-next small, .sd-am small { display: block; font: 500 11.5px var(--mono); color: var(--text-2); font-weight: 500; margin-top: 1px; }
.sd-bar { height: 4px; border-radius: 3px; background: var(--track); margin-top: 6px; overflow: hidden; }
.sd-bar i { display: block; height: 100%; background: #ff4d55; }
.sd-next b { font-weight: 600; color: var(--text-2); }
.sd-quiet { color: var(--text-3); }
.sd-cams { display: flex; gap: 6px; flex-wrap: wrap; }
.sd-c { display: inline-flex; flex-direction: column; gap: 3px; padding: 4px 7px 5px; border-radius: 7px; background: rgba(255,77,85,.12); min-width: 58px; }
.sd-ct { font: 700 11.5px var(--mono); color: #ff8a8f; white-space: nowrap; }
.sd-ct em { font-style: normal; color: var(--text); font-weight: 600; margin-left: 5px; }
.sd-c.is-swap { background: rgba(255,176,32,.14); }
.sd-c.is-swap .sd-ct { color: #ffb020; }
.sd-c.is-off { background: var(--track); }
.sd-c.is-off .sd-ct, .sd-c.is-off .sd-ct em { color: var(--text-3); }
.sd-cb { display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.sd-cb i { display: block; height: 100%; background: var(--ok); }
.sd-cb.is-warn i { background: #ffb020; }
.sd-cb.is-bad i { background: #ff4d55; }
.sd-foot { margin: 0; padding: 8px 16px; font-size: 11.5px; color: var(--text-3); }
.sd-am { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr); font-size: 14.5px; }
.sd-who { font-weight: 700; }
.sd-am .is-special > span { color: #ffb020; }
.sd-livedot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ff4d55; margin-right: 6px; vertical-align: 1px; }
.sd-up { display: grid; grid-template-columns: 52px 1fr; gap: 2px 10px; padding: 9px 16px; border-bottom: 1px solid var(--line); font-size: 14px; align-items: baseline; }
.sd-up:last-child { border-bottom: 0; }
.sd-up time { font: 700 13px var(--mono); }
.sd-up small { grid-column: 2; font-size: 11.5px; color: var(--text-2); }
.sd-up.is-soon time { color: #ffb020; }
.sd-in { font: 700 10px var(--mono); color: #ffb020; margin-left: 7px; }
.sd-empty { margin: 0; padding: 18px 16px; color: var(--text-2); font-size: 14px; }
.sd-calls { display: grid; grid-template-columns: 1fr 1fr; }
.sd-calls div { display: flex; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.sd-calls time { font: 700 13px var(--mono); width: 44px; }
.sd-done { padding: 14px 16px; border-color: rgba(43,143,82,.45); }
.sd-done b { font-size: 16px; }
.sd-done p { margin: 4px 0 0; color: var(--text-2); font-size: 14px; }
/* watch mode: the whole screen, nothing else */
.sd-wall { min-height: 100vh; background: var(--bg); padding: 20px 24px; box-sizing: border-box; }
.sd.is-tv { min-height: calc(100vh - 40px); padding-bottom: 0; }
.sd.is-tv .sd-grid { flex: 1; }
.sd-tvfoot { display: flex; align-items: center; gap: 12px; font: 600 10px var(--mono); letter-spacing: .12em; color: var(--text-3); margin-top: auto; }
.sd-unlock { background: none; border: 1px solid var(--line-control); color: var(--text-3); border-radius: 7px; font: 600 10px var(--mono); letter-spacing: .1em; padding: 5px 10px; cursor: pointer; text-transform: uppercase; }
@media (max-width: 860px) {
  .sd-grid { grid-template-columns: minmax(0, 1fr); }
  .sd-stages { grid-template-columns: 74px minmax(0, 1fr) minmax(0, .8fr); }
  .sd-stages > div:nth-child(4n) { grid-column: 1 / -1; padding-top: 0; }
  .sd-stages > .sd-hd:nth-child(4) { display: none; }
  .sd-clock b { font-size: 30px; }
  .sd-am { grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- the converter on the post-production page (views/post.js) ---------- */
.pp-ver { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 11.5px; flex-wrap: wrap; }
.pp-ver:empty { display: none; }
.pp-vtag { font: 700 9.5px var(--mono); letter-spacing: .06em; padding: 2px 5px; border-radius: 5px; background: var(--track); color: var(--text-2); }
.pp-vst { color: var(--text-3); font: 600 10.5px var(--mono); }
.pp-vst.is-busy { color: var(--st-edit); }
.pp-vst.is-bad { color: var(--danger); }
.pp-vbar { width: 70px; height: 4px; border-radius: 3px; background: var(--track); overflow: hidden; }
.pp-vbar i { display: block; height: 100%; background: var(--st-edit); }
.pp-conv { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 9px 14px; font-size: 12.5px; }
.pp-conv:empty { display: none; }
.pp-conv-top { display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; color: var(--text-2); }
.pp-conv-top b { font: 700 10px var(--mono); letter-spacing: .14em; color: var(--text-3); }
.pp-conv-check { margin-left: auto; font: 600 12px var(--sans); color: var(--text-2); background: none; border: 1px solid var(--line); border-radius: 7px; padding: 4px 10px; cursor: pointer; }
.pp-conv-check:hover { color: var(--text); border-color: var(--text-3); }
/* the files check (Stijn, 29 Oct 2026) */
.fc-wait { color: var(--text-3); font-size: 13px; }
.fc-bad { color: #ff8a8f; }
.fc-places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.fc-place { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.fc-place span { font: 700 9.5px var(--mono); letter-spacing: .14em; color: var(--text-3); }
.fc-place b { font-size: 20px; }
.fc-place small { color: var(--st-done, #4ade80); font-size: 12px; }
.fc-place.has-found small { color: var(--st-edit, #f08a4b); }
.fc-ok { border: 1px solid color-mix(in srgb, #4ade80 40%, transparent); color: #4ade80; border-radius: 10px; padding: 12px 14px; font-size: 14px; }
.fc-h { display: flex; gap: 10px; align-items: baseline; margin: 16px 0 4px; }
.fc-h b { font: 700 10.5px var(--mono); letter-spacing: .14em; }
.fc-h.is-missing b { color: #ff6b6b; } .fc-h.is-lost b { color: #f08a4b; } .fc-h.is-leftover b { color: var(--text-2); }
.fc-row { display: grid; grid-template-columns: 82px minmax(0, 1fr) 70px; gap: 12px; align-items: start; padding: 9px 0; border-top: 1px solid var(--line); }
.fc-where { font: 700 9.5px var(--mono); letter-spacing: .12em; color: var(--text-3); padding-top: 3px; }
.fc-what { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fc-what b { font-weight: 500; font-size: 13.5px; }
.fc-what code { font: 11.5px var(--mono); color: var(--text-3); word-break: break-all; }
.fc-size { text-align: right; font: 600 12px var(--mono); color: var(--text-2); padding-top: 2px; }
@media (max-width: 600px) { .fc-places { grid-template-columns: 1fr; } .fc-row { grid-template-columns: minmax(0, 1fr) auto; } .fc-where { grid-column: 1 / -1; } }
.pp-conv-top .is-busy { color: var(--st-edit); }
.pp-conv-top .is-warn { color: #ffb020; }
.pp-conv-top .is-bad { color: var(--danger); }
.pp-conv-unk { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); color: #ffb020; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.pp-conv-unk code { font: 600 11px var(--mono); color: var(--text); background: var(--track); padding: 2px 6px; border-radius: 5px; }

/* ---------- the REVIEW column on post-production (views/post.js reviewCell) ---------- */
.pp-rv { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pp-rvl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pp-rvup { font: 700 11.5px var(--sans); padding: 5px 10px; border-radius: 7px; border: 0; background: var(--accent); color: #fff; cursor: pointer; white-space: nowrap; }
/* light blue line, so an editor spots it in a long list (Stijn, 21 Oct 2026) - still no fill */
.pp-rvup.is-quiet { background: none; border: 1px solid #5fb4f0; color: var(--text); font-weight: 600; }
.pp-rvup.is-quiet:hover { background: rgba(95,180,240,.12); }
.pp-rvbtn { text-decoration: none; display: inline-block; }
/* review is the way in: full light blue, unlike the outlined upload (Stijn, 27 Oct 2026) */
.pp-rvup.is-quiet.pp-rvbtn { background: #5fb4f0; border-color: #5fb4f0; color: #0b1622; font-weight: 700; }
.pp-rvup.is-quiet.pp-rvbtn:hover { background: #7cc3f4; }
.rv-ic.rv-keysbtn { width: auto; padding: 0 10px; font: 600 12px var(--sans); }
.pp-ver:empty { display: none; }
/* a file dragged onto a row that waits on a version */
.pp-row[data-drop] { position: relative; }
.pp-row.is-drop::after { content: attr(data-drop); position: absolute; inset: 3px 6px; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--accent);
  border-radius: 10px; background: color-mix(in srgb, var(--panel, #161618) 88%, transparent); font: 600 13px var(--sans); color: var(--text); z-index: 5; pointer-events: none; }
.pp-rvn { font: 500 11px var(--sans); color: var(--text-3); white-space: nowrap; }
.pp-rvn.is-warn { color: var(--st-review); }
.pp-upl code, .rv-upl code { display: block; margin: 10px 0; padding: 10px 12px; border-radius: 8px; background: var(--panel-2, rgba(127,127,127,.12)); font: 600 13px var(--mono); user-select: all; }
.pp-upl p, .rv-upl p { margin: 0 0 8px; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }

/* ---------- the review page (views/review.js) ----------
   Its own dark room, whatever the planner's theme: a video page is watched
   with the lights down. Grey for everything, yellow only for the moment being
   written about, green only for Approve. */
:root[data-rv] body, :root[data-rv] #shell { background: #0b0b0c; }
.rv { --rv-orange: #ff8a1f; --rv-bg: #0b0b0c; --rv-panel: #161618; --rv-panel2: #1c1c20; --rv-line: rgba(255,255,255,.08); --rv-text: #f4f4f5; --rv-text2: #a1a1aa; --rv-text3: #71717a;
  --rv-yellow: #f5c518; --rv-yellow2: #f7e08a; --rv-green: #2f8f60; --rv-blue: #5b8def;
  min-height: 100vh; flex: 1 1 auto; width: 100%; min-width: 0; display: flex; flex-direction: column; background: var(--rv-bg); color: var(--rv-text); font-family: var(--sans); color-scheme: dark; }
.rv-loading { align-items: center; justify-content: center; }
.rv-msg { text-align: center; color: var(--rv-text2); padding: 40px 20px; max-width: 460px; margin: 0 auto; }
.rv-msg h1 { color: var(--rv-text); font-size: 24px; margin: 0 0 8px; }
.rv-top { display: flex; align-items: center; gap: 14px; padding: 0 22px; height: 56px; border-bottom: 1px solid var(--rv-line); flex: none; }
.rv-brand { font: 800 12.5px var(--mono); letter-spacing: .14em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-brand span { color: var(--rv-text3); font-weight: 600; }
.rv-whobtn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.rv-whobtn:hover b { text-decoration: underline; text-underline-offset: 3px; }
.rv-whobtn i { font-style: normal; color: var(--rv-text3); }
.rv-topr { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--rv-text2); white-space: nowrap; }
.rv-who b { color: var(--rv-text); font-weight: 600; }
.rv-back { color: var(--rv-text2); text-decoration: none; font-size: 13px; }
.rv-back:hover { color: var(--rv-text); }
.rv-btn2, .rv-dl, .rv-sel { font: 600 13px var(--sans); padding: 8px 14px; border-radius: 9px; border: 1px solid rgba(255,255,255,.14); background: #18181b; color: var(--rv-text); cursor: pointer; }
.rv-sel { font: 600 12px var(--mono); padding: 7px 10px; }
.rv-sel.is-text { cursor: default; color: var(--rv-text2); }
.rv-main { flex: 1; display: grid; grid-template-columns: 270px minmax(0, 1fr) 360px; min-height: 0; }
.rv-main.one { grid-template-columns: minmax(0, 1fr) 360px; }
.rv-list { border-right: 1px solid var(--rv-line); padding: 14px 12px; overflow-y: auto; }
.rv-lh { font: 700 10px var(--mono); letter-spacing: .14em; color: var(--rv-text3); margin: 6px 6px 8px; }
.rv-lh + .rv-lh, .rv-it + .rv-lh { margin-top: 16px; }
.rv-it { display: flex; gap: 10px; padding: 8px; border-radius: 10px; align-items: center; margin-bottom: 4px; width: 100%; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.rv-it:hover { background: rgba(255,255,255,.04); }
.rv-it.is-on { background: var(--rv-panel2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.rv-it img, .rv-noposter { width: 76px; height: 43px; object-fit: cover; border-radius: 6px; flex: none; background: #222; }
.rv-itt { min-width: 0; }
.rv-itt b { font-size: 13px; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-itt small { display: block; font-size: 11px; color: var(--rv-text2); }
.rv-itt small.ok { color: var(--rv-text2); }
.rv-new { font: 700 9px var(--mono); color: var(--rv-text2); border: 1px solid rgba(255,255,255,.25); border-radius: 4px; padding: 1px 5px; margin-left: 6px; font-style: normal; vertical-align: 1px; }
.rv-stage { padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; overflow-y: auto; }
.rv-vid { border-radius: 12px; overflow: hidden; background: var(--rv-panel); border: 1px solid var(--rv-line); flex: none; }
/* the column scrolls; nothing in it is squeezed - a squeezed player cut its own controls off (19 Oct 2026) */
.rv-stage > * { flex-shrink: 0; }
.rv-screen { position: relative; background: #000; aspect-ratio: 16 / 9; display: grid; place-items: center; cursor: pointer; }
.rv-screen video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.rv-screen:fullscreen video { height: 100vh; }
.rv-spin { display: none; width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.18); border-top-color: #fff; animation: rv-spin .8s linear infinite; position: absolute; }
.rv-spin.is-on { display: block; }
/* the big play / pause on the picture */
.rv-big { position: absolute; width: 76px; height: 76px; border-radius: 50%; background: rgba(11,11,12,.55); border: 1px solid rgba(255,255,255,.18);
  display: grid; place-items: center; pointer-events: none; transition: opacity .2s; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.rv-big i { font-style: normal; color: #fff; font-size: 26px; line-height: 1; grid-area: 1 / 1; }
.rv-big .is-p { margin-left: 5px; }
.rv-big .is-s { display: none; font-size: 22px; letter-spacing: -2px; }
.rv-vid.is-playing .rv-big { opacity: 0; }
.rv-vid.is-playing .rv-big .is-p { display: none; }
.rv-vid.is-playing .rv-big .is-s { display: block; }
@media (hover: hover) { .rv-vid.is-playing .rv-screen:hover .rv-big { opacity: 1; } }
.rv-screen:fullscreen .rv-big { display: none; }
.rv-row .rv-spin { position: static; width: 14px; height: 14px; border-width: 2px; }
@keyframes rv-spin { to { transform: rotate(360deg); } }
.rv-ctl { padding: 14px 16px 12px; }
.rv-tlwrap { position: relative; padding: 8px 0; cursor: pointer; }
.rv-tl { position: relative; height: 6px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; touch-action: none; }
.rv-tl > i, .rv-tl > u { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: 0 50%; transform: scaleX(0); border-radius: 3px; }
.rv-tl > u { background: rgba(255,255,255,.1); }
.rv-tl > i { background: var(--rv-yellow); }
/* the playhead: the run is as wide as the track, so translateX(%) is the place on it */
.rv-ph { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; z-index: 4; }
.rv-ph i { position: absolute; left: 0; top: 50%; width: 3px; height: 12px; margin: -6px 0 0 -1.5px; border-radius: 1px; background: var(--rv-blue); box-shadow: 0 0 0 1px rgba(11,11,12,.6); }
/* the played part yellow, the playhead a small blue stripe (Stijn, 27 Oct 2026) */
.rv-name { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rv-name p { margin: 0; }
.rv-up.rv-name-go { background: var(--accent, #ed1c24); color: #fff; padding: 13px 22px; border-radius: 10px; }
.rv-up.rv-name-go:hover { filter: brightness(1.1); }
.rv-msg.rv-name { max-width: 520px; gap: 22px; }
.rv-name-logo { width: 100px; height: auto; }
.rv-name h1 { font-size: 23px; line-height: 1.2; margin: 0; text-wrap: balance; }
.rv-name-row { display: flex; gap: 8px; width: min(340px, 100%); }
.rv-name-row .rv-name-in { flex: 1; min-width: 0; width: auto; text-align: left; font-size: 15px; }
.rv-name-foot { position: fixed; left: 0; right: 0; bottom: max(30px, env(safe-area-inset-bottom, 0px)); text-align: center; font: 600 10.5px var(--mono); letter-spacing: .2em; color: #52525b; }
.rv.rv-namepage { background: #000; }
.rv-name-in { width: min(320px, 100%); font: 500 16px var(--sans); padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: #18181b; color: var(--rv-text); text-align: center; }
.rv-linkbox { width: 100%; font: 500 12px var(--mono); }
/* Invite someone: download and snippets on or off (Stijn, 27 Oct 2026) */
.rv-inv { display: flex; flex-direction: column; gap: 10px; min-width: min(420px, 80vw); }
.rv-inv p { margin: 0 0 4px; color: var(--text-2); font-size: 13.5px; }
.rv-invr { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; }
.rv-invr b { display: block; font-size: 14px; }
.rv-invr small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-2); }
.rv-invr.is-off { opacity: .5; }
/* the client contact's Review switch (28 Oct 2026) */
.ev-review { margin-top: 4px; }
/* a new contact: the client's people one click away */
.ev-picks { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px dashed var(--line-control, rgba(255,255,255,.2)); border-radius: 10px; }
.ev-picks-k { font: 700 9.5px var(--mono); letter-spacing: .12em; color: var(--text-3); text-transform: uppercase; }
.ev-picks-l { display: flex; gap: 6px; flex-wrap: wrap; }
.ev-pick { font: 600 12.5px var(--sans); padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-control, rgba(255,255,255,.2)); background: none; color: var(--text); cursor: pointer; }
.ev-pick:hover { border-color: var(--text-3); background: rgba(255,255,255,.05); }
.rv-inv-lead { margin: 0 0 4px; color: var(--text-list, #d4d4d8); }
.rv-inv-note { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.035); color: var(--text-2); font-size: 13px; }
.rv-inv-note i { font: 700 10px/1 var(--mono); font-style: normal; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); display: grid; place-items: center; }
.rv-invsw { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line-control); border-radius: 9px; flex: none; }
.rv-invsw button { border: 0; background: none; color: var(--text-2); font: 600 12.5px var(--sans); padding: 5px 12px; border-radius: 6px; cursor: pointer; }
.rv-invsw button.is-on { background: #e8e8ea; color: #111113; }
/* Invite someone: New link | Guest links (27 Oct 2026) */
.rv-lmodal.is-wide { width: min(720px, calc(100vw - 32px)); max-width: none; }
.rv-ltabs { display: flex; gap: 4px; padding: 4px; margin: 14px 18px 0; border: 1px solid var(--line); border-radius: 10px; width: max-content; }
.rv-ltabs button { border: 0; background: none; color: var(--text-2); font: 600 13px var(--sans); padding: 7px 14px; border-radius: 7px; cursor: pointer; }
.rv-ltabs button.is-on { background: #e8e8ea; color: #111113; }
.rv-ltabs em { font: 700 10px var(--mono); font-style: normal; margin-left: 6px; opacity: .7; }
.rv-lfilt { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.rv-lfilt button { font: 700 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--text-2); cursor: pointer; }
.rv-lfilt button.is-on { border-color: var(--text); color: var(--text); }
.rv-lfilt button.is-amb { color: #ffc94d; border-color: rgba(255,201,77,.45); }
.rv-lrow { display: grid; grid-template-columns: minmax(0, 1fr) auto 128px auto; gap: 14px; align-items: center; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; margin-bottom: 8px; }
.rv-lrow.is-never { border-color: rgba(255,201,77,.4); }
.rv-lwho b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-lwho small { font-size: 12px; color: var(--text-3); }
.rv-lchips { display: flex; gap: 5px; }
.rv-lchip { font: 700 9.5px var(--mono); letter-spacing: .08em; padding: 3px 7px; border-radius: 5px; background: rgba(255,255,255,.08); color: var(--text-2); }
.rv-lchip.is-off { opacity: .45; text-decoration: line-through; }
.rv-lseen { font-size: 12.5px; color: var(--text-2); text-align: right; }
.rv-lseen.is-never { color: #ffc94d; font-weight: 600; }
.rv-lwd { font: 600 12px var(--sans); padding: 6px 11px; border-radius: 8px; border: 1px solid rgba(255,90,95,.45); color: #ff8a8f; background: none; cursor: pointer; }
.rv-lwd:hover { background: rgba(255,90,95,.1); }
.rv-lnone { color: var(--text-3); font-size: 13.5px; margin: 6px 0; }
.rv-lcount { font-size: 12px; color: var(--text-3); align-self: center; }
.modal-foot .rv-lnever { background: #ffc94d; border-color: #ffc94d; color: #1a1204; }
.modal-foot .rv-lall { border-color: rgba(255,90,95,.45); color: #ff8a8f; background: none; }
.rv-lgo p { margin: 0 0 12px; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.rv-lgo ul { margin: 0; padding: 0; list-style: none; max-height: 260px; overflow-y: auto; }
.rv-lgo li { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.rv-lgo li span { color: var(--text-3); font-size: 12px; white-space: nowrap; }
@media (max-width: 640px) { .rv-lrow { grid-template-columns: minmax(0, 1fr) auto; } .rv-lwho { grid-column: 1 / -1; } .rv-lseen { text-align: right; } .rv-lwd { grid-column: 1 / -1; justify-self: end; } .rv-lmodal .modal-foot { flex-wrap: wrap; } }
/* the part between IN and OUT: orange, on the bar and on the waveform (27 Oct 2026) */
.rv-tsel { position: absolute; top: 0; bottom: 0; background: var(--rv-orange); border-radius: 2px; display: none; }
.rv-thumb { position: absolute; bottom: 100%; left: 0; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; z-index: 5; }
.rv-thumb.is-on { display: flex; }
.rv-thumb i { display: none; border-radius: 6px; border: 1px solid rgba(255,255,255,.2); background: #000 no-repeat; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.rv-thumb.has i { display: block; }
.rv-thumb b { font: 700 11px var(--mono); background: #f4f4f5; color: #0b0b0c; padding: 2px 6px; border-radius: 4px; }
.rv-thumb[data-rate]:not([data-rate=""])::after { content: attr(data-rate); font: 700 9.5px var(--mono); letter-spacing: .1em; color: var(--rv-yellow2); text-transform: uppercase; }
.rv-lane { position: relative; height: 40px; margin: 2px 0 4px; }
/* the set's waveform under the bar (27 Oct 2026) */
.rv-wave { position: relative; height: 32px; margin: 2px 0 0; cursor: pointer; }
.rv-wave .rv-wbase, .rv-wplay { position: absolute; inset: 0; }
.rv-wplay { clip-path: inset(0 100% 0 0); pointer-events: none; }
.rv-wv { display: block; width: 100%; height: 32px; }
.rv-wv .cs-wavef { fill: rgba(255,255,255,.2); }
.rv-wv.is-played .cs-wavef { fill: var(--rv-yellow); }
.rv-wsel { position: absolute; top: -2px; bottom: -2px; display: none; background: rgba(255,138,31,.22); border-left: 2px solid var(--rv-orange); border-right: 2px solid var(--rv-orange); box-sizing: border-box; pointer-events: none; }
.rv-wsel.is-open { border-right: 0; background: none; }
/* with the waveform there, the lane keeps only the IN and OUT labels */
.rv-wave:not([hidden]) ~ .rv-lane .rv-rsel { background: none; border-color: transparent; }
.rv-wave:not([hidden]) ~ .rv-lane .rv-rsel b { top: 0; }
/* under the waveform the lane needs only its dots and labels - less room (Stijn, 27 Oct 2026) */
.rv-wave:not([hidden]) ~ .rv-lane { height: 24px; margin: 4px 0 2px; }
.rv-mk { position: absolute; top: 0; width: 20px; height: 20px; border-radius: 50%; transform: translateX(-50%); border: 2px solid var(--rv-panel); background: #2a2a2f; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); color: #d4d4d8; font: 800 10.5px var(--mono); line-height: 1; display: grid; place-items: center; cursor: pointer; padding: 0; z-index: 3; transition: transform .15s; }
.rv-mk:hover { transform: translateX(-50%) scale(1.25); }
.rv-mk.now { background: var(--rv-yellow2); color: #0b0b0c; box-shadow: none; }
/* hover a dot: the feedback in a card above it */
.rv-tip { position: absolute; bottom: calc(100% + 26px); width: 320px; max-width: 90%; padding: 12px 14px; border-radius: 10px; background: #26262b;
  border: 1px solid rgba(255,255,255,.1); box-shadow: 0 12px 34px rgba(0,0,0,.6); pointer-events: none; z-index: 6; font: 400 13px/1.45 var(--sans); color: var(--rv-text); }
.rv-tip-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rv-tip-h i { width: 22px; height: 22px; border-radius: 50%; background: var(--rv-yellow2); color: #0b0b0c; font: 800 10.5px/22px var(--mono); text-align: center; font-style: normal; flex: none; }
.rv-tip-h b { font-size: 13px; font-weight: 600; }
.rv-tip-h small { color: var(--rv-text3); font-size: 11.5px; }
.rv-tip-n { margin-left: auto; font: 600 11px var(--mono); color: var(--rv-text3); }
.rv-tip-b { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.rv-tip-b .rv-chip { margin-right: 2px; }
.rv-tip-f { margin-top: 6px; font: 600 11px var(--mono); color: #7fdcab; }
.rv-mk.is-fixed { opacity: .45; }
.rv-mk.is-fixed::after { content: '\2713'; position: absolute; right: -7px; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--rv-bg); color: var(--rv-text2); font: 800 8px/12px var(--mono); text-align: center; }
.rv-mk.is-old { border-style: dashed; }
.rv-rg { position: absolute; top: 6px; height: 9px; border-radius: 5px; background: rgba(255,255,255,.14); }
.rv-rg.is-fixed { opacity: .4; }
.rv-rsel { position: absolute; top: 2px; height: 17px; background: rgba(255,138,31,.16); border-left: 3px solid var(--rv-orange); border-right: 3px solid var(--rv-orange); box-sizing: border-box; z-index: 2; pointer-events: none; }
.rv-rsel b { position: absolute; top: 22px; font: 700 9.5px var(--mono); color: #0b0b0c; background: var(--rv-orange); border-radius: 3px; padding: 1px 4px; white-space: nowrap; }
.rv-rsel .h1 { right: 100%; margin-right: -3px; } .rv-rsel .h2 { left: 100%; margin-left: -3px; }
.rv-rsel .h2:empty { display: none; }
.rv-row { display: flex; align-items: center; gap: 12px; font: 600 13px var(--mono); flex-wrap: wrap; row-gap: 8px; }
.rv-dur, .rv-io, .rv-time { white-space: nowrap; }
.rv-qs { flex: none; }
.rv-play { width: 32px; height: 28px; border-radius: 7px; border: 0; background: rgba(255,255,255,.08); color: #fff; font-size: 12px; cursor: pointer; }
.rv-play:hover { background: rgba(255,255,255,.16); }
.rv-time { font-weight: 700; min-width: 7ch; }
.rv-time b { font-weight: 700; }
.rv-time small { font-size: 11px; color: var(--rv-text3); margin-left: 1px; }
.rv-dur { color: var(--rv-text2); }
.rv-io { font: 700 10.5px var(--mono); letter-spacing: .08em; padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,.2); background: none; color: #d4d4d8; cursor: pointer; }
.rv-io b { display: inline-block; margin-left: 2px; padding: 0 4px; border-radius: 3px; background: #27272a; color: #fff; }
.rv-sp { flex: 1; }
.rv-qs { display: flex; border: 1px solid rgba(255,255,255,.25); border-radius: 7px; overflow: hidden; }
.rv-q { padding: 3px 8px; font: 600 11px var(--mono); border: 0; background: none; color: var(--rv-text2); cursor: pointer; }
.rv-q.is-on { background: #f4f4f5; color: #0b0b0c; }
.rv-q:disabled { opacity: .35; cursor: not-allowed; }
.rv-ic { width: 28px; height: 26px; border-radius: 6px; border: 0; background: none; color: var(--rv-text2); font-size: 15px; cursor: pointer; }
.rv-ic:hover { color: #fff; background: rgba(255,255,255,.08); }
.rv-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-metat { min-width: 0; flex: 1 1 320px; }
.rv-meta h1 { margin: 0; font-size: 19px; font-weight: 700; }
.rv-sub { font-size: 12.5px; color: var(--rv-text2); }
.rv-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Feedback ready: the same magic light blue as Create stories, its sheen half a beat later */
.rv-fr { font: 700 13px var(--sans); padding: 10px 16px; border-radius: 9px; border: 0; cursor: pointer; color: #06121d;
  background: linear-gradient(110deg, #7cc4ff 0%, #9fd3ff 40%, #ffffff 50%, #9fd3ff 60%, #7cc4ff 100%); background-size: 250% 100%; background-position: 100% 0;
  box-shadow: 0 4px 20px rgba(95,180,240,.4); animation: rv-shimmer 5s ease-in-out .6s infinite; transition: box-shadow .2s, transform .2s; }
.rv-fr:hover { box-shadow: 0 6px 26px rgba(95,180,240,.65); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .rv-fr { animation: none; background-position: 50% 0; } }
.rv-fr.is-sent { background: #27272a; color: #7fdcab; box-shadow: none; animation: none; }
.rv-ap { font: 700 13px var(--sans); padding: 10px 18px; border-radius: 9px; border: 0; background: var(--rv-green); color: #fff; cursor: pointer; }
.rv-up { font: 700 13px var(--sans); padding: 10px 16px; border-radius: 9px; border: 0; background: #f4f4f5; color: #0b0b0c; cursor: pointer; }
.rv-approved { font: 600 13px var(--sans); color: #7fdcab; }
.rv-side { border-left: 1px solid var(--rv-line); display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 56px); position: sticky; top: 0; }
.rv-sh { padding: 14px 18px 10px; display: flex; align-items: center; gap: 10px; }
.rv-sh b { font-size: 15px; }
.rv-tg { position: relative; margin-left: auto; display: grid; grid-template-columns: 1fr 1fr; background: var(--rv-panel2); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 3px; }
.rv-tg i { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: #f4f4f5; transition: transform .25s; }
.rv-tg.is-all i { transform: translateX(100%); }
.rv-tg button { position: relative; z-index: 1; padding: 5px 12px; border-radius: 999px; border: 0; background: none; font: 600 12px var(--sans); color: var(--rv-text2); cursor: pointer; white-space: nowrap; }
.rv-tg button:first-of-type { color: #0b0b0c; }
.rv-tg.is-all button:first-of-type { color: var(--rv-text2); }
.rv-tg.is-all button:last-of-type { color: #0b0b0c; }
.rv-tg em { font-style: normal; font: 700 10px var(--mono); opacity: .7; margin-left: 2px; }
.rv-bnr { margin: 0 18px 8px; padding: 9px 12px; border-radius: 9px; font-size: 12.5px; line-height: 1.45; background: #141416; color: var(--rv-text2); border: 1px solid var(--rv-line); }
.rv-bnr b { color: var(--rv-text); }
.rv-bnr.is-sent b, .rv-bnr.is-ok b { color: #7fdcab; }
.rv-cl { flex: 1; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.rv-empty { padding: 30px 18px; color: var(--rv-text3); font-size: 13.5px; text-align: center; }
.rv-cm { padding: 11px 18px; border-top: 1px solid rgba(255,255,255,.06); font-size: 13.5px; line-height: 1.4; cursor: pointer; }
.rv-cm:hover { background: rgba(255,255,255,.025); }
.rv-cm.now { background: rgba(255,255,255,.035); box-shadow: inset 2px 0 0 var(--rv-yellow2); }
.rv-h { display: flex; gap: 8px; align-items: center; margin-bottom: 3px; font-size: 13px; color: var(--rv-text2); }
.rv-h b { color: var(--rv-text); font-weight: 600; }
.rv-tc { font: 600 13.5px var(--mono); letter-spacing: .02em; color: var(--rv-yellow); white-space: nowrap; }
.rv-vtag { font: 700 9px var(--mono); letter-spacing: .08em; color: var(--rv-text3); border: 1px dashed rgba(255,255,255,.3); padding: 1px 5px; border-radius: 4px; }
.rv-fx { margin-left: auto; font: 500 11.5px var(--sans); color: var(--rv-text2); white-space: nowrap; }
.rv-cm.is-done { opacity: .6; }
.rv-cm.is-done .rv-txt { text-decoration: line-through; opacity: .8; }
.rv-chk { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px var(--sans); color: var(--rv-text2); background: none; border: 0; cursor: pointer; padding: 0; }
.rv-chk i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35); display: grid; place-items: center; font-style: normal; font-size: 11px; color: transparent; }
.rv-chk span { display: none; }
.rv-cm:hover .rv-chk span, .rv-cm.now .rv-chk span { display: inline; }
.rv-chk:hover { color: #f4f4f5; }
.rv-chk:hover i { border-color: #f4f4f5; color: #f4f4f5; background: rgba(255,255,255,.06); }
.rv-reply { margin: 6px 0 0 14px; padding-left: 10px; border-left: 2px solid rgba(255,255,255,.15); font-size: 12.5px; color: #d4d4d8; }
.rv-reply b { font-weight: 600; color: var(--rv-text); }
.rv-fxby { margin-top: 6px; font-size: 11.5px; color: var(--rv-text3); }
.rv-undo { margin-left: 8px; background: none; border: 0; color: var(--rv-text3); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
.rv-cmacts { display: flex; gap: 14px; margin-top: 6px; }
.rv-rp { display: block; background: none; border: 0; color: var(--rv-text3); font: 400 12px var(--sans); cursor: pointer; padding: 0; }
.rv-edited { font: 500 10.5px var(--sans); color: var(--rv-text3); font-style: italic; }
.rv-x { margin-left: 8px; background: none; border: 0; color: var(--rv-text3); font-size: 14px; line-height: 1; cursor: pointer; padding: 0 2px; vertical-align: -1px; }
.rv-x:hover { color: var(--rv-text); }
.rv-rp:hover { color: var(--rv-text); }
.rv-inp { padding: 12px 18px 14px; border-top: 1px solid var(--rv-line); flex: none; }
.rv-boxw { display: flex; align-items: flex-start; gap: 8px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 9px 10px; background: #111113; }
.rv-boxw:focus-within { border-color: rgba(255,255,255,.3); }
.rv-chip { font: 700 11px var(--mono); color: #0b0b0c; background: var(--rv-yellow); border-radius: 4px; padding: 2px 6px; white-space: nowrap; margin-top: 2px; }
.rv-box { flex: 1; min-width: 0; resize: none; border: 0; background: none; color: var(--rv-text); font: 400 13.5px/1.4 var(--sans); outline: 0; padding: 0; max-height: 140px; }
.rv-box::placeholder { color: var(--rv-text3); }
.rv-rpbox { margin-top: 8px; width: 100%; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 7px 9px; background: #111113; }
.rv-send { font: 600 12px var(--sans); border: 0; border-radius: 7px; padding: 5px 10px; background: #f4f4f5; color: #0b0b0c; cursor: pointer; }
.rv-send:disabled { opacity: .5; }
.rv-hint { font-size: 11px; color: var(--rv-text3); margin-top: 8px; line-height: 1.5; }
.rv-hint b { color: var(--rv-text); font-family: var(--mono); }
.rv-keys div { display: flex; gap: 14px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.rv-keys kbd { min-width: 120px; font: 600 11.5px var(--mono); color: var(--text); }
.rv-keys span { color: var(--text-2); }
/* a wide window: the page is the window - the picture shrinks with its height,
   so the controls, the title and the buttons under it never fall off the bottom */
@media (min-width: 1001px) {
  .rv { height: 100vh; height: 100dvh; min-height: 0; }
  .rv-main { overflow: hidden; }
  .rv-side { max-height: none; }
  /* the title and the player share one width, centred: a wide window leaves an
     even margin either side, not one gap on the right */
  .rv-stage { align-items: center; }
  .rv-stage > .rv-vid, .rv-stage > .rv-meta { width: 100%; max-width: max(420px, calc((100vh - 330px) * 16 / 9)); }
}
@media (max-width: 1000px) {
  .rv-main, .rv-main.one { grid-template-columns: minmax(0, 1fr); }
  .rv-list { border-right: 0; border-bottom: 1px solid var(--rv-line); display: flex; gap: 6px; overflow-x: auto; padding: 10px 12px; }
  .rv-lh { display: none; }
  .rv-it { width: auto; flex: none; flex-direction: column; align-items: flex-start; gap: 6px; width: 150px; }
  .rv-it img, .rv-noposter { width: 134px; height: 75px; }
  .rv-side { border-left: 0; border-top: 1px solid var(--rv-line); max-height: none; position: static; }
  .rv-cl { max-height: 60vh; }
  .rv-stage { padding: 12px; }
  .rv-top { padding: 0 14px; gap: 10px; }
  .rv-topr .rv-who { display: none; }
  .rv-dur { display: none; }
  /* a wrapped top bar grows instead of running under the list (Invite guest was hidden there) */
  .rv-top { height: auto; min-height: 56px; padding-block: 10px; flex-wrap: wrap; row-gap: 10px; }
}
/* on a phone or tablet (Stijn, 27 Oct 2026): IN, OUT and the snippet button stay - tapped, not
   typed, so no key letters and no Shortcuts */
@media (hover: none) and (pointer: coarse) {
  .rv-io b, .rv-keysbtn, .rf-hint { display: none; }
}

/* the contact who reviews the edits (Event page) */
/* Access: what an editor's or packer's login reaches; the crew board's login label (28 Oct 2026) */
.ax-reach { display: grid; gap: 4px; margin-top: 8px; }
.ax-line { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.ax-k { flex: none; width: 46px; font: 700 9.5px var(--mono); letter-spacing: .12em; color: var(--text-3); }
.ax-go { color: var(--text); text-decoration: none; border-bottom: 1px dashed var(--line-control, rgba(255,255,255,.2)); }
.ax-go:hover { border-bottom-style: solid; }
.ax-go i { font-style: normal; font: 600 11.5px var(--mono); color: var(--text-3); margin-left: 5px; }
.ax-sep { color: var(--text-3); }
.ax-none { margin-top: 6px; font-size: 12.5px; color: var(--text-3); }
/* Account → People in columns (Stijn, 29 Oct 2026: option B) */
.ac-list { display: flex; flex-direction: column; }
.ac-row { display: grid; grid-template-columns: minmax(0, 1.25fr) 130px 70px minmax(0, 1.6fr) 32px; gap: 18px; align-items: center; padding: 12px 6px; border-bottom: 1px solid var(--line); }
.ac-head { font: 700 9.5px var(--mono); letter-spacing: .14em; color: var(--text-3); padding-top: 2px; padding-bottom: 10px; }
.ac-row.is-off { opacity: .55; }
.ac-row.is-focus { background: rgba(95,180,240,.07); box-shadow: inset 3px 0 0 #5fb4f0; }
.ac-who { display: flex; gap: 12px; align-items: center; min-width: 0; }
.ac-who > div { min-width: 0; }
.ac-who b { display: block; font-size: 14px; font-weight: 600; }
.ac-who small { display: block; color: var(--text-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-row .select { width: 100%; }
.ac-2fa { justify-self: start; margin-left: 0; }
.ac-dash, .ac-all { color: var(--text-3); }
.ac-reach { min-width: 0; }
.ac-reach .ax-reach { margin-top: 0; }
.ac-reach .ax-none { margin-top: 0; }
.ac-more { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--text-2); cursor: pointer; padding: 0; font: 600 13px/1 var(--sans); }
.ac-more:hover { color: var(--text); border-color: var(--line-control); }
.ac-sep { width: 1px; height: 22px; background: var(--line-control); }
.ac-build { font: 11.5px var(--mono); color: var(--text-3); }
@media (max-width: 760px) {
  .ac-head { display: none; }
  .ac-row { grid-template-columns: minmax(0, 1fr) 110px 32px; grid-template-areas: "who role more" "reach reach reach"; row-gap: 8px; }
  .ac-who { grid-area: who; } .ac-row > .select { grid-area: role; } .ac-more, .ac-row > span:last-child { grid-area: more; } .ac-reach { grid-area: reach; }
  .ac-2fa, .ac-dash { display: none; }
}
.user-row.is-focus { background: rgba(95,180,240,.07); box-shadow: inset 3px 0 0 #5fb4f0; border-radius: 8px; }
.cb-acc { white-space: nowrap; }
.cb-loginbtn { margin-right: 6px; font: 700 9px var(--mono); letter-spacing: .1em; padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(95,180,240,.5); background: none; color: #5fb4f0; cursor: pointer; white-space: nowrap; }
.cb-loginbtn:hover { background: rgba(95,180,240,.12); }
/* a colour per role: producer green, admin red, packer orange, editor blue, guest grey */
.cb-loginbtn.is-producer { border-color: rgba(74,222,128,.5); color: #4ade80; }
.cb-loginbtn.is-producer:hover { background: rgba(74,222,128,.12); }
.cb-loginbtn.is-admin { border-color: rgba(255,107,112,.55); color: #ff6b70; }
.cb-loginbtn.is-admin:hover { background: rgba(255,107,112,.12); }
.cb-loginbtn.is-packer { border-color: rgba(240,138,75,.55); color: #f08a4b; }
.cb-loginbtn.is-packer:hover { background: rgba(240,138,75,.12); }
.cb-loginbtn.is-guest { border-color: var(--line); color: var(--text-2); }
.cb-loginbtn.is-off { border-color: var(--line); color: var(--text-3); }
.cb-loginbtn.is-off { border-color: var(--line); color: var(--text-3); }
.ev-rv { font: 700 8.5px var(--mono); letter-spacing: .1em; color: var(--st-review); border: 1px solid color-mix(in srgb, var(--st-review) 55%, transparent); border-radius: 4px; padding: 1px 4px; margin-left: 8px; white-space: nowrap; vertical-align: 2px; }
/* import: the day and stage for the whole table, and the folded column picker */
.map-toggle { margin: -4px 0 10px; font-size: 12px; }
.map-bar b { font-size: 12px; font-weight: 600; color: var(--text); }
.select-sm.is-missing { border-color: var(--accent); }

/* ---------- the crew board (views/crew.js) ---------- */
.cb-meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--text-2); font-size: 13.5px; }
.cb-meta b { color: var(--text); font-weight: 600; }
.cb-warn { color: var(--st-edit); }
.cb-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 16px 0 14px; }
.cb-search { flex: 0 1 320px; min-width: 0; padding: 9px 13px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: 400 13.5px var(--sans); }
.cb-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cb-chip { font: 600 12px var(--sans); padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.cb-chip:hover { color: var(--text); }
.cb-chip em { font: 700 10px var(--mono); font-style: normal; opacity: .6; margin-left: 5px; }
.cb-chip.is-on { background: var(--text); color: var(--page); border-color: var(--text); }
.cb-chip.is-warn { color: var(--st-edit); border-color: color-mix(in srgb, var(--st-edit) 45%, transparent); }
.cb-chip.is-warn.is-on { background: var(--st-edit); color: var(--st-edit-ink); border-color: var(--st-edit); }
.cb-wrap { overflow-x: auto; }
.cb-tbl { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.cb-tbl th { text-align: left; font: 700 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cb-tbl td { padding: 7px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 13px; }
.cb-tbl tr:last-child td { border-bottom: 0; }
.cb-tbl tbody tr:hover td { background: color-mix(in srgb, var(--text) 3%, transparent); }
.cb-nm { display: flex; align-items: center; gap: 11px; }
.cb-nm b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; }
.cb-nm small { color: var(--text-3); font-size: 11.5px; }
.cb-skills { display: flex; flex-wrap: nowrap; gap: 5px; }
.cb-sk { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px var(--sans); padding: 4px 8px; border-radius: 7px; background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); white-space: nowrap; }
.cb-sk.is-more { color: var(--text-3); }
.cb-dots { display: inline-flex; gap: 2px; }
.cb-dots i { width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--text) 18%, transparent); }
.cb-dots i.on { background: #f5a524; }
.cb-q { color: var(--text-3); font-size: 12px; }
.cb-miss { display: inline-flex; flex-wrap: nowrap; gap: 4px; }
.cb-miss span.is-more { color: var(--text-3); border-color: var(--line); background: none; }
.cb-miss span { font: 700 9.5px var(--mono); letter-spacing: .06em; color: var(--st-edit); border: 1px solid color-mix(in srgb, var(--st-edit) 45%, transparent); background: color-mix(in srgb, var(--st-edit) 8%, transparent); padding: 2px 6px; border-radius: 5px; white-space: nowrap; }
.cb-ok { font: 700 9.5px var(--mono); letter-spacing: .06em; color: var(--st-done); white-space: nowrap; }
.cb-contact { color: var(--text-3); line-height: 1.5; }
.cb-contact a { white-space: nowrap; }
.cb-contact a { color: var(--text-2); text-decoration: none; font-size: 12.5px; white-space: nowrap; }
.cb-contact a:hover { color: var(--text); }
.cb-rate { font: 600 13px var(--mono); white-space: nowrap; }
.cb-act { text-align: right; width: 1px; }
.cb-fillbtn { font: 600 12px var(--sans); padding: 6px 11px; border-radius: 7px; border: 0; background: var(--st-edit); color: var(--st-edit-ink); cursor: pointer; white-space: nowrap; }
.cb-none { padding: 30px; text-align: center; color: var(--text-3); border: 1px dashed var(--line); border-radius: 14px; }
.field.cb-fill { outline: 2px solid var(--st-edit); outline-offset: 4px; border-radius: 6px; }
/* the crew board uses the width there is - the 1100 cap made the list scroll sideways on a big screen */
.board:has(#crewTable) { flex: 1 1 auto; min-width: 0; max-width: 1600px; }
@media (max-width: 1500px) { .cb-contact a { display: block; } .cb-contact .cb-dot { display: none; } }

.cb-row { cursor: pointer; }
.cb-row:focus-visible td { background: color-mix(in srgb, var(--text) 6%, transparent); outline: none; }
.cb-nm small { white-space: nowrap; }

/* ---- checks: before anything goes out ---- */
.ck-back { z-index: 101; }
.modal.ck-modal { width: min(560px, 100%); }
.ck-modal .modal-head .ck-tag { margin-left: auto; }
.ck-list { display: flex; flex-direction: column; }
.ck-r { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.ck-r:first-child { border-top: 0; }
.ck-i { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font: 700 12px var(--sans); }
.ck-r.ok .ck-i { color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.ck-r.warn .ck-i { color: var(--danger); background: var(--danger-wash); border: 1px solid var(--danger-line); }
.ck-t { font: 600 13.5px var(--sans); color: var(--text); }
.ck-r.ok .ck-t { color: var(--text-list); font-weight: 500; }
.ck-s { font: 400 12px var(--sans); color: var(--text-3); margin-top: 2px; }
.ck-r.warn .ck-s { color: var(--text-2); }
.ck-fix { font: 600 12.5px var(--sans); color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
.ck-fix:hover { text-decoration: underline; }
.ck-sum { margin: 0 0 14px; font: 400 12.5px var(--sans); color: var(--text-2); }
.ck-sum b { color: var(--text); font-weight: 600; }
.ck-tag { font: 700 9px var(--mono); letter-spacing: .12em; border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.ck-tag.w { color: var(--danger); background: var(--danger-wash); border: 1px solid var(--danger-line); }
.ck-tag.g { color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); }
.ck-foot-n { font: 400 11.5px var(--sans); color: var(--text-3); margin-right: auto; align-self: center; }

/* ---- post: the editor's own page (#98, #97) and uploads from the page (#104) ---- */
/* the editor's page is a page of its own: as wide as the screen allows - on a
   phone it used to shrink to the width of its title */
.pane.is-solo { width: 100%; }
/* no TYPE and no EDITOR on the editor's own rows: the name gets the room */
.pp-head.is-mine, .pp-row.is-mine { grid-template-columns: minmax(260px, 1fr) 112px 62px 72px 92px 150px 186px 26px; min-width: 1060px; }
.pp-card:has(.pp-head.is-mine) .pp-group { min-width: 1036px; }
.pp-group .pp-row.is-mine { min-width: 0; }
/* the strip under a row that waits on a version. It stays in view when the
   table scrolls sideways (sticky, as wide as the card shows) */
.pp-card { container-type: inline-size; }
.pp-row.has-strip { padding-bottom: 14px; }
.pp-drop, .pp-up { grid-column: 1 / -2; position: sticky; left: 18px; width: min(100%, calc(100cqi - 71px)); min-width: 0; margin: 10px 0 2px; border-radius: 10px; white-space: nowrap; }
.pp-drop { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px; border: 1.5px dashed var(--line-dashed); background: var(--raised); font: 500 13px var(--sans); color: var(--text-2); cursor: pointer; }
.pp-drop:hover, .pp-drop:focus-visible, .pp-drop.is-over { border-color: var(--post-line); background: var(--post-wash); outline: none; }
.pp-drop.is-over { border-style: solid; }
.pp-upic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--track); color: var(--text); font: 700 13px var(--sans); flex: none; }
.pp-dropt b { color: var(--text); font-weight: 600; }
.pp-dropt u { color: var(--text); text-underline-offset: 3px; text-decoration-color: var(--line-dashed); }
.pp-dropnm { margin-left: auto; min-width: 0; display: flex; align-items: center; gap: 6px; font: 600 10px var(--mono); letter-spacing: .08em; color: var(--text-3); overflow: hidden; }
.pp-dropnm code { font: 600 10.5px var(--mono); color: var(--text-2); background: var(--track); padding: 2px 6px; border-radius: 4px; letter-spacing: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pp-up { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; padding: 10px 16px 12px; border: 1px solid var(--post-line); background: var(--post-wash); }
.pp-up .pp-upic { grid-row: 1 / 3; background: var(--post); color: var(--post-ink); }
.pp-upt { font: 600 13px var(--sans); color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pp-upt span { font: 500 12px var(--mono); color: var(--text-2); margin-left: 10px; }
.pp-upr { font: 700 11px var(--mono); letter-spacing: .06em; color: var(--post); text-align: right; }
.pp-upx { background: none; border: 0; padding: 0; margin-left: 14px; font: 600 11px var(--mono); letter-spacing: .04em; color: var(--text-3); cursor: pointer; }
.pp-upx:hover { color: var(--text); }
.pp-upbar { grid-column: 2 / 4; height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; }
.pp-upbar i { display: block; height: 100%; background: var(--post); border-radius: 99px; transition: width .4s; }
.pp-up.is-in { grid-template-columns: auto minmax(0, 1fr); padding: 9px 16px; border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 7%, transparent); }
.pp-up.is-in .pp-upic { grid-row: auto; background: var(--ok); }
/* the REVIEW column while the strip is there: where the next version is */
.pp-rvnote { font: 600 10px var(--mono); letter-spacing: .08em; color: var(--text-3); white-space: nowrap; }
.pp-rvnote.is-up { color: var(--post); }
/* the editor's rows as cards on a phone - built with every row, shown here only */
.mc { display: none; padding: 14px 16px 15px; }
.mc-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.mc-what { min-width: 0; }
.mc-name { font: 600 15.5px var(--sans); color: var(--text); line-height: 1.25; }
.mc-name.is-late { color: var(--accent); }
.mc-sub { font: 400 11px var(--mono); color: var(--text-2); letter-spacing: .06em; margin-top: 4px; }
.mc-chips { display: flex; gap: 6px; align-items: center; margin-top: 7px; }
.mc-due { text-align: right; flex: none; padding-top: 1px; }
.mc-count { font: 600 13px var(--mono); color: var(--text); letter-spacing: .02em; white-space: nowrap; }
.mc-count.is-late { color: var(--accent); }
.mc-count.is-client { font-size: 11px; letter-spacing: .1em; color: var(--text-2); }
.mc-count.is-plain { font-weight: 400; color: var(--text-2); }
.mc-date { font: 400 10px var(--mono); color: var(--text-3); letter-spacing: .08em; margin-top: 3px; white-space: nowrap; }
.mc-act { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; align-items: stretch; }
.mc-act.is-one { grid-template-columns: 1fr; }
.mc-act .pp-statbtn { max-width: none; height: 40px; }
.mc-act .pp-rvup { width: 100%; height: 40px; font-size: 13px; }
.mc-link { display: flex; align-items: center; justify-content: center; height: 40px; border: 1px solid var(--line-soft); border-radius: 8px; font: 500 12.5px var(--sans); color: var(--text); text-decoration: none; }
@media (max-width: 700px) {
  .pp-head.is-mine { display: none; }
  .pp-row.is-mine, .pp-group .pp-row.is-mine { display: block; min-width: 0; padding: 0; }
  .pp-row.is-mine > .pp-cell, .pp-row.is-mine > .pp-drop { display: none; }
  .pp-row.is-mine > .mc { display: block; }
  .pp-row.is-mine > .pp-up { position: static; width: auto; margin: -3px 16px 16px; padding: 10px 12px 12px; gap: 6px 10px; }
  /* narrow: the file name over its numbers, the percentage over Cancel */
  .pp-row.is-mine > .pp-up .pp-upt span { display: block; margin: 2px 0 0; font-size: 11px; white-space: normal; }
  .pp-row.is-mine > .pp-up .pp-upr { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .pp-row.is-mine > .pp-up .pp-upx { margin-left: 0; }
  .pp-row.is-mine > .pp-up .pp-uplong { display: none; }
  .pp-row.is-mine > .pp-up.is-in .pp-upt { white-space: normal; }
  .pp-card:has(.pp-head.is-mine) .pp-group { min-width: 0; }
}

/* ---- settings owner: Account tabs and who sees what, help, company defaults, first run (18 Oct 2026) ---- */
/* Account: People / Who sees what / History */
.ax-tabs { display: flex; gap: 4px; margin-left: 18px; }
.ax-tab { font: 600 12.5px var(--sans); color: var(--text-2); padding: 6px 11px; border-radius: 7px; border: 1px solid transparent; background: none; cursor: pointer; }
.ax-tab:hover { color: var(--text); }
.ax-tab.is-on { background: var(--raised); border-color: var(--line-soft); color: var(--text); }
.ax-intro { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 400 12.5px var(--sans); color: var(--text-2); }
.ax-intro b { color: var(--text); font-weight: 600; }
.ax-ro { margin-left: auto; font: 700 9px var(--mono); letter-spacing: .14em; color: var(--text-3); border: 1px solid var(--line-soft); border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.ax-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.ax { width: 100%; border-collapse: collapse; }
.ax th { font: 700 9.5px var(--mono); letter-spacing: .12em; color: var(--text-2); text-align: center; padding: 11px 8px 9px; border-bottom: 1px solid var(--line); background: var(--raised); white-space: nowrap; }
.ax th small { display: block; font: 500 9px var(--mono); letter-spacing: .06em; color: var(--text-3); margin-top: 3px; }
.ax th:first-child, .ax td:first-child { text-align: left; padding-left: 14px; }
.ax td { font: 400 13px var(--sans); text-align: center; padding: 8px; border-top: 1px solid var(--line); white-space: nowrap; }
.ax tbody tr:first-child td { border-top: 0; }
.ax td:first-child { color: var(--text); font-weight: 600; }
.ax td:first-child small { margin-left: 8px; font: 400 11.5px var(--sans); color: var(--text-3); }
.ax-y { color: var(--ok); font-weight: 700; font-size: 14px; }
.ax-n { color: var(--text-3); }
.ax-p { font: 600 10px var(--mono); letter-spacing: .06em; color: var(--danger); background: var(--danger-wash); border: 1px solid var(--danger-line); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.ax-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 12px; font: 400 11.5px var(--sans); color: var(--text-3); }
.ax-note { flex: 1 1 380px; text-align: right; line-height: 1.45; }
.modal-wide .modal-body:has(.ax) { max-height: none; }

/* Help: the "?" beside the theme switch, and its panel */
.hp-grp { display: inline-flex; align-items: center; gap: 4px; }
.logo .btn.hp-btn { position: relative; width: 26px; height: 26px; padding: 0; border-radius: 999px; border: 1px solid var(--line-control); font: 700 12px var(--sans); color: var(--text-2); display: inline-grid; place-items: center; }
.logo .btn.hp-btn.is-on { background: var(--raised); color: var(--text); border-color: var(--text-3); }
.hp-dot { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--page); }
.hp { position: fixed; z-index: 200; width: 392px; max-width: calc(100vw - 16px); max-height: calc(100vh - 90px); display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.hp:before { content: ''; position: absolute; top: -6px; left: 24px; width: 10px; height: 10px; background: var(--panel); border-left: 1px solid var(--line-soft); border-top: 1px solid var(--line-soft); transform: rotate(45deg); }
.hp-s { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.hp-s .search { margin: 0; }
.hp-body { overflow-y: auto; min-height: 0; }
.hp-sec { padding: 12px 14px 6px; }
.hp-new { border-top: 1px solid var(--line); }
.hp-h { display: flex; align-items: baseline; margin-bottom: 8px; font: 700 9.5px var(--mono); letter-spacing: .14em; color: var(--text-2); }
.hp-h em { margin-left: auto; font: 400 11px var(--sans); letter-spacing: 0; color: var(--text-3); font-style: normal; }
.hp-tip { display: flex; gap: 10px; padding: 6px 0; font: 400 12.5px/1.45 var(--sans); color: var(--text-list, var(--text-2)); }
.hp-tip i { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 5px; background: var(--track); display: grid; place-items: center; font: 700 10px var(--mono); font-style: normal; color: var(--text-2); }
.hp-tip b { color: var(--text); font-weight: 600; }
.hp-tip em { font-style: normal; color: var(--text-3); }
.hp-it { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.hp-h + .hp-it { border-top: 0; }
.hp-d { padding-top: 2px; font: 600 10px var(--mono); letter-spacing: .06em; color: var(--text-3); white-space: nowrap; }
.hp-t { display: flex; align-items: center; gap: 7px; font: 600 13px var(--sans); color: var(--text); }
.hp-t .nb { font: 700 8.5px var(--mono); letter-spacing: .12em; color: var(--accent); background: var(--accent-wash); border: 1px solid var(--accent-line); border-radius: 999px; padding: 2px 6px; }
.hp-x { margin-top: 2px; font: 400 12px/1.4 var(--sans); color: var(--text-2); }
.hp-f { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); font: 400 12px var(--sans); color: var(--text-3); }
.hp-k { font: 600 10px var(--mono); color: var(--text-2); border: 1px solid var(--line-soft); border-radius: 4px; padding: 1px 5px; }
.hp-esc { margin-left: auto; }

/* Settings > Company defaults: the NEW tag and where each field goes */
.cd-new { font: 700 8.5px var(--mono); letter-spacing: .12em; color: var(--accent); background: var(--accent-wash); border: 1px solid var(--accent-line); border-radius: 999px; padding: 1px 6px; margin-left: 6px; vertical-align: 1px; }
.cd-pv .st-pv-r { display: block; }
.cd-use { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; }
.cd-use b { font: 600 12.5px var(--sans); color: var(--text); }
.cd-use small { grid-column: 1 / -1; font: 400 11.5px var(--sans); color: var(--text-3); }
.cd-use .n { font: 600 10px var(--mono); letter-spacing: .06em; color: var(--text-2); }
.cd-apply { margin-top: 12px; font: 400 11.5px/1.5 var(--sans); color: var(--text-3); }
.cd-apply b { color: var(--text-2); font-weight: 600; }

/* First run: the three steps and the sample festival */
.ob { max-width: 720px; margin: 56px auto 0; }
.ob-k { margin-bottom: 10px; font: 600 10px var(--mono); letter-spacing: .14em; color: var(--text-3); }
.ob h1 { margin: 0 0 6px; font: 700 30px var(--sans); color: var(--text); }
.ob .lede { margin: 0 0 26px; font: 400 14.5px var(--sans); color: var(--text-2); }
.ob .eh-card { padding: 8px 22px; }
.ob .eh-todo { padding: 16px 0; }
.ob .eh-todo:first-child { border-top: 0; }
.ob .eh-todo > i { background: var(--raised); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-control); }
.ob .eh-todo.is-done > i { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); box-shadow: none; font-size: 15px; }
.ob .eh-todo.is-done .eh-todo-t b { color: var(--text-2); }
.ob-or { display: flex; align-items: center; gap: 14px; margin: 26px 0 16px; font: 600 10px var(--mono); letter-spacing: .14em; color: var(--text-3); }
.ob-or:before, .ob-or:after { content: ''; flex: 1; height: 1px; background: var(--line); }
.ob-sample { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border: 1px dashed var(--line-dashed); border-radius: 14px; background: repeating-linear-gradient(135deg, transparent 0 10px, var(--raised) 10px 20px); }
.ob-sample b { display: block; font: 600 15px var(--sans); color: var(--text); }
.ob-sample small { display: block; margin-top: 3px; font: 400 12.5px var(--sans); color: var(--text-2); }
.ob-sample .btn { margin-left: auto; white-space: nowrap; }
.ob-foot { margin-top: 14px; font: 400 12px var(--sans); color: var(--text-3); }
.ob-ban { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 12px 16px; border: 1px dashed var(--special); border-radius: 12px; white-space: nowrap;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--special) 7%, transparent) 0 10px, transparent 10px 20px); }
.ob-chip { font: 700 10px var(--mono); letter-spacing: .14em; color: var(--busy-ink); background: var(--special); padding: 3px 8px; border-radius: 5px; }
.ob-ban b { font: 600 14px var(--sans); color: var(--text); }
.ob-ban .s { font: 400 13px var(--sans); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ob-ban .btn:first-of-type { margin-left: auto; }
.ob-tag { display: inline-block; margin-right: 6px; padding: 1px 5px; border-radius: 4px; background: var(--special); font: 700 8.5px/1.4 var(--mono); font-style: normal; letter-spacing: .12em; color: var(--busy-ink); vertical-align: 1px; }
.eh-fname .ob-tag { margin-right: 8px; font-size: 9px; }
@media (max-width: 900px) {
  .ob-ban { flex-wrap: wrap; white-space: normal; }
  .ob-sample { flex-direction: column; align-items: flex-start; }
  .ob-sample .btn { margin-left: 0; }
}

/* ---- crew page: your spot, I'm here / running late, next up, no signal, maps links ---- */
.cp-via { margin-top: 10px; text-align: center; font-size: 13px; color: #ffb3b5; }
.cp-via b { color: #fff; font-weight: 600; }
.cp-here { background: rgba(74,222,128,.12); color: #4ade80; border: 1px solid rgba(74,222,128,.45); }
.cp-late { background: rgba(255,176,32,.10); color: #ffb020; border: 1px solid rgba(255,176,32,.5); }
.cp-arr { margin-top: 9px; text-align: center; font-size: 12.5px; color: #a1a1aa; }
.cp-arr.is-here { margin-top: 12px; padding: 10px; border-radius: 12px; background: rgba(74,222,128,.12); color: #4ade80; font-weight: 600; font-size: 13.5px; }
.cp-arr.is-late { margin-top: 12px; padding: 10px; border-radius: 12px; background: rgba(255,176,32,.10); color: #ffb020; font-weight: 600; font-size: 13.5px; }
.cp-lates { display: flex; gap: 8px; margin: 4px 0 12px; }
.cp-lates button { flex: 1; padding: 12px 0 10px; border-radius: 14px; border: 1px solid rgba(255,176,32,.45); background: rgba(255,176,32,.08); color: #f4f4f5; cursor: pointer; }
.cp-lates b { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; }
.cp-lates small { display: block; font-size: 12px; color: #a1a1aa; }
.cp-lates button.is-on { background: #ffb020; border-color: #ffb020; color: #0f0f10; }
.cp-lates button.is-on small { color: #3a2a05; }
.cp-eta { color: #d4d4d8; margin: 0; }
.cp-eta b { color: #ffb020; }
.cp-hr { margin-left: auto; font: 700 10px var(--mono); letter-spacing: .16em; color: #71717a; }
.cp-spot { cursor: pointer; margin: 10px 0 0; }
.cp-planw { position: relative; margin: 8px 0 10px; }
.cp-grow { position: absolute; right: 8px; bottom: 8px; width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.08); display: grid; place-items: center; color: #d4d4d8; font-size: 14px; }
.cp-plan { position: relative; width: 100%; border-radius: 12px; background: #121214; border: 1px solid rgba(255,255,255,.06); overflow: hidden; }
.cp-cone { position: absolute; inset: 0; width: 100%; height: 100%; }
.cp-cone polygon { fill: rgba(237,28,36,.16); }
.cp-pa { position: absolute; box-sizing: border-box; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; background: #222226; display: grid; place-items: center; overflow: hidden; }
.cp-pa.is-ground { background: none; border-style: dashed; }
.cp-pa.is-outer { place-items: start center; padding-top: 6px; }
.cp-pa span { font: 700 8.5px var(--mono); letter-spacing: .14em; color: #71717a; text-transform: uppercase; text-align: center; padding: 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cp-pc { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.cp-pc i { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #52525b; display: grid; place-items: center; font: 700 11px var(--mono); font-style: normal; color: #71717a; background: #121214; }
.cp-pc small { position: absolute; top: 100%; margin-top: 3px; font: 600 9px var(--mono); letter-spacing: .1em; color: #63636b; white-space: nowrap; }
.cp-pc.is-me { z-index: 2; }
.cp-pc.is-me i { width: 28px; height: 28px; background: #ed1c24; border: 2px solid #fff; color: #fff; font-size: 12px; box-shadow: 0 0 0 7px rgba(237,28,36,.22); }
.cp-pc.is-me em { position: absolute; left: 100%; margin-left: 12px; font: 700 10px var(--mono); font-style: normal; letter-spacing: .14em; color: #ff6b70; }
.cp-plan.is-big .cp-pc i { width: 32px; height: 32px; font-size: 13px; }
.cp-plan.is-big .cp-pc.is-me i { width: 36px; height: 36px; font-size: 14px; }
.cp-plan.is-big .cp-pc small { font-size: 10.5px; }
.cp-plan.is-big .cp-pa span { font-size: 10px; }
.cp-spn { font-size: 18px; font-weight: 800; }
.cp-spn b { color: #ed1c24; }
.cp-spg { color: #a1a1aa; font-size: 14px; margin-top: 3px; }
.cp-full { position: fixed; inset: 0; z-index: 60; background: #0f0f10; color: #f4f4f5; display: flex; flex-direction: column; padding: calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; }
.cp-full-top { display: flex; justify-content: space-between; align-items: flex-start; max-width: 480px; width: 100%; margin: 0 auto; }
.cp-full-top .cp-x-btn { position: static; width: 36px; height: 36px; }
.cp-full-k { font: 700 10px var(--mono); letter-spacing: .18em; color: #71717a; }
.cp-full-top h2 { margin: 4px 0 0; font-size: 24px; font-weight: 800; }
.cp-full-plan { flex: 1; display: flex; align-items: center; max-width: 480px; width: 100%; margin: 14px auto; }
.cp-full-plan .cp-plan { background: none; border: 0; }
.cp-full-me { max-width: 480px; width: 100%; margin: 0 auto; box-sizing: border-box; border-radius: 18px; padding: 14px 16px; background: linear-gradient(160deg, #3a0d10, #1a0d10 60%, #18181a); border: 1px solid rgba(237,28,36,.42); }
.cp-full-me b { display: block; font-size: 24px; font-weight: 800; margin: 4px 0 2px; }
.cp-full-me div:last-child:not(.cp-k) { color: #d4d4d8; font-size: 14px; }
.cp-full-ppl { display: flex; flex-wrap: wrap; gap: 6px; max-width: 480px; width: 100%; margin: 10px auto 0; }
.cp-full-ppl span { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: #18181a; font-size: 13.5px; color: #d4d4d8; }
.cp-full-ppl b { font: 700 12px var(--mono); color: #f4f4f5; }
.cp-nextw { position: sticky; top: 0; z-index: 4; margin: -4px -18px 12px; padding: calc(4px + env(safe-area-inset-top)) 18px 8px; background: #0f0f10; }
@media (min-width: 900px) { .cp-nextw { top: 55px; margin: -4px -32px 12px; padding: 8px 32px; } }
.cp-next { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 13px; background: rgba(237,28,36,.08); border: 1px solid rgba(237,28,36,.42); font-size: 13.5px; white-space: nowrap; }
.cp-next > i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #ed1c24; box-shadow: 0 0 0 3px rgba(237,28,36,.25); }
.cp-nk { flex: none; font: 700 10px var(--mono); letter-spacing: .16em; color: #ff6b70; }
.cp-nx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #f4f4f5; }
.cp-nx b { font: 700 13px var(--mono); }
.cp-nin { flex: none; font: 700 11.5px var(--mono); color: #ff6b70; }
.cp-next.is-wrap { background: rgba(74,222,128,.07); border-color: rgba(74,222,128,.42); }
.cp-next.is-wrap > i { background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.22); }
.cp-next.is-wrap .cp-nk, .cp-next.is-wrap .cp-nin { color: #4ade80; }
.cp-tr.is-past .cp-h, .cp-tr.is-past .cp-x b, .cp-tr.is-past .cp-x small { color: #52525b; }
.cp-tr.is-past .cp-dot { background: #52525b; }
.cp-tr.is-past::before { opacity: .35; }
.cp-tr.is-now .cp-h { color: #ff6b70; }
.cp-off { display: flex; align-items: center; gap: 6px; margin: -4px 0 12px; padding: 9px 12px; border-radius: 12px; background: #18181a; border: 1px solid rgba(255,255,255,.08); font-size: 13px; color: #a1a1aa; white-space: nowrap; overflow: hidden; }
.cp-off i { font-style: normal; filter: grayscale(1); opacity: .7; }
.cp-off b { color: #e4e4e7; font-weight: 600; }
.ev-maps { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(237,28,36,.12); color: #ff6b70; font-size: 12.5px; font-weight: 600; text-decoration: none; }
.ev-maps:hover { background: rgba(237,28,36,.2); }
.ev-mapsedit .input { width: 100%; box-sizing: border-box; }
.ev-pin { margin-top: 6px; font-size: 12.5px; color: #4ade80; min-height: 1px; }
.ev-pin.is-bad { color: var(--danger, #ff4d55); }
.ev-pin.is-warn { color: #ffb020; }
.ev-mapshelp { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-3); }
/* show day: what the crew said on their phone */
.sd-calls.is-today { grid-template-columns: 1fr; }
.sd-calls.is-today div { align-items: center; position: relative; }
.sd-calls.is-today div.is-late::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #ffb020; }
.sd-arr { margin-left: auto; font: 600 11.5px var(--mono); color: var(--text-3); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.sd-arr.is-here { color: #22c55e; background: rgba(34,197,94,.12); }
.sd-arr.is-late { color: #f59e0b; background: rgba(245,158,11,.14); }
.sd-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 80; display: flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-radius: 12px; background: var(--panel, #18181a); color: var(--text, #f4f4f5); border: 1px solid rgba(245,158,11,.55); box-shadow: 0 12px 30px rgba(0,0,0,.35); font-size: 14.5px; font-weight: 600; transition: opacity .2s, transform .2s; }
.sd-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.sd-toast i { width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; flex: none; }

/* ---- Book crew: days for everyone (#50) ---- */
.bk-top .bk-tick, .bk-sec .bk-tick { flex: none; margin: 0 2px 0 0; }
.bk-line .bk-top:has(.bk-tick) { gap: 10px; }
.bk-line .bk-top .bk-tick { margin: 0; }
.bk-line.is-picked { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.bk-mini.is-cols { display: grid; grid-template-columns: repeat(var(--nd), 30px); gap: 4px; }
.bk-mini.is-cols .bk-d { text-align: center; padding: 4px 0; }
.bk-d.is-gap { visibility: hidden; }
/* with the side panel beside it the list can be too narrow for the day
   columns in the row: then the days go under the function */
.bk-page .bk-list { container-type: inline-size; }
@container (min-width: 640px) and (max-width: 900px) {
  .bk-page .bk-line { grid-template-columns: minmax(136px, 1fr) minmax(100px, 1.1fr) 270px 78px auto; row-gap: 8px; }
  .bk-page .bk-line > :not(.bk-fn):not(.bk-mini) { grid-row: span 2; }
  .bk-page .bk-line > .bk-fn { grid-column: 2; grid-row: 1; align-self: end; }
  .bk-page .bk-line > .bk-mini { grid-column: 2; grid-row: 2; align-self: start; }
}
.bk-d.is-new { box-shadow: inset 0 0 0 1px #ff8a8f; }
.bk-bulk { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 10px 14px; margin: 0 0 14px;
  border: 1px solid var(--accent-line); background: var(--accent-wash); border-radius: 12px; }
.bk-bulk-n { font: 600 13px var(--sans); color: var(--text); white-space: nowrap; }
.bk-bulk-sep { width: 1px; height: 22px; background: var(--line-soft); }
.bk-bulk-k { font: 500 12.5px var(--sans); color: var(--text-2); white-space: nowrap; }
.bk-bulk .book-days { display: flex; flex-wrap: wrap; gap: 5px; flex: 0 1 auto; min-width: 0; }
.bk-bulk .dpill { min-width: 44px; }
.bk-bulk .spacer { flex: 1; }
.bk-bulk .btn:disabled { opacity: .45; cursor: default; }
.toast.has-undo { pointer-events: auto; display: flex; align-items: center; gap: 14px; }
.toast-undo { background: none; border: 0; padding: 0; font: 700 12.5px var(--sans); color: var(--text); text-decoration: underline; cursor: pointer; }
@media (max-width: 640px) {
  .bk-mini.is-cols { grid-template-columns: repeat(var(--nd), minmax(0, 34px)); }
  .bk-bulk-sep { display: none; }
}

/* ---- Book crew: replace somebody everywhere ---- */
.bk-hist { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px 0; font-size: 12px; color: var(--text-3); }
.bk-hist-r { display: flex; align-items: baseline; gap: 8px; }
.bk-hist-r .card-label { margin: 0; }
.bk-hist-r b { color: var(--text-2); font-weight: 500; }
.rp-modal { width: min(680px, 100%); }
.rp-modal .modal-head { gap: 12px; }
.rp-modal .modal-head h3 { font: 600 16px var(--sans); }
.rp-sub { display: block; font: 400 12px var(--sans); color: var(--text-3); margin-top: 2px; }
.rp-modal .modal-body { max-height: 70vh; }
.rp-lab { font: 500 8.5px var(--mono); letter-spacing: .16em; color: var(--text-3); margin: 0 0 8px; }
.rp-lab + .rp-chg { margin-top: 0; }
.rp-pool { display: flex; flex-direction: column; gap: 6px; }
.rp-who { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 1px solid var(--line-control); border-radius: 9px;
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rp-who:hover { border-color: var(--text-3); }
.rp-who.is-on { border-color: var(--accent); background: var(--accent-wash); }
.rp-who .bk-id { flex: 1; min-width: 0; }
.rp-who .bk-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-free, .rp-busy { font: 600 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; flex: none; }
.rp-free { color: var(--ok); }
.rp-busy { color: #ffb020; }
.rp-search { width: 100%; margin: 6px 0 16px; }
.rp-chg { border: 1px solid var(--line); border-radius: 10px; }
.rp-ci { display: grid; grid-template-columns: 16px 104px minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 12px; cursor: pointer; }
.rp-ci + .rp-ci { border-top: 1px solid var(--line); }
.rp-ci b { font: 600 12.5px var(--sans); color: var(--text); }
.rp-ci span { font: 400 12px var(--sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-ci span em { font-style: normal; color: var(--text-3); }
.rp-ci.is-off b, .rp-ci.is-off span { color: var(--text-3); }
.rp-note { font: 400 11.5px var(--sans); color: var(--text-3); margin-top: 12px; line-height: 1.5; }
.rp-modal .modal-foot .btn:disabled { opacity: .45; cursor: default; }
@media (max-width: 640px) {
  .rp-ci { grid-template-columns: 16px minmax(0, 1fr); }
  .rp-ci span { grid-column: 2; white-space: normal; }
  .rp-who { flex-wrap: wrap; }
  .rp-free, .rp-busy { width: 100%; padding-left: 38px; }
}

/* ---- Callsheet: calltimes from the schedule (#73) ---- */
.cs-from { border-color: var(--accent); color: var(--text); }
.cs-fp { position: absolute; z-index: 300; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6); display: flex; flex-direction: column; }
.cs-fp.is-side:after { content: ''; position: absolute; right: -7px; top: 22px; width: 12px; height: 12px; background: var(--panel);
  border-top: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); transform: rotate(45deg); }
.cs-fp-h { padding: 14px 18px 12px; border-bottom: 1px solid var(--line); }
.cs-fp-h h3 { font: 700 14px var(--sans); margin: 0 0 4px; color: var(--text); }
.cs-fp-h p { margin: 0; font: 400 12px var(--sans); color: var(--text-2); }
.cs-fp-buf { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 11px 18px; border-bottom: 1px solid var(--line); font: 500 12.5px var(--sans); color: var(--text-2); }
.cs-fp-buf .vn-chip { font: 600 11px var(--mono); padding: 4px 9px; color: var(--text-2); }
.cs-fp-buf .vn-chip.is-on { color: var(--text); }
.cs-fp-grid { padding: 6px 18px 4px; max-height: 60vh; overflow-y: auto; }
.cs-fp-r { display: grid; grid-template-columns: 150px repeat(var(--nd), minmax(0, 1fr)); gap: 12px; align-items: center; padding: 8px 0; }
.cs-fp-r + .cs-fp-r { border-top: 1px solid var(--line); }
.cs-fp-r.is-head { padding: 4px 0 6px; }
.cs-fp-r.is-head span { font: 500 8.5px var(--mono); letter-spacing: .14em; color: var(--text-3); }
.cs-fp-n { font: 600 12.5px var(--sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-fp-n small { display: block; font: 400 11px var(--sans); color: var(--text-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.cs-fp-c { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 10px; align-items: center; white-space: nowrap; cursor: pointer; }
.cs-fp-c > :first-child { grid-row: 1 / 3; }
.cs-fp-t { font: 600 14px var(--mono); color: var(--text); }
.cs-fp-t s { color: var(--text-3); font-weight: 400; font-size: 12px; margin-right: 2px; }
.cs-fp-from { grid-column: 2; font: 400 11px var(--sans); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.cs-fp-from b { font: 500 11px var(--mono); color: var(--text-2); }
.cs-fp-c.is-off .cs-fp-t { color: var(--text-3); }
.cs-fp-c.is-none { cursor: default; }
.cs-fp-c.is-none .cs-fp-from { font-style: italic; }
.cs-fp-f { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); }
.cs-fp-f > span { font: 400 11.5px var(--sans); color: var(--text-3); flex: 1; }
.cs-fp-f .btn:disabled { opacity: .45; cursor: default; }
@media (max-width: 640px) {
  .cs-fp-r { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cs-fp-r.is-head { display: none; }
  .cs-fp-t[data-day]::before { content: attr(data-day) '  '; font: 500 9px var(--mono); letter-spacing: .12em; color: var(--text-3); white-space: pre; }
}
.cp-sm .cp-link { color: inherit; }

/* ---- packing: still to pack, a whole group at once, the return pass after the show ---- */
:root { --lost: color-mix(in srgb, var(--accent) 70%, var(--text)); }
/* the filter stays on top while the list scrolls under it */
.pk-filt { position: sticky; top: 0; z-index: 30; background: var(--page); padding: 10px 0; margin-top: 6px; }
.pk-seg { display: flex; max-width: 560px; border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden; }
.pk-seg button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; background: none; border: 0; color: var(--text-2); font: 500 13.5px var(--sans); cursor: pointer; }
.pk-seg button + button { border-left: 1px solid var(--line-soft); }
.pk-seg em { font: 600 9px var(--mono); letter-spacing: .12em; color: var(--text-3); font-style: normal; }
.pk-seg button.is-on { background: var(--track); color: var(--text); font-weight: 650; }
.pk-seg button.is-on em { color: var(--busy); }
.pk-filt.is-ret .pk-seg button.is-on em { color: var(--post); }
.pk-mini { display: flex; align-items: center; gap: 8px; max-width: 560px; margin-top: 8px; font: 600 9px var(--mono); letter-spacing: .12em; color: var(--text-2); white-space: nowrap; }
.pk-mini .pk-bar { flex: 1; height: 5px; margin: 0; }
.pk-filt.is-ret .pk-bar i { background: var(--post); }
.pk-filt + .pk-sheets { margin-top: 2px; }
.pk-hid { display: block; padding: 9px 14px 0; background: none; border: 0; font: 600 9px var(--mono); letter-spacing: .12em; color: var(--ok); text-align: left; cursor: pointer; }
.pk-hid u { color: var(--text-2); }
.pk-hid.is-none { color: var(--text-3); cursor: default; padding-bottom: 6px; }
.pk-line.is-next { outline: 2px solid var(--busy); outline-offset: -2px; border-radius: 8px; background: color-mix(in srgb, var(--busy) 8%, transparent); }
/* the next thing to pack, one tap away at the bottom of the screen */
.pk.has-next { padding-bottom: 90px; }
.pk-next { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); cursor: pointer;
  background: color-mix(in srgb, var(--panel) 94%, transparent); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px rgba(0,0,0,.45); backdrop-filter: blur(8px); }
.pk-next small { flex: none; font: 700 9px var(--mono); letter-spacing: .14em; color: var(--busy); }
.pk-next b { flex: 1; min-width: 0; font: 600 15px var(--sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-next b span { color: var(--text-2); font-weight: 500; }
.pk-nextgo { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; font: 700 18px var(--sans); cursor: pointer; }
body:has(.pk-next) .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (max-width: 899px) { .cp-acct .pk-next { bottom: calc(62px + env(safe-area-inset-bottom)); } }
/* a box on every sheet and category: tick the lot */
.pk-groupbox { flex: none; width: 18px; height: 18px; cursor: pointer; }
.pk-cathead { display: flex; align-items: center; gap: 10px; padding: 12px 14px 4px; cursor: pointer; }
.pk-cathead em { margin-left: auto; font: 600 8.5px var(--mono); letter-spacing: .12em; color: var(--text-3); font-style: normal; }
.pk-cathead.is-full em { color: var(--ok); }
@container (max-width: 760px) {
  .pk-cathead { padding: 14px 12px 4px; }
  .pk-groupbox { width: 22px; height: 22px; }
}
.toast.pk-utoast { display: flex; align-items: center; gap: 14px; font-size: 14px; white-space: nowrap; }
.toast.show.pk-utoast { pointer-events: auto; }
.pk-utoast i { font-style: normal; font-weight: 700; color: var(--ok); }
.pk-utoast button { padding: 0; background: none; border: 0; font: 650 14px var(--sans); color: var(--accent); cursor: pointer; }
/* after the show: blue is back, red is lost, amber is broken */
.pk-retbadge { display: inline-block; margin-bottom: 8px; padding: 3px 8px; border-radius: 5px; font: 700 9px var(--mono); letter-spacing: .14em; color: var(--post-ink); background: var(--post); }
.pk-head.is-ret { align-items: flex-start; }
.pk-retprog .pk-packed { display: flex; align-items: center; gap: 8px; font: 600 9px var(--mono); letter-spacing: .12em; color: var(--text-2); white-space: nowrap; }
.pk-retprog .pk-packed.is-done { color: var(--ok); }
.pk-retprog .pk-packed .pk-bar { flex: 1; height: 4px; margin: 0; opacity: .7; }
.pk-retprog > b { margin-top: 12px; }
.pk-bar.is-back i, .gl-sup .gl-bar.is-back i { background: var(--post); }
.pk-split { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; margin-top: 6px; font: 500 9px var(--mono); letter-spacing: .1em; color: var(--text-2); }
.pk-lostsum { margin-top: 10px; font: 700 9.5px var(--mono); letter-spacing: .08em; color: var(--special); }
.pk-lostsum .is-lost { color: var(--lost); }
.pk-sec .pk-backkey { color: var(--post); }
.pk-job.is-ret .check, .pk-job.is-ret .pk-groupbox { accent-color: #3b7ddd; }
.pk-job.is-ret .pk-tick { color: var(--post); }
.pk-off.pk-mark { color: var(--special); }
.pk-off.pk-mark.is-lost { color: var(--lost); }
.pk-offbox p.pk-offnote { margin: -4px 0 14px; font-size: 12.5px; }
.pk-offtag.is-lost { color: var(--lost); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
/* the producer's gear list: the return card */
.gl-mchip.is-back { color: var(--post); border-color: var(--post-line); }
.gl-rp { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); margin: 10px 0 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.gl-rp-l { padding: 16px 20px; }
.gl-rp-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 14px; }
.gl-rp-top .pk-retbadge { margin: 0; }
.gl-rp-who { font: 500 12.5px var(--sans); color: var(--text-2); }
.gl-rp-who b { color: var(--text); font-weight: 600; }
.gl-rp-bars { display: grid; grid-template-columns: 1fr 1.6fr; gap: 26px; align-items: end; }
.gl-rp-k { display: flex; align-items: baseline; gap: 6px; font: 600 20px var(--sans); color: var(--text); }
.gl-rp-k span { font: 600 9.5px var(--mono); letter-spacing: .12em; color: var(--text-2); }
.gl-rp-k.is-done { font-size: 15px; color: var(--ok); }
.gl-rp-k.is-done span { color: var(--ok); }
.gl-rp .pk-bar { height: 6px; margin-top: 7px; }
.gl-rp .is-packed .pk-bar { height: 4px; opacity: .65; }
.gl-rp-split { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 9px; font: 500 9.5px var(--mono); letter-spacing: .08em; color: var(--text-2); }
.gl-rp-split b { color: var(--text); font-weight: 600; }
.gl-rp-r { padding: 16px 20px; border-left: 1px solid var(--line); }
.gl-rp-r.is-bad { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.gl-rp-r h4 { margin: 0 0 8px; font: 650 15px var(--sans); color: var(--text-2); }
.gl-rp-r.is-bad h4 { color: var(--lost); }
.gl-rp-r h4 em { font-style: normal; color: var(--text); }
.gl-rp-r ul { margin: 0; padding: 0; list-style: none; }
.gl-rp-r li { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line-soft); font: 500 13px var(--sans); color: var(--text); }
.gl-rp-r li .pk-offtag { margin-left: 0; }
.gl-rp-what { min-width: 0; }
.gl-rp-r li small { margin-left: auto; font: 500 9px var(--mono); letter-spacing: .08em; color: var(--text-3); white-space: nowrap; }
.gl-rp-none { margin: 0; font-size: 12.5px; color: var(--text-3); }
@media (max-width: 900px) {
  .gl-rp { grid-template-columns: minmax(0, 1fr); }
  .gl-rp-r { border-left: 0; border-top: 1px solid var(--line); }
  .gl-rp-bars { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* ---- review: carry on where you stopped (#135) ---- */
/* the edit list: a thin bar on the still of a started edit, and how far */
.rv-pr { position: relative; flex: none; display: block; line-height: 0; }
.rv-pbar { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.22); overflow: hidden; }
.rv-pbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--rv-yellow2); border-radius: 2px; }
.rv-at { display: block; font: 500 10.5px var(--mono); color: var(--rv-yellow2); letter-spacing: .02em; margin-top: 2px; }

/* ---- camera dialog: groups, lens/media/grip rows ---- */
/* a heading inside a form dialog (formDialog's type 'heading'): which group
   the fields under it are, a line between the groups, a count on its right */
.form-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 14px; margin-top: 2px; border-top: 1px solid var(--line); }
.form-head:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.form-head b { font: 700 9.5px var(--mono); letter-spacing: .14em; color: var(--text-3); text-transform: uppercase; }
.form-head span { font: 600 9.5px var(--mono); letter-spacing: .08em; color: var(--text-2); text-transform: uppercase; text-align: right; }
.cam-dlg .form-grid { gap: 10px 14px; }
.cam-dlg .field > label:empty { display: none; }
/* grip and power: two groups side by side, each its own heading */
.cam-dlg .field.cd-sub { padding-top: 14px; margin-top: 2px; border-top: 1px solid var(--line); }
.cam-dlg .field.cd-sub > label { font-size: 9.5px; margin-bottom: 2px; }
.cam-dlg .field.cd-sub .field-hint { margin-top: 2px; }
.cam-dlg .field.cd-left { margin-right: -14px; padding-right: 14px; }   /* one line over both, across the gap */
/* letter · name · type · operated, one line */
.cd-pos { display: flex; align-items: center; gap: 8px; }
.cd-pos .cd-letter { flex: 0 0 46px; text-align: center; font-weight: 700; text-transform: uppercase; }
.cd-pos .cd-name { flex: 1 1 auto; min-width: 0; }
.cd-pos .cd-type { flex: 0 0 128px; width: 128px; }
.field label.cd-check { display: flex; align-items: center; gap: 7px; flex: none; padding: 0 2px; font: 500 12.5px var(--sans); letter-spacing: 0; text-transform: none; color: var(--text); cursor: pointer; white-space: nowrap; }
/* rows with a × each, and "+ Add …" under them */
.cd-rows { display: flex; flex-direction: column; gap: 6px; }
.cd-line { display: flex; align-items: center; gap: 4px; }
.cd-line > .select, .cd-line > .cd-cell { flex: 1; min-width: 0; }
.cd-cell { display: flex; align-items: stretch; gap: 8px; }
.cd-cell .select { flex: 1; min-width: 0; }
/* the adapter a lens takes on this body: "EF-RF" (Stijn, 29 Oct 2026) */
.cd-adapt { align-self: center; flex: none; font: 700 10.5px/1 var(--mono); letter-spacing: .08em; color: var(--text-chip); border: 1px solid var(--line-control); border-radius: 6px; padding: 6px 8px; }
.cd-cell .select.is-bad { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line); }
.cd-x { flex: none; width: 26px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--text-3); font: 400 15px var(--sans); cursor: pointer; }
.cd-x:hover { color: var(--text); background: var(--track); }
.cd-add { align-self: flex-start; border: 0; background: none; padding: 3px 0; cursor: pointer; font: 500 12px var(--sans); color: var(--text-2); }
.cd-add b { font-weight: 600; color: var(--text); }
.cd-add:hover b { text-decoration: underline; text-underline-offset: 3px; }
/* − n + : how many of one card */
.cd-step { flex: none; display: flex; align-items: stretch; border: 1px solid var(--line-soft); border-radius: 7px; overflow: hidden; background: var(--page); }
.cd-step button { width: 28px; border: 0; background: none; color: var(--text-2); font: 500 14px var(--sans); cursor: pointer; }
.cd-step button:hover { color: var(--text); background: var(--track); }
.cd-step .cd-n { width: 32px; padding: 0; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: none; color: var(--text); text-align: center; font: 700 12.5px var(--mono); }
.cd-step .cd-n:focus { outline: none; background: var(--accent-wash); }
.cam-dlg .field-hint:empty { display: none; }
.cam-dlg .textarea { min-height: 52px; height: 58px; }
/* view only: nothing to add or take off */
.form-grid.is-readonly .cd-x, .form-grid.is-readonly .cd-add, .form-grid.is-readonly .cd-step button { display: none; }
.form-grid.is-readonly .cd-step .cd-n { width: 40px; border: 0; }
@media (max-width: 520px) {
  .cd-pos { flex-wrap: wrap; }
  .cd-pos .cd-name { flex: 1 1 calc(100% - 54px); }
  .cd-pos .cd-type { flex: 1 1 0; width: auto; min-width: 0; }
  .cam-dlg .field.cd-left { margin-right: 0; padding-right: 0; }
}

/* ---------- the Video Reviewer (views/videos.js) ---------- */
.ovr-h { margin-bottom: 22px; }
.ovr-new { margin-top: -6px; }
.ovr-grp { margin: 0 0 22px; }
.ovr-gh { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; font: 600 10.5px var(--mono); letter-spacing: .14em; color: var(--text-3); }
.ovr-fs { font: 700 10px var(--mono); letter-spacing: .12em; color: var(--text-3); margin: 10px 0 6px 2px; }
.ovr-fs i { font-style: normal; color: var(--text-3); opacity: .7; }
.ovr-kind { font: 700 9.5px var(--mono); font-style: normal; letter-spacing: .1em; padding: 1px 6px; border-radius: 4px; background: rgba(255,255,255,.07); color: var(--text-2); margin-right: 7px; }
.ovr-none { padding: 18px; color: var(--text-3); }
/* All · Feedback ready · In review · Approved, beside the title (28 Oct 2026) */
.ovr-h .title-left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ovr-states { display: flex; gap: 6px; flex-wrap: wrap; }
.ovr-sf { font: 600 12.5px var(--sans); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-control, rgba(255,255,255,.16)); background: none; color: var(--text-2); cursor: pointer; }
.ovr-sf em { font: 700 10.5px var(--mono); font-style: normal; margin-left: 6px; opacity: .7; }
.ovr-sf.is-warn { color: #f08a4b; border-color: rgba(240,138,75,.45); }
.ovr-sf.is-on { background: #e8e8ea; color: #111113; border-color: #e8e8ea; }
.ovr-gh b { font: 700 12px var(--mono); letter-spacing: .14em; color: var(--text); }
.ovr-card { padding: 0; overflow: hidden; }
.ovr-card > * + * { border-top: 1px solid var(--line); }
/* the list on the left, the selected video large on the right - the page uses the full width */
.board:has(.ovr-wide), .board:has(.ovr-empty) { max-width: none; flex: 1 1 auto; min-width: 0; }
.ovr-wide { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
.ovr-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 12px 16px; cursor: pointer; }
.ovr-row:hover { background: var(--raised); }
.ovr-row.is-sel { background: var(--raised); box-shadow: inset 3px 0 0 var(--accent); }
.ovr-side { position: sticky; top: 20px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; }
.ovr-side-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: linear-gradient(135deg, #22202b, #1b2530); }
.ovr-side-img.is-none { display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 28px; }
.ovr-side-in { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ovr-side-in h3 { margin: 0; font: 600 18px var(--sans); color: var(--text); }
.ovr-side-in small { color: var(--text-2); font-size: 13px; }
.ovr-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text-2); border-top: 1px solid var(--line); padding-top: 10px; }
.ovr-kv b { color: var(--text); font-weight: 600; }
.ovr-side-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-top: 4px; }
.ovr-side-acts .ovr-open { background: var(--text); color: var(--page); border-color: transparent; }
.ovr-row.is-drop { outline: 2px dashed #5fb4f0; outline-offset: -4px; }
.ovr-th { position: relative; width: 96px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: linear-gradient(135deg, #22202b, #1b2530); display: flex; align-items: center; justify-content: center; }
.ovr-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
a.ovr-th { cursor: pointer; }
a.ovr-th::after { content: '\25B6'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .15s; }
a.ovr-th:hover::after { opacity: 1; }
.ovr-th-none { color: var(--text-3); font-size: 16px; }
.ovr-th i { position: absolute; right: 5px; bottom: 4px; font: 600 10px var(--mono); font-style: normal; color: #fff; background: rgba(0,0,0,.6); padding: 1px 5px; border-radius: 4px; }
.ovr-n { min-width: 0; }
.ovr-n b { display: block; font: 600 15px var(--sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ovr-n span { display: block; font: 400 12.5px var(--sans); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ovr-st { display: inline-block; font: 700 10px var(--mono); letter-spacing: .12em; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-control); color: var(--text-2); white-space: nowrap; }
.ovr-st.is-rv { color: #5fb4f0; border-color: rgba(95,180,240,.4); background: rgba(95,180,240,.08); }
.ovr-st.is-fb { color: #ffb020; border-color: rgba(255,176,32,.4); background: rgba(255,176,32,.08); }
.ovr-st.is-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.ovr-st.is-bad { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.ovr-side-acts .pp-rvup { padding: 6px 11px; }
.ovr-up { padding: 0 16px 12px; }
.ovr-empty { padding: 30px 0; }
.ovr-modal { width: min(560px, 94vw); }
.ovr-f { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.ovr-f label { font: 600 10.5px var(--mono); letter-spacing: .13em; color: var(--text-3); }
.ovr-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ovr-chip { font: 500 12px var(--sans); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-control); background: none; color: var(--text-2); cursor: pointer; }
.ovr-chip:hover { color: var(--text); border-color: var(--text-3); }
.ovr-drop { border: 1.5px dashed #5fb4f0; border-radius: 10px; padding: 22px; text-align: center; color: var(--text-2); font: 500 13.5px var(--sans); cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
.ovr-drop.is-over { background: rgba(95,180,240,.08); }
.ovr-drop b { color: var(--text); }
.ovr-drop small { display: block; margin-top: 4px; font-size: 12px; color: var(--text-3); }
.ovr-drop code { font: 500 11.5px var(--mono); color: var(--text-3); }
.ovr-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
@media (max-width: 1100px) {
  .ovr-wide { grid-template-columns: 1fr; }
  .ovr-side { position: static; order: -1; }
}

/* ---------- the review page's Drops tab (views/drops.js) ---------- */
.rv-tabs { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: #161618; }
.rv-tabs button { font: 600 13px var(--sans); padding: 6px 13px; border-radius: 7px; border: 0; background: none; color: var(--rv-text2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.rv-tabs button.is-on { background: #f4f4f5; color: #0b0b0c; }
.rv-tabs em { font: 700 10px var(--mono); font-style: normal; opacity: .7; }
/* the Snippets tab in the snippets' magic yellow */
.rv-tabs button.is-snip { color: #ffc94d; }
.rv-tabs button.is-snip.is-on { color: #1a1204; background: linear-gradient(110deg, #f5a524 0%, #ffc94d 40%, #fff4d6 50%, #ffc94d 60%, #f5a524 100%); background-size: 250% 100%; background-position: 100% 0;
  box-shadow: 0 2px 14px rgba(255,176,32,.38); animation: rv-shimmer 5s ease-in-out 1.8s infinite; }
@media (prefers-reduced-motion: reduce) { .rv-tabs button.is-snip.is-on { animation: none; background-position: 50% 0; } }
.rv-dropsw { grid-column: 2 / -1; overflow-y: auto; min-height: 0; }
.rv-main.one .rv-dropsw { grid-column: 1 / -1; }
.dr { padding: 22px 28px 96px; color: var(--rv-text); }
.dr-info { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 0 0 12px; color: var(--rv-text2); font: 600 11px var(--mono); letter-spacing: .12em; }
.dr-info b { color: var(--rv-text); }
.dr-info .is-busy b { color: #5fb4f0; }
.dr-info .is-bad b { color: #ff6b70; }
.dr-tl { position: relative; height: 46px; background: #161618; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; margin: 0 0 18px; overflow: hidden; }
.dr-wave { position: absolute; inset: 8px 10px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 2px, transparent 2px 5px); }
.dr-mk { position: absolute; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: #ffb020; transform: translateX(-1px); }
.dr-mk.is-own { background: rgba(244,244,245,.35); width: auto; min-width: 3px; }
.dr-mk.is-on { background: #ed1c24; }
.dr-own { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; background: #161618; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px 16px; margin: 0 0 22px; }
.dr-own b { font-size: 14px; }
.dr-own label { display: flex; align-items: center; gap: 8px; font: 600 10.5px var(--mono); letter-spacing: .14em; color: var(--rv-text3); }
.dr-in { width: 86px; font: 600 15px var(--mono); padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.16); background: #0b0b0c; color: var(--rv-text); text-align: center; }
.dr-own > span { color: var(--rv-text3); font-size: 12.5px; }
.dr-go { font: 600 13px var(--sans); padding: 9px 14px; border-radius: 9px; border: 0; background: var(--accent, #ed1c24); color: #fff; cursor: pointer; }
.dr-go:disabled { opacity: .5; cursor: default; }
.dr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.dr-c { border-radius: 12px; overflow: hidden; background: #161618; border: 2px solid transparent; }
.dr-c.is-picked { border-color: #ed1c24; }
.dr-p { position: relative; aspect-ratio: 9 / 16; background: linear-gradient(180deg, #17121c, #05050a); display: flex; align-items: center; justify-content: center; }
.dr-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.dr-play { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(0,0,0,.5); color: #fff; font-size: 16px; padding-left: 3px; cursor: pointer; }
.dr-making { position: relative; z-index: 1; font: 600 11px var(--mono); letter-spacing: .12em; color: #5fb4f0; text-transform: uppercase; }
.dr-making.is-bad { color: #ff6b70; }
.dr-one { height: 22px; padding: 0 8px; margin: -3px -4px -3px 0; border-radius: 6px; white-space: nowrap; border: 1px solid rgba(255,255,255,.14); background: transparent; color: var(--text-2, #a1a1aa); font: 600 11px var(--sans); line-height: 1; cursor: pointer; }
.dr-one:hover { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.3); }
/* fetched on a phone: the next tap saves it to Photos */
.dr-one.is-ready { background: var(--rv-yellow, #f5c518); border-color: var(--rv-yellow, #f5c518); color: #141008; }
.dr-top { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px 8px; font: 700 11px var(--mono); letter-spacing: .04em; }
.dr-lbl { color: #f4f4f5; }
.dr-info .st-set { font: 700 18px var(--sans); letter-spacing: -.01em; color: var(--rv-text); text-transform: none; }
.dr-len { color: #a1a1aa; font-weight: 600; }
.dr-ck { flex: none; width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.55); background: none; color: #fff; font-size: 10px; font-weight: 800; cursor: pointer; padding: 0; }
.dr-nm { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.dr-nm b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-rf { flex: none; }
/* the card's own slim player bar (Stijn, 27 Oct 2026) */
.dr-ctl { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: 999px; background: rgba(10,10,12,.55); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s; }
.dr-p:hover .dr-ctl, .dr-p.is-paused .dr-ctl { opacity: 1; }
@media (hover: none) { .dr-ctl { opacity: 1; } }
.dr-pp { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 0; background: none; color: #fff; font-size: 10px; letter-spacing: -1px; cursor: pointer; padding: 0; }
.dr-tr { flex: 1; position: relative; height: 3px; border-radius: 2px; background: rgba(255,255,255,.25); cursor: pointer; }
.dr-tr::after { content: ''; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
.dr-tr i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: #fff; }
.dr-tleft { flex: none; font: 600 10px var(--mono); color: rgba(255,255,255,.85); min-width: 30px; text-align: right; }
.dr-p video.dr-still { cursor: pointer; }
/* a small card (Stijn, 27 Oct 2026): the formats by their shape, Reframe an icon, the judging without its words */
.dr-c { container-type: inline-size; }
.dr-c .cs-short { display: none; }
@container (max-width: 210px) {
  .dr-c .cs-long { display: none; }
  .dr-c .cs-short { display: inline; }
  .dr-top { font-size: 10px; padding: 7px 10px; letter-spacing: 0; }
  .dr-fmrow { padding: 0 10px 8px; }
  .dr-m { padding: 8px 10px; }
  .dr-m b { font-size: 12px; }
  .dr-ck { width: 16px; height: 16px; font-size: 9px; }
  .dr-nm { gap: 6px; }
  .dr-rf { padding: 3px 8px; font-size: 13px; line-height: 1.1; }
  .st-fm { gap: 4px; }
  .st-fm button { font-size: 10px; }
  .ed-judge { margin-top: 8px; }
}

.dr-ck.is-on { background: #ed1c24; border-color: #ed1c24; }
.dr-m { padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; }
.dr-m .dr-x { font: 600 11px var(--mono); background: #0b0b0c; border: 1px solid rgba(255,255,255,.12); color: var(--rv-text2); border-radius: 6px; padding: 3px 7px; cursor: pointer; }
.dr-m b { font: 600 13px var(--sans); }
.dr-nudge { display: flex; align-items: center; gap: 4px; }
.dr-nudge span { font: 700 9.5px var(--mono); letter-spacing: .12em; color: var(--rv-text3); margin: 0 2px 0 4px; }
.dr-nudge span:first-child { margin-left: 0; }
.dr-nudge button { font: 600 10px var(--mono); background: #0b0b0c; border: 1px solid rgba(255,255,255,.12); color: var(--rv-text2); border-radius: 6px; padding: 4px 7px; cursor: pointer; }
.dr-nudge button:hover { color: var(--rv-text); border-color: rgba(255,255,255,.3); }
.dr-nudge .dr-x { margin-left: auto; }
.dr-empty { text-align: center; padding: 50px 20px; color: var(--rv-text2); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dr-empty b { color: var(--rv-text); font-size: 16px; }
.dr-empty p { margin: 0; max-width: 420px; }
.dr-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 28px calc(14px + env(safe-area-inset-bottom, 0px)); background: rgba(11,11,12,.92); backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,.08); }
.dr-bar b { font-size: 15px; margin-right: 10px; }
.dr-bar span { color: var(--rv-text2); font-size: 13px; }
.dr-dl { font: 600 13px var(--sans); padding: 10px 16px; border-radius: 9px; border: 1px solid rgba(255,255,255,.14); background: #18181b; color: var(--rv-text); cursor: pointer; }
.dr-dl:disabled { opacity: .4; cursor: default; }
@media (max-width: 1100px) { .rv-dropsw, .rv-main.one .rv-dropsw { grid-column: 1 / -1; } }
@media (max-width: 700px) {
  .dr { padding: 16px 14px 110px; }
  .dr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dr-bar span { display: none; }
  .dr-nudge { flex-wrap: wrap; row-gap: 6px; }
  .dr-nudge button { padding: 4px 6px; }
  .rv-top:has(.rv-tabs) { flex-wrap: wrap; row-gap: 10px; }
  .rv-top:has(.rv-tabs) .rv-topr { flex-wrap: wrap; row-gap: 8px; }
  /* two snippets side by side on a phone; the sticky bar fits the narrower page */
  .rv-dropsw .dr-grid.dr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv-dropsw .st-top { margin: -16px -14px 12px; padding: 12px 14px 10px; }
}
.dr-again { padding: 6px 12px; font-size: 12px; margin-left: auto; }
.dr-making.is-again { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--rv-text2); text-align: center; padding: 0 10px; text-transform: none; letter-spacing: 0; font: 500 12.5px var(--sans); }

/* ---------- stories: the Create stories window and the Stories view (views/drops.js) ---------- */
/* Create snippets: magic yellow, a sheen sweeping across now and then - blue
   is Feedback ready's (Stijn, 22 Oct 2026) */
.rv-cs { font: 700 13px var(--sans); padding: 9px 16px; border-radius: 9px; border: 0; cursor: pointer; color: #1a1204;
  background: linear-gradient(110deg, #f5a524 0%, #ffc94d 40%, #fff4d6 50%, #ffc94d 60%, #f5a524 100%); background-size: 250% 100%; background-position: 100% 0;
  box-shadow: 0 4px 20px rgba(255,176,32,.38); animation: rv-shimmer 5s ease-in-out infinite; transition: box-shadow .2s, transform .2s; }
.rv-cs:hover { box-shadow: 0 6px 26px rgba(255,176,32,.6); transform: translateY(-1px); }
@keyframes rv-shimmer { 0%, 70% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .rv-cs { animation: none; background-position: 50% 0; } }
/* Download: Epic red with warm light running across (Stijn, 22 Oct 2026) */
.rv-dl.rv-ember { font-weight: 700; padding: 9px 17px; border: 0; color: #fff;
  background: linear-gradient(110deg, #c4121a 0%, #ED1C24 40%, #ff6a3d 50%, #ED1C24 60%, #c4121a 100%); background-size: 250% 100%; background-position: 100% 0;
  box-shadow: 0 4px 22px rgba(237,28,36,.45); animation: rv-shimmer 5s ease-in-out 1.2s infinite; transition: box-shadow .2s, transform .2s; }
.rv-dl.rv-ember:hover { box-shadow: 0 6px 28px rgba(237,28,36,.7); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .rv-dl.rv-ember { animation: none; background-position: 50% 0; } }
.rv-story { color: #ffb020; border-color: rgba(255,176,32,.35); opacity: .6; }
/* IN and OUT both set: it can make the snippet now (Stijn, 27 Oct 2026) */
.rv-story.is-ready { opacity: 1; background: #ffb020; border-color: #ffb020; color: #141008; }
.rv-story:disabled { opacity: .4; cursor: default; }
.st-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; }
/* the bar with the buttons stays on top while scrolling (Stijn, 27 Oct 2026) */
.rv-dropsw .st-top { position: sticky; top: 0; z-index: 4; margin: -22px -28px 14px; padding: 18px 28px 12px; background: var(--rv-bg); }
.st-top .dr-info { margin: 0; }
.st-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.st-acts .dr-go:disabled, .st-acts .dr-dl:disabled { opacity: .4; cursor: default; }
.st-rm { color: #ff8a8f; }
.st-round { margin: 0 0 28px; }
/* each round under a bar across the page (Stijn, 27 Oct 2026) */
.st-rh { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 14px; padding: 9px 14px; background: #1a1a1d; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; font: 600 10.5px var(--mono); letter-spacing: .13em; color: var(--rv-text3); }
.st-rh b { font: 700 12px var(--mono); letter-spacing: .14em; color: var(--rv-text); }
.st-rh { align-items: center; }
.st-rht { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; flex: none; }
.st-rhw { flex: 1; min-width: 160px; }
.st-rhs { display: block; width: 100%; height: 26px; }
.st-rhm { stroke: #ffc94d; stroke-width: 1.25; }
.st-rhm.is-hot { stroke: #fff; stroke-width: 2.5; }
/* the bar stays at the top while its round scrolls by; the next round's takes over (Stijn, 27 Oct 2026) */
.st-round > .st-rh { position: sticky; top: var(--dr-top, 0px); z-index: 3; box-shadow: 0 8px 18px rgba(0,0,0,.45); }
.st-rh .is-bad { color: #ff8a8f; }
.dr-p.is-45 .dr-still, .dr-p.is-11 .dr-still { object-fit: contain; }
.st-mh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dr-m { flex-direction: column; align-items: stretch; }
.st-fm { display: flex; justify-content: center; gap: 6px; }
.dr-fmrow { padding: 0 12px 10px; }
.st-fm button { flex: 1 1 0; font: 700 11px var(--mono); padding: 5px 0; max-width: calc(25% - 4.5px); border-radius: 6px; border: 1px solid rgba(255,255,255,.12); background: none; color: var(--rv-text2); cursor: pointer; }
.st-fm button.is-on { background: #f4f4f5; color: #0b0b0c; border-color: #f4f4f5; }
.st-back .st-modal { width: min(720px, 96vw); max-height: 92vh; display: flex; flex-direction: column; background: #161618; color: #f4f4f5; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; overflow: hidden; }
.st-mh2 { padding: 16px 22px; border-bottom: 1px solid rgba(255,255,255,.08); }
.st-mh2 b { font-size: 17px; }
.st-mb { padding: 16px 22px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.st-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-name { width: min(280px, 100%); text-align: left; font-family: var(--sans); font-size: 14px; }
.st-mail { margin-left: auto; color: #a1a1aa; font-size: 13px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.st-mf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-top: 1px solid rgba(255,255,255,.08); color: #a1a1aa; font-size: 13px; }
.st-mf b { color: #f4f4f5; }
.st-btns { display: flex; gap: 8px; }
/* the Create snippets window (Stijn, 27 Oct 2026): tiles, the settings under them only while they matter, formats, length */
.st-back .st-modal.cs-modal { width: min(600px, 100%); }
.cs-mh { display: flex; align-items: baseline; gap: 10px; }
.cs-mh span { color: #71717a; font-size: 13px; }
.cs-mb { gap: 18px; padding: 20px 22px 22px; }
.cs-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cs-tile { position: relative; text-align: left; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; padding: 12px 13px 11px; background: none; color: #f4f4f5; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.cs-tile b { font: 700 14.5px var(--sans); }
.cs-tile small { font-size: 12px; color: #66666e; }
.cs-bx { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid rgba(255,255,255,.22); display: grid; place-items: center; }
.cs-tile.is-on { border-color: rgba(255,255,255,.75); background: rgba(255,255,255,.05); }
.cs-tile.is-off { opacity: .45; cursor: default; }
.cs-tile.is-on .cs-bx { background: #ed1c24; border-color: #ed1c24; }
.cs-tile.is-on .cs-bx::after { content: '\2713'; color: #fff; font-size: 11px; font-weight: 800; }
.cs-inset { margin-top: -10px; background: #121214; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.cs-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cs-k { font-size: 13px; color: #a1a1aa; min-width: 74px; }
.cs-hint { font-size: 12px; color: #66666e; }
.cs-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid rgba(255,255,255,.15); border-radius: 9px; background: #0d0d0f; }
.cs-seg button { border: 0; background: none; color: #a1a1aa; font: 600 12.5px var(--sans); padding: 6px 12px; border-radius: 6px; cursor: pointer; }
.cs-seg button.is-on { background: rgba(255,255,255,.11); color: #f4f4f5; }
.cs-many { display: inline-flex; border: 1px solid rgba(255,255,255,.15); border-radius: 9px; overflow: hidden; background: #0d0d0f; }
.cs-num { width: 60px; border: 0; background: none; color: #f4f4f5; font: 700 14px var(--mono); text-align: center; padding: 7px 0; -moz-appearance: textfield; }
.cs-num::-webkit-inner-spin-button, .cs-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cs-num.is-off { color: #55555c; }
.cs-all { border: 0; border-left: 1px solid rgba(255,255,255,.15); background: none; color: #a1a1aa; font: 600 12.5px var(--sans); padding: 0 12px; cursor: pointer; }
.cs-all.is-on { background: rgba(255,255,255,.11); color: #f4f4f5; }
/* up/down beside the number, Shuffle after All (28 Oct 2026) */
.cs-arrows { display: flex; flex-direction: column; border-left: 1px solid rgba(255,255,255,.15); }
.cs-arrows button { flex: 1; border: 0; background: none; color: #a1a1aa; font-size: 9px; line-height: 1; padding: 0 11px; cursor: pointer; }
.cs-arrows button + button { border-top: 1px solid rgba(255,255,255,.15); }
.cs-arrows button:hover { color: #f4f4f5; background: rgba(255,255,255,.06); }
.cs-shuffle { margin-left: 8px; border: 1px solid rgba(255,255,255,.15); border-radius: 9px; background: #0d0d0f; color: #e4e4e7; font: 600 12.5px var(--sans); padding: 0 12px; height: 34px; cursor: pointer; }
.cs-shuffle:hover:not(:disabled) { border-color: rgba(255,201,77,.5); color: #ffc94d; }
.cs-shuffle:disabled { opacity: .35; cursor: default; }
.cs-own { margin: 14px 0 0; color: #8b8b94; font-size: 12.5px; line-height: 1.5; }
.cs-own b { color: #d4d4d8; font-weight: 600; }
.cs-fmts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cs-f { border: 1px solid rgba(255,255,255,.15); border-radius: 12px; padding: 12px 6px 10px; background: none; color: #f4f4f5; display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer; }
.cs-f b { font: 700 12.5px var(--sans); }
.cs-f small { font: 600 10px var(--mono); color: #66666e; }
.cs-sh { border: 2px solid #66666e; border-radius: 3px; }
.cs-f.is-on { border-color: rgba(255,255,255,.75); background: rgba(255,255,255,.05); }
.cs-f.is-on .cs-sh { border-color: #ffc94d; background: rgba(255,201,77,.12); }
.cs-modal .cs-bx { display: none; }
/* C (Stijn, 27 Oct 2026): calm white selections, yellow only where it means something -
   a dot on a chosen tile, the number asked for, a chosen format's outline, the drops in
   the set strip, and a gold Create */
.cs-modal .cs-mh { border-bottom: 0; padding-bottom: 8px; }
.cs-set { padding: 0 22px 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.cs-wave { display: block; width: 100%; height: 48px; }
.cs-wavef { fill: #5a5a62; }
.cs-drp { stroke: #ffc94d; stroke-width: 1.25; } .cs-drp.is-dim { stroke: #6b5a2a; }
.cs-brk { stroke: rgba(255,255,255,.55); stroke-width: 1; }
.cs-setlg { display: flex; justify-content: space-between; margin-top: 6px; font: 600 10px var(--mono); letter-spacing: .1em; color: #66666e; }
.cs-setlg b { color: #ffc94d; font-weight: 700; }
.cs-setnote { font-size: 12px; color: #66666e; padding: 4px 0 2px; }
.cs-tile { position: relative; }
.cs-dot { position: absolute; top: 13px; right: 13px; width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.cs-modal .cs-tile.is-on { border-color: rgba(255,255,255,.8); background: rgba(255,255,255,.07); }
.cs-modal .cs-tile.is-on b { color: #fff; }
.cs-modal .cs-tile.is-on .cs-dot { background: #ffc94d; box-shadow: 0 0 8px rgba(255,201,77,.8); }
.cs-modal .cs-seg button.is-on, .cs-modal .cs-all.is-on { background: #e8e8ea; color: #111113; }
.cs-modal .cs-num { color: #ffc94d; }
.cs-modal .cs-num.is-off { color: #55555c; }
/* the sound's fade (Stijn, 29 Oct 2026): its seconds in white */
.cs-num.cs-fnum { color: #f4f4f5; width: 48px; text-align: right; padding-right: 3px; }
/* the number fields line up (Stijn, 29 Oct 2026): one width, the number right against its s, white */
.cs-inset .cs-many, .cs-inset .cs-line > .cs-seg { width: 150px; flex: none; box-sizing: border-box; }
.cs-inset .cs-many .cs-num { flex: 1; min-width: 0; }
.cs-inset .cs-line > .cs-seg button { flex: 1; }
.cs-inset .cs-all { height: 38px; padding: 0 14px; border: 1px solid rgba(255,255,255,.15); border-radius: 9px; }
.cs-modal .cs-many .cs-num { width: 56px; text-align: right; padding-right: 3px; color: #f4f4f5; caret-color: #f4f4f5; outline: none; }
.cs-modal .cs-many:focus-within { border-color: rgba(255,255,255,.4); }
.cs-modal .cs-many .cs-num.is-off { color: #55555c; }
.cs-many > .cs-num:not(:has(+ .cs-unit)) { padding-right: 14px; }
.cs-unit { display: flex; align-items: center; width: 20px; font: 700 14px var(--mono); color: #a1a1aa; }
.rf-fade { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rf-fk { font: 700 9.5px var(--mono); letter-spacing: .14em; color: #71717a; }
.rf-fk + .cs-many, .rf-fk + .cs-seg { margin-right: 6px; }
.rf-wave { position: relative; }
.rf-ramps { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rf-ramps line { stroke: #fff; stroke-width: 1.5; }
.cs-modal .cs-f.is-on { border-color: rgba(255,255,255,.8); background: rgba(255,255,255,.07); }
.cs-modal .cs-f.is-on b { color: #fff; }
.cs-modal .cs-f.is-on .cs-sh { border-color: #ffc94d; background: rgba(255,201,77,.15); }
.cs-modal .dr-go { background: linear-gradient(135deg, #ffd66b, #f5a524); color: #1a1204; font-weight: 700; box-shadow: 0 0 22px rgba(255,201,77,.35); }
@media (max-width: 560px) {
  .st-back:has(.cs-modal) { padding: 12px; }
  .cs-mh { flex-direction: column; gap: 2px; }
  .cs-mb { padding: 16px; }
  .cs-tile { padding: 10px 11px; }
  .cs-tile small { font-size: 11px; }
  .cs-f { padding: 10px 4px 8px; }
  .cs-f small { display: none; }
  .cs-line { gap: 8px; }
  .cs-k { min-width: 0; width: 100%; }
  .cs-seg button { padding: 6px 10px; }
  .cs-num, .cs-seg button { font-size: 16px; }
}
@media (max-width: 700px) { .st-mail { margin-left: 0; } }
/* the Video Reviewer row: where the next version goes */
.ovr-row[data-drop] { position: relative; }
.ovr-hint { display: none; font: 500 12px var(--sans); font-style: normal; color: #5fb4f0; margin-top: 3px; }
@media (hover: hover) { .ovr-row:hover .ovr-hint { display: block; } }
.ovr-row.is-drop { outline: 0; }
.ovr-row.is-drop::after { content: attr(data-drop); position: absolute; inset: 4px 8px; display: flex; align-items: center; justify-content: center; border: 2px dashed #5fb4f0; border-radius: 10px; background: rgba(11,11,12,.88); color: #f4f4f5; font: 600 14px var(--sans); pointer-events: none; }
.dr-p.is-169 .dr-still { object-fit: contain; }

/* the cards exactly as wide as the slider says - the slider moves smoothly, not in jumps */
.rv-dropsw .dr-grid { grid-template-columns: repeat(auto-fill, minmax(min(var(--dr-w, 220px), 100%), var(--dr-w, 220px))); justify-content: start; }
/* the size slider: a small card and a big card either side (Stijn, 27 Oct 2026) */
.dr-sizer { display: inline-flex; align-items: center; gap: 8px; padding: 0 6px; cursor: pointer; }
.dr-szs, .dr-szl { display: inline-block; border: 1.5px solid #71717a; border-radius: 2px; }
.dr-szs { width: 7px; height: 11px; } .dr-szl { width: 11px; height: 18px; }
.dr-size { width: 110px; accent-color: #f4f4f5; cursor: pointer; }
@media (max-width: 700px) { .dr-sizer { display: none; } }
/* a video on its way: preparing, in the queue, converting, uploading proxies - orange (Stijn, 22 Oct 2026) */
.ovr-st.is-conv, .ovr-st.is-up { color: #ff9f1a; border-color: rgba(255,159,26,.45); background: rgba(255,159,26,.08); }
/* Approve: green, a sheen sweeping across now and then - the same as Create stories */
.rv-ap { font: 700 13px var(--sans); padding: 9px 18px; border-radius: 9px; border: 0; cursor: pointer; color: #04170c;
  background: linear-gradient(110deg, #3ddc84 0%, #7cf0b0 40%, #ffffff 50%, #7cf0b0 60%, #3ddc84 100%); background-size: 250% 100%; background-position: 100% 0;
  box-shadow: 0 4px 20px rgba(61,220,132,.38); animation: rv-shimmer 5s ease-in-out 2.5s infinite; transition: box-shadow .2s, transform .2s; }
.rv-ap:hover { box-shadow: 0 6px 26px rgba(61,220,132,.6); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .rv-ap { animation: none; background-position: 50% 0; } }
.rv-vno { margin-left: 10px; font: 600 .62em var(--mono); color: var(--rv-text2); vertical-align: 2px; }
/* the Event page's show hours: a row per night (Stijn, 22 Oct 2026) */
.ev-hr { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 12px; padding: 7px 0; }
.ev-hr-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ev-f .ev-in + .ev-in .ev-hr, .ev-f .ev-hr + .ev-hr { border-top: 1px solid var(--line); }
.ev-hr-d { font: 700 10.5px var(--mono); letter-spacing: .08em; text-align: center; background: var(--raised, #1c1c20); border-radius: 7px; padding: 4px 0; color: var(--text-2); }
.ev-hr-d b { display: block; font-size: 16px; letter-spacing: 0; color: var(--text); }
.ev-hr-h { font: 600 15px var(--mono); color: var(--text); white-space: nowrap; }
.ev-hr-h i { font-style: normal; color: var(--text-3); margin: 0 6px; }
.ev-hr-n { font: 500 11.5px var(--sans); color: var(--text-3); }
/* the gear list: a camera's days hang under it, each day its own colour (Stijn, 22 Oct 2026) */
.gl-msub.is-day { background: color-mix(in srgb, var(--page) 55%, var(--panel)); }
.gl-msub.is-day .gl-who { position: relative; padding-left: 38px; }
.gl-msub.is-day .gl-who::before { content: ''; position: absolute; left: 9px; top: -7px; bottom: -7px; border-left: 1px solid var(--line-control); }
.gl-msub.is-day.is-last .gl-who::before { bottom: 50%; }
.gl-msub.is-day .gl-who::after { content: ''; position: absolute; left: 9px; width: 18px; top: 50%; border-top: 1px solid var(--line-control); }
.gl-msub.is-day .gl-daywho { flex-direction: row; align-items: center; gap: 9px; }
.gl-msub.is-day .gl-daytag { font: 700 9.5px var(--mono); letter-spacing: .08em; color: var(--text); background: var(--track); border: 1px solid var(--line-control); padding: 2px 7px; border-radius: 5px; flex: none; }
.gl-block:has(.gl-msub.is-day) { border-bottom: 2px solid var(--line-control); }
.gl-block:has(.gl-msub.is-day) + .gl-block { border-top: 0; }
.gl-msub.is-day .gl-who { padding-left: 28px; }
.gl-msub.is-day .gl-who::before, .gl-msub.is-day .gl-who::after { left: 8px; }
.gl-msub.is-day .gl-who::after { width: 14px; }
.gl-msub.is-day .gl-daywho { gap: 7px; }
.gl-msub.is-day .gl-dayname { white-space: normal; overflow: visible; line-height: 1.2; }
.gl-msub.is-day .gl-daysame { display: none; }
.pos-dayband + .pos-row.is-head { border-top: 0; }
.pos-dayband .pos-add { width: 24px; height: 24px; font-size: 15px; border-radius: 6px; margin: -4px -6px -4px 0; }

/* ---------- live shoots on the camera plan (views/liveshoots.js) ---------- */
.ls-sw { display: inline-flex; gap: 2px; padding: 3px; margin: 2px 0 14px; border: 1px solid var(--line-control); border-radius: 11px; background: var(--panel); }
.ls-sw-b { font: 600 13.5px var(--sans); padding: 8px 18px; border-radius: 8px; border: 0; background: none; color: var(--text-2); cursor: pointer; }
.ls-sw-b:hover { color: var(--text); }
.ls-sw-b.is-live.is-on { background: var(--accent); color: #fff; }
.ls-sw-b.is-am.is-on { background: var(--am); color: #1a0b02; }
.ls-tab.is-on { border-color: var(--am); background: var(--am-wash); }
.ls-tab.is-on .st-meta, .ls-tab:not(.is-none) .st-meta { color: var(--am); }
.ls-tab.is-none { opacity: .55; }
.ls-day small { display: block; font: 500 10px var(--mono); color: var(--am); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.plan-dcard.ls-day.is-on { border-color: var(--am); background: var(--am-wash); color: var(--text); }
.ls-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.ls-chip { display: inline-flex; align-items: center; gap: 8px; font: 600 13px var(--sans); padding: 7px 12px; border-radius: 9px; border: 1px solid var(--am-line); background: none; color: var(--am); cursor: pointer; }
.ls-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ls-chip em { font: 600 10.5px var(--mono); font-style: normal; opacity: .8; }
.ls-chip.is-on { background: var(--am); border-color: var(--am); color: #1a0b02; }
.ls-none { font: 500 13px var(--sans); color: var(--text-3); }
.ls-banner { display: flex; align-items: baseline; gap: 10px; }
.ls-banner b { font: 700 15px var(--sans); color: var(--am); }
.ls-banner span { font: 600 11px var(--mono); color: var(--text-2); letter-spacing: .04em; }
.ls-stage { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.ls-stage.is-edit { cursor: crosshair; }
.ls-box { position: relative; }
.ls-box.is-sketch { width: min(100%, calc(72vh * 440 / 520)); margin: 0 auto; }
.ls-box.is-sketch > .plan-blueprint, .ls-box.is-sketch > .plan-canvas { width: 100%; }
.ls-pins { position: absolute; inset: 0; }
.ls-ghost { position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 1.5px dashed var(--text-3); transform: translate(-50%, -50%); opacity: .7; pointer-events: auto; }
.ls-pin { position: absolute; transform: translate(-13px, -50%); display: flex; align-items: center; gap: 6px; cursor: grab; touch-action: none; z-index: 2; }
.ls-dot { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--am); color: #1a0b02; font: 800 10px var(--sans); display: grid; place-items: center; box-shadow: 0 0 0 2px var(--page), 0 0 14px rgba(255,122,26,.45); }
.ls-lbl { background: color-mix(in srgb, var(--page) 88%, transparent); border: 1px solid var(--am-line); border-radius: 6px; padding: 2px 7px; white-space: nowrap; pointer-events: none; }
.ls-lbl b { display: block; font: 700 11.5px var(--sans); color: var(--text); }
.ls-lbl i { display: block; font: 500 10px var(--sans); font-style: normal; color: var(--text-2); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.ls-list { padding: 16px; }
.ls-lh { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.ls-lh b { font: 700 17px var(--sans); color: var(--am); }
.ls-lh span { font: 600 11px var(--mono); color: var(--text-2); }
.ls-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; padding: 9px 0; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; text-align: left; cursor: pointer; }
.ls-row .ls-dot { width: 26px; height: 26px; box-shadow: none; }
.ls-who b { display: block; font: 600 13.5px var(--sans); color: var(--text); }
.ls-who i { display: block; font: 400 12px var(--sans); font-style: normal; color: var(--text-2); margin-top: 2px; }
.ls-empty { font: 500 13px var(--sans); color: var(--text-3); padding: 8px 0; }

/* crew form: first, middle and last name side by side */
.cf-names { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .cf-names { grid-template-columns: 1fr; } }

/* ---------- the snippets editor (views/drops.js, Stijn 25 Oct 2026) ---------- */
.ed { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 18px; margin-top: 14px; }
.ed-list { background: #121214; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 10px; max-height: 620px; overflow-y: auto; }
.ed-rh { display: flex; justify-content: space-between; gap: 8px; padding: 8px 6px 6px; font: 600 9.5px var(--mono); letter-spacing: .12em; color: #71717a; }
.ed-rh b { color: #d4d4d8; }
.ed-it { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; margin-bottom: 4px; }
.ed-it:hover { background: rgba(255,255,255,.03); }
.ed-it.is-on { border-color: #ffc94d; background: rgba(255,201,77,.07); }
.ed-th { width: 44px; height: 78px; border-radius: 6px; background: #1c1c20 center / cover no-repeat; }
.ed-it-m { min-width: 0; }
.ed-it-m b { display: flex; align-items: center; gap: 7px; font: 600 14px var(--sans); color: #f4f4f5; }
.ed-k { font: 700 8.5px var(--mono); letter-spacing: .1em; font-style: normal; padding: 2px 6px; border-radius: 4px; }
.ed-k.is-drop { color: #1a1204; background: #ffc94d; } .ed-k.is-break { color: #06121d; background: #7cc4ff; } .ed-k.is-own { color: #0b0b0c; background: #d4d4d8; }
.ed-it-m small { display: block; font: 500 11px var(--mono); color: #a1a1aa; margin-top: 4px; }
.ed-fm { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.ed-fm i { font: 600 10px var(--sans); font-style: normal; padding: 2px 7px; border-radius: 5px; border: 1px solid #2f2f34; color: #a1a1aa; }
.ed-fm i.is-on { background: #f4f4f5; color: #0b0b0c; border-color: #f4f4f5; }
.ed-it .dr-ck { position: static; width: 24px; height: 24px; font-size: 12px; }
.ed-stage { background: #121214; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 18px; display: flex; gap: 26px; align-items: flex-start; min-width: 0; }
.ed-pvc { flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ed-pv { position: relative; overflow: hidden; border-radius: 14px; background-color: #000; background-repeat: no-repeat; box-shadow: 0 0 0 2px #ffc94d, 0 12px 40px rgba(0,0,0,.5); cursor: ew-resize; touch-action: none; user-select: none; max-width: 100%; }
.ed-vid { position: absolute; top: 0; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
.ed-tag { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 2; font: 700 10px var(--mono); letter-spacing: .1em; background: rgba(0,0,0,.6); color: #fff; padding: 4px 9px; border-radius: 5px; white-space: nowrap; pointer-events: none; }
.ed-pp { position: absolute; left: 12px; bottom: 12px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 14px; cursor: pointer; }
.ed-tc { position: absolute; right: 12px; bottom: 22px; z-index: 2; font: 600 11px var(--mono); color: #fff; background: rgba(0,0,0,.6); padding: 3px 7px; border-radius: 5px; pointer-events: none; }
.ed-fmts { display: flex; gap: 6px; }
.ed-fmts button { font: 600 12px var(--sans); padding: 6px 12px; border-radius: 999px; border: 0; background: #232327; color: #a1a1aa; cursor: pointer; }
.ed-fmts button.is-on { background: #f4f4f5; color: #0b0b0c; }
.ed-side { flex: 1; min-width: 0; }
.ed-side h2 { margin: 0 0 4px; font: 700 22px var(--sans); color: #f4f4f5; }
.ed-sub { font: 500 12.5px var(--mono); color: #a1a1aa; }
.ed-status { display: flex; align-items: center; gap: 12px; margin-top: 12px; font: 600 13px var(--sans); color: #5fb4f0; }
.ed-lab { font: 600 10px var(--mono); letter-spacing: .14em; color: #71717a; margin: 18px 0 8px; }
.ed-shots { display: flex; gap: 6px; flex-wrap: wrap; }
.ed-shot { position: relative; width: 64px; height: 36px; border-radius: 6px; border: 0; padding: 0; background: #1c1c20 center / cover no-repeat; box-shadow: 0 0 0 1px rgba(255,255,255,.15); cursor: pointer; }
.ed-shot.is-on { box-shadow: 0 0 0 2px #ffc94d; }
.ed-shot i { position: absolute; right: 3px; top: 3px; width: 7px; height: 7px; border-radius: 50%; background: #ffc94d; }
.ed-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.ed-save { font: 700 13px var(--sans); padding: 9px 16px; border-radius: 9px; border: 0; cursor: pointer; color: #1a1204; background: linear-gradient(110deg, #f5a524 0%, #ffc94d 40%, #fff4d6 50%, #ffc94d 60%, #f5a524 100%); box-shadow: 0 4px 20px rgba(255,176,32,.38); }
.ed-save:disabled { opacity: .4; cursor: default; box-shadow: none; }
.ed-wv { margin-top: 14px; background: #121214; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 12px 16px; }
.ed-wvh { display: flex; justify-content: space-between; gap: 16px; font: 600 9.5px var(--mono); letter-spacing: .12em; color: #71717a; margin-bottom: 6px; }
.ed-wvh b { color: #f4f4f5; }
.ed-cv { display: block; width: 100%; height: 110px; cursor: pointer; }
.ed-wv + .ed-wv .ed-cv { height: 90px; }
.ed-wvmsg { font: 500 12px var(--sans); color: #71717a; padding: 6px 0; }
.ed-legend { display: flex; gap: 16px; margin-top: 8px; font: 500 11.5px var(--sans); color: #a1a1aa; }
.ed-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.ed-legend i.is-drop { background: #ffc94d; } .ed-legend i.is-break { background: #7cc4ff; } .ed-legend i.is-own { background: rgba(255,255,255,.25); border-radius: 2px; } .ed-legend i.is-sel { background: rgba(255,201,77,.4); border-radius: 2px; }
@media (max-width: 1000px) { .ed { grid-template-columns: 1fr; } .ed-stage { flex-direction: column; } }
/* the snippets loading bar: nothing half-made on screen (Stijn, 25 Oct 2026) */
.ed-load { margin-top: 14px; min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: #121214; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; }
.ed-load-n { font: 600 22px var(--mono); color: #71717a; }
.ed-load-n b { font-size: 64px; color: #f4f4f5; font-weight: 600; letter-spacing: -.02em; }
.ed-bar { width: min(420px, 70%); height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.ed-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f5a524, #ffc94d); border-radius: 3px; transition: width .6s ease; box-shadow: 0 0 12px rgba(255,201,77,.5); }
.ed-load-l { font: 600 10px var(--mono); letter-spacing: .14em; color: #a1a1aa; }
.ed-cutting { display: flex; flex-direction: column; gap: 8px; padding: 10px 8px 12px; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.06); }
.ed-cutting .ed-bar { width: 100%; height: 4px; }
.ed-cutting-l { font: 600 9.5px var(--mono); letter-spacing: .12em; color: #ffc94d; }
.ed-stage:has(.ed-pv.is-set) .ed-side { min-width: 280px; }
.ed-stage:has(.ed-pv.is-set) .st-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-pv.is-set { cursor: pointer; }
.ed-load-note { margin-top: 10px; font: 400 13px var(--sans); color: #71717a; }
/* bring back a removed edit */
.pp-back { display: flex; flex-direction: column; gap: 8px; min-width: 380px; }
.pp-back-msg { margin: 0 0 4px; color: var(--text-2); }
.pp-back-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.pp-back-row span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-back-row small { color: var(--text-3); }
.modal:has(.pp-back) .modal-foot .btn:not(.btn-primary) { display: none; }
/* teaching the drop finder */
.ed-judge { display: flex; align-items: center; gap: 6px; margin: 10px 0 2px; font: 600 10px var(--mono); letter-spacing: .1em; color: #71717a; text-transform: uppercase; }
.ed-judge span { margin-right: 4px; }
.ed-judge button { width: 30px; height: 26px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); background: transparent; color: #a1a1aa; font: 600 13px var(--sans); cursor: pointer; }
.ed-judge button:hover { border-color: rgba(255,255,255,.3); color: #f4f4f5; }
.ed-judge button.is-yes { background: rgba(255,201,77,.18); border-color: #ffc94d; color: #ffc94d; }
.ed-judge button.is-no { background: rgba(237,28,36,.16); border-color: #ED1C24; color: #ff6b70; }
.ed-isdrop { margin-top: 12px; }
/* the festival card in order (Stijn, 26 Oct 2026): build, the nights, debuild - then the numbers */
.ev-tl { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); align-items: stretch; }
.ev-tl > .ev-in, .ev-tl > .ev-hr, .ev-tl > .ev-tl-x { flex: 1 1 190px; min-width: 0; }
.ev-tl > .ev-in:first-child, .ev-tl > .ev-in:last-child, .ev-tl > .ev-tl-x { flex: 0 1 auto; }
.ev-tl .ev-hr { background: var(--raised, #1c1c20); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 10px 10px; height: 100%; box-sizing: border-box; }
.ev-tl .ev-hr-d { background: var(--bg, #0b0b0c); }
.ev-tl-x { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 14px; border: 1px dashed var(--line); border-radius: 12px; min-width: 110px; height: 100%; box-sizing: border-box; }
.ev-tl-x b { font-size: 13px; font-weight: 600; color: var(--text); }
.ev-tl-x span { font-size: 12px; color: var(--text-2); }
.ev-tl-x.is-none b { color: var(--text-3); font-weight: 500; }
.ev-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.ev-st { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-right: 1px solid var(--line); min-width: 0; }
.ev-st:last-child { border-right: 0; }
.ev-st-i { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--raised, #1c1c20); display: grid; place-items: center; color: var(--text-2); }
.ev-st-i svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ev-st-t { min-width: 0; padding-top: 1px; }
.ev-st-t b { font-size: 14px; font-weight: 600; }
.ev-st-t b.is-quiet { color: var(--text-3); font-weight: 500; }
.ev-st-t p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-2); }
.ev-notesrow { padding: 12px 16px; }
.ev-notesrow p { margin: 0; font-size: 13.5px; }
.ev-notesrow p.ev-notes { white-space: pre-line; }
@media (max-width: 900px) { .ev-stats { grid-template-columns: 1fr 1fr; } .ev-st:nth-child(2n) { border-right: 0; } .ev-st:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
/* ---------- the gear board (Stijn, 27 Oct 2026) ---------- */
.gb-empty { margin-top: 18px; padding: 44px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.gb-empty-t { font-size: 18px; font-weight: 700; }
.gb-empty-d { max-width: 460px; color: var(--text-2); font-size: 13.5px; margin-bottom: 8px; }
.gb-card { margin-top: 18px; padding: 0; overflow: hidden; }
.gb-row { display: grid; grid-template-columns: 52px minmax(250px, 1.6fr) minmax(280px, 3fr) 110px 34px; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.gb-head { font: 600 9.5px var(--mono); letter-spacing: .14em; color: var(--text-3); padding-top: 12px; padding-bottom: 10px; }
.gb-band { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; padding: 7px 16px; font: 700 9.5px var(--mono); letter-spacing: .16em; color: var(--text-3); background: var(--raised, #1c1c20); border-bottom: 1px solid var(--line); }
.gb-band:hover { color: var(--text); }
/* the band titles in full white (Stijn, 27 Oct 2026) */
.gb-band > span:not(.gb-pill), .gb-band .gb-chev { color: var(--text); }
.gb-bandadd { margin-left: auto; width: 24px; height: 22px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--text-3); font: 600 15px/1 var(--sans); cursor: pointer; display: grid; place-items: center; padding: 0; }
.gb-bandadd:hover { color: var(--text); border-color: var(--text-3); }
/* the board keeps its full width when bands are folded */
.board:has(> .gb-card) { width: 100%; }
.gb-chev { font-style: normal; font-size: 11px; width: 10px; transition: transform .15s; }
.gb-band.is-shut .gb-chev { transform: rotate(-90deg); }
.gb-bandn { font: 700 11px var(--mono); letter-spacing: .04em; color: var(--text-2); }
.gb-name { min-width: 0; display: flex; flex-direction: column; }
/* the KIT pill and what comes with it (Stijn, 29 Oct 2026) */
.gb-kit { margin-left: 8px; white-space: nowrap; vertical-align: 2px; font: 700 9px var(--mono); letter-spacing: .12em; padding: 2px 6px; border-radius: 5px; border: 1px solid rgba(255,201,77,.5); color: #ffc94d; background: transparent; cursor: pointer; line-height: 1.3; }
.gb-kit:hover { background: rgba(255,201,77,.1); }
.gb-kitpop { position: fixed; z-index: 1000; min-width: 160px; max-width: 300px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.45); font-size: 13px; pointer-events: none; }
.gb-kitpop-r { display: flex; gap: 8px; padding: 3px 0; }
.gb-kitpop-r em { font: 700 12px var(--mono); font-style: normal; color: var(--text-2); min-width: 24px; }
/* a small photo before the name (Stijn, 29 Oct 2026) */
.gb-what { min-width: 0; display: flex; align-items: center; gap: 12px; }
.gb-photo { flex: none; width: 46px; height: 34px; border-radius: 7px; border: 1px dashed var(--line-2, rgba(255,255,255,.16)); background: transparent center / cover no-repeat; cursor: pointer; padding: 0; position: relative; }
.gb-photo:not(.has-photo)::after { content: '+'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); font: 500 16px/1 var(--sans); opacity: .55; }
.gb-row:hover .gb-photo:not(.has-photo)::after, .gb-photo:hover::after { opacity: 1; }
.gb-photo.has-photo { border: 1px solid var(--line); }
.gb-photo:hover, .gb-photo.is-over { border-color: var(--accent); border-style: solid; }
.gb-photo.no-photo { border-style: dashed; }
.gb-photo-big { display: block; max-width: 100%; max-height: 62vh; margin: 0 auto; border-radius: 10px; }
.gb-name b { font-weight: 600; font-size: 14px; }
.gb-name small { color: var(--text-3); font-size: 11.5px; }
.gb-n { font: 600 14px var(--mono); white-space: nowrap; }
.gb-units { display: flex; flex-wrap: wrap; gap: 5px; }
.gb-unit { min-width: 28px; height: 28px; padding: 0 6px; border-radius: 7px; border: 1px solid var(--line); background: var(--raised, #1c1c20); color: var(--text); font: 700 12px var(--mono); cursor: pointer; }
.gb-unit:hover { border-color: var(--text-3); }
.gb-unit.is-ok { border-color: rgba(74,222,128,.5); color: #4ade80; background: rgba(74,222,128,.07); }
/* out light blue, broken orange, lost red (Stijn, 27 Oct 2026) */
.gb-unit.is-out { border-color: rgba(95,180,240,.6); color: #5fb4f0; background: rgba(95,180,240,.1); }
.gb-unit.is-repair { border-color: rgba(240,138,75,.7); color: #f08a4b; background: rgba(240,138,75,.12); }
.gb-units .gb-pill { align-self: center; margin-left: 4px; }
.gb-legend { display: flex; flex-wrap: wrap; gap: 16px; padding: 10px 16px; font-size: 12px; color: var(--text-2); border-bottom: 1px solid var(--line); }
.gb-card > .gb-grp:last-child > .gb-legend:last-child { border-bottom: 0; }
.gb-grp.is-empty:not(.is-kept) { display: none; }
.gb-card.is-dragging .gb-grp.is-empty { display: block; }
.gb-row[draggable="true"] { -webkit-user-drag: element; }
.gb-row[draggable="true"] .gb-what { cursor: grab; }
.gb-row.is-moving { opacity: .4; }
.gb-grp.is-drop { box-shadow: inset 0 0 0 2px var(--accent-line); }
.gb-grp.is-drop > .gb-band { color: var(--text); }
.gb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.gb-legend i { width: 11px; height: 11px; border-radius: 3px; }
.gb-legend i.is-in { background: #4ade80; } .gb-legend i.is-out { background: #5fb4f0; } .gb-legend i.is-repair { background: #f08a4b; } .gb-legend i.is-lost { background: #ED1C24; }
.gb-unit.is-lost { border-color: rgba(237,28,36,.6); color: #ff6b70; background: rgba(237,28,36,.1); text-decoration: line-through; }
.gb-fee { width: 70px; background: transparent; border: 1px solid var(--line); border-radius: 7px; color: var(--text); font: 600 13px var(--mono); padding: 5px 8px; }
.gb-feecell { display: flex; align-items: center; gap: 6px; }
.gb-feecell i { font-style: normal; color: var(--text-3); font-size: 12px; }
.gb-pill { padding: 2px 7px; border-radius: 999px; font: 700 10px var(--mono); letter-spacing: .06em; }
.gb-pill.is-in { background: rgba(74,222,128,.14); color: #4ade80; }
.gb-pill.is-out { background: rgba(95,180,240,.16); color: #5fb4f0; }
.gb-pill.is-bad { background: rgba(237,28,36,.16); color: #ff6b70; }
.gb-pill.is-lost { background: rgba(237,28,36,.16); color: #ff6b70; }
.gb-pill.is-repair { background: rgba(240,138,75,.16); color: #f08a4b; }
.gb-more { background: transparent; border: 0; color: var(--text-3); font-size: 16px; cursor: pointer; }
.gb-tlh { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.gb-tlh span { font: 600 9.5px var(--mono); letter-spacing: .14em; color: var(--text-3); }
.gb-tlrow { display: grid; grid-template-columns: 170px 1fr; gap: 14px; align-items: center; padding: 5px 16px; }
.gb-tlrow:last-of-type { padding-bottom: 14px; }
.gb-tlname { display: flex; flex-direction: column; min-width: 0; }
.gb-tlname b { font-size: 13px; font-weight: 600; }
.gb-tlname small { font-size: 11px; color: var(--text-3); }
.gb-lane { position: relative; height: 24px; border-top: 1px dashed var(--line); }
.gb-tlmonths .gb-lane { border: 0; height: 16px; }
.gb-tlmonths i { position: absolute; font: 600 9.5px var(--mono); letter-spacing: .12em; color: var(--text-3); font-style: normal; transform: translateX(-50%); }
.gb-bar { position: absolute; top: 2px; height: 20px; line-height: 20px; border-radius: 6px; padding: 0 7px; background: var(--c); color: #111; font: 700 10px var(--mono); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; box-sizing: border-box; }
.gb-bar.is-over { background: rgba(237,28,36,.8); color: #fff; outline: 2px solid #ED1C24; outline-offset: -2px; }
.gb-tlnote { padding: 11px 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--text-2); }
/* the gear board on a phone (Stijn, 27 Oct 2026): no left bar, a line per kind -
   how many, the name, today's state; the numbers under it; a tap opens the window */
@media (max-width: 900px) {
  .shell:has(.gb-crumb) > .rail { display: none; }
  .gb-head { display: none; }
  .gb-row { grid-template-columns: 46px minmax(0, 1fr); grid-template-areas: "n name" ". units"; row-gap: 8px; column-gap: 10px; padding: 12px 14px; }
  .gb-n { grid-area: n; font-size: 15px; }
  .gb-name { grid-area: name; }
  .gb-what { grid-area: name; gap: 10px; }
  .gb-photo { width: 52px; height: 40px; }
  .gb-name b { font-size: 15px; }
  .gb-units { grid-area: units; }
  .gb-units:empty { display: none; }
  .gb-unit { min-width: 26px; height: 26px; font-size: 11.5px; }
  .gb-feecell, .gb-more { display: none; }
  .gb-band { padding: 10px 14px; }
  .gb-tlh { flex-direction: column; align-items: flex-start; gap: 6px; }
  .gb-tlrow { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 5px 14px; }
  .gb-bor-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; padding: 10px 14px; }
  .gb-bor-row > :nth-child(n+3) { grid-column: 1 / -1; }
}
@media (min-width: 901px) { .gb-crumb { display: none; } }
/* on the gear list: what the board has too few of */
.gl-shorttag { margin-left: 6px; padding: 1px 6px; border-radius: 5px; font: 700 9.5px var(--mono); letter-spacing: .08em; background: rgba(240,138,75,.18); color: #f08a4b; }
.gl-mchip.is-budget { color: #ffc94d; border-color: rgba(255,201,77,.35); }
.gl-shortbar { margin: 12px 0 4px; border: 1px solid rgba(240,138,75,.35); background: rgba(240,138,75,.06); border-radius: 12px; overflow: hidden; }
.gl-shortrow { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid rgba(240,138,75,.18); }
.gl-shortrow:last-child { border-bottom: 0; }
.gl-shortn { font: 800 18px var(--mono); color: #f08a4b; }
.gl-shorttxt { display: flex; flex-direction: column; min-width: 0; }
.gl-shorttxt b { font-weight: 600; }
.gl-shorttxt small { color: var(--text-2); font-size: 12px; }
.gl-shortget { border-color: rgba(240,138,75,.6); color: #f08a4b; white-space: nowrap; }
.gb-bar { padding: 0; min-width: 8px; }
.gb-barname { position: absolute; height: 20px; line-height: 20px; font: 700 10px var(--mono); letter-spacing: .05em; color: var(--text-2); white-space: nowrap; text-decoration: none; }
.gb-barname.is-over { color: #ff6b70; }
.gb-tlrow { align-items: start; }
.gb-tlname { padding-top: 2px; }
/* the packers' reports, and buy or rent */
.gb-rep { border-color: rgba(237,28,36,.35); }
/* renting out our gear (27 Oct 2026): the share link, the rentals, the tick-off list */
.gb-rmodal { width: min(520px, calc(100vw - 32px)); max-width: none; }
.gb-share p { margin: 0 0 14px; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.gb-share-row { display: flex; gap: 8px; }
.gb-share-link { flex: 1; min-width: 0; font: 13px var(--mono); }
.gb-share-acts { display: flex; gap: 8px; margin-top: 12px; }
.gb-rentals { border-color: rgba(95,180,240,.35); }
.gb-rent-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 16px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.gb-rent-row:hover { background: rgba(255,255,255,.03); }
.gb-rent-row .gb-rep-t { flex: 1; }
.gb-pill.is-new { background: rgba(255,201,77,.16); color: #ffc94d; }
.gb-rent-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.gb-rent-head > div > b { display: block; font-size: 14px; }
.gb-rent-head small { color: var(--text-2); font-size: 12.5px; word-break: break-all; }
.gb-rent-n { font: 600 12.5px var(--mono); color: var(--text-3); white-space: nowrap; }
.gb-rent-n b { color: var(--text); }
.gb-rent-note { margin: 10px 0 0; color: var(--text-2); font-size: 13px; font-style: italic; }
.gb-rent-seg { margin: 14px 0 4px; }
.gb-rent-cat { font: 700 10px var(--mono); letter-spacing: .14em; color: var(--text-3); margin: 14px 0 4px; }
.gb-rent-line { display: flex; align-items: center; gap: 12px; min-height: 44px; border-top: 1px solid var(--line); font-size: 14.5px; cursor: pointer; }
/* what came with a camera, under it (Stijn, 29 Oct 2026) */
.gb-rent-line.is-with { padding-left: 30px; }
/* what a camera comes with, in its window (Stijn, 29 Oct 2026) */
.gb-with { display: flex; flex-direction: column; gap: 0; }
.gb-with-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.gb-with-row:first-child { border-top: 0; }
.gb-with-q { display: inline-flex; align-items: center; border: 1px solid var(--line-2, rgba(255,255,255,.16)); border-radius: 8px; flex: none; }
.gb-with-q button { width: 28px; height: 28px; border: 0; background: none; color: var(--text-2); font-size: 16px; cursor: pointer; padding: 0; }
.gb-with-q button:disabled { opacity: .3; cursor: default; }
.gb-with-q b { min-width: 22px; text-align: center; font: 700 13px var(--mono); }
.gb-with-nm { flex: 1; min-width: 0; font-size: 14px; }
.gb-with-rm { width: 26px; height: 26px; border: 0; background: none; color: var(--text-3); font-size: 16px; cursor: pointer; border-radius: 6px; }
.gb-with-rm:hover { color: var(--text); background: rgba(255,255,255,.06); }
.gb-with-add { align-self: flex-start; margin-top: 8px; font: 600 13px var(--sans); color: var(--text-2); background: none; border: 1px dashed var(--line-2, rgba(255,255,255,.2)); border-radius: 9px; padding: 8px 11px; cursor: pointer; }
.gb-with-add:hover { color: var(--text); border-color: var(--text-3); }
.gb-with-menu { max-height: 320px; overflow-y: auto; }
.gb-rent-cb { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; flex: none; border-radius: 6px; border: 1.5px solid var(--line-control, rgba(255,255,255,.2)); display: grid; place-items: center; cursor: pointer; }
.gb-rent-cb:checked { background: #4ade80; border-color: #4ade80; }
.gb-rent-cb:checked::after { content: '\2713'; color: #06230f; font-size: 13px; font-weight: 800; }
.gb-rent-line.is-done span { color: var(--text-3); text-decoration: line-through; }
.gb-rent-rm { color: #ff8a8f; }
.gb-rep-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); }
.gb-rep-n { font: 800 18px var(--mono); }
.gb-rep-n.is-broken { color: #f08a4b; }
.gb-rep-n.is-lost { color: #ff6b70; }
.gb-rep-t { display: flex; flex-direction: column; min-width: 0; }
.gb-rep-t b { font-weight: 600; }
.gb-rep-t small { color: var(--text-2); font-size: 12px; }
.gb-rep-acts { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.gb-rep-q { font: 600 9.5px var(--mono); letter-spacing: .12em; color: var(--text-3); text-transform: uppercase; margin-right: 2px; }
.gb-bor-sw { display: flex; align-items: center; gap: 4px; }
.gb-bor-sw button { background: transparent; border: 1px solid var(--line); border-radius: 7px; color: var(--text-3); font: 600 9.5px var(--mono); letter-spacing: .12em; padding: 4px 8px; cursor: pointer; }
.gb-bor-sw button.is-on { color: var(--text); border-color: var(--text-3); }
.gb-bor-sw i { font-style: normal; margin-left: 4px; }
.gb-bor-row { display: grid; grid-template-columns: minmax(170px, 1.3fr) 90px 70px 90px minmax(260px, 2.4fr); gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); }
.gb-bor-row.gb-head { border-top: 0; }
.gb-bor-jobs { color: var(--text-2); font-size: 12.5px; }
.gb-bor-jobs b { color: var(--text); font: 600 14px var(--mono); }
.gb-bor-more { display: flex; flex-wrap: wrap; gap: 5px; }
.gb-bor-opt { padding: 3px 8px; border-radius: 7px; background: var(--raised, #1c1c20); border: 1px solid var(--line); font: 600 11px var(--mono); color: var(--text-2); }
.gb-bor-opt.is-best { border-color: rgba(74,222,128,.5); color: #4ade80; background: rgba(74,222,128,.08); }
@media (max-width: 900px) { .gb-bor-row { grid-template-columns: 1fr auto; } .gb-bor-row.gb-head { display: none; } .gb-bor-more { grid-column: 1 / -1; } .gb-rep-row { grid-template-columns: 44px 1fr; } .gb-rep-acts { grid-column: 1 / -1; justify-content: flex-start; } }
/* snippets for the review link (Stijn, 27 Oct 2026) */
.st-left { font: 600 10px var(--mono); letter-spacing: .1em; color: var(--text-3); text-transform: uppercase; align-self: center; }
.ed-by { font-style: normal; color: #7cc4ff; }
.st-cap { display: block; margin-top: 3px; color: var(--text-3); font-size: 11.5px; }

/* ---------- the snippets table and its Reframe window, back (Stijn, 27 Oct 2026) ---------- */
/* Reframe: the frame pulled per shot (views/drops.js) */
/* yellow, but still - no shine, no glow (Stijn, 27 Oct 2026) */
.dr-rf { margin-left: auto; font: 700 11.5px var(--sans); padding: 5px 11px; border-radius: 999px; border: 0; background: #ffc94d; color: #1a1204; cursor: pointer; }
.dr-rf:hover { background: #ffd66b; }
.st-mh:has(.dr-rf) { display: flex; align-items: center; gap: 8px; }
.st-back .st-modal.rf-modal { width: min(1080px, 96vw); overflow-y: auto; }
.rf-modal > * { flex: none; }
.rf-mh { display: flex; align-items: center; gap: 14px; }
.rf-x { width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,.14); background: none; color: #a1a1aa; cursor: pointer; }
.rf-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid rgba(255,255,255,.15); border-radius: 9px; }
.rf-seg button { border: 0; background: none; color: #a1a1aa; font: 600 12.5px var(--sans); padding: 6px 12px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.rf-seg button i { font: 600 10.5px var(--mono); font-style: normal; color: #71717a; }
.rf-seg button.is-on { background: #e8e8ea; color: #111113; }
.rf-seg button.is-on i { color: #55555c; }
.rf-body { padding: 14px 22px 16px; display: flex; flex-direction: column; }
.rf-how { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 12px; font-size: 12.5px; line-height: 1.4; color: #8b8b94; }
.rf-how b { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 5px; background: #26262b; color: #f4f4f5; font: 700 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
/* the one player: the wide shot with the frame, or only the cut for Preview */
.rf-stage { position: relative; display: flex; justify-content: center; border-radius: 12px; background: #0a0a0c; overflow: hidden; cursor: ew-resize; touch-action: none; user-select: none; }
.rf-view { position: relative; height: 100%; overflow: hidden; border-radius: 10px; flex: none; transition: width .18s; }
.rf-pic, .rf-vid { position: absolute; top: 0; height: 100%; max-width: none; object-fit: cover; background-color: #000; background-size: cover; background-position: center; }
.rf-dim { position: absolute; top: 0; bottom: 0; right: 0; background: rgba(0,0,0,.62); pointer-events: none; }
.rf-dim:first-of-type { left: 0; right: auto; }
.rf-win { position: absolute; top: 0; bottom: 0; border: 2px solid #ffc94d; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,.4); pointer-events: none; }
.rf-h { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 700 12px var(--sans); color: #1a1204; background: #ffc94d; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.rf-midtag { position: absolute; left: 12px; bottom: 12px; z-index: 2; border: 0; font: 700 11.5px var(--sans); color: #1a1204; background: #ffc94d; padding: 5px 11px; border-radius: 999px; cursor: pointer; }
.rf-ctrl { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 12px; }
.rf-ctrl .rf-shot { justify-self: start; }
.rf-ctrl .rf-tc { justify-self: end; }
/* a phone: the buttons on their own row, the shot and the time under them (27 Oct 2026) */
@media (max-width: 560px) {
  .rf-ctrl { grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .rf-ctrl .rf-trans { grid-column: 1 / -1; justify-self: center; order: -1; }
  .rf-tc { white-space: nowrap; }
  .rf-how { font-size: 12px; }
}
.rf-trans { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.rf-jump { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); background: #1c1c20; color: #e4e4e7; font-size: 11px; cursor: pointer; flex: none; }
.rf-jump:hover { background: #26262b; color: #fff; }
.rf-step { font-size: 19px; line-height: 1; padding-bottom: 2px; }
.rf-pl { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #f4f4f5; color: #111113; font-size: 13px; letter-spacing: -2px; cursor: pointer; flex: none; }
.rf-tc { font: 700 13px var(--mono); color: #f4f4f5; }
.rf-tc i { font-style: normal; color: #66666e; }
.rf-shot { font-size: 12.5px; color: #a1a1aa; }
/* the shots as a strip, each as wide as it lasts; the playhead through it and the waveform */
.rf-tl { position: relative; margin-top: 12px; cursor: pointer; user-select: none; touch-action: none; }
.rf-strip { position: relative; height: 58px; }
.rf-blk { position: absolute; top: 0; bottom: 0; border-radius: 6px; overflow: hidden; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); border-right: 2px solid #161618; }
.rf-blk::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.rf-blk.is-on { box-shadow: inset 0 0 0 2px #ffc94d; }
.rf-blk.is-on::after { background: rgba(0,0,0,.1); }
.rf-blk b { position: absolute; left: 6px; bottom: 4px; z-index: 1; font: 700 10px var(--mono); color: #fff; text-shadow: 0 1px 2px #000; }
/* where the frame sits in that shot: a bar along the bottom, whatever the block's width */
.rf-track { position: absolute; left: 4px; right: 4px; bottom: 4px; height: 3px; z-index: 1; border-radius: 2px; background: rgba(255,255,255,.18); }
.rf-bw { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: rgba(255,255,255,.85); }
.rf-blk.is-on .rf-bw { background: #ffc94d; }
.rf-blk b { bottom: 10px !important; }
/* keyframes in a shot (27 Oct 2026): small diamonds in a row under the shots, above the waveform, a click goes there */
.rf-keys { position: relative; height: 14px; margin-top: 4px; }
.rf-key { position: absolute; top: 2px; z-index: 2; width: 9px; height: 9px; margin-left: -4.5px; transform: rotate(45deg); background: #ffc94d; border: 1.5px solid #161618; border-radius: 1.5px; cursor: pointer; }
.rf-key:hover { transform: rotate(45deg) scale(1.25); }
.rf-key.is-on { background: #fff; box-shadow: 0 0 0 2px #ffc94d; }
.rf-acts .rf-dropkey { color: #ffc94d; border-color: rgba(255,201,77,.35); }
.rf-ph { position: absolute; top: -5px; bottom: -72px; z-index: 3; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.8); pointer-events: none; }
.rf-wave { margin-top: 6px; }
.rf-wv { display: block; width: 100%; height: 44px; }
.rf-drop { stroke: #ffc94d; stroke-width: 3; }
.rf-cut { stroke: #ffc94d; stroke-width: 1.25; opacity: .85; }
.rf-acts { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.rf-acts button { font: 600 12.5px var(--sans); padding: 7px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.16); background: #1c1c20; color: #e4e4e7; cursor: pointer; }
.rf-acts button:disabled { opacity: .4; cursor: default; }
.rf-acts .rf-split { background: #ffc94d; border-color: #ffc94d; color: #1a1204; }
.rf-hint { margin-top: 6px; text-align: center; font-size: 12px; color: #66666e; }
.rf-looking { padding: 80px 0; text-align: center; font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #ffc94d; }
.rf-foot { display: flex; align-items: center; gap: 10px; position: sticky; bottom: 0; background: #161618; z-index: 4; margin-top: 16px; }
.rf-go { font: 700 13px var(--sans); padding: 9px 16px; border-radius: 9px; border: 0; cursor: pointer; color: #1a1204; background: linear-gradient(135deg, #ffd66b, #f5a524); }
.rf-go:disabled { opacity: .45; cursor: default; }
@media (max-width: 760px) { .rf-mh { flex-wrap: wrap; } .rf-hint { display: none; } }
.dr-m .ed-judge { margin: 8px 0 0; }
/* the Serial numbers button and its list (Stijn, 27 Oct 2026) */
.gb-row.is-open { cursor: pointer; }
.gb-row.is-open:hover { background: rgba(255,255,255,.025); }
.gb-sn { display: flex; flex-direction: column; gap: 10px; }
.gb-sn-list { display: flex; flex-direction: column; gap: 6px; max-height: 56vh; overflow-y: auto; }
.gb-sn-add { align-self: flex-start; height: 34px; padding: 0 14px; border-radius: 8px; border: 1px dashed var(--line); background: transparent; color: var(--text-2); font: 600 12.5px var(--sans); cursor: pointer; }
.gb-sn-add:hover { color: var(--text); border-color: var(--text-3); }
.gb-sn-state.is-new { color: #4ade80; }
.gb-sn-field > label:empty { display: none; }
/* the gear window (Stijn, 27 Oct 2026): mount · kind · per day in a row, units with state and ··· */
.gb-meta-f { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* the names above the boxes a little further from them (Stijn, 27 Oct 2026) */
.modal:has(.gb-tabs) .field { gap: 8px; }
.gb-info { display: flex; flex-direction: column; gap: 8px; }
.gb-sn-field label.gb-infotick { display: inline-flex; align-items: center; gap: 8px; font: 500 13px var(--sans); letter-spacing: 0; text-transform: none; color: var(--text-2); cursor: pointer; align-self: flex-start; }
.gb-subseg { display: flex; }
.gb-subseg .gb-seg button { padding: 7px 16px; white-space: nowrap; }
.gb-subseg { gap: 12px; flex-wrap: wrap; }
.gb-powerrow .gb-subseg { align-self: flex-end; }
.gb-powerrow { display: grid; grid-template-columns: 300px 110px minmax(0, 1fr); gap: 10px; }
.gb-sn-in::placeholder { font: 500 13.5px var(--sans); letter-spacing: 0; }
.gb-tabs { display: flex; flex-wrap: wrap; gap: 5px; }
.gb-tabs button { border: 1px solid var(--line-control); background: transparent; color: var(--text-2); font: 600 13px var(--sans); padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.gb-tabs button:hover { color: var(--text); }
.gb-tabs button.is-on { background: var(--text); color: var(--text-invert); border-color: var(--text); }
.gb-ident { display: flex; flex-direction: column; gap: 12px; }
.gb-lensrow { display: grid; grid-template-columns: 170px minmax(0, 1fr) 104px; gap: 10px; }
.gb-cardrows { display: flex; flex-direction: column; gap: 12px; }
.gb-ident .affix, .gb-ident .input { width: 100%; }
.gb-ident .gb-seg { height: 33px; padding: 2px; }
.gb-ident .gb-seg button { padding: 0 8px; white-space: nowrap; }
.gb-sn-count { width: 120px; font: 600 14px var(--mono); }
.gb-seg { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line-control); border-radius: 8px; background: var(--input-bg, transparent); }
.gb-seg button { flex: 1; border: 0; background: transparent; color: var(--text-2); font: 700 12.5px var(--mono); padding: 7px 0; border-radius: 6px; cursor: pointer; }
.gb-seg button:hover { color: var(--text); }
.gb-seg button.is-on { background: var(--line-soft); color: var(--text); }
.gb-sn-unit { display: flex; flex-direction: column; gap: 6px; }
.gb-sn-list .gb-sn-row { grid-template-columns: 38px minmax(0, 1fr) 64px 26px; }
.gb-sn-box { position: relative; min-width: 0; }
.gb-sn-box .input { width: 100%; }
.gb-sn-pill { justify-self: start; font: 700 10px var(--mono); letter-spacing: .06em; padding: 3px 7px; border-radius: 999px; }
.gb-sn-pill.is-ok { background: rgba(74,222,128,.14); color: #4ade80; }
.gb-sn-pill.is-repair { background: rgba(240,138,75,.16); color: #f08a4b; }
.gb-sn-pill.is-lost { background: rgba(237,28,36,.16); color: #ff6b70; }
.gb-sn-pill.is-new { color: #4ade80; }
.gb-sn-pill.is-gone { background: rgba(237,28,36,.16); color: #ff6b70; }
.gb-sn-more { border: 0; background: transparent; color: var(--text-3); font-size: 16px; cursor: pointer; padding: 0; }
.gb-sn-more:hover { color: var(--text); }
.gb-sn-row.is-repair .gb-sn-no { border-color: #f08a4b; color: #f08a4b; }
.gb-sn-row.is-lost .gb-sn-no { border-color: #ED1C24; color: #ff6b70; text-decoration: line-through; }
.gb-sn-row.is-gone .gb-sn-no, .gb-sn-row.is-gone .gb-sn-in { text-decoration: line-through; opacity: .5; }
.gb-sn-repair { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; margin-left: 48px; margin-right: 100px; }
@media (max-width: 560px) {
  .gb-lensrow { grid-template-columns: 1fr 1fr; } .gb-lensrow > :first-child { grid-column: 1 / -1; }
  .gb-powerrow { grid-template-columns: 1fr 110px; } .gb-powerrow > :first-child { grid-column: 1 / -1; }
  .gb-sn-repair { margin: 0; grid-template-columns: 1fr; }
  .gb-sn-list .gb-sn-row { grid-template-columns: 34px minmax(0, 1fr) auto 20px; gap: 8px; }
  .gb-sn-pill.is-new { padding: 3px 0; }
  /* 16px or more, or an iPhone zooms in on the box */
  .modal:has(.gb-tabs) .input, .modal:has(.gb-tabs) .gb-sn-in { font-size: 16px; }
}
.gb-sn-lab { font: 600 9.5px var(--mono); letter-spacing: .14em; color: var(--text-3); }
.gb-sn-count { width: 110px; font: 600 14px var(--mono); }
.gb-gone { display: flex; flex-direction: column; gap: 10px; min-width: min(420px, 80vw); }
.gb-gone p { margin: 0; color: var(--text-2); font-size: 13.5px; }
.gb-gone-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.gb-gone-row { display: grid; grid-template-columns: 38px auto minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13.5px; }
.gb-gone-sn { font: 600 13px var(--mono); color: var(--text); }
.gb-gone-sn.is-none { color: var(--text-3); font-family: var(--sans); font-weight: 500; }
.gb-gone .gb-gone-note { font-size: 12px; color: var(--text-3); }
.gb-sn-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 64px; gap: 10px; align-items: center; }
.gb-sn-no { height: 34px; border-radius: 8px; background: var(--raised, #1c1c20); border: 1px solid var(--line); display: grid; place-items: center; font: 700 13px var(--mono); }
.gb-sn-row.is-repair .gb-sn-no { border-color: #f08a4b; color: #f08a4b; }
.gb-sn-row.is-lost .gb-sn-no { border-color: #ED1C24; color: #ff6b70; text-decoration: line-through; }
.gb-sn-in { font: 600 14px var(--mono); letter-spacing: .03em; }
.gb-sn-in:disabled { opacity: .45; }
.gb-sn-state { font: 700 10px var(--mono); letter-spacing: .08em; color: #ff6b70; }

/* a camera's mount beside it on the camera plan (Stijn, 29 Oct 2026) */

/* ---------- the client board (views/clients.js) ---------- */
.cl-board { display: flex; flex-direction: column; gap: 16px; }
.cl-card { padding: 0; overflow: hidden; }
.cl-card.is-none { border-color: color-mix(in srgb, var(--st-edit) 45%, transparent); }
.cl-card.is-drop { box-shadow: inset 0 0 0 2px var(--accent-line); }
.cl-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; background: color-mix(in srgb, var(--text) 7%, var(--panel)); }
/* the client and its festivals stand out from the people under them (Stijn, 2 Nov 2026) */
.cl-name { font: 700 17px var(--sans); color: var(--text); background: none; border: 0; padding: 0; cursor: pointer; }
.cl-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.cl-name.is-none { color: var(--st-edit); cursor: default; }
.cl-fests { display: flex; gap: 6px; flex-wrap: wrap; }
.cl-fest { font: 700 10px var(--mono); letter-spacing: .08em; color: var(--accent); background: var(--accent-wash); border: 1px solid var(--accent-line); border-radius: 999px; padding: 3px 9px; text-decoration: none; white-space: nowrap; }
.cl-fest:hover { color: var(--text); border-color: var(--accent); }
.cl-card .cb-wrap { border-top: 1px solid var(--line); }
.cl-tbl { border: 0; border-radius: 0; table-layout: fixed; }
.cl-tbl th { padding-top: 9px; padding-bottom: 9px; background: color-mix(in srgb, var(--page) 55%, var(--panel)); }
.cl-tbl th:nth-child(1) { width: 28%; } .cl-tbl th:nth-child(2) { width: 20%; } .cl-tbl th:nth-child(3) { width: 32%; }
.cl-tbl .cb-contact .cb-miss { margin-left: 0; }
.cl-role { color: var(--text-2); }
.cl-on { white-space: normal; }
.cl-tag { display: inline-block; font-size: 11.5px; color: var(--text-3); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; margin: 2px 4px 2px 0; }
.cl-tbl tr.cb-row[draggable="true"] { -webkit-user-drag: element; }
.cl-tbl tr.cb-row.is-moving { opacity: .4; }
.cl-board.is-dragging .cl-card:not(.is-drop) { transition: box-shadow .1s; }

/* a button that is making something fills from the left as it goes */
.btn.has-progress { background-image: linear-gradient(90deg, color-mix(in srgb, var(--accent) 35%, transparent) calc(var(--p, 0) * 100%), transparent calc(var(--p, 0) * 100%)); opacity: 1; cursor: progress; font-variant-numeric: tabular-nums; min-width: 190px; }

/* ---------- the crew pages, polished (4 Nov 2026) ----------
   One icon set instead of emoji, a header on one line, one kind of button,
   and colour with a meaning: red is Epic, now and REC; amber a heads-up;
   green done; blue your own shift. */
.ico { width: 1em; height: 1em; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cp-brand { align-items: center; margin: 6px 0 16px; }
.cp-brand > span:first-child { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-brand > span:last-child { flex: none; white-space: nowrap; }
.cp-ic { width: 32px; height: 32px; border-radius: 10px; color: #e4e4e7; }
.cp-ic .ico { width: 17px; height: 17px; }
.cp-hd b { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
/* buttons: red filled for the one thing to do, a soft outline for the rest */
.cp-bt { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 0 14px; box-sizing: border-box;
  border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); color: #f4f4f5; font: 600 15px var(--sans); }
.cp-bt .ico { width: 17px; height: 17px; }
.cp-bt.is-red { background: #ed1c24; border-color: #ed1c24; color: #fff; }
.cp-bt.is-red:active { background: #c9141b; }
.cp-bt:not(.is-red):active { background: rgba(255,255,255,.12); }
.cp-wide { width: 100%; margin-top: 12px; min-height: 50px; font-size: 15.5px; }
.cp-here { background: rgba(74,222,128,.10); border-color: rgba(74,222,128,.45); color: #4ade80; }
.cp-late { background: rgba(255,176,32,.08); border-color: rgba(255,176,32,.5); color: #ffb020; }
.cp-arr.is-here { display: flex; align-items: center; justify-content: center; gap: 7px; }
.cp-arr.is-here .ico { width: 17px; height: 17px; }
/* the parking line under Directions: the whole sentence, never cut */
.cp-via { display: flex; align-items: flex-start; gap: 8px; margin-top: 11px; text-align: left; font-size: 13px; line-height: 1.4; color: #d4d4d8; }
.cp-via .ico { width: 17px; height: 17px; margin-top: 1px; color: #ffb3b5; }
.cp-via b { color: #fff; }
.cp-big2 i { margin-bottom: 8px; color: #e4e4e7; }
.cp-big2 i .ico { width: 22px; height: 22px; }
.cp-grow .ico { width: 14px; height: 14px; }
.cp-tag { display: inline-flex; align-items: center; gap: 5px; }
.cp-tag .ico { width: 13px; height: 13px; stroke-width: 2.4; }
.cp-chg { display: inline-flex; align-items: center; gap: 3px; margin-top: 10px; color: #ff6b70; }
.cp-chg .ico { width: 15px; height: 15px; stroke-width: 2.2; }
/* a heads-up in amber; the confidential note keeps its red, but quietly */
.cp-info { display: flex; gap: 10px; border-radius: 14px; padding: 12px 14px; margin: 10px 0; background: rgba(255,176,32,.07); border: 1px solid rgba(255,176,32,.32); font-size: 13px; line-height: 1.45; color: #e8d6b0; }
.cp-info b { color: #ffcf6a; }
.cp-info .ico { width: 18px; height: 18px; margin-top: 1px; color: #ffb020; }
.cp-warn { display: flex; gap: 10px; background: rgba(237,28,36,.07); border-color: rgba(237,28,36,.32); }
.cp-warn .ico { width: 18px; height: 18px; margin-top: 1px; color: #ff6b70; }
.cp-off .ico { width: 16px; height: 16px; color: #a1a1aa; }
/* the producers: WhatsApp in its green, a call in grey */
.cp-cl { background: rgba(255,255,255,.07); color: #f4f4f5; }
.cp-cl .ico { width: 18px; height: 18px; }
.cp-cl.is-wa { background: rgba(37,211,102,.14); color: #4ade80; }
/* the hub cards and the tabs */
.cp-hic { color: #e4e4e7; }
.cp-hic .ico { width: 22px; height: 22px; }
.cp-hcard.is-hot .cp-hic { background: rgba(237,28,36,.16); color: #ff6b70; }
.cp-hgo .ico { width: 18px; height: 18px; }
.cp-tabs i { filter: none; opacity: 1; color: #63636b; margin-bottom: 4px; }
.cp-tabs i .ico { width: 23px; height: 23px; margin: 0 auto; }
.cp-tabs button.is-on i { color: #ed1c24; }
@media (min-width: 900px) {
  .cp-tabs i { margin: 0; }
  .cp-tabs i .ico { width: 17px; height: 17px; }
}
/* the three questions */
.ask-i { color: #e4e4e7; display: grid; place-items: center; }
.ask-i .ico { width: 22px; height: 22px; }
.ask-send:disabled { background: #26262a; color: #71717a; opacity: 1; }
.ask-done { color: #fff; }
.ask-done .ico { width: 28px; height: 28px; stroke-width: 2.6; }
/* on a phone the brand line is the company and the event, in full; the
   place is on the call card already */
@media (max-width: 640px) { .cp-brand > span:last-child { display: none; } }

/* the night in one line under the calltime (crewpage.js summary) */
.cp-sum { display: flex; flex-wrap: wrap; gap: 3px 0; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13.5px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.4; }
.cp-sum span { white-space: nowrap; }
.cp-sum span + span::before { content: '·'; margin: 0 7px; color: rgba(255,255,255,.45); }
.cp-call.is-tbc .cp-sum { border-top-color: rgba(255,255,255,.08); }

/* the booking mail: the text on the left, the card it arrives as on the right (email.js) */
.mail-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.mail-split .field { min-width: 0; }
.mail-preview { display: block; width: 100%; height: 100%; min-height: 520px; margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; background: #f2f2f4; }
@media (max-width: 860px) { .mail-split { grid-template-columns: 1fr; } .mail-preview { min-height: 420px; } }

/* labels on the plan keep off everything (plans.js settleLabels, 4 Nov 2026):
   a camera's label can hang under or over its dot too */
.pin.is-below { flex-direction: column; transform: translate(-50%, -11px); gap: 3px; }
.pin.is-above { flex-direction: column-reverse; transform: translate(-50%, calc(-100% + 11px)); gap: 3px; }
.pin-label .pin-on { display: block; font: 600 9px var(--mono); letter-spacing: .04em; color: #ffb3b5; margin-top: 0; }
.pin:hover .pin-on { color: var(--text-invert); }
/* a deck's size and a plug's amperage step back where it is crowded, and come back on hover */
.sb-size-out.is-hid, .sb-pw-tag.is-hid { display: none; }
.sb-area:hover .sb-size-out.is-hid, .sb-pw:hover .sb-pw-tag.is-hid { display: block; z-index: 6; }
.sb-pw.is-forcam .sb-pw-tag { display: none; }
.sb-pw.is-forcam:hover .sb-pw-tag { display: block; z-index: 6; }

/* under a picker on the camera plan: how many of ours are free on these days (plans.js haveLine) */
.cd-have { margin-top: 5px; font: 500 11.5px var(--sans); color: var(--text-3); }
.cd-have b { font-weight: 600; color: var(--text-2); }
.cd-have.is-short, .cd-have.is-short b { color: var(--danger); }

/* the production sheet: a socket on the drawing is one red square, bolt and number (needs.js plugMark, 4 Nov 2026) */
.pn-plugn.is-mark { position: static; display: inline-flex; align-items: center; justify-content: center; gap: 1px; min-width: 17px; height: 16px; padding: 0 3px;
  border-radius: 4px; border: 1.5px solid #fff; box-shadow: 0 0 0 1px #ED1C24, 0 1px 2px rgba(0,0,0,.25); font: 700 8.5px var(--mono); white-space: nowrap; }
.pn-plugn.is-mark i { font-style: normal; font-size: 7px; line-height: 1; }
.pn-plugn.is-mark.is-lg { min-width: 26px; height: 22px; font-size: 11px; }
.pn-plugn.is-mark.is-lg i { font-size: 10px; }
.pn-plugmark.is-32 .pn-plugn.is-mark { box-shadow: 0 0 0 2px #ffd400, 0 1px 2px rgba(0,0,0,.25); }
/* the close-ups on the decks and power pages: a row under the map and the table, the page's full width */
.pn-cus.is-beside { grid-column: 1 / -1; margin-top: 18px; }

/* a row under the mouse: its pin, deck or plug lights up on the drawing (plans.js hot) */
.pin.is-hot .pin-dot { box-shadow: 0 0 0 4px var(--accent-soft), 0 0 12px var(--accent-line); transform: scale(1.12); }
.pin.is-hot .pin-label, .pin.is-hot .pin-op, .pin.is-hot .pin-grip, .pin.is-hot .pin-on { background: var(--accent); color: var(--text-invert); border-color: transparent; }
.sb-area.is-hot { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft), 0 0 12px var(--accent-line); }
.sb-pw.is-hot .sb-pw-dot { box-shadow: 0 0 0 4px var(--accent-soft), 0 0 12px var(--accent-line); transform: scale(1.12); }