/* ============================================================
   yeet — component styles (requires tokens.css)
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-ui); font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain; /* PWA: no rubber-band past app */
}
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
input, textarea, select, button { font-family: inherit; }

/* ---------- app shell ---------- */
.app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.screen { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.scroll { flex: 1; overflow-y: auto; padding-bottom: 120px; } /* clears bottom nav */

.app-header {
  padding: var(--s-4) var(--s-5) var(--s-3);
  display: flex; align-items: baseline; justify-content: space-between;
}
.wordmark { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.03em; }
.wordmark .dot { color: var(--accent); }
.screen-title { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.header-date { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.header-sub { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--ink-3); padding: var(--s-1) var(--s-5) 0; }

/* ---------- banners (offline / error) ---------- */
.banner { padding: 9px var(--s-5); display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--fs-meta); }
.banner-offline { background: var(--surface-2); color: var(--ink-2); }
.banner-offline::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.banner-error { background: var(--tint); border-bottom: 1px solid var(--accent-line); color: var(--accent-text); }
/* "new version ready" (P2-19): accented so it's noticed, dismissed by reloading. */
.banner-update { background: var(--tint); border-bottom: 1px solid var(--accent-line); color: var(--accent-text); }
.banner .banner-action { margin-left: auto; background: none; border: none; cursor: pointer;
  font: inherit; font-weight: 600; color: inherit; padding: var(--s-1) var(--s-2); }

/* ---------- group labels ---------- */
.group { display: flex; flex-direction: column; gap: var(--s-2); padding: 0 var(--s-4); margin-top: var(--s-4); }
.group-label {
  font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-3); padding: 0 var(--s-1);
}
.group-label--accent { color: var(--accent-text); }
.group-toggle { display: flex; align-items: center; gap: var(--s-2); background: none; border: none;
  padding: 6px var(--s-1); cursor: pointer; font-family: var(--font-mono); font-size: var(--fs-meta);
  font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-3); }

/* ---------- task card ---------- */
.swipe-wrap { position: relative; border-radius: var(--r-md); overflow: hidden; }
.reveal { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 var(--s-5);
  opacity: 0; font-size: 14px; font-weight: 800; letter-spacing: 0.06em; color: #F7F4EF; white-space: nowrap; }
.reveal-done { background: var(--ok); justify-content: flex-start; }
.reveal-flag { background: var(--accent); justify-content: flex-end; }

.task-card {
  position: relative; background: var(--surface); border-radius: var(--r-md);
  padding: 14px var(--s-4); border: 1px solid var(--card-border); box-shadow: var(--shadow-card);
  display: flex; align-items: flex-start; gap: 10px;
  touch-action: pan-y; user-select: none;
}
/* High priority: a full hairline accent border plus a leading dot in the meta
   row. (Was a 3px left stripe — a side-stripe, which the design system bans
   outright; full borders and leading marks are the sanctioned alternatives.) */
.task-card--high { border-color: var(--accent-line); }
.task-card--high .meta::before { content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0; }

.check { width: var(--tap); height: var(--tap); margin: -9px 0 -9px -9px; padding: 0;
  background: none; border: none; display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; }
.check::after { content: ''; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--check-line); }
.task-card--done .check::after { content: '\2713'; border: none; background: var(--ok); color: #F7F4EF;
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }

.card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1);
  color: inherit; cursor: pointer; }
.card-body:hover { text-decoration: none; }
.card-title { margin: 0; font-size: var(--fs-title); font-weight: 600; line-height: 1.3; text-wrap: pretty; }
.task-card--done .card-title { color: var(--ink-3); text-decoration: line-through; }
.card-notes { margin: 0; font-size: var(--fs-small); color: var(--ink-3); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta { margin: 0; display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--ink-3); }
.due { font-weight: 600; color: var(--ok); white-space: nowrap; }
.due--today { color: var(--accent-text); }
.due--overdue { color: var(--danger); }
.chip { background: var(--surface-2); border-radius: var(--r-pill); padding: 2px var(--s-2); color: var(--ink-2); white-space: nowrap; }

/* ---------- processing card (optimistic placeholder) ---------- */
.task-card--processing { align-items: center; }
.processing-ring { width: 26px; height: 26px; border-radius: 50%; border: 2px dashed var(--accent);
  flex-shrink: 0; animation: spin 2.6s linear infinite; }  /* a calm rotation, not a blink */
.shimmer { border-radius: var(--r-xs);
  background: linear-gradient(100deg, var(--surface-2) 40%, var(--bg) 50%, var(--surface-2) 60%);
  background-size: 220% 100%; animation: shimmer 1.8s linear infinite; }
.processing-status { color: var(--accent-text); font-weight: 600; }

/* ---------- flagged / needs-your-eyes card ---------- */
.task-card--flagged { background: var(--tint); border-color: var(--accent-line);
  flex-direction: column; align-items: stretch; gap: 10px; }
