/* The subscriber area (/app), in the "מכשיר" language Ronen chose on 31/10 (direction 49):
   the app reads as measurement panels on a black ground. Panels are #1B1B1B with a #272727
   head bar; the panel being operated turns its bar yellow with a wipe. Yellow comes as a few
   large solid shapes (a bar, a pill, a selected segment), never as small chips.
   Loaded after style.css, which the studio portal shares: everything off-brand there (the
   yellow aura, tints, shadows, the glowing bars) is switched off here, and its tokens point
   at the brand's solid colours. Colours are the brand's only, with no alpha, gradients,
   shadows, glow or blur. */
/* Every text in /app is Reisinger's Michal (Ronen, 30/10). style.css routes all type through
   --font-display/--font-body/--font-mono, so redefining them here moves the whole app.
   Michal's Hebrew letters stand 19% taller than FbTypograph2's at the same font-size, so
   size-adjust brings them back to the letter height the older rules were set in; the type
   scale below is the mockup's, divided by that 84%. */
@font-face {
  font-family: 'Michal';
  src: url('fonts/Reisinger-Michal-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
  size-adjust: 84%;
}
@font-face {
  font-family: 'Michal';
  src: url('fonts/Reisinger-Michal-Regular.woff2') format('woff2');
  font-weight: 400 500;
  font-display: swap;
  size-adjust: 84%;
}
@font-face {
  font-family: 'Michal';
  src: url('fonts/Reisinger-Michal-Bold.woff2') format('woff2');
  font-weight: 600 900;
  font-display: swap;
  size-adjust: 84%;
}
:root {
  /* The brand's solid colours, the only ones /app paints with. */
  --c-yellow: #FFDE1F;
  --c-ink: #141210;
  --c-panel: #1B1B1B;
  --c-raise: #272727;
  --c-gray: #808080;
  --c-white: #FFFFFF;

  /* style.css's tokens, pointed at the brand. */
  --primary: var(--c-yellow);
  --accent: var(--c-yellow);
  --ink: var(--c-ink);
  --bg: var(--c-ink);
  --fg: var(--c-white);
  --card: var(--c-panel);
  --card-2: var(--c-raise);
  --line: var(--c-raise);
  --line2: var(--c-raise);
  --line2-strong: var(--c-gray);
  --fg-soft: var(--c-white);
  --fg-mute: var(--c-gray);
  --fg-dim: var(--c-gray);
  --y-glow-1: var(--c-ink);
  --y-glow-2: var(--c-ink);
  --y-surface: var(--c-raise);
  --y-border: var(--c-yellow);
  --danger: var(--c-yellow);
  --danger-soft: var(--c-raise);
  --r-pill: 999px;
  --r-card: 4px;
  --r-btn: 999px;
  --r-input: 4px;

  --font-display: 'Michal', 'Arial Hebrew', Arial, sans-serif;
  --font-body: 'Michal', 'Arial Hebrew', Arial, sans-serif;
  --font-mono: 'Michal', 'Arial Hebrew', Arial, sans-serif;

  --sub-space-1: 4px;
  --sub-space-2: 8px;
  --sub-space-3: 12px;
  --sub-space-4: 16px;
  --sub-space-5: 20px;
  --sub-space-6: 24px;
  --sub-space-8: 32px;
  --sub-space-10: 40px;
  --sub-space-12: 48px;
  --sub-space-20: 80px;
  --sub-space-25: 100px;
  --sub-gutter: 16px;
  --sub-gap: 16px;

  /* The type scale (Michal at 84%): 19px reads as the mockup's 16px. */
  --sub-text-xs: 15px;
  --sub-text-sm: 16.5px;
  --sub-text-base: 19px;
  --sub-text-md: 20px;
  --sub-text-lg: 24px;
  --sub-fs-head: 20px;
  --sub-fs-title: 28.5px;
  --sub-fs-display: 52px;
  --sub-title: var(--sub-fs-title);
  --sub-title-wide: 33px;
  --sub-title-home: var(--sub-fs-title);
  --sub-title-episode: var(--sub-fs-title);
  --sub-figure: var(--sub-fs-display);
  --sub-lh: 1.3;
  --sub-lh-tight: 1.1;

  --sub-head-h: 56px;
  --sub-slate: 44px;
  --sub-logo-h: 22px;
  --sub-r-link: 4px;
  --sub-r-frame: 0;
  --sub-max-w: 1344px;
  --sub-lead-w: 60ch;
  --sub-touch: 44px;
  --sub-pill-h: 48px;
  --sub-bar-track: 12px;
  --sub-ease: cubic-bezier(.2, .7, 0, 1);
  --sub-rank-dial: 56px;
  --sub-rank-ease: var(--sub-ease);
  --sub-bar-h: 6px;
  --sub-ring: 2px;
  --sub-ring-picked: 3px;
  --sub-ribbon-tilt: 0deg;
  /* The drop zone's viewfinder corners. */
  --sub-mark-len: 28px;
  --sub-mark-w: 2px;
  --sub-mark-inset: 14px;
  --sub-mark-inset-open: 8px;
  --sub-timeline-h: 12px;
  /* The journey's playhead glides over one poll's beat, so it never stops between answers. */
  --sub-journey-fill: var(--c-raise);
  --sub-journey-fill-head: var(--c-white);
  --sub-journey-glide: 4.8s;
  --sub-step-mark: 16px;
  --sub-step-ring: 2px;
  --sub-row-bar-h: 4px;
  /* The square and the story side by side, capped so the story stays on one screen. */
  --sub-size-pair-w: 640px;
  /* Kit text and transcript lines stop at a readable length on a wide screen. */
  --sub-read-w: 72ch;
  /* Error text: the brand's yellow, the one colour that calls for attention on black. */
  --sub-danger-text: var(--c-yellow);
  /* No lift: the brand has no shadows. Stylesheets built on this one read it. */
  --sub-shadow-lift: none;
  /* Clears the view-as banner, which a long address wraps to three lines on a phone, its
     exit button at the touch height: 139 px at 320 px wide. */
  --sub-sticky-reach: calc(var(--sub-space-25) + var(--sub-space-10)
    + env(safe-area-inset-top, 0px));
  color-scheme: dark;
}
/* A framed page (the editor's caption layer, the carousel's slide) declares no scheme, and a
   frame whose scheme differs from its page's is painted opaque white over what is under it. */
iframe { color-scheme: normal; }
@media (min-width: 700px) {
  :root {
    --sub-gutter: 32px;
    --sub-text-sm: 18px;
    --sub-text-base: 20px;
    --sub-fs-head: 21.5px;
    --sub-fs-title: 33px;
    --sub-fs-display: 62px;
  }
}
@media (min-width: 1100px) {
  :root { --sub-gutter: 48px; --sub-head-h: 60px; --sub-logo-h: 28px; }
}

/* ───── The ground: style.css's aura, grain and drift are the studio's, not the app's ───── */
html, body { overflow-x: clip; }
html { background: var(--c-ink); }
body {
  background: var(--c-ink);
  background-image: none;
  color: var(--c-white);
  font-size: var(--sub-text-base);
  line-height: var(--sub-lh);
}
body::before,
body::after { content: none; }
.cursor-glow { display: none; }
::selection { background: var(--c-yellow); color: var(--c-ink); }
a:not([class*="btn"]):hover { color: inherit; }
:focus-visible { outline: var(--sub-ring) solid var(--c-yellow); outline-offset: 3px; }

/* ───── style.css's controls, in the brand ───── */
.btn,
.btn--primary,
.btn--secondary {
  min-height: var(--sub-pill-h);
  padding: 0 var(--sub-space-6) 2px;
  border: 0;
  border-radius: var(--r-pill);
  font-size: var(--sub-text-base);
  font-weight: 700;
  letter-spacing: 0;
  line-height: var(--sub-lh-tight);
  transition: background-color .3s var(--sub-ease), color .3s var(--sub-ease);
}
.btn--primary { background: var(--c-yellow); color: var(--c-ink); border-color: var(--c-yellow); }
.btn--secondary { background: var(--c-raise); color: var(--c-white); font-weight: 400; }
.btn--primary:hover:not(:disabled),
.btn--secondary:hover:not(:disabled) {
  background: var(--c-white);
  color: var(--c-ink);
  transform: none;
  box-shadow: none;
}
.btn--primary:active:not(:disabled) { transform: none; }
.btn--primary:focus-visible { outline-color: var(--c-white); }
/* Disabled: gray words on the black well (gray on #272727 would fail contrast). */
.btn:disabled,
.btn--primary:disabled,
.btn--secondary:disabled {
  opacity: 1;
  background: var(--c-ink);
  color: var(--c-gray);
  font-weight: 400;
}
/* A text arrow that leans the way the page reads. */
.sub-arrow { display: inline-block; transition: transform .4s var(--sub-ease); }
.btn:hover .sub-arrow,
a:hover > .sub-arrow { transform: translateX(-4px); }

.label,
label {
  font-family: var(--font-body);
  font-size: var(--sub-text-sm);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-gray);
}
.input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="datetime-local"],
input[type="search"],
select,
textarea {
  min-height: var(--sub-pill-h);
  font-size: var(--sub-text-base);
  background: var(--c-ink);
  border: 2px solid var(--c-raise);
  border-radius: var(--r-input);
  color: var(--c-white);
  transition: border-color .2s var(--sub-ease);
}
.input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--c-yellow);
  background: var(--c-ink);
  box-shadow: none;
}
.input::placeholder,
input::placeholder,
textarea::placeholder { color: var(--c-gray); }
/* After the shorthand above, and as strong as `.input`, so a <select class="input"> keeps it. */
select,
select.input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23FFFFFF' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: left 16px center;
  padding-inline-start: 40px;
}
input[type="checkbox"] {
  width: 22px;
  height: 22px;
  border: 2px solid var(--c-gray);
  border-radius: 4px;
  background: var(--c-ink);
}
input[type="checkbox"]:hover { border-color: var(--c-white); }
input[type="checkbox"]:checked { border-color: var(--c-yellow); background: var(--c-yellow); }
input[type="checkbox"]:checked::after { border-color: var(--c-ink); }

/* Section titles: plain bold type. style.css's glowing yellow bar before each one is gone. */
.section-title {
  margin: 0 0 var(--sub-space-4);
  font-size: var(--sub-text-lg);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--c-white);
}
.section-title::before { content: none; }

/* The entry screens' card (login, join, forgot): one panel, no glow. */
.auth-card {
  background: var(--c-panel);
  border: 0;
  border-radius: var(--r-card);
  box-shadow: none;
}
.auth-card::before { content: none; }
.auth-title {
  font-size: var(--sub-fs-title);
  font-weight: 700;
  letter-spacing: 0;
}

/* ───── The view-as banner: one yellow strip, the admin's ───── */
.sub-banner {
  position: sticky;
  top: 0;
  z-index: 110;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sub-space-3);
  padding: var(--sub-space-2) var(--sub-space-4) calc(var(--sub-space-2) + 3px);
  padding-top: calc(var(--sub-space-2) + env(safe-area-inset-top, 0px));
  background: var(--c-yellow);
  color: var(--c-ink);
  font-weight: 700;
  font-size: var(--sub-text-sm);
}
.sub-banner__text { overflow-wrap: anywhere; }

/* ───── The header: logo, the four places as one segmented control, the account ───── */
.sub-header {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "logo account" "nav nav";
  align-items: center;
  gap: var(--sub-space-2) var(--sub-space-4);
  max-width: calc(var(--sub-max-w) + 2 * var(--sub-gutter));
  margin: 0 auto;
  padding: var(--sub-space-3) var(--sub-gutter) var(--sub-space-2);
  padding-top: calc(var(--sub-space-3) + env(safe-area-inset-top, 0px));
}
.sub-banner + .sub-header { padding-top: var(--sub-space-3); }
.sub-header__home { grid-area: logo; display: inline-flex; align-items: center; min-height: var(--sub-touch); }
.sub-header__logo { height: var(--sub-logo-h); width: auto; }
.sub-header__nav { grid-area: nav; min-width: 0; }
.sub-header__account {
  grid-area: account;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--sub-space-3);
  min-width: 0;
  color: var(--c-gray);
  font-size: var(--sub-text-sm);
}
.sub-header__email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-header .sub-link-button { padding-inline: 0; color: var(--c-white); font-weight: 400; }
@media (min-width: 1100px) {
  .sub-header {
    grid-template-columns: auto auto 1fr;
    grid-template-areas: "logo nav account";
    gap: var(--sub-space-8);
    padding-block: var(--sub-space-4);
  }
}

/* style.css turns every form into a column with a wide gap; these sit inline. */
.sub-inline-form { display: inline-flex; flex-direction: row; gap: 0; margin: 0; }

