/* Manzar — shared design foundations.
 *
 * SINGLE SOURCE OF TRUTH for design tokens. Loaded first on every page
 * (editor.html, present.html). Adopts the Manzar design system:
 *   - Workspace palette is WARM-GREY and LIGHT (a calm "antechamber").
 *   - One accent: muted indigo. No gradients, images, textures or glow.
 *   - Structural containers are STRAIGHT-EDGED; rounding only on interactive
 *     controls (buttons, inputs, selects, chips). This is load-bearing.
 *   - Type: Spectral (serif) for verse + headings; Hanken Grotesk (sans) for UI.
 *
 * Two worlds: this is the APP/workspace (light). The slide PROJECTION lives in
 * present.css and stays pure #000 (--bg) — never darkened here, never lightened
 * there. The in-app preview MAY use the near-black --slide-* tokens (defined
 * below for later increments); the real presenter is untouched.
 *
 * Tokens below are the Manzar system (from design/handoff/lament-tokens.css).
 * A BRIDGE block near the end aliases this app's legacy custom-property names
 * (--app-bg, --s1..--s7, --fs-*, etc.) onto the Manzar tokens so existing
 * rules in present.css / editor.css keep working unchanged. */

/* Webfonts — Spectral (serif) + Hanken Grotesk (sans), from Google Fonts CDN.
   @import must precede all rules; only comments may come before it. */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Hanken+Grotesk:wght@400;500;600;700&family=Source+Serif+4:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Literata:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

/* ============================================================
   Manzar — Color tokens (WORKSPACE: warm-grey, desaturated, light).
   The slide PREVIEW is the only near-black element (see --slide-*).
   ============================================================ */
:root {
  /* --- Warm-grey neutral ramp (app surfaces & ink) --- */
  --warm-50:  #F6F5F2;  /* raised surface / panels */
  --warm-100: #EFEEE9;  /* card surface */
  --warm-150: #E9E7E2;  /* page canvas */
  --warm-200: #E0DED7;  /* sunken / subtle fill */
  --warm-250: #D6D4CC;  /* hover fill on neutrals */
  --warm-300: #CAC8BF;  /* strong border */
  --warm-400: #ABA99F;  /* disabled stroke */
  --warm-500: #84837B;  /* caption / faint text */
  --warm-600: #67665F;  /* muted / secondary text */
  --warm-700: #4B4B47;  /* strong secondary */
  --warm-800: #34353A;  /* body text */
  --warm-900: #282A2F;  /* deep muted ink — primary text */

  /* --- Borders --- */
  --line-soft:   #E4E2DC;  /* hairline inside panels */
  --line:        #D7D5CD;  /* default structural border */
  --line-strong: #C6C4BB;  /* emphasized / focused border */

  /* --- Accent: muted indigo / slate-blue (the single accent) --- */
  --indigo-50:  #ECEDF1;  /* faint tint wash */
  --indigo-100: #DCDEE7;  /* selected tint surface */
  --indigo-200: #C2C6D4;  /* tint border */
  --indigo-500: #4B5573;  /* accent hover */
  --indigo-600: #3F4862;  /* accent (primary) */
  --indigo-700: #333A50;  /* accent pressed */

  /* --- Dim ember: a single warm semantic, used sparingly
         (e.g. a warning / check note). Never decorative. --- */
  --ember-100: #E8DBD2;
  --ember-600: #8C5C46;
  --ember-700: #744A38;

  /* --- Dark preview — mirrors the real congregation slides.
         Available for the in-app preview panel (later increment). The real
         presenter projection stays pure #000 (present.css --bg). --- */
  --slide-bg:       #0E0F12;  /* near-black, not pure black */
  --slide-bg-raise: #16181C;
  --slide-fg:       #EAE8E3;  /* warm off-white on dark */
  --slide-fg-muted: #93938E;
  --slide-line:     #25272C;

  /* ----- Semantic aliases — reference these in components ----- */

  /* Surfaces */
  --surface-canvas:  var(--warm-150);
  --surface-card:    var(--warm-100);
  --surface-raised:  var(--warm-50);
  --surface-sunken:  var(--warm-200);
  --surface-fill:    var(--warm-200);
  --surface-fill-hover: var(--warm-250);

  /* Text */
  --text-strong:    var(--warm-900);
  --text-body:      var(--warm-800);
  --text-muted:     var(--warm-600);
  --text-faint:     var(--warm-500);
  --text-on-accent: #F3F2EE;
  --text-disabled:  var(--warm-400);

  /* Borders */
  --border-subtle:  var(--line-soft);
  --border-default: var(--line);
  --border-strong:  var(--line-strong);

  /* Accent */
  --accent:         var(--indigo-600);
  --accent-hover:   var(--indigo-500);
  --accent-press:   var(--indigo-700);
  --accent-tint:    var(--indigo-100);
  --accent-tint-weak: var(--indigo-50);
  --accent-tint-border: var(--indigo-200);
  --accent-text:    var(--indigo-600);

  /* Focus */
  --focus-ring:     var(--indigo-500);

  /* Marker (ember) */
  --marker:         var(--ember-600);
  --marker-tint:    var(--ember-100);
}