.flag-mark { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #FFF;
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.flag-transcript { flex: 1; font-size: var(--fs-body); font-style: italic; color: var(--ink-2); line-height: 1.4; }

/* ---------- audio player ---------- */
.audio { display: flex; align-items: center; gap: 10px; background: var(--surface);
  border: 1px solid var(--card-border); box-shadow: var(--shadow-card);
  border-radius: var(--r-pill); padding: var(--s-2) var(--s-4) var(--s-2) var(--s-2); }
.audio--chip { display: inline-flex; padding: 6px var(--s-3) 6px var(--s-2); box-shadow: none; border-color: var(--accent-line); }
.audio-play { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); border: none;
  cursor: pointer; color: #FFF; font-size: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
/* Small play button: a scaled-down version of the full player's filled circle.
   (Was a border-triangle hack on a 0×0 box — unreadable to anyone editing it,
   and indistinguishable from a banned side-stripe.) */
.audio--chip .audio-play { width: 22px; height: 22px; font-size: 9px; }
.audio-track { flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.audio-progress { height: 100%; width: 0; background: var(--accent); border-radius: var(--r-pill); }
.audio-time { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--ink-3); white-space: nowrap; }

/* ---------- buttons ---------- */
.btn { min-height: var(--tap); border-radius: var(--r-sm); border: none; cursor: pointer;
  font-size: 14px; font-weight: 600; padding: 10px var(--s-4); white-space: nowrap; }
.btn-primary { background: var(--ink); color: var(--bg); font-size: var(--fs-title); font-weight: 700;
  min-height: 54px; border-radius: var(--r-md); width: 100%; }
.btn-accent { background: var(--accent); color: #FFF; font-weight: 700; border-radius: var(--r-pill); }
.btn-quiet { background: var(--surface); color: var(--ink-2); border: 1px solid var(--card-border); border-radius: var(--r-pill); }
.btn-ghost { background: none; color: var(--accent-text); font-weight: 700; }
.btn-danger { background: none; border: 1px solid var(--line); color: var(--danger); }
.btn:disabled, .btn-primary:disabled { background: var(--surface-2); color: var(--ink-3); cursor: default; }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-3); }
.input, .field input, .field textarea, .field select {
  font-family: inherit; font-size: var(--fs-body); color: var(--ink);
  background: var(--surface); border: 1px solid var(--card-border); box-shadow: var(--shadow-card);
  border-radius: var(--r-sm); outline: none; padding: var(--s-3) 14px; min-height: var(--tap); width: 100%;
}
.field input:focus, .field textarea:focus, .input:focus { border-color: var(--accent-line); }
.input--title { font-size: var(--fs-h2); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em;
  background: none; border: none; box-shadow: none; padding: var(--s-1) 0; resize: none;
  overflow: hidden; min-height: 90px; }
.input--mono { font-family: var(--font-mono); font-size: var(--fs-small); }
.input--pill { border-radius: var(--r-pill); width: auto; }
.segmented { display: flex; gap: var(--s-2); }
.segmented button { flex: 1; min-height: var(--tap); border-radius: var(--r-sm);
  border: 1px solid var(--card-border); background: var(--surface); color: var(--ink-2);
  font-size: 14px; font-weight: 600; cursor: pointer; }
.segmented button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.segmented button.seg-high[aria-pressed="true"] { background: var(--accent); color: #FFF; }

/* (.switch removed — dead CSS: nothing renders it, Settings uses .segmented.
   It also animated `left`, a layout property.) */

/* ---------- transcript ---------- */
.transcript { font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.6; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--r-md); padding: 14px var(--s-4); }

/* ---------- bottom nav ---------- */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  /* Five destinations + the fab: keep the side padding tight so nothing is
     squeezed off a 390px screen (P2-23). */
  padding: var(--s-2) var(--s-3) 26px; padding-bottom: calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between;
  background: var(--nav-bg); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: var(--s-1);
  width: 52px; min-height: 48px; background: none; border: none; cursor: pointer; padding: var(--s-1) 0;
  position: relative; font-size: 10px; font-weight: 600; color: var(--ink-3); }
/* Active destination: the whole item goes accent (icon stroke + label) so every
   tab — not just Home — gives clear navigational feedback (P2-21). */
.nav-item[aria-current="page"] { color: var(--accent-text); }
.nav-icon { width: 22px; height: 22px; }
.nav-icon--home { border-radius: var(--r-xs); border: 2px solid currentColor; }
.nav-item[aria-current="page"] .nav-icon--home { background: currentColor; }
.nav-icon--review { border-radius: var(--r-xs); border: 2px solid currentColor; }
/* Ideas: a diamond — same geometric family, distinct from the home square and
   the search circle at a glance (P2-23). */