/* A quiet text action: white, underlined on hover. */
.sub-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--sub-touch);
  padding: var(--sub-space-2) var(--sub-space-3);
  border: 0;
  border-radius: var(--sub-r-link);
  background: none;
  color: var(--c-white);
  font: inherit;
  font-size: var(--sub-text-sm);
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
}
.sub-link-button:hover,
.sub-link-button:focus-visible {
  color: var(--c-white);
  background: none;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.sub-banner .sub-link-button {
  min-height: 36px;
  padding: 0 var(--sub-space-4) 2px;
  border: 2px solid var(--c-ink);
  border-radius: var(--r-pill);
  color: var(--c-ink);
  font-weight: 700;
}
.sub-banner .sub-link-button:hover,
.sub-banner .sub-link-button:focus-visible {
  color: var(--c-yellow);
  background: var(--c-ink);
  text-decoration: none;
  outline-color: var(--c-ink);
}

.sub-main {
  position: relative;
  z-index: 2;
  max-width: calc(var(--sub-max-w) + 2 * var(--sub-gutter));
  margin: 0 auto;
  padding: var(--sub-space-3) max(var(--sub-gutter), env(safe-area-inset-right))
    var(--sub-space-20) max(var(--sub-gutter), env(safe-area-inset-left));
}
.sub-main .auth-page { min-height: auto; padding: var(--sub-space-4) 0; }
.sub-main .auth-card { padding: var(--sub-space-8) var(--sub-space-5); }

/* Alerts: an error is a yellow slab with black words, a note a gray one with white words. */
.sub-alert {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: var(--sub-space-3) var(--sub-space-4) calc(var(--sub-space-3) + 3px);
  border: 0;
  border-radius: var(--r-card);
  font-weight: 400;
}
.sub-alert--error { color: var(--c-ink); background: var(--c-yellow); font-weight: 700; }
.sub-alert--error a { color: var(--c-ink); text-decoration: underline; }
.sub-alert--error:focus-visible { outline-color: var(--c-white); }
.sub-alert--info { color: var(--c-white); background: var(--c-raise); }
.sub-alert--info a { color: var(--c-white); text-decoration: underline; text-underline-offset: 3px; }

.sub-hint { margin: 0; font-size: var(--sub-text-sm); color: var(--c-gray); }
.input[readonly] { color: var(--c-gray); background: var(--c-ink); }

.sub-card-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sub-space-2) var(--sub-space-4);
  margin-top: var(--sub-space-5);
  position: relative;
  z-index: 1;
}
.sub-card-links a { color: var(--c-white); text-decoration: underline; text-underline-offset: 4px; }
.sub-card-text {
  margin: 0 0 var(--sub-space-5);
  text-align: center;
  color: var(--c-white);
  position: relative;
  z-index: 1;
}
.sub-card-form { position: relative; z-index: 1; }
/* A Google sign-in's notice and the Google button sit above the form, at its own spacing. */
.sub-login-notice { margin-bottom: var(--sub-space-5); }
.auth-card .google-signin {
  position: relative;
  z-index: 1;
  margin-bottom: var(--sub-space-5);
}
/* The page an app's own browser gets for Google: the link and its copy button. */
.open-in-browser {
  display: flex;
  flex-direction: column;
  gap: var(--sub-space-3);
}

.sub-page-title {
  margin: 0 0 var(--sub-space-1);
  font-family: var(--font-display);
  font-size: var(--sub-fs-title);
  font-weight: 700;
  line-height: var(--sub-lh-tight);
  letter-spacing: 0;
}
.sub-lead { max-width: var(--sub-lead-w); margin: 0; color: var(--c-gray); }
.sub-empty {
  margin-top: var(--sub-space-4);
  padding: var(--sub-space-8) var(--sub-space-5);
  text-align: center;
  color: var(--c-gray);
  background: var(--c-panel);
  border: 0;
  border-radius: var(--r-card);
}

@media (min-width: 720px) {
  .sub-main .auth-card { padding: var(--sub-space-12) var(--sub-space-10); }
}

/* ───── Shared pieces ───── */
.sub-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sub-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sub-space-3) var(--sub-space-4);
}

/* A panel: one #1B1B1B plate. A headed one (sub-panel--headed) carries a head bar on top and
   its content in sub-panel__body. */
.sub-panel {
  position: relative;
  min-width: 0;
  padding: var(--sub-space-5) var(--sub-space-4);
  background: var(--c-panel);
  border: 0;
  border-radius: var(--r-card);
}
.sub-panel.sub-panel--headed {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.sub-panel__body { flex: 1; padding: var(--sub-space-5) var(--sub-space-4); }
@media (min-width: 700px) {
  .sub-panel { padding: var(--sub-space-6); }
  .sub-panel__body { padding: var(--sub-space-6); }
}

/* The head bar: gray at rest. The panel being operated (is-focus) gets a yellow copy of it
   (sub_ui.js adds sub-ph__lit), wiped in from the reading side; without the script the bar
   simply turns yellow. */
.sub-ph { position: relative; flex: none; }
.sub-ph__bar,
.sub-ph__lit {
  display: flex;
  align-items: center;
  gap: var(--sub-space-3);
  min-height: var(--sub-head-h);
  padding: var(--sub-space-2) var(--sub-space-5) calc(var(--sub-space-2) + 3px);
}
.sub-ph__bar { background: var(--c-raise); }
.sub-ph__lit {
  position: absolute;
  inset: 0;
  background: var(--c-yellow);
  color: var(--c-ink);
  pointer-events: none;
  clip-path: inset(0 0 0 100%);
  transition: clip-path .6s var(--sub-ease);
}
.is-focus > .sub-ph > .sub-ph__lit { clip-path: inset(0 0 0 0); }
.is-focus > .sub-ph:not(.has-lit) > .sub-ph__bar { background: var(--c-yellow); color: var(--c-ink); }
.sub-ph__title {
  min-width: 0;
  margin: 0;
  font-size: var(--sub-fs-head);
  font-weight: 700;
  line-height: var(--sub-lh);
}
.sub-ph__rank { flex: none; min-width: 2.2ch; font-size: var(--sub-fs-head); font-weight: 700; }
.sub-ph__state { flex: none; font-size: var(--sub-fs-head); font-weight: 300; }
.sub-ph__aux { flex: none; margin-inline-start: auto; font-size: var(--sub-text-sm); }
.sub-ph__lit .sub-ph__aux { color: var(--c-ink); }

/* A segmented control: a pill track, its picked option a yellow pill that slides there
   (sub_ui.js clones the row as sub-seg__lit and moves a clip over it). The picked option is
   the one marked aria-current, aria-selected, aria-pressed or aria-checked "true", or the one
   holding a checked input. */
.sub-seg {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  padding: var(--sub-space-1);
  border-radius: var(--r-pill);
  background: var(--c-panel);
}
.sub-seg--well { background: var(--c-ink); }
.sub-seg[hidden] { display: none; }
.sub-seg__track { position: relative; flex: 1 1 auto; min-width: 0; }
.sub-seg__row { display: flex; }
.sub-seg__opt {
  position: relative;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sub-space-2);
  min-height: var(--sub-touch);
  margin: 0;
  padding: 0 var(--sub-space-4) 2px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--c-white);
  font: inherit;
  font-size: var(--sub-text-sm);
  font-weight: 400;
  line-height: var(--sub-lh-tight);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.sub-seg__row > .sub-seg__opt:hover { background: var(--c-raise); color: var(--c-white); }
.sub-seg__count { font-weight: 300; }
.sub-seg__lit {
  position: absolute;
  inset: 0;
  background: var(--c-yellow);
  color: var(--c-ink);
  pointer-events: none;
  clip-path: inset(0 100% 0 0 round 999px);
  transition: clip-path .55s var(--sub-ease);
}
.sub-seg__lit .sub-seg__opt { color: var(--c-ink); }
.sub-seg:not(.has-lit) .sub-seg__opt:is([aria-current="page"], [aria-selected="true"],
  [aria-pressed="true"], [aria-checked="true"], :has(input:checked)) {
  background: var(--c-yellow);
  color: var(--c-ink);
}
.sub-seg--nav { display: flex; width: 100%; }
.sub-seg--nav .sub-seg__opt { padding-inline: var(--sub-space-2); }
@media (min-width: 1100px) {
  .sub-seg--nav { width: auto; }
  .sub-seg--nav .sub-seg__opt { padding-inline: var(--sub-space-5); }
}

/* Readouts: a label on the reading side, its value bold at the far end. */
.sub-ro { display: grid; align-content: start; column-gap: var(--sub-space-6); margin: 0; }
.sub-ro__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sub-space-3);
  min-height: 34px;
  padding-block: 3px;
}
.sub-ro dt { color: var(--c-gray); font-size: var(--sub-text-sm); white-space: nowrap; }
.sub-ro dd { margin: 0; font-weight: 700; text-align: end; }

/* A meter: the value large, a white fill on a gray track. */
.sub-meter { display: grid; gap: var(--sub-space-2); }
.sub-meter + .sub-meter { margin-top: var(--sub-space-5); }
.sub-meter__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sub-space-3); }
.sub-meter__val { font-size: 36px; font-weight: 700; line-height: 1; }
.sub-meter__val small { font-size: var(--sub-text-sm); font-weight: 400; }
.sub-meter__bar {
  position: relative;
  height: var(--sub-bar-track);
  overflow: hidden;
  background: var(--c-raise);
  border-radius: 2px;
}
.sub-meter__fill {
  position: absolute;
  inset: 0;
  background: var(--c-white);
  transform-origin: right center;
  transform: scaleX(var(--fill, 0));
}

/* The one big number of a panel. */
.sub-figure {
  margin: 0;
  direction: ltr;
  font-size: var(--sub-fs-display);
  font-weight: 700;
  line-height: .9;
  white-space: nowrap;
}
.sub-figure small { margin-inline-start: 2px; font-size: .5em; font-weight: 400; }

/* Inline stroke icons (Michal has no ✓ or ✗ and draws ◊ blank). */
.sub-icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The area's one focus ring. The panels and notes that take the focus from a script, so a
   keyboard user keeps their place when an upload or a revision moves on, show it for the
   keyboard alone. */
.sub-progress-panel:focus,
.sub-upload-note:focus,
.sub-short__status:focus,
.sub-kit-panel:focus { outline: none; }
.sub-link-button:focus-visible,
.sub-back:focus-visible,
.sub-episode__link:focus-visible,
.sub-card__link:focus-visible,
.sub-card__tag--sensitive:focus-visible,
.sub-pick:focus-visible,
.sub-upload-note__link:focus-visible,
.sub-file-input:focus-visible + .sub-drop,
.sub-progress-panel:focus-visible,
.sub-upload-note:focus-visible,
.sub-short__status:focus-visible,
.sub-library__tab:focus-visible,
.sub-kit-panel:focus-visible,
.sub-kit-copy:focus-visible,
.sub-kit-more:focus-visible,
.sub-kit-fallback:focus-visible {
  outline: var(--sub-ring) solid var(--c-yellow);
  outline-offset: var(--sub-space-1);
}

/* The live dot: this is being worked on right now. */
.sub-episode__status[data-status="processing"]::before,
.sub-card__badge::before,
.sub-short__status[data-tone="updating"]::before {
  content: '';
  flex: 0 0 auto;
  width: var(--sub-space-2);
  height: var(--sub-space-2);
  border-radius: 50%;
  background: currentColor;
  animation: dotPulse 1.6s ease-in-out infinite;
}

bdi { overflow-wrap: anywhere; }

/* The admin's view-as banner sticks to the top: whatever is focused or scrolled to stops
   below it rather than under it. */
html:has(.sub-banner) { scroll-padding-top: var(--sub-sticky-reach); }

/* Entrance: the panels power on, masked from the top, one after another; the focused bar
   wipes in after them. Plays once per page, within about a second. */
