/* =============================================================================
   Weaion Labs — World C: broadcast cue sheet
   -----------------------------------------------------------------------------
   The page is a script supervisor's log in a dark gallery at two in the
   morning. Monitor-lit near-black, one tally red, and SMPTE colour bars used
   only where they mean something: as the section markers they actually are.

   Monospace is not costume here. Timecode, cue entry times and log fields are
   measurements, so they are set in Martian Mono, and prose stays in a readable
   grotesque so long paragraphs do not turn into a wall of mono.
   ========================================================================== */

:root {
  --gallery: #0c0c0e;
  --gallery-panel: #15151a;
  --gallery-raise: #1c1c22;
  --edge: #2c2c34;
  --edge-hot: #3d3d47;
  --label: #8b8a93;

  --paper: #f0efe9;
  --dim: #a8a7a1;
  --dimmer: #807f78;

  --tally: #ff3b21;
  --tally-deep: #d62c15;

  /* The seven bars, as they actually are. Used only as markers. */
  --bar-white: #f0efe9;
  --bar-yellow: #e8c33a;
  --bar-cyan: #4fb3c4;
  --bar-green: #4e9c6a;
  --bar-magenta: #b8559a;

  --font-mono: "Martian Mono", "SF Mono", monospace;
  --font-prose: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --measure: 68ch;
  --pad-x: clamp(1.25rem, 5vw, 4.5rem);
  --section-gap: clamp(4.5rem, 9vw, 8rem);
  --transport-h: 58px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The transport bar is fixed, so reserve its height. */
  scroll-padding-bottom: var(--transport-h);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  padding-bottom: var(--transport-h);
  background: var(--gallery);
  color: var(--paper);
  font-family: var(--font-prose);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Monitor bloom: the gallery is lit by its own screens, never flat black. */
  background-image: radial-gradient(
    120% 60% at 50% -10%,
    rgba(120, 130, 160, 0.09),
    transparent 60%
  );
  ::selection {
    background: var(--tally-deep);
    color: #fff;
  }
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--tally);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--tally-deep);
  color: #fff;
  padding: 0.8rem 1.25rem;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* ---- Sheet header ------------------------------------------------------- */

.slate-head {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem var(--pad-x);
  border-bottom: 1px solid var(--edge);
  background: rgba(12, 12, 14, 0.86);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex: 0 0 auto;
}
.wordmark-text {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* A tally lamp. The one lit thing in the header. */
.lamp {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--tally);
  box-shadow: 0 0 9px rgba(255, 59, 33, 0.45);
  animation: breathe 3.2s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .lamp { animation: none; }
}

.slate-id {
  margin: 0;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--dimmer);
}
.slate-field {
  color: var(--label);
}
.slate-sep {
  margin: 0 0.4rem;
  color: var(--label);
}

.slate-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  min-width: 0;
}
.slate-nav a {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--dim);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.slate-nav a:hover {
  color: var(--paper);
  border-bottom-color: var(--tally);
}

.slate-cta {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-decoration: none;
  color: #fff;
  background: var(--tally-deep);
  padding: 0.65rem 1rem;
}
.slate-cta:hover {
  background: var(--tally-deep);
}

/* ---- Opening cue -------------------------------------------------------- */

.opening {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--pad-x) clamp(3rem, 6vw, 5rem);
}

h1 {
  margin: 0;
  font-size: clamp(2.5rem, 5.4vw, 4.75rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
/* The one accent, used on the claim that carries the offer. */
.lit {
  color: var(--tally);
}

.opening-lede {
  margin: 1.75rem 0 0;
  max-width: 48ch;
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--dim);
}

.opening-actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

/* A tall red block: the live button. Not a rounded pill. */
.live-btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  background: var(--tally-deep);
  color: #fff;
  padding: 1.35rem 2rem;
  line-height: 1;
  border-left: 4px solid #fff;
  transition: background 200ms var(--ease);
}
.live-btn:hover {
  background: var(--tally-deep);
}

