/* ==========================================================================
   The Treatment Tapes — the app stylesheet (/app/)
   Consumes tapes-tokens.css. Like site.css, nothing here defines a raw
   color, radius, duration or type step: every value is a token, a tint of
   one made with color-mix(), or an --a-* variable mapped from one.

   THE ONE RULE THAT IS NOT ABOUT LOOKS. This file may DECLARE only --a-*
   variables (and never --p, which is only ever set inline as progress and
   read here as var(--p, 0)). Redeclaring a site token -- even scoped under
   .app, even inside the ink theme -- is recorded by the homepage sky's seal
   as a change to the sky and fails the build. So the app's palette is a set
   of --a-* names MAPPED from the site's tokens, and the ink theme remaps
   those names, never the tokens behind them.

   And no rule here sets transform, filter, opacity, will-change, contain,
   isolation or the like on a bare html, body, main, section, canvas, * or
   :root selector (or html/body/main with a class): check_sky_rules() reads
   every stylesheet for that, because on the homepage those elements are the
   sky's ancestors. Everything below is scoped to .app-* classes instead.

   The episode is meant to read like its web page, so section 5 re-expresses
   site.css's .prose, .sources, .note, .vr and .pull looks under app names.

   Order:  0 app variables · 1 shell · 2 chrome (top, tabs, mini)
           3 views · 4 cards & lists · 5 episode & prose · 6 the sheet
           7 forms & buttons · 8 theme ink · 9 motion & reduced motion
           10 desktop layout
   ========================================================================== */

/* ------------------------------------------------------ 0 app variables */
.app{
  --a-bg:var(--paper);
  --a-surface:var(--card);
  --a-raise:var(--mist);
  --a-fg:var(--ink);
  --a-body:var(--steel-deep);
  --a-mute:var(--steel);
  --a-line:var(--line);
  --a-line-strong:var(--line-strong);
  --a-accent:var(--rust);
  --a-accent-pale:var(--rust-pale);
  --a-tint:var(--rust-tint);
  --a-link:var(--navy);
  --a-link-hover:var(--rust);
  --a-link-line:color-mix(in srgb, var(--navy) 28%, transparent);
  --a-plate:var(--ink);
  --a-btn-bg:var(--ink);
  --a-btn-fg:var(--paper);
  --a-btn-hover:var(--navy);
  --a-hover:color-mix(in srgb, var(--ink) 4.5%, transparent);
  --a-bar:color-mix(in srgb, var(--paper) 96%, transparent);
  --a-float-shadow:var(--shadow-float);
  --a-float-line:var(--line);
  --a-sel:var(--powder);
  --a-sel-fg:var(--ink);
  --a-mark:var(--powder);
  --a-sand:var(--sand);
  --a-sand-line:var(--sand-line);
  --a-sand-text:var(--sand-text);
  --a-sand-label:var(--sand-label);
  --a-note-bg:var(--card);
  --a-note-edge:var(--powder);
  --a-note-text:var(--steel-deep);
  --a-scrim:color-mix(in srgb, var(--ink) 42%, transparent);

  /* the chrome's geometry, phone first */
  --a-top-h:3.5rem;
  --a-tabs-h:3.75rem;
  --a-mini-h:4.25rem;
  --a-rail:16.5rem;
  --a-safe-b:env(safe-area-inset-bottom, 0px);
  --a-safe-l:env(safe-area-inset-left, 0px);
  --a-safe-r:env(safe-area-inset-right, 0px);
  --a-safe-t:env(safe-area-inset-top, 0px);
  --a-pad-l:max(var(--gutter), var(--a-safe-l));
  --a-pad-r:max(var(--gutter), var(--a-safe-r));
  /* what is fixed at the bottom of a phone, and so what the view must clear */
  --a-below:calc(var(--a-tabs-h) + var(--a-safe-b));
}

/* --------------------------------------------------------------- 1 shell */
/* site.css is not loaded here, so the app carries its own small reset --
   every selector of it wrapped in :where(), which weighs nothing. A plain
   `.app button` (0,1,1) outranks `.app-btn--solid` (0,1,0) and strips the
   ground off every solid button; the same trap painted the site's header
   CTA at 2.14:1 for months. With :where() the reset is a floor, never a
   ceiling: any class rule below wins it. */
:where(.app),:where(.app) *,:where(.app) *::before,:where(.app) *::after{box-sizing:border-box}
.app{
  margin:0;min-height:100vh;min-height:100dvh;
  background:var(--a-bg);color:var(--a-body);
  font-family:var(--ui);font-size:var(--t-body);line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}
:where(.app) :where(h1,h2,h3,h4){
  margin:0;font-family:var(--disp);font-weight:300;color:var(--a-fg);
  letter-spacing:-.022em;line-height:1.1;text-wrap:balance;font-variant-ligatures:none;
}
:where(.app) :where(p,figure,dl,dd,blockquote){margin:0}
:where(.app) :where(ul,ol){margin:0;padding:0;list-style:none}
:where(.app) a{color:inherit;text-decoration:none}
:where(.app) :where(img,svg){display:block;max-width:100%}
:where(.app) button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
:where(.app) button:disabled,:where(.app) button[aria-disabled="true"]{cursor:default}
:where(.app) :where(input,select,textarea){font:inherit;color:inherit}
/* The UA's [hidden]{display:none} loses to any rule here that sets display,
   and the sheet, the menus and the live regions all set one. */
.app [hidden]{display:none!important}
.app ::selection{background:var(--a-sel);color:var(--a-sel-fg)}
.app :focus-visible{outline:2px solid var(--a-accent);outline-offset:3px}
/* No border-radius here: at (0,2,0) it would beat every component's own
   radius while focused -- the round play button turned square. The outline
   follows the element's radius. On the dark plate and the toast the ring
   takes the color that reads there (3:1 at least, WCAG 2.4.11). */
.app-card--feature :focus-visible{outline-color:var(--rust-ink)}
.app-toast :focus-visible{outline-color:var(--a-btn-fg)}
/* The heading a route change focuses is a reading position, not a control. */
.app h1[tabindex="-1"]:focus,.app-view:focus,.app-now-tx:focus:not(:focus-visible){outline:none}
:where(.app) em{font-style:italic}

.app-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
html.app-locked{overflow:hidden}

.app-shell{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}

/* site.css's skip link is not loaded here. */
.app .skip{
  position:fixed;left:-9999px;top:calc(var(--a-safe-t) + 8px);z-index:90;
  background:var(--a-btn-bg);color:var(--a-btn-fg);padding:12px 18px;border-radius:var(--r);
  font-family:var(--label);font-weight:500;font-size:var(--t-label);letter-spacing:var(--track-label);
  text-transform:uppercase;
}
.app .skip:focus{left:calc(var(--a-safe-l) + 8px)}

.app-noscript{padding:2rem var(--gutter);font-size:var(--t-body);color:var(--a-body)}
.app-noscript a{color:var(--a-link);border-bottom:1px solid var(--a-link-line)}

/* -------------------------------------------- 2 chrome: top, tabs, mini */
.app-top{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:12px;
  min-height:calc(var(--a-top-h) + var(--a-safe-t));
  padding:var(--a-safe-t) var(--a-pad-r) 0 var(--a-pad-l);
  background:var(--a-bar);border-bottom:1px solid var(--a-line);
  backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);
}
.app-brand{display:flex;align-items:center;gap:11px;min-width:0;min-height:44px;margin-right:auto;color:var(--a-fg)}
.app-brand-mark{width:30px;height:30px;flex:none;color:var(--a-link)}
.app-brand-type{display:flex;flex-direction:column;min-width:0;line-height:1}
.app-brand-name{font-family:var(--disp);font-weight:300;font-size:1.125rem;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--d-fast) ease}
.app-brand-tag{margin-top:5px;font-family:var(--label);font-weight:500;font-size:.5rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--a-mute);white-space:nowrap}
@media (hover:hover){.app-brand:hover .app-brand-name{color:var(--a-link)}}