@keyframes sub-power-on {
  from { clip-path: inset(0 0 100% 0); transform: translateY(14px); }
  to { clip-path: inset(0 0 0 0); transform: none; }
}
@keyframes sub-lit-in { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes sub-fill-in { from { transform: scaleX(0); } }
.is-entering .sub-anim {
  animation: sub-power-on .8s var(--sub-ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.is-entering .is-focus > .sub-ph > .sub-ph__lit { animation: sub-lit-in .65s var(--sub-ease) .5s both; }
.is-entering .sub-grow { animation: sub-fill-in 1s var(--sub-ease) .35s both; }
@media (prefers-reduced-motion: reduce) {
  .is-entering .sub-anim,
  .is-entering .is-focus > .sub-ph > .sub-ph__lit,
  .is-entering .sub-grow { animation: none; }
  .sub-ph__lit,
  .sub-seg__lit { transition: none; }
}

/* ───── Skip link, focus ring and the legal footer on every /app page ───── */
.sub-skip-link {
  position: absolute;
  inset-inline-start: var(--sub-space-4);
  top: -100px;
  z-index: 100;
  padding: var(--sub-space-3) var(--sub-space-4);
  background: var(--accent);
  color: var(--ink);
  font-weight: 700;
  border-radius: var(--sub-r-link);
  text-decoration: none;
}
.sub-skip-link:focus { top: var(--sub-space-4); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sub-main:focus { outline: none; }

.sub-footer {
  position: relative;
  z-index: 2;
  max-width: calc(var(--sub-max-w) + 2 * var(--sub-gutter));
  margin: 0 auto;
  padding: var(--sub-space-6) var(--sub-gutter)
    calc(var(--sub-space-6) + env(safe-area-inset-bottom, 0px));
  border-top: 2px solid var(--c-panel);
  font-size: var(--sub-text-xs);
  color: var(--c-gray);
}
.sub-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sub-space-2) var(--sub-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sub-footer a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.sub-footer a:hover { color: var(--c-white); }
.sub-footer__identity { margin: var(--sub-space-2) 0 0; }
/* A detail of the business still missing from the identity line: white on gray, not a tint. */
.sub-footer .legal-fill {
  padding-inline: 0.2em;
  background: var(--c-raise);
  color: var(--c-white);
}

/* ───── Home: the head, the podcast's name over the title ───── */
.sub-intro {
  display: grid;
  gap: var(--sub-space-1);
  padding-block: var(--sub-space-3) var(--sub-space-5);
}
.sub-kicker { margin: 0; color: var(--c-gray); font-size: var(--sub-text-sm); }
@media (min-width: 700px) {
  .sub-intro { padding-block: var(--sub-space-6); }
}

/* ───── Home: the upload, then the episode being made, one column ───── */
.sub-deck { display: grid; gap: var(--sub-gap); margin-bottom: var(--sub-space-10); }

/* The episode being made: its percent as the panel's number, one bar, the step it is on. */
/* Its bar is yellow (Ronen, 31/10): the one thing on the page that is moving right now. */
.sub-pipe .sub-ph__bar { background: var(--c-yellow); color: var(--c-ink); }
.sub-pipe .sub-ph__bar .sub-ph__aux { color: var(--c-ink); }
.sub-pipe__body { display: grid; align-content: start; gap: var(--sub-space-5); }
.sub-pipe__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sub-space-4);
}
.sub-pipe__title { margin: 0; min-width: 0; font-size: var(--sub-fs-head); font-weight: 700; }
.sub-pipe__title a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.sub-pipe__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sub-pipe__stage { margin: 0; }
.sub-pipe .sub-meter__fill { transition: transform var(--sub-journey-glide) linear; }

/* ───── Home: upload ───── */
.sub-upload { display: grid; gap: var(--sub-space-4); }
.sub-drop-area { display: grid; gap: var(--sub-space-3); }
/* The one way to upload, big enough that it can't be missed; a file dropped on it goes up. */
.sub-upload-cta {
  width: 100%;
  min-height: 72px;
  gap: var(--sub-space-3);
  font-size: var(--sub-text-lg);
  font-weight: 700;
}
.sub-upload-cta .sub-icon { width: 24px; height: 24px; stroke-width: 2.2; }
.sub-upload-cta.is-dragging { background: var(--c-white); color: var(--c-ink); }
.sub-file-input:focus-visible + .sub-upload-cta {
  outline: var(--sub-ring) solid var(--c-white);
  outline-offset: var(--sub-space-1);
}
@media (min-width: 700px) {
  .sub-upload-cta { min-height: 88px; font-size: var(--sub-fs-title); }
}
.sub-link-fold { justify-self: center; text-align: center; }
.sub-link-fold[open] { justify-self: stretch; text-align: start; }
.sub-link-fold__label {
  display: inline-flex;
  align-items: center;
  min-height: var(--sub-touch);
  color: var(--c-gray);
  font-size: var(--sub-text-sm);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  list-style: none;
}
.sub-link-fold__label::-webkit-details-marker { display: none; }
.sub-link-fold__label:hover,
.sub-link-fold[open] .sub-link-fold__label { color: var(--c-white); }

.sub-drop {
  display: flex;
  flex-direction: column;
  gap: var(--sub-space-3);
  margin: 0;
  padding: var(--sub-space-4);
  border-radius: var(--r-card);
  background: var(--c-ink);
  cursor: pointer;
  /* It is a <label>, and style.css gives labels the small gray caption look. */
  font-family: var(--font-body);
  font-size: var(--sub-text-base);
  color: var(--c-white);
  transition: background-color .25s var(--sub-ease);
}
.sub-drop:hover,
.sub-drop.is-dragging { background: var(--c-raise); }
.sub-drop.is-dragging { outline: var(--sub-ring) solid var(--c-yellow); outline-offset: -2px; }
.sub-drop__title { font-weight: 700; line-height: 1.4; }
.sub-drop__meta { font-size: var(--sub-text-sm); color: var(--c-gray); }
.sub-drop__pick { align-self: stretch; margin-top: var(--sub-space-2); gap: var(--sub-space-2); }
.sub-drop:hover .sub-drop__pick { background: var(--c-white); color: var(--c-ink); }

.sub-resume {
  display: grid;
  gap: var(--sub-space-4);
  padding: var(--sub-space-4);
  border-radius: var(--r-card);
  background: var(--c-raise);
}
.sub-resume__text { display: grid; gap: var(--sub-space-1); }
.sub-resume__text p { margin: 0; }
.sub-resume__text .sub-hint { color: var(--c-white); }
.sub-resume__title { font-weight: 700; font-size: var(--sub-fs-head); color: var(--c-white); }
.sub-resume__file { font-weight: 700; }
.sub-resume__sent { color: var(--c-white); }

/* The question before a short episode goes up (sub_upload.js). */
.sub-confirm {
  width: min(440px, calc(100vw - 2 * var(--sub-space-4)));
  box-sizing: border-box;
  padding: var(--sub-space-5);
  border: 0;
  border-radius: var(--r-card);
  background: var(--c-panel);
  color: var(--c-white);
}
.sub-confirm::backdrop { background: var(--c-ink); }
.sub-confirm[open] { display: grid; gap: var(--sub-space-4); }
.sub-confirm__title { margin: 0; font-weight: 700; font-size: var(--sub-fs-head); }
.sub-confirm__text { margin: 0; line-height: 1.5; }

.sub-upload-form { gap: var(--sub-space-5); }
.sub-textarea { resize: vertical; min-height: 3.5rem; overflow-y: hidden; }
.sub-file {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sub-space-1) var(--sub-space-3);
  margin: 0;
}
.sub-file__name { font-weight: 700; font-size: var(--sub-fs-head); }
.sub-file__size { font-size: var(--sub-text-sm); color: var(--c-gray); }

/* ───── Thumbnail references: the channel's tiles (/app/channel) and the episode's pick in
   the upload form, each a 16:9 frame. A picked tile wears a yellow frame and a yellow strip
   with the word "נבחר", so the choice never rests on colour alone. ───── */
.sub-thumb-tiles {
  display: grid;
  gap: var(--sub-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sub-thumb-frame {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0;
  background: var(--c-raise);
  outline: var(--sub-ring-picked) solid transparent;
  outline-offset: -3px;
}
.sub-thumb-frame__image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
/* The tiles that hold words, not a picture: a short bar on a phone, a frame among the frames
   on a wide screen. */
.sub-thumb-frame--text {
  aspect-ratio: auto;
  min-block-size: var(--sub-touch);
  padding: var(--sub-space-3) var(--sub-space-4);
  text-align: center;
  font-weight: 700;
}
/* A choice, not a form field's caption: none of style.css's label look. */
.sub-thumb-tile {
  display: grid;
  cursor: pointer;
  font: inherit;
  color: var(--c-white);
}
.sub-thumb-tile:hover .sub-thumb-frame { outline-color: var(--c-white); }
.sub-thumb-tile__input:checked + .sub-thumb-frame { outline-color: var(--c-yellow); }
.sub-thumb-tile__input:focus-visible + .sub-thumb-frame,
.sub-thumb-other:focus-visible .sub-thumb-frame,
.sub-file-input:focus-visible + .sub-thumb-upload {
  outline: var(--sub-ring) solid var(--c-yellow);
  outline-offset: var(--sub-space-1);
}
.sub-thumb-tile__picked {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: none;
  padding: var(--sub-space-1) var(--sub-space-3) calc(var(--sub-space-1) + 3px);
  background: var(--c-yellow);
  color: var(--c-ink);
  font-size: var(--sub-text-sm);
  font-weight: 700;
  line-height: 1.2;
  text-align: start;
}
.sub-thumb-tile__input:checked + .sub-thumb-frame .sub-thumb-tile__picked { display: block; }
.sub-thumb-other {
  display: grid;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--c-white);
  cursor: pointer;
}
.sub-thumb-other .sub-thumb-frame { background: var(--c-ink); outline: 2px solid var(--c-raise); }
.sub-thumb-other:hover .sub-thumb-frame,
.sub-thumb-other[aria-expanded="true"] .sub-thumb-frame { outline-color: var(--c-white); }
.sub-thumb-pick {
  display: grid;
  gap: var(--sub-space-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.sub-thumb-pick legend {
  padding: 0;
  margin-block-end: var(--sub-space-2);
}
.sub-thumb-add {
  display: grid;
  gap: var(--sub-space-4);
}
.sub-thumb-add[hidden] { display: none; }
.sub-thumb-link {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sub-space-2);
}
.sub-thumb-link .input {
  flex: 1 1 16rem;
  min-width: 0;
}
.sub-thumb-upload { justify-self: start; }
/* A status line with nothing to say leaves the flow but stays for a screen reader. */
.sub-thumb-status:empty { position: absolute; }

@media (min-width: 720px) {
  .sub-thumb-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sub-thumb-frame--text { aspect-ratio: 16 / 9; }
}

/* The upload under way: the percent as the panel's number and a white bar. */
.sub-progress-panel { display: grid; gap: var(--sub-space-3); }
.sub-progress-panel p { margin: 0; }
.sub-progress-panel__phase { color: var(--c-white); }
.sub-progress-panel__phase bdi { font-weight: 700; }
.sub-progress-panel__percent {
  direction: ltr;
  text-align: end;
  font-size: var(--sub-fs-display);
  font-weight: 700;
  line-height: .9;
  color: var(--c-white);
}
.sub-progress {
  height: var(--sub-bar-track);
  border-radius: 2px;
  background: var(--c-raise);
  overflow: hidden;
}
.sub-progress__fill {
  display: block;
  height: 100%;
  background: var(--c-white);
  transform: scaleX(var(--progress, 0));
  transform-origin: right;
  transition: transform .4s var(--sub-ease);
}
.sub-progress-panel__bytes { color: var(--c-gray); font-size: var(--sub-text-sm); }
.sub-progress-panel__cancel { justify-self: start; padding-inline: 0; }

.sub-upload-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sub-space-3);
}
.sub-upload-note p { margin: 0; }
.sub-upload-note__link {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: var(--sub-space-1);
}

/* An episode brought in from a link (sub_link_import): the form folded under the upload
   button, and the imports in flight above it, each a row with its own line and bar. */
.sub-link-import { display: grid; gap: var(--sub-space-2); padding-top: var(--sub-space-2); }
.sub-link-import .sub-hint { margin: 0; }
.sub-imports {
  display: grid;
  gap: var(--sub-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sub-imports[hidden] { display: none; }
.sub-import { display: grid; gap: var(--sub-space-2); background: var(--c-ink); }
/* A card's buttons set their own display, which would outrank the hidden attribute. */
.sub-import [hidden] { display: none; }
.sub-import p { margin: 0; }
.sub-import__name { font-weight: 700; overflow-wrap: anywhere; }
.sub-import__state { color: var(--c-white); }
.sub-import[data-kind="done"] { border-inline-start: var(--sub-ring-picked) solid var(--c-white); }
.sub-import[data-kind="failed"] { border-inline-start: var(--sub-ring-picked) solid var(--c-yellow); }
.sub-import[data-kind="failed"] .sub-import__state { color: var(--sub-danger-text); }
.sub-import__bytes { font-size: var(--sub-text-sm); color: var(--c-gray); }
.sub-import__bytes:empty { display: none; }
.sub-import__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sub-space-4);
}
.sub-import__actions .sub-link-button { padding-inline: 0; }

/* ───── The feedback form ───── */
.sub-feedback { gap: var(--sub-space-5); }

/* ───── Home: the beta terms, in the upload panel's place until a tester accepts them ───── */
.sub-beta-terms .sub-panel__body { display: grid; gap: var(--sub-space-4); }
.sub-beta-terms__text {
  max-width: var(--sub-read-w);
  color: var(--c-white);
  line-height: 1.5;
}
.sub-beta-terms__text p { margin: 0 0 var(--sub-space-3); }
.sub-beta-terms__form { display: grid; gap: var(--sub-space-4); }
/* A sentence to agree to, not a field's caption: style.css's label look is undone. */
.sub-check {
  display: flex;
  align-items: flex-start;
  gap: var(--sub-space-3);
  min-height: var(--sub-touch);
  font-family: inherit;
  font-size: var(--sub-text-base);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-white);
  cursor: pointer;
}
.sub-check input { flex: none; margin: 0; }
.sub-check input:focus-visible {
  outline: var(--sub-ring) solid var(--c-yellow);
  outline-offset: var(--sub-space-1);
}

/* ───── Home: the episode list, one row each ───── */
.sub-episodes__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sub-space-1) var(--sub-space-4);
  margin-bottom: var(--sub-space-3);
}
.sub-episodes__head .section-title { margin: 0; }
/* The period's quota, small and aside: it leads to the billing page. */
.sub-quota-note { color: var(--c-gray); font-size: var(--sub-text-sm); text-decoration: none; }
.sub-quota-note:hover { color: var(--c-white); }
.sub-episode-list {
  display: grid;
  gap: var(--sub-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sub-episode {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-radius: var(--r-card);
  background: var(--c-panel);
  overflow: hidden;
}
/* Beside the row's link, the pencil that renames the episode (sub_home.js); while the name is
   in its field, the field takes the row. */
.sub-episode__edit {
  display: inline-grid;
  place-items: center;
  width: var(--sub-touch);
  height: var(--sub-touch);
  margin-inline-end: var(--sub-space-2);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--c-gray);
  cursor: pointer;
}
.sub-episode__edit:hover { background: var(--c-raise); color: var(--c-white); }
.sub-episode.is-renaming > .sub-episode__link,
.sub-episode.is-renaming > .sub-episode__edit { display: none; }
.sub-episode__rename {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sub-space-2) var(--sub-space-3);
  padding: var(--sub-space-3) var(--sub-space-4);
}
.sub-episode__rename-input { flex: 1 1 16rem; min-width: 0; }
.sub-episode__rename-error { flex-basis: 100%; margin: 0; }
.sub-episode-list .sub-episode__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "title title go" "date status go" "bar bar bar";
  align-items: center;
  gap: var(--sub-space-2) var(--sub-space-4);
  padding: var(--sub-space-3) var(--sub-space-4) var(--sub-space-3);
  color: var(--c-white);
  text-decoration: none;
  transition: background-color .2s var(--sub-ease);
}
.sub-episode-list .sub-episode__link:hover { color: var(--c-white); background: var(--c-raise); }
.sub-episode-list .sub-episode__title {
  grid-area: title;
  font-weight: 700;
  font-size: var(--sub-fs-head);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.sub-episode-list .sub-episode__link:hover .sub-episode__title {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.sub-episode-list .sub-episode__date {
  grid-area: date;
  font-size: var(--sub-text-sm);
  color: var(--c-gray);
  white-space: nowrap;
}
.sub-episode-list .sub-episode__status {
  grid-area: status;
  display: inline-flex;
  align-items: center;
  gap: var(--sub-space-2);
  min-width: 0;
  font-size: var(--sub-text-sm);
  font-weight: 400;
  color: var(--c-gray);
}
.sub-episode-list .sub-episode__status[data-status="processing"] { color: var(--c-white); }
.sub-episode-list .sub-episode__status[data-status="failed"] { color: var(--sub-danger-text); }
.sub-episode-list .sub-episode__go { grid-area: go; align-self: center; font-size: 22px; }
/* A row whose episode is being made: a thin white line under it, never stepping back. */
.sub-episode-list .sub-episode__progress {
  grid-area: bar;
  position: relative;
  display: block;
  height: var(--sub-row-bar-h);
  margin: 0;
  overflow: hidden;
  border-radius: 2px;
  background: var(--c-raise);
}
.sub-episode-list .sub-episode__progress[hidden] { display: none; }
.sub-episode-list .sub-episode__progress::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-white);
  transform-origin: 100% 50%;
  transform: scaleX(var(--progress, 0));
}
.sub-episode-list .sub-episode__progress.is-live::before {
  transition: transform var(--sub-journey-glide) linear;
}
@media (min-width: 700px) {
  .sub-episode-list .sub-episode__link {
    grid-template-columns: minmax(0, 1fr) 7.5em 12em 2em;
    grid-template-areas: "title date status go" "bar bar bar bar";
    padding: var(--sub-space-4) var(--sub-space-5);
  }
}