/* ============================================================
   Manzar — Typography tokens
   Spectral carries verse + headings; Hanken Grotesk handles UI chrome.
   ============================================================ */
:root {
  /* Families */
  --font-serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-sans:  'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Alternate projected-verse faces (deck-level typeface choice; screen-tuned
     serifs that hold up well on a projector). */
  --font-source-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-literata:     'Literata', Georgia, 'Times New Roman', serif;

  /* Roles */
  --font-translation: var(--font-serif);
  --font-heading:     var(--font-serif);
  --font-ui:          var(--font-sans);

  /* Type scale (px) */
  --fs-display:  40px;  /* hero / poem title             */
  --fs-h1:       30px;  /* screen title                  */
  --fs-h2:       24px;  /* section title                 */
  --fs-h3:       19px;  /* sub-section / card title      */
  --fs-body-lg:  18px;  /* translation reading size      */
  --fs-body:     16px;  /* default body / inputs         */
  --fs-body-sm:  14px;  /* dense UI text                 */
  --fs-label:    13px;  /* form labels, eyebrows         */
  --fs-caption:  12px;  /* captions, meta                */

  /* Line heights */
  --lh-display:  1.16;
  --lh-heading:  1.28;
  --lh-reading:  1.7;
  --lh-body:     1.55;
  --lh-tight:    1.35;

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* Letter spacing */
  --ls-eyebrow: 0.14em;
  --ls-label:   0.02em;
  --ls-tight:  -0.012em;
  --ls-normal:  0;
}

/* ============================================================
   Manzar — Spacing, radii, borders, shadows & motion
   Straight-edged containers; rounding ONLY on interactive elements.
   ============================================================ */
:root {
  /* Spacing scale (4px base, generous) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* Radii — rounding ONLY on interactive elements */
  --radius-container: 0px;   /* cards, panels, surfaces: square */
  --radius-control:   6px;   /* buttons, inputs, selects        */
  --radius-control-lg: 8px;  /* large controls / textareas      */
  --radius-pill:      999px; /* chips, badges, toggles          */

  /* Border widths */
  --bw-hair: 1px;
  --bw-emph: 1.5px;

  /* Shadows — restrained. Structure comes from borders, not lift. */
  --shadow-none:   none;
  --shadow-raised: 0 1px 2px rgba(28,28,32,0.04), 0 2px 6px rgba(28,28,32,0.04);
  --shadow-pop:    0 6px 16px rgba(24,24,28,0.08), 0 1px 3px rgba(24,24,28,0.06);
  --shadow-dialog: 0 16px 48px rgba(20,20,26,0.16);
  --shadow-slide:  0 2px 24px rgba(0,0,0,0.38);  /* dark preview lift */

  /* Focus ring offset / width */
  --focus-width: 2px;
  --focus-offset: 2px;

  /* Motion — slow, calm, never bouncy */
  --ease-calm: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
}

/* ============================================================
   BRIDGE — alias this app's legacy custom-property names onto the
   Manzar tokens above, so existing rules in present.css / editor.css
   keep working without being rewritten. (See the report for the full
   mapping.) Legacy names that share a name with a Manzar token
   (--accent, --accent-hover, --text-muted, --text-faint,
   --border-strong, --font-serif, --radius-control) now resolve to the
   Manzar value automatically — their old definitions were removed.
   ============================================================ */