.app-iconbtn{flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-lg);color:var(--a-fg);transition:background-color var(--d-fast) var(--ease)}
@media (hover:hover){.app-iconbtn:hover{background:var(--a-hover)}}
.app-iconbtn svg{width:22px;height:22px}

/* The bottom tab bar. A rust tick over the current tab is the site's label
   tick turned on its side: the one accent this bar carries. */
.app-tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  padding:0 var(--a-safe-r) var(--a-safe-b) var(--a-safe-l);
  background:var(--a-bar);border-top:1px solid var(--a-line);
  backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);
}
.app-tabs a{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  height:var(--a-tabs-h);color:var(--a-mute);
  font-family:var(--label);font-weight:500;font-size:.59375rem;letter-spacing:.15em;text-transform:uppercase;
  transition:color var(--d-fast) ease;
}
.app-tabs a svg{width:22px;height:22px}
@media (hover:hover){.app-tabs a:hover{color:var(--a-fg)}}
.app-tabs a[aria-current="page"]{color:var(--a-fg)}
.app-tabs a[aria-current="page"]::before{content:'';position:absolute;top:-1px;left:50%;width:18px;height:2px;
  margin-left:-9px;background:var(--a-accent)}

/* The offline banner and the toast are live regions that are never hidden:
   idle, they are empty and clipped out of sight, but still in the tree. */
.app-offline{
  padding:10px var(--a-pad-r) 10px var(--a-pad-l);
  background:var(--a-sand);border-bottom:1px solid var(--a-sand-line);color:var(--a-sand-text);
  font-size:var(--t-sm);line-height:1.5;
}
.app-offline::before{content:'';display:inline-block;vertical-align:middle;width:14px;height:2px;
  margin:-2px 10px 0 0;background:var(--a-accent)}
.app-offline.is-idle,.app-toast.is-idle{position:fixed;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* the mini-player: above the tabs, the one floating object on the page */
.app-mini{
  position:fixed;left:0;right:0;bottom:var(--a-below);z-index:38;
  background:var(--a-surface);border-top:1px solid var(--a-float-line);box-shadow:var(--a-float-shadow);
}
.app-mini-bar{position:absolute;left:0;top:-1px;height:2px;width:calc(var(--p, 0) * 100%);
  background:var(--a-accent)}
.app-mini-in{display:flex;align-items:center;gap:2px;height:var(--a-mini-h);
  padding:0 max(6px, var(--a-safe-r)) 0 max(6px, var(--a-safe-l))}
.app-mini-open{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:12px;min-height:52px;
  padding:4px 8px;text-align:left;border-radius:var(--r-lg);transition:background-color var(--d-fast) var(--ease)}
@media (hover:hover){.app-mini-open:hover{background:var(--a-hover)}}
.app-mini-art{flex:none;width:44px;height:44px;border-radius:var(--r-sm);object-fit:cover;background:var(--ink)}
.app-mini-text{display:flex;flex-direction:column;min-width:0;gap:3px}
.app-mini-kicker{font-family:var(--label);font-weight:500;font-size:.5625rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--a-accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-mini-title{font-family:var(--disp);font-weight:400;font-size:1rem;line-height:1.2;color:var(--a-fg);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:359.98px){.app-skip--mini{display:none}}

/* ------------------------------------------------------------- 3 views */
.app-view{
  flex:1 0 auto;
  padding:0 var(--a-pad-r) calc(var(--a-below) + 3rem) var(--a-pad-l);
}
.app-shell[data-has-mini] .app-view{padding-bottom:calc(var(--a-below) + var(--a-mini-h) + 3rem)}
.app-page{max-width:52rem;margin:0 auto;padding-top:clamp(1.5rem,6vw,2.75rem)}
.app-page h1{font-weight:200;font-size:clamp(2.25rem,9vw,3.5rem);letter-spacing:-.034em;line-height:1.02;
  margin-top:14px}
.app-page>h1:first-child{margin-top:0}

/* the micro-label: a rust tick, then tracked caps -- the brand's signature */
.app-lab{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--label);font-size:var(--t-label);font-weight:500;line-height:1.4;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--a-mute);
}
.app-lab::before{content:'';width:18px;height:2px;background:var(--a-accent);flex:none}

.app-lede{font-family:var(--disp);font-weight:300;font-size:clamp(1.0625rem,4.4vw,1.25rem);line-height:1.55;
  color:var(--a-body);max-width:52ch;margin-top:20px;padding-top:20px;border-top:1px solid var(--a-line)}
.app-dek{font-family:var(--disp);font-style:italic;font-weight:300;font-size:clamp(1.125rem,4.8vw,1.4375rem);
  line-height:1.4;color:var(--a-link);margin-top:14px}
.app-body{font-size:var(--t-body);line-height:1.72;color:var(--a-body);max-width:var(--measure)}
.app-body a,.app-lede a{color:var(--a-link);border-bottom:1px solid var(--a-link-line)}

.app-sec{margin-top:clamp(2.25rem,8vw,3.25rem)}
.app-sec>.app-lab+.app-sec-h,.app-sec>.app-lab+h2{margin-top:14px}
.app-sec-h{font-size:clamp(1.625rem,6.6vw,2.25rem);font-weight:300;letter-spacing:-.026em;line-height:1.08}
.app-sec-h--sm{font-size:clamp(1.25rem,5vw,1.5rem);letter-spacing:-.016em}
.app-sec>.app-sec-h+.app-cards,.app-sec>.app-sec-h+.app-card,.app-sec>.app-sec-h+.app-plats,
.app-sec>.app-sec-h+.app-rows,.app-sec>.app-sec-h+.app-body,.app-sec>.app-sec-h+.app-steps{margin-top:18px}

/* the home hero: the cover beside the name, like the footer's artwork */
.app-hero{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:18px;align-items:center}
.app-hero-art{width:100%;height:auto;aspect-ratio:1/1;border-radius:var(--r-sm);background:var(--ink)}
.app-hero h1{margin:0;font-size:clamp(2.125rem,9.6vw,3.75rem);font-weight:200;line-height:.98;letter-spacing:-.038em}
.app-hero-tag{margin-top:10px;font-family:var(--label);font-weight:500;font-size:.59375rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--a-mute)}
.app-hero-by{margin-top:4px;font-family:var(--disp);font-style:italic;font-weight:300;font-size:.9375rem;color:var(--a-link)}
@media (max-width:359.98px){.app-hero{grid-template-columns:4.25rem minmax(0,1fr);gap:14px}}
.app-sec--season h2{font-size:clamp(1.75rem,7.6vw,2.625rem);font-weight:200;letter-spacing:-.032em}

/* a quiet standing note: what is true today, said once */
.app-status{display:flex;gap:12px;align-items:flex-start;margin-top:20px;padding:14px 16px;
  background:var(--a-note-bg);border:1px solid var(--a-line);border-left:2px solid var(--a-note-edge);
  font-size:.9375rem;line-height:1.6;color:var(--a-note-text);border-radius:0 var(--r) var(--r) 0}
.app-status svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--a-mute)}
.app-page>.app-status:first-child{margin-top:0}

.app-links{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:clamp(1.75rem,6vw,2.5rem)}
.app-tlink{display:inline-flex;align-items:center;gap:7px;min-height:44px;
  font-size:var(--t-sm);font-weight:600;color:var(--a-link);transition:color var(--d-fast) ease}