/* ───── The head: back, title, one gray line ───── */
.sub-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sub-space-2);
  min-height: var(--sub-touch);
  color: var(--c-white);
  font-size: var(--sub-text-sm);
  font-weight: 400;
  text-decoration: none;
}
.sub-back::before { content: '→'; }
.sub-back:hover { text-decoration: underline; text-underline-offset: 4px; }
.sub-episode-head {
  display: grid;
  gap: var(--sub-space-1);
  padding-top: var(--sub-space-1);
}
.sub-back + .sub-episode-head__title { margin-top: var(--sub-space-1); }
.sub-main .sub-episode-head__title {
  margin: 0;
  font-size: var(--sub-fs-title);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.sub-episode-head__meta { margin: 0; color: var(--c-gray); }
/* Until when the shorts take revisions (sub_retention), after the date. */
.sub-episode-head__revise::before { content: '· '; }
/* The client's requested moments the run did not find: a found one is a short below. */
.sub-requests {
  display: grid;
  gap: var(--sub-space-1);
  margin: var(--sub-space-2) 0 0;
  padding: 0;
  list-style: none;
  color: var(--c-gray);
  font-size: var(--sub-text-sm);
}

/* ───── The states: the journey panel, and a plain panel for the rest ───── */
.sub-state {
  display: grid;
  justify-items: start;
  gap: var(--sub-space-3);
  margin-top: var(--sub-space-5);
}
.sub-state__title {
  margin: 0;
  font-size: var(--sub-fs-head);
  font-weight: 700;
  line-height: 1.35;
}
.sub-state__text { margin: 0; max-width: var(--sub-lead-w); color: var(--c-gray); }
.sub-state--failed { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.sub-state__icon { width: 24px; height: 24px; margin-top: 2px; }

/* The journey (sub_progress): the step it is on beside the big figure, a bar per step.
   Done steps are full, the current one moves inside its bar while the job runs. */
.sub-journey { display: flex; gap: 0; }
.sub-journey__body { display: grid; gap: var(--sub-space-5); }
.sub-journey__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sub-space-4);
}
.sub-journey__figure { flex: none; }
.sub-journey__detail { margin: 0; max-width: var(--sub-lead-w); }
.sub-journey__count { margin: 0; font-weight: 700; }
.sub-journey .sub-state__text { font-size: var(--sub-text-sm); }

.sub-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sub-space-4) var(--sub-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sub-steps__item {
  display: grid;
  align-content: start;
  gap: var(--sub-space-2);
  font-size: var(--sub-text-sm);
  line-height: var(--sub-lh);
}
.sub-steps__item[data-state="upcoming"] { color: var(--c-gray); }
.sub-steps__item[data-state="current"] { font-weight: 700; }
.sub-steps__mark {
  position: relative;
  display: block;
  height: var(--sub-bar-track);
  overflow: hidden;
  background: var(--c-raise);
  border-radius: 2px;
}
.sub-steps__mark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-white);
  transform-origin: right center;
  transform: scaleX(0);
  transition: transform .9s var(--sub-ease);
}
.sub-steps__item[data-state="done"] .sub-steps__mark::after { transform: scaleX(1); }
.sub-steps__item[data-state="current"] .sub-steps__mark::after { transform: scaleX(.5); }
@media (min-width: 1100px) {
  .sub-steps {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}
@keyframes sub-step-live {
  from { transform: scaleX(.3); }
  to { transform: scaleX(.7); }
}
@media (prefers-reduced-motion: no-preference) {
  .sub-steps__item[data-state="current"] .sub-steps__mark::after {
    animation: sub-step-live 1.6s var(--sub-ease) infinite alternate;
  }
}

/* ───── The library tabs and the shorts' order: two segmented controls ───── */
.sub-epbar {
  display: grid;
  gap: var(--sub-space-3);
  margin-block: var(--sub-space-5) var(--sub-space-4);
}
/* The order belongs to the shorts: it goes while another part of the library is open. */
.sub-epbar:has(#tab-shorts[aria-selected="false"]) #gallery-sort { display: none; }
.sub-seg.sub-library {
  display: block;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.sub-library::-webkit-scrollbar { display: none; }
.sub-library .sub-seg__track { width: max-content; min-width: 100%; }
.sub-library__hint { display: none; }
.sub-library__soon { font-weight: 300; }
.sub-seg__row > .sub-library__tab[aria-disabled="true"] { color: var(--c-gray); cursor: not-allowed; }
.sub-seg__row > .sub-library__tab[aria-disabled="true"]:hover { background: none; color: var(--c-gray); }
/* A part being made or failed: a small mark at the tab's corner, out of the text's way, so
   the panel's words stay the signal. The yellow copy never shows one. */
.sub-library__dot { display: none; }
.sub-library__dot.is-making,
.sub-library__dot.is-failed {
  position: absolute;
  top: var(--sub-space-2);
  inset-inline-end: var(--sub-space-2);
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.sub-library__dot.is-making { background: var(--c-white); }
.sub-library__dot.is-failed { border: 1.5px solid var(--c-white); }
.sub-seg__lit .sub-library__dot { display: none; }
.sub-seg.sub-sort { display: flex; }
@media (min-width: 1100px) {
  .sub-epbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sub-space-4);
    margin-block: var(--sub-space-6) var(--sub-space-4);
  }
  .sub-seg.sub-library { display: inline-block; flex: 0 1 auto; min-width: 0; }
  .sub-seg.sub-sort { display: inline-flex; flex: none; }
}
/* Live while the part is made: the dot breathes in size, never in tint. */
@keyframes sub-dot-live { 50% { transform: scale(.6); } }
@media (prefers-reduced-motion: no-preference) {
  .sub-library__dot.is-making { animation: sub-dot-live 1.6s var(--sub-ease) infinite; }
}

/* ───── The shorts tab: publishing the whole episode, then the gallery ───── */
/* One column held to the page: a long hook in the timeline's head line must not widen it. */
.sub-kit-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--sub-space-6);
}
#panel-shorts { gap: 0; }
/* The full episode's publish button: the page's one primary action. */
#publish-episode-open {
  margin-inline-end: 0;
  min-height: var(--sub-touch);
  padding: 0 var(--sub-space-5) 2px;
  background: var(--c-yellow);
  color: var(--c-ink);
  font-size: var(--sub-text-sm);
  font-weight: 700;
}
#publish-episode-open:hover { background: var(--c-white); color: var(--c-ink); }
#publish-episode-open:focus-visible { outline-color: var(--c-white); }
@media (min-width: 700px) {
  #publish-episode-open {
    min-height: var(--sub-pill-h);
    padding-inline: var(--sub-space-6);
    font-size: var(--sub-text-base);
  }
}

.sub-gallery { display: grid; grid-template-columns: minmax(0, 1fr); }
.sub-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sub-gap); }

/* ───── The episode timeline (sub_timeline.js): who spoke when, in two grays, and a yellow
   mark where each short came from. Time runs the way the page reads, from the right. It
   stays at the top while the shorts scroll under it. ───── */
.sub-tl-wrap {
  position: sticky;
  top: 0;
  z-index: 10;
  padding-block: var(--sub-space-2) var(--sub-space-3);
  background: var(--c-ink);
}
html:has(.sub-banner) .sub-tl-wrap { top: var(--sub-sticky-reach); }
.sub-tl {
  padding: var(--sub-space-3) var(--sub-space-4) var(--sub-space-2);
  background: var(--c-panel);
  border-radius: var(--r-card);
}
.sub-tl__head {
  display: flex;
  align-items: baseline;
  gap: var(--sub-space-3);
  min-width: 0;
  margin-bottom: var(--sub-space-3);
}
.sub-tl__time {
  flex: none;
  min-width: 3.1em;
  font-size: var(--sub-text-lg);
  font-weight: 700;
  line-height: 1;
}
.sub-tl__what { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sub-tl__total {
  flex: none;
  margin-inline-start: auto;
  color: var(--c-gray);
  font-size: var(--sub-text-sm);
}
.sub-tl__hint { display: none; }
.sub-tl__area {
  position: relative;
  height: 56px;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.sub-tl__area.is-dragging { cursor: grabbing; }
.sub-tl__track { position: absolute; inset: 0; }
.sub-tl__track:focus-visible { outline-offset: 6px; }
.sub-tl__lane {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 20px;
  margin-top: -10px;
  background: var(--c-ink);
}
.sub-tl__turn { position: absolute; top: 0; bottom: 0; background: var(--c-gray); }
.sub-tl__turn--other { background: var(--c-raise); }
.sub-tl__mark {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 6px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 0;
  padding: 7px 0 0;
  border: 0;
  border-radius: 2px;
  background: var(--c-yellow);
  color: var(--c-ink);
  font: inherit;
  font-size: var(--sub-text-xs);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.sub-tl__mark.is-narrow .sub-tl__label { display: none; }
.sub-tl__mark:focus-visible { outline-color: var(--c-white); outline-offset: 2px; }
/* The short being operated: a white bar under its mark. */
.sub-tl__mark::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -9px;
  height: 4px;
  background: var(--c-white);
  transform: scaleX(0);
  transition: transform .45s var(--sub-ease);
}
.sub-tl__mark.is-on::after { transform: scaleX(1); }
.sub-tl__playhead {
  position: absolute;
  top: -8px;
  bottom: -8px;
  width: 2px;
  margin-inline-start: -1px;
  background: var(--c-white);
  pointer-events: none;
}
.sub-tl__scale {
  position: relative;
  height: 18px;
  margin-top: var(--sub-space-3);
  color: var(--c-gray);
  font-size: var(--sub-text-xs);
  line-height: 18px;
}
.sub-tl__scale span { position: absolute; top: 0; transform: translateX(50%); white-space: nowrap; }
.sub-tl__scale span:first-child { transform: none; }
.sub-tl__scale span:last-child { inset-inline-start: auto; inset-inline-end: 0; transform: none; }
.sub-tl-wrap.is-arriving { animation: sub-power-on .8s var(--sub-ease) both; }
@media (min-width: 700px) {
  .sub-tl { padding: var(--sub-space-4) var(--sub-space-5) var(--sub-space-3); }
  .sub-tl__hint { display: inline; }
  .sub-tl__area { height: 68px; }
  .sub-tl__lane { height: 24px; margin-top: -12px; }
  .sub-tl__scale { font-size: var(--sub-text-sm); }
}
@media (prefers-reduced-motion: reduce) {
  .sub-tl-wrap.is-arriving { animation: none; }
  .sub-tl__mark::after { transition: none; }
}

/* ───── One rack unit per short ─────
   Phone: the player beside its readouts, then why, the actions 2 by 2. From 700 px the
   player beside everything else, the actions in a row. From 1100 px three columns: player,
   readouts, why and the actions. */
.sub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--c-panel);
  border-radius: var(--r-card);
  overflow: hidden;
  /* A card the timeline or the keyboard brings up stops below the stuck timeline. */
  scroll-margin-top: var(--sub-tl-reach, var(--sub-space-4));
}
.sub-card .sub-ph__title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.sub-card__body {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  grid-template-areas: "player read" "side side";
  gap: var(--sub-space-4);
  padding: var(--sub-space-4);
}
.sub-card__frame {
  grid-area: player;
  align-self: start;
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--sub-r-frame);
  overflow: hidden;
  background: var(--c-ink);
}
.sub-card__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--c-ink);
}
.sub-card__info { display: contents; }
.sub-card__read { grid-area: read; display: grid; align-content: start; gap: var(--sub-space-3); min-width: 0; }
.sub-card__side { grid-area: side; display: grid; align-content: start; gap: var(--sub-space-4); min-width: 0; }
.sub-card__sensitive { display: grid; justify-items: start; gap: var(--sub-space-2); }
.sub-card__sensitive:not(:has(:not([hidden]))) { display: none; }
/* The word itself says "sensitive"; a tap shows why it was tagged. */
.sub-card__tag--sensitive {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--sub-space-4) 2px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-raise);
  color: var(--c-white);
  font: inherit;
  font-size: var(--sub-text-sm);
  cursor: pointer;
}
.sub-card__tag--sensitive[aria-expanded="true"] { background: var(--c-white); color: var(--c-ink); }
.sub-card__reason { margin: 0; color: var(--c-gray); font-size: var(--sub-text-sm); }
.sub-card__why-label { margin: 0 0 2px; color: var(--c-gray); font-size: var(--sub-text-sm); }
.sub-card__why { margin: 0; }

/* The actions: pills. Download is the primary one on the short being operated. */
.sub-card__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sub-space-2);
}
.sub-card__actions .sub-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sub-space-2);
  min-width: 0;
  min-height: var(--sub-touch);
  margin: 0;
  padding: 0 var(--sub-space-3) 2px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-raise);
  color: var(--c-white);
  font: inherit;
  font-size: var(--sub-text-sm);
  font-weight: 400;
  line-height: var(--sub-lh-tight);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .3s var(--sub-ease), color .3s var(--sub-ease);
}
.sub-card__actions .sub-card__link:hover { background: var(--c-white); color: var(--c-ink); }
.sub-card.is-focus .sub-card__actions [data-role="download"] {
  background: var(--c-yellow);
  color: var(--c-ink);
  font-weight: 700;
}
.sub-card.is-focus .sub-card__actions [data-role="download"]:hover { background: var(--c-white); }
.sub-card.is-focus .sub-card__actions [data-role="download"]:focus-visible { outline-color: var(--c-white); }
.sub-card__actions .sub-icon { width: 16px; height: 16px; }

