/* The presenter view: one big idea per screen, built to read on a shared screen
   shown small in a Google Meet tile. North Shore on navy: Beaver navy ground, cream type, copper for the one accent
   and for time's up, water for the graphics (numbers, rules, the progress line).
   assets/brand/north-shore.css loads first for the fonts; the colors are its scales, named once here.

   Three rules from the design audit (docs/DESIGN-AUDIT.md):
   - The room sees the slide. Every control only the presenter uses (.presenter) is hidden until the mouse moves,
     a key is pressed, or a control has focus; the clock and timer digits stay.
   - Headings sit on one top line, so a cut between screens doesn't move them.
   - Text the room reads is at least 24px at 1280 wide and weight 400 or more, because Meet's video smears thin type. */

:root {
  --navy: #20384F;    /* navy-700, Beaver navy: the ground */
  --deep: #142434;    /* navy-900: the rail */
  --raised: #2E4B66;  /* navy-600: cards on the stage */
  --sky: #8BAEBA;     /* water-400: graphics only */
  --accent: #DCAD88;  /* sun-400: the accent, 6:1 on the ground */
  --sun: #D09466;     /* sun-500: time's up and the focus ring, 4.7:1 on the ground */
  --ice: #C8D2DA;     /* navy-200: reading text */
  --edge: #9DAEBC;    /* navy-300: outlines of quiet buttons */
  --white: #F4F1EB;   /* cream-100: headings and primary buttons */
  --curve: cubic-bezier(.22, 1, .36, 1);
  --rail: 64px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  color: var(--white);
  font-family: var(--font-sans);
  background: var(--navy);   /* flat, as the brand asks: no gradients or textures */
}
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; box-shadow: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Presenter-only controls: hidden when idle, full strength when reached for ---------- */
.presenter { transition: opacity 200ms ease, visibility 0s 200ms; }
body:not(.chrome-on) .presenter { opacity: 0; visibility: hidden; }
body.chrome-on .presenter { opacity: 1; visibility: visible; transition: opacity 120ms ease, visibility 0s; }

/* ---------- The stage ---------- */
.stage {
  height: calc(100dvh - var(--rail));
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 2.4vh;
  padding: max(88px, 13vh) 7vw 6vh;
  max-width: 1500px;
  margin: 0 auto;
  overflow-y: auto;   /* a tall screen on a small window scrolls instead of clipping */
  scrollbar-width: none;   /* without a scrollbar on the shared screen */
}
.stage::-webkit-scrollbar { display: none; }
.kicker, .part-kicker { margin: 0; color: var(--accent); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: clamp(1rem, 1.7vw, 1.6rem); }
.part-kicker { color: var(--ice); }
.heading { margin: 0; font-size: clamp(2.2rem, 4.6vw, 5rem); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.body { margin: 0; max-width: 32ch; font-family: var(--font-serif); font-size: clamp(1.5rem, 2.8vw, 3rem); line-height: 1.35; color: var(--ice); }
.body:empty { display: none; }
.foot { margin: 1vh 0 0; font-size: clamp(1.25rem, 1.9vw, 2rem); color: var(--white); font-weight: 600; }
.foot:empty { display: none; }
.url {
  display: inline-block; margin: 1vh 0 0; padding: .3em .8em; white-space: nowrap;
  font-size: clamp(1.1rem, 3vw, 3.2rem); font-weight: 600;
  background: var(--white); color: var(--deep); border-radius: 999px;
}

/* Title: the partner, their mark in its own colors beside their name, above the session's name.
   The words take the left; the session clock waits on the right, so they never meet. */
.kind-title { padding-top: 9vh; padding-right: 36vw; }
.kind-title .heading { font-size: clamp(3.5rem, 10vw, 10rem); line-height: 1.02; }
.kind-title .body { max-width: 30ch; }
.credit { display: flex; align-items: center; gap: 1.6vw; margin: 0 0 2vh; }
.credit img { width: auto; height: clamp(64px, 8vw, 140px); flex: none; }
.credit span { display: grid; gap: .25em; font-size: clamp(1.1rem, 2.2vw, 2.4rem); font-weight: 600; line-height: 1.2; }
/* For whoever finds the stage cold: a line under the title, gone once the session is called to order */
.stage-note { margin: 1vh 0 0; max-width: 40em; font-size: clamp(1rem, 1.25vw, 1.25rem); line-height: 1.45; color: var(--ice); }
.stage-note a { color: inherit; text-underline-offset: .2em; }

/* Prompt: when a screen has a big line, the heading above it is its label */
.big { margin: 0; font-size: clamp(2.6rem, 7vw, 7.5rem); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; color: var(--accent); text-wrap: balance; }
.kind-prompt .heading:has(+ .big) { font-size: clamp(1.25rem, 2.2vw, 2.2rem); letter-spacing: .1em; text-transform: uppercase; color: var(--ice); }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.2vh; counter-reset: step; }
.steps li { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 1.6vw; font-family: var(--font-serif); font-size: clamp(1.5rem, 2.7vw, 3rem); line-height: 1.25; text-wrap: pretty; }
.steps li::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 1.7em; height: 1.7em; margin-top: -.1em;
  font-family: var(--font-sans); font-size: .9em; font-weight: 600;
  border: 2px solid var(--sky); color: var(--white); border-radius: 50%;
}

