/* EarMark — shared design system
   Calm, audio-first, editorial. Bricolage Grotesque headings, Geist for the
   interface and the wordmark, Geist Mono for labels/numerals, Instrument Serif
   italic as a sparing editorial accent. Two themes: paper (light, default) and
   ink (dark, [data-theme="ink"]).

   Fonts are SELF-HOSTED (see assets/fonts/) so text renders instantly, offline,
   and under CSP — the native Capacitor shell runs from a local origin with no
   guaranteed network, where a CDN @import would FOIT or silently fall back to
   system fonts. Each family ships a `latin` + `latin-ext` woff2 subset.
*/

/* ---------- Self-hosted webfonts (SIL OFL 1.1 — see assets/fonts/LICENSES.txt) ---------- */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/assets/fonts/Geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/assets/fonts/Geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/static/assets/fonts/GeistMono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/static/assets/fonts/GeistMono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("/static/assets/fonts/BricolageGrotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("/static/assets/fonts/BricolageGrotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/assets/fonts/InstrumentSerif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/assets/fonts/InstrumentSerif-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/static/assets/fonts/InstrumentSerif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/static/assets/fonts/InstrumentSerif-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---------- Type families ---------- */
  --font-heading: "Bricolage Grotesque", "Geist", sans-serif; /* screen titles, section/card heads, modal/sheet titles */
  --sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;  /* body, controls, content/episode titles, wordmark */
  --mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; /* eyebrows, labels, meta, numerals */
  --serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif; /* sparing editorial italic accent only */

  /* ---------- Type scale (px) ---------- */
  --text-display: 48px;
  --text-h1: 36px;
  --text-h2: 28px;
  --text-h3: 20px;
  --text-body-lg: 16px;
  --text-body: 14px;
  --text-sm: 13px;
  --text-xs: 12px;
  --text-eyebrow: 10.5px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 0.96;
  --leading-snug: 1.3;
  --leading-body: 1.55;

  --tracking-tight: -0.02em;
  --tracking-eyebrow: 0.14em;

  /* ---------- Colors — Paper (light, default) ---------- */
  --paper: oklch(0.985 0.004 80);
  --paper-2: oklch(0.965 0.006 75);
  --paper-3: oklch(0.94 0.008 70);
  --rule: oklch(0.86 0.008 70);
  --rule-soft: oklch(0.92 0.006 70);
  --ink: oklch(0.18 0.012 60);
  --ink-2: oklch(0.32 0.012 60);
  --ink-3: oklch(0.5 0.012 60);
  --ink-4: oklch(0.65 0.012 60);

  --amber: oklch(0.74 0.15 60);
  --amber-2: oklch(0.68 0.16 55);
  --amber-bg: oklch(0.94 0.04 75);

  --plum: oklch(0.5 0.09 300);
  --plum-2: oklch(0.4 0.09 295);
  --plum-bg: oklch(0.92 0.025 300);

  --ok: oklch(0.62 0.1 150);
  --ok-bg: oklch(0.93 0.04 150);
  --warn: oklch(0.7 0.14 70);
  --warn-bg: oklch(0.94 0.04 75);
  --err: oklch(0.55 0.18 25);
  --err-bg: oklch(0.94 0.04 25);

  /* ---------- Brand gradient — logo / app icon / hero art ONLY, never UI ---------- */
  --brand-blue: oklch(0.62 0.2 268);
  --brand-violet: oklch(0.58 0.22 310);
  --brand-ink: oklch(0.16 0.02 280);
  --brand-gradient: linear-gradient(150deg, var(--brand-blue), var(--brand-violet));

  /* ---------- Semantic aliases ---------- */
  --bg: var(--paper);
  --surface: var(--paper);
  --surface-raised: var(--paper-2);
  --surface-sunken: var(--paper-3);
  --border: var(--rule);
  --border-soft: var(--rule-soft);
  --text: var(--ink);
  --text-muted: var(--ink-3);
  --accent: var(--amber);
  --accent-strong: var(--amber-2);
  --on-accent: oklch(0.18 0.05 60); /* text on amber fills */

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- Radii ---------- */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- Shadows — whisper-soft; the UI leans on hairline borders ---------- */
  --shadow-sm: 0 1px 0 oklch(0.85 0.008 70);
  --shadow: 0 1px 2px oklch(0.85 0.008 70 / 0.4), 0 4px 16px oklch(0.7 0.01 70 / 0.08);
  --shadow-lg: 0 2px 6px oklch(0.7 0.01 70 / 0.12), 0 18px 48px oklch(0.6 0.02 70 / 0.16);

  /* ---------- Tap-target floor (iOS/Android HIG) — enforce on native controls ---------- */
  --tap-min: 44px;
}