/* A short that arrives while the page is open powers on like the panels did. */
.sub-card.is-arriving { animation: sub-power-on .8s var(--sub-ease) both; }
@media (prefers-reduced-motion: reduce) {
  .sub-card.is-arriving { animation: none; }
  .sub-card__actions .sub-card__link { transition: none; }
}

@media (min-width: 700px) {
  .sub-card__body {
    grid-template-columns: 200px minmax(0, 1fr);
    grid-template-areas: "player info";
    gap: var(--sub-space-6);
    padding: var(--sub-space-5);
  }
  .sub-card__info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    gap: var(--sub-space-4);
    min-width: 0;
  }
  .sub-card__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sub-card__side { flex: 1; }
  .sub-card__actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .sub-card .sub-ph__bar,
  .sub-card .sub-ph__lit { padding-inline: var(--sub-space-6); }
  .sub-card__body {
    grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-areas: "player read side";
    column-gap: var(--sub-space-10);
    padding: var(--sub-space-5) var(--sub-space-6);
  }
  .sub-card__info { display: contents; }
  .sub-card__read { gap: var(--sub-space-5); }
  .sub-card__facts { grid-template-columns: minmax(0, 1fr); }
  .sub-card__side { display: flex; flex-direction: column; gap: var(--sub-space-4); }
  .sub-card__why { font-size: var(--sub-text-lg); line-height: 1.45; }
  .sub-card__actions { margin-top: auto; }
}

/* ───── Shared small controls (also the kit's and the export's) ───── */
/* A quiet pill; pressed, it is the picked option. */
.sub-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sub-space-2);
  min-height: var(--sub-touch);
  margin-inline-end: auto;
  padding: 0 var(--sub-space-5) 2px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-raise);
  color: var(--c-white);
  font: inherit;
  font-size: var(--sub-text-sm);
  font-weight: 400;
  line-height: var(--sub-lh-tight);
  cursor: pointer;
  transition: background-color .3s var(--sub-ease), color .3s var(--sub-ease);
}
.sub-pick:hover:not(:disabled) { background: var(--c-white); color: var(--c-ink); }
.sub-pick[aria-pressed="true"] { background: var(--c-yellow); color: var(--c-ink); font-weight: 700; }
.sub-pick[aria-busy="true"] { color: var(--c-gray); cursor: progress; }
.sub-pick:disabled { color: var(--c-gray); cursor: default; }
/* A drawn tick, not a glyph: Michal has none, and a glyph never sits centred. */
.sub-pick__mark {
  display: grid;
  place-items: center;
  width: var(--sub-space-5);
  height: var(--sub-space-5);
  border: 1.5px solid currentColor;
  border-radius: var(--sub-space-1);
}
.sub-pick__mark::after {
  content: '';
  width: 5px;
  height: 9px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  translate: 0 -1px;
  transform: rotate(45deg) scale(0);
  transition: transform .18s var(--sub-ease);
}
.sub-pick[aria-pressed="true"] .sub-pick__mark::after { transform: rotate(45deg) scale(1); }
/* The client's "another version" under the thumbnails (26/10). */
.sub-another {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sub-space-2) var(--sub-space-5);
  margin-top: var(--sub-space-4);
}
.sub-another__note { margin: 0; }
.sub-card__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--sub-touch);
  padding: var(--sub-space-2) 0;
  color: var(--c-white);
  font-size: var(--sub-text-sm);
  font-weight: 400;
  text-decoration: underline;
  text-decoration-color: var(--c-gray);
  text-underline-offset: var(--sub-space-1);
}
.sub-card__link--button { border: 0; background: none; font-family: inherit; cursor: pointer; }
/* What a publish or a pick says back: a gray note with white words. */
.sub-card__notice {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--sub-text-sm);
}
.sub-card__notice:not(:empty) {
  padding: var(--sub-space-2) var(--sub-space-3) calc(var(--sub-space-2) + 2px);
  color: var(--c-white);
  background: var(--c-raise);
  border-radius: var(--r-card);
}
.sub-card__notice:empty { display: none; }

@media (min-width: 720px) {
  .sub-drop { padding-block: var(--sub-space-20); }
}
@media (prefers-reduced-motion: reduce) {
  .sub-card__badge::before,
  .sub-short__status[data-tone="updating"]::before { animation: none; }
  .sub-pick__mark::after { transition: none; }
}

/* ───── The gallery's text dialog: the short beside its text ───── */
.sub-text-dialog {
  width: min(960px, calc(100vw - 2 * var(--sub-space-4)));
  max-height: calc(100dvh - 2 * var(--sub-space-4));
  box-sizing: border-box;
  padding: var(--sub-space-5);
  border: 0;
  border-radius: var(--r-card);
  background: var(--c-panel);
  color: var(--c-white);
}
.sub-text-dialog::backdrop { background: var(--c-ink); }
.sub-text-dialog__body { display: grid; gap: var(--sub-space-4); }
.sub-text-dialog__frame {
  justify-self: center;
  width: min(100%, 140px);
  aspect-ratio: 9 / 16;
  border-radius: var(--sub-r-frame);
  overflow: hidden;
  background: var(--c-ink);
}
.sub-text-dialog__video { display: block; width: 100%; height: 100%; object-fit: contain; }
.sub-text-dialog__side { display: grid; align-content: start; gap: var(--sub-space-3); min-width: 0; }
.sub-text-dialog__status { margin: 0; min-height: 1.5em; color: var(--c-gray); font-size: var(--sub-text-sm); }
/* The save stays in reach under a long text: pinned to the dialog's bottom as it scrolls. */
.sub-text-dialog__actions {
  position: sticky;
  bottom: calc(-1 * var(--sub-space-5));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sub-space-2);
  margin-bottom: calc(-1 * var(--sub-space-5));
  padding: var(--sub-space-3) 0 var(--sub-space-5);
  background: var(--c-panel);
}
.sub-text-dialog__save,
.sub-text-dialog__close,
.sub-text-dialog__actions .sub-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--sub-touch);
  padding: 0 var(--sub-space-5) 2px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-raise);
  color: var(--c-white);
  font: inherit;
  font-size: var(--sub-text-sm);
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s var(--sub-ease), color .3s var(--sub-ease);
}
.sub-text-dialog__save { background: var(--c-yellow); color: var(--c-ink); font-weight: 700; }
.sub-text-dialog__save:disabled { background: var(--c-raise); color: var(--c-gray); font-weight: 400; cursor: default; }
.sub-text-dialog__save:hover:not(:disabled),
.sub-text-dialog__close:hover,
.sub-text-dialog__actions .sub-card__link:hover { background: var(--c-white); color: var(--c-ink); }
.sub-text-dialog__save:focus-visible { outline-color: var(--c-white); }
@media (min-width: 768px) {
  .sub-text-dialog { padding: var(--sub-space-6); }
  .sub-text-dialog__body { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
  .sub-text-dialog__frame { order: 2; width: 100%; }
  .sub-text-dialog__panel { max-height: 60dvh; overflow-y: auto; overscroll-behavior: contain; }
  .sub-text-dialog__actions { bottom: calc(-1 * var(--sub-space-6)); margin-bottom: calc(-1 * var(--sub-space-6)); padding-bottom: var(--sub-space-6); }
}

/* ── actions: the quiet pill, and the one main action a panel may have ── */
.sub-kit-copy,
.sub-kit-more,
.sub-kit-download,
.sub-pick.sub-another__button,
.sub-pick.sub-thumb__pick,
.sub-carousel__actions .sub-pick:not(.sub-kit-primary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sub-space-2);
  min-height: var(--sub-touch);
  margin: 0;
  padding: 0 var(--sub-space-5) 2px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-raise);
  color: var(--c-white);
  font: inherit;
  font-size: var(--sub-text-sm);
  font-weight: 400;
  line-height: var(--sub-lh-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s var(--sub-ease), color .3s var(--sub-ease);
}
.sub-kit-copy:hover,
.sub-kit-more:hover,
.sub-kit-download:hover,
.sub-pick.sub-another__button:hover:not(:disabled),
.sub-pick.sub-thumb__pick:hover,
.sub-carousel__actions .sub-pick:not(.sub-kit-primary):hover,
.sub-kit-copy.is-copied {
  background: var(--c-white);
  color: var(--c-ink);
  text-decoration: none;
}
.sub-kit-copy:disabled,
.sub-pick.sub-another__button:disabled,
.sub-pick.sub-another__button[aria-busy="true"],
.sub-pick.sub-thumb__pick[aria-busy="true"] {
  background: var(--c-raise);
  color: var(--c-white);
  font-weight: 300;
  cursor: default;
}
.sub-kit-copy:focus-visible,
.sub-kit-more:focus-visible,
.sub-kit-download:focus-visible {
  outline: var(--sub-ring) solid var(--c-yellow);
  outline-offset: 2px;
}

.sub-pick.sub-kit-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sub-space-2);
  justify-self: start;
  min-height: var(--sub-pill-h);
  margin: 0;
  padding: 0 var(--sub-space-6) 3px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-yellow);
  color: var(--c-ink);
  font: inherit;
  font-size: var(--sub-text-base);
  font-weight: 700;
  line-height: var(--sub-lh-tight);
  cursor: pointer;
  transition: background-color .3s var(--sub-ease), color .3s var(--sub-ease);
}
.sub-pick.sub-kit-primary:hover:not(:disabled) { background: var(--c-white); color: var(--c-ink); }
.sub-pick.sub-kit-primary:focus-visible {
  outline: var(--sub-ring) solid var(--c-white);
  outline-offset: 2px;
}
.sub-pick.sub-kit-primary:disabled,
.sub-pick.sub-kit-primary[aria-busy="true"] {
  background: var(--c-raise);
  color: var(--c-white);
  font-weight: 300;
  cursor: default;
}

/* ── a part of the kit: one headed panel ── */
.sub-kit-section {
  display: grid;
  align-content: start;
  gap: var(--sub-space-4);
  min-width: 0;
  padding: 0 var(--sub-space-4) var(--sub-space-5);
  background: var(--c-panel);
  border: 0;
  border-radius: var(--r-card);
  overflow: hidden;
}
.sub-kit-section > .sub-kit-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sub-space-2) var(--sub-space-3);
  min-height: var(--sub-head-h);
  margin: 0 calc(-1 * var(--sub-space-4));
  padding: var(--sub-space-2) var(--sub-space-5) calc(var(--sub-space-2) + 3px);
  background: var(--c-raise);
}
.sub-kit-section__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--sub-fs-head);
  font-weight: 700;
  line-height: var(--sub-lh);
}
/* On the bar the pills sit in the black well; the bar's small words are white. */
.sub-kit-section__head .sub-kit-copy,
.sub-kit-section__head .sub-kit-download,
.sub-kit-section__head .sub-carousel__actions .sub-pick:not(.sub-kit-primary) {
  background: var(--c-ink);
}
.sub-kit-section__head .sub-kit-copy:hover,
.sub-kit-section__head .sub-kit-copy.is-copied,
.sub-kit-section__head .sub-kit-download:hover,
.sub-kit-section__head .sub-carousel__actions .sub-pick:not(.sub-kit-primary):hover {
  background: var(--c-white);
}
.sub-kit-section__aux { flex: none; font-size: var(--sub-text-sm); color: var(--c-white); }