.app-tlink span{border-bottom:1px solid var(--a-link-line);padding-bottom:1px;transition:border-color var(--d-fast) ease}
@media (hover:hover){.app-tlink:hover{color:var(--a-link-hover)}}
@media (hover:hover){.app-tlink:hover span{border-bottom-color:var(--a-link-hover)}}
.app-tlink svg{width:14px;height:14px;flex:none}

.app-btnrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.app-wait,.app-empty{margin-top:1.5rem;font-family:var(--label);font-weight:500;font-size:var(--t-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--a-mute)}
.app-msg{margin-top:1.5rem;color:var(--a-body)}
.app-group-dek,.app-fold-dek{margin-top:14px;font-size:.9375rem;line-height:1.7;color:var(--a-body);max-width:var(--measure)}

/* filters and segmented choices share the site's chip: tracked caps in a
   hairline rectangle, solid when chosen */
.app-chips,.app-seg{display:flex;flex-wrap:wrap;gap:8px}
.app-chips{margin-top:22px;padding-bottom:20px;border-bottom:1px solid var(--a-line)}
.app-chips button,.app-seg button,.app-sleep-menu button{
  min-height:44px;padding:0 14px;border-radius:var(--r-sm);
  font-family:var(--label);font-size:var(--t-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--a-line-strong);color:var(--a-mute);background:transparent;
  transition:background-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease),border-color var(--d-fast) var(--ease);
}
@media (hover:hover){.app-chips button:hover,.app-seg button:hover,.app-sleep-menu button:hover{border-color:var(--a-fg);color:var(--a-fg)}}
.app-chips button[aria-pressed="true"],.app-seg button[aria-pressed="true"],.app-sleep-menu button[aria-pressed="true"]{
  background:var(--a-btn-bg);border-color:var(--a-btn-bg);color:var(--a-btn-fg)}
.app-chips+.app-status{margin-top:22px}
/* Thirteen subjects wrap into a wall on a phone. There they scroll sideways
   in one row instead, inside their own box, so the page itself never does. */
@media (max-width:899.98px){
  .app-chips{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    margin-left:calc(-1 * var(--a-pad-l));margin-right:calc(-1 * var(--a-pad-r));
    padding-left:var(--a-pad-l);padding-right:var(--a-pad-r);padding-top:2px}
  .app-chips::-webkit-scrollbar{display:none}
  .app-chips button{flex:none}
}

/* ------------------------------------------------------ 4 cards & lists */
/* A list of investigations reads like the site's index table: hairline
   rows, not boxes. Only the latest is a plate. */
.app-cards{border-top:1px solid var(--a-line)}
.app-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;
  align-items:center;padding:18px 0;border-bottom:1px solid var(--a-line)}
.app-card-body{min-width:0}
.app-card-kicker{font-family:var(--label);font-weight:500;font-size:.59375rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--a-mute)}
.app-card[data-state="live"] .app-card-kicker{color:var(--a-accent)}
.app-card-title{margin-top:6px;font-size:1.25rem;font-weight:400;line-height:1.22;letter-spacing:-.012em}
.app .app-card-title{font-family:var(--disp)}
.app-card-title a{transition:color var(--d-fast) ease}
/* The whole row opens the investigation; the play button sits above that. */
.app-card-title a::after{content:'';position:absolute;inset:0}
@media (hover:hover){.app-card:hover .app-card-title a{color:var(--a-link)}}
.app-card-sub{margin-top:5px;font-size:.875rem;line-height:1.5;color:var(--a-mute)}
.app-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:10px;
  font-family:var(--label);font-weight:500;font-size:.59375rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--a-mute)}
.app-card-meta span:first-child{font-family:var(--label-figures);font-variant-numeric:tabular-nums}
.app-dot{opacity:.6}
.app-card-saved{display:inline-flex;align-items:center;gap:4px;margin-left:6px;color:var(--a-fg)}
.app-card-saved svg{width:12px;height:12px}
.app-card .app-toggle{position:relative;z-index:1}
.app-card-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.app-card-prog span{display:block;height:100%;width:calc(var(--p, 0) * 100%);background:var(--a-accent)}
.app-card[data-playing="true"] .app-card-title a{color:var(--a-link)}

/* the latest investigation: the one dark plate, as on the homepage band */
.app-card--feature{margin-top:18px;padding:22px 20px;border:0;border-radius:var(--r);
  background:var(--a-plate);color:var(--on-ink-body)}
.app-card--feature .app-card-kicker{color:var(--rust-ink)}
.app-card--feature .app-card-title{font-size:clamp(1.5rem,6vw,1.875rem);font-weight:300;color:var(--on-ink)}
@media (hover:hover){.app-card--feature:hover .app-card-title a{color:var(--paper-alt)}}
.app-card--feature .app-card-sub{color:var(--on-ink-body);font-family:var(--disp);font-style:italic;font-weight:300;font-size:1rem}
.app-card--feature .app-card-meta{color:var(--on-ink-mute)}
.app-card--feature .app-card-saved{color:var(--on-ink)}
.app-card--feature .app-toggle{width:56px;height:56px;border-color:var(--line-ink-str);color:var(--on-ink)}
@media (hover:hover){.app-card--feature .app-toggle:hover{background:var(--rust-ink);border-color:var(--rust-ink);color:var(--ink)}}
.app-card--feature .app-card-prog{left:20px;right:20px;bottom:10px}
.app-card--feature .app-card-prog span{background:var(--rust-ink)}

/* the dossiers, folded on Home */
.app-fold{margin-top:14px;border-top:1px solid var(--a-line);border-bottom:1px solid var(--a-line)}
.app-fold>summary{list-style:none;display:flex;align-items:center;gap:12px;min-height:56px;cursor:pointer;
  font-family:var(--disp);font-weight:300;font-size:1.375rem;letter-spacing:-.016em;color:var(--a-fg)}
.app-fold>summary::-webkit-details-marker{display:none}
.app-fold>summary svg,.app-transcript>summary svg{width:14px;height:14px;flex:none;color:var(--a-accent);
  transition:transform var(--d-base) var(--ease)}
.app-fold[open]>summary svg,.app-transcript[open]>summary svg{transform:rotate(90deg)}
.app-fold-n{margin-left:auto;font-family:var(--label-figures);font-weight:500;font-size:var(--t-label);
  letter-spacing:.12em;text-transform:uppercase;color:var(--a-mute)}
.app-fold .app-cards{margin-top:16px;border-bottom:0}
.app-fold .app-card:last-child{border-bottom:0}

/* More: rows and the platform grid */
.app-rows{margin-top:clamp(1.5rem,5vw,2rem);border-top:1px solid var(--a-line)}
.app-rows li{border-bottom:1px solid var(--a-line)}
.app-row{display:flex;align-items:center;gap:14px;min-height:60px;padding:10px 2px;
  transition:background-color var(--d-fast) var(--ease)}
@media (hover:hover){.app-row:hover{background:var(--a-hover)}}
.app-row-ic{width:20px;height:20px;flex:none;color:var(--a-link)}
.app-row-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.app-row-t b{font-weight:600;font-size:.9375rem;color:var(--a-fg)}
.app-row-t span{margin-top:3px;font-size:.8125rem;color:var(--a-mute)}
.app-row-go{width:16px;height:16px;flex:none;color:var(--a-mute)}
@media (hover:hover){.app-row:hover .app-row-go,.app-row:hover .app-row-ic{color:var(--a-link-hover)}}
.app-rows--site .app-row{min-height:52px}
.app-rows--site .app-row-ic{width:16px;height:16px;color:var(--a-mute)}

/* .plats draws its hairlines as a 1px gap over a line-colored ground, so
   the column count must divide the tile count or an empty cell shows as a
   solid block. Six tiles: two columns on a phone, three when there is room. */