/* Timecode belongs to the mono face, so the number uses it. */
.live-phone {
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--paper);
  border-bottom: 1px solid var(--edge-hot);
  padding-bottom: 3px;
}
.live-phone:hover {
  color: var(--tally);
  border-bottom-color: var(--tally);
}

.opening-note {
  flex: 1 1 100%;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--dimmer);
}

/* ---- Log rows ----------------------------------------------------------- */

.log-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.75rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--edge-hot);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}
.log-head-field {
  color: var(--label);
  text-transform: uppercase;
}
.log-head-tc {
  color: var(--tally);
  font-variant-numeric: tabular-nums;
}

.cue-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cue-list-open {
  border-bottom: 1px solid var(--edge);
}

.cue {
  display: grid;
  grid-template-columns: 6.75rem 1.25rem minmax(0, 1fr);
  gap: 0 1rem;
  align-items: start;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--edge);
}
.cue:last-child {
  border-bottom: 0;
}

.cue-tc {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--dimmer);
  font-variant-numeric: tabular-nums;
  padding-top: 0.3rem;
}

/* The cue lamp. It throws when the cue is on screen. */
.cue-lamp {
  width: 10px;
  height: 10px;
  margin-top: 0.45rem;
  border-radius: 50%;
  border: 1px solid var(--edge-hot);
  background: transparent;
  transition: background 320ms var(--ease), box-shadow 320ms var(--ease),
    border-color 320ms var(--ease);
}
.cue[data-live="true"] .cue-lamp {
  background: var(--tally);
  border-color: var(--tally);
  box-shadow: 0 0 8px rgba(255, 59, 33, 0.5);
}

.cue-title {
  margin: 0;
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.018em;
}
.cue-text {
  margin: 0.5rem 0 0;
  max-width: 62ch;
  color: var(--dim);
  font-size: 1rem;
}
.cue-when {
  margin: 0.9rem 0 0;
  max-width: 52ch;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--paper);
}
.cue-when-label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 0.2rem;
}

/* The full log rows carry the payload disclosure. */
#log .cue {
  grid-template-columns: 6.75rem 1.25rem minmax(0, 1fr) minmax(0, 9.5rem);
  gap: 0 1rem;
  padding: 1.75rem 0;
}
/* Cue content always sits in the description column. Without this, a bare
   <p> as a grid child lands in the next cell, which is the timecode column. */
.cue-main {
  grid-column: 3;
  min-width: 0;
}

.cue-open {
  align-self: start;
  justify-self: end;
}
.cue-open summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--edge-hot);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim);
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
}
.cue-open summary::-webkit-details-marker {
  display: none;
}
/* A drawn bracket, not a glyph. */
.cue-open summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 240ms var(--ease);
}
.cue-open[open] summary {
  color: var(--tally);
  border-color: var(--tally);
}
.cue-open[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.cue-open summary:hover {
  color: var(--paper);
  border-color: var(--paper);
}

.payload {
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
  text-align: right;
}
.payload li {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--dimmer);
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--edge);
}

.log-more {
  margin: 1rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}
.log-more a {
  color: var(--dim);
  text-decoration: none;
  border-bottom: 1px solid var(--edge-hot);
}
.log-more a:hover {
  color: var(--tally);
  border-bottom-color: var(--tally);
}

/* ---- Sections and the colour bars -------------------------------------- */

.section {
  padding: var(--section-gap) var(--pad-x);
  border-top: 1px solid var(--edge);
}