.sub-kit-section p {
  max-width: var(--sub-read-w);
  margin: 0;
  line-height: 1.55;
  color: var(--c-white);
  overflow-wrap: anywhere;
}
.sub-kit-section .sub-kit-lead { font-size: var(--sub-text-md); font-weight: 700; }
.sub-kit-list {
  display: grid;
  gap: var(--sub-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sub-kit-list li {
  max-width: var(--sub-read-w);
  line-height: 1.55;
  color: var(--c-white);
  overflow-wrap: anywhere;
}
/* A stamp reads as a gray label before its line. */
.sub-kit-list time,
.sub-kit-quote time {
  margin-inline-end: var(--sub-space-2);
  color: var(--c-gray);
  font-size: var(--sub-text-sm);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
/* One row of a list with a lead-in, or one thing with its own copy button (a title, a
   description, a subject). The button sits under the text, at the start. */
.sub-kit-item { display: grid; justify-items: start; gap: var(--sub-space-2); }
.sub-kit-list > .sub-kit-item + .sub-kit-item {
  padding-block-start: var(--sub-space-3);
  border-block-start: 1px solid var(--c-raise);
}
.sub-kit-item > .sub-kit-list { justify-self: stretch; }
/* Text pasted as is under a description: a black well, set apart from the panel. */
.sub-kit-block {
  padding: var(--sub-space-4);
  background: var(--c-ink);
  border: 0;
  border-radius: var(--r-card);
}
.sub-kit-lines { display: grid; gap: var(--sub-space-1); }
.sub-kit-subhead {
  margin: var(--sub-space-3) 0 0;
  font-family: var(--font-display);
  font-size: var(--sub-text-md);
  font-weight: 700;
  line-height: var(--sub-lh);
}
.sub-kit-cta {
  display: grid;
  gap: var(--sub-space-1);
  padding: var(--sub-space-4);
  background: var(--c-ink);
  border: 0;
  border-radius: var(--r-card);
}
.sub-kit-section .sub-kit-cta__label { font-size: var(--sub-text-sm); color: var(--c-gray); }
.sub-kit-quote {
  display: grid;
  gap: var(--sub-space-1);
  margin: 0;
  padding-inline-start: var(--sub-space-4);
  border-inline-start: 2px solid var(--c-white);
}
.sub-kit-quote footer { font-size: var(--sub-text-sm); color: var(--c-gray); }
.sub-kit-hint,
.sub-kit-section .sub-kit-hint { font-size: var(--sub-text-sm); color: var(--c-gray); }
.sub-kit-hint .sub-card__link {
  display: inline;
  min-height: 0;
  padding: 0;
  color: var(--c-white);
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* A side word ("הנחה", an idea's kind): gray, after a middle dot, never a chip. */
.sub-kit-tag {
  margin-inline-start: var(--sub-space-2);
  color: var(--c-gray);
  font-size: var(--sub-text-sm);
  font-weight: 400;
}
.sub-kit-tag::before { content: '· '; }

/* A part's state in words: making or waiting is a plain panel, a failure the yellow slab. */
.sub-kit-notice {
  margin: 0;
  padding: var(--sub-space-6) var(--sub-space-5);
  background: var(--c-panel);
  border: 0;
  border-radius: var(--r-card);
  color: var(--c-white);
  line-height: 1.55;
}
.sub-kit-notice--failed {
  padding-bottom: calc(var(--sub-space-6) + 3px);
  background: var(--c-yellow);
  color: var(--c-ink);
  font-weight: 700;
}
.sub-kit-status { margin: 0; font-size: var(--sub-text-sm); color: var(--c-gray); }
.sub-kit-status:empty { display: none; }
.sub-kit-fallback {
  width: 100%;
  min-height: calc(var(--sub-space-25) * 2);
  padding: var(--sub-space-3);
  font: inherit;
  font-size: var(--sub-text-sm);
  color: var(--c-white);
  background: var(--c-ink);
  border: 2px solid var(--c-raise);
  border-radius: var(--r-input);
  resize: vertical;
}
.sub-kit-downloads {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sub-space-2) var(--sub-space-3);
}
.sub-kit-more { justify-self: center; }
.sub-kit-article > summary { display: inline-flex; list-style: none; }
.sub-kit-article > summary::-webkit-details-marker { display: none; }
.sub-kit-article[open] > summary { margin-bottom: var(--sub-space-5); }

/* The transcript: every turn's stamp and speaker, gray and small, above its words; from a
   tablet up the stamp takes its own column, as on the mockup. */
.sub-turns { display: grid; }
.sub-turn { display: grid; gap: 2px; padding-block: var(--sub-space-3); }
.sub-turn__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--sub-space-3);
  color: var(--c-gray);
  font-size: var(--sub-text-sm);
  line-height: 1.4;
}
.sub-turn time { font-variant-numeric: tabular-nums; }
.sub-turn b { font-weight: 400; }
.sub-turn p {
  max-width: var(--sub-read-w);
  margin: 0;
  line-height: 1.55;
  color: var(--c-white);
  overflow-wrap: anywhere;
}
@media (min-width: 700px) {
  .sub-turn { grid-template-columns: 4.5em minmax(0, 1fr); column-gap: var(--sub-space-4); }
  .sub-turn__head { display: contents; }
  .sub-turn time { grid-column: 1; grid-row: 1 / span 2; line-height: 1.4; }
  .sub-turn b { grid-column: 2; grid-row: 1; }
  .sub-turn p { grid-column: 2; grid-row: 2; }
}

/* ── thumbnails: each version a headed panel, the client's one in focus ── */
.sub-thumb-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sub-gap);
}
.sub-thumb-grid > .sub-thumb {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--c-panel);
  border-radius: var(--r-card);
  overflow: hidden;
}
.sub-thumb__rank { white-space: nowrap; }
.sub-thumb__rank:empty { display: none; }
.sub-thumb__title {
  margin: 0;
  font-weight: 700;
  line-height: var(--sub-lh);
  overflow-wrap: anywhere;
}
.sub-thumb__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--sub-r-frame);
  overflow: hidden;
  background: var(--c-ink);
}
.sub-thumb__frame--11 { aspect-ratio: 1 / 1; }
.sub-thumb__frame--916 { aspect-ratio: 9 / 16; }
.sub-thumb__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sub-thumb-grid .sub-thumb__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sub-space-2) var(--sub-space-3);
  min-height: 80px;
  margin-top: auto;
  padding: var(--sub-space-4) var(--sub-space-5);
}
.sub-thumb-grid .sub-kit-download { margin-inline-start: auto; }
.sub-pick.sub-thumb__pick .sub-pick__mark { display: none; }
/* The client's version says so in words, with the drawn mark, where its button was. */
.sub-pick.sub-thumb__pick[aria-pressed="true"] { display: none; }
.sub-thumb__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sub-space-2);
  min-height: var(--sub-touch);
  padding: 0;
  background: none;
  color: var(--c-white);
  font-size: var(--sub-text-base);
  font-weight: 700;
}
.sub-thumb__badge:focus { outline: none; }
.sub-thumb__badge:focus-visible {
  outline: var(--sub-ring) solid var(--c-yellow);
  outline-offset: 2px;
}
.sub-thumb .sub-card__notice {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--sub-text-sm);
  color: var(--c-white);
}
.sub-thumb .sub-card__notice:empty { display: none; }
/* A version on its way: its bar says so, its frame waits black. No shimmer. */
.sub-thumb--skeleton .sub-ph__title { font-weight: 300; }
.sub-thumb-grid > .sub-thumb--skeleton::after {
  content: '';
  display: block;
  min-height: 80px;
}

/* "גרסה אחרת", and how many asks are left beside it. */
.sub-another {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sub-space-3) var(--sub-space-4);
}
.sub-another__left { color: var(--c-gray); }
.sub-another__note { flex-basis: 100%; margin: 0; }

/* Every design again, square and story-sized: one headed panel. */
.sub-thumb-sizes {
  display: grid;
  gap: var(--sub-space-4);
  padding: 0 var(--sub-space-4) var(--sub-space-5);
  background: var(--c-panel);
  border-radius: var(--r-card);
  overflow: hidden;
}
.sub-thumb-sizes > .sub-kit-section__title {
  display: flex;
  align-items: center;
  min-height: var(--sub-head-h);
  margin: 0 calc(-1 * var(--sub-space-4));
  padding: var(--sub-space-2) var(--sub-space-5) calc(var(--sub-space-2) + 3px);
  background: var(--c-raise);
}
.sub-thumb-sizes__list { display: grid; gap: var(--sub-space-8); }
.sub-thumb-sizes__design { display: grid; align-content: start; gap: var(--sub-space-3); }
.sub-thumb-sizes__name {
  margin: 0;
  font-size: var(--sub-text-base);
  font-weight: 700;
  line-height: var(--sub-lh);
  overflow-wrap: anywhere;
}
.sub-thumb-sizes__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--sub-space-4);
}
.sub-thumb-sizes .sub-thumb { display: grid; gap: var(--sub-space-2); min-width: 0; }
.sub-thumb-sizes .sub-thumb__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sub-space-2);
}
.sub-thumb-sizes__label { margin: 0; color: var(--c-gray); font-size: var(--sub-text-sm); }
.sub-thumb-sizes .sub-kit-notice { padding: 0; }
.sub-thumb-sizes .sub-kit-notice--failed {
  padding: var(--sub-space-4) var(--sub-space-4) calc(var(--sub-space-4) + 3px);
}

@media (min-width: 700px) {
  .sub-kit-section,
  .sub-thumb-sizes { gap: var(--sub-space-5); padding: 0 var(--sub-space-6) var(--sub-space-6); }
  .sub-kit-section > .sub-kit-section__head,
  .sub-thumb-sizes > .sub-kit-section__title {
    margin-inline: calc(-1 * var(--sub-space-6));
    padding-inline: var(--sub-space-6);
  }
  .sub-thumb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sub-thumb-sizes__grid { max-width: var(--sub-size-pair-w); }
}
@media (min-width: 1100px) {
  .sub-thumb-sizes__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sub-space-10);
  }
}

/* ── the carousel tab (sub_carousel.js) ── */
.sub-carousel { display: grid; gap: var(--sub-gap); }
.sub-carousel > .sub-carousel__status {
  padding: var(--sub-space-5) var(--sub-space-5) calc(var(--sub-space-5) + 3px);
  background: var(--c-panel);
  border-radius: var(--r-card);
}
.sub-carousel > .sub-carousel__status[data-tone="alert"] {
  background: var(--c-yellow);
  color: var(--c-ink);
  font-weight: 700;
}
.sub-carousel > .sub-pick.sub-kit-primary { justify-self: start; }
.sub-carousel__status { margin: 0; color: var(--c-white); line-height: 1.55; }
.sub-carousel__status:empty { display: none; }
.sub-carousel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sub-space-2);
}
/* The slides run edge to edge of their panel, square, and scroll sideways. */
.sub-carousel__strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(72%, 280px);
  gap: var(--sub-space-3);
  margin: 0 calc(-1 * var(--sub-space-4));
  padding: 0 var(--sub-space-4) var(--sub-space-2);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--sub-space-4);
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--c-gray) var(--c-panel);
}
.sub-carousel__slide { scroll-snap-align: start; background: var(--c-ink); }
.sub-carousel__slide img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: var(--sub-r-frame);
}
.sub-kit-section .sub-carousel__caption { white-space: pre-line; }
.sub-carousel__publish-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sub-space-3) var(--sub-space-4);
}
.sub-carousel__publish-row .sub-carousel__status { flex: 1 1 16rem; }
@media (min-width: 700px) {
  .sub-carousel__strip {
    margin-inline: calc(-1 * var(--sub-space-6));
    padding-inline: var(--sub-space-6);
    scroll-padding-inline: var(--sub-space-6);
  }
}

/* The editor: one panel, the slide on a square stage, the controls as pills. */
.sub-carousel-editor {
  display: grid;
  gap: var(--sub-space-4);
  padding: var(--sub-space-5) var(--sub-space-4);
  background: var(--c-panel);
  border-radius: var(--r-card);
}
.sub-carousel-editor__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 104px;
  gap: var(--sub-space-3);
  margin: 0;
  padding: 0 0 var(--sub-space-2);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--c-gray) var(--c-panel);
}
.sub-carousel-editor__thumb { display: grid; gap: var(--sub-space-2); }
.sub-carousel-editor__pick {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  padding: 0;
  background: var(--c-ink);
  border: 0;
  border-radius: var(--sub-r-frame);
  color: var(--c-white);
  font: inherit;
  font-size: var(--sub-text-xs);
  overflow: hidden;
  cursor: pointer;
}
/* The slide on the stage: a yellow frame inside its thumbnail. */
.sub-carousel-editor__pick[aria-pressed="true"] {
  outline: 3px solid var(--c-yellow);
  outline-offset: -3px;
}
.sub-carousel-editor__pick:focus-visible {
  outline: var(--sub-ring) solid var(--c-white);
  outline-offset: 2px;
}
.sub-carousel-editor__pick img { width: 100%; height: 100%; object-fit: cover; }
.sub-carousel-editor__moves {
  display: flex;
  justify-content: space-between;
  gap: var(--sub-space-1);
}
.sub-carousel-editor__nudge {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0 0 2px;
  background: var(--c-raise);
  border: 0;
  border-radius: var(--r-pill);
  color: var(--c-white);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background-color .3s var(--sub-ease), color .3s var(--sub-ease);
}
.sub-carousel-editor__nudge:hover { background: var(--c-white); color: var(--c-ink); }
.sub-carousel-editor__deleted { display: flex; flex-wrap: wrap; gap: var(--sub-space-2); }
.sub-carousel-editor__deleted:empty { display: none; }
.sub-carousel-editor__stage {
  position: relative;
  width: 100%;
  max-width: 540px;
  overflow: hidden;
  background: var(--c-ink);
  border-radius: var(--sub-r-frame);
}
.sub-carousel-editor__frame {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 1080px;
  height: 1350px;
  border: 0;
  transform-origin: top right;
}
.sub-carousel-editor__tools {
  display: grid;
  justify-items: start;
  gap: var(--sub-space-3);
  max-width: 540px;
}
.sub-carousel-editor__tools:empty { display: none; }
.sub-carousel-editor__label {
  display: grid;
  justify-self: stretch;
  gap: var(--sub-space-2);
  color: var(--c-white);
  font-size: var(--sub-text-sm);
  font-weight: 700;
}
.sub-carousel-editor__text {
  width: 100%;
  min-height: var(--sub-pill-h);
  padding: var(--sub-space-3);
  background: var(--c-ink);
  border: 2px solid var(--c-raise);
  border-radius: var(--r-input);
  color: var(--c-white);
  font: inherit;
  font-size: var(--sub-text-base);
  font-weight: 400;
  resize: vertical;
}
@media (min-width: 700px) {
  .sub-carousel-editor { padding: var(--sub-space-6); }
}

/* ── brand kit (/app/channel) ── */
.sub-brand__logo { max-block-size: 7.5rem; max-inline-size: 100%; object-fit: contain; }
.sub-brand__color { inline-size: 3rem; block-size: 3rem; border: 0; padding: 0; background: none; }
#brand-colors { display: flex; flex-wrap: wrap; gap: var(--sub-space-3); }


/* ───── Publishing to the subscriber's networks (sub_publish.js) ───── */
.sub-publish-bar { display: grid; gap: var(--sub-space-3); margin-bottom: var(--sub-space-6); }
.sub-publish-bar__connect { margin: 0; color: var(--c-gray); font-size: var(--sub-text-sm); }
.sub-publish-bar__connect a {
  color: var(--c-white);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.sub-publish-bar__episode {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sub-space-3);
}

/* Where each post stands: one line a network, its state said by an icon and a word. */
.sub-jobs {
  display: grid;
  gap: var(--sub-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sub-jobs__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--sub-space-2);
  min-height: 32px;
  color: var(--c-white);
  font-size: var(--sub-text-sm);
  line-height: 1.4;
}
.sub-jobs__name { font-weight: 700; }
.sub-jobs__label { color: var(--c-gray); }
.sub-jobs__error,
.sub-jobs__dm { flex-basis: 100%; padding-inline-start: 26px; }
.sub-jobs__error { color: var(--sub-danger-text); font-weight: 700; }
.sub-jobs__dm { color: var(--c-gray); }
.sub-jobs__action {
  display: inline-flex;
  align-items: center;
  min-height: var(--sub-touch);
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-white);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.sub-jobs__action--button { cursor: pointer; }
.sub-jobs__action:disabled { color: var(--c-gray); text-decoration: none; cursor: default; }
.sub-jobs__action:focus-visible {
  outline: var(--sub-ring) solid var(--c-yellow);
  outline-offset: 2px;
}