.app-plats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--a-line);border:1px solid var(--a-line)}
.app-plat{display:flex;align-items:center;gap:12px;min-height:68px;padding:14px;background:var(--a-surface);
  transition:background-color var(--d-base) var(--ease)}
@media (hover:hover){a.app-plat:hover{background:var(--a-bg)}}
.app-plat-ic{flex:none;width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--a-line-strong);border-radius:var(--r);color:var(--a-link)}
.app-plat-ic svg{width:18px;height:18px}
.app-plat-t{min-width:0;display:flex;flex-direction:column}
.app-plat-t b{font-size:.875rem;font-weight:550;color:var(--a-fg);line-height:1.25}
.app-plat-t span{margin-top:4px;font-family:var(--label);font-weight:500;font-size:.5625rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--a-mute)}
.app-plat.is-soon .app-plat-ic{color:var(--a-mute);border-style:dashed}
.app-plat.is-soon b{color:var(--a-mute)}
@media (min-width:560px){.app-plats{grid-template-columns:repeat(3,minmax(0,1fr))}}

.app-colophon{margin-top:clamp(2.5rem,8vw,3.5rem);padding-top:18px;border-top:1px solid var(--a-line);
  display:grid;gap:8px;font-family:var(--label);font-weight:500;font-size:.5625rem;line-height:1.8;
  letter-spacing:.15em;text-transform:uppercase;color:var(--a-mute)}
.app-colophon a{color:var(--a-fg);border-bottom:1px solid var(--a-line-strong)}

/* Saved */
.app-saved{margin-top:24px;border-top:1px solid var(--a-line)}
.app-saved li{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--a-line)}
.app-saved-t{flex:1;min-width:0;display:flex;flex-direction:column}
.app-saved-t a{display:flex;align-items:center;min-height:44px;font-family:var(--disp);font-size:1.125rem;color:var(--a-fg);line-height:1.25}
@media (hover:hover){.app-saved-t a:hover{color:var(--a-link)}}
.app-saved-t span{margin-top:4px;font-family:var(--label-figures);font-weight:500;font-size:.625rem;
  letter-spacing:.12em;color:var(--a-mute);font-variant-numeric:tabular-nums}
.app-refused{margin-top:18px;display:grid;gap:10px;font-size:.875rem;color:var(--a-body)}
.app-refused b{color:var(--a-fg);font-weight:600}
.app-storage{margin-top:18px;font-family:var(--label-figures);font-weight:500;font-size:.6875rem;
  letter-spacing:.1em;color:var(--a-mute);font-variant-numeric:tabular-nums}
.app-storage:empty{display:none}

/* Settings */
.app-set{padding:22px 0;border-bottom:1px solid var(--a-line)}
.app-page--settings h1+.app-set{margin-top:clamp(1rem,4vw,1.75rem);border-top:1px solid var(--a-line)}
.app-set h2{font-size:1.1875rem;font-weight:400;letter-spacing:-.01em;margin-bottom:14px}
.app-set .app-btnrow{margin-top:0}
.app-set-line{font-size:.9375rem;color:var(--a-body);margin-bottom:14px}
.app-set-note{margin-top:12px;font-size:.8125rem;line-height:1.6;color:var(--a-mute);max-width:52ch}
.app-figs{font-family:var(--label-figures);font-weight:500;font-variant-numeric:tabular-nums;color:var(--a-fg);
  letter-spacing:.04em}

/* About */
.app-host{margin-top:clamp(2.25rem,8vw,3.25rem);padding:22px 20px;background:var(--a-surface);
  border:1px solid var(--a-line);border-radius:var(--r)}
.app-host h2{margin-top:14px;font-size:clamp(1.5rem,6vw,1.875rem);font-weight:300}
.app-host-cred{margin:6px 0 14px;font-family:var(--label);font-weight:500;font-size:.59375rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--a-mute)}
.app-host .app-tlink{margin-top:8px}
.app-steps{display:grid;gap:1px;background:var(--a-line);border:1px solid var(--a-line)}
.app-steps li{background:var(--a-surface);padding:18px}
.app-step-n{display:block;font-family:var(--label);font-weight:500;font-size:.625rem;letter-spacing:.19em;
  color:var(--a-accent);text-transform:uppercase}
.app-steps h3{margin-top:10px;font-size:1.1875rem;font-weight:400}
.app-steps p{margin-top:6px;font-size:.875rem;line-height:1.62;color:var(--a-mute)}
@media (min-width:640px){.app-steps{grid-template-columns:1fr 1fr}}

/* the install card: quiet, last on Home */
.app-install{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;margin-top:clamp(2rem,7vw,2.75rem);
  padding:20px 18px;border:1px solid var(--a-line);border-radius:var(--r);background:var(--a-surface)}
.app-install-ic{width:24px;height:24px;color:var(--a-link);margin-top:2px}
.app-install h2{font-size:1.25rem;font-weight:400;letter-spacing:-.012em}
.app-install p{margin-top:6px;font-size:.9375rem;line-height:1.6;color:var(--a-body)}
.app-install .app-btnrow{margin-top:14px}

/* Search */
.app-search{position:relative;margin-top:20px}
.app-search-ic{position:absolute;left:14px;top:50%;width:20px;height:20px;margin-top:-10px;color:var(--a-mute);
  pointer-events:none}
.app-search input{
  width:100%;min-height:52px;padding:12px 14px 12px 46px;
  font-family:var(--ui);font-size:max(1rem, 16px);color:var(--a-fg);
  background:var(--a-surface);border:1px solid var(--a-mute);border-radius:var(--r-lg);
  -webkit-appearance:none;appearance:none;transition:border-color var(--d-fast) ease;
}
.app-search input::placeholder{color:var(--a-mute);opacity:1}
.app-search input:focus{border-color:var(--a-accent)}
.app-search input::-webkit-search-cancel-button{
  /* WebKit's own clear button is a fixed system blue on paper. Redrawn as a
     mask over a token color; the SVG's default fill is read only as alpha. */
  -webkit-appearance:none;appearance:none;width:16px;height:16px;margin:0 2px 0 10px;cursor:pointer;
  background:var(--a-mute);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.1 1.7 8 6.6l4.9-4.9 1.4 1.4L9.4 8l4.9 4.9-1.4 1.4L8 9.4l-4.9 4.9-1.4-1.4L6.6 8 1.7 3.1z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.1 1.7 8 6.6l4.9-4.9 1.4 1.4L9.4 8l4.9 4.9-1.4 1.4L8 9.4l-4.9 4.9-1.4-1.4L6.6 8 1.7 3.1z'/%3E%3C/svg%3E") center/contain no-repeat}
@media (hover:hover){.app-search input::-webkit-search-cancel-button:hover{background:var(--a-fg)}}
.app-search-count{margin-top:14px;font-family:var(--label);font-weight:500;font-size:var(--t-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--a-mute);min-height:1.4em}
.app-rgroup{margin-top:22px}
.app-rgroup ul{margin-top:10px;border-top:1px solid var(--a-line)}
.app-rgroup li{border-bottom:1px solid var(--a-line)}
.app-result{display:block;padding:13px 2px;transition:background-color var(--d-fast) var(--ease)}
@media (hover:hover){.app-result:hover{background:var(--a-hover)}}
.app-result b{display:block;font-family:var(--disp);font-weight:400;font-size:1.125rem;line-height:1.25;color:var(--a-fg)}
@media (hover:hover){.app-result:hover b{color:var(--a-link)}}
.app-result mark{background:var(--a-mark);color:inherit;border-radius:var(--r-sm);padding:0 1px}
.app-result-sub{display:block;margin-top:4px;font-family:var(--label);font-weight:500;font-size:.5625rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--a-mute)}
.app-result-hint{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:4px;font-size:.84375rem;line-height:1.55;color:var(--a-body)}