[data-theme="ink"] {
  --paper: oklch(0.155 0.012 280);
  --paper-2: oklch(0.195 0.014 280);
  --paper-3: oklch(0.235 0.014 280);
  --rule: oklch(0.3 0.014 280);
  --rule-soft: oklch(0.24 0.012 280);
  --ink: oklch(0.96 0.006 80);
  --ink-2: oklch(0.82 0.008 80);
  --ink-3: oklch(0.62 0.01 80);
  --ink-4: oklch(0.48 0.012 80);

  --amber: oklch(0.78 0.15 65);
  --amber-2: oklch(0.72 0.17 60);
  --amber-bg: oklch(0.28 0.06 60);

  --plum: oklch(0.72 0.1 300);
  --plum-2: oklch(0.62 0.1 295);
  --plum-bg: oklch(0.28 0.06 300);

  --ok: oklch(0.78 0.12 150);
  --ok-bg: oklch(0.28 0.05 150);
  --warn: oklch(0.78 0.14 70);
  --warn-bg: oklch(0.28 0.06 70);
  --err: oklch(0.7 0.16 25);
  --err-bg: oklch(0.3 0.06 25);

  --shadow-sm: 0 1px 0 oklch(0.1 0.012 280);
  --shadow: 0 1px 2px oklch(0 0 0 / 0.5), 0 8px 24px oklch(0 0 0 / 0.4);
  --shadow-lg: 0 2px 8px oklch(0 0 0 / 0.5), 0 24px 60px oklch(0 0 0 / 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Make the hidden attribute unconditional — it must win even over classes
   that set display (e.g. .em-modal-overlay's flex). All show/hide toggling
   uses `el.hidden` / the hidden attribute; CSP (style-src 'self') bans the
   old style="display:none" inline escape hatch. JS must never fight this
   with el.style.display — toggle .hidden instead. */
[hidden] { display: none !important; }
body {
  font-family: var(--sans);
  font-feature-settings: "ss01", "cv11";
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Utilities ---------- */
.em-mono { font-family: var(--mono); font-feature-settings: "ss01"; }
.em-serif { font-family: var(--serif); font-style: italic; font-weight: 400; }
.em-tnum { font-variant-numeric: tabular-nums; }
.em-rule { border: none; border-top: 1px solid var(--rule-soft); margin: 0; }
.em-hairline { background: var(--rule-soft); height: 1px; width: 100%; }

.em-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- Headings — Bricolage Grotesque (functional screen/section titles) ---------- */
.em-h1 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: var(--ink);
  margin: 0;
}
.em-h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}
/* Functional heading utility — use for screen titles, card section heads,
   modal/sheet titles. */
.em-heading {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--ink);
}

/* ---------- Buttons ---------- */
.em-btn {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 9px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
  white-space: nowrap;
  text-decoration: none;
}
.em-btn:hover:not(:disabled) { background: var(--paper-2); }
.em-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.em-btn--primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.em-btn--primary:hover:not(:disabled) { background: var(--ink-2); border-color: var(--ink-2); }
.em-btn--amber {
  background: var(--amber);
  color: var(--on-accent);
  border-color: var(--amber);
  font-weight: 600;
}
.em-btn--amber:hover:not(:disabled) { background: var(--amber-2); border-color: var(--amber-2); }
.em-btn--ghost { border-color: transparent; background: transparent; }
.em-btn--ghost:hover:not(:disabled) { background: var(--paper-2); }
.em-btn--danger {
  border-color: var(--err);
  color: var(--err);
  background: transparent;
}
.em-btn--danger:hover:not(:disabled) { background: var(--err-bg); }
.em-btn--lg { padding: 13px 22px; font-size: 14px; }
.em-btn--sm { padding: 6px 11px; font-size: 12px; }
.em-btn--block { width: 100%; }

/* ---------- Badges ---------- */
.em-badge {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--paper-3);
  color: var(--ink-3);
  border: 1px solid var(--rule-soft);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.em-badge--amber { background: var(--amber-bg); color: var(--amber-2); border-color: transparent; }
.em-badge--ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.em-badge--plum { background: var(--plum-bg); color: var(--plum-2); border-color: transparent; }
.em-badge--warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.em-badge--err { background: var(--err-bg); color: var(--err); border-color: transparent; }

/* ---------- Chips (toggle filters) ----------
   ONE chip. The feed's All/Downloaded pills and the voice picker's filter chips are
   the same control and now share this base: they had drifted into two near-identical
   implementations (index.css) with different padding and — worse — two different state
   conventions, `.is-active` vs `[aria-pressed="true"]`, so a contrast or theme fix had
   to be applied twice and a screen reader was told the state of only one of them.

   The convention is `aria-pressed`, because these ARE toggle buttons: the attribute is
   the state (announced by AT), and the style follows it. A chip styled by a class an
   assistive tech can't see is a chip that looks pressed and doesn't say so. */
.em-chip {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.em-chip:hover { background: var(--paper); color: var(--ink); }
.em-chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ---------- Inputs ---------- */
.em-input,
input.em-input,
textarea.em-input,
select.em-input {
  font-family: var(--sans);
  font-size: 14px;
  padding: 11px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  outline: none;
  width: 100%;
  transition: border-color 0.12s ease;
}
.em-input:focus { border-color: var(--ink-3); }
.em-input::placeholder { color: var(--ink-4); }
textarea.em-input { resize: vertical; min-height: 80px; }
/* Native shells only: bump inputs to 16px so iOS doesn't auto-zoom-on-focus
   (it zooms any focused control with font-size < 16px, which then pans the page
   horizontally — the "login scroll" bug). Web keeps 14px. */
html[data-em-native] .em-input { font-size: 16px; }

.em-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}

/* ---------- Wordmark — Geist bold, tight tracking (the serif was rejected here) ---------- */
.em-wordmark-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.em-wordmark-icon {
  display: block;
  border-radius: 22%;
}
.em-wordmark {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}
/* Size variants — icon = round(1.05 × font size). These replace the
   per-instance inline width/font-size styles (CSP: style-src 'self' bans
   style="" attributes); the wordmark markup is written directly in each
   page's HTML with the matching variant class. */
.em-wordmark-row--16 .em-wordmark { font-size: 16px; }
.em-wordmark-row--16 .em-wordmark-icon { width: 17px; height: 17px; }
.em-wordmark-row--18 .em-wordmark { font-size: 18px; }
.em-wordmark-row--18 .em-wordmark-icon { width: 19px; height: 19px; }
.em-wordmark-row--20 .em-wordmark { font-size: 20px; }
.em-wordmark-row--20 .em-wordmark-icon { width: 21px; height: 21px; }
.em-wordmark-row--22 .em-wordmark { font-size: 22px; }
.em-wordmark-row--22 .em-wordmark-icon { width: 23px; height: 23px; }
/* On the dark auth-hero panes the wordmark reads in warm off-white. */
.em-wordmark-row--light .em-wordmark { color: oklch(0.96 0.006 80); }

/* ---------- Wave (animated) ---------- */
.em-wave {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 18px;
}
.em-wave > i {
  display: block;
  width: 2px;
  background: var(--amber);
  border-radius: 1px;
  animation: emwave 1.2s ease-in-out infinite;
}
.em-wave > i:nth-child(1) { height: 30%; animation-delay: 0s; }
.em-wave > i:nth-child(2) { height: 65%; animation-delay: 0.1s; }
.em-wave > i:nth-child(3) { height: 100%; animation-delay: 0.2s; }
.em-wave > i:nth-child(4) { height: 80%; animation-delay: 0.15s; }
.em-wave > i:nth-child(5) { height: 50%; animation-delay: 0.05s; }
.em-wave > i:nth-child(6) { height: 30%; animation-delay: 0.18s; }
.em-wave--static > i { animation: none; }

@keyframes emwave {
  0%, 100% { transform: scaleY(0.5); }
  50% { transform: scaleY(1); }
}

/* ---------- Static waveform (built by JS) ----------
   EM.buildWaveform() emits bars with data-h geometry;
   EM.hydrateWaveforms() applies it via CSSOM (inline style attributes are
   CSP-blocked, el.style writes are not). */
.em-waveform {
  display: flex;
  align-items: center;
  gap: 2px;
}
.em-waveform > span {
  display: block;
  width: 2px;
  background: var(--ink-4);
  border-radius: 1px;
  opacity: 0.55;
}
.em-waveform > span.is-played {
  background: var(--amber);
  opacity: 1;
}

/* ---------- Icon glyphs (EM.icon / data-em-icon) ---------- */
.em-icon-svg {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}

/* ---------- Spinner ---------- */
.em-spinner {
  display: inline-block;
  vertical-align: middle;
}
.em-spinner-track { stroke: var(--rule); }
.em-spinner-arc {
  stroke: var(--amber);
  stroke-dasharray: 10 30;
  transform-origin: center;
  animation: emspin 1s linear infinite;
}
@keyframes emspin { to { transform: rotate(360deg); } }

/* ---------- Striped placeholder ---------- */
.em-placeholder {
  background: repeating-linear-gradient(135deg, var(--paper-2), var(--paper-2) 6px, var(--paper-3) 6px, var(--paper-3) 12px);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- Scrollbars ---------- */
.em-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.em-scroll::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }
.em-scroll::-webkit-scrollbar-track { background: transparent; }

/* ---------- Cards ---------- */
.em-card {
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 16px 20px;
}

/* ---------- Theme toggle button (small) ---------- */
.em-theme-toggle {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  cursor: pointer;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.em-theme-toggle:hover { border-color: var(--ink-3); color: var(--ink); }

/* ---------- Modal overlay ---------- */
.em-modal-overlay {
  position: fixed;
  inset: 0;
  background: oklch(0.1 0.01 280 / 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}
[data-theme="ink"] .em-modal-overlay { background: oklch(0 0 0 / 0.6); }
.em-modal {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  max-width: 480px;
  width: 100%;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  box-shadow: var(--shadow);
}
.em-modal h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--ink);
}
.em-modal p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 12px;
}
.em-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

/* ---------- Toast ---------- */
.em-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  max-width: 380px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  box-shadow: var(--shadow);
  z-index: 1100;
  animation: emtoast 0.18s ease-out;
}
.em-toast strong { color: var(--ink); display: block; margin-bottom: 4px; font-weight: 600; }
.em-toast-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 18px;
  color: var(--ink-3);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
@keyframes emtoast {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Links ---------- */
.em-link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.em-link:hover { color: var(--amber-2); }