/* The seven bars, at their real widths, as the section marker. */
.bars {
  display: flex;
  height: 9px;
  margin-bottom: 2.25rem;
  max-width: 21rem;
}
.bars i {
  flex: 1 1 0;
  height: 100%;
  display: block;
}
.bars i:nth-child(1) { background: var(--bar-white); }
.bars i:nth-child(2) { background: var(--bar-yellow); }
.bars i:nth-child(3) { background: var(--bar-cyan); }
.bars i:nth-child(4) { background: var(--bar-green); }
.bars i:nth-child(5) { background: var(--bar-magenta); }
.bars i:nth-child(6) { background: var(--tally); }
.bars i:nth-child(7) { background: #4a6fb5; }

.section-head {
  max-width: var(--measure);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section-head h2 {
  margin: 0 0 0.65rem;
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.028em;
}
.section-head p {
  margin: 0;
  max-width: var(--measure);
  font-size: 1.125rem;
  color: var(--dim);
}

/* ---- Rundown ------------------------------------------------------------ */

.rundown {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--edge-hot);
}
.run-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 14rem) minmax(0, 1fr) minmax(0, 15rem);
  gap: 1rem 2rem;
  align-items: start;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--edge);
}
.run-tc {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--label);
  font-variant-numeric: tabular-nums;
  padding-top: 0.3rem;
}
.run-row h3 {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.014em;
}
.run-row p {
  margin: 0;
  max-width: 60ch;
  color: var(--dim);
  font-size: 1rem;
}
.run-out {
  font-family: var(--font-mono);
  font-size: 0.75rem !important;
  line-height: 1.55;
  color: var(--paper) !important;
  border-left: 2px solid var(--tally);
  padding-left: 0.85rem;
}

/* ---- Assignments -------------------------------------------------------- */

.assignments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
}
.assignment {
  padding: 1.75rem 1.6rem 1.9rem;
  background: var(--gallery-panel);
}
.assignment-tag {
  margin: 0 0 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bar-cyan);
}
.assignment h3 {
  margin: 0 0 0.65rem;
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.018em;
}
.assignment > p:not(.assignment-tag):not(.assignment-shape) {
  margin: 0 0 1.1rem;
  font-size: 0.9375rem;
  color: var(--dim);
  max-width: 48ch;
}
.assignment-shape {
  margin: 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--edge);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.55;
}
.assignment-label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 0.25rem;
}

.slate-note {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: 1.75rem 2rem 2rem;
  border: 1px solid var(--edge-hot);
  border-top: 2px solid var(--tally);
  background: var(--gallery-panel);
}
.slate-note h3 {
  margin: 0 0 1rem;
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: -0.018em;
}
.slate-note ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.65rem;
}
.slate-note li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 1rem;
  color: var(--dim);
  max-width: 70ch;
}
/* A cue marker in the margin, the way a log flags a note. */
.slate-note li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72rem;
  width: 0.75rem;
  height: 1px;
  background: var(--tally);
}

/* ---- Crew sheet --------------------------------------------------------- */

.crew-sheet {
  border: 1px solid var(--edge);
  background: var(--gallery-panel);
  padding: 0 1.5rem;
}
.team-row {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 0.3rem 2.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--edge);
}
.team-row:last-child {
  border-bottom: 0;
}
.team-name {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.014em;
}
.team-name .pending {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--label);
  border: 1px dashed var(--edge-hot);
  padding: 0.3rem 0.55rem;
}
.team-role {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--bar-cyan);
  letter-spacing: 0.02em;
}
.team-focus {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 0.9375rem;
  color: var(--dim);
  max-width: 58ch;
  align-self: center;
}

.pay-note {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 0.5rem 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--edge-hot);
}
.pay-note h3 {
  margin: 0;
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: -0.018em;
}
.pay-note p {
  margin: 0;
  max-width: 62ch;
  color: var(--dim);
}

/* ---- Script notes: the quote slots -------------------------------------- */

.notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
}
.quote {
  margin: 0;
  padding: 1.5rem 1.4rem 1.6rem;
  background: var(--gallery-panel);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.quote blockquote {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--paper);
}
.quote-empty {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--dimmer);
}
.quote-empty > span:first-child {
  color: var(--bar-yellow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.quote figcaption {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--dim);
}
.quote-name {
  display: block;
  font-weight: 600;
}
.quote-role {
  display: block;
  color: var(--dimmer);
}
.quote-pending {
  padding-top: 0.75rem;
  border-top: 1px solid var(--edge);
  font-size: 0.75rem !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--label);
}

/* ---- Questions ---------------------------------------------------------- */