:root {
  /* Surfaces / background (palette inverts from the old dark theme to
     the warm-grey light workspace). */
  --app-bg:    var(--surface-canvas);  /* was #0a0a0c */
  --surface:   var(--surface-card);    /* was #131316 — structural containers */
  --surface-2: var(--surface-raised);  /* was #1b1b20 — inputs, controls */
  --surface-3: var(--surface-fill-hover); /* was #232329 — hover */

  /* Borders */
  --border:    var(--border-default);  /* was rgba(255,255,255,0.1) */

  /* Text (near-white -> deep ink) */
  --text:      var(--text-strong);     /* was #e9e9ec */

  /* Accent button label (CONFLICT FIX: Manzar's --accent-text means
     indigo-colored text, but this app uses it for the label that sits ON
     the accent button — map to --text-on-accent so it stays legible). */
  --accent-text: var(--text-on-accent); /* was #ffffff */

  /* Status semantics — Manzar is monochrome + one accent + ember marker.
     Reviewed/ok = the accent; warn = the ember marker; info = quiet muted. */
  --ok:   var(--accent);       /* was #6ee7a8 green  */
  --warn: var(--marker);       /* was #d9a066 amber  */
  --info: var(--text-muted);   /* was #7aa6d6 blue   */

  /* Type families */
  --font: var(--font-ui);      /* was system-ui sans stack */

  /* Type scale (legacy rem scale -> Manzar px scale, nearest size) */
  --fs-xs:   var(--fs-label);    /* 0.78rem -> 13px */
  --fs-sm:   var(--fs-body-sm);  /* 0.88rem -> 14px */
  --fs-base: var(--fs-body);     /* 1rem    -> 16px */
  --fs-lg:   var(--fs-body-lg);  /* 1.18rem -> 18px */
  --fs-xl:   var(--fs-h2);       /* 1.5rem  -> 24px */
  --fs-2xl:  var(--fs-h1);       /* 2.1rem  -> 30px */
  --lh:      var(--lh-body);     /* 1.55 (unchanged value) */

  /* Spacing scale (1:1) */
  --s1: var(--space-1);
  --s2: var(--space-2);
  --s3: var(--space-3);
  --s4: var(--space-4);
  --s5: var(--space-5);
  --s6: var(--space-6);
  --s7: var(--space-7);

  /* Two-tier page width system. --maxw is the wide app shell (nav, footer,
     home, library, editor, lists, review); --measure is the narrow column for
     long-form reading & forms (Qur'an surah, poetry, submit, settings). */
  --maxw: 1120px;
  --measure: 680px;
}

/* ============================================================
   Manzar — Base element defaults & a few shared utilities.
   Sets the calm reading defaults. Page-specific body overrides live in
   editor.css (light) and present.css (pure-black projection).
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

/* Always reserve the scrollbar gutter so centered content doesn't shift
   horizontally between scrolling and non-scrolling pages. The fullscreen
   projection (present.css) opts back out so the 16:9 frame isn't offset. */
html { -webkit-text-size-adjust: 100%; background: var(--surface-canvas); scrollbar-gutter: stable; }
/* (present.css overrides html/body to pure #000 for the projection; reading.css
   overrides to the near-black for the reciting view.) */

body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--text-body);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings default to the literary serif */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--text-strong);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-tight);
  margin: 0;
}

p { margin: 0; }

/* Selection — a faint accent wash */
::selection {
  background: var(--accent-tint);
  color: var(--text-strong);
}

/* Eyebrow / uppercase micro-label */
.lm-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* The literary reading treatment for translated verse */
.lm-verse {
  font-family: var(--font-translation);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-reading);
  color: var(--text-strong);
}

/* Calm focus ring for any interactive element */
.lm-focusable:focus-visible,
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Back-to-home link, placed above a page heading on pages reached from home. */
.backlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease-calm);
}
.backlink svg { width: 15px; height: 15px; }
.backlink:hover { color: var(--accent); }

/* ============================================================
   Interactive primitives — match the Manzar component rules
   (design/components + LAMENT-DESIGN-SYSTEM.md Part 3). Rounded
   (controls only); calm hover, press deepens + nudges 0.5px down;
   no glow, no scale-up.
   ============================================================ */