.nav-icon--ideas { width: 17px; height: 17px; margin: 2px 0 3px; border: 2px solid currentColor;
  border-radius: 3px; transform: rotate(45deg); }
.nav-item[aria-current="page"] .nav-icon--ideas { background: currentColor; }
.nav-icon--search { border-radius: 50%; border: 2px solid currentColor; }
.nav-icon--settings { display: flex; flex-direction: column; justify-content: center; gap: 4px; border: none; }
.nav-icon--settings i { display: block; height: 2px; background: currentColor; border-radius: var(--r-pill); }
.nav-badge { position: absolute; top: 0; right: 10px; min-width: 16px; height: 16px; border-radius: var(--r-pill);
  background: var(--accent); color: #FFF; font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; padding: 0 3px; }
.fab { width: 58px; height: 58px; border-radius: 50%; background: var(--ink); color: var(--bg);
  display: flex; align-items: center; justify-content: center; font-size: 30px;
  margin-top: -26px; box-shadow: var(--shadow-float); border: none; cursor: pointer; flex-shrink: 0; }

/* ---------- sheet (quick add) ---------- */
.scrim { position: fixed; inset: 0; z-index: 50; background: var(--scrim); animation: fade 0.18s ease; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; margin: 0 auto; max-width: 560px;
  background: var(--bg); border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 10px var(--s-5) 30px; padding-bottom: calc(30px + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-sheet); animation: sheet-up 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
  display: flex; flex-direction: column; gap: 14px; }
.sheet-handle { width: 40px; height: 4px; border-radius: var(--r-pill); background: var(--check-line); margin: 0 auto; }
[hidden] { display: none !important; }

/* ---------- toast ---------- */
.toast-holder { position: fixed; left: 0; right: 0; bottom: 104px; z-index: 70;
  display: flex; justify-content: center; pointer-events: none; }
.toast { background: var(--ink); color: var(--bg); border-radius: var(--r-pill); padding: var(--s-3) 18px;
  display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-float);
  animation: rise 0.2s ease; pointer-events: auto; font-size: 14px; font-weight: 600; white-space: nowrap; }
.toast .btn-ghost { padding: 2px var(--s-1); min-height: 0; }

/* ---------- empty state ---------- */
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  padding: 96px var(--s-6) 40px; text-align: center; }
.empty-mark { width: 56px; height: 56px; border-radius: 50%; border: 2px dashed var(--check-line);
  display: flex; align-items: center; justify-content: center; animation: pulse 3s ease-in-out infinite; }
.empty-mark::after { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
.empty-title { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.01em; }
.empty-sub { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-3); }

/* ---------- review focus (stacked mobile / side-by-side desktop) ---------- */
.focus-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-5); }
.focus-actions { display: flex; gap: 10px; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.focus-actions .btn { flex: 1; min-height: 52px; border-radius: var(--r-md); }

/* ---------- pull to refresh ---------- */
/* app.js writes this element's height every frame to follow the finger, so
   easing that property both fought the gesture and thrashed layout. The pull
   is now 1:1, with opacity carrying the only easing. */
.pull-ind { height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--ink-3);
  transition: opacity 0.15s ease; }
.refreshing { padding: var(--s-2); text-align: center; font-family: var(--font-mono);
  font-size: var(--fs-meta); color: var(--accent-text); animation: pulse 1.6s ease-in-out infinite; }

/* ---------- login ---------- */
.login { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--s-5); padding: var(--s-6); }
.login .wordmark { font-size: 52px; letter-spacing: -0.04em; }
.login-form { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; }
.login-form input { text-align: center; font-size: var(--fs-title); min-height: 52px; border-radius: var(--r-md); }
.login-hint { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--ink-3); }

/* ---------- settings ---------- */
.settings-card { background: var(--surface); border-radius: var(--r-md); border: 1px solid var(--card-border);
  box-shadow: var(--shadow-card); padding: var(--s-4); display: flex; flex-direction: column; gap: 10px; }
.settings-row { display: flex; align-items: center; min-height: 56px; gap: var(--s-3); }
.settings-row .row-label { flex: 1; font-size: var(--fs-body); font-weight: 600; }
.mono-block { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-2); line-height: 1.7; }

/* ---------- app shell / two-pane (P2-20) ----------
   Base = mobile: the shell collapses to just the list column + bottom nav, so
   every page looks exactly as it did before. The rail and detail pane only
   appear ≥920px (below). */
.layout { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pane-list { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rail, .pane-detail { display: none; }

/* ---------- desktop: calm two-pane (≥920px) ---------- */
@media (min-width: 920px) {
  .layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 64px 400px 1fr; overflow: hidden; }
  .layout--solo { grid-template-columns: 64px 1fr; }   /* settings: rail + one column */
  .rail { display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 16px 0 20px; border-right: 1px solid var(--line); background: var(--bg); }
  .rail-mark { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.03em;
    color: var(--ink); text-decoration: none; margin-bottom: 8px; }
  .rail-mark .dot { color: var(--accent); }
  .rail .nav-item { width: 52px; font-size: 9px; }
  .rail .rail-settings { margin-top: auto; }           /* settings floats to the bottom */
  .rail .fab { width: 44px; height: 44px; font-size: 22px; margin: 6px 0; box-shadow: none; }
  .pane-list { border-right: 1px solid var(--line); overflow: hidden; }
  .layout--solo .pane-list { max-width: 640px; margin: 0 auto; border-right: none; }
  .pane-detail { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .pane-detail .pane-back { display: none; }            /* no "back" — the list is right there */
  .pane-detail .screen { flex: 1; }
  .bottom-nav { display: none; }
  .scroll { padding-bottom: var(--s-6); }
  .focus-grid { grid-template-columns: 1fr 1fr; }
  /* selection: calm tint + hairline ring (never a side-stripe) */
  .pane-list .is-selected { background: var(--tint); box-shadow: inset 0 0 0 1px var(--accent-line); }
  .pane-empty { height: 100%; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 10px; padding: 40px; text-align: center; }
  /* Add-task: a bottom sheet is a phone gesture. On desktop it's a centered modal
     (P2-21) — the mobile sheet looked cut-off glued to the bottom middle. */
  .sheet { inset: auto; top: 50%; left: 50%; right: auto; bottom: auto;
    transform: translate(-50%, -50%); width: 440px; max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px); overflow-y: auto; border-radius: var(--r-lg);
    padding: var(--s-5) var(--s-5) var(--s-6); animation: fade 0.16s ease; }
  .sheet-handle { display: none; }   /* nothing to drag on desktop */
}

/* ---------- motion ---------- */
@keyframes shimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@keyframes pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }  /* breathe, don't blink */
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes slide-in { from { transform: translateX(24%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
.land-highlight { animation: fade-out 2.8s ease forwards; } /* tint overlay when a processing card lands */
@media (prefers-reduced-motion: reduce) {
  /* Cap iteration-count too: without it, an *infinite* animation (the processing
     ring, shimmer) doesn't stop at 0.01ms — it loops 360°/0.01ms and strobes. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- desktop: standalone pages (login, mobile /t/{id} fallback) ----------
   Pages that don't use the two-pane shell get a centered, readable column on wide
   screens instead of stretching edge to edge. */
@media (min-width: 920px) {
  .app > .screen { max-width: 680px; margin: 0 auto; width: 100%;
    border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

/* ---------- interactive states (audit P2) ----------
   The pinned desktop app had no pointer feedback: buttons didn't press, cards
   and nav didn't respond. Gated on (hover: hover) so touch devices — where a
   sticky :hover would linger after a tap — are untouched. Active/press state
   applies everywhere, since it reads as tactile on touch too. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) { filter: brightness(1.08); }
  .btn-quiet:hover, .btn-danger:hover { background: var(--surface-2); }
  .task-card:hover { box-shadow: 0 2px 8px rgba(32, 27, 20, 0.10); }
  .check:hover::after { border-color: var(--accent); }
  .nav-item:hover { color: var(--ink); }
  .nav-item[aria-current="page"]:hover { color: var(--accent-text); }
  .segmented button:hover:not([aria-pressed="true"]) { background: var(--surface-2); }
  .group-toggle:hover { color: var(--ink-2); }
  .audio-play:hover { filter: brightness(1.08); }
}
.btn:active:not(:disabled), .fab:active, .audio-play:active { transform: translateY(1px); }
.btn, .fab, .audio-play, .task-card, .check::after, .nav-item, .segmented button {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease, filter 0.15s ease, transform 0.12s ease;
}

/* ---------- P2-14: accessibility & polish ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.input:focus-visible, .field input:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.task-card, .card-body { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.card-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.group-toggle { min-height: var(--tap); }
/* ≥44px tap target on the audio play buttons, without resizing the glyph */
.audio-play { position: relative; }
.audio-play::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: var(--tap); height: var(--tap);
}
/* landscape notch insets for the fixed nav (portrait: inset is 0, so unchanged) */
.bottom-nav {
  padding-left: max(var(--s-5), env(safe-area-inset-left));
  padding-right: max(var(--s-5), env(safe-area-inset-right));
}
/* white text on orange needs AA: use the deeper orange for text-bearing fills */
.btn-accent, .nav-badge, .flag-mark { background: var(--accent-strong); }

/* Auto-save indicator (P2-18): quiet meta text; only the error state draws the eye. */
.save-status {
  font-size: 13px;
  color: var(--ink-3);
  white-space: nowrap;
  transition: color .15s ease;
}
.save-status:empty { display: none; }