/* Ismano Events — one stylesheet, no build step. */

/* Brand typefaces, self-hosted from the family's own web-font files. Atkinson
   Hyperlegible was designed so lookalike characters stay distinct (1 l I, 0 O),
   which is worth more than style when a cue time is read off a phone in a dark
   room. font-display: swap means text shows immediately in the fallback. */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/AtkinsonHyperlegibleNext-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/AtkinsonHyperlegibleNext-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/AtkinsonHyperlegibleNext-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/AtkinsonHyperlegibleNext-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("../fonts/AtkinsonHyperlegibleMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("../fonts/AtkinsonHyperlegibleMono-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* Ismano Creative 2026 palette. Navy carries buttons, headings and the top
   bar; Light Blue underlines links and tints a crew member's own sub-cues;
   Cream is text on navy. The grays keep the roles the guide gives them:
   Charcoal body text, Slate captions and labels, Mist secondary text on navy,
   Line borders, Fog backgrounds and stripes. Orange is reserved for the live
   cue and the wordmark's dot, so it stays meaningful. Garnet, emerald and
   amethyst are not brand colours: they are the functional states that must
   read instantly (destructive, saved, "inside another company"). */
:root {
  --bg: #edf0f3;                         /* brand Fog */
  --surface: #ffffff;
  --surface-2: #edf0f3;                  /* brand Fog: stripes and hovers */
  --border: #d5dae1;                     /* brand Line */
  --border-strong: #9aa4b1;              /* brand Mist */
  --text: #3a4556;                       /* brand Charcoal */
  --heading: #14283f;                    /* brand Navy */
  --muted: #5e6a7a;                      /* brand Slate: captions and labels */
  --faint: #7c8796;                      /* Mist deepened to stay legible on white */
  --accent: #14283f;                     /* brand Navy */
  --accent-text: #f4f0e7;                /* brand Cream */
  --accent-soft: #e5f1f9;                /* brand Light Blue, tinted */
  --link-line: #a9d1ea;                  /* brand Light Blue */
  --ring: rgba(169, 209, 234, .75);
  --topbar: #14283f;                     /* brand Navy */
  --topbar-line: #14283f;
  --on-navy: #f4f0e7;                    /* brand Cream */
  --on-navy-muted: #9aa4b1;              /* brand Mist */
  --on-navy-line: rgba(244, 240, 231, .26);
  --on-navy-hover: rgba(244, 240, 231, .1);
  --live: #f7941d;                       /* brand Orange -- the live moment only */
  --live-on: #14283f;                    /* navy on orange */
  --live-soft: #fef0dd;
  --live-ink: #9a5200;                   /* orange deepened, readable on its tint */
  --live-pulse: rgba(247, 148, 29, .6);
  --live-pulse-0: rgba(247, 148, 29, 0);
  --danger: #884657;
  --danger-soft: #f7ecef;
  --success: #356653;
  --success-soft: #e9f1ed;
  --amethyst: #705477;
  --amethyst-soft: #f1ecf2;
  --warn-soft: #f4f0e7;                  /* brand Cream: private notes */
  --radius: 10px;
  --shadow: 0 1px 2px rgba(20, 40, 63, .06), 0 1px 3px rgba(20, 40, 63, .06);
  --shadow-float: 0 6px 20px rgba(20, 40, 63, .13);
  --font: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, SFMono-Regular, "SF Mono",
          Menlo, Consolas, monospace;
}

/* Dark mode is the brand's navy ground, with cream text. */
:root[data-theme="dark"] {
  --bg: #0b1522;
  --surface: #14283f;                    /* brand Navy */
  --surface-2: #1c3350;
  --border: #26405f;
  --border-strong: #3a5677;
  --text: #f4f0e7;                       /* brand Cream */
  --heading: #f4f0e7;
  --muted: #9aa4b1;                      /* brand Mist: secondary text on navy */
  --faint: #7f8b9b;
  --accent: #a9d1ea;                     /* brand Light Blue */
  --accent-text: #14283f;
  --accent-soft: #1d3a57;
  --link-line: #3f6687;
  --ring: rgba(169, 209, 234, .35);
  --topbar: #0f1f33;
  --topbar-line: #26405f;
  --live: #f7941d;
  --live-on: #14283f;
  --live-soft: #3b2d1e;
  --live-ink: #f7941d;
  --danger: #e0a0ad;
  --danger-soft: #33222e;
  --success: #86c7a8;
  --success-soft: #15302b;
  --amethyst: #c0a6c6;
  --amethyst-soft: #2a2440;
  --warn-soft: #1c3350;
  --shadow: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-float: 0 6px 20px rgba(0, 0, 0, .4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1522;
    --surface: #14283f;                    /* brand Navy */
    --surface-2: #1c3350;
    --border: #26405f;
    --border-strong: #3a5677;
    --text: #f4f0e7;                       /* brand Cream */
    --heading: #f4f0e7;
    --muted: #9aa4b1;                      /* brand Mist: secondary text on navy */
    --faint: #7f8b9b;
    --accent: #a9d1ea;                     /* brand Light Blue */
    --accent-text: #14283f;
    --accent-soft: #1d3a57;
    --link-line: #3f6687;
    --ring: rgba(169, 209, 234, .35);
    --topbar: #0f1f33;
    --topbar-line: #26405f;
    --live: #f7941d;
    --live-on: #14283f;
    --live-soft: #3b2d1e;
    --live-ink: #f7941d;
    --danger: #e0a0ad;
    --danger-soft: #33222e;
    --success: #86c7a8;
    --success-soft: #15302b;
    --amethyst: #c0a6c6;
    --amethyst-soft: #2a2440;
    --warn-soft: #1c3350;
    --shadow: 0 1px 2px rgba(0, 0, 0, .45);
    --shadow-float: 0 6px 20px rgba(0, 0, 0, .4);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Navy links sit close to charcoal text, so links inside content carry a
   Light Blue underline that darkens on hover. */
main a:not(.btn):not(.slot) {
  text-decoration: underline; text-decoration-color: var(--link-line);
  text-decoration-thickness: 2px; text-underline-offset: .2em;
}
main a:not(.btn):not(.slot):hover { text-decoration-color: currentColor; }
h1, h2, h3 { color: var(--heading); line-height: 1.25; margin: 0 0 .4em; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 1em; }
small, .small { font-size: .82rem; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }

/* --- shell --- */
.topbar {
  background: var(--topbar);
  border-bottom: 1px solid var(--topbar-line);
  position: sticky; top: 0; z-index: 20;
}
.topbar-inner {
  max-width: 1180px; margin: 0 auto; padding: .7rem 1.1rem;
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
}
.brand { font-weight: 700; color: var(--on-navy); letter-spacing: -.02em; font-size: 1.02rem; }
.brand:hover { text-decoration: none; }
.brand .dot { color: var(--live); }   /* the one flash of orange on every page */
.topnav { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.topnav a { color: var(--on-navy-muted); font-size: .9rem; font-weight: 500; }
.topnav a.active, .topnav a:hover { color: var(--on-navy); text-decoration: none; }
.topnav a.active { box-shadow: 0 2px 0 var(--link-line); }
.topbar .muted { color: var(--on-navy-muted); }
.topbar .btn { background: transparent; color: var(--on-navy); border-color: var(--on-navy-line); }
.topbar .btn:hover { background: var(--on-navy-hover); }
.spacer { margin-left: auto; }

main { max-width: 1180px; margin: 0 auto; padding: 1.6rem 1.1rem 5rem; }
main.narrow { max-width: 660px; }
.page-head { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.page-head .spacer { margin-left: auto; }
.breadcrumb { font-size: .85rem; color: var(--muted); margin-bottom: .3rem; }
.breadcrumb a { color: var(--muted); }

/* --- cards --- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 1.2rem;
}
.card-head {
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
}
.card-head h2, .card-head h3 { margin: 0; }
.card-body { padding: 1.1rem; }
.card-body > :last-child { margin-bottom: 0; }

/* --- forms --- */
label { display: block; font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: .3rem; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=time], input[type=number], textarea, select {
  width: 100%; padding: .5rem .65rem; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 7px; transition: border-color .12s, box-shadow .12s;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
textarea { resize: vertical; min-height: 68px; }
.field { margin-bottom: .9rem; }
.grid { display: grid; gap: .9rem; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.checkline { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.checkline input { width: auto; }
.checkline label { margin: 0; font-weight: 500; color: var(--text); }

/* --- buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .5rem .9rem; font: inherit; font-weight: 550; font-size: .89rem;
  border-radius: 7px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); cursor: pointer;
  text-decoration: none; white-space: nowrap; transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 86%, var(--accent-text)); }
.btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-sm { padding: .3rem .6rem; font-size: .82rem; }
.btn-icon { padding: .3rem .45rem; line-height: 1; color: var(--muted); }
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* --- flashes --- */
.flash {
  padding: .7rem 1rem; border-radius: var(--radius); margin-bottom: .8rem;
  border: 1px solid var(--border); font-size: .9rem;
}
.flash-success { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, var(--border)); }
.flash-error { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
.flash-info { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 25%, var(--border)); }

/* --- tables --- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--faint); font-weight: 650; padding: .55rem .6rem;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
td { padding: .55rem .6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }

/* --- badges --- */
.badge {
  display: inline-block; padding: .13rem .5rem; border-radius: 999px;
  font-size: .74rem; font-weight: 600; background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--border);
}
.badge-accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge-warn { background: var(--warn-soft); color: var(--text); border-color: transparent; }

/* --- event code --- */
.code-chip {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--mono); font-size: 1.35rem; font-weight: 700; letter-spacing: .18em;
  padding: .45rem .5rem .45rem .8rem; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent); border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
}

/* --- schedule list --- */
.day-head {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--faint); font-weight: 700; margin: 1.6rem 0 .6rem;
}
.day-head:first-child { margin-top: 0; }
.slot {
  display: flex; gap: 1rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit; align-items: flex-start;
}
.slot:last-child { border-bottom: none; }
a.slot:hover { background: var(--surface-2); text-decoration: none; }
.slot-time {
  font-family: var(--mono); font-size: .85rem; font-weight: 600;
  min-width: 8.5rem; padding-top: .1rem; color: var(--muted);
}
.slot-body { flex: 1; min-width: 0; }
.slot-title { font-weight: 600; margin-bottom: .12rem; }
.slot-meta { font-size: .83rem; color: var(--muted); display: flex; gap: .7rem; flex-wrap: wrap; }
.slot-chevron { color: var(--faint); align-self: center; }
@media (max-width: 620px) {
  .slot { flex-direction: column; gap: .3rem; }
  .slot-time { min-width: 0; }
  .slot-chevron { display: none; }
}

/* --- run of show editor: a card per cue, sub-cues nested inside --- */
#ros-editor { padding: .2rem 0; }

.cue-card {
  border-bottom: 1px solid var(--border);
  padding: .7rem 1.1rem .85rem;
}
.cue-card:last-child { border-bottom: none; }
.cue-card.dragging { opacity: .4; }
.cue-card.drop-target { box-shadow: inset 0 2px 0 var(--accent); }

.cue-head { display: flex; align-items: flex-start; gap: .4rem; }
.cue-handle, .sub-handle {
  cursor: grab; color: var(--faint); user-select: none;
  padding: .45rem .15rem; line-height: 1; flex: none;
}
.cue-num {
  font-family: var(--mono); font-size: .78rem; color: var(--faint);
  min-width: 1.4rem; text-align: right; padding-top: .55rem; flex: none;
}

/* Inputs read as plain text until hovered or focused, so the page stays a
   document rather than a wall of boxes. */
.cue-card input, .cue-card textarea, .cue-card select {
  border: 1px solid transparent; background: transparent;
  padding: .35rem .4rem; border-radius: 6px; font-size: .9rem;
}
.cue-card input:hover, .cue-card textarea:hover, .cue-card select:hover { border-color: var(--border); }
.cue-card input:focus, .cue-card textarea:focus, .cue-card select:focus {
  background: var(--surface); border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
.cue-card textarea { resize: vertical; min-height: 34px; }

/* Qualified with input. to outweigh the base input[type=text] rule, which is
   more specific than a bare class and would otherwise force width:100% here. */
.cue-card input.cue-f-time { width: 6.6rem; flex: none; font-family: var(--mono); text-align: center; }
.cue-card input.cue-f-dur  { width: 3.4rem; flex: none; font-family: var(--mono); text-align: center; }
.cue-f-item { flex: 1; min-width: 0; font-weight: 600; }
.cue-f-details {
  display: block; width: 100%; margin: .15rem 0 .1rem 1.85rem;
  max-width: calc(100% - 1.85rem); font-size: .87rem; color: var(--muted);
}

.sub-list { margin: .2rem 0 0 1.85rem; }
.sub-row {
  display: flex; align-items: flex-start; gap: .4rem;
  border-left: 2px solid var(--border); padding-left: .5rem; margin-bottom: .1rem;
}
.sub-row.dragging { opacity: .4; }
.sub-row.drop-target { border-left-color: var(--accent); }
.sub-row select {
  width: 12.5rem; flex: none; font-size: .85rem; font-weight: 600; color: var(--accent);
}
.sub-row textarea { flex: 1; min-width: 0; font-size: .87rem; }
.sub-add { margin: .25rem 0 0 2.35rem; color: var(--muted); }

@media (max-width: 700px) {
  .cue-head { flex-wrap: wrap; }
  .cue-f-item { flex-basis: 100%; order: 5; }
  .cue-f-details, .sub-list { margin-left: .6rem; }
  .sub-row { flex-wrap: wrap; }
  .sub-row select { width: 100%; }
  .sub-row textarea { flex-basis: 100%; }
  .sub-add { margin-left: 1rem; }
}

.saved-flash { color: var(--success); font-size: .8rem; }

/* --- attendee run of show --- */
.cue {
  display: grid; grid-template-columns: 5.4rem 1fr; gap: 0 1rem;
  padding: .9rem 1.1rem; border-bottom: 1px solid var(--border);
}
.cue:last-child { border-bottom: none; }
.cue-time { font-family: var(--mono); font-weight: 650; font-size: .9rem; color: var(--text); }
.cue-dur { font-size: .75rem; color: var(--faint); font-family: var(--mono); }
.cue-item { font-weight: 600; margin-bottom: .15rem; }
.cue-owner { font-size: .8rem; color: var(--accent); font-weight: 600; }
.cue-details { font-size: .88rem; color: var(--muted); white-space: pre-wrap; margin-top: .25rem; }
/* A personal note is one compact line until you open it: "+ Add note" when
   empty, the note itself once written. Keeps a long run of show scannable. */
.note-toggle { margin-top: .5rem; }
.note-toggle > summary {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  cursor: pointer; list-style: none; padding: .2rem 0; font-size: .84rem;
}
.note-toggle > summary::-webkit-details-marker { display: none; }
.note-toggle > summary::before {
  content: "▸"; color: var(--faint); font-size: .7rem; flex: none;
}
.note-toggle[open] > summary::before { content: "▾"; }
.note-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--faint); font-weight: 650; flex: none;
}
.note-add { color: var(--accent); font-weight: 600; }
.note-preview {
  /* Two lines covers most notes in full; longer ones fade and open on click. */
  flex: 1 1 100%; min-width: 0; color: var(--text); white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.note-toggle[open] .note-preview { display: none; }
.note-toggle textarea {
  background: var(--warn-soft); border: 1px solid var(--border);
  font-size: .89rem; min-height: 42px; margin-top: .3rem;
}
.note-toggle textarea:focus { background: var(--surface); }

.note-status { font-size: .72rem; color: var(--faint); text-transform: none; letter-spacing: 0; font-weight: 500; }
@media (max-width: 620px) {
  .cue { grid-template-columns: 1fr; gap: .2rem; }
  .cue-time { display: flex; gap: .5rem; align-items: baseline; }
}

.empty {
  padding: 2.4rem 1.1rem; text-align: center; color: var(--muted); font-size: .92rem;
}
.empty strong { display: block; color: var(--text); margin-bottom: .3rem; font-size: 1rem; }

/* --- auth pages --- */
.auth-wrap { max-width: 400px; margin: 8vh auto; padding: 0 1.1rem; }
.auth-logo { text-align: center; margin-bottom: 1.6rem; }
.auth-logo .name { color: var(--heading); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.auth-logo .tag { color: var(--muted); font-size: .9rem; }
.auth-wrap .card-body { padding: 1.4rem; }
.code-input { font-family: var(--mono); font-size: 1.25rem; letter-spacing: .28em; text-align: center; text-transform: uppercase; }

details.reveal > summary {
  cursor: pointer; font-size: .87rem; color: var(--muted); font-weight: 550;
  padding: .3rem 0; list-style: none;
}
details.reveal > summary::-webkit-details-marker { display: none; }
details.reveal > summary::before { content: "▸ "; }
details.reveal[open] > summary::before { content: "▾ "; }
details.reveal > div { padding-top: .8rem; }

hr.sep { border: none; border-top: 1px solid var(--border); margin: 1.4rem 0; }

/* --- print --- */
.print-only { display: none; }
@media print {
  .topbar, .no-print, .btn, footer { display: none !important; }
  .print-only { display: block; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  main { max-width: none; padding: 0; }
  .card { border: none; box-shadow: none; margin: 0; }
  .card-head { border-bottom: 2px solid #000; padding-left: 0; padding-right: 0; }
  table { page-break-inside: auto; }
  tr { page-break-inside: avoid; page-break-after: auto; }
  thead { display: table-header-group; }
  td, th { border-bottom: 1px solid #999; }
  @page { margin: 1.5cm; }
}

/* Time entry: free-text hour/minute plus an explicit AM/PM choice. The native
   <input type="time"> was dropped because its AM/PM segment reads as filled
   when it is not, and the browser then blocks the form with "invalid value". */
.time-pair { display: flex; gap: .4rem; }
.time-pair input { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.time-pair select { width: 5.2rem; flex: none; }

/* --- attendee: sub-cues under each cue --- */
.sub-cues { list-style: none; margin: .45rem 0 0; padding: 0; }
.sub-cues li {
  display: flex; gap: .6rem; padding: .3rem .5rem .3rem .6rem;
  border-left: 2px solid var(--border); font-size: .88rem;
}
.sub-cues li.mine {
  border-left-color: var(--accent);
  background: var(--accent-soft);
  border-radius: 0 6px 6px 0;
}
.sub-position {
  flex: none; width: 11rem; font-weight: 650; color: var(--muted);
  font-size: .82rem; padding-top: .05rem;
}
.sub-cues li.mine .sub-position { color: var(--accent); }
.sub-instruction { flex: 1; min-width: 0; white-space: pre-wrap; }
@media (max-width: 620px) {
  .sub-cues li { flex-direction: column; gap: .1rem; }
  .sub-position { width: auto; }
}

/* Free-text overview blocks keep the line breaks the organizer typed. */
.overview-text { white-space: pre-wrap; }
#session-overview { min-height: 120px; line-height: 1.5; }

/* --- crew type-ahead --- */
.typeahead {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 8px; box-shadow: var(--shadow-float);
  max-height: 17rem; overflow-y: auto; margin-top: .25rem;
}
.typeahead-item {
  display: flex; align-items: baseline; gap: .55rem; width: 100%;
  padding: .5rem .7rem; background: none; border: none; cursor: pointer;
  font: inherit; text-align: left; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.typeahead-item:last-child { border-bottom: none; }
.typeahead-item:hover, .typeahead-item.active { background: var(--accent-soft); }
.ta-name { font-weight: 600; flex: none; }
.ta-meta { font-size: .8rem; color: var(--muted); flex: 1; min-width: 0; }
.ta-email { font-size: .78rem; color: var(--faint); font-family: var(--mono); flex: none; }
.typeahead-empty { padding: .7rem; font-size: .87rem; color: var(--muted); }

.picked-card {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem .9rem; border: 1px solid var(--accent);
  background: var(--accent-soft); border-radius: 8px;
}
.picked-name { font-weight: 650; }
@media (max-width: 620px) {
  .typeahead-item { flex-direction: column; gap: .1rem; }
  .ta-meta, .ta-email { flex: none; }
}

/* The hidden attribute must win over component display rules (.btn is
   inline-flex, which would otherwise keep a "hidden" button visible). */
[hidden] { display: none !important; }

/* --- live show mode --- */
[data-live-cue-id] { transition: opacity .25s, background-color .25s, box-shadow .25s; }
.is-done { opacity: .42; }
.is-live {
  background: var(--live-soft);
  box-shadow: inset 4px 0 0 var(--live);
}
.live-now {
  display: none; margin-right: .5rem; padding: .08rem .45rem; border-radius: 999px;
  background: var(--live); color: var(--live-on);
  font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  vertical-align: .12em;
}
.is-live .live-now { display: inline-block; }

/* The organizer's run screen: bigger type, whole row is a jump target. */
.run-cue {
  display: grid; grid-template-columns: 6rem 1fr; gap: 0 1rem;
  padding: 1rem 1.1rem; border-bottom: 1px solid var(--border); cursor: pointer;
}
.run-cue:last-child { border-bottom: none; }
.run-cue:hover:not(.is-live) { background: var(--surface-2); }
.run-cue .cue-item { font-size: 1.08rem; }
@media (max-width: 620px) { .run-cue { grid-template-columns: 1fr; gap: .2rem; } }

.live-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  background: var(--surface); border-top: 1px solid var(--border-strong);
  box-shadow: 0 -4px 18px rgba(20, 40, 63, .09);
}
.live-bar-inner {
  max-width: 1180px; margin: 0 auto; padding: .6rem 1.1rem;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.live-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--faint); flex: none; }
.live-bar[data-live-status-value="running"] .live-dot {
  background: var(--live); animation: live-pulse 1.4s ease-out infinite;
}
.live-bar[data-live-status-value="complete"] .live-dot { background: var(--success); }
.live-status-text { font-weight: 650; font-variant-numeric: tabular-nums; }
.live-follow {
  display: flex; align-items: center; gap: .3rem; margin: 0;
  font-size: .82rem; font-weight: 500; color: var(--muted);
}
.live-follow input { width: auto; }
.live-hint { font-size: .76rem; color: var(--faint); }
.live-bar .btn { min-width: 5.4rem; }
@media (max-width: 620px) { .live-hint { display: none; } }

.badge-live {
  background: var(--live-soft); color: var(--live-ink);
  border-color: transparent; vertical-align: .1em;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 var(--live-pulse); }
  70%  { box-shadow: 0 0 0 .5rem var(--live-pulse-0); }
  100% { box-shadow: 0 0 0 0 var(--live-pulse-0); }
}
@media print { .is-done { opacity: 1; } .is-live { background: none; box-shadow: none; } }

/* --- companies --- */
.org-chip {
  font-size: .76rem; font-weight: 650; padding: .15rem .6rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
  white-space: nowrap;
}
.topbar .org-chip { background: var(--on-navy-hover); border-color: var(--on-navy-line); color: var(--on-navy); }
.org-chip.acting, .topbar .org-chip.acting {
  background: var(--amethyst-soft); color: var(--text);
  border-color: color-mix(in srgb, var(--amethyst) 45%, var(--border));
}
.acting-banner {
  background: var(--amethyst-soft);
  border-bottom: 1px solid color-mix(in srgb, var(--amethyst) 40%, var(--border));
}
.auth-logo .dot { color: var(--live); }
.acting-inner {
  max-width: 1180px; margin: 0 auto; padding: .5rem 1.1rem;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; font-size: .88rem;
}
.acting-inner form { margin-left: auto; }
.invite-card { border-color: var(--accent); }
.invite-link-row { display: flex; gap: .4rem; }
.invite-link-row input { flex: 1; min-width: 0; }
details > summary.btn { list-style: none; }
details > summary.btn::-webkit-details-marker { display: none; }

/* --- panels that open from a plain "Edit" link --- */
/* #edit-event, #edit-session and #add-session open through the page address.
   No JavaScript needed, and a rejected form that redirects back to the anchor
   comes back open with its error. */
.target-panel { display: none; }
.target-panel:target { display: block; }
.edit-link { font-weight: 600; white-space: nowrap; }

/* "+ Add session" gives way to the form rather than sitting above it. */
.add-zone > .add-form { display: none; }
.add-zone:target > .add-form,
.add-zone.always-open > .add-form { display: block; }
.add-zone:target > .add-trigger,
.add-zone.always-open > .add-trigger { display: none; }

/* A cue's time: the same text box plus AM/PM as a session's. */
.cue-time-pair { display: flex; gap: .25rem; flex: none; }
.cue-card input.cue-f-time { width: 4.5rem; flex: none; font-family: var(--mono); text-align: center; }
.cue-card select.cue-f-ampm { width: 4.2rem; flex: none; font-size: .8rem; padding: .35rem .15rem; }
@media (max-width: 700px) { .cue-time-pair { flex: 1 0 100%; } }

/* A schedule line's description: a sentence or two under its name. */
.slot-desc {
  font-size: .87rem; color: var(--muted); white-space: pre-wrap;
  margin: .1rem 0 .15rem; max-width: 60ch;
}