/* -------------------------------------------------- 5 episode & prose */
.app-page--ep{max-width:44rem}
.app-navback{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-left:-10px;padding:0 12px 0 6px;
  border-radius:var(--r-lg);font-family:var(--label);font-weight:500;font-size:var(--t-label);
  letter-spacing:.16em;text-transform:uppercase;color:var(--a-mute);transition:color var(--d-fast) ease}
@media (hover:hover){.app-navback:hover{color:var(--a-fg)}}
.app-navback svg{width:18px;height:18px}
.app-page--ep{padding-top:clamp(.5rem,3vw,1.5rem)}
.app-ep-head{margin-top:clamp(.75rem,3vw,1.25rem)}
.app-ep-head h1{font-size:clamp(2.125rem,9vw,3.5rem);font-weight:200;letter-spacing:-.035em;line-height:1.02}
.app-ep-sub{margin-top:14px;font-family:var(--disp);font-style:italic;font-weight:300;
  font-size:clamp(1.0625rem,4.6vw,1.375rem);line-height:1.45;color:var(--a-link);max-width:40ch}
.app-ep-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;padding:13px 0;
  border-top:1px solid var(--a-line);border-bottom:1px solid var(--a-line);
  font-family:var(--label);font-weight:500;font-size:.59375rem;letter-spacing:.16em;text-transform:uppercase;color:var(--a-mute)}
.app-ep-meta b{color:var(--a-fg);font-weight:500;font-family:var(--label-figures);font-variant-numeric:tabular-nums}
.app-ep-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 10px;margin-top:20px}
.app-ep-actions .app-tlink{margin-left:6px}
.app-loading{color:var(--a-mute)}

.app-standing .note{margin-top:clamp(1.5rem,5vw,2rem)!important}
.app-summary{margin-top:clamp(1.5rem,5vw,2.25rem)}
.app-summary p{font-family:var(--disp);font-weight:300;font-size:clamp(1.0625rem,4.4vw,1.25rem);line-height:1.6;color:var(--a-body)}

/* claim / evidence / verdict -- the spine, as the episode page draws it */
.app-spine{margin-top:clamp(1.5rem,5vw,2.25rem);border-top:1px solid var(--a-line)}
.app-spine>div{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:17px 0;border-bottom:1px solid var(--a-line)}
.app-spine dt{font-family:var(--label);font-size:.59375rem;font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:var(--a-mute);padding-top:3px}
.app-spine dd{margin:0;font-size:.9375rem;line-height:1.65;color:var(--a-body)}
.app-spine dd p+p{margin-top:.7em}
.app-spine dd .app-tag+p{margin-top:11px}
@media (min-width:560px){.app-spine>div{grid-template-columns:7.375rem minmax(0,1fr);gap:22px}}
.app-tag{display:inline-block;font-family:var(--label);font-size:var(--t-label);font-weight:500;line-height:1.4;
  letter-spacing:.15em;text-transform:uppercase;padding:4px 9px;border-radius:var(--r-sm);
  background:var(--a-tint);color:var(--a-accent);border:1px solid var(--a-accent-pale)}

/* show notes: site.css's .prose, under the app's name */
.app-prose{max-width:var(--measure)}
.app-notes{margin-top:clamp(2rem,6vw,3rem)}
.app-prose h2{font-size:var(--t-h3);margin:2.25rem 0 .875rem}
.app-notes>h2:first-child{margin-top:0}
.app-prose h3{font-size:var(--t-h4);font-weight:400;margin:1.75rem 0 .625rem}
.app-prose p{margin:0 0 1.25rem;font-size:var(--t-body);line-height:1.78;color:var(--a-body)}
.app-prose ul,.app-prose ol{margin:0 0 1.375rem;padding-left:1.25rem;list-style:disc}
.app-prose ol{list-style:decimal}
.app-prose li{margin:.5rem 0;line-height:1.72;color:var(--a-body)}
.app-prose strong,.app-prose b{color:var(--a-fg);font-weight:600}
.app-prose a:not(.fn){color:var(--a-link);border-bottom:1px solid var(--a-link-line);overflow-wrap:anywhere;
  transition:color var(--d-fast) ease,border-color var(--d-fast) ease}
@media (hover:hover){.app-prose a:not(.fn):hover{color:var(--a-link-hover);border-bottom-color:var(--a-link-hover)}}
.app-prose .pull{margin:2.25rem 0;padding:2px 0 2px 1.5rem;border-left:2px solid var(--a-accent)}
.app-prose .pull p{font-family:var(--disp);font-style:italic;font-weight:300;font-size:clamp(1.1875rem,4.6vw,1.5rem);
  line-height:1.48;color:var(--a-fg);margin:0}
.app-prose .pull cite{display:block;margin-top:.75rem;font-style:normal;font-family:var(--label);font-weight:500;
  font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--a-mute)}
/* Footnote markers jump to the numbered list, like the page's. */
.app-prose .fn{font-family:var(--label);font-weight:500;font-size:.625rem;font-variant-numeric:tabular-nums;
  vertical-align:super;line-height:0;margin-left:2px;padding:0 1px;color:var(--a-accent);border-bottom:0}
.app-prose .fn::before{content:"["}
.app-prose .fn::after{content:"]"}
@media (hover:hover){.app-prose .fn:hover{color:var(--a-link)}}

/* the quiet note panel and its warning form */
.app .note,.app-note{background:var(--a-note-bg);border:1px solid var(--a-line);border-left:2px solid var(--a-note-edge);
  padding:1.125rem 1.25rem;margin:1.75rem 0;font-size:.9375rem;line-height:1.7;color:var(--a-note-text)}
.app .note p,.app-note p{margin:0;color:inherit}
.app .note p+p{margin-top:.75em}
.app .note strong,.app .note b,.app-note strong{color:var(--a-fg);font-weight:600}
.app .note--warn,.app-note--warn{border-left-color:var(--a-accent);background:var(--a-tint)}
.app-note a,.app .note a{color:var(--a-link);border-bottom:1px solid var(--a-link-line)}

.app-xlink{margin-top:clamp(1.5rem,5vw,2rem);padding:16px 18px;border:1px solid var(--a-line);
  border-radius:var(--r);background:var(--a-surface)}
.app-xlink p{font-size:.9375rem;line-height:1.6;color:var(--a-body)}
.app-xlink b{color:var(--a-fg);font-weight:600}
.app-xlink-links{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:4px}

/* the numbered source list */
.app-srcs{margin-top:clamp(2.25rem,7vw,3.25rem)}
.app-srcs h2{font-size:var(--t-h3);scroll-margin-top:calc(var(--a-top-h) + var(--a-safe-t) + 1rem)}
.app-srcs-dek{margin-top:10px;font-size:.9375rem;line-height:1.65;color:var(--a-body);max-width:var(--measure)}
.app-sources{counter-reset:src;margin-top:1rem}
.app-sources li{counter-increment:src;display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:0 12px;
  padding:15px 0;border-top:1px solid var(--a-line);font-size:.875rem;line-height:1.6;color:var(--a-body)}
.app-sources li:last-child{border-bottom:1px solid var(--a-line)}
.app-sources li::before{content:counter(src,decimal-leading-zero);grid-row:span 3;font-family:var(--label-figures);
  font-weight:500;font-size:.6875rem;color:var(--a-accent);padding-top:3px;font-variant-numeric:tabular-nums}