.questions {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.questions h3 {
  margin: 0 0 1.25rem;
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: -0.018em;
}
.qa-list {
  border-top: 1px solid var(--edge-hot);
}
.qa {
  border-bottom: 1px solid var(--edge);
}
.qa summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 3rem 1.1rem 0;
  font-size: 1.0625rem;
  font-weight: 600;
  position: relative;
}
.qa summary::-webkit-details-marker {
  display: none;
}
/* The record arm: two rules that stop walking when the answer is showing. */
.qa summary::before,
.qa summary::after {
  content: "";
  position: absolute;
  right: 0.25rem;
  background: var(--tally);
  transition: transform 240ms var(--ease), opacity 240ms var(--ease);
}
.qa summary::before {
  top: 1.68rem;
  width: 20px;
  height: 1px;
  animation: march 900ms steps(2, end) infinite;
}
.qa summary::after {
  top: calc(1.68rem - 6.5px);
  width: 13px;
  height: 1px;
}
.qa[open] summary::before {
  animation: none;
  opacity: 0;
}
@keyframes march {
  0% { transform: translateX(0); }
  50% { transform: translateX(7px); }
  100% { transform: translateX(0); }
}
.qa summary:hover {
  color: var(--tally);
}
.qa p {
  margin: 0 0 1.25rem;
  max-width: 62ch;
  color: var(--dim);
}

/* ---- Closing card ------------------------------------------------------- */

.close-card {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--edge-hot);
}
.close-cell {
  margin: 0;
  padding: 1.25rem 1.35rem;
  border-left: 1px solid var(--edge);
  border-top: 1px solid var(--edge);
}
.close-cell dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 0.5rem;
}
.close-cell dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--paper);
}
.close-cell-main {
  grid-column: 1 / -1;
  background: var(--gallery-raise);
  padding: 1.75rem 1.6rem 1.9rem;
}
.close-email {
  display: block;
  font-family: var(--font-prose);
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.024em;
  line-height: 1.05;
  text-decoration: none;
  word-break: break-word;
}
.close-email:hover {
  color: var(--tally);
}
.close-phone {
  display: block;
  margin-top: 0.6rem;
  font-size: 1.0625rem;
  text-decoration: none;
  color: var(--dim);
}
.close-phone:hover {
  color: var(--tally);
}

/* ---- Transport bar ------------------------------------------------------ */

.transport {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  height: var(--transport-h);
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 var(--pad-x);
  background: rgba(8, 8, 10, 0.94);
  border-top: 1px solid var(--edge-hot);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  overflow: hidden;
}
.transport p {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  white-space: nowrap;
}
.transport-field {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
}
.transport-tc {
  color: var(--tally);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.transport-now {
  flex: 1 1 auto;
  min-width: 0;
}
.transport-cue {
  color: var(--paper);
  overflow: hidden;
  text-overflow: ellipsis;
}
.transport-call {
  margin-left: auto !important;
}
.transport-call a {
  color: var(--paper);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.transport-call a:hover {
  color: var(--tally);
}

/* ---- Footer ------------------------------------------------------------- */

.sheet-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding: 1.5rem var(--pad-x) 2rem;
  border-top: 1px solid var(--edge);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--dimmer);
}
.sheet-foot p {
  margin: 0;
}

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 1080px) {
  .opening {
    grid-template-columns: minmax(0, 1fr);
  }
  .opening-log {
    max-width: 40rem;
  }
  .run-row {
    grid-template-columns: 7rem minmax(0, 1fr);
  }
  .run-out {
    grid-column: 2;
  }
  #log .cue {
    grid-template-columns: 6rem 1.25rem minmax(0, 1fr);
  }
  .cue-open {
    grid-column: 3;
    justify-self: start;
  }
  .payload {
    text-align: left;
  }
  .close-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .assignments,
  .notes {
    grid-template-columns: minmax(0, 1fr);
  }
  .team-row,
  .pay-note {
    grid-template-columns: minmax(0, 1fr);
  }
  .team-focus {
    grid-column: 1;
    grid-row: auto;
  }
  .slate-head {
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
  }
  .slate-nav {
    order: 4;
    flex-basis: 100%;
    justify-content: flex-start;
  }
  .slate-id {
    margin-left: auto;
  }
  .transport {
    gap: 1.25rem;
  }
  /* Beats `.transport p { display: flex }`, which is what was keeping the
     middle field on screen at phone widths and squeezing the cue name to
     nothing. */
  .transport p.transport-now {
    display: none;
  }
}