/* The dialog: one #1B1B1B panel on the black ground, its head the #272727 bar. */
.sub-publish {
  width: min(720px, calc(100vw - 2 * var(--sub-space-4)));
  max-width: none;
  max-height: calc(100dvh - 2 * var(--sub-space-4));
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-radius: var(--r-card);
  background: var(--c-panel);
  color: var(--c-white);
  overscroll-behavior: contain;
}
.sub-publish::backdrop { background: var(--c-ink, #141210); }
.sub-publish__form {
  display: grid;
  gap: var(--sub-space-5);
  margin: 0;
  padding: 0 var(--sub-space-4);
}
.sub-publish__head {
  display: grid;
  gap: 2px;
  margin-inline: calc(-1 * var(--sub-space-4));
  padding: var(--sub-space-3) var(--sub-space-5) calc(var(--sub-space-3) + 3px);
  background: var(--c-raise);
}
.sub-publish__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--sub-fs-head);
  font-weight: 700;
  line-height: var(--sub-lh);
}
.sub-publish__target { margin: 0; color: var(--c-white); font-size: var(--sub-text-sm); }
.sub-publish__preview {
  justify-self: center;
  width: min(100%, 120px);
  aspect-ratio: 9 / 16;
  border-radius: var(--sub-r-frame);
  overflow: hidden;
  background: var(--c-ink);
}
.sub-publish__video { display: block; width: 100%; height: 100%; object-fit: contain; }
.sub-publish__fields { display: grid; gap: var(--sub-space-5); min-width: 0; }
.sub-publish__group {
  display: grid;
  gap: var(--sub-space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.sub-publish__label {
  margin: 0;
  padding: 0;
  color: var(--c-white);
  font-size: var(--sub-text-sm);
  font-weight: 700;
}
legend.sub-publish__label { margin-bottom: var(--sub-space-2); }
.sub-publish__field { display: grid; gap: var(--sub-space-2); }
.sub-publish__input {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--sub-pill-h);
  padding: var(--sub-space-2) var(--sub-space-3);
  font: inherit;
  font-size: var(--sub-text-base);
  color: var(--c-white);
  background-color: var(--c-ink);
  border: 2px solid var(--c-raise);
  border-radius: var(--r-input);
}
textarea.sub-publish__input { resize: vertical; line-height: 1.55; }
.sub-publish__input:focus { border-color: var(--c-yellow); }
.sub-publish__input:disabled { color: var(--c-gray); cursor: not-allowed; }
.sub-publish__count,
.sub-publish__note {
  margin: 0;
  color: var(--c-gray);
  font-size: var(--sub-text-xs);
  line-height: 1.55;
}
.sub-publish__note:empty { display: none; }
.sub-publish__count.is-over,
.sub-publish__note.is-over { color: var(--sub-danger-text); font-weight: 700; }

/* A network is a large toggle row: picked, it is the solid yellow row with the drawn mark. */
.sub-publish__networks { display: grid; gap: var(--sub-space-2); }
.sub-publish__network {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: var(--c-raise);
  border-radius: var(--r-card);
  color: var(--c-white);
  transition: background-color .3s var(--sub-ease), color .3s var(--sub-ease);
}
.sub-publish__network input {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
.sub-publish__network-label {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--sub-space-3);
  min-width: 0;
  min-height: 60px;
  padding: var(--sub-space-2) var(--sub-space-5) calc(var(--sub-space-2) + 3px);
  color: inherit;
  cursor: pointer;
}
.sub-publish__network-name { font-size: var(--sub-text-base); font-weight: 700; }
.sub-publish__network-handle {
  min-width: 0;
  font-size: var(--sub-text-sm);
  font-weight: 400;
  overflow-wrap: anywhere;
}
.sub-publish__tick {
  width: 22px;
  height: 22px;
  margin-inline-start: auto;
  stroke-width: 2.2;
  visibility: hidden;
}
.sub-publish__network > .sub-publish__note {
  flex-basis: 100%;
  padding: 0 var(--sub-space-5) var(--sub-space-3);
  color: var(--c-white);
}
.sub-publish__network:has(input:checked) { background: var(--c-yellow); color: var(--c-ink); }
.sub-publish__network:has(input:checked) .sub-publish__tick { visibility: visible; }
/* A pointer that hovers only: on a phone a row just unpicked must not stay lit like a pick. */
@media (hover: hover) {
  .sub-publish__network:not(:has(input:checked, input:disabled)):hover {
    background: var(--c-white);
    color: var(--c-ink);
  }
}
.sub-publish__network:has(input:focus-visible) {
  outline: var(--sub-ring) solid var(--c-white);
  outline-offset: 2px;
}
.sub-publish__network:has(input:disabled) .sub-publish__network-label { cursor: not-allowed; }

/* The other choices: the base's checkbox beside its words. */
.sub-publish__check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sub-space-1) var(--sub-space-3);
  min-height: var(--sub-touch);
}
.sub-publish__check input { margin: 0; }
.sub-publish__check input:disabled {
  border-color: var(--c-raise);
  background: var(--c-raise);
  cursor: not-allowed;
}
.sub-publish__check label { flex: 1; min-width: 0; color: var(--c-white); cursor: pointer; }
.sub-publish__check input:disabled + label { color: var(--c-gray); cursor: not-allowed; }
.sub-publish__check .sub-publish__note { flex-basis: 100%; padding-inline-start: 34px; }

/* TikTok, the comment-to-DM part and who is in the episode: each a framed part with its own
   #272727 bar. */
.sub-publish__tiktok,
.sub-publish__dm,
.sub-publish__people {
  display: grid;
  gap: var(--sub-space-3);
  min-width: 0;
  padding: 0 var(--sub-space-4) var(--sub-space-4);
  border: 2px solid var(--c-raise);
  border-radius: var(--r-card);
}
.sub-publish__tiktok > .sub-publish__label:first-child,
.sub-publish__dm > .sub-publish__label:first-child,
.sub-publish__people > .sub-publish__label:first-child {
  margin-inline: calc(-1 * var(--sub-space-4));
  padding: var(--sub-space-3) var(--sub-space-4) calc(var(--sub-space-3) + 3px);
  background: var(--c-raise);
  font-size: var(--sub-text-base);
}
.sub-publish__tt-body,
.sub-publish__dm-body { display: grid; gap: var(--sub-space-3); }
.sub-publish__dm a,
.sub-publish__consent a {
  color: var(--c-white);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.sub-publish__creator { display: flex; align-items: center; gap: var(--sub-space-3); }
.sub-publish__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--sub-r-frame);
  object-fit: cover;
  background: var(--c-raise);
}
.sub-publish__nickname { font-weight: 700; }
.sub-publish__disclose { display: grid; gap: var(--sub-space-2); }
.sub-publish__label-notice {
  margin: 0;
  padding: var(--sub-space-2) var(--sub-space-3) calc(var(--sub-space-2) + 3px);
  background: var(--c-raise);
  border: 0;
  border-radius: var(--r-card);
  color: var(--c-white);
  font-size: var(--sub-text-sm);
}
.sub-people { display: grid; gap: var(--sub-space-3); margin: 0; padding: 0; list-style: none; }
.sub-people__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sub-space-2); }
@media (min-width: 640px) {
  .sub-people__item {
    grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
  }
  .sub-people__found { grid-column: 1 / -1; }
}
.sub-people__found { color: var(--c-gray); font-size: var(--sub-text-xs); }
.sub-people__found:empty { display: none; }
.sub-people__remove {
  justify-self: start;
  min-height: var(--sub-touch);
  padding: 0 var(--sub-space-2);
  border: 0;
  background: none;
  color: var(--c-white);
  font: inherit;
  font-size: var(--sub-text-sm);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.sub-publish__people-actions { display: flex; flex-wrap: wrap; gap: var(--sub-space-2); }
/* What each network adds under the caption: a black well. */
.sub-publish__extra {
  display: grid;
  gap: var(--sub-space-1);
  padding: var(--sub-space-3) var(--sub-space-4);
  background: var(--c-ink);
  border-radius: var(--r-card);
}
.sub-publish__extra-text {
  margin: 0;
  font-size: var(--sub-text-sm);
  line-height: 1.55;
  white-space: pre-line;
}

/* The foot stays in view: the reason the button waits, the yellow pill, the quiet close. */
.sub-publish__foot {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: grid;
  gap: var(--sub-space-2);
  margin-inline: calc(-1 * var(--sub-space-4));
  padding: var(--sub-space-3) var(--sub-space-4) var(--sub-space-4);
  background: var(--c-panel);
  border-top: 2px solid var(--c-raise);
}
.sub-publish__problem,
.sub-publish__status { margin: 0; font-size: var(--sub-text-sm); line-height: 1.55; }
.sub-publish__problem { color: var(--c-gray); }
.sub-publish__status { color: var(--c-white); }
.sub-publish__problem:empty,
.sub-publish__status:empty { display: none; }
.is-sent .sub-publish__problem { display: none; }
.sub-publish__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sub-space-3);
}
.sub-publish__submit,
.sub-publish__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--sub-pill-h);
  padding: 0 var(--sub-space-6) 3px;
  border: 0;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: var(--sub-text-base);
  line-height: var(--sub-lh-tight);
  cursor: pointer;
  transition: background-color .3s var(--sub-ease), color .3s var(--sub-ease);
}
.sub-publish__submit { background: var(--c-yellow); color: var(--c-ink); font-weight: 700; }
.sub-publish__close {
  min-height: var(--sub-touch);
  background: var(--c-raise);
  color: var(--c-white);
  font-weight: 400;
}
.sub-publish__submit:hover:not(:disabled),
.sub-publish__close:hover { background: var(--c-white); color: var(--c-ink); }
.sub-publish__submit:disabled {
  background: var(--c-raise);
  color: var(--c-white);
  font-weight: 300;
  cursor: not-allowed;
}
.sub-publish__submit:focus-visible,
.sub-publish__close:focus-visible {
  outline: var(--sub-ring) solid var(--c-white);
  outline-offset: 2px;
}
.sub-publish__consent {
  margin: 0;
  color: var(--c-gray);
  font-size: var(--sub-text-xs);
  line-height: 1.55;
}
@media (min-width: 700px) {
  .sub-publish__form { padding-inline: var(--sub-space-6); }
  .sub-publish__head,
  .sub-publish__foot {
    margin-inline: calc(-1 * var(--sub-space-6));
    padding-inline: var(--sub-space-6);
  }
  .sub-publish__foot { padding-bottom: var(--sub-space-6); }
}
@media (min-width: 768px) {
  .sub-publish__form { grid-template-columns: minmax(0, 1fr) 140px; align-items: start; }
  .sub-publish__head,
  .sub-publish__foot { grid-column: 1 / -1; }
  .sub-publish__preview { order: 2; width: 100%; }
  .sub-publish__fields { order: 1; }
  .sub-publish__foot { order: 3; }
}
/* style.css sets every label in mono capitals; the dialog's labels read as plain white Hebrew. */
.sub-publish label {
  font-family: inherit;
  font-size: var(--sub-text-sm);
  letter-spacing: normal;
  text-transform: none;
  color: var(--c-white);
}
/* A network row's words take the row's colour: ink once it is the yellow one. */
.sub-publish .sub-publish__network-label { color: inherit; }