/* --- Buttons (default styling = the "secondary" variant) --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 20px;
  font-family: var(--font-ui);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
  color: var(--text-strong);
  background: var(--surface-raised);
  border: var(--bw-hair) solid var(--border-strong);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background var(--dur) var(--ease-calm),
              border-color var(--dur) var(--ease-calm),
              color var(--dur) var(--ease-calm);
}
.btn:hover { background: var(--surface-fill-hover); }
.btn:active { transform: translateY(0.5px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--surface-raised); }
/* leading/trailing icons inherit the label color via currentColor */
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Primary — the single muted-indigo accent. One per view. */
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--primary:active { background: var(--accent-press); border-color: var(--accent-press); }

/* Ghost — chromeless until a quiet hover fill. */
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}
.btn--ghost:hover { background: var(--surface-fill); }

/* Small (sm) size. */
.btn--small {
  height: 32px;
  padding: 0 14px;
  font-size: var(--fs-body-sm);
}
.btn--small svg { width: 14px; height: 14px; }

/* --- Icon button (square, icon-only; Manzar IconButton) --- */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--text-strong);
  background: var(--surface-raised);
  border: var(--bw-hair) solid var(--border-strong);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background var(--dur) var(--ease-calm),
              border-color var(--dur) var(--ease-calm),
              color var(--dur) var(--ease-calm);
}
.icon-btn:hover { background: var(--surface-fill-hover); }
.icon-btn:active { transform: translateY(0.5px); }
.icon-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn--ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.icon-btn--ghost:hover { background: var(--surface-fill); color: var(--text-strong); }
.icon-btn--small { width: 32px; height: 32px; }
.icon-btn--small svg { width: 16px; height: 16px; }

/* --- Text inputs & selects --- */
.input,
input[type="text"],
input[type="url"],
select {
  height: 40px;
  padding: 0 12px;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  color: var(--text-strong);
  background: var(--surface-raised);
  border: var(--bw-hair) solid var(--border-strong);
  border-radius: var(--radius-control);
  transition: border-color var(--dur) var(--ease-calm),
              box-shadow var(--dur) var(--ease-calm);
}
select { cursor: pointer; }

/* --- Textareas — serif by default, so verse reads at its true weight --- */
textarea {
  padding: 12px 14px;
  font-family: var(--font-translation);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-reading);
  color: var(--text-strong);
  background: var(--surface-raised);
  border: var(--bw-hair) solid var(--border-strong);
  border-radius: var(--radius-control-lg);
  resize: vertical;
  transition: border-color var(--dur) var(--ease-calm),
              box-shadow var(--dur) var(--ease-calm);
}

/* Calm focus ring: 2px accent border + a faint accent-tint halo. */
.input:focus,
input[type="text"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px var(--accent-tint-weak);
}

/* ============================================================
   Topic combobox — a searchable, creatable picker (static/js/topic-picker.js).
   Wraps a plain text input: focus drops the full suggestion list; typing
   filters; a "Use '…' as a new topic" row commits free text. Shared by the
   save forms and the library Topic filter.
   ============================================================ */
.topic-combo { position: relative; width: 100%; }
.topic-combo input { width: 100%; padding-right: 36px; } /* room for the chevron */
.topic-combo__chev {
  position: absolute;
  top: 0;
  right: 0;
  height: 40px;
  width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  cursor: pointer;
  transition: transform var(--dur) var(--ease-calm), color var(--dur) var(--ease-calm);
}
.topic-combo__chev:hover { color: var(--text-muted); }
.topic-combo__chev svg { width: 16px; height: 16px; }
.topic-combo.is-open .topic-combo__chev { transform: rotate(180deg); }

.topic-combo__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  max-height: 264px;
  overflow-y: auto;
  background: var(--surface-raised);
  border: var(--bw-hair) solid var(--border-strong);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-pop);
}
.topic-combo__opt {
  padding: 8px 10px;
  font-size: var(--fs-body-sm);
  color: var(--text-body);
  border-radius: var(--radius-control);
  cursor: pointer;
}
.topic-combo__opt.is-active { background: var(--accent-tint-weak); color: var(--text-strong); }
.topic-combo__opt--create {
  margin-top: var(--space-1);
  border-top: var(--bw-hair) solid var(--border-subtle);
  padding-top: 10px;
  color: var(--text-muted);
}
.topic-combo__opt--create strong { color: var(--text-strong); font-weight: var(--fw-medium); }
.topic-combo__empty {
  padding: 8px 10px;
  font-size: var(--fs-body-sm);
  color: var(--text-faint);
}