/* Ladder */
.ladder { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 1100px; display: grid; gap: 1.2vh; counter-reset: rung; }
.ladder li { display: grid; grid-template-columns: auto 1fr; column-gap: 1.6vw; align-items: center; padding-bottom: 1vh; border-bottom: 1px solid #8BAEBA33; }
.ladder li::before {
  counter-increment: rung; content: counter(rung); grid-row: 1 / 3;
  display: grid; place-items: center; width: 1.7em; height: 1.7em; font-size: clamp(1.3rem, 2.4vw, 2.6rem);
  border: 2px solid var(--sky); color: var(--white); font-weight: 600; border-radius: 50%;
}
.ladder strong { font-size: clamp(1.4rem, 2.8vw, 3.2rem); line-height: 1.15; }
.ladder span { color: var(--ice); font-family: var(--font-serif); font-size: clamp(1.25rem, 2.2vw, 2.4rem); line-height: 1.3; }   /* 28px at 1280: about 14px in a Meet tile */
.ladder li.later { margin-top: 1.2vh; padding-top: 1.4vh; border-top: 1px dashed #8BAEBA66; }
.ladder li.later::before { border-style: dashed; color: var(--ice); }

/* Embed */
.kind-embed { grid-template-rows: auto 1fr; justify-items: stretch; align-content: stretch; padding-top: max(56px, 8vh); padding-bottom: 2vh; }   /* the frame gets the height: the starter inside fits whole */
.embed-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1vh 2vw; }
.embed { width: 100%; height: 100%; min-height: 40vh; border: 0; border-radius: 8px; background: var(--deep); }
.caption { margin: 0; max-width: 34em; font-family: var(--font-serif); font-size: clamp(1.25rem, 2.2vw, 2.4rem); color: var(--ice); }

/* Awards */
.awards { list-style: none; margin: 1vh 0 0; padding: 0; width: 100%; display: grid; gap: 2vw; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-rows: auto; }
.awards li { display: grid; grid-template-rows: auto auto 1fr; align-content: start; padding: 3vh 2vw; border-radius: 8px; background: var(--raised); border: 1px solid #45627D; }
.award-icon { display: block; width: 1.4em; height: 1.4em; margin-bottom: 2vh; font-size: clamp(1.6rem, 3vw, 3rem); color: var(--sky); }
.award-icon svg { width: 100%; height: 100%; }
.awards strong { display: block; font-size: clamp(1.3rem, 2.3vw, 2.5rem); line-height: 1.15; }
.awards span:not(.award-icon) { display: block; margin-top: 1vh; color: var(--ice); font-family: var(--font-serif); font-size: clamp(1.25rem, 2.1vw, 2.3rem); line-height: 1.3; }

/* Code: the words a person chose are the slide's point, so they wear the accent */
.code {
  margin: 0; max-width: 100%; padding: 3vh 3vw; border-radius: 8px;
  background: var(--deep); border: 1px solid #45627D; color: var(--ice);
  font: clamp(1rem, 2vw, 2.2rem)/1.5 var(--font-mono);
  white-space: pre-wrap; overflow-x: auto;
}
.code .str { color: var(--accent); }

/* Quote */
.kind-quote { align-content: center; justify-items: center; text-align: center; padding-top: 6vh; }
.quote { margin: 0; max-width: 20ch; font-size: clamp(2.6rem, 6.4vw, 7rem); font-weight: 600; line-height: 1.12; text-wrap: balance; }
.quote::before { content: "\201C"; display: block; color: var(--accent); font-size: 1.4em; line-height: .6; }

/* Plan: the morning at a glance */
.plan { list-style: none; margin: 0; padding: 0; display: grid; gap: .9vh; width: 100%; max-width: 1100px; }
.plan li { display: grid; grid-template-columns: 5.5em 1fr auto; align-items: baseline; gap: 1.6vw; font-size: clamp(1.15rem, 1.8vw, 2rem); padding-bottom: .7vh; border-bottom: 1px solid #8BAEBA33; }
/* Seven parts and the address share one screen: the address steps down a size so the list keeps the room */
.kind-plan .url { font-size: clamp(1.1rem, 2.1vw, 2.4rem); }
.plan .length { color: var(--ice); font-weight: 600; font-variant-numeric: tabular-nums; }
.plan span:not(.length) { color: var(--ice); font-size: .8em; }

/* Timer: on screens that ask for one. Ready and paused are dim; running is full cream; time's up is copper. */
.timer { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 2vw; row-gap: 1vh; margin-top: 1vh; }
.timer-display { grid-row: span 2; margin: 0; font-size: clamp(3.5rem, 9vw, 9.5rem); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: var(--white); transition: opacity 240ms ease, color 240ms ease; }
.timer[data-state="Paused"] .timer-display { opacity: .55; }   /* full strength when ready or running; dim only when stopped mid-turn */
.timer.done .timer-display { color: var(--sun); opacity: 1; }
.timer-status { margin: 0; font-size: clamp(1rem, 1.6vw, 1.6rem); font-weight: 600; color: var(--ice); text-transform: uppercase; letter-spacing: .1em; }
.timer-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.timer-buttons button {
  min-height: 40px; padding: 8px 16px; font: inherit; font-size: clamp(.95rem, 1.3vw, 1.2rem); font-weight: 600; cursor: pointer;
  color: var(--white); background: transparent; border: 1.5px solid var(--edge); border-radius: 4px;
  transition: background-color 120ms ease;
}
.timer-buttons button:hover { background: var(--raised); }
.timer-buttons button:active { transform: translateY(1px); }
.timer-buttons .timer-go { min-width: 7.5em; background: var(--white); border-color: var(--white); color: var(--deep); }
.timer-buttons .timer-go:hover { background: #EAE5DB; }
.timer-buttons .timer-reset { margin-left: 12px; border-color: transparent; color: var(--ice); }
.has-timer.kind-pair .pair div { padding: 2.5vh 2.5vw; }

/* Pair */
.pair { width: 100%; display: grid; gap: 2vw; grid-template-columns: 1fr 1fr; }
.pair div { padding: 4vh 3vw; border-radius: 8px; background: var(--raised); border: 1px solid #45627D; }
.pair h3 { margin: 0; font-size: clamp(2rem, 4.4vw, 4.8rem); color: var(--white); }
.pair p { margin: 1.5vh 0 0; font-family: var(--font-serif); font-size: clamp(1.25rem, 2.2vw, 2.4rem); color: var(--ice); }

/* ---------- The rail along the bottom ---------- */
.rail {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--rail);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 2vw; background: var(--deep); border-top: 1px solid #45627D;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
}
.rail p { margin: 0; display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.rail-title { font-weight: 600; }
.rail-length::before, .rail-where::before { content: " · "; }
.rail-mark { width: auto; height: 36px; }
/* The author's signature, lower left: his mark, his name, and the license, quieter than the part's name */
.rail-sign { display: flex; align-items: center; gap: 10px; color: var(--ice); font-size: .78em; font-weight: 500; }
.rail-sign + span { padding-left: 14px; border-left: 1px solid #45627D; }
@media (max-width: 1000px) and (min-width: 761px) { #rail-sign { display: none; } }   /* a narrow window keeps the mark and the part's name */
.rail-right span + span { padding-left: 14px; border-left: 2px solid #8BAEBA55; color: var(--ice); }
/* Room on the right of the rail for the session clock in its corner */
.rail-right { padding-right: 12.5em; color: var(--ice); font-variant-numeric: tabular-nums; }
/* How far into the session: a thin line along the top of the rail */
.rail::before { content: ""; position: absolute; left: 0; top: -2px; height: 4px; width: var(--elapsed, 0%); background: var(--sky); }

/* ---------- Controls: the presenter's, grouped, at the top right ---------- */
.controls { position: fixed; top: 12px; right: 12px; z-index: 30; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.controls button {
  min-height: 40px; padding: 8px 14px; font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
  color: var(--white); background: var(--deep); border: 1.5px solid var(--edge); border-radius: 4px;
  transition: background-color 120ms ease;
}
.controls button:hover { background: var(--raised); }
.controls button:active { transform: translateY(1px); }
.controls .away { margin-right: 12px; background: transparent; border-color: #FFFFFF59; }   /* outlined like the rest, set apart by the gap */
.controls .pair-buttons { display: flex; gap: 4px; }
/* The keys, once per browser session, above the rail and over nothing on the slide */
.keys {
  position: fixed; left: 50%; bottom: calc(var(--rail) + 12px); transform: translateX(-50%); z-index: 25; margin: 0;
  padding: 6px 16px; border-radius: 999px; background: var(--deep); border: 1px solid #45627D; color: var(--ice); font-size: .9rem; white-space: nowrap;
  animation: fade 400ms ease 6s forwards;
}
.keys kbd { font: inherit; font-weight: 600; color: var(--white); padding: 0 6px; border: 1px solid #45627D; border-bottom-width: 2px; border-radius: 4px; }
@keyframes fade { to { opacity: 0; visibility: hidden; } }

/* ---------- The session clock ----------
   One element, three places: big on the opening screen (hero), small in the rail's corner, and large
   above the stage when clicked (open). present.js moves it between them with transforms in about 360ms.
   Open, it's a pane of frosted glass: navy to sky across the diagonal, shaded toward its foot, and the
   stage shows through it softly. */
.session-clock {
  position: fixed; z-index: 20; right: 2vw; bottom: 12px;
  display: grid; justify-items: end; gap: .3em;
  font-size: clamp(1rem, 1.6vw, 1.45rem);
  padding: .2em .4em; border-radius: 18px;
  border: 1px solid transparent; background-color: transparent;
  transition: border-color 300ms ease, background-color 300ms ease, box-shadow 300ms ease;
}
/* The glass itself: a layer that fades in as the clock opens, so the move and the material arrive together */
.session-clock::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0;
  background-image: linear-gradient(43deg, #20384FD9 0%, #2E4B66BF 46%, #608C9B73 100%);
  transition: opacity 300ms ease;
}
.sc-face {
  display: flex; align-items: baseline; gap: .45em; padding: .15em .5em; font: inherit; color: var(--white);
  background: none; border: 0; border-radius: 12px; cursor: pointer;
  transition: background-color 120ms ease;
}
.sc-face:hover { background: #FFFFFF14; }
.sc-time { font-weight: 600; font-variant-numeric: tabular-nums; transition: color 300ms ease; }
.sc-label { color: var(--ice); font-weight: 600; font-size: .8em; white-space: nowrap; }
.session-clock[data-state="over"] .sc-time { color: var(--sun); }
.sc-actions, .sc-wait { display: none; }

/* Corner: in the rail, as a quiet pill. Filled means the two hours are running; outlined means not yet. */
.session-clock[data-mode="corner"] .sc-face { background: #FFFFFF0F; border: 1px solid #FFFFFF1C; border-radius: 999px; }
.session-clock[data-mode="corner"] .sc-face:hover { background: #FFFFFF1F; }
.session-clock[data-mode="corner"][data-state="ready"] .sc-face, .session-clock[data-mode="corner"][data-state="paused"] .sc-face { background: transparent; border-color: #FFFFFF40; }
.session-clock[data-mode="corner"][data-state="ready"] .sc-time, .session-clock[data-state="paused"] .sc-time { color: var(--ice); }
/* A running wait keeps a small pill of its own beside it, inside the rail, never on the slide */
.session-clock[data-mode="corner"] { grid-auto-flow: column; align-items: center; }
body:has(.session-clock.waiting[data-mode="corner"]) .rail-right { padding-right: 22em; }   /* the counter steps left of both pills */
.session-clock[data-mode="corner"] .sc-wait:not([hidden]) {
  display: flex; order: -1; align-items: baseline; gap: .4em; padding: .15em .7em; border-radius: 999px;
  background: #20384FCC; border: 1px solid #DCAD8866; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  animation: sc-rise 240ms var(--curve);
}
.session-clock[data-mode="corner"] .sc-wait-label { font-size: .65em; }
.session-clock[data-mode="corner"] .sc-wait-time { font-size: 1em; }

/* Hero: the opening screen, big and waiting for the call to order, on the right, opposite the words */
.session-clock[data-mode="hero"] { right: 7vw; bottom: 14vh; font-size: clamp(1.1rem, 2.2vw, 2.6rem); justify-items: end; text-align: right; }
.session-clock[data-mode="hero"] .sc-face { flex-direction: column; align-items: flex-end; gap: 0; padding: 0; }
.session-clock[data-mode="hero"] .sc-time { color: var(--accent); font-size: 1.6em; }
.session-clock[data-mode="hero"] .sc-actions { display: flex; }
.session-clock[data-mode="hero"] .sc-waits, .session-clock[data-mode="hero"] .sc-close { display: none; }

/* Open: large, above the stage on frosted glass. The glass holds only what the room reads, the time and any wait;
   the presenter's buttons sit just beneath it and fade with the rest of the controls. The pane is anchored by its
   foot, so a wait rising in above the time moves neither the time nor the buttons.
   The inset shadows shade the foot of the pane, the hairline at the top catches the light, and the stacked
   shadows beneath lift it off the stage. */
.session-clock[data-mode="open"] {
  inset: auto 0 calc(var(--rail) + 3vh + 3.4em); margin: 0 auto; width: max-content; height: max-content; max-width: 94vw;
  font-size: clamp(1.8rem, min(4.2vw, 6.4vh), 4.4rem); padding: .7em 1.1em .8em; border-radius: 28px; gap: .4em; justify-items: center;
  background-color: #20384F73; border-color: #FFFFFF2E;
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  box-shadow:
    #FFFFFF26 0 1px 0 0 inset,
    #0000002B 0 -23px 25px 0 inset, #00000026 0 -36px 30px 0 inset, #0000001A 0 -79px 40px 0 inset,
    #0000000F 0 2px 1px, #00000017 0 4px 2px, #00000017 0 8px 4px, #00000017 0 16px 8px, #00000017 0 32px 16px;
}
.session-clock[data-mode="open"]::before { opacity: 1; }
.session-clock[data-mode="open"] .sc-face { gap: .35em; padding: .1em .5em; }
.session-clock[data-mode="open"] .sc-face:hover { background: #FFFFFF1A; }
.session-clock[data-mode="open"] .sc-time { font-size: 1.9em; line-height: 1; color: var(--accent); }
.session-clock[data-mode="open"] .sc-label { font-size: .5em; }
.session-clock[data-mode="open"] .sc-wait:not([hidden]) { display: grid; order: -1; justify-items: center; gap: .12em; animation: sc-rise 240ms var(--curve); }
.session-clock[data-mode="open"].waiting .sc-wait-time { font-size: 1.9em; color: var(--accent); }
.session-clock[data-mode="open"].waiting .sc-time { font-size: .9em; color: var(--ice); }
.session-clock[data-mode="open"].waiting .sc-label { font-size: .45em; }
.sc-wait-label { color: var(--ice); font-weight: 600; font-size: .42em; letter-spacing: .14em; text-transform: uppercase; }
.sc-wait-time { font-size: 1.4em; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: var(--white); transition: color 300ms ease; }
.sc-wait.done .sc-wait-time { color: var(--sun); }
/* Beneath the glass, two rows: the waits, then Call to order beside Make the clock small */
.session-clock[data-mode="open"] .sc-actions {
  display: grid; grid-template-columns: auto auto; grid-template-areas: "waits waits" "clock close";
  justify-content: center; align-items: center; gap: .7em .6em; font-size: .4em;
  position: absolute; top: calc(100% + 1.6em); left: 50%; translate: -50% 0; width: max-content;
}
.session-clock[data-mode="open"] .sc-clock-row { grid-area: clock; justify-content: flex-end; }
.session-clock[data-mode="open"] .sc-close { grid-area: close; justify-self: start; }
.session-clock[data-mode="open"] .sc-waits { grid-area: waits; grid-template-columns: auto repeat(5, minmax(4.4em, auto)); }
.session-clock[data-mode="open"] .sc-waits > span { grid-column: auto; margin-right: .5em; }
.sc-actions button {
  white-space: nowrap; min-height: 2.6em; padding: .45em 1em; font: inherit; font-weight: 600; cursor: pointer;
  color: var(--white); background: #14243499; border: 1.5px solid var(--edge); border-radius: 6px;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.sc-actions button:hover { background: #2E4B66E6; }
.sc-actions button:active { transform: translateY(1px); }
.sc-actions .sc-start { background: var(--white); border-color: var(--white); color: var(--deep); }
.sc-actions .sc-start:hover { background: #EAE5DB; }
/* Call to order, Pause, and a quiet Reset that asks twice */
.sc-clock-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4em; }
.session-clock[data-mode="hero"] .sc-clock-row { font-size: .8em; justify-content: flex-end; }
.sc-actions #sc-reset { min-width: 12em; margin-left: .8em; background: transparent; border-color: transparent; color: var(--ice); text-decoration: underline; text-underline-offset: .2em; }
.sc-actions #sc-reset.confirm { color: var(--accent); border-color: var(--accent); text-decoration: none; }
/* The wait buttons: one labeled, even row; Clear stays in place, quiet when there's nothing to clear */
.sc-waits { display: grid; grid-template-columns: repeat(5, minmax(4.4em, auto)); align-items: center; gap: .4em; }
.sc-waits > span { grid-column: 1 / -1; justify-self: center; color: var(--ice); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .85em; }
.sc-actions .sc-waits button[aria-pressed="true"] { background: var(--white); border-color: var(--white); color: var(--deep); }   /* outranks hover, so the wait that's on stays legible under the pointer */
.sc-actions #sc-wait-clear { background: transparent; border-color: #FFFFFF59; }
.sc-actions #sc-wait-clear:disabled { opacity: .4; cursor: default; }
.sc-actions .sc-close { background: transparent; border-color: #FFFFFF33; color: var(--ice); }
.sc-actions .sc-close:hover { background: #FFFFFF14; color: var(--white); }
.sc-actions [hidden] { display: none; }
.sc-backdrop { position: fixed; inset: 0; z-index: 15; background: #142434B3; animation: sc-dim 240ms ease; }
/* While the clock is open, its buttons are the only ones: the stage's own stay out of sight behind the glass */
body:has(.session-clock[data-mode="open"]) .stage .presenter { visibility: hidden; }
.sc-backdrop[hidden] { display: none; }
@keyframes sc-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes sc-dim { from { opacity: 0; } }

/* ---------- A phone: a co-host following along ---------- */
@media (max-width: 760px) {
  :root { --rail: 92px; }
  .stage { padding: 84px 20px 4vh; }
  .kind-title { padding-right: 20px; padding-top: 72px; }
  .pair { grid-template-columns: 1fr; }
  /* On a phone the controls take two rows over the top of the screen, so they come on a toolbar of their own */
  .controls { left: 8px; right: 8px; top: 8px; padding: 8px; border-radius: 12px; background: #142434F2; box-shadow: 0 8px 24px #00000059; }
  .controls button { padding: 6px 10px; font-size: .85rem; white-space: nowrap; }
  .controls .away { margin-right: auto; }
  .keys { display: none; }
  /* The rail in two rows: the signature and the count; then the part and the clock */
  .rail { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; gap: 4px 12px; padding: 8px 12px; font-size: .85rem; }
  .rail .rail-left { display: contents; }
  .rail-sign { grid-column: 1; grid-row: 1; font-size: .78rem; }
  #rail-segment { grid-column: 1; grid-row: 2; display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 150px; }   /* clear of the clock pill */
  .rail-length { display: none; }
  body:has(.session-clock.waiting[data-mode="corner"]) #rail-segment { padding-right: 260px; }   /* a running wait takes the room */
  body:has(.session-clock.waiting[data-mode="corner"]) .rail-right { padding-right: 0; }
  .rail-sign + span { padding-left: 0; border-left: 0; }
  .rail-right { grid-column: 2; grid-row: 1; padding-right: 0; }
  .rail-mark { height: 32px; }   /* the mark's minimum */
  .rail-where { display: none; }
  .session-clock[data-mode="corner"] { right: 12px; bottom: 8px; font-size: .95rem; }
  .session-clock[data-mode="hero"] { right: 20px; bottom: calc(var(--rail) + 20px); }
  /* Each part in two lines: its name, then its length and room together */
  .plan li { grid-template-columns: auto 1fr; gap: 0 10px; }
  .plan li > :not(.length):not(span) { grid-column: 1 / -1; }
  .plan .length { order: 2; font-size: .8em; }
  .plan span:not(.length) { order: 3; font-size: .8em; }
  .timer { grid-template-columns: 1fr; }
  .timer-display { grid-row: auto; }
  .sc-waits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Thumb-sized buttons under the open clock, with the room they need beneath the glass */
  .session-clock[data-mode="open"] { bottom: calc(var(--rail) + 16px + 9em); }
  .session-clock[data-mode="open"] .sc-actions { font-size: .55em; grid-template-columns: auto; grid-template-areas: "clock" "waits" "close"; justify-items: center; }
  .session-clock[data-mode="open"] .sc-clock-row, .session-clock[data-mode="open"] .sc-close { justify-self: center; }
  .session-clock[data-mode="open"] .sc-waits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .session-clock[data-mode="open"] .sc-waits > span { grid-column: 1 / -1; margin-right: 0; }
  .url { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .presenter, .controls button, .sc-face, .sc-time, .sc-actions button, .session-clock, .session-clock::before, .timer-display { transition: none; }
  .sc-backdrop, .session-clock[data-mode] .sc-wait:not([hidden]) { animation: none; }
  .keys { animation: none; display: none; }
}