/* ───── A week on autopilot (sub_autopilot.js) ───── */
.sub-autopilot { display: grid; gap: var(--sub-space-2); justify-items: start; }
.sub-autopilot__hint {
  max-width: var(--sub-read-w);
  margin: 0;
  color: var(--c-gray);
  font-size: var(--sub-text-sm);
  line-height: 1.55;
}
.sub-autopilot__list {
  display: grid;
  gap: var(--sub-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sub-autopilot__item {
  display: grid;
  gap: var(--sub-space-2);
  padding: var(--sub-space-3) var(--sub-space-4);
  border: 2px solid var(--c-raise);
  border-radius: var(--r-card);
}
.sub-autopilot__item.is-problem { border-color: var(--c-white); }
.sub-autopilot__item.is-off .sub-autopilot__where,
.sub-autopilot__item.is-off .sub-autopilot__title { color: var(--c-gray); }
.sub-autopilot__pick {
  display: flex;
  align-items: center;
  gap: var(--sub-space-3);
  min-height: var(--sub-touch);
}
.sub-autopilot__pick input { flex: none; margin: 0; }
.sub-autopilot__pick input:disabled {
  border-color: var(--c-raise);
  background: var(--c-raise);
  cursor: not-allowed;
}
.sub-autopilot__label {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--sub-space-2);
  min-width: 0;
  color: var(--c-white);
  font-size: var(--sub-text-base);
  cursor: pointer;
}
.sub-autopilot__n { font-weight: 700; white-space: nowrap; }
.sub-autopilot__title { overflow-wrap: anywhere; }
.sub-autopilot__where,
.sub-autopilot__note {
  margin: 0;
  color: var(--c-gray);
  font-size: var(--sub-text-xs);
  line-height: 1.55;
}
.sub-autopilot__note:empty { display: none; }
.sub-autopilot__item.is-problem .sub-autopilot__note {
  color: var(--sub-danger-text);
  font-weight: 700;
}
.sub-autopilot__day:disabled { color: var(--c-gray); cursor: not-allowed; }
@media (min-width: 640px) {
  .sub-autopilot__item { grid-template-columns: minmax(0, 1fr) 13rem; align-items: center; }
  .sub-autopilot__pick,
  .sub-autopilot__where,
  .sub-autopilot__note { grid-column: 1; }
  .sub-autopilot__day { grid-column: 2; grid-row: 1 / span 2; }
}
/* No preview beside the plan: the form keeps one column on wide screens. */
@media (min-width: 768px) {
  .sub-autopilot__form { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .sub-kit-copy,
  .sub-kit-more,
  .sub-kit-download,
  .sub-pick.sub-kit-primary,
  .sub-pick.sub-another__button,
  .sub-pick.sub-thumb__pick,
  .sub-carousel-editor__nudge,
  .sub-publish__network,
  .sub-publish__submit,
  .sub-publish__close { transition: none; }
}

/* Last, so it wins every tie above: whatever the scripts hide stays hidden. */
.sub-kit-panel [hidden],
.sub-publish-bar [hidden],
.sub-publish [hidden],
.sub-jobs[hidden] { display: none; }

/* ───── The text panel beside a short (sub_text_panel.js) ───── */
/* One #1B1B1B panel: its title the #272727 head bar, held on top while the lines scroll, then
   a row a caption line, the line's stamp gray on the reading side and its words in a field.
   The line that plays lights its row. */
.text-panel {
  display: grid;
  align-content: start;
  gap: var(--sub-space-3);
  padding-bottom: var(--sub-space-4);
  border-radius: var(--r-card);
  background: var(--c-panel);
  color: var(--c-white);
  color-scheme: dark;
  scrollbar-color: var(--c-raise) var(--c-panel);
}
.text-panel > :not(.text-panel__title) { margin-inline: var(--sub-space-4); }
/* A keyboard's way past the lines to the timeline: out of sight until it has the focus. */
.text-panel__skip:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.text-panel__skip:focus {
  justify-self: start;
  margin-top: var(--sub-space-3);
  padding: var(--sub-space-2) var(--sub-space-3) calc(var(--sub-space-2) + 3px);
  border-radius: var(--r-pill);
  background: var(--c-yellow);
  color: var(--c-ink);
  font-weight: 700;
  text-decoration: none;
  /* The ring inside, dark on the yellow: the panel scrolls and would cut off one outside. */
  outline: var(--sub-ring) solid var(--c-ink);
  outline-offset: calc(-2 * var(--sub-ring));
}
.text-panel__title {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: var(--sub-head-h);
  box-sizing: border-box;
  margin: 0;
  padding: var(--sub-space-2) var(--sub-space-5) calc(var(--sub-space-2) + 3px);
  background: var(--c-raise);
  color: var(--c-white);
  font-size: var(--sub-fs-head);
  font-weight: 700;
  line-height: var(--sub-lh);
}
.text-panel__note {
  margin-block: 0;
  font-size: var(--sub-text-sm);
  line-height: 1.5;
  color: var(--c-gray);
}
.text-panel__lines { display: grid; gap: var(--sub-space-1); }
/* The hook's head over its lines: its name, and what can be done to it, as quiet pills. */
.text-panel__hook {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sub-space-2) var(--sub-space-3);
  margin-top: var(--sub-space-2);
}
.text-panel__hook-label { font-size: var(--sub-text-sm); font-weight: 700; color: var(--c-white); }
.text-panel__hook-actions { display: flex; flex-wrap: wrap; gap: var(--sub-space-2); }
.text-panel__hook-action {
  min-height: var(--sub-touch);
  padding: 0 var(--sub-space-4) 3px;
  border: 2px solid var(--c-raise);
  border-radius: var(--r-pill);
  background: var(--c-raise);
  color: var(--c-white);
  font-family: inherit;
  font-size: var(--sub-text-sm);
  font-weight: 400;
  line-height: var(--sub-lh-tight);
  cursor: pointer;
  transition: background-color .3s var(--sub-ease), color .3s var(--sub-ease),
    border-color .3s var(--sub-ease);
}
.text-panel__hook-action:disabled { background: none; color: var(--c-gray); cursor: default; }
@media (hover: hover) {
  .text-panel__hook-action:hover:not(:disabled) {
    border-color: var(--c-white);
    background: var(--c-white);
    color: var(--c-ink);
  }
}
.text-panel__hook-note { margin: 0; font-size: var(--sub-text-sm); color: var(--c-white); }
.text-panel__hook-note[hidden] { display: none; }
.text-panel__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sub-space-1) var(--sub-space-2);
  padding: var(--sub-space-1) var(--sub-space-2);
  border-inline-start: 3px solid var(--c-panel);
  border-radius: var(--r-card);
  transition: background-color .3s var(--sub-ease);
}
/* The hook's lines, played first, carry a gray edge on the reading side. */
.text-panel__row.is-hook { border-inline-start-color: var(--c-gray); }
.text-panel__row.is-now { background: var(--c-raise); }
.text-panel__row.is-gone .text-panel__field {
  text-decoration: line-through;
  color: var(--c-gray);
}
.text-panel__time {
  min-width: var(--sub-touch);
  min-height: var(--sub-touch);
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-gray);
  font-family: inherit;
  font-size: var(--sub-text-xs);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.text-panel__row.is-now .text-panel__time { color: var(--c-white); font-weight: 700; }
.text-panel__field {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--sub-touch);
  padding: var(--sub-space-2) var(--sub-space-3);
  border: 2px solid var(--c-raise);
  border-radius: var(--r-input);
  background: var(--c-ink);
  color: var(--c-white);
  font-family: inherit;
  font-size: var(--sub-text-base);
  line-height: 1.5;
  resize: none;
  overflow: hidden;
}
/* The field's yellow edge is its focus ring: no second ring around it. */
.text-panel__field:focus,
.text-panel__field[aria-invalid="true"] { border-color: var(--c-yellow); }
.text-panel__field:focus-visible { outline: none; }
/* A line the page refuses: a yellow slab under it, black words. */
.text-panel__error {
  grid-column: 2;
  margin: 0;
  padding: var(--sub-space-2) var(--sub-space-3) calc(var(--sub-space-2) + 3px);
  border-radius: var(--r-card);
  background: var(--c-yellow);
  color: var(--c-ink);
  font-size: var(--sub-text-sm);
  font-weight: 700;
  line-height: 1.5;
}
.text-panel__error[hidden] { display: none; }
.text-panel__time:focus-visible,
.text-panel__hook-action:focus-visible {
  outline: var(--sub-ring) solid var(--c-white);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .text-panel__row,
  .text-panel__hook-action { transition: none; }
}

/* ───── Entry screens (login, forgot, join, set password, open in browser, status) ─────
   One calm panel on the black ground: the screen's title in a #272727 head bar, the fields
   below it, the submit the panel's one yellow pill, the secondary links quiet and underlined.
   Everything reads from the start edge, as the panels elsewhere in the app do. */
:root {
  --sub-entry-w: 520px;
  --sub-entry-head-h: 68px;
}
.sub-main .sub-entry {
  display: grid;
  justify-items: center;
  align-items: start;
  min-height: auto;
  padding: var(--sub-space-3) 0 0;
}
.sub-main .sub-entry .sub-entry__panel {
  width: 100%;
  max-width: var(--sub-entry-w);
  padding: 0;
}
.sub-entry .sub-ph__bar,
.sub-entry .sub-ph__lit { min-height: var(--sub-entry-head-h); }
.sub-entry .sub-entry__title { font-size: var(--sub-text-lg); line-height: var(--sub-lh-tight); }
.sub-entry .sub-entry__body {
  display: flex;
  flex-direction: column;
  gap: var(--sub-space-5);
  padding: var(--sub-space-6) var(--sub-space-5) var(--sub-space-8);
}
.sub-entry .sub-entry__body > * { margin: 0; }
.sub-entry .sub-card-text {
  margin: 0;
  color: var(--c-gray);
  text-align: start;
}
.sub-entry .sub-card-form { gap: var(--sub-space-5); }
.sub-entry .sub-card-form > .btn--full { margin-top: var(--sub-space-1); }

/* Secondary links: white words on a gray underline that turns white on hover. */
.sub-entry .sub-card-links { justify-content: flex-start; margin: 0; }
.sub-entry .sub-card-links a,
.sub-entry .sub-card-text a,
.sub-entry .sub-check a {
  color: var(--c-white);
  text-decoration: underline;
  text-decoration-color: var(--c-gray);
  text-underline-offset: 4px;
  transition: text-decoration-color .3s var(--sub-ease);
}
.sub-entry .sub-card-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--sub-touch);
  font-size: var(--sub-text-sm);
}
.sub-entry .sub-card-links a:hover,
.sub-entry .sub-card-text a:hover,
.sub-entry .sub-check a:hover { text-decoration-color: var(--c-white); }

/* The terms sentence of the join form: a sentence to agree to, at the lead's weight. */
.sub-entry .sub-check {
  font-size: var(--sub-text-sm);
  font-weight: 400;
  line-height: 1.5;
}

@media (min-width: 700px) {
  .sub-main .sub-entry { padding-top: clamp(var(--sub-space-4), 6vh, var(--sub-space-12)); }
  .sub-entry .sub-entry__body { padding: var(--sub-space-8); }
}

/* Continue with Google: Google's own mark and words on Google's white, in the app's pill and
   at its height. google_signin.css is the sales checkout's too, so /app's look lives here:
   no outline, no grey hover layer and no lift, which the palette does not have. */
.sub-main .google-signin { gap: var(--sub-space-4); margin: 0; }
.sub-main .google-btn {
  min-block-size: var(--sub-pill-h);
  padding: 0 var(--sub-space-6) 2px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-white);
  color: var(--c-ink);
  font-size: var(--sub-text-base);
  font-weight: 700;
  transition: none;
}
.sub-main .google-btn:hover,
.sub-main .google-btn:active {
  background: var(--c-white);
  box-shadow: none;
}
.sub-main .google-btn:hover .google-btn__text {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.sub-main .google-signin__or {
  opacity: 1;
  color: var(--c-gray);
  font-size: var(--sub-text-sm);
}
.sub-main .google-signin__or::before,
.sub-main .google-signin__or::after {
  opacity: 1;
  background: var(--c-raise);
}

/* ───── The status page: the state in words with its mark, then one readout per check ───── */
.sub-status__state { display: grid; gap: var(--sub-space-4); }
.sub-status__state > * { margin: 0; }
.sub-status__head {
  display: flex;
  align-items: center;
  gap: var(--sub-space-3);
  font-size: var(--sub-text-lg);
  font-weight: 700;
  line-height: var(--sub-lh-tight);
}
.sub-status__head .sub-icon { width: var(--sub-space-8); height: var(--sub-space-8); }
.sub-status__ro {
  padding-top: var(--sub-space-2);
  border-top: 1px solid var(--c-raise);
}
.sub-status__ro .sub-ro__row { align-items: center; min-height: var(--sub-touch); }
.sub-status__ro dd {
  display: inline-flex;
  align-items: center;
  gap: var(--sub-space-2);
}
.sub-status__ro dd small { font-size: var(--sub-text-sm); font-weight: 400; }

/* ───── The export page (/app/export): every file, by episode ─────
   The first panel runs the whole download (its progress a white meter); then a panel per
   episode, each file a row whose quiet pill is the link. */
.sub-export__deck {
  display: grid;
  align-items: start;
  gap: var(--sub-gap);
}
.sub-export__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sub-space-4);
}
.sub-export__note,
.sub-export__progress {
  max-width: var(--sub-lead-w);
  margin: 0;
  font-size: var(--sub-text-sm);
  color: var(--c-gray);
}
.sub-export__progress:empty { display: none; }
.sub-export__meter { align-self: stretch; max-width: var(--sub-lead-w); }
.sub-export__meter-label { color: var(--c-gray); font-size: var(--sub-text-sm); }
.sub-export__meter .sub-meter__fill { transition: transform .6s var(--sub-ease); }
.sub-export__body .sub-actions { align-self: stretch; }
.sub-export__body .btn--primary { width: 100%; }

.sub-export__episode .sub-ph__title { overflow-wrap: anywhere; }
.sub-export__episode .sub-ph__aux { white-space: nowrap; }
.sub-export__files {
  margin: 0;
  padding: var(--sub-space-1) 0 var(--sub-space-2);
  list-style: none;
}
.sub-export__files li + li .sub-export__file { border-top: 1px solid var(--c-raise); }
.sub-export__file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sub-space-3);
  min-height: var(--sub-pill-h);
  padding: var(--sub-space-2) var(--sub-space-4);
  color: var(--c-white);
  text-decoration: none;
}
.sub-export__file:focus-visible { outline-offset: calc(-1 * var(--sub-ring)); }
.sub-export__name { min-width: 0; overflow-wrap: anywhere; }
.sub-export__get {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sub-space-2);
  min-height: var(--sub-space-10);
  padding: 0 var(--sub-space-4) 2px;
  border-radius: var(--r-pill);
  background: var(--c-raise);
  color: var(--c-white);
  font-size: var(--sub-text-sm);
  transition: background-color .3s var(--sub-ease), color .3s var(--sub-ease);
}
.sub-export__get .sub-icon { width: var(--sub-space-4); height: var(--sub-space-4); }
.sub-export__file:hover .sub-export__get,
.sub-export__file:focus-visible .sub-export__get {
  background: var(--c-white);
  color: var(--c-ink);
}

@media (min-width: 700px) {
  .sub-export__deck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sub-export__deck > .sub-export { grid-column: 1 / -1; }
  .sub-export__body .btn--primary { width: auto; padding-inline: var(--sub-space-10); }
  .sub-export__file { padding-inline: var(--sub-space-6); }
}
@media (min-width: 1100px) {
  .sub-export__deck { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .sub-export__meter .sub-meter__fill,
  .sub-export__get { transition: none; }
}

/* ───── The feedback form (/app/feedback): one headed panel ───── */
.sub-feedback-deck {
  display: grid;
  gap: var(--sub-gap);
  max-width: var(--sub-size-pair-w);
}
.sub-feedback-deck > .sub-alert { margin: 0; }
.sub-feedback .btn--primary { width: 100%; }
@media (min-width: 700px) {
  .sub-feedback .btn--primary { width: auto; padding-inline: var(--sub-space-10); }
}

/* Deleting the account (/app/billing): the confirmation opens in place. */
.acct-erase { margin-block-start: var(--sub-space-8); }
.acct-erase__confirm {
  display: grid;
  gap: var(--sub-space-3);
  margin-block-start: var(--sub-space-3);
}