@media (max-width: 620px) {
  body {
    font-size: 1rem;
  }
  /* The cue grid drops to two columns here, so the content column must be
     restated. Left at 3 it becomes an implicit narrow column off to the side. */
  .cue {
    grid-template-columns: 1.25rem minmax(0, 1fr);
  }
  .cue-tc {
    grid-column: 1 / -1;
    padding-top: 0;
    margin-bottom: 0.35rem;
  }
  .cue-main,
  .cue-open {
    grid-column: 2;
  }
  .run-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
  }
  .run-out {
    grid-column: 1;
  }
  .close-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .bars {
    margin-bottom: 1.75rem;
  }
}
/* =============================================================================
   Automation patch bay and security bulletin
   -----------------------------------------------------------------------------
   The patch bay is a routing diagram, not a dashboard: nodes, ports, a branch
   and a human approval. The bulletin is the same log grammar used elsewhere,
   with three anonymised entries.
   ========================================================================== */

#automation,
#security {
  scroll-margin-top: 1rem;
}

.patch {
  border: 1px solid var(--edge-hot);
  background: var(--gallery-panel);
  padding: clamp(1.25rem, 3vw, 2rem);
}

.patch-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 0.4rem 2rem;
  align-items: baseline;
  margin-bottom: 1.6rem;
}
.patch-kicker {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tally);
}
.patch-head .patch-kicker {
  grid-column: 1 / -1;
}
.patch-head h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.patch-head p {
  grid-column: 2;
  margin: 0;
  color: var(--dim);
  max-width: 56ch;
}

.flow {
  margin: 0;
  border: 1px solid var(--edge);
  background: var(--gallery);
  padding: 0.85rem;
  overflow-x: auto;
}
.flow svg {
  display: block;
  width: 100%;
  height: auto;
  min-width: 640px;
}
.flow figcaption {
  margin: 0.75rem 0.25rem 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.6;
  color: var(--label);
  max-width: 74ch;
}

.flow-grid path {
  fill: none;
  stroke: var(--edge);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
}
.flow-wires path[data-wire] {
  fill: none;
  stroke: var(--dim);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.flow-wire-dashed {
  fill: none;
  stroke: var(--edge-hot);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
}
.flow-terminal {
  fill: var(--gallery);
  stroke: var(--dim);
  stroke-width: 1;
}
.flow-node rect {
  fill: var(--gallery-raise);
  stroke: var(--edge-hot);
  stroke-width: 1;
}
.flow-node--branch rect {
  fill: #221a1a;
  stroke: var(--tally-deep);
}
.flow-node--end rect {
  fill: #1a2022;
  stroke: var(--bar-cyan);
}
.flow-node-title {
  font-family: var(--font-prose);
  font-size: 15px;
  font-weight: 700;
  fill: var(--paper);
  letter-spacing: -0.01em;
}
.flow-node-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--label);
  letter-spacing: 0.01em;
}
.flow-icon {
  fill: var(--tally);
}
.flow-port {
  fill: var(--gallery);
  stroke: var(--edge-hot);
  stroke-width: 1;
}
.flow-labels text {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--tally);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.flow-packet {
  fill: var(--tally);
}

.flow.is-live .flow-wires path[data-wire] {
  stroke-dasharray: 5 8;
  animation: c-flow-dash 1.6s linear infinite;
}
.flow.is-live .flow-icon {
  animation: c-flow-pulse 2.8s ease-in-out infinite;
}
@keyframes c-flow-dash {
  to {
    stroke-dashoffset: -26;
  }
}
@keyframes c-flow-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* ---- Security bulletin -------------------------------------------------- */