/* ============================================================
   Type pills — single-select over a small closed list (noha/marsiya/…).
   Hidden input carries the value; .is-active marks the choice.
   ============================================================ */
.type-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.type-pill {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  font-family: var(--font-ui);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  color: var(--text-body);
  background: var(--surface-raised);
  border: var(--bw-hair) solid var(--border-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur) var(--ease-calm),
              border-color var(--dur) var(--ease-calm),
              color var(--dur) var(--ease-calm);
}
.type-pill:hover { background: var(--surface-fill-hover); }
.type-pill.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}

/* ============================================================
   Shared site header (templates/_header.html) — one element on every app
   page so the wordmark and nav never shift or restyle page to page. Brand
   left; nav right (queue pill + plain text links + one filled primary).
   Collapses to a toggle menu under 720px. JS: static/js/site-header.js.
   ============================================================ */
.site-header { border-bottom: var(--bw-hair) solid var(--border-default); background: var(--surface-canvas); }
.site-header__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.site-header__brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; }
.site-header__brand svg { display: block; flex-shrink: 0; }
.site-header__name { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--text-strong); letter-spacing: 0.02em; }

.site-header__nav { display: flex; align-items: center; gap: var(--space-5); }
.site-header__link {
  font-family: var(--font-ui);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease-calm);
}
.site-header__link:hover { color: var(--text-strong); }
.site-header__link.is-current { color: var(--text-strong); font-weight: var(--fw-medium); }

.site-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  color: var(--text-strong);
  background: transparent;
  border: var(--bw-hair) solid var(--border-default);
  border-radius: var(--radius-control);
  cursor: pointer;
}
.site-header__toggle svg { width: 20px; height: 20px; }

/* Queue (cart) pill — running count, links to the Lists hub. Shown when >0. */
.queue-pill[hidden] { display: none; } /* inline-flex below would defeat [hidden] */
.queue-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--accent-tint-weak);
  border: var(--bw-hair) solid var(--accent-tint-border);
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: nowrap;
}
.queue-pill:hover { border-color: var(--accent); }

/* Collapse the nav under 720px (spec: nav collapses under 720px). */
@media (max-width: 719px) {
  .site-header__toggle { display: inline-flex; }
  .site-header__nav {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-2));
    right: var(--space-6);
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    min-width: 210px;
    padding: var(--space-3);
    background: var(--surface-raised);
    border: var(--bw-hair) solid var(--border-default);
    box-shadow: var(--shadow-raised);
  }
  .site-header__nav.is-open { display: flex; }
  .site-header__link { padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); }
  .site-header__link:hover { background: var(--surface-fill); }
  .site-header__nav .queue-pill { align-self: flex-start; }
}

/* ============================================================
   Shared site footer (templates/_footer.html) — on every chrome page,
   the same set that carries the header. Brand + links row, then a quiet
   meta line: the name's meaning (ember glyph) and a credit. Mirrors the
   header's restraint; no new colours or fonts.
   ============================================================ */
.site-footer { margin-top: var(--space-10); border-top: var(--bw-hair) solid var(--border-default); background: var(--surface-canvas); }
.site-footer__inner { max-width: var(--maxw); margin: 0 auto; padding: var(--space-6); }
.site-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.site-footer__brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; }
.site-footer__brand svg { display: block; flex-shrink: 0; }
.site-footer__name { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--text-strong); letter-spacing: 0.02em; }
.site-footer__nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-5); }
.site-footer__link {
  font-family: var(--font-ui);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease-calm);
}
.site-footer__link:hover { color: var(--text-strong); }
.site-footer__meta {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--bw-hair) solid var(--border-subtle);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  color: var(--text-faint);
}
.site-footer__gloss [lang="ar"] { color: var(--marker); }
@media (max-width: 599px) {
  .site-footer__top { flex-direction: column; align-items: flex-start; }
}

/* --- Undo toast (bottom-centre dark pill; window.Toast in toast.js). Used for
   the "Deleted … · Undo" message after a soft-delete. --- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(12px);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: min(92vw, 460px);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
  background: var(--warm-900);
  color: var(--warm-50);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-dialog);
  font-family: var(--font-ui);
  font-size: var(--fs-body-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease-calm), transform 0.2s var(--ease-calm);
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast__msg { line-height: var(--lh-tight); }
.toast__action {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: var(--indigo-100);
  font: inherit;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--radius-control);
}
.toast__action:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }