/* Ask Me Anything — app skin.
   Sits on top of sippis-shell.css, which owns the topbar, the page gradient,
   and the --primary / --secondary brand values. Everything here is the app:
   the ballot, the question list, the studio, the stage.

   One loud colour only: --hot marks what is happening right now (a live
   session, the question on the overlay). Teal marks what *you* chose. */

/* hidden means hidden, whatever display a component sets on itself. */
[hidden] { display: none !important; }

body.ama-app {
  --ink: #e9f1f3;
  --ink-dim: #a3b8bf;
  --ink-faint: #7d949c;
  --panel: rgba(255, 255, 255, 0.045);
  --panel-lift: rgba(255, 255, 255, 0.08);
  --line: rgba(150, 200, 208, 0.16);
  --line-strong: rgba(150, 200, 208, 0.32);
  --hot: var(--secondary, #F26430);
  --cool: var(--primary, #0EADB5);
  --field: #eef4f5;
  --field-ink: #10242c;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;

  display: block;
  text-align: start;
  background: #10242c;
  color: var(--ink);
  min-height: 100vh;
  font-size: 17px;
  line-height: 1.55;
}

.ama-wrap {
  width: min(1080px, calc(100% - 2.5rem));
  margin: 1.75rem auto 3.5rem;
}

.ama-foot {
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.85rem;
  padding: 1.5rem 1rem;
  border-top: 1px solid var(--line);
  margin-top: 3rem;
}

/* ---------- type ---------- */

h1 {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 620;
  margin: 0.1rem 0 0.7rem;
  max-width: 26ch;
}
h2 {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 600;
  margin: 2.4rem 0 0.6rem;
}
h3 { font-size: 1.08rem; line-height: 1.3; font-weight: 600; margin: 1.4rem 0 0.4rem; }
p { margin: 0.7rem 0; }

.lede {
  font-size: 1.14rem;
  line-height: 1.5;
  color: #cfe0e4;
  max-width: 62ch;
}
.muted { color: var(--ink-dim); }
small { display: block; color: var(--ink-faint); font-size: 0.82rem; line-height: 1.4; }
.hint { color: var(--ink-dim); font-size: 0.9rem; max-width: 60ch; }
.byline { color: var(--ink-faint); font-size: 0.9rem; }
.prose { max-width: 66ch; }
.prose p { margin: 0.9rem 0; }
.prose code { background: rgba(0, 0, 0, 0.3); padding: 0.08rem 0.32rem; border-radius: 4px; font-size: 0.9em; }

.ama-wrap a { color: #93e2e7; text-underline-offset: 0.18em; }
.ama-wrap a:hover { color: #c2f2f5; }

/* An empty screen is an invitation, so it gets a frame, not a whisper. */
.empty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: 1rem 1.1rem;
  color: var(--ink-dim);
  max-width: 60ch;
}

.banner {
  background: rgba(242, 100, 48, 0.14);
  border: 1px solid rgba(242, 100, 48, 0.4);
  color: #ffd2b8;
  padding: 0.75rem 1rem;
  border-radius: var(--r-md);
  margin: 0 0 1.25rem;
}

/* ---------- navigation ---------- */

/* The site menu lives in the Sippis top bar, between the brand and the
   account controls (render.php: ama_nav_apex / ama_nav_space). The lit item
   uses the same teal pill as .tabs a.on, so "where am I" reads the same at
   both levels. */
.topbar .topnav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin-inline-start: 1rem;
  font-size: 0.95rem;
  line-height: 1;
}
.topnav a {
  color: #b9c8cd;
  text-decoration: none;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.topnav a:hover { color: #f4f7f8; background: rgba(255, 255, 255, 0.07); }
.topnav a.on {
  background: var(--cool);
  border-color: var(--cool);
  color: #04222a;
  font-weight: 600;
}
.topnav .topnav-space { font-weight: 600; color: #f4f7f8; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
.topnav .topnav-space.on { color: #04222a; }
.topnav-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem;
  padding-inline-start: 0.7rem;
  margin-inline-start: 0.5rem;
  border-inline-start: 1px solid rgba(185, 200, 205, 0.22);
}
.topnav-label {
  color: #7d949c;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-inline-end: 0.3rem;
}
.topnav .topnav-platform { margin-inline-start: auto; }

/* Below this width the menu has no room beside the brand and the controls, so
   it takes a row of its own under them: brand and controls stay one row, the
   menu wraps rather than scrolling off the edge. */
/* A host's menu (space · Studio: Sessions Recordings Stage Page · Platform)
   runs out of room beside the brand and the controls earlier than a visitor's. */
@media (max-width: 1360px) {
  .topbar:has(> .topnav-long) {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) auto;
    align-items: center;
    row-gap: 0.35rem;
  }
  .topbar:has(> .topnav-long) .brand { justify-self: start; max-width: 100%; }
  .topbar:has(> .topnav-long) .topbar-actions { justify-self: end; }
  .topbar .topnav-long { grid-column: 1 / -1; grid-row: 2; margin-inline-start: -0.4rem; }
}
@media (max-width: 1000px) {
  .topbar:has(> .topnav) {
    display: grid;
    /* The brand gives way first (down to 8rem, as in sippis-shell.css); the
       controls keep their natural width and wrap inside their own box. */
    grid-template-columns: minmax(8rem, 1fr) auto;
    align-items: center;
    row-gap: 0.35rem;
  }
  .topbar:has(> .topnav) .brand { justify-self: start; max-width: 100%; }
  .topbar:has(> .topnav) .topbar-actions { justify-self: end; }
  .topbar .topnav { grid-column: 1 / -1; grid-row: 2; margin-inline-start: -0.4rem; }
  .topbar .topnav-platform { margin-inline-start: 0; }
}
@media (max-width: 640px) {
  .topbar .topnav { font-size: 0.84rem; gap: 0.05rem; }
  .topnav a { padding: 0.42rem 0.5rem; }
  .topnav-group { padding-inline-start: 0.4rem; margin-inline-start: 0.2rem; }
  .topnav-label { display: none; }
}

/* A section with pages of its own (Stage) gets a strip right under the bar. */
.subbar {
  width: 100%;
  background: rgba(10, 30, 38, 0.35);
  border-bottom: 1px solid var(--line);
}
.subbar-in {
  width: min(1080px, calc(100% - 2.5rem));
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.55rem 0;
}
.subbar a {
  color: var(--ink-dim);
  text-decoration: none;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  font-size: 0.93rem;
}
.subbar a:hover { color: var(--ink); background: var(--panel); }
.subbar a.on { color: var(--ink); border-color: var(--cool); background: rgba(14, 173, 181, 0.14); font-weight: 600; }
.subbar .count {
  display: inline-block;
  min-width: 1.4em;
  margin-inline-start: 0.3rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--panel-lift);
  color: var(--ink-dim);
  font-size: 0.78rem;
  text-align: center;
  font-weight: 600;
}

.tabs {
  display: flex;
  gap: 0.3rem;
  margin: 0.9rem 0 1.6rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.tabs::-webkit-scrollbar { display: none; }
/* On a phone a row that scrolls sideways with no scrollbar reads as a row
   that ends where the screen does — the sixth tab simply does not exist.
   Wrapping shows them all. */
@media (max-width: 700px) {
  .tabs { flex-wrap: wrap; overflow-x: visible; }
}
.tabs a {
  color: var(--ink-dim);
  text-decoration: none;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
  font-size: 0.93rem;
}
.tabs a:hover { color: var(--ink); background: var(--panel); }
.tabs a.on {
  background: var(--cool);
  border-color: var(--cool);
  color: #04222a;
  font-weight: 600;
}

/* ---------- buttons ---------- */

.btn,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--hot);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.62rem 1.25rem;
  text-decoration: none;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: filter 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { filter: brightness(1.08); color: #fff; }
.btn:active { filter: brightness(0.95); }
.btn.ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
  font-weight: 500;
}
.btn.ghost:hover { background: var(--panel-lift); filter: none; }
.btn.small { padding: 0.35rem 0.8rem; font-size: 0.86rem; }
/* `.ama-wrap a` (the link colour) outranks `.btn`, which turned every button
   that is a link pale cyan on orange. A button reads as a button. */
.ama-wrap a.btn, .ama-wrap a.btn:hover { color: #fff; }
.ama-wrap a.btn.ghost, .ama-wrap a.btn.ghost:hover { color: var(--ink); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid #7fe3ea;
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---------- forms ---------- */

form.stack,
.panel {
  display: grid;
  gap: 1rem;
  max-width: 44rem;
  margin: 1.2rem 0 1.6rem;
  padding: 1.35rem 1.4rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
form.stack > button,
form.stack > .actions { justify-self: start; }

label { display: grid; gap: 0.3rem; font-size: 0.94rem; color: #d3e3e7; }
label > small { margin-top: -0.05rem; }

input, textarea, select {
  font: inherit;
  color: var(--field-ink);
  background: var(--field);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 0.58rem 0.72rem;
  width: 100%;
  max-width: 100%;
}
input[type="number"] { max-width: 11rem; }
input[type="date"], input[type="datetime-local"] { max-width: 18rem; }
select { max-width: 24rem; }
textarea { line-height: 1.5; resize: vertical; }
input::placeholder, textarea::placeholder { color: #7a8e95; }

input[type="checkbox"], input[type="radio"] {
  width: auto;
  accent-color: var(--cool);
  min-width: 1.1rem;
  min-height: 1.1rem;
}
.check {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  color: var(--ink);
}
input[type="file"] { background: transparent; color: var(--ink); padding-inline-start: 0; }

fieldset {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1rem 1.1rem 1.15rem;
  margin: 0;
  display: grid;
  gap: 0.9rem;
}
legend {
  padding: 0 0.45rem;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.95rem;
}
.weekdays {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
}
.weekdays .check { font-size: 0.92rem; }

/* Only one half of the schedule form applies at a time. Driven by the select
   itself, so it holds up even if the script never arrives; browsers without
   :has() simply show both halves, which is still usable. */
#plan-form:has(#plan-mode option[value="poll"]:checked) .mode-block[data-mode="fixed"],
#plan-form:has(#plan-mode option[value="fixed"]:checked) .mode-block[data-mode="poll"] {
  display: none;
}

.actions { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.9rem 0; }

/* ---------- tags ---------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.18rem 0.62rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink-dim);
  background: rgba(255, 255, 255, 0.05);
}
.tag-go { color: #8fe6ec; border-color: rgba(14, 173, 181, 0.45); background: rgba(14, 173, 181, 0.14); }
.tag-past { color: #b9c8cd; }
.tag-off { color: #9aa7ac; background: transparent; }
.tag-live {
  color: #fff;
  background: var(--hot);
  border-color: var(--hot);
}
.tag-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
  .tag-live::before { animation: none; }
}
.card-tags, .q-tags, .session-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.15rem 0 0; }

/* ---------- hero ---------- */

.hero-block { margin-bottom: 2.2rem; }
.hero-points {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 0;
  display: grid;
  gap: 0.9rem;
  max-width: 62ch;
}
.hero-points li {
  padding-inline-start: 1.1rem;
  border-inline-start: 2px solid var(--cool);
  color: var(--ink-dim);
}
.hero-points strong { color: var(--ink); font-weight: 600; }
.kicker { color: var(--cool); font-size: 0.95rem; margin-bottom: 0.2rem; }

.hero-mark { display: block; margin: 0 0 1.1rem; }
.hero-block .actions { margin-top: 1.6rem; }

/* A sequence, so it is numbered; the number is the structure, not decoration. */
.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 1.4rem 0 0;
  display: grid;
  gap: 1.5rem;
  max-width: 64ch;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0.2rem 1rem;
}
.steps li::before {
  content: counter(step);
  grid-row: 1 / span 2;
  font-size: 1.15rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--cool);
  border-inline-end: 2px solid var(--line);
  padding-inline-end: 0.9rem;
  line-height: 1.5;
}
.steps h3 { margin: 0 0 0.15rem; font-size: 1.05rem; }
.steps p { margin: 0; color: var(--ink-dim); }

.price-cards .card strong { font-size: 1.12rem; color: #b6f0f4; }
.showcase .card.wide { max-width: 44rem; }
.closer { border-top: 1px solid var(--line); margin-top: 3rem; padding-top: 0.5rem; }

/* ---------- cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 1rem;
  margin: 1.2rem 0;
}
.cards .card { margin-top: 0; }
.card {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  padding: 1rem 1.1rem;
  border-radius: var(--r-lg);
  background: var(--panel);
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--line);
  width: auto;
}
a.card { transition: border-color 0.15s ease, background 0.15s ease; }
a.card:hover { border-color: var(--line-strong); background: var(--panel-lift); color: inherit; }
.card strong { font-size: 1.05rem; line-height: 1.25; }
.card span { color: var(--ink-dim); font-size: 0.92rem; }
.card img {
  width: 100%;
  height: 148px;
  object-fit: cover;
  object-position: center 30%;
  border-radius: var(--r-md);
  margin-bottom: 0.25rem;
}
.cover {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  display: block;
  margin: 0.4rem 0 1.4rem;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  padding: 0;
  margin: 0.8rem 0 1.4rem;
  list-style: none;
  color: var(--ink-dim);
  font-size: 0.93rem;
}
.facts strong { color: var(--ink); font-weight: 600; }

/* ---------- timezone bar ---------- */

.tzbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.7rem 0.9rem;
  margin: 0 0 1.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-size: 0.92rem;
  color: var(--ink-dim);
  width: fit-content;
  max-width: 100%;
}
.tzbar label { display: inline; font-size: inherit; color: inherit; }
.tzbar select {
  width: auto;
  max-width: 14rem;
  padding: 0.32rem 0.5rem;
  font-size: 0.92rem;
}

/* ---------- the ballot ---------- */

.when h2 { margin-top: 0.5rem; }
.ballot { max-width: 46rem; padding: 0; background: none; border: 0; display: block; }
.day {
  margin: 1.7rem 0 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-dim);
}
.slots { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }

/* ---------- the calendar ---------- */

.cal-months {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.5rem 2rem;
  margin: 1.4rem 0 1.8rem;
  max-width: 46rem;
}
.cal-title {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-dim);
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-dow {
  text-align: center;
  font-size: 0.72rem;
  color: var(--ink-faint);
  padding-bottom: 0.3rem;
}
.cal-pad { aspect-ratio: 1; }
.cal-day {
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  gap: 3px;
  font: inherit;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-faint);
  padding: 0;
}
.cal-day.empty-day { opacity: 0.4; }
/* A day with hours on offer is the only thing you can press. */
button.cal-day.has {
  color: var(--ink);
  background: rgba(14, 173, 181, 0.12);
  border-color: rgba(14, 173, 181, 0.3);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
button.cal-day.has:hover { background: rgba(14, 173, 181, 0.24); border-color: var(--cool); }
button.cal-day.on {
  background: var(--cool);
  border-color: var(--cool);
  color: #04222a;
  font-weight: 650;
}
.cal-day.today { box-shadow: inset 0 0 0 1px var(--line-strong); }
button.cal-day.on.today { box-shadow: none; }
/* One dot per hour on that day; filled once you have picked one. */
.cal-dots { display: flex; gap: 2px; justify-content: center; height: 4px; }
.cal-dots::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}
button.cal-day.picked .cal-dots::before { opacity: 1; box-shadow: 0 0 0 2px rgba(242, 100, 48, 0.55); }
button.cal-day.picked { border-color: var(--hot); }
button.cal-day.on.picked { border-color: var(--hot); }

.day-panels { max-width: 46rem; }
.js .day-panel { display: none; }
.js .day-panel.on { display: block; }
.day-panel .day { margin-top: 0; }

.picks {
  margin: 1.8rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  max-width: 46rem;
}
.picks h3 { margin: 0 0 0.6rem; font-size: 1rem; }
.pick-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.35rem;
}
.pick-list li {
  padding: 0.5rem 0.8rem;
  border-radius: var(--r-sm);
  border: 1px solid rgba(242, 100, 48, 0.35);
  background: rgba(242, 100, 48, 0.08);
  font-size: 0.93rem;
}
.pick-list:empty { display: none; }
.board { max-width: 46rem; margin-top: 1.6rem; }
.board summary { padding: 0.4rem 0; }

/* The row itself is the bar: --w is the share of the vote this hour holds. */
.slot {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(14, 173, 181, 0.22) var(--w, 0%), rgba(255, 255, 255, 0.035) var(--w, 0%));
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.slot:hover { border-color: var(--line-strong); }
.slot:has(input:checked) {
  border-color: var(--cool);
  box-shadow: inset 0 0 0 1px var(--cool);
}
.slot:has(input:focus-visible) { outline: 2px solid #7fe3ea; outline-offset: 2px; }
.slot-time { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -0.01em; }
.slot-zone { color: var(--ink-faint); font-size: 0.8rem; font-weight: 400; margin-inline-start: 0.35rem; }
.slot-votes {
  color: var(--ink-dim);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.slot.past { opacity: 0.45; cursor: default; }
.slots.plain li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.93rem;
  color: var(--ink-dim);
}

/* ---------- confirmed sessions ---------- */

.session-card { gap: 0.6rem; }
.session-when { margin: 0; display: grid; gap: 0.15rem; }
.session-when strong { font-size: 1.02rem; }
.session-hour { font-variant-numeric: tabular-nums; color: var(--ink-dim); }
.session-cal { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0; font-size: 0.9rem; }
.next-up {
  border-inline-start: 3px solid var(--cool);
  padding: 0.2rem 0 0.2rem 1.1rem;
  margin: 1.4rem 0 1.8rem;
}
.next-line { font-size: 1.05rem; margin-top: 0; }

/* ---------- questions ---------- */

#questions { max-width: 50rem; margin-top: 1.2rem; }
.q {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--line);
}
.q:last-child { border-bottom: 1px solid var(--line); }
.q h3 { margin: 0 0 0.3rem; font-size: 1.1rem; }
.q .prose p { margin: 0.4rem 0; }
.q-body { min-width: 0; }
.q .byline { margin-bottom: 0; }

button.vote {
  display: grid;
  gap: 0.1rem;
  align-content: center;
  justify-items: center;
  min-width: 3.6rem;
  padding: 0.5rem 0.4rem;
  align-self: start;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
button.vote:hover { background: var(--panel-lift); border-color: var(--cool); }
button.vote .count { font-size: 1.2rem; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.1; }
button.vote .vote-label { font-size: 0.72rem; color: var(--ink-faint); }
button.vote[data-on="1"] {
  background: rgba(14, 173, 181, 0.16);
  border-color: var(--cool);
  color: #b6f0f4;
}
button.vote[data-on="1"] .vote-label { color: #8fe6ec; }

.links { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.6rem 0; }
.links a {
  font-size: 0.85rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  text-decoration: none;
}
.links a:hover { background: var(--panel-lift); }

details { margin: 0.6rem 0 0; }
summary {
  cursor: pointer;
  color: var(--ink-dim);
  font-size: 0.88rem;
  width: fit-content;
}
summary:hover { color: var(--ink); }
details[open] > summary { margin-bottom: 0.4rem; }
details p { margin: 0.3rem 0; color: var(--ink-dim); font-size: 0.93rem; }

/* ---------- live ---------- */

.live {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.85fr);
  gap: 1.6rem;
  align-items: start;
  margin-top: 1.2rem;
}
.live.one-col { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
.live aside h2:first-child { margin-top: 0; }
.program {
  min-height: 300px;
  border-radius: var(--r-lg);
  display: grid;
  place-content: center;
  gap: 0.6rem;
  text-align: center;
  padding: 1.6rem;
  border: 1px solid var(--line);
  background: radial-gradient(120% 90% at 30% 15%, rgba(14, 173, 181, 0.32), rgba(18, 55, 68, 0.6) 55%, rgba(26, 43, 60, 0.75));
}
.program-note { color: #d2e4e8; max-width: 38ch; margin: 0 auto; }
.layout-name { color: var(--ink-faint); font-size: 0.82rem; margin: 0; }

.overlay {
  margin: 0 0 0.8rem;
  background: rgba(8, 18, 24, 0.9);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--hot);
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-md);
}
.overlay strong {
  display: block;
  font-size: 0.78rem;
  color: var(--hot);
  margin-bottom: 0.2rem;
}
.overlay div { font-size: 1.25rem; line-height: 1.25; font-weight: 600; }

.stage-status { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.9rem; font-size: 0.92rem; }

.rundown { list-style: none; counter-reset: q; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.rundown li {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.5rem 0.6rem;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
}
.rundown li:hover { background: var(--panel); }
.rundown li.on { border-color: var(--hot); background: rgba(242, 100, 48, 0.1); }
.rundown-votes {
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  font-size: 0.85rem;
  text-align: end;
}
.rundown-title { font-size: 0.95rem; }
button.activate {
  text-align: start;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
}
button.activate:hover { color: #b6f0f4; }

#chat {
  max-height: 340px;
  overflow: auto;
  display: grid;
  gap: 0.35rem;
  align-content: start;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, 0.16);
  min-height: 6rem;
}
/* A chat line: who, what, and — for the host — a way to stop them. */
.chat-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 0.4rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--r-sm);
  font-size: 0.92rem;
  line-height: 1.35;
  border-inline-start: 2px solid transparent;
}
.chat-line:hover { background: rgba(255, 255, 255, 0.035); }
.chat-who {
  grid-column: 1;
  grid-row: 1;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: #8fe6ec;
  white-space: nowrap;
  justify-self: start;
}
.chat-body {
  grid-column: 1;
  grid-row: 2;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.chat-line.blocked { opacity: 0.45; border-inline-start-color: var(--hot); }
.chat-line.blocked .chat-body { text-decoration: line-through; }
.chat-block {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  /* Visible without hovering: on a touch screen there is no hover, and a host
     moderating from a phone needs to see it. */
  opacity: 0.4;
  transition: opacity 0.12s ease;
}
.chat-line:hover .chat-block,
.chat-block:focus-visible { opacity: 1; }
.chat-block:hover { color: var(--hot); border-color: var(--hot); }
.chat-line.blocked .chat-block { opacity: 1; }
.chat-note { margin: 0.4rem 0 0; font-size: 0.84rem; color: var(--hot); }
@media (prefers-reduced-motion: reduce) { .chat-block { transition: none; } }
.chat-form { display: flex; gap: 0.5rem; margin: 0.6rem 0 0; }
.chat-form input { flex: 1; }

video { width: 100%; border-radius: var(--r-lg); background: #000; display: block; }

/* A replay in parts: one pill per run, the current one lit. */
.parts { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 1rem; }
.parts a {
  color: var(--ink-dim); text-decoration: none; padding: 0.35rem 0.8rem; border-radius: 999px;
  border: 1px solid var(--line); font-size: 0.9rem;
}
.parts a:hover { color: var(--ink); background: var(--panel); }
.parts a.on { color: #062028; background: var(--cool); border-color: var(--cool); font-weight: 600; }

/* The replay: the picture and its markers, and beside them the chat on the
   same clock. One column when there was no chat, or on a phone. */
.replay {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.85fr);
  gap: 1.6rem;
  align-items: start;
}
.replay.one-col { grid-template-columns: minmax(0, 1fr); }
.replay-side h2 { margin-top: 0; }
.replay-chat {
  list-style: none;
  padding: 0.5rem;
  margin: 0 0 0.6rem;
  max-height: 480px;
  overflow: auto;
  display: grid;
  gap: 0.35rem;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, 0.18);
}
.replay-chat .chat-line { grid-template-columns: auto 1fr; }
.replay-chat .chat-at { grid-column: 1; grid-row: 1; font-variant-numeric: tabular-nums; color: var(--ink-faint); font-size: 0.78rem; }
.replay-chat .chat-who { grid-column: 2; grid-row: 1; }
.replay-chat .chat-body { grid-column: 1 / span 2; grid-row: 2; }
.replay-chat-note { margin: 0 0 0.5rem; font-size: 0.85rem; }
@media (max-width: 860px) { .replay { grid-template-columns: minmax(0, 1fr); } }

.cues { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.3rem; max-width: 40rem; }
button.cue {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 0.8rem;
  align-items: baseline;
  width: 100%;
  text-align: start;
  padding: 0.6rem 0.7rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
button.cue:hover { border-color: var(--cool); background: var(--panel-lift); }
.cue-at { font-variant-numeric: tabular-nums; color: #8fe6ec; font-size: 0.88rem; }
.cue-title { font-size: 0.95rem; }

/* ---------- narrow screens ---------- */

@media (max-width: 860px) {
  .live { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  body.ama-app { font-size: 16px; }
  .ama-wrap { width: calc(100% - 1.6rem); margin-top: 1.25rem; }
  form.stack, .panel { padding: 1.1rem; border-radius: var(--r-md); }
  .slot { padding: 0.75rem 0.85rem; }
  /* Every row the same height: the offset always takes its own line. */
  .slot-zone { display: block; margin-inline-start: 0; }
  .q { grid-template-columns: auto 1fr; gap: 0.75rem; }
  button.vote { min-width: 3.1rem; }
  .tzbar { border-radius: var(--r-md); }
}

/* ---------- the confirmation step ---------- */

.waiting { max-width: 40rem; display: grid; gap: 0.9rem; margin: 1.2rem 0; }
.waiting form { margin: 0; }
.waiting .empty { margin: 0; }

/* ---------- the studio deck ---------- */

.program-canvas {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  background: #0c1e26;
  display: block;
}
.program:has(.program-canvas) { padding: 0.75rem; place-content: stretch; }

.studio-deck {
  display: grid;
  gap: 0.8rem;
  margin: 0.9rem 0 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
}
.deck-row { display: flex; flex-wrap: wrap; gap: 0.5rem 0.7rem; align-items: center; }
.deck-devices { gap: 0.5rem 1.2rem; }
.deck-devices label { font-size: 0.85rem; }
.deck-devices select { max-width: 15rem; padding: 0.35rem 0.5rem; font-size: 0.88rem; }
.deck-layouts { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.chip {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
}
.chip:hover { color: var(--ink); background: var(--panel-lift); }
.chip[aria-pressed="true"] {
  background: var(--cool);
  border-color: var(--cool);
  color: #04222a;
  font-weight: 600;
}
[data-cam][aria-pressed="true"] { border-color: var(--cool); color: #b6f0f4; }

.deck-rec { justify-content: flex-start; }

/* The deck folds. Each part remembers whether it was open, because a host
   sets the studio up once and then wants the screen back. */
.deck-part { border-top: 1px solid var(--line); padding-top: 0.55rem; }
.deck-part > summary {
  cursor: pointer;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  user-select: none;
}
.deck-part > summary::-webkit-details-marker { display: none; }
.deck-part > summary::before {
  content: "";
  width: 0.4rem; height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.deck-part[open] > summary::before { transform: rotate(45deg); }
.deck-part > summary:hover { color: var(--ink); }
.deck-part > .deck-row:first-of-type { margin-top: 0.55rem; }
.deck-part > .deck-row + .deck-row { margin-top: 0.5rem; }
@media (prefers-reduced-motion: reduce) {
  .deck-part > summary::before { transition: none; }
}

/* A detached panel: a small window the host can put where they want it. */
.deck-part > summary { position: relative; padding-inline-end: 1.6rem; }
.deck-pop {
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1;
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  opacity: 0.6;
}
.deck-part > summary:hover .deck-pop,
.deck-pop:focus-visible { opacity: 1; color: var(--ink); border-color: var(--line); }
.deck-part.floating {
  position: fixed;
  z-index: 40;
  width: min(24rem, calc(100vw - 2rem));
  max-height: 70vh;
  overflow: auto;
  margin: 0;
  padding: 0.6rem 0.9rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--panel-lift, #16323c);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}
.deck-part.floating > summary { cursor: grab; touch-action: none; }
.deck-part.floating.dragging { user-select: none; }
.deck-part.floating.dragging > summary { cursor: grabbing; }
@media (max-width: 700px) {
  /* A floating panel on a phone is in the way, not in reach. */
  .deck-part.floating { position: static; width: auto; box-shadow: none; max-height: none; }
  .deck-pop { display: none; }
}

/* A layout chip is a small picture of the arrangement, with its name beside it
   on a roomy deck and hidden on a narrow one. */
.chip.layout { display: inline-flex; align-items: center; gap: 0.4rem; padding-inline-start: 0.5rem; }
.layout-icon {
  width: 1.6rem;
  height: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.35);
  flex: none;
}
.chip.layout[aria-pressed="true"] .layout-icon { border-color: rgba(4, 34, 42, 0.45); }
/* An arrangement whose sources are not running: still shown, plainly not ready.
   Hiding these made the whole section disappear when one camera was on. */
.chip.layout.unavailable { opacity: 0.4; cursor: not-allowed; }
.chip.layout.unavailable .layout-icon { filter: grayscale(1); }
.chip.ratio { font-variant-numeric: tabular-nums; min-width: 3.1rem; }
/* The divider in the programme can be dragged. Say so on approach. */
.program-canvas.over-split { cursor: col-resize; }
.program-canvas.splitting { cursor: col-resize; user-select: none; }
.deck-ratios { align-items: center; }
.deck-share { align-items: center; }
.share-fallback { flex: 1; min-width: 12rem; font-size: 0.85rem; }
@media (max-width: 1100px) {
  .chip.layout .chip-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .chip.layout { padding: 0.3rem 0.5rem; }
}

/* Asking to be told. Two promises, each its own line, neither pre-ticked. */
.keep-me {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.9rem 1rem;
  margin: 0.2rem 0 0.6rem;
}
.keep-me legend { padding: 0 0.4rem; font-size: 0.86rem; color: var(--ink-dim); }
.keep-me .check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  margin: 0 0 0.6rem;
  cursor: pointer;
}
.keep-me .check input { margin-top: 0.2rem; }
.keep-me .check small { display: block; color: var(--ink-faint); font-size: 0.82rem; margin-top: 0.1rem; }
.keep-note { margin: 0; font-size: 0.82rem; }

/* Subtitles, across the foot of the picture. */
.program { position: relative; }
.subs {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0.9rem;
  width: min(92%, 46rem);
  pointer-events: none;
  text-align: center;
}
.subs p {
  display: inline-block;
  margin: 0;
  padding: 0.3rem 0.7rem;
  background: rgba(8, 14, 18, 0.82);
  border-radius: var(--r-sm);
  color: #fff;
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  line-height: 1.35;
  text-wrap: balance;
}
.lang-mini { font-size: 0.8rem; padding: 0.2rem 0.4rem; max-width: 8rem; }

/* Asking before something irreversible, in the page's own voice. */
.ask {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(6, 14, 18, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.ask-panel {
  width: min(30rem, 100%);
  padding: 1.3rem 1.4rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--panel-lift, #16323c);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: ask-in 0.14s ease-out;
}
@keyframes ask-in { from { opacity: 0; transform: translateY(6px) scale(0.99); } }
@media (prefers-reduced-motion: reduce) { .ask-panel { animation: none; } }
.ask-panel h2 { margin: 0 0 0.5rem; font-size: 1.12rem; line-height: 1.25; }
.ask-panel p { margin: 0 0 0.6rem; color: var(--ink-dim); font-size: 0.94rem; line-height: 1.45; }
.ask-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin: 1rem 0 0;
}
.btn.danger { background: #b23c19; }
.btn.danger:hover { background: #c74620; }

/* A card you can act on as well as open. */
.card-with-tools { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.card-with-tools .card-body {
  display: block;
  padding: 1rem 1.1rem 0.6rem;
  color: inherit;
  text-decoration: none;
  flex: 1;
}
.card-with-tools .card-body strong { display: block; margin-bottom: 0.25rem; }
.card-with-tools .card-body span { display: block; color: var(--ink-dim); font-size: 0.9rem; }
.card-with-tools .card-body:hover strong { color: var(--cool); }
.card-delete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  padding: 0.55rem 1.1rem 0.8rem;
  border-top: 1px solid var(--line);
}
.card-delete .check { font-size: 0.78rem; color: var(--ink-faint); margin: 0; }
/* The two ways out of the site, side by side under a card. */
.card-actions {
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
  padding: 0.55rem 0.8rem 0.7rem; border-top: 1px solid var(--line); margin: 0;
}
.card-actions form.inline { margin: 0; display: inline; }
.btn.danger { border-color: rgba(242, 100, 48, 0.5); color: #ffb08e; }
.btn.danger:hover { background: rgba(242, 100, 48, 0.15); border-color: var(--hot); color: #fff; }
.card.archived { opacity: 0.85; border-style: dashed; }
.danger-zone .card-actions { border-top: 0; padding-inline-start: 0; padding-inline-end: 0; }

/* The end of a page, where the irreversible things live. */
.danger-zone {
  margin: 2.4rem 0 0;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(242, 100, 48, 0.4);
  border-radius: var(--r-md);
  background: rgba(242, 100, 48, 0.06);
}
.danger-zone h2 { margin-top: 0; font-size: 1.05rem; }
.danger-zone .check { font-size: 0.86rem; }

/* Keys and jobs on the settings page. */
.prov-notes { font-size: 0.84rem; margin: 0.6rem 0 1.4rem; padding-inline-start: 1.1rem; }
.prov-notes li { margin-bottom: 0.25rem; }
.job-row {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.7rem 0.9rem;
  margin: 0 0 0.8rem;
}
.job-row legend { padding: 0 0.4rem; font-weight: 600; font-size: 0.92rem; }
.job-row .muted { margin: 0 0 0.5rem; font-size: 0.84rem; }
.job-row .row { align-items: end; gap: 0.7rem; }

/* Reading the room in another language. */
.lang-bar { margin-top: 0; margin-bottom: 0.5rem; }
.lang-label { font-size: 0.8rem; color: var(--ink-faint); white-space: nowrap; }
.lang-pick { display: inline-flex; align-items: center; gap: 0.4rem; }
.lang-pick select {
  font-size: 0.82rem;
  padding: 0.25rem 1.4rem 0.25rem 0.5rem;
  border-radius: 999px;
  max-width: 11rem;
}

/* A space's front page: logo, name, one line, links; then the sessions. */
.space-head { display: flex; gap: 1.4rem; align-items: center; margin: 0.4rem 0 1.2rem; }
.space-logo {
  width: 7.5rem; height: 7.5rem; object-fit: contain; flex: 0 0 auto;
  border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.06); padding: 0.6rem;
}
.space-id { min-width: 0; }
.space-id h1 { margin-bottom: 0.3rem; }
.space-id .lede { margin: 0 0 0.8rem; }
.space-links { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; }
.space-about { margin: 0.4rem 0 1.4rem; }
.space-manage { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 1rem 0 0.4rem; }
.space-group h2 { margin-bottom: 0.2rem; }
.space-group > .muted { margin-top: 0; font-size: 0.92rem; }
.space-live h2::before {
  content: ""; display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: var(--hot); margin-inline-end: 0.55rem; vertical-align: 0.15em;
}
@media (max-width: 560px) {
  .space-head { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .space-logo { width: 5.5rem; height: 5.5rem; }
}
.space-form .logo-now { display: flex; gap: 1rem; align-items: center; }
.space-form .logo-now .space-logo { width: 5rem; height: 5rem; }
.link-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0.5rem; }
.js .link-row[data-spare] { display: none; }
@media (max-width: 560px) { .link-row { grid-template-columns: minmax(0, 1fr); } }

/* Reactions: a viewer's one-click way to say that landed. Applause carries
   its word; the other three are the emoji alone. */
.reacts { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.btn.clap { display: inline-flex; align-items: center; gap: 0.4rem; }
.clap-count {
  font-variant-numeric: tabular-nums;
  background: rgba(242, 100, 48, 0.2);
  border-radius: 999px;
  padding: 0 0.4rem;
  font-size: 0.82rem;
}
.btn.clap .clap-hands { display: inline-block; }
.btn.clap.clapping .clap-hands { animation: clap 0.6s ease; }
@keyframes clap {
  0%, 100% { transform: scale(1) rotate(0); }
  30% { transform: scale(1.35) rotate(-12deg); }
  60% { transform: scale(1.15) rotate(10deg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn.clap.clapping .clap-hands { animation: none; }
}

/* The stage kit, in the deck and on its own page. */
.deck-kit { align-items: center; }
.kit-label {
  font-size: 0.72rem;
  color: var(--ink-faint);
  min-width: 4.2rem;
}
.chip.kit[aria-pressed="true"] { background: var(--hot); border-color: var(--hot); color: #2a0c02; font-weight: 600; }
.deck-empty { margin: 0.4rem 0 0; font-size: 0.82rem; }

/* Stage → Triggers: one row per moment — when, on the left; what plays and
   whether it plays by itself, on the right. */
.triggers { margin: 1.8rem 0; display: grid; gap: 0.6rem; }
.triggers h2 { margin-bottom: 0.1rem; }
.triggers > .muted { margin: 0 0 0.4rem; font-size: 0.9rem; max-width: 66ch; }
form.trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 0.6rem 1.2rem;
  align-items: start;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
}
form.trigger.set { border-color: rgba(14, 173, 181, 0.45); }
.trigger-when { display: grid; gap: 0.25rem; }
.trigger-title { font-size: 1rem; }
.trigger-sub { color: var(--ink-dim); font-size: 0.9rem; }
.trigger-when small { margin-top: 0.15rem; }
.trigger-param { display: inline-block; width: 6.5rem; padding: 0.25rem 0.45rem; margin: 0 0.15rem; }
.trigger-what {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.5rem 0.8rem;
  align-items: end;
}
.trigger-what label { font-size: 0.85rem; }
.trigger-what select { max-width: 100%; }
.trigger-what .check { align-self: center; }
.trigger-go { display: flex; gap: 0.4rem; justify-content: flex-end; }
@media (max-width: 760px) {
  form.trigger { grid-template-columns: minmax(0, 1fr); }
}
/* Triggers sits with the rest; a thin rule says it is not another kind of file. */
.subbar .subbar-end { margin-inline-start: 0.4rem; position: relative; }
.subbar .subbar-end::before {
  content: ""; position: absolute; inset-inline-start: -0.55rem; top: 20%; bottom: 20%;
  border-inline-start: 1px solid var(--line-strong);
}
.space-form .logo-new { color: var(--cool); font-size: 0.88rem; font-weight: 600; }
.auto-dot { color: var(--cool); font-size: 0.7em; vertical-align: 0.15em; margin-inline-start: 0.15rem; }
.chip.kit[aria-pressed="true"] .auto-dot { color: inherit; }

.stage-kit { margin: 1.6rem 0; }
.stage-kit h2 { margin-bottom: 0.2rem; }
.stage-kit .muted { margin-top: 0; font-size: 0.88rem; }
.kit-list { list-style: none; padding: 0; margin: 0.7rem 0; display: grid; gap: 0.4rem; }
.kit-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
}
.kit-thumb {
  width: 3.4rem;
  height: 2rem;
  object-fit: contain;
  flex: none;
  border-radius: 2px;
  /* a chequerboard, so a transparent PNG reads as transparent */
  background-color: #1b2c33;
  background-image: linear-gradient(45deg, #24383f 25%, transparent 25%, transparent 75%, #24383f 75%),
                    linear-gradient(45deg, #24383f 25%, transparent 25%, transparent 75%, #24383f 75%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
}
.kit-name { font-weight: 600; font-size: 0.93rem; }
.kit-meta { margin-inline-start: auto; font-size: 0.82rem; }
.kit-list form.inline { margin: 0; }
/* Adding to the kit. Without script: one row — file, name, Add. With script
   (.dropping): a drop area; the name and Add move into the queue, per file. */
.kit-add {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.7rem; align-items: center;
  margin: 1.2rem 0 0.6rem; padding: 0.9rem 1rem;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel);
}
.kit-add .kit-file input { width: auto; max-width: 16rem; }
.kit-add .kit-label-in { flex: 1; min-width: 12rem; display: block; }
.kit-add .kit-drop-hint { flex-basis: 100%; margin: 0; font-size: 0.86rem; }
.kit-add.dropping {
  display: grid; justify-items: center; text-align: center; gap: 0.6rem;
  padding: 1.8rem 1rem; border: 2px dashed var(--line-strong);
  transition: border-color 0.15s, background 0.15s;
}
.kit-add.dropping .kit-label-in, .kit-add.dropping > button[type="submit"] { display: none; }
.kit-add.dropping .kit-file input { max-width: 100%; }
.kit-add.dropping .kit-drop-hint { font-size: 0.95rem; max-width: 46ch; }
.kit-add.over { border-color: var(--cool); background: rgba(14, 173, 181, 0.1); }
.kit-add input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; margin-inline-end: 0.7rem; padding: 0.45rem 0.9rem; border-radius: 999px;
  border: 1px solid var(--cool); background: transparent; color: var(--ink); cursor: pointer;
}
.kit-queue { margin: 0 0 1.2rem; }
.kit-queue-rows { list-style: none; padding: 0; margin: 0 0 0.6rem; display: grid; gap: 0.4rem; }
.kit-queue-rows li {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto auto; gap: 0.3rem 0.6rem; align-items: center;
  padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel);
}
.kit-queue-rows li[data-state="refused"] { border-color: rgba(242, 100, 48, 0.5); }
.kit-queue-rows input { padding: 0.4rem 0.6rem; }
.kit-queue-rows .kit-meta { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-why { grid-column: 1 / -1; color: #ffb89a; font-size: 0.86rem; }
.kit-why:empty { display: none; }
.kit-x { background: none; border: 0; color: var(--ink-dim); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 0.3rem; }
.kit-x:hover { color: var(--ink); }
.kit-queue-bar { display: flex; gap: 0.5rem; }
@media (max-width: 640px) {
  .kit-queue-rows li { grid-template-columns: minmax(0, 1fr) auto auto; }
  .kit-queue-rows .kit-meta { grid-column: 1 / -1; grid-row: 2; }
}
.kit-head { margin-top: 1.6rem; }
.kit-head .muted { font-size: 0.9em; font-weight: 400; }
.kit-icon, .kit-play {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem;
  border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.04);
  color: var(--ink); cursor: pointer; padding: 0; font-size: 0.8rem;
}
.kit-icon:hover, .kit-play:hover { border-color: var(--cool); color: #c2f2f5; }
.kit-play.on { background: var(--cool); border-color: var(--cool); color: #04222a; }
.pager { display: flex; gap: 0.8rem; align-items: center; margin: 1rem 0; }
.kit-view .ask-panel { width: min(56rem, 100%); }
.kit-view-stage { display: grid; place-items: center; margin: 0.4rem 0 0; }
.kit-view-stage img, .kit-view-stage video { max-width: 100%; max-height: 70vh; border-radius: var(--r-sm); }
.kit-view-stage img { background: repeating-conic-gradient(#2a3d44 0 25%, #1d2d33 0 50%) 0 0 / 20px 20px; }
.kit-view-stage audio { width: 100%; }

/* The sources come first and read as a set; the arrangements follow. */
.deck-sources { gap: 0.45rem; }
.deck-sources [aria-pressed="true"] { border-color: var(--cool); color: #b6f0f4; }
.deck-devices label { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.btn.recording { background: #b23c19; }
.btn.recording::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #fff;
  animation: pulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .btn.recording::before { animation: none; } }

/* ---------- watching ---------- */

.watch { display: block; width: 100%; }
.watch video, .watch iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--r-md);
  background: #000;
  display: block;
}
.program:has(.watch:not([hidden])) { padding: 0.75rem; place-content: stretch; }
.program:has(.holding:not([hidden])) { padding: 0.75rem; place-content: stretch; }

/* The loop that plays before the show, in the frame the broadcast will use. */
.holding { position: relative; display: block; width: 100%; }
.holding video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  background: #000;
  display: block;
  object-fit: cover;
}
.holding [data-holding-sound] {
  position: absolute;
  inset-inline-end: 0.6rem;
  bottom: 0.6rem;
  background: rgba(8, 18, 24, 0.78);
}
.program:has(.holding:not([hidden])) [data-waiting-note] {
  margin-top: 0.6rem;
  max-width: none;
  font-size: 0.88rem;
}

/* The bar under the picture: what the session is doing, and the controls that
   belong to the viewer rather than to the broadcast. */
.stage-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin: 0.7rem 0 0;
  font-size: 0.92rem;
}

/* Asking sits directly under the picture, where someone who has just heard
   something is already looking. */
.ask-block { margin: 1.4rem 0 0; }
.ask-block h2 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.ask-note { margin: 0 0 0.6rem; font-size: 0.86rem; max-width: 58ch; }
.ask-block .live-ask { margin: 0; }
.rec-dl { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.5rem 0 0; }
.rec-dl .muted, .rec-share .muted { font-size: 0.84rem; }
.rec-share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.45rem 0 0; }
.replay-dl { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.2rem 0 1.2rem; }

.replay-frame { margin: 0.4rem 0 1rem; }
.replay-frame iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--r-lg);
  background: #000;
  display: block;
}
.deck-golive { align-items: center; }
.deck-golive .empty { margin: 0; }

.obs { margin: 0.2rem 0 0; }
.obs-keys { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.9rem; margin: 0.6rem 0; font-size: 0.9rem; }
.obs-keys dt { color: var(--ink-dim); }
.obs-keys dd { margin: 0; }
.obs-keys code { background: rgba(0,0,0,0.3); padding: 0.15rem 0.4rem; border-radius: 4px; word-break: break-all; }

/* ---------- go live now ---------- */

.live-now-card {
  border: 1px solid rgba(242, 100, 48, 0.4);
  background: rgba(242, 100, 48, 0.07);
  border-radius: var(--r-lg);
  padding: 1.1rem 1.25rem 1.25rem;
  margin: 0.6rem 0 1.8rem;
  max-width: 46rem;
}
.live-now-card h2 { margin-top: 0; }
.live-now-card .row { margin-bottom: 0; }
.live-now-card input[name="title"] { flex: 1; min-width: 14rem; }
.live-now-inline { margin: 0 0 1.2rem; }

.share-strip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
}
.share-label { color: var(--ink-dim); font-size: 0.88rem; white-space: nowrap; }
.share-url { flex: 1; min-width: 16rem; font-size: 0.9rem; }

/* ---------- recordings ---------- */

.rec-list { display: grid; gap: 0.6rem; max-width: 48rem; margin: 1.2rem 0; }
.rec {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
}
.rec-body { min-width: 0; display: grid; gap: 0.3rem; }
.rec-body strong { font-size: 1.02rem; }
.rec-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0; color: var(--ink-dim); font-size: 0.88rem; }
.rec-meta span { font-variant-numeric: tabular-nums; }
.rec form { margin: 0; flex-shrink: 0; }
@media (max-width: 560px) { .rec { flex-direction: column; } }

/* ---------- asking from inside a live session ---------- */

.live-ask { display: grid; gap: 0.45rem; margin: 0 0 1.2rem; }
.live-ask input, .live-ask textarea { width: 100%; }
.live-ask .actions { margin: 0; gap: 0.6rem; }
.live-ask .muted { font-size: 0.85rem; }
.deck-warning { margin: 0; color: var(--ink-faint); }

.ask-note { font-size: .85rem; margin: -.2rem 0 .5rem; max-width: 34rem; }

/* ---------- the live page, arranged ---------- */

.live .stage { min-width: 0; }
.live aside {
  position: sticky;
  top: 1rem;
  display: grid;
  gap: 0.2rem;
  align-content: start;
}
.live aside h2 { font-size: 1rem; margin: 1rem 0 0.4rem; }
.live aside #chat { max-height: 22rem; }
@media (max-width: 860px) {
  .live aside { position: static; }
  .live aside #chat { max-height: 16rem; }
}

/* ---------- the new-AMA wizard ---------- */
/* Without script every step is on the page; with it, one at a time, and the
   progress row says where you are. */
.wz-progress {
  list-style: none;
  padding: 0;
  margin: 0 0 0.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  counter-reset: wz;
  font-size: 0.86rem;
  color: var(--ink-faint);
}
.wz-progress li { counter-increment: wz; display: flex; align-items: center; gap: 0.4rem; }
.wz-progress li::before {
  content: counter(wz);
  display: inline-grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
}
.wz-progress li.on { color: var(--ink); font-weight: 600; }
.wz-progress li.on::before { background: var(--cool); border-color: var(--cool); color: #061417; }
.wz-progress li.done { color: var(--ink-dim); }
.wz-progress li.done::before { content: "✓"; border-color: var(--cool); color: var(--cool); }
.wz-progress li.skip { opacity: 0.45; text-decoration: line-through; }
html:not(.js) .wz-progress { display: none; }
.wizard .wz-step legend { font-size: 1.12rem; }
.wizard.stepped .wz-step { border: 0; padding: 0; }
.stack-tight { display: grid; gap: 0.9rem; }
.stack-tight .row { margin: 0; }
.stack-tight .row > label { flex: 1 1 14rem; }
.choice { align-items: flex-start; padding: 0.7rem 0.85rem; border: 1px solid var(--line); border-radius: var(--r-md); }
.choice:has(input:checked) { border-color: var(--cool); background: rgba(14, 173, 181, 0.08); }
.choice input { margin-top: 0.25rem; }
.choice span { display: grid; gap: 0.15rem; }
.choice small { color: var(--ink-dim); }
#wizard:has(input[name="when"][value="poll"]:checked) [data-when="fixed"],
#wizard:has(input[name="when"][value="fixed"]:checked) [data-when="poll"],
#wizard:has(input[name="when"][value="later"]:checked) [data-when] { display: none; }
.wz-actions { margin-top: 0.2rem; }

/* ---------- publish checklist, cover cropper, long pick lists ---------- */
.need { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.need li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.crop { display: grid; gap: 0.6rem; }
.crop canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  border-radius: var(--r-md);
  cursor: grab;
  background: #0b1416;
  display: block;
}
.crop canvas:active { cursor: grabbing; }
.crop .row { margin: 0; }
.crop input[type="range"] { max-width: 16rem; padding: 0; }
details.brief > summary { cursor: pointer; color: var(--ink-dim); }
details.brief[open] > summary { margin-bottom: 0.6rem; }
.pick { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.3rem; max-height: 22rem; overflow-y: auto; }
.pick .check { align-items: flex-start; padding: 0.35rem 0.4rem; border-radius: var(--r-sm); }
.pick .check:has(input:checked) { background: rgba(14, 173, 181, 0.12); }
.pick .check input { margin-top: 0.25rem; }
.pick-filter { max-width: 24rem; }
html:not(.js) .pick-filter { display: none; }

/* ---------- the platform area ---------- */

/* Home · [switcher] · the pages of wherever you are. The switcher is a
   <details>, so it opens with no script at all; ama.js only closes it on an
   outside click. Menu rows override the pill styling .topnav a gives links. */
.topnav-admin .topnav-pages { border-inline-start: 1px solid rgba(185, 200, 205, 0.22); padding-inline-start: 0.7rem; margin-inline-start: 0.35rem; }
/* The generic details/summary rules (a brief that folds) give a top margin and a muted colour; the bar's menus take neither. */
.topnav-pick, .topnav-more { margin: 0; }
.topnav-pick[open] > summary, .topnav-more[open] > summary { margin-bottom: 0; }
.topnav-pick { position: relative; margin-inline-start: 0.15rem; display: inline-flex; align-items: center; line-height: 1; }
.topnav-pick > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(185, 200, 205, 0.35);
  color: #f4f7f8;
  font-weight: 700;
  font-size: 0.98rem;
  max-width: 16rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topnav-pick > summary::-webkit-details-marker { display: none; }
.topnav-pick > summary:hover, .topnav-pick[open] > summary { background: rgba(255, 255, 255, 0.08); border-color: rgba(185, 200, 205, 0.6); }
.topnav-pick .caret { flex: none; opacity: 0.7; transition: transform 0.15s ease; transform-box: fill-box; transform-origin: center; }
.topnav-pick[open] .caret { transform: rotate(180deg); }
.topnav-menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  inset-inline-start: 0;
  z-index: 60;
  min-width: 18rem;
  max-width: min(24rem, 90vw);
  padding: 0.35rem 0;
  border-radius: 12px;
  background: rgba(17, 49, 62, 0.97);
  border: 1px solid rgba(14, 173, 181, 0.25);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: start;
  line-height: 1.3;
}
.topnav-menu hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); margin: 0.3rem 0; }
.topnav .topnav-menu-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem 0.7rem;
  padding: 0.5rem 0.95rem;
  border-radius: 0;
  border: 0;
  color: #f4f7f8;
  white-space: normal;
}
.topnav .topnav-menu-item strong { font-size: 0.93rem; grid-column: 1; }
.topnav .topnav-menu-item span { grid-column: 1; color: #b9c8cd; font-size: 0.78rem; }
.topnav .topnav-menu-item em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-size: 0.72rem; font-weight: 600; color: #7d949c; white-space: nowrap; }
.topnav .topnav-menu-item em.active { color: #8fe6ec; }
.topnav .topnav-menu-item em.suspended { color: #ffb08e; }
.topnav .topnav-menu-item:hover { background: rgba(14, 173, 181, 0.12); color: #f4f7f8; }
.topnav .topnav-menu-item.on { background: rgba(14, 173, 181, 0.18); color: #f4f7f8; font-weight: 400; }
.topnav .topnav-menu-item.on strong::after { content: " ✓"; color: var(--cool); }
.topnav .topnav-menu-new strong { color: #8fe6ec; }

/* Dark or light, in the bar between the language and the avatar. */
.theme-toggle {
  width: var(--sippis-ctrl-h, 38px);
  height: var(--sippis-ctrl-h, 38px);
  border-radius: 50%;
  border: 1px solid rgba(185, 200, 205, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: #f4f7f8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex: none;
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(185, 200, 205, 0.55); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .ico-sun { display: none; }
:root[data-theme="light"] .theme-toggle .ico-sun { display: block; }
:root[data-theme="light"] .theme-toggle .ico-moon { display: none; }
html:not(.js) .theme-toggle { display: none; }

/* The address, and the two facts that decide whether anyone can open it. */
.space-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin: 0.1rem 0 1.2rem; font-size: 1.02rem; }
.space-line a { font-weight: 600; }

/* A container: one subject per box, its heading inside it. */
.sheet {
  padding: 1.2rem 1.4rem 1.3rem;
  margin: 0 0 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.sheet > h2 { margin: 0 0 0.4rem; font-size: 1.12rem; }
.sheet > h2 + p { margin-top: 0; }
.sheet > p:last-child, .sheet > form:last-child, .sheet > table:last-child { margin-bottom: 0; }
.sheet .state { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.7rem 0; }
.sheet form.stack { border: 0; padding: 0; background: none; margin: 0.9rem 0 0; max-width: none; }
.sheet form.actions, .sheet .actions { margin: 0.9rem 0 0; }
.sheet .smtp-test { margin: 0.5rem 0 0; }
.sheet .empty { max-width: none; }
.chips { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; vertical-align: middle; }
.chip-flat { padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--panel-lift); font-size: 0.82rem; font-weight: 600; color: var(--ink); }

/* Who owns the space: a face, a name, and the facts Sippis knows. */
.sheet.owner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.3rem 1rem;
  align-items: center;
  padding-top: 0.95rem;
  padding-bottom: 0.95rem;
}
.owner-avatar {
  position: relative;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(14, 173, 181, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
}
.owner-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.owner-name { margin: 0; font-size: 1.05rem; display: flex; flex-wrap: wrap; gap: 0.2rem 0.7rem; align-items: baseline; }
.owner-name a { font-size: 0.92rem; }
.owner-meta { margin: 0.15rem 0 0; color: var(--ink-dim); font-size: 0.88rem; }
.owner-uuid { font-size: 0.72rem; color: var(--ink-faint); background: rgba(0, 0, 0, 0.22); padding: 0.25rem 0.55rem; border-radius: 6px; word-break: break-all; }
@media (max-width: 700px) {
  .sheet.owner { grid-template-columns: auto minmax(0, 1fr); }
  .owner-uuid { grid-column: 1 / -1; }
}

/* Four meters. The figure is the label; the chart under it says how it got there. */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0 0 1rem; }
@media (max-width: 1000px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .stats { grid-template-columns: minmax(0, 1fr); } }
.stat {
  display: grid;
  gap: 0.55rem;
  align-content: start;
  padding: 1.05rem 1.15rem 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.stat h2 { margin: 0; font-size: 0.88rem; font-weight: 600; color: var(--ink-dim); letter-spacing: 0; }
.stat-value {
  margin: 0;
  font-size: 1.85rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
}
.stat-of { font-size: 0.86rem; font-weight: 500; color: var(--ink-faint); letter-spacing: 0; }
.stat-note { margin: 0; font-size: 0.82rem; color: var(--ink-faint); line-height: 1.4; }
.stat figure { margin: 0.25rem 0 0; }
.stat figcaption { font-size: 0.76rem; color: var(--ink-faint); margin-top: 0.3rem; }
.meter { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--cool); border-radius: 999px; }
.meter.near > span { background: #e8b23a; }
.meter.over > span { background: var(--hot); }
.spark { display: block; width: 100%; height: 60px; overflow: visible; }
.spark .base { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.spark .cap { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.7; vector-effect: non-scaling-stroke; }
.spark .fill { fill: var(--cool); opacity: 0.16; }
.spark .line { fill: none; stroke: var(--cool); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark .pt { fill: transparent; pointer-events: all; }
.spark .pt:hover { fill: var(--cool); }
.spark.bars rect { fill: var(--cool); }
.spark.bars .hit { fill: transparent; pointer-events: all; }
.spark.bars .bar:hover rect:not(.hit) { fill: #7fe3ea; }

/* What was given on top: small, because it is the exception. */
.sheet.allowance { display: grid; grid-template-columns: minmax(14rem, 1fr) auto; gap: 0.6rem 1.5rem; align-items: center; }
.allowance-why h2 { margin: 0 0 0.2rem; font-size: 1.02rem; }
.allowance-why p { margin: 0; font-size: 0.9rem; }
.allowance-fields { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: end; }
.allowance-fields label { font-size: 0.82rem; }
.allowance-fields input[type="number"] { max-width: 7.5rem; padding: 0.42rem 0.6rem; }
.allowance-fields .btn { padding: 0.5rem 1.05rem; }
@media (max-width: 900px) { .sheet.allowance { grid-template-columns: minmax(0, 1fr); } }

/* The ledger. */
.payment-form { display: grid; gap: 0.9rem; }
.payment-form > h2 { margin-bottom: 0; }
.money-row { margin: 0; align-items: end; }
.money-row input[data-money] { max-width: 11rem; text-align: end; font-variant-numeric: tabular-nums; }
.money-row select.currency { width: auto; max-width: 7rem; }
.ledger { width: 100%; border-collapse: collapse; font-size: 0.93rem; margin: 0.4rem 0 0; }
.ledger th { text-align: start; font-weight: 600; color: var(--ink-dim); font-size: 0.8rem; padding: 0.3rem 0.6rem 0.45rem 0; border-bottom: 1px solid var(--line-strong); }
.ledger td { padding: 0.5rem 0.6rem 0.5rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ledger .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger tr:last-child td { border-bottom: 0; }

/* Three states, each saying what it does. */
.status-choices { display: grid; gap: 0.6rem; margin: 0.8rem 0 0.2rem; max-width: 56rem; }
.status-choices .choice strong { font-size: 1rem; }

/* ---------- light ---------- */
/* Dark is the brand; light is a choice, made with the button in the bar and
   kept in localStorage. The app's tokens are redefined once here, then the
   handful of places that hardcode a colour — the shared bar most of all — are
   restated. The studio's programme and deck stay dark: they are video
   surfaces, and a dark surround is right for them. */
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="light"] body.ama-app {
  --ink: #10242c;
  --ink-dim: #4a6069;
  --ink-faint: #6f858d;
  --panel: rgba(255, 255, 255, 0.78);
  --panel-lift: rgba(16, 36, 44, 0.07);
  --line: rgba(16, 36, 44, 0.12);
  --line-strong: rgba(16, 36, 44, 0.28);
  --field: #ffffff;
  --field-ink: #10242c;
  background: radial-gradient(ellipse at top, rgba(14, 173, 181, 0.16) 0%, rgba(14, 173, 181, 0) 55%) #eef3f4;
  color: var(--ink);
}
:root[data-theme="light"] .lede { color: #2b4650; }
:root[data-theme="light"] .ama-wrap a { color: #0a7f86; }
:root[data-theme="light"] .ama-wrap a:hover { color: #075e63; }
:root[data-theme="light"] .banner { background: rgba(242, 100, 48, 0.12); border-color: rgba(242, 100, 48, 0.4); color: #7a2d10; }
:root[data-theme="light"] .prose code, :root[data-theme="light"] .owner-uuid, :root[data-theme="light"] .obs-keys code { background: rgba(16, 36, 44, 0.08); }
:root[data-theme="light"] label { color: #2b4650; }
:root[data-theme="light"] input, :root[data-theme="light"] textarea, :root[data-theme="light"] select { border-color: var(--line-strong); }
:root[data-theme="light"] input::placeholder, :root[data-theme="light"] textarea::placeholder { color: #8a9ca3; }
:root[data-theme="light"] .tag-go { color: #0a6f75; }
:root[data-theme="light"] .tag-past { color: #4a6069; }
:root[data-theme="light"] .tag-off { color: #6f858d; }
:root[data-theme="light"] :where(a, button, input, select, textarea, summary):focus-visible { outline-color: #0a7f86; }
:root[data-theme="light"] .price-cards .card strong,
:root[data-theme="light"] button.vote[data-on="1"],
:root[data-theme="light"] button.vote[data-on="1"] .vote-label,
:root[data-theme="light"] button.activate:hover,
:root[data-theme="light"] .cue-at,
:root[data-theme="light"] #chat { color: #0a6f75; }
:root[data-theme="light"] .btn.danger { color: #9a2f0e; }
:root[data-theme="light"] .btn.danger:hover { color: #fff; }
:root[data-theme="light"] .kit-why { color: #9a2f0e; }
:root[data-theme="light"] .meter { background: rgba(16, 36, 44, 0.1); }
:root[data-theme="light"] .spark .fill { opacity: 0.2; }
:root[data-theme="light"] .spark.bars .bar:hover rect:not(.hit) { fill: #0a6f75; }
:root[data-theme="light"] .subbar { background: rgba(255, 255, 255, 0.55); }
:root[data-theme="light"] .chat-line:hover { background: rgba(16, 36, 44, 0.05); }
/* the bar (sippis-shell.css hardcodes its dark palette) */
:root[data-theme="light"] .topbar { background: rgba(255, 255, 255, 0.8); border-bottom-color: rgba(16, 36, 44, 0.12); }
:root[data-theme="light"] .topbar .brand,
:root[data-theme="light"] .topbar .brand .brand-name,
:root[data-theme="light"] .topbar .brand > span strong { color: #10242c; }
:root[data-theme="light"] .topbar .brand > span { color: #4a6069; }
:root[data-theme="light"] .topnav a { color: #2b4650; }
:root[data-theme="light"] .topnav a:hover { color: #10242c; background: rgba(16, 36, 44, 0.06); }
:root[data-theme="light"] .topnav a.on { color: #04222a; }
:root[data-theme="light"] .topnav .topnav-space { color: #10242c; }
:root[data-theme="light"] .topnav .topnav-space.on { color: #04222a; }
:root[data-theme="light"] .topnav-label { color: #6f858d; }
:root[data-theme="light"] .topnav-group, :root[data-theme="light"] .topnav-admin .topnav-pages { border-inline-start-color: rgba(16, 36, 44, 0.16); }
:root[data-theme="light"] .topnav-pick > summary { color: #10242c; border-color: rgba(16, 36, 44, 0.25); }
:root[data-theme="light"] .topnav-pick > summary:hover, :root[data-theme="light"] .topnav-pick[open] > summary { background: rgba(16, 36, 44, 0.06); border-color: rgba(16, 36, 44, 0.45); }
:root[data-theme="light"] .topnav-menu { background: #fff; border-color: rgba(16, 36, 44, 0.14); box-shadow: 0 12px 34px rgba(16, 36, 44, 0.18); }
:root[data-theme="light"] .topnav-menu hr { border-top-color: rgba(16, 36, 44, 0.08); }
:root[data-theme="light"] .topnav .topnav-menu-item, :root[data-theme="light"] .topnav .topnav-menu-item:hover, :root[data-theme="light"] .topnav .topnav-menu-item.on { color: #10242c; }
:root[data-theme="light"] .topnav .topnav-menu-item span { color: #4a6069; }
:root[data-theme="light"] .topnav .topnav-menu-item em { color: #6f858d; }
:root[data-theme="light"] .topnav .topnav-menu-item em.active { color: #0a6f75; }
:root[data-theme="light"] .topnav .topnav-menu-item em.suspended { color: #b23c19; }
:root[data-theme="light"] .topnav .topnav-menu-new strong { color: #0a7f86; }
:root[data-theme="light"] .lang-select {
  background-color: rgba(16, 36, 44, 0.05);
  color: #10242c;
  border-color: rgba(16, 36, 44, 0.2);
  background-image: linear-gradient(45deg, transparent 50%, #4a6069 50%), linear-gradient(135deg, #4a6069 50%, transparent 50%);
}
:root[data-theme="light"] .lang-select:hover { background-color: rgba(16, 36, 44, 0.09); border-color: rgba(16, 36, 44, 0.4); }
:root[data-theme="light"] .theme-toggle { color: #10242c; border-color: rgba(16, 36, 44, 0.2); background: rgba(16, 36, 44, 0.05); }
:root[data-theme="light"] .theme-toggle:hover { background: rgba(16, 36, 44, 0.1); border-color: rgba(16, 36, 44, 0.4); }
:root[data-theme="light"] .user-avatar { border-color: rgba(16, 36, 44, 0.3); background: rgba(14, 173, 181, 0.25); color: #10242c; }
:root[data-theme="light"] .user-menu-dropdown { background: #fff; border-color: rgba(16, 36, 44, 0.14); box-shadow: 0 10px 30px rgba(16, 36, 44, 0.18); }
:root[data-theme="light"] .user-menu-dropdown hr { border-top-color: rgba(16, 36, 44, 0.08); }
:root[data-theme="light"] .user-menu-name, :root[data-theme="light"] .user-menu-item { color: #10242c; }
:root[data-theme="light"] .user-menu-email { color: #4a6069; }
:root[data-theme="light"] .topbar .sippis-credits { --sippis-credits-bg: rgba(16, 36, 44, 0.08); --sippis-credits-fg: #10242c; }
:root[data-theme="light"] .topbar-intent-pills { background: rgba(16, 36, 44, 0.06); border-color: rgba(16, 36, 44, 0.18); }
:root[data-theme="light"] .intent-pill { color: #2b4650; }
:root[data-theme="light"] .intent-pill:hover { background: rgba(16, 36, 44, 0.08); color: #10242c; }
:root[data-theme="light"] .intent-pill.active { background: var(--cool); color: #fff; }

/* ---------- platform area, second pass (2026-09-30 evening) ---------- */

/* The pages of the section live inline on a wide bar and inside a hamburger
   on a narrow one. Both are in the markup; only one is ever shown. */
.topnav-more { position: relative; display: none; align-items: center; line-height: 1; }
.topnav-more > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid rgba(185, 200, 205, 0.35);
  color: #f4f7f8;
}
.topnav-more > summary::-webkit-details-marker { display: none; }
.topnav-more > summary:hover, .topnav-more[open] > summary { background: rgba(255, 255, 255, 0.08); border-color: rgba(185, 200, 205, 0.6); }
.topnav-more .topnav-menu { inset-inline-start: auto; inset-inline-end: 0; }
.topnav-menu-pages { display: grid; min-width: 12rem; padding: 0.4rem; }
.topnav .topnav-menu-pages a { border-radius: 8px; padding: 0.55rem 0.8rem; }
@media (max-width: 760px) {
  .topnav-admin .topnav-pages { display: none; }
  .topnav-more { display: inline-flex; margin-inline-start: auto; }
}

/* A space's card on the Spaces page: the title is the link, the "i" opens the modal. */
.card-space { position: relative; }
.card-space .card-link { display: grid; gap: 0.45rem; color: inherit; text-decoration: none; padding-inline-end: 2.2rem; }
.card-space .card-link:hover strong { color: var(--cool); }
.card-info {
  position: absolute;
  top: 0.8rem;
  inset-inline-end: 0.85rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 0.85rem/1 Georgia, "Times New Roman", serif;
  font-style: italic;
  text-decoration: none;
  color: var(--ink-dim);
}
.ama-wrap a.card-info { color: var(--ink-dim); }
.ama-wrap a.card-info:hover { color: var(--ink); border-color: var(--cool); background: rgba(14, 173, 181, 0.14); }

/* The modal itself: a native <dialog>, dressed like the confirm panel. */
dialog.space-info {
  width: min(34rem, calc(100% - 2rem));
  padding: 1.2rem 1.4rem 1.2rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--panel-lift, #16323c);
  color: var(--ink);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  text-align: start;
}
dialog.space-info[open] { animation: ask-in 0.14s ease-out; }
dialog.space-info::backdrop { background: rgba(6, 14, 18, 0.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.space-info-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 0.6rem; }
.space-info-head h2 { margin: 0; font-size: 1.2rem; }
.space-info-close {
  width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--line-strong);
  background: transparent; color: var(--ink-dim); font: 1.3rem/1 inherit; cursor: pointer; padding: 0; flex: none;
}
.space-info-close:hover { color: var(--ink); border-color: var(--cool); }
.space-info-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.45rem 1rem; margin: 0; font-size: 0.93rem; }
.space-info-facts dt { color: var(--ink-dim); }
.space-info-facts dd { margin: 0; overflow-wrap: anywhere; }
.space-info-facts dd .tag { vertical-align: middle; }
.space-info-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.1rem 0 0; }
@media (max-width: 480px) { .space-info-facts { grid-template-columns: minmax(0, 1fr); gap: 0.1rem 0; } .space-info-facts dd { margin-bottom: 0.4rem; } }

:root[data-theme="light"] .topnav-more > summary { color: #10242c; border-color: rgba(16, 36, 44, 0.25); }
:root[data-theme="light"] .topnav-more > summary:hover, :root[data-theme="light"] .topnav-more[open] > summary { background: rgba(16, 36, 44, 0.06); border-color: rgba(16, 36, 44, 0.45); }
:root[data-theme="light"] dialog.space-info { background: #fff; box-shadow: 0 20px 60px rgba(16, 36, 44, 0.25); }
:root[data-theme="light"] dialog.space-info::backdrop { background: rgba(16, 36, 44, 0.45); }

/* ---------- "working on it" — the confirm box with no buttons ---------- */
.ask.busy .ask-panel { text-align: center; }
.ask.busy .ask-panel h2 { margin-top: 0.4rem; }
.busy-spin {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 3px solid var(--line-strong);
  border-top-color: var(--cool);
  animation: busy-turn 0.9s linear infinite;
}
@keyframes busy-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .busy-spin { animation-duration: 2.4s; } }

/* ---------- the poll's calendar ---------- */
/* Scoped to the picker's panel: the public Times tab's month calendar uses the same
   .cal-grid / .cal-dow / .cal-day names, and these rules once leaked into it. */
/* Two months side by side where there is room, one on a phone. A day in
   the range is filled; one that also falls on a ticked weekday is the real
   thing — an hour people will vote on — and reads stronger. */
.cal-open { align-self: end; margin-bottom: 0.15rem; white-space: nowrap; }
.cal-panel { width: min(44rem, 100%); }
.cal-panel .cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.8rem; }
.cal-panel .cal-hint { color: var(--ink-dim); font-size: 0.88rem; text-align: center; flex: 1; }
.cal-panel .cal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.2rem; }
.cal-panel .cal-head { font-weight: 600; margin: 0 0 0.45rem; text-align: center; }
.cal-panel .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.2rem; }
.cal-panel .cal-dow, .cal-panel .cal-day {
  font: inherit;
  font-size: 0.86rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm, 6px);
  background: transparent;
  color: var(--ink);
  padding: 0.35rem 0;
  text-align: center;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.cal-panel .cal-dow { color: var(--ink-faint); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--line); border-radius: 0; }
.cal-panel .cal-dow.on { color: var(--cool); font-weight: 700; }
.cal-panel .cal-dow:hover { background: rgba(255, 255, 255, 0.06); }
.cal-panel .cal-day:hover:not([disabled]) { border-color: var(--line-strong); }
.cal-panel .cal-day.off { color: var(--ink-faint); }
.cal-panel .cal-day.past { opacity: 0.3; cursor: default; }
.cal-panel .cal-day.today { text-decoration: underline; text-underline-offset: 3px; }
.cal-panel .cal-day.in { background: rgba(14, 173, 181, 0.12); }
.cal-panel .cal-day.in.maybe { background: rgba(14, 173, 181, 0.07); border-style: dashed; border-color: rgba(14, 173, 181, 0.35); }
.cal-panel .cal-day.offer { background: rgba(14, 173, 181, 0.34); color: #fff; font-weight: 600; }
.cal-panel .cal-day.from, .cal-panel .cal-day.to { background: var(--cool); color: #061417; font-weight: 700; }
.cal-panel .cal-day:focus-visible, .cal-panel .cal-dow:focus-visible { outline: 2px solid var(--cool); outline-offset: 1px; }
.cal-panel .cal-foot { margin: 0.9rem 0 0; font-size: 0.9rem; color: var(--ink-dim); min-height: 1.3em; }
.cal-panel .cal-foot.warn { color: #f3b07a; }
:root[data-theme="light"] .cal-panel .cal-day.offer { color: #06363a; }
:root[data-theme="light"] .cal-panel .cal-dow:hover { background: rgba(0, 0, 0, 0.05); }

/* The keys page: what a job comes to right now, before the pickers. */
.job-now { margin: 0 0 0.6rem; font-size: 0.88rem; color: var(--ink); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }

/* The vote form's "tell me when the time is set" tick and the line under it
   once the votes are in; the one-line shape of the poll above the calendar. */
.poll-shape { margin: -0.4rem 0 0.8rem; font-size: 0.9rem; }
.picks .tell-me {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  margin: 0.9rem 0 0.4rem;
  cursor: pointer;
}
.picks .tell-me input { margin-top: 0.2rem; }
.picks .tell-me small { display: block; color: var(--ink-faint); font-size: 0.82rem; margin-top: 0.1rem; }
.told-note { margin: 0 0 0.4rem; font-size: 0.9rem; }

/* A space's front page: each announcement is an article whose foot carries
   the actions a visitor came for, not one link ending in a status word. */
.ama-card .card-cover { display: block; border-radius: var(--r-md); }
.ama-card .card-cover img { margin-bottom: 0; }
.ama-wrap .ama-card strong a { color: var(--ink); text-decoration: none; }
.ama-wrap .ama-card strong a:hover { color: var(--cool); text-decoration: underline; }
.ama-card .card-foot { margin: 0.2rem 0 0; }
.ama-card .card-line { display: block; font-size: 0.86rem; color: var(--ink-faint); }
.ama-card .card-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin: 0.4rem 0 0; }
.ama-card .card-actions .tag { margin-inline-start: auto; }
/* The question form in a modal, from a front-page card. */
dialog.ask-dialog { width: min(38rem, calc(100% - 2rem)); }
.ask-dialog-lede { margin: -0.2rem 0 0.9rem; font-size: 0.92rem; }
.ask-dialog form.stack { padding: 0; border: 0; background: none; }
.ama-card .card-tally { display: block; font-size: 0.86rem; color: var(--ink-dim); margin-top: 0.25rem; }