.app-sources cite{grid-column:2;font-style:normal;color:var(--a-fg);font-weight:600;overflow-wrap:anywhere}
.app-src-meta{grid-column:2;display:block;margin-top:3px;font-family:var(--label);font-weight:500;font-size:.59375rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--a-mute)}
.app-src-links{grid-column:2;display:block;margin-top:6px}
.app-src-links a{color:var(--a-link);border-bottom:1px solid var(--a-link-line);overflow-wrap:anywhere}
@media (hover:hover){.app-src-links a:hover{color:var(--a-link-hover);border-bottom-color:var(--a-link-hover)}}

/* the transcript, folded */
.app-transcript{margin-top:1.75rem;border:1px solid var(--a-line);background:var(--a-surface);border-radius:var(--r)}
.app-transcript>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:52px;
  padding:0 18px;font-family:var(--label);font-size:var(--t-label);font-weight:500;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--a-fg)}
.app-transcript>summary::-webkit-details-marker{display:none}
.app-transcript-body{padding:4px 18px 16px;border-top:1px solid var(--a-line)}
.app-tline{display:grid;grid-template-columns:4rem minmax(0,1fr);gap:12px;padding:8px 0;
  font-size:.90625rem;line-height:1.7;color:var(--a-body);border-left:2px solid transparent;margin-left:-10px;padding-left:8px}
.app-tline time{display:block;font-family:var(--label-figures);font-weight:500;font-size:.6875rem;color:var(--a-mute);
  font-variant-numeric:tabular-nums;padding-top:4px}
.app-tline button{align-self:start;min-height:44px;margin:-10px 0 -10px -6px;padding:0 6px;border-radius:var(--r-sm);text-align:left}
@media (hover:hover){.app-tline button:hover time{color:var(--a-accent)}}
.app-tline b{color:var(--a-fg);font-weight:600}
.app-tline[aria-current="true"]{border-left-color:var(--a-accent);color:var(--a-fg)}
.app-tline[aria-current="true"] time{color:var(--a-accent)}

/* prev / next */
.app-pager{display:grid;grid-template-columns:1fr;gap:1px;background:var(--a-line);border:1px solid var(--a-line);
  margin-top:clamp(2.25rem,7vw,3.25rem)}
@media (min-width:600px){.app-pager{grid-template-columns:1fr 1fr}}
.app-pager-a{display:block;background:var(--a-surface);padding:18px 20px;transition:background-color var(--d-base) var(--ease)}
@media (hover:hover){a.app-pager-a:hover{background:var(--a-bg)}}
.app-pager-a.is-next{text-align:right}
.app-pager-k{display:block;font-family:var(--label);font-weight:500;font-size:.59375rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--a-accent)}
.app-pager-t{display:block;margin-top:7px;font-family:var(--disp);font-size:1.125rem;line-height:1.25;color:var(--a-fg)}
.app-pager-a.is-none .app-pager-k,.app-pager-a.is-none .app-pager-t{color:var(--a-mute)}

/* ----------------------------------------------------------- 6 the sheet */
/* On a phone the sheet IS the viewport: fixed to all four edges (never
   100vh, which on iOS is the height with the toolbars hidden, so the
   bottom of the sheet would sit under Safari's), padded by the insets, and
   it slides up on its own transform -- allowed, because it is not one of
   the elements the homepage sky sits inside. */
.app-now{
  position:fixed;inset:0;z-index:60;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:var(--a-safe-t) var(--a-safe-r) var(--a-safe-b) var(--a-safe-l);
  background:var(--a-bg);
  transform:translateY(100%);
  transition:transform var(--d-base) var(--ease);
}
.app-now.is-open{transform:none}
.app-now-panel{max-width:32rem;margin:0 auto;padding:0 var(--gutter) 2.5rem}
.app-now-bar{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;min-height:56px;
  margin:0 -8px}
.app-now-label{text-align:center;font-family:var(--label);font-weight:500;font-size:var(--t-label);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--a-mute)}
.app-now-art{margin-top:6px;aspect-ratio:1200/630;overflow:hidden;border-radius:var(--r);background:var(--ink)}
.app-now-art img{width:100%;height:100%;object-fit:cover}
.app-now .app-lab{margin-top:22px}
.app-now h2{margin-top:10px;font-size:clamp(1.5rem,6.6vw,2rem);font-weight:300;line-height:1.12}
.app-now-sub{margin-top:6px;font-family:var(--disp);font-style:italic;font-weight:300;font-size:1rem;line-height:1.45;
  color:var(--a-link)}

/* the scrubber: a hairline with a playhead, in the accent */
.app-scrub{margin-top:20px}
.app-scrub input{
  display:block;width:100%;height:32px;margin:0;background:transparent;cursor:pointer;
  -webkit-appearance:none;appearance:none;font-size:max(1rem, 16px);
}
.app-scrub input::-webkit-slider-runnable-track{height:3px;border-radius:var(--r-sm);
  background:linear-gradient(to right,var(--a-accent) calc(var(--p, 0) * 100%),var(--a-line-strong) 0)}
.app-scrub input::-moz-range-track{height:3px;border-radius:var(--r-sm);background:var(--a-line-strong)}
.app-scrub input::-moz-range-progress{height:3px;background:var(--a-accent)}
.app-scrub input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:5px;height:20px;margin-top:-8.5px;
  border:0;border-radius:var(--r-sm);background:var(--a-accent)}
.app-scrub input::-moz-range-thumb{width:5px;height:20px;border:0;border-radius:var(--r-sm);background:var(--a-accent)}
.app-now-times{display:flex;justify-content:space-between;margin-top:2px;
  font-family:var(--label-figures);font-weight:500;font-size:.6875rem;letter-spacing:.06em;
  color:var(--a-mute);font-variant-numeric:tabular-nums}

.app-transport{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:14px}
.app-rate,.app-sleep{flex:none;min-width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;gap:4px;
  padding:0 6px;border-radius:var(--r-lg);color:var(--a-fg);
  font-family:var(--label-figures);font-weight:500;font-size:.8125rem;font-variant-numeric:tabular-nums;
  transition:background-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease)}
@media (hover:hover){.app-rate:hover,.app-sleep:hover{background:var(--a-hover)}}
.app-sleep svg{width:20px;height:20px}
.app-sleep.is-on{color:var(--a-accent)}
.app-sleep [data-sleep-label]:empty{display:none}
.app-sleep-menu{flex-wrap:wrap;gap:8px;display:flex;margin-top:12px;padding:12px;border:1px solid var(--a-line);
  border-radius:var(--r);background:var(--a-surface)}

/* skip: the arc, with its seconds set inside it */
.app-skip{flex:none;position:relative;width:52px;height:52px;display:inline-grid;place-items:center;
  border-radius:var(--r-lg);color:var(--a-fg);transition:background-color var(--d-fast) var(--ease)}
@media (hover:hover){.app-skip:hover{background:var(--a-hover)}}
.app-skip svg{grid-area:1/1;width:32px;height:32px}
.app-skip span{grid-area:1/1;margin-top:2px;font-family:var(--label-figures);font-weight:600;font-size:.5625rem;
  font-variant-numeric:tabular-nums;letter-spacing:0}
.app-skip--mini{width:44px;height:44px}
.app-skip--mini svg{width:28px;height:28px}

/* the play button: one of the two round things on the site */
.app-toggle{flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-round);border:1px solid var(--a-line-strong);background:transparent;color:var(--a-fg);
  transition:background-color var(--d-base) var(--ease),border-color var(--d-base) var(--ease),color var(--d-base) var(--ease)}