.bulletin {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.bulletin-item {
  border: 1px solid var(--edge);
  background: var(--gallery-panel);
  padding: 1.35rem 1.25rem 1.5rem;
}
.bulletin-ref {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--label);
}
.bulletin-ref b {
  color: var(--tally);
  font-weight: 500;
}
.bulletin-item h3 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  line-height: 1.2;
}
.bulletin-item > p {
  margin: 0 0 1.25rem;
  color: var(--dim);
  font-size: 0.9375rem;
}
.bulletin-meta {
  margin: 0;
  border-top: 1px solid var(--edge);
  padding-top: 0.75rem;
  display: grid;
  gap: 0.5rem;
}
.bulletin-meta div {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 0.75rem;
}
.bulletin-meta dt {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tally);
}
.bulletin-meta dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--label);
}
.bulletin-note {
  margin: 1.25rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.65;
  color: var(--label);
  max-width: 76ch;
}

@media (max-width: 1080px) {
  .bulletin {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .patch-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .patch-head p {
    grid-column: 1;
  }
}

@media (max-width: 620px) {
  .bulletin {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-packet {
    display: none;
  }
  .flow.is-live .flow-wires path[data-wire],
  .flow.is-live .flow-icon {
    animation: none;
  }
}

.flow-hint {
  display: none;
  margin: 0 0 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tally);
}
@media (max-width: 760px) {
  .flow-hint {
    display: block;
  }
}

/* Mobile header: the decorative sheet id is the first thing to go, then the
   nav wraps instead of becoming a clipped scroll row. */
@media (max-width: 620px) {
  .slate-id {
    display: none;
  }
  .slate-nav {
    flex-wrap: wrap;
    width: 100%;
    gap: 0.25rem 1rem;
    padding-bottom: 0.15rem;
  }
  .slate-nav a {
    white-space: nowrap;
  }
}

.bulletin-note a {
  color: var(--tally);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Very narrow phones: keep the transport inside the screen and stop the
   header CTA from taking a row of its own. */
@media (max-width: 380px) {
  .slate-head {
    gap: 0.5rem 0.75rem;
  }
  .slate-cta {
    padding: 0.55rem 0.7rem;
    font-size: 0.6875rem;
  }
  .transport {
    gap: 0.6rem;
    padding-inline: 0.75rem;
    font-size: 0.6875rem;
  }
  .transport-field {
    font-size: 0.625rem;
    letter-spacing: 0.08em;
  }
  .transport-call {
    font-size: 0.6875rem;
  }
}

/* Mobile route: a vertical list instead of a cropped horizontal graph. */
.flow-mobile {
  display: none;
}
@media (max-width: 760px) {
  .flow {
    overflow: visible;
  }
  .flow svg {
    display: none;
  }
  .flow-hint {
    display: none;
  }
  .flow-mobile {
    display: block;
    position: relative;
    padding-left: 1.4rem;
  }
  .flow-mobile::before {
    content: "";
    position: absolute;
    left: 0.42rem;
    top: 0.8rem;
    bottom: 0.8rem;
    width: 1px;
    background: var(--edge-hot);
  }
  .flow-mobile::after {
    content: "";
    position: absolute;
    left: 0.1rem;
    top: 0.8rem;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--tally);
    animation: c-flow-down 4.5s linear infinite;
  }
  .flow-mobile ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
  }
  .flow-mobile li {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.25rem 0.5rem;
    align-items: start;
    border: 1px solid var(--edge-hot);
    background: var(--gallery-raise);
    padding: 0.55rem 0.65rem;
  }
  .flow-mobile-n {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--tally);
    letter-spacing: 0.08em;
    padding-top: 0.15rem;
  }
  .flow-mobile b {
    display: block;
    font-size: 0.9375rem;
    line-height: 1.2;
    color: var(--paper);
  }
  .flow-mobile div span {
    display: block;
    margin-top: 0.15rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--label);
  }
  .flow-mobile-note {
    margin: 0.7rem 0 0;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: 1.55;
    color: var(--label);
  }
}
@keyframes c-flow-down {
  0% {
    top: 0.8rem;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    top: calc(100% - 1rem);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .flow-mobile::after {
    display: none;
  }
}

.foot-tag a {
  color: var(--dim);
  border-bottom: 1px solid var(--edge-hot);
}
.foot-tag a:hover {
  color: var(--tally);
}