.app-toggle svg{width:15px;height:15px}
.app-toggle .app-i-play{margin-left:2px}
@media (hover:hover){.app-toggle:hover{background:var(--a-accent);border-color:var(--a-accent);color:var(--a-bg)}}
.app-i-pause{display:none}
.app-toggle[aria-pressed="true"] .app-i-pause,.app-playtext.is-playing .app-i-pause{display:block}
.app-toggle[aria-pressed="true"] .app-i-play,.app-playtext.is-playing .app-i-play{display:none}
.app-toggle--mini{border-color:transparent}
.app-toggle--card{width:48px;height:48px}
.app-toggle--big{width:72px;height:72px;border:0;background:var(--a-btn-bg);color:var(--a-btn-fg)}
.app-toggle--big svg{width:22px;height:22px}
@media (hover:hover){.app-toggle--big:hover{background:var(--a-accent);color:var(--a-btn-fg)}}

.app-saveprog{height:2px;margin-top:18px;background:var(--a-line)}
.app-saveprog span{display:block;height:100%;width:calc(var(--p, 0) * 100%);background:var(--a-accent)}

.app-now-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:18px;border-top:1px solid var(--a-line)}
.app-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;
  border:1px solid var(--a-line-strong);border-radius:var(--r-lg);color:var(--a-fg);
  font-family:var(--ui);font-size:.6875rem;font-weight:600;letter-spacing:var(--track-btn);text-transform:uppercase;
  transition:border-color var(--d-fast) var(--ease),background-color var(--d-fast) var(--ease)}
@media (hover:hover){.app-chip:hover{border-color:var(--a-fg);background:var(--a-hover)}}
.app-chip svg{width:16px;height:16px;flex:none}
.app-chip[aria-pressed="true"]{border-color:var(--a-fg)}
.app-chip[aria-pressed="true"] svg{color:var(--a-accent)}

.app-i-check{display:none}
.app-save[data-state="saved"] .app-i-check,.app-chip[data-state="saved"] .app-i-check{display:block;color:var(--a-accent)}
.app-save[data-state="saved"] .app-i-save,.app-chip[data-state="saved"] .app-i-save{display:none}
.app-save[data-state="saving"],.app-chip[data-state="saving"]{font-variant-numeric:tabular-nums}

.app-now-sec{margin-top:26px}
.app-chapters{margin-top:12px;border-top:1px solid var(--a-line)}
.app-chapters li{border-bottom:1px solid var(--a-line)}
.app-chapters button{display:flex;align-items:baseline;gap:14px;width:100%;min-height:48px;padding:12px 2px;text-align:left;
  font-size:.9375rem;line-height:1.4;color:var(--a-fg);transition:background-color var(--d-fast) var(--ease)}
@media (hover:hover){.app-chapters button:hover{background:var(--a-hover)}}
.app-chapters time{flex:none;width:3.5rem;font-family:var(--label-figures);font-weight:500;font-size:.6875rem;
  color:var(--a-accent);font-variant-numeric:tabular-nums}
.app-now-tx{position:relative;margin-top:12px;max-height:min(24rem,52vh);overflow-y:auto;overscroll-behavior:contain;
  padding:4px 4px 4px 12px;border:1px solid var(--a-line);border-radius:var(--r);background:var(--a-surface)}

/* ------------------------------------------------- 7 forms & buttons */
/* sharp rectangles, as on the site: the deliberate break from pills */
.app-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 20px;
  border-radius:var(--r-lg);border:1px solid transparent;white-space:nowrap;
  font-family:var(--ui);font-size:.71875rem;font-weight:600;letter-spacing:var(--track-btn);text-transform:uppercase;
  transition:background-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease),border-color var(--d-fast) var(--ease)}
.app-btn svg{width:15px;height:15px;flex:none}
.app-btn--solid{background:var(--a-btn-bg);color:var(--a-btn-fg)}
@media (hover:hover){.app-btn--solid:hover{background:var(--a-btn-hover);color:var(--a-btn-fg)}}
.app-btn--line{border-color:var(--a-line-strong);color:var(--a-fg);background:transparent}
@media (hover:hover){.app-btn--line:hover{border-color:var(--a-fg);background:var(--a-hover)}}
.app-btn--sm{min-height:44px;padding:0 14px;font-size:.6875rem}
.app-btn--warn{color:var(--a-accent);border-color:var(--a-accent-pale)}
@media (hover:hover){.app-btn--warn:hover{border-color:var(--a-accent)}}
.app-btn:disabled{opacity:.7}
.app-playtext{min-width:7.5rem}
@media (max-width:359.98px){.app-btn{padding:0 14px}}

/* the switch: a rectangle, because only the play button and the mark are round */
.app-switch{display:inline-flex;align-items:center;gap:14px;min-height:44px;text-align:left;
  font-size:.9375rem;color:var(--a-body)}
.app-switch-track{flex:none;position:relative;width:46px;height:26px;border-radius:var(--r-lg);
  border:1px solid var(--a-line-strong);background:var(--a-surface);transition:background-color var(--d-fast) var(--ease),border-color var(--d-fast) var(--ease)}
.app-switch-track span{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:var(--r);
  background:var(--a-mute);transition:left var(--d-fast) var(--ease),background-color var(--d-fast) var(--ease)}
.app-switch[aria-checked="true"] .app-switch-track{background:var(--a-btn-bg);border-color:var(--a-btn-bg)}
.app-switch[aria-checked="true"] .app-switch-track span{left:23px;background:var(--a-btn-fg)}

/* the letter: the one warm surface, as on the site */
.app-letter{margin-top:clamp(2.25rem,8vw,3.25rem);padding:clamp(1.5rem,6vw,2.25rem) clamp(1.125rem,5vw,2rem);
  background:var(--a-sand);border:1px solid var(--a-sand-line);border-radius:var(--r);color:var(--a-sand-text)}
.app-letter .app-lab{color:var(--a-sand-label)}
.app-letter h2{margin-top:14px;font-size:clamp(1.5rem,6.4vw,2rem);font-weight:300}
.app-letter-blurb{margin-top:12px;font-size:.96875rem;line-height:1.7;color:var(--a-sand-text);max-width:48ch}
.app-letter--view{margin-top:clamp(1.5rem,6vw,2rem)}
.app-letter-form{margin-top:20px}
.app-letter-form label{display:block;font-family:var(--label);font-weight:500;font-size:var(--t-label);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--a-sand-label)}
.app-letter-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;align-items:stretch}
.app-letter-row input{flex:1 1 13rem;min-width:0;min-height:48px;padding:10px 12px;
  font-family:var(--ui);font-size:max(1rem, 16px);color:var(--a-fg);
  background:var(--a-surface);border:1px solid var(--a-mute);border-radius:var(--r-lg);
  -webkit-appearance:none;appearance:none;transition:border-color var(--d-fast) ease}
.app-letter-row input::placeholder{color:var(--a-sand-label);opacity:1}
.app-letter-row input:focus{border-color:var(--a-accent)}
.app-letter-row .app-btn{flex:0 0 auto;min-height:48px}
.app-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.app-letter-msg{margin-top:12px;font-size:.90625rem;line-height:1.6;color:var(--a-sand-text);min-height:1.4em}
.app-letter-small{margin-top:16px;font-family:var(--label);font-weight:500;font-size:var(--t-label);line-height:1.8;
  letter-spacing:.14em;text-transform:uppercase;color:var(--a-sand-label)}
@media (max-width:420px){.app-letter-row .app-btn{flex:1 1 100%}}

/* the toast: a floating slip above the player */
.app-toast{
  position:fixed;z-index:70;left:50%;bottom:calc(var(--a-below) + 12px);
  width:min(30rem, calc(100% - 2 * var(--gutter)));transform:translateX(-50%);
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:12px 14px 12px 16px;
  background:var(--a-btn-bg);color:var(--a-btn-fg);border-radius:var(--r-lg);box-shadow:var(--shadow-lift);
  font-size:.9375rem;line-height:1.45;
}
.app-shell[data-has-mini] .app-toast{bottom:calc(var(--a-below) + var(--a-mini-h) + 12px)}
.app-toast p{flex:1 1 12rem;min-width:0}
.app-toast-btn{min-height:44px;padding:0 12px;border-radius:var(--r);
  font-family:var(--ui);font-size:.6875rem;font-weight:600;letter-spacing:var(--track-btn);text-transform:uppercase;
  background:var(--a-btn-fg);color:var(--a-btn-bg)}
.app-toast-btn--quiet{background:transparent;color:var(--a-btn-fg);border:1px solid color-mix(in srgb, var(--a-btn-fg) 40%, transparent)}

/* ------------------------------------------------------------ 8 theme ink */
/* The dark ramp, remapped onto the same --a-* names. The accent becomes
   --rust-ink; --paper-alt appears only where it may (link hover, <em>,
   selection); floating things lose their shadow -- a shadow on midnight is
   invisible -- and take a hairline on top instead. */
html[data-theme="ink"] .app{
  --a-bg:var(--ink);
  --a-surface:var(--slate-deep);
  --a-raise:var(--slate);
  --a-fg:var(--on-ink);
  --a-body:var(--on-ink-body);
  --a-mute:var(--on-ink-mute);
  --a-line:var(--slate-line);
  --a-line-strong:var(--slate-line-str);
  --a-accent:var(--rust-ink);
  --a-accent-pale:color-mix(in srgb, var(--rust-ink) 40%, transparent);
  --a-tint:color-mix(in srgb, var(--rust-ink) 11%, transparent);
  --a-link:var(--on-ink);
  --a-link-hover:var(--paper-alt);
  --a-link-line:var(--slate-line-str);
  --a-plate:var(--slate);
  --a-btn-bg:var(--on-ink);
  --a-btn-fg:var(--ink);
  /* Not the ice token: on ink that one is kept for link hover, <em> and
     selection, so a solid button only dims a step toward the page. */
  --a-btn-hover:color-mix(in srgb, var(--on-ink) 84%, var(--ink));
  --a-hover:color-mix(in srgb, var(--on-ink) 6%, transparent);
  --a-bar:color-mix(in srgb, var(--ink) 95%, transparent);
  --a-float-shadow:none;
  --a-float-line:var(--slate-line-str);
  --a-sel:var(--paper-alt);
  --a-sel-fg:var(--ink);
  --a-mark:color-mix(in srgb, var(--rust-ink) 28%, transparent);
  --a-sand:var(--slate-deep);
  --a-sand-line:var(--slate-line-str);
  --a-sand-text:var(--on-ink-body);
  --a-sand-label:var(--on-ink-mute);
  --a-note-bg:var(--slate);
  --a-note-edge:var(--slate-line-str);
  --a-note-text:var(--on-ink-body);
  --a-scrim:color-mix(in srgb, var(--ink) 72%, transparent);
  color-scheme:dark;
}
html[data-theme="ink"] .app em{color:var(--paper-alt)}
html[data-theme="ink"] .app-card--feature{border:1px solid var(--slate-line-str)}
html[data-theme="ink"] .app-hero-art,html[data-theme="ink"] .app-now-art{box-shadow:0 0 0 1px var(--slate-line-str)}
html[data-theme="ink"] .app-toast{border:1px solid var(--slate-line-str);box-shadow:none}

/* ------------------------------------------ 9 motion & reduced motion */
.app-toast{transition:opacity var(--d-base) var(--ease)}
/* Progress hairlines move with the audio, never on a tween of their own. */
.app-mini-bar,.app-card-prog span,.app-saveprog span{transition:none}
@media (prefers-reduced-motion:reduce){
  .app *,.app *::before,.app *::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .app-now,.app-now.is-open{transform:none;transition:none}
}

/* --------------------------------------------------- 10 desktop layout */
/* At 900px the tabs become a left rail with the brand on top, the view a
   centered column, and the sheet a centered panel over a scrim. DOM order
   already matches: header, then the rail, then the view. */
@media (min-width:900px){
  .app{--a-below:0px}
  .app-top{position:fixed;top:0;left:0;width:var(--a-rail);min-height:0;height:calc(5.5rem + var(--a-safe-t));
    padding:var(--a-safe-t) 18px 0 max(22px, var(--a-safe-l));border-bottom:0;border-right:1px solid var(--a-line);
    background:var(--a-bg);backdrop-filter:none;-webkit-backdrop-filter:none}
  .app-top .app-iconbtn{display:none}
  .app-brand-name{font-size:1.0625rem}
  .app-tabs{top:calc(5.5rem + var(--a-safe-t));right:auto;width:var(--a-rail);display:flex;flex-direction:column;
    gap:2px;padding:10px 12px var(--a-safe-b) max(12px, var(--a-safe-l));
    border-top:0;border-right:1px solid var(--a-line);background:var(--a-bg);backdrop-filter:none;-webkit-backdrop-filter:none}
  .app-tabs a{flex-direction:row;justify-content:flex-start;gap:14px;height:46px;padding:0 12px;border-radius:var(--r-lg);
    font-family:var(--ui);font-size:.9375rem;font-weight:500;letter-spacing:0;text-transform:none}
  .app-tabs a:hover{background:var(--a-hover)}
  .app-tabs a svg{width:20px;height:20px}
  .app-tabs a[aria-current="page"]{background:var(--a-hover);font-weight:600}
  .app-tabs a[aria-current="page"]::before{top:50%;left:0;width:2px;height:18px;margin:-9px 0 0}
  .app-offline{margin-left:var(--a-rail)}
  .app-view{margin-left:var(--a-rail);padding:0 clamp(2rem,5vw,4rem) 4rem}
  .app-shell[data-has-mini] .app-view{padding-bottom:calc(var(--a-mini-h) + 4rem)}
  .app-page{padding-top:clamp(2.5rem,5vw,4rem)}
  .app-page--ep{max-width:44rem;padding-top:2rem}
  .app-page--about,.app-page--letter,.app-page--settings,.app-page--saved,.app-page--unlisted,.app-page--error{max-width:44rem}
  .app-hero{grid-template-columns:8.5rem minmax(0,1fr);gap:28px}
  .app-mini{left:var(--a-rail);bottom:0;padding-bottom:var(--a-safe-b)}
  .app-mini-in{max-width:52rem;margin:0 auto;padding:0 clamp(1rem,3vw,2rem)}
  .app-toast{left:calc(50% + var(--a-rail) / 2);bottom:24px}
  .app-shell[data-has-mini] .app-toast{bottom:calc(var(--a-mini-h) + 20px)}

  /* the scrim is the dialog element itself; the panel floats on it */
  .app-now{display:grid;place-items:center;padding:2rem;background:var(--a-scrim);transform:none;
    opacity:0;transition:opacity var(--d-base) var(--ease)}
  .app-now.is-open{opacity:1}
  .app-now-panel{width:100%;max-width:32rem;max-height:calc(100vh - 4rem);max-height:calc(100dvh - 4rem);overflow-y:auto;
    overscroll-behavior:contain;padding:0 28px 28px;background:var(--a-bg);border-radius:var(--r-lg);
    box-shadow:var(--shadow-lift);transform:translateY(12px);transition:transform var(--d-base) var(--ease)}
  .app-now.is-open .app-now-panel{transform:none}
  html[data-theme="ink"] .app-now-panel{box-shadow:none;border:1px solid var(--slate-line-str)}
  .app-now-bar{position:sticky;top:0;z-index:1;background:var(--a-bg)}
}
@media (min-width:900px) and (prefers-reduced-motion:reduce){
  .app-now,.app-now-panel,.app-now.is-open .app-now-panel{transition:none;transform:none}
}