/* Fathom admin — polished, consistent, mobile-first.
   Matches the PWA's brand tokens. Standalone from src/styles.css. */

:root {
  /* Brand */
  --bg:        #FBF7F0;
  --paper:     #FFFFFF;
  --ink:       #1A202C;
  --soft:      #4A5568;
  --softer:    #718096;
  --pine:      #1F4E3D;
  --pine-soft: #2D6E54;
  --clay:      #7C2D12;
  --clay-soft: #A14021;
  --rule:      #E8E0D2;
  --rule-strong: #C9BFA9;

  /* Semantics */
  --pine-bg:    color-mix(in oklab, var(--pine), var(--bg) 86%);
  --pine-bg-2:  color-mix(in oklab, var(--pine), var(--bg) 92%);
  --pine-line:  color-mix(in oklab, var(--pine), transparent 70%);
  --clay-bg:    color-mix(in oklab, var(--clay), var(--bg) 86%);
  --clay-line:  color-mix(in oklab, var(--clay), transparent 70%);

  /* Spacing (4px grid) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;

  /* Radii */
  --r-sm:   8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-pill: 999px;

  /* Type */
  --f-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-sans:  "Public Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Motion */
  --t-fast: 120ms;
  --ease:   cubic-bezier(.2, .7, .2, 1);

  /* Elevation */
  --shadow-1: 0 1px 0 rgba(26,32,44,.04), 0 0 0 1px rgba(26,32,44,.06);
  --shadow-2: 0 8px 24px -10px rgba(26,32,44,.16), 0 1px 0 rgba(26,32,44,.04);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 15px/1.6 var(--f-sans);
  -webkit-text-size-adjust: 100%;
  min-height: 100dvh;
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* HTML `hidden` must always win over component display rules
   (e.g. `.topbar { display:flex }` would otherwise leak through). */
[hidden] { display: none !important; }

/* ── Topbar ─────────────────────────────────────────────── */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-3) var(--s-6);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: var(--s-3); }
.brand strong { font-family: var(--f-serif); font-size: 1.15rem; font-weight: 600; letter-spacing: -.005em; }
.brand .meta {
  font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--softer); font-weight: 600;
}
.dev-banner {
  background: var(--clay); color: var(--bg);
  padding: 3px var(--s-3); border-radius: var(--r-pill);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
}
.user { color: var(--soft); font-size: 0.9rem; display: flex; gap: var(--s-3); align-items: center; }
.user button {
  background: transparent; border: 0; color: var(--clay); cursor: pointer;
  font: inherit; text-decoration: underline; text-underline-offset: 2px;
}
.user button:hover { color: var(--clay-soft); }

/* ── Layout ─────────────────────────────────────────────── */
main { max-width: 1100px; margin: 0 auto; padding: var(--s-7) var(--s-6) var(--s-8); }

h1, h2, h3, h4 { font-family: var(--f-serif); font-weight: 600; margin: 0 0 var(--s-3); letter-spacing: -.01em; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.35rem; margin-top: 0; }
h3 { font-size: 1.1rem; }
h4 { font-size: 0.98rem; font-family: var(--f-sans); }
p  { margin: 0 0 var(--s-3); }
.meta { color: var(--soft); font-size: 0.9rem; }
code { background: var(--rule); padding: 1px 6px; border-radius: 4px; font-size: 0.86em; font-family: ui-monospace, "SF Mono", Menlo, monospace; }

/* ── Login ─────────────────────────────────────────────── */
body.signed-out main {
  max-width: none;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--s-6);
  background:
    radial-gradient(1200px 600px at 12% -10%, color-mix(in oklab, var(--pine), transparent 92%), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, color-mix(in oklab, var(--clay), transparent 94%), transparent 60%),
    var(--bg);
}
.login-card {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-7);
  box-shadow: var(--shadow-2);
}
.login-brand {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.login-brand img { display: block; border-radius: var(--r-sm); }
.login-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.login-brand-text strong {
  font-family: var(--f-serif); font-weight: 600;
  font-size: 1.15rem; letter-spacing: -.005em;
}
.login-eyebrow {
  font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--softer); font-weight: 600;
  margin-top: 2px;
}
.login-title {
  font-size: 1.6rem; margin: 0 0 6px;
}
.login-sub {
  color: var(--soft); margin: 0 0 var(--s-5); font-size: .95rem;
}

.login-form {
  display: flex; flex-direction: column; gap: var(--s-4);
  margin: 0;
}
.login-form-compact { gap: var(--s-3); margin-top: var(--s-3); }
.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-field label {
  font-size: .8rem; color: var(--soft); font-weight: 600;
  letter-spacing: .02em;
}
.login-card input[type="text"],
.login-card input[type="email"],
.login-card input[type="password"] {
  width: 100%;
  height: 46px;
  padding: 0 var(--s-4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  font: inherit;
  background: var(--bg);
  color: var(--ink);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.login-card input::placeholder { color: var(--softer); }
.login-card input:hover {
  border-color: color-mix(in oklab, var(--rule-strong), var(--ink) 18%);
}
.login-card input:focus {
  outline: none;
  border-color: var(--pine);
  background: var(--paper);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--pine), transparent 84%);
}
.login-card input:autofill,
.login-card input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  box-shadow: 0 0 0 1000px var(--bg) inset;
}

.login-password-wrap { position: relative; }
.login-password-wrap input { padding-right: 44px; }
.login-eye {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: var(--r-sm);
  color: var(--softer); cursor: pointer;
}
.login-eye:hover { color: var(--ink); background: color-mix(in oklab, var(--ink), transparent 94%); }
.login-eye:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
.login-eye[aria-pressed="true"] { color: var(--pine); }

.btn-block { width: 100%; height: 46px; }

.login-msg {
  margin: 0;
  min-height: 1.2em;
  font-size: .88rem;
  color: var(--soft);
}
.login-msg[data-tone="error"]   { color: var(--clay); }
.login-msg[data-tone="success"] { color: var(--pine); }

.login-divider {
  display: flex; align-items: center; gap: var(--s-3);
  margin: var(--s-5) 0 var(--s-4);
  color: var(--softer); font-size: .76rem;
  letter-spacing: .14em; text-transform: uppercase;
}
.login-divider::before,
.login-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}

.login-alt summary {
  cursor: pointer; color: var(--soft);
  font-size: .9rem; padding: 8px 0;
  list-style: none;
}
.login-alt summary::-webkit-details-marker { display: none; }
.login-alt summary::before {
  content: "+"; display: inline-block; width: 1.1em;
  color: var(--softer); font-weight: 600;
}
.login-alt[open] summary::before { content: "–"; }
.login-alt[open] summary { color: var(--ink); }

.login-dev {
  margin-top: var(--s-5);
  padding: var(--s-4);
  border: 1px dashed var(--clay-line);
  border-radius: var(--r-md);
  background: var(--clay-bg);
}
.login-dev strong {
  display: block;
  font-size: .72rem; letter-spacing: .14em;
  color: var(--clay); font-weight: 700;
  text-transform: uppercase;
}
.login-dev p {
  margin: 4px 0 var(--s-3);
  font-size: .85rem; color: var(--soft);
}

.login-foot {
  margin: var(--s-5) 0 0;
  font-size: .8rem; color: var(--softer); text-align: center;
}

@media (max-width: 480px) {
  .login-card { padding: var(--s-5); border-radius: var(--r-md); }
  .login-title { font-size: 1.35rem; }
}

/* ── Buttons ────────────────────────────────────────────── */
.btn, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: 42px; padding: 0 var(--s-5);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer; font: 600 0.92rem var(--f-sans);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn { background: var(--pine); color: var(--bg); }
.btn:hover { background: var(--pine-soft); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-ghost:hover { background: var(--pine-bg-2); border-color: var(--pine-line); color: var(--pine); }
.btn:focus-visible, .btn-ghost:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
.btn[disabled], .btn-ghost[disabled] { opacity: .5; cursor: not-allowed; }
.btn-sm { height: 32px; padding: 0 var(--s-3); font-size: 0.82rem; }

/* ── Tabs ───────────────────────────────────────────────── */
.tabs {
  display: flex; gap: var(--s-1); margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
}
.tabs button {
  background: transparent; border: 0; padding: var(--s-3) var(--s-4);
  cursor: pointer; color: var(--soft);
  font: 600 0.92rem var(--f-sans);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--pine); border-bottom-color: var(--pine); }
.tabs button:focus-visible { outline: 3px solid var(--clay); outline-offset: -2px; border-radius: 4px; }

/* ── Panels (cards) ─────────────────────────────────────── */
.panel {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-6);
  box-shadow: var(--shadow-1);
}
.panel + .panel { margin-top: var(--s-5); }
.panel > h2 + .meta { margin-top: -8px; margin-bottom: var(--s-5); }

/* ── Settings (sidebar layout) ─────────────────────────── */
.panel-flush { padding: 0; overflow: hidden; }

.settings-shell {
  display: grid; grid-template-columns: 1fr;
  min-height: 480px;
}
@media (min-width: 760px) { .settings-shell { grid-template-columns: 240px 1fr; } }

/* Sidebar nav */
.settings-nav {
  display: flex; flex-direction: row; overflow-x: auto;
  padding: var(--s-3); gap: var(--s-1);
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
@media (min-width: 760px) {
  .settings-nav {
    flex-direction: column; overflow-x: visible;
    border-bottom: 0; border-right: 1px solid var(--rule);
    padding: var(--s-4) var(--s-3);
  }
}
.settings-nav-btn {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: transparent; border: 0; border-radius: var(--r-sm);
  cursor: pointer; text-align: left;
  font: inherit; color: var(--soft);
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.settings-nav-btn:hover { background: var(--paper); color: var(--ink); }
.settings-nav-btn.active {
  background: var(--paper); color: var(--ink);
  box-shadow: inset 3px 0 0 var(--pine);
}
.settings-nav-btn:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
.nav-icon {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  font-family: var(--f-serif); font-weight: 600;
  font-size: 1rem; color: var(--pine);
  flex-shrink: 0;
}
.settings-nav-btn.active .nav-icon { border-color: var(--pine); background: var(--pine-bg); }
.nav-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-label { font-weight: 600; font-size: 0.92rem; }
.nav-status {
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.nav-status.status-configured { color: var(--pine); }
.nav-status.status-configured::before { content: "● "; }
.nav-status.status-partial    { color: var(--clay); }
.nav-status.status-partial::before { content: "◐ "; }
.nav-status.status-empty      { color: var(--softer); }
.nav-status.status-empty::before { content: "○ "; }

/* Main content */
.settings-body { padding: var(--s-6) var(--s-7); min-width: 0; }
.settings-head { padding-bottom: var(--s-4); border-bottom: 1px solid var(--rule); margin-bottom: var(--s-5); }
.settings-head h2 { margin-bottom: var(--s-2); }
.settings-head .meta { margin: 0; font-size: 0.95rem; line-height: 1.55; }

.settings-active-group { display: flex; flex-direction: column; gap: var(--s-5); }

.field {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding-bottom: var(--s-5); border-bottom: 1px solid var(--rule);
}
.field:last-child { border-bottom: 0; padding-bottom: 0; }
.field-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-3); flex-wrap: wrap;
}
.field-head label {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 600; font-size: 0.92rem; color: var(--ink); cursor: pointer;
}
.field-key {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.86rem; color: var(--ink);
}
.field-required {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--clay);
  background: var(--clay-bg); border: 1px solid var(--clay-line);
  padding: 1px 6px; border-radius: var(--r-pill);
}
.field-source {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--softer);
}
.field-source.source-ok    { color: var(--pine); }
.field-source.source-ok::before { content: "✓ "; }
.field-source.source-env   { color: var(--clay); }
.field-source.source-env::before { content: "↳ "; }
.field-source.source-muted { color: var(--softer); }
.field-source.source-muted::before { content: "○ "; }

.field-input { display: flex; }
.field-input input {
  width: 100%; height: 40px; padding: 0 var(--s-3);
  border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  font: inherit; background: var(--paper);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.88rem;
}
.field-input input:focus-visible {
  outline: 3px solid var(--clay); outline-offset: 2px;
  border-color: var(--pine);
}
.field-input input::placeholder { color: var(--softer); font-family: var(--f-sans); }

.field-desc {
  margin: 0; font-size: 0.84rem; color: var(--softer); line-height: 1.5;
}

/* Sticky save bar */
.settings-savebar {
  position: sticky; bottom: 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  background: var(--paper);
  border-top: 1px solid var(--rule);
  flex-wrap: wrap;
}
.settings-savebar #settings-msg { margin: 0; font-size: 0.88rem; }
.settings-savebar-actions { display: flex; gap: var(--s-2); }

/* ── Audio panel (rebuilt) ──────────────────────────────── */
/* Generator card */
.audio-generator {
  background: var(--pine-bg-2);
  border: 1px solid var(--pine-line);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-5);
}
.audio-generator > summary {
  cursor: pointer; padding: var(--s-1) 0;
  font-size: 0.95rem; font-weight: 500;
  list-style: none; color: var(--pine);
  display: flex; align-items: center; gap: var(--s-2);
}
.audio-generator > summary::-webkit-details-marker { display: none; }
.audio-generator > summary::before {
  content: "▸"; transition: transform var(--t-fast) var(--ease);
  display: inline-block; width: 1em; text-align: center;
}
.audio-generator[open] > summary::before { transform: rotate(90deg); }

.audio-actions {
  display: grid; gap: var(--s-4);
  grid-template-columns: 1fr;
  margin-top: var(--s-4);
}
@media (min-width: 720px) {
  /* Top row: Lesson | Tone | Buttons (always single line);
     Bottom row: Voices full-width below.
     Buttons span full width on smaller screens. */
  .audio-actions {
    grid-template-columns: minmax(0, 1fr) 160px auto;
    grid-template-areas:
      "lesson tone buttons"
      "voices voices voices";
    align-items: end;
  }
  .audio-actions .audio-field-lesson  { grid-area: lesson; }
  .audio-actions .audio-field-tone    { grid-area: tone; }
  .audio-actions .audio-field-voices  { grid-area: voices; }
  .audio-actions .audio-buttons       { grid-area: buttons; }
}
.audio-field {
  display: flex; flex-direction: column; gap: var(--s-1);
  border: 0; padding: 0; margin: 0; min-width: 0;
}
.audio-field > span, .audio-field > legend {
  font-size: 0.78rem; color: var(--soft); font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0;
}
.audio-field select {
  height: 38px; padding: 0 var(--s-3); font: inherit;
  border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink);
  width: 100%;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%231F4E3D' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 28px;
}
.audio-field select:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; border-color: var(--pine); }

.voice-pills {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 6px 0 0;
}
.voice-pills label {
  display: inline-flex; gap: 6px; align-items: center;
  background: var(--paper); border: 1px solid var(--rule-strong);
  padding: 4px 10px 4px 8px; border-radius: var(--r-pill);
  cursor: pointer; font-size: 0.78rem;
  line-height: 1.3;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.voice-pills label:hover { border-color: var(--pine-line); }
.voice-pills label:has(input:checked) {
  background: var(--pine-bg);
  border-color: var(--pine);
  color: var(--pine);
  font-weight: 500;
}
.voice-pills input { accent-color: var(--pine); margin: 0; flex-shrink: 0; }

.audio-buttons { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: end; }

#audio-msg {
  margin-top: var(--s-3);
  min-height: 1.2em;
  font-size: 0.88rem;
}

.audio-script-detail { margin-top: var(--s-4); }
.audio-script-detail > summary {
  cursor: pointer; color: var(--pine); font-weight: 500;
  font-size: 0.88rem; padding: 4px 0;
}
.audio-script-detail pre {
  background: var(--paper);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-sm);
  border: 1px solid var(--rule);
  max-height: 280px; overflow: auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
  margin: var(--s-2) 0 0;
}

/* Summary bar */
.audio-summary {
  display: flex; gap: var(--s-5); flex-wrap: wrap; align-items: center;
  margin: var(--s-2) 0 var(--s-4);
  padding: var(--s-3) var(--s-5);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  font-size: 0.9rem;
}
.audio-summary > span { display: inline-flex; align-items: center; gap: 6px; }
.audio-summary strong { color: var(--ink); font-weight: 700; font-size: 1.05rem; }
.audio-summary .dot { color: var(--soft); }
.audio-summary .dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; margin-right: 6px;
  background: currentColor; opacity: 0.85;
}
.audio-summary .pending::before  { background: var(--rule-strong); }
.audio-summary .review::before   { background: var(--clay); }
.audio-summary .approved::before { background: var(--pine); }

/* Filters */
.audio-filters {
  display: flex; gap: var(--s-2); flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--s-5);
}
.audio-filters .chip {
  background: var(--paper); border: 1px solid var(--rule-strong);
  height: 36px; padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  cursor: pointer; font: 500 0.86rem var(--f-sans);
  color: var(--soft);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.audio-filters .chip:hover { border-color: var(--pine-line); color: var(--ink); }
.audio-filters .chip[aria-pressed="true"] {
  background: var(--pine-bg);
  border-color: var(--pine);
  color: var(--pine);
  font-weight: 600;
}
.audio-filters .chip:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
.audio-filters #audio-search {
  flex: 1; min-width: 180px; max-width: 320px;
  height: 36px; padding: 0 var(--s-4);
  border-radius: var(--r-pill); border: 1px solid var(--rule-strong);
  background: var(--paper);
  font: inherit; color: var(--ink);
}
.audio-filters #audio-search:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; border-color: var(--pine); }
.audio-filters #audio-search::placeholder { color: var(--softer); }

/* Lessons list grouped by volume */
.audio-list { display: flex; flex-direction: column; gap: var(--s-6); }
.audio-vol  { display: flex; flex-direction: column; gap: var(--s-2); }
.audio-vol-title {
  margin: 0 0 var(--s-2);
  font: 700 0.74rem var(--f-sans);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pine);
}

.audio-lesson {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  transition: border-color var(--t-fast);
}
.audio-lesson:hover { border-color: var(--rule-strong); }
.audio-lesson.status-approved { border-left: 3px solid var(--pine); padding-left: calc(var(--s-5) - 2px); }
.audio-lesson.status-in-review { border-left: 3px solid var(--clay); padding-left: calc(var(--s-5) - 2px); }
.audio-lesson.status-pending {
  background: var(--bg);
  border-style: dashed;
}

.audio-lesson-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--s-3); flex-wrap: wrap;
}
.audio-lesson-head h4 { margin: 0 0 2px; font-size: 0.98rem; }
.audio-lesson-head h4 code { background: transparent; color: var(--softer); font-size: 0.86em; padding: 0; margin-right: 4px; font-weight: 400; }
.audio-lesson-head .meta { margin: 0; font-size: 0.82rem; }

.status-pill {
  display: inline-flex; align-items: center; gap: 4px;
  height: 26px; padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em;
  white-space: nowrap;
  text-transform: uppercase;
}
.status-pill.status-approved {
  background: var(--pine-bg); color: var(--pine);
  border: 1px solid var(--pine-line);
}
.status-pill.status-in-review {
  background: var(--clay-bg); color: var(--clay);
  border: 1px solid var(--clay-line);
}
.status-pill.status-pending {
  background: var(--bg); color: var(--softer);
  border: 1px solid var(--rule-strong);
}

.candidates {
  display: flex; flex-direction: column; gap: var(--s-2);
  margin-top: var(--s-3);
}
.cand {
  display: grid; grid-template-columns: 1fr;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  align-items: center;
}
@media (min-width: 720px) {
  .cand { grid-template-columns: minmax(180px, 1fr) minmax(220px, 2fr) auto; }
}
.cand.selected {
  border-color: var(--pine);
  background: var(--pine-bg-2);
}
.cand .v { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cand .v .voice-tone {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 0.94rem;
}
.cand .v .voice-tone strong { font-weight: 700; }
.cand .v .voice-tone .tone-tag {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--clay);
  background: var(--clay-bg); padding: 1px 8px;
  border-radius: var(--r-pill); border: 1px solid var(--clay-line);
}
.cand .v small { color: var(--softer); font-size: 0.76rem; }
.cand audio {
  width: 100%; max-width: 100%;
  height: 36px;
}
.cand-act { display: flex; gap: var(--s-2); align-items: center; }
.cand-act .btn { min-width: 110px; }
.cand-act .btn[disabled] {
  background: var(--pine-bg);
  color: var(--pine);
  border-color: var(--pine);
  opacity: 1;
}

.empty-row {
  display: flex; gap: var(--s-2); flex-wrap: wrap;
  align-items: center;
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px dashed var(--rule);
}
.empty-row .meta { margin: 0; flex: 1 1 100%; padding-bottom: 4px; }
@media (min-width: 480px) { .empty-row .meta { flex: 0 0 auto; padding-bottom: 0; } }

/* ── Tables ─────────────────────────────────────────────── */
.table {
  width: 100%; border-collapse: collapse;
  margin-top: var(--s-3); font-size: 0.9rem;
}
.table th {
  text-align: left; padding: var(--s-2) var(--s-3);
  border-bottom: 2px solid var(--rule);
  color: var(--soft); font-weight: 600;
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em;
}
.table td {
  padding: var(--s-3); border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.table tr:hover td { background: var(--bg); }
.table .pill {
  display: inline-block;
  background: var(--pine-bg); color: var(--pine);
  padding: 2px var(--s-3); border-radius: var(--r-pill);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.table .pill-clay { background: var(--clay-bg); color: var(--clay); }
.table code {
  font-size: 0.78rem;
  background: var(--bg);
}

/* ── Toast ──────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: var(--s-6); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--bg);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-pill);
  z-index: 50; box-shadow: var(--shadow-2);
  font-size: 0.9rem;
  max-width: calc(100% - 32px);
}
.toast.error { background: var(--clay); }

/* ── Users / Subscriptions: panel head, action menus, modal ── */
.panel-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-4); flex-wrap: wrap;
}
.panel-head h2 { margin: 0; }
.panel-head .meta { margin: var(--s-1) 0 0; }
.panel-tools { display: flex; gap: var(--s-2); align-items: center; }
.search {
  height: 36px; padding: 0 var(--s-3);
  border: 1px solid var(--rule); border-radius: var(--r-2);
  background: var(--bg); color: var(--ink); font: inherit; min-width: 240px;
}
.search:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-ghost {
  appearance: none; background: transparent; border: 1px solid var(--rule);
  color: var(--ink); padding: var(--s-2) var(--s-3); border-radius: var(--r-2);
  font: inherit; cursor: pointer;
}
.btn-ghost:hover { background: var(--surface); }
.btn-ghost.btn-sm { padding: 2px var(--s-2); font-size: 1.1rem; line-height: 1; }
.btn-danger {
  appearance: none; background: var(--clay); color: var(--bg);
  border: 1px solid transparent; padding: var(--s-2) var(--s-4);
  border-radius: var(--r-2); font: inherit; cursor: pointer; font-weight: 600;
}
.btn-danger:hover { filter: brightness(1.06); }

.table-actions th.actions-col,
.table-actions td.actions-col { width: 60px; text-align: right; padding-right: var(--s-3); }

.row-menu { position: relative; display: inline-block; }
.row-menu > summary { list-style: none; cursor: pointer; user-select: none; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 10;
  background: var(--bg); border: 1px solid var(--rule); border-radius: var(--r-2);
  box-shadow: var(--shadow-2); min-width: 220px; padding: var(--s-1);
  display: flex; flex-direction: column;
}
.row-menu-pop button {
  appearance: none; background: transparent; border: 0; color: var(--ink);
  text-align: left; padding: var(--s-2) var(--s-3); font: inherit; cursor: pointer;
  border-radius: var(--r-1);
}
.row-menu-pop button:hover:not(:disabled) { background: var(--surface); }
.row-menu-pop button:disabled { opacity: 0.4; cursor: not-allowed; }
.row-menu-pop button.danger { color: var(--clay); }
.row-menu-pop button.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--clay) 12%, var(--bg)); }

/* Native <dialog> modal */
.modal {
  border: 0; padding: 0; background: transparent; max-width: 480px; width: calc(100% - 32px);
}
.modal::backdrop { background: rgba(0,0,0,0.45); backdrop-filter: blur(2px); }
.modal-card {
  background: var(--bg); border-radius: var(--r-3); padding: var(--s-5);
  box-shadow: var(--shadow-3); border: 1px solid var(--rule);
}
.modal-card h3 { margin: 0 0 var(--s-2); }
.modal-actions {
  list-style: none; padding: 0; margin: var(--s-5) 0 0;
  display: flex; gap: var(--s-2); justify-content: flex-end;
}

/* ── Export menu (Users/Subs/Audit panel-tools) ── */
.export-menu { position: relative; display: inline-block; }
.export-menu > summary { list-style: none; cursor: pointer; }
.export-menu > summary::-webkit-details-marker { display: none; }
.export-menu-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 10;
  background: var(--bg); border: 1px solid var(--rule); border-radius: var(--r-2);
  box-shadow: var(--shadow-2); min-width: 200px; padding: var(--s-1);
  display: flex; flex-direction: column;
}
.export-menu-pop a {
  padding: var(--s-2) var(--s-3); color: var(--ink); text-decoration: none;
  border-radius: var(--r-1); cursor: pointer; font-size: 0.92rem;
}
.export-menu-pop a:hover { background: var(--surface); }

/* ── Audit filters + pager ── */
.audit-filters {
  display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: end;
  margin: var(--s-3) 0; padding: var(--s-3); background: var(--surface);
  border-radius: var(--r-2); border: 1px solid var(--rule);
}
.audit-filters label {
  display: flex; flex-direction: column; gap: 2px; font-size: 0.78rem; color: var(--soft);
}
.audit-filters input, .audit-filters select {
  height: 34px; padding: 0 var(--s-2); border: 1px solid var(--rule);
  border-radius: var(--r-2); background: var(--bg); color: var(--ink); font: inherit; min-width: 160px;
}
.audit-filters select { padding-right: var(--s-3); }
.audit-filters input:focus, .audit-filters select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.audit-filters button { height: 34px; }

.pager {
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  margin-top: var(--s-4);
}
.pager button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Backup tab ── */
.backup-grid {
  display: grid; gap: var(--s-4); grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .backup-grid { grid-template-columns: repeat(2, 1fr); }
}
.backup-card {
  background: var(--bg); border: 1px solid var(--rule); border-radius: var(--r-3);
  padding: var(--s-5);
}
.backup-card h3 { margin: 0 0 var(--s-2); font-size: 1.05rem; }
.backup-card .meta { margin: 0 0 var(--s-4); }
.backup-actions {
  display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center;
}
.backup-actions-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2);
}
.backup-actions a.btn,
.backup-actions a.btn-ghost {
  text-decoration: none; text-align: center; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.checkbox {
  display: inline-flex; align-items: center; gap: var(--s-2); font-size: 0.9rem;
  color: var(--soft); cursor: pointer;
}
#backup-secrets-warn { color: var(--clay); margin-top: var(--s-2); font-size: 0.85rem; }

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}

/* ── Audio course navigation ──────────────────────────────
   Course-scoped pill strip above the Audio generator. Each pill shows
   approved/total + a progress %. Active state matches the brand pine. */
.audio-courses {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin: 0 0 var(--s-5);
  padding: var(--s-3);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}
.audio-course-pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 8px 14px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  font-family: var(--f-sans);
  font-size: 0.9rem;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.audio-course-pill:hover {
  border-color: var(--rule-strong);
  background: var(--paper);
}
.audio-course-pill[aria-selected="true"] {
  background: var(--pine);
  border-color: var(--pine);
  color: var(--bg);
}
.audio-course-pill[aria-selected="true"] .audio-course-counts {
  color: color-mix(in oklab, var(--bg), var(--pine) 12%);
}
.audio-course-name {
  font-weight: 600;
}
.audio-course-counts {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-variant-numeric: tabular-nums;
  color: var(--softer);
  font-size: 0.82rem;
}
.audio-course-approved { font-weight: 600; }
.audio-course-sep { opacity: 0.5; }
.audio-course-pct {
  margin-left: var(--s-2);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--pine), var(--bg) 88%);
  color: var(--pine);
  font-size: 0.72rem;
  font-weight: 600;
}
.audio-course-pill[aria-selected="true"] .audio-course-pct {
  background: color-mix(in oklab, var(--bg), var(--pine) 70%);
  color: var(--bg);
}

/* ── Content matrix tab ────────────────────────────────── */
.content-matrix-wrap {
  margin-top: var(--s-4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow-x: auto;
}
.content-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
}
.content-matrix th, .content-matrix td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.content-matrix thead th {
  background: var(--bg);
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--soft);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  position: sticky; top: 0;
}
.content-matrix tbody tr:last-child td { border-bottom: 0; }
.content-matrix td.course-name { font-weight: 600; }
.content-cell {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 8px;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}
.content-cell .row-label { color: var(--softer); font-size: 0.78rem; }
.content-cell .row-val   { font-weight: 600; }
.content-cell.missing {
  color: var(--clay-soft);
  font-style: italic;
}
.coverage-bar {
  margin-top: 4px;
  height: 4px;
  background: var(--rule);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.coverage-bar .fill {
  display: block; height: 100%;
  background: var(--pine-soft);
  border-radius: var(--r-pill);
}
.coverage-bar .fill.full { background: var(--pine); }
.coverage-bar .fill.partial { background: var(--clay-soft); }
.coverage-bar .fill.empty { background: var(--clay); }
.lang-badge {
  display: inline-block;
  padding: 1px 6px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--soft);
  margin-right: 4px;
}
.content-summary {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  margin-bottom: var(--s-3);
  font-variant-numeric: tabular-nums;
}
.content-summary strong { color: var(--ink); }
.content-summary .dot.full     { color: var(--pine); }
.content-summary .dot.partial  { color: var(--clay-soft); }
.content-summary .dot.empty    { color: var(--clay); }

/* ── Audio generation progress card ────────────────────────
   Polished, accessible status display for /api/admin/audio/generate.
   Shows aggregate progress + per-voice rows + elapsed timer + CTA
   when ElevenLabs isn't configured. */
.gen-card {
  margin-top: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--pine-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
.gen-card.running    { border-left-color: var(--pine); }
.gen-card.done       { border-left-color: var(--pine); background: color-mix(in oklab, var(--pine), var(--bg) 92%); }
.gen-card.partial    { border-left-color: var(--clay-soft); background: color-mix(in oklab, var(--clay-soft), var(--bg) 94%); }
.gen-card.error      { border-left-color: var(--clay); background: color-mix(in oklab, var(--clay), var(--bg) 94%); }

.gen-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-2);
}
.gen-card-title {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 1.02rem;
  color: var(--ink);
}
.gen-spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid var(--rule);
  border-top-color: var(--pine);
  border-radius: 50%;
  animation: gen-spin 0.8s linear infinite;
}
.gen-card.done .gen-spinner    { border: none; background: var(--pine); position: relative; }
.gen-card.done .gen-spinner::after {
  content: "✓"; color: var(--bg); font-size: 12px; line-height: 16px;
  position: absolute; inset: 0; text-align: center; animation: none;
}
.gen-card.error .gen-spinner   { border: none; background: var(--clay); position: relative; animation: none; }
.gen-card.error .gen-spinner::after {
  content: "!"; color: var(--bg); font-size: 12px; line-height: 16px; font-weight: 700;
  position: absolute; inset: 0; text-align: center;
}
.gen-card.partial .gen-spinner { border: none; background: var(--clay-soft); position: relative; animation: none; }
.gen-card.partial .gen-spinner::after {
  content: "◐"; color: var(--bg); font-size: 12px; line-height: 16px;
  position: absolute; inset: 0; text-align: center;
}
@keyframes gen-spin { to { transform: rotate(360deg); } }
.gen-elapsed {
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  color: var(--softer);
  margin-left: var(--s-2);
}
.gen-summary {
  margin: 0 0 var(--s-3);
  font-size: 0.92rem;
}

.gen-bar {
  height: 6px;
  background: var(--rule);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-bottom: var(--s-3);
}
.gen-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--pine);
  border-radius: var(--r-pill);
  transition: width 240ms var(--ease);
}
.gen-card.error .gen-bar-fill  { background: var(--clay); }
.gen-card.partial .gen-bar-fill { background: var(--clay-soft); }
.gen-card.done .gen-bar-fill   { background: var(--pine); }

.gen-voices {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: var(--s-2);
}
.gen-voice {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-size: 0.9rem;
}
.gen-voice-status {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--softer);
  display: inline-block;
}
.gen-voice[data-state="queued"]   .gen-voice-status { background: var(--rule-strong); }
.gen-voice[data-state="running"]  .gen-voice-status {
  background: var(--pine);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--pine), transparent 30%);
  animation: gen-pulse 1.4s ease-out infinite;
}
.gen-voice[data-state="done"]     .gen-voice-status { background: var(--pine); }
.gen-voice[data-state="failed"]   .gen-voice-status { background: var(--clay); }
.gen-voice[data-state="skipped"]  .gen-voice-status { background: var(--rule-strong); opacity: 0.6; }
@keyframes gen-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--pine), transparent 30%); }
  70%  { box-shadow: 0 0 0 8px color-mix(in oklab, var(--pine), transparent 100%); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--pine), transparent 100%); }
}
.gen-voice-name { font-weight: 500; color: var(--ink); }
.gen-voice-detail {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.gen-voice[data-state="failed"] .gen-voice-detail { color: var(--clay); }
.gen-voice[data-state="done"]   .gen-voice-detail { color: var(--pine); }

.gen-cta {
  margin-top: var(--s-3);
  padding: var(--s-3);
  background: color-mix(in oklab, var(--clay), var(--bg) 92%);
  border: 1px dashed var(--clay-soft);
  border-radius: var(--r-sm);
}
.gen-cta p { margin: 0 0 var(--s-2); color: var(--clay); }

@media (prefers-reduced-motion: reduce) {
  .gen-spinner, .gen-voice[data-state="running"] .gen-voice-status { animation: none; }
}

/* ── Multi-variant audio block (v5l1 pattern) ──────────────
   Lessons whose manifest carries a `variants` map (view-mode × locale)
   get their own preview list. Each variant has voice/tone/locale tags +
   inline <audio> + download. */
.variants {
  margin: var(--s-3) 0;
  padding: var(--s-3);
  background: color-mix(in oklab, var(--pine), var(--bg) 92%);
  border: 1px solid color-mix(in oklab, var(--pine), transparent 70%);
  border-radius: var(--r-md);
}
.variants > summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: baseline; gap: var(--s-2);
  font-size: 0.92rem;
  color: var(--ink);
}
.variants > summary::-webkit-details-marker { display: none; }
.variants > summary::before {
  content: "▸";
  display: inline-block;
  width: 1em;
  color: var(--pine);
  transition: transform var(--t-fast) var(--ease);
}
.variants[open] > summary::before { transform: rotate(90deg); }
.variant-list {
  display: grid; gap: var(--s-2);
  margin-top: var(--s-3);
}
.variant-row {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 360px) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
}
@media (max-width: 700px) {
  .variant-row { grid-template-columns: 1fr; }
}
.variant-meta {
  display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  font-size: 0.88rem;
}
.variant-mode {
  display: inline-block;
  padding: 2px 8px;
  background: var(--pine);
  color: var(--bg);
  border-radius: var(--r-pill);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.variant-lang {
  display: inline-block;
  padding: 2px 8px;
  background: var(--bg);
  color: var(--soft);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.variant-voice {
  color: var(--soft);
  font-size: 0.85rem;
}
.variant-row audio { width: 100%; }
.variant-act { display: flex; gap: var(--s-2); }

/* ── Voice pills with preview button ──────────────────────
   Each voice has a ▶ button (toggles to ■ while playing) and a language
   chip strip so the curator sees which languages the voice supports. */
.voice-pill {
  display: inline-grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.voice-pill:hover { border-color: var(--rule-strong); }
.voice-pill input[type="checkbox"] {
  margin: 0;
  accent-color: var(--pine);
}
.voice-pill input[type="checkbox"]:checked + .voice-preview-btn,
.voice-pill input[type="checkbox"]:checked ~ .voice-pill-body {
  /* checked state — keep the pill semantically attached to the checkbox */
}
.voice-pill:has(input:checked) {
  background: color-mix(in oklab, var(--pine), var(--bg) 92%);
  border-color: var(--pine-soft);
}
.voice-preview-btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 24px; height: 24px;
  padding: 0;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  font-size: 10px;
  color: var(--pine);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.voice-preview-btn:hover {
  background: var(--pine);
  color: var(--bg);
  border-color: var(--pine);
  transform: scale(1.05);
}
.voice-preview-btn.playing {
  background: var(--pine);
  color: var(--bg);
  border-color: var(--pine);
  font-size: 8px;
  animation: voice-preview-pulse 1.2s ease-in-out infinite;
}
@keyframes voice-preview-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--pine), transparent 40%); }
  50%      { box-shadow: 0 0 0 6px color-mix(in oklab, var(--pine), transparent 100%); }
}
.voice-pill-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.voice-pill-label {
  font-size: 0.88rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}
.voice-langs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
}
.voice-lang {
  font-size: 0.66rem;
  padding: 1px 5px;
  background: color-mix(in oklab, var(--soft), var(--bg) 85%);
  color: var(--soft);
  border-radius: var(--r-pill);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── Language picker in the generator form ────────────────── */
.audio-field-lang {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
}
.audio-field-lang small {
  font-size: 0.72rem;
  color: var(--softer);
}
.audio-field-lang select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Per-language tab strip inside lesson cards ───────────── */
.lang-tabs {
  display: flex;
  gap: 2px;
  margin: var(--s-3) 0 var(--s-2);
  border-bottom: 1px solid var(--rule);
}
.lang-tab {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 6px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--soft);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.lang-tab:hover { color: var(--ink); }
.lang-tab[aria-selected="true"] {
  color: var(--pine);
  border-bottom-color: var(--pine);
}
.lang-tab-status {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
}
.lang-tab-status.status-approved { background: var(--pine); }
.lang-tab-status.status-in-review { background: var(--clay-soft); }
.lang-tab-status.status-pending   { background: var(--rule-strong); }
.lang-panel {
  margin-top: var(--s-2);
}

/* SSML preview content — better readability for non-Latin scripts */
#audio-script-content[lang="ur"] {
  direction: rtl;
  text-align: right;
  font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;
  font-size: 1.1rem;
  line-height: 2;
}
#audio-script-content[lang="hi"] {
  font-family: "Noto Sans Devanagari", "Mangal", sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* ── Top-level language navigation ───────────────────────────
   Language is a primary axis of admin navigation; the pill strip
   sits above course pills + content matrix in both Audio + Content tabs. */
.lang-nav {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin: 0 0 var(--s-4);
  padding: var(--s-3);
  background: linear-gradient(180deg, color-mix(in oklab, var(--pine), var(--bg) 95%), var(--paper));
  border: 1px solid var(--rule);
  border-left: 3px solid var(--pine);
  border-radius: var(--r-md);
}
.lang-pill {
  display: inline-grid;
  grid-template-columns: auto auto auto auto;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 16px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.lang-pill:hover {
  border-color: var(--pine-soft);
  transform: translateY(-1px);
}
.lang-pill[aria-selected="true"] {
  background: var(--pine);
  border-color: var(--pine);
  color: var(--bg);
  box-shadow: 0 4px 12px -6px color-mix(in oklab, var(--pine), transparent 40%);
}
.lang-pill-code {
  display: inline-block;
  padding: 2px 8px;
  background: color-mix(in oklab, var(--soft), var(--bg) 80%);
  color: var(--ink);
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.lang-pill[aria-selected="true"] .lang-pill-code {
  background: var(--bg);
  color: var(--pine);
}
.lang-pill-name {
  font-weight: 600;
  font-size: 0.95rem;
}
.lang-pill-native {
  font-size: 0.86rem;
  color: var(--softer);
}
.lang-pill[aria-selected="true"] .lang-pill-native {
  color: color-mix(in oklab, var(--bg), var(--pine) 30%);
}
.lang-pill-count {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  background: color-mix(in oklab, var(--pine), var(--bg) 88%);
  color: var(--pine);
  border-radius: var(--r-pill);
  font-weight: 600;
}
.lang-pill[aria-selected="true"] .lang-pill-count {
  background: color-mix(in oklab, var(--bg), var(--pine) 75%);
  color: var(--bg);
}

/* ── Unverified-voice indicator ─────────────────────────────── */
.voice-pill.unverified {
  border-style: dashed;
  opacity: 0.85;
}
.voice-pill.unverified:has(input:checked) {
  background: color-mix(in oklab, var(--clay-soft), var(--bg) 92%);
  border-color: var(--clay-soft);
  opacity: 1;
}
.voice-warn {
  display: inline-block;
  margin-left: 4px;
  width: 16px; height: 16px;
  background: var(--clay-soft);
  color: var(--bg);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 16px;
}
.voice-lang.match {
  background: var(--pine);
  color: var(--bg);
}
.voice-show-all {
  display: inline-flex; gap: 6px; align-items: center;
  margin-left: var(--s-3);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--soft);
}
.voice-hint {
  margin-top: var(--s-2);
  font-size: 0.82rem;
}

/* ── Per-lesson coverage dots (mini indicators) ────────────── */
.lesson-cov {
  display: inline-flex;
  gap: 4px;
  margin-left: var(--s-2);
  vertical-align: middle;
}
.lesson-cov-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rule-strong);
}
.lesson-cov-dot.status-approved { background: var(--pine); }
.lesson-cov-dot.status-in-review { background: var(--clay-soft); }
.lesson-cov-dot.active {
  outline: 2px solid var(--pine);
  outline-offset: 1px;
}

/* ── Content tab: single-language detail rows ────────────── */
.content-view-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.82rem;
  color: var(--soft);
  cursor: pointer;
}
.content-summary-lang {
  display: inline-flex; flex-direction: column;
  padding-right: var(--s-4);
  border-right: 1px solid var(--rule);
  margin-right: var(--s-3);
}
.content-detail {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.content-row {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
}
.content-row-full        { border-left-color: var(--pine); }
.content-row-partial     { border-left-color: var(--clay-soft); }
.content-row-in-progress { border-left-color: color-mix(in oklab, var(--clay-soft), var(--bg) 50%); }
.content-row-empty,
.content-row-missing     { border-left-color: var(--clay); background: color-mix(in oklab, var(--clay), var(--bg) 96%); }
.content-row-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-3); margin-bottom: var(--s-3);
}
.content-row-head h3 {
  margin: 0;
  font-size: 1.02rem;
}
.content-row-head h3 small {
  margin-left: var(--s-2);
  font-weight: 400;
  font-family: ui-monospace, monospace;
  font-size: 0.78rem;
}
.content-row-status {
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--r-pill);
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.content-row-status.status-full        { background: color-mix(in oklab, var(--pine),       var(--bg) 88%); color: var(--pine); }
.content-row-status.status-partial,
.content-row-status.status-in-progress { background: color-mix(in oklab, var(--clay-soft), var(--bg) 88%); color: var(--clay); }
.content-row-status.status-empty       { background: color-mix(in oklab, var(--clay),      var(--bg) 88%); color: var(--clay); }
.content-row-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-4);
}
.content-stat-label {
  font-size: 0.72rem;
  color: var(--softer);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.content-stat-val {
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.content-stat-val .missing { color: var(--clay); }
.content-row-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
}

/* ── Voice preview button: loading state ──────────────────
   First-time sample generation can take 5-10s while ElevenLabs renders
   the language-specific MP3. The button shows … and a slow pulse to
   communicate the wait without freezing the UI. */
.voice-preview-btn.loading {
  background: var(--clay-soft);
  color: var(--bg);
  border-color: var(--clay-soft);
  animation: voice-preview-loading 1.4s ease-in-out infinite;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -1px;
  cursor: wait;
}
@keyframes voice-preview-loading {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}

/* ── Candidate action menu (approve / regen / unapprove / delete) ──
   Each candidate row carries 2-3 buttons depending on selection state.
   "Live" pin makes the currently-approved candidate obvious. */
.cand-act {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-top: var(--s-2);
}
.btn-selected {
  background: var(--pine);
  color: var(--bg);
  border-color: var(--pine);
  cursor: default;
}
.btn-danger-ghost {
  color: var(--clay);
  border-color: color-mix(in oklab, var(--clay), transparent 70%);
}
.btn-danger-ghost:hover {
  background: color-mix(in oklab, var(--clay), var(--bg) 90%);
  border-color: var(--clay);
}
.selected-pin {
  display: inline-block;
  margin-left: var(--s-2);
  padding: 1px 8px;
  background: var(--pine);
  color: var(--bg);
  border-radius: var(--r-pill);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Per-language danger zone footer ────────────────────────── */
.lang-danger-zone {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px dashed color-mix(in oklab, var(--clay), transparent 60%);
}

/* ── Type-to-confirm input inside the destructive modal ───── */
.confirm-type-input {
  display: block;
  width: 100%;
  margin-top: var(--s-3);
  padding: 8px 12px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  font-family: ui-monospace, monospace;
  font-size: 0.9rem;
}
.confirm-type-input:focus {
  outline: none;
  border-color: var(--clay);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--clay), transparent 80%);
}

.btn-danger {
  background: var(--clay);
  color: var(--bg);
  border-color: var(--clay);
}
.btn-danger:not(:disabled):hover { background: var(--clay-soft); }
.btn-danger:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Engine navigation strip ─────────────────────────────────
   Sits between Language and Course nav. Each pill = one TTS provider.
   Unconfigured engines render greyed out + show "not configured" + ask
   the curator to open Settings on click. */
.engine-nav {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin: 0 0 var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}
.engine-pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 8px 14px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: var(--f-sans);
  font-size: 0.9rem;
  color: var(--ink);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.engine-pill:hover { border-color: var(--rule-strong); }
.engine-pill[aria-selected="true"] {
  background: var(--pine);
  border-color: var(--pine);
  color: var(--bg);
  font-weight: 600;
}
.engine-pill-icon {
  font-size: 1.05rem;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.engine-pill.unconfigured {
  opacity: 0.55;
  border-style: dashed;
}
.engine-pill.unconfigured:hover {
  opacity: 0.75;
  border-color: var(--clay-soft);
}
.engine-pill-status {
  font-size: 0.72rem;
  padding: 1px 6px;
  background: color-mix(in oklab, var(--clay), var(--bg) 90%);
  color: var(--clay);
  border-radius: var(--r-pill);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Per-candidate engine badge ─────────────────────────── */
.engine-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px;
  background: color-mix(in oklab, var(--soft), var(--bg) 88%);
  color: var(--soft);
  border-radius: var(--r-pill);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-right: 4px;
}
.engine-badge.engine-elevenlabs { background: color-mix(in oklab, #6366f1, var(--bg) 92%); color: #4338ca; }
.engine-badge.engine-azure      { background: color-mix(in oklab, #0078d4, var(--bg) 92%); color: #006bb8; }
.engine-badge span { font-size: 0.62rem; letter-spacing: 0.03em; }

/* ── Optional-field affordances ───────────────────────────── */
.field-optional-tag {
  display: inline-block;
  margin-left: var(--s-2);
  padding: 1px 8px;
  background: color-mix(in oklab, var(--pine), var(--bg) 88%);
  color: var(--pine);
  border-radius: var(--r-pill);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  font-weight: 600;
  text-transform: uppercase;
}
.field-source.source-auto {
  background: color-mix(in oklab, var(--pine), var(--bg) 88%);
  color: var(--pine);
  font-style: italic;
}
.field-optional .field-input input {
  border-style: dashed;
}

/* Per-group action row (e.g. Test Azure connection). */
.group-actions {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  display: flex; align-items: center; gap: var(--s-3);
  flex-wrap: wrap;
}
.group-actions .meta {
  margin: 0;
  font-size: 0.9rem;
}
.field-desc a {
  color: var(--pine);
  text-decoration: underline;
}

/* ── Azure probe diagnostics in the test-connection result ── */
.azure-probe-fail { display: block; }
.azure-probe-detail {
  margin-top: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: color-mix(in oklab, var(--clay), var(--bg) 95%);
  border: 1px solid color-mix(in oklab, var(--clay), transparent 70%);
  border-radius: var(--r-sm);
}
.azure-probe-detail summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--clay);
}
.azure-probe-detail p { margin: 4px 0; font-size: 0.82rem; }
.azure-probe-detail strong { color: var(--ink); }
.probe-tip {
  margin-top: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--paper);
  border-left: 3px solid var(--clay-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 0.85rem;
  color: var(--ink);
}

/* ── Engine voice fetch failure inline card ─────────────── */
.voice-fetch-error {
  padding: 16px 18px;
  background: color-mix(in oklab, var(--rule), var(--bg) 60%);
  border: 1px solid color-mix(in oklab, var(--rule-strong, var(--rule)), transparent 30%);
  border-radius: var(--r-md);
  max-width: 640px;
}
.voice-fetch-title { margin: 0 0 4px; font-size: 1rem; }
.voice-fetch-error .meta { margin: 0 0 12px; color: var(--meta); }
.voice-fetch-steps {
  margin: 0 0 12px;
  padding-left: 1.4em;
  color: var(--text);
  font-size: .92rem;
  line-height: 1.55;
}
.voice-fetch-steps li { margin: 4px 0; }
.voice-fetch-steps code {
  font-size: .85em;
  padding: 1px 5px;
  background: color-mix(in oklab, var(--rule), transparent 40%);
  border-radius: 4px;
}
.voice-fetch-diag {
  margin: 0 0 12px;
  font-size: .85rem;
}
.voice-fetch-diag summary {
  cursor: pointer;
  color: var(--meta);
  margin-bottom: 4px;
}
.voice-fetch-diag pre {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: color-mix(in oklab, var(--rule), transparent 40%);
  border-radius: 6px;
  font-size: .75rem;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--meta);
}
.voice-fetch-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}

/* ── Batch generation modal ──────────────────────────────── */
.batch-modal {
  max-width: 720px;
  width: min(95vw, 720px);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 0;
  background: var(--paper);
  box-shadow: var(--shadow-2);
}
.batch-modal::backdrop {
  background: rgba(26, 32, 44, 0.45);
}
.batch-modal-card {
  display: flex; flex-direction: column;
  max-height: 85vh;
}
.batch-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.batch-modal-head h3 { margin: 0; font-size: 1.1rem; font-family: var(--f-sans); }
.batch-close {
  background: transparent;
  border: 0;
  font-size: 1.2rem;
  color: var(--soft);
  cursor: pointer;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.batch-close:hover { background: var(--bg); color: var(--ink); }
.batch-context {
  margin: 0;
  padding: var(--s-3) var(--s-5);
  background: color-mix(in oklab, var(--pine), var(--bg) 95%);
  border-bottom: 1px solid var(--rule);
}
.batch-scope {
  border: none;
  margin: 0;
  padding: var(--s-4) var(--s-5) var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.batch-scope legend {
  margin: 0 0 var(--s-2);
  padding: 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.batch-scope label {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--s-2);
  align-items: start;
  padding: var(--s-2) var(--s-3);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.batch-scope label:has(input:checked) {
  border-color: var(--pine);
  background: color-mix(in oklab, var(--pine), var(--bg) 92%);
}
.batch-scope label > span {
  display: flex; align-items: baseline; gap: var(--s-2);
  font-weight: 600;
}
.batch-scope label em {
  font-style: normal;
  font-family: ui-monospace, monospace;
  color: var(--softer);
  font-weight: 400;
}
.batch-scope small {
  grid-column: 2;
  font-size: 0.82rem;
}
.batch-search-row {
  display: flex; gap: var(--s-2); align-items: center;
  padding: 0 var(--s-5) var(--s-3);
}
.batch-search-row input[type="search"] { flex: 1; }
.batch-lesson-list {
  flex: 1;
  overflow-y: auto;
  max-height: 280px;
  padding: 0 var(--s-5) var(--s-3);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.batch-lesson-row {
  display: grid;
  grid-template-columns: 20px 70px 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: 6px 8px;
  border-bottom: 1px solid color-mix(in oklab, var(--rule), transparent 50%);
  font-size: 0.88rem;
  cursor: pointer;
}
.batch-lesson-row:hover { background: var(--paper); }
.batch-lesson-id {
  font-family: ui-monospace, monospace;
  font-size: 0.78rem;
  color: var(--soft);
}
.batch-lesson-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.batch-pill {
  font-size: 0.66rem;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--rule);
  color: var(--soft);
}
.batch-pill-approved { background: color-mix(in oklab, var(--pine), var(--bg) 80%); color: var(--pine); }
.batch-pill-in-review { background: color-mix(in oklab, var(--clay-soft), var(--bg) 80%); color: var(--clay); }
.batch-pill-pending   { background: var(--rule); color: var(--softer); }
.batch-modal-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-3) var(--s-5);
  gap: var(--s-3); flex-wrap: wrap;
}
.batch-estimate { margin: 0; flex: 1; min-width: 200px; }
.batch-foot-actions { display: flex; gap: var(--s-2); }

/* ── Batch progress card ───────────────────────────────── */
.batch-progress-card {
  margin-top: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--pine-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
.batch-progress-card.running { border-left-color: var(--pine); }
.batch-progress-card.done    { border-left-color: var(--pine);       background: color-mix(in oklab, var(--pine), var(--bg) 95%); }
.batch-progress-card.partial { border-left-color: var(--clay-soft);  background: color-mix(in oklab, var(--clay-soft), var(--bg) 95%); }
.batch-progress-card.error   { border-left-color: var(--clay);       background: color-mix(in oklab, var(--clay), var(--bg) 96%); }
.batch-progress-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-3); margin-bottom: var(--s-2);
}
.batch-progress-title { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 1.02rem; }
.batch-progress-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.batch-progress-summary { margin: 0 0 var(--s-2); font-size: 0.9rem; }
.batch-progress-current { margin: var(--s-2) 0; font-size: 0.92rem; }
.batch-progress-lessons {
  list-style: none;
  padding: 0; margin: var(--s-3) 0 0;
  max-height: 280px;
  overflow-y: auto;
  display: grid;
  gap: 2px;
  font-size: 0.85rem;
}
.batch-progress-lessons li {
  display: flex; align-items: baseline; gap: var(--s-2);
  padding: 4px 8px;
  border-radius: var(--r-sm);
  background: var(--bg);
  border: 1px solid color-mix(in oklab, var(--rule), transparent 60%);
  font-family: ui-monospace, monospace;
}
.batch-progress-lessons li[data-state="queued"]  { color: var(--softer); }
.batch-progress-lessons li[data-state="running"] {
  border-color: var(--pine);
  background: color-mix(in oklab, var(--pine), var(--bg) 95%);
  color: var(--ink); font-weight: 600;
}
.batch-progress-lessons li[data-state="done"]    {
  border-color: color-mix(in oklab, var(--pine), transparent 60%);
  background: color-mix(in oklab, var(--pine), var(--bg) 97%);
  color: var(--pine);
}
.batch-progress-lessons li[data-state="failed"]  {
  border-color: color-mix(in oklab, var(--clay), transparent 60%);
  background: color-mix(in oklab, var(--clay), var(--bg) 96%);
  color: var(--clay);
}
.batch-tick {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.batch-fail-reason { color: var(--clay); font-style: italic; font-family: var(--f-sans); }

/* ── Multi-select toolbar + lesson card checkbox ──────────
   Sticky bar above the lesson list. Master "select all visible" toggle on
   the left, bulk-action group on the right (hidden when nothing's selected). */
.lesson-bulk-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  margin: 0 0 var(--s-3);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
.lesson-bulk-all {
  display: inline-flex; align-items: center; gap: var(--s-2);
  cursor: pointer;
  font-size: 0.88rem;
}
.lesson-bulk-all input[type="checkbox"] { accent-color: var(--pine); }
.lesson-bulk-actions {
  display: inline-flex; align-items: center; gap: var(--s-2);
  flex-wrap: wrap;
  padding: 4px 8px;
  background: color-mix(in oklab, var(--pine), var(--bg) 92%);
  border: 1px solid color-mix(in oklab, var(--pine), transparent 70%);
  border-radius: var(--r-md);
}
.lesson-bulk-count {
  font-weight: 700;
  color: var(--pine);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  padding: 0 var(--s-2);
}

/* Checkbox inside each lesson card header. */
.lesson-bulk-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  margin-right: var(--s-2);
  cursor: pointer;
}
.lesson-bulk-check {
  width: 18px; height: 18px;
  accent-color: var(--pine);
  cursor: pointer;
}
.audio-lesson-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--s-2);
}
/* When a card is part of the active selection, give it a clear visual lift. */
.audio-lesson:has(.lesson-bulk-check:checked) {
  border-color: var(--pine);
  background: color-mix(in oklab, var(--pine), var(--bg) 96%);
  box-shadow: 0 0 0 1px var(--pine), 0 4px 12px -8px color-mix(in oklab, var(--pine), transparent 50%);
}
.lesson-head-text { min-width: 0; }

/* ── Strict-filter voice list: multilingual tag + empty state ── */
.voice-secondary-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  background: color-mix(in oklab, var(--clay-soft), var(--bg) 88%);
  color: var(--clay);
  border-radius: var(--r-pill);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.voice-pill-multilingual {
  border-style: dashed;
}
.voice-include-ml {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: var(--s-3);
  font-size: 0.78rem;
  color: var(--soft);
  font-weight: 400;
}
.voice-include-ml-inline {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--s-2);
  font-size: 0.85rem;
  color: var(--soft);
}

.voice-empty-state {
  padding: var(--s-4) var(--s-5);
  background: var(--paper);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-md);
  text-align: left;
}
.voice-empty-state p { margin: 0 0 var(--s-2); }
.voice-empty-state .voice-empty-actions {
  display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center;
  margin-top: var(--s-3);
}

/* ── Multi-select disambiguation banner ───────────────────
   Surfaces when ≥1 lesson is selected in the bulk toolbar, telling the
   curator that the top "Generate this lesson" button is NOT the bulk one.
   Clay accent so it stands out against the rest of the generator panel. */
.audio-multiselect-hint {
  margin: 0 0 var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: color-mix(in oklab, var(--clay-soft), var(--bg) 88%);
  border: 1px solid color-mix(in oklab, var(--clay-soft), transparent 60%);
  border-left: 3px solid var(--clay-soft);
  border-radius: var(--r-md);
  font-size: 0.92rem;
  color: var(--ink);
}
.audio-multiselect-hint strong { color: var(--clay); }
.audio-multiselect-hint code {
  font-family: ui-monospace, monospace;
  font-size: 0.85em;
  padding: 1px 6px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
}
.audio-hint-link {
  background: var(--clay-soft);
  color: var(--bg);
  border: 1px solid var(--clay-soft);
  border-radius: var(--r-sm);
  padding: 2px 10px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.88rem;
}
.audio-hint-link:hover { background: var(--clay); border-color: var(--clay); }

/* Pulse the bulk Generate button once when scrolled-to from the hint. */
@keyframes bulk-gen-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--pine), transparent 0%); }
  60%  { box-shadow: 0 0 0 14px color-mix(in oklab, var(--pine), transparent 100%); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--pine), transparent 100%); }
}
.pulse-once { animation: bulk-gen-pulse 1.6s ease-out 1; }

/* ═══════════════════════════════════════════════════════════════════
   Inline illustrations tab
   ═══════════════════════════════════════════════════════════════════ */

.ill-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
}
.ill-summary { font-size: 0.95rem; color: var(--soft); }
.ill-summary strong { color: var(--ink); }
.ill-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.ill-summary-pill {
  display: inline-block; padding: 2px 8px; border-radius: var(--r-pill);
  font-size: 0.78rem; font-weight: 600;
  margin: 0 4px;
}
.ill-pill-generated { background: color-mix(in oklab, #d97706, var(--bg) 78%); color: #7a3a02; }
.ill-pill-approved  { background: var(--pine-bg); color: var(--pine); }

/* Batch-generate toolbar — appears whenever there are draft suggestions
   that haven't been generated yet. The whole bar hides when there are
   zero drafts (nothing to batch). */
.ill-batchbar {
  display: flex;
  align-items: center; justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--pine-bg-2);
  border: 1px solid var(--pine-line);
  border-radius: var(--r-md);
}
.ill-batchbar[hidden] { display: none; }
.ill-batchbar-info { font-size: 0.92rem; color: var(--ink); min-width: 0; }
.ill-batchbar-info strong { color: var(--pine); }
.ill-batchbar-actions {
  display: flex; align-items: center; gap: var(--s-2);
  flex-wrap: wrap;
}
.ill-batchbar select {
  font: inherit;
  padding: 5px 8px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  margin-left: 6px;
}
#ill-batch-cost {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  color: var(--soft);
  letter-spacing: -0.01em;
}
#ill-batch-generate {
  /* Slightly stronger emphasis than the default btn — this is a bigger
     deliberate action than per-row Generate. */
  font-weight: 700;
}

/* Determinate progress bar for the analyzer. Tied to the polling endpoint
   so it actually reflects work done (compact + detailed passes per lesson),
   not just a fake animation. */
.ill-progress {
  margin: var(--s-3) 0;
  padding: var(--s-3) var(--s-4);
  background: var(--paper);
  border: 1px solid var(--pine-line);
  border-radius: var(--r-sm);
}
.ill-progress[hidden] { display: none; }
.ill-progress-header {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
  font-size: 0.85rem;
}
.ill-progress-label {
  color: var(--ink);
  font-weight: 500;
  min-width: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ill-progress-counts {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  color: var(--soft);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.ill-progress-track {
  height: 6px;
  background: var(--bg);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.ill-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--pine), var(--pine-soft));
  width: 0%;
  transition: width 400ms ease;
  border-radius: 3px;
}
/* Indeterminate state (we don't know the total yet) — sliding band. */
.ill-progress-indeterminate .ill-progress-fill {
  width: 30% !important;
  animation: ill-progress-slide 1.2s ease-in-out infinite;
}
@keyframes ill-progress-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

#ill-log {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  padding: var(--s-3) var(--s-4);
  background: var(--pine-bg-2);
  border-left: 3px solid var(--pine-line);
  border-radius: var(--r-sm);
  white-space: pre-wrap;
  max-height: 240px;
  overflow: auto;
  color: var(--soft);
  margin: var(--s-3) 0;
}

.ill-volume { margin-bottom: var(--s-6); }
.ill-volume > h3 {
  font-family: var(--f-serif);
  font-size: 1.05rem;
  margin: 0 0 var(--s-3);
  color: var(--pine);
  letter-spacing: .01em;
}
.ill-volume-grid { display: flex; flex-direction: column; gap: var(--s-2); }

/* ── Lesson row (accordion title) ────────────────────────────────── */
.ill-row {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.ill-row:hover {
  border-color: var(--rule-strong);
  box-shadow: 0 1px 2px rgba(0,0,0,0.02), 0 4px 10px rgba(0,0,0,0.04);
}
.ill-row[data-expanded="true"] {
  border-color: var(--pine);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 8px 24px rgba(31,78,61,0.08);
}

/* Left-edge rail — encodes lesson roll-up status at a glance. Reads like a
   colored tab pinned to the side of the row. */
.ill-row-rail {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: transparent;
  transition: background var(--t-fast), width var(--t-fast);
}
.ill-row[data-rollup="empty"]    .ill-row-rail { background: var(--rule-strong); }
.ill-row[data-rollup="draft"]    .ill-row-rail { background: color-mix(in oklab, var(--soft), var(--bg) 50%); }
.ill-row[data-rollup="review"]   .ill-row-rail { background: color-mix(in oklab, #d97706, var(--bg) 40%); }
.ill-row[data-rollup="approved"] .ill-row-rail { background: var(--pine); }
.ill-row[data-expanded="true"] .ill-row-rail { width: 5px; }

.ill-row-head {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding-left: 4px; /* compensate for the rail */
}

/* Custom checkbox — replaces the OS default with a soft, brand-aware box. */
.ill-row-check {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 44px;
  padding: 0;
  border-right: 1px solid var(--rule);
  cursor: pointer;
  background: var(--bg);
  transition: background var(--t-fast);
}
.ill-row-check:hover { background: color-mix(in oklab, var(--pine), var(--bg) 92%); }
.ill-row-check input { position: absolute; opacity: 0; pointer-events: none; }
.ill-row-check-glyph {
  width: 18px; height: 18px;
  border: 1.5px solid var(--rule-strong);
  border-radius: 5px;
  background: var(--paper);
  transition: all var(--t-fast);
  position: relative;
}
.ill-row-check input:checked + .ill-row-check-glyph {
  background: var(--pine);
  border-color: var(--pine);
}
.ill-row-check input:checked + .ill-row-check-glyph::after {
  content: "";
  position: absolute;
  top: 2px; left: 5px;
  width: 4px; height: 9px;
  border: solid var(--paper);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ill-row-check input:focus-visible + .ill-row-check-glyph {
  outline: 2px solid var(--pine-line);
  outline-offset: 2px;
}

/* Main clickable region. CSS Grid: main content fills, thumbs strip and
   caret pin right. */
.ill-row-expand {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast);
}
.ill-row-expand:hover { background: linear-gradient(to right, color-mix(in oklab, var(--pine), var(--bg) 96%), transparent 60%); }
.ill-row-expand:focus-visible {
  outline: 2px solid var(--pine-line);
  outline-offset: -2px;
}

.ill-row-main { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.ill-row-titleline {
  display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
}
.ill-row-title {
  margin: 0;
  font-family: var(--f-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.ill-row-id {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  color: var(--softer);
  background: var(--bg);
  padding: 1px 8px;
  border-radius: var(--r-pill);
  letter-spacing: .04em;
}

/* Plain-English count summary line. */
.ill-row-counts {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: 0.82rem;
  color: var(--soft);
  flex-wrap: wrap;
}
.ill-row-counts strong { color: var(--ink); font-weight: 600; }
.ill-row-counts-sep { color: var(--rule-strong); }
.ill-row-counts-empty { color: var(--softer); font-style: italic; }
.ill-row-counts-approved {
  color: var(--pine); font-weight: 600;
}
.ill-row-counts-review {
  color: #a14021; font-weight: 600;
}

/* Per-suggestion chip — pass-letter glyph + position + asset + orient. */
.ill-row-chips {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.ill-rowchip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 4px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--rule);
  font-size: 0.74rem;
  line-height: 1.4;
  transition: border-color var(--t-fast);
}
.ill-rowchip:hover { border-color: var(--rule-strong); }
.ill-rowchip-approved  {
  background: var(--pine-bg-2);
  border-color: var(--pine-line);
}
.ill-rowchip-generated {
  background: color-mix(in oklab, #d97706, var(--bg) 90%);
  border-color: color-mix(in oklab, #d97706, var(--bg) 60%);
}
.ill-rowchip-proposed {
  background: var(--bg);
}
.ill-rowchip-pass {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0;
  font-family: var(--f-sans);
}
.ill-rowchip-approved .ill-rowchip-pass  { background: var(--pine); }
.ill-rowchip-generated .ill-rowchip-pass { background: #a14021; }
.ill-rowchip-pos { font-weight: 600; color: var(--ink); }
.ill-rowchip-empty {
  font-size: 0.78rem; color: var(--softer);
  font-style: italic;
  padding: 4px 0;
}

/* Right-side thumbnail strip — circular previews of approved images. Up to
   4 visible; overlapping for compactness. */
.ill-row-thumbs {
  display: flex; align-items: center;
  padding-left: var(--s-2);
}
.ill-row-thumb {
  display: block;
  width: 32px; height: 32px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--paper);
  margin-left: -8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: transform var(--t-fast), z-index 0s;
  background: var(--bg);
}
.ill-row-thumb:first-child { margin-left: 0; }
.ill-row-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ill-row-thumb.is-approved { border-color: color-mix(in oklab, var(--pine), var(--paper) 30%); }
.ill-row-thumb.is-review   { border-color: color-mix(in oklab, #d97706, var(--paper) 40%); }
.ill-row-expand:hover .ill-row-thumb {
  transform: translateY(-1px);
}

/* Trailing actions group — sits as a sibling of .ill-row-expand so its
   buttons don't toggle the accordion when clicked. Contains the
   Analyze/Re-analyze button and the standalone caret toggle. */
.ill-row-trailing {
  display: flex; align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-4) 0 0;
  background: transparent;
}
.ill-row-action {
  display: inline-flex; align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--t-fast);
  border: 1.5px solid transparent;
  line-height: 1;
}
.ill-row-action:focus-visible { outline: 2px solid var(--pine-line); outline-offset: 2px; }
.ill-row-action:disabled { cursor: wait; opacity: 0.75; }
.ill-row-action svg { display: block; }

/* Primary = brand pine fill, for lessons with no analysis (high-affordance). */
.ill-row-action-primary {
  background: var(--pine);
  color: var(--paper);
  border-color: var(--pine);
  box-shadow: 0 1px 2px rgba(31,78,61,0.16);
}
.ill-row-action-primary:hover:not(:disabled) {
  background: var(--pine-soft);
  border-color: var(--pine-soft);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(31,78,61,0.22);
}

/* Ghost = subtle outline, for Re-analyze on already-analyzed lessons so it
   doesn't compete with the accordion caret for attention. */
.ill-row-action-ghost {
  background: var(--paper);
  color: var(--soft);
  border-color: var(--rule);
}
.ill-row-action-ghost:hover:not(:disabled) {
  background: var(--pine-bg-2);
  border-color: var(--pine-line);
  color: var(--pine);
}

/* Spinner glyph for the busy state. */
.ill-spinner {
  display: inline-block;
  width: 10px; height: 10px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ill-spin 0.7s linear infinite;
}
@keyframes ill-spin { to { transform: rotate(360deg); } }

/* Caret as a standalone button now. Same circular pine treatment as
   before but with its own focus ring and hover state. */
.ill-row-caret-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 0;
  background: var(--bg);
  color: var(--softer);
  cursor: pointer;
  padding: 0;
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.ill-row-caret-btn:hover { background: color-mix(in oklab, var(--pine), var(--bg) 86%); color: var(--pine); }
.ill-row-caret-btn:focus-visible { outline: 2px solid var(--pine-line); outline-offset: 2px; }
.ill-row-caret-btn svg { display: block; }
.ill-row[data-expanded="true"] .ill-row-caret-btn { transform: rotate(180deg); background: var(--pine); color: var(--paper); }

/* On narrow viewports collapse the label so the row doesn't wrap; the
   spinner state keeps its label so the user knows something is happening. */
@media (max-width: 640px) {
  .ill-row-action { padding: 6px 8px; }
  .ill-row-action-label { display: none; }
  .ill-row-action:disabled .ill-row-action-label { display: inline; }
}

.ill-badge {
  display: inline-block; padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: .02em; line-height: 1.4;
  white-space: nowrap;
}
.ill-badge-empty     { background: var(--bg); color: var(--softer); }
.ill-badge-proposed  { background: color-mix(in oklab, var(--soft), var(--bg) 78%); color: var(--soft); }
.ill-badge-generated { background: color-mix(in oklab, #d97706, var(--bg) 78%); color: #7a3a02; }
.ill-badge-approved  { background: var(--pine-bg); color: var(--pine); }

.ill-row-detail {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--rule);
  background: var(--bg);
  display: flex; flex-direction: column; gap: var(--s-4);
}

.ill-sug {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-4);
}
.ill-sug[data-status="approved"]  { border-color: color-mix(in oklab, var(--pine), var(--bg) 50%); }
.ill-sug[data-status="generated"] { border-color: color-mix(in oklab, #d97706, var(--bg) 60%); }

.ill-sug-head { display: flex; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-2); }
.ill-sug-title { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.ill-sug-pos {
  font-family: var(--f-serif); font-weight: 600; font-size: 1.02rem;
  color: var(--pine);
}
.ill-sug-view {
  font-size: 0.78rem; color: var(--soft);
  background: var(--bg); padding: 1px 8px; border-radius: var(--r-pill);
}

.ill-sug-psych {
  margin: 0 0 var(--s-3);
  font-style: italic;
  color: var(--soft);
  line-height: 1.5;
  border-left: 2px solid var(--pine-line);
  padding: var(--s-1) var(--s-3);
}

.ill-sug-body {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: var(--s-4);
}
@media (max-width: 720px) { .ill-sug-body { grid-template-columns: 1fr; } }

.ill-sug-preview img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--bg);
  border: 1px solid var(--rule);
}
.ill-sug-noimg {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--bg);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-sm);
  color: var(--softer); padding: var(--s-5);
  aspect-ratio: 16 / 9;
  font-size: 0.85rem;
}

.ill-sug-prompt-label, .ill-sug-alt-label {
  display: block; font-size: 0.82rem; font-weight: 600;
  color: var(--soft); letter-spacing: .02em;
  margin-bottom: var(--s-1);
}
.ill-sug-prompt, .ill-sug-alt {
  width: 100%;
  font: inherit;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--paper);
  resize: vertical;
}
.ill-sug-prompt { font-size: 0.88rem; line-height: 1.45; min-height: 100px; }
.ill-sug-prompt:focus, .ill-sug-alt:focus { outline: 2px solid var(--pine-line); outline-offset: 1px; }
.ill-sug-alt { margin-bottom: var(--s-3); }

.ill-dirty { color: var(--clay); font-weight: 500; font-style: normal; }

/* ── Model picker (card grid, replaces chip fieldset) ────────────── */
.ill-modelpicker {
  margin: 0 0 var(--s-4);
}
.ill-modelpicker-head {
  display: flex; align-items: baseline; gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.ill-modelpicker-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--softer);
}
.ill-modelpicker-orient {
  font-size: 0.78rem;
  color: var(--soft);
}
.ill-modelpicker-orient strong {
  color: var(--ink);
  font-weight: 600;
}

.ill-modelpicker-grid {
  display: grid;
  /* Auto-fill — wraps gracefully as the model roster grows. With ~140px
     min card width, the grid lands at 5-7 columns on typical desktop
     widths and degrades cleanly on narrower screens. */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s-2);
}

.ill-modelcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--s-3) var(--s-3) var(--s-2);
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: var(--r-md);
  cursor: pointer;
  overflow: hidden;
  transition: all var(--t-fast);
  min-height: 130px;
}
.ill-modelcard:hover {
  border-color: var(--rule-strong);
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.03), 0 6px 16px rgba(0,0,0,0.06);
}
.ill-modelcard input {
  position: absolute; opacity: 0; pointer-events: none;
}

/* Top ribbon — encodes the platform with a tinted strip. */
.ill-modelcard-ribbon {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--rule-strong);
}
.ill-modelcard[data-ribbon="google"]   .ill-modelcard-ribbon { background: linear-gradient(90deg, #4285F4, #34A853, #FBBC04, #EA4335); }
.ill-modelcard[data-ribbon="xai"]      .ill-modelcard-ribbon { background: linear-gradient(90deg, #1f1f1f, #4a4a4a); }
.ill-modelcard[data-ribbon="openai"]   .ill-modelcard-ribbon { background: linear-gradient(90deg, #10a37f, #1ec99a); }
.ill-modelcard[data-ribbon="recraft"]  .ill-modelcard-ribbon { background: linear-gradient(90deg, #ff5a3c, #ffa030); }
.ill-modelcard[data-ribbon="recraft-pro"]    .ill-modelcard-ribbon { background: linear-gradient(90deg, #c1330e, #ff7f30); }
.ill-modelcard[data-ribbon="recraft-vector"] .ill-modelcard-ribbon { background: linear-gradient(90deg, #4d3ad6, #9d6efb); }

/* Card content */
.ill-modelcard-platform {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--softer);
  margin-top: 6px;
  margin-bottom: 2px;
}
.ill-modelcard-name {
  font-family: var(--f-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.ill-modelcard-family {
  font-size: 0.7rem;
  color: var(--softer);
  margin-bottom: var(--s-2);
}

/* Aspect preview + dimensions */
.ill-modelcard-preview {
  display: flex; align-items: center; gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-2);
  border-top: 1px dashed var(--rule);
}
.ill-modelcard-aspect {
  display: inline-block;
  background: linear-gradient(135deg, color-mix(in oklab, var(--pine), var(--bg) 70%), color-mix(in oklab, var(--clay), var(--bg) 80%));
  border-radius: 2px;
  flex-shrink: 0;
  transition: background var(--t-fast);
}
.ill-modelcard-dims {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
  color: var(--soft);
  letter-spacing: -0.01em;
}

.ill-modelcard-honors {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  margin-top: 4px;
}
.ill-modelcard-honors.is-true  { color: var(--pine); }
.ill-modelcard-honors.is-approx { color: var(--softer); }

/* Checkmark — only visible when active. */
.ill-modelcard-check {
  position: absolute;
  top: 8px; right: 8px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--pine);
  color: var(--paper);
  opacity: 0;
  transform: scale(0.7);
  transition: all var(--t-fast);
}

/* Active state — strong fill + lifted checkmark + brand-tinted glow. */
.ill-modelcard.is-active {
  border-color: var(--pine);
  background: linear-gradient(180deg, var(--pine-bg-2) 0%, var(--paper) 80%);
  box-shadow: 0 0 0 1px var(--pine), 0 4px 14px rgba(31,78,61,0.12);
  transform: translateY(-2px);
}
.ill-modelcard.is-active .ill-modelcard-platform { color: var(--pine); }
.ill-modelcard.is-active .ill-modelcard-check {
  opacity: 1;
  transform: scale(1);
}
.ill-modelcard.is-active .ill-modelcard-aspect {
  background: var(--pine);
}

/* Keyboard focus ring without hijacking the focus from the hidden radio. */
.ill-modelcard:focus-within { outline: 2px solid var(--pine-line); outline-offset: 2px; }

/* Per-card price chip. Sits in the upper-right area of the card, tier-tinted
   so cheap models read green, mid models neutral, premium models warning-amber. */
.ill-modelcard-price {
  position: absolute;
  top: 8px; right: 8px;
  display: inline-flex; align-items: baseline; gap: 2px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.02em;
  transition: all var(--t-fast);
  /* Make sure the active-state checkmark doesn't sit on top of the price. */
  z-index: 1;
}
.ill-modelcard-price-cheap {
  background: color-mix(in oklab, var(--pine), var(--bg) 88%);
  color: var(--pine);
  border: 1px solid color-mix(in oklab, var(--pine), transparent 70%);
}
.ill-modelcard-price-mid {
  background: var(--bg);
  color: var(--soft);
  border: 1px solid var(--rule-strong);
}
.ill-modelcard-price-premium {
  background: color-mix(in oklab, #d97706, var(--bg) 82%);
  color: #7a3a02;
  border: 1px solid color-mix(in oklab, #d97706, transparent 60%);
  font-weight: 700;
}
.ill-modelcard-price-amount { font-weight: 700; }
.ill-modelcard-price-unit {
  font-size: 0.62rem;
  color: var(--softer);
  font-weight: 500;
}
.ill-modelcard-price-cheap   .ill-modelcard-price-unit { color: color-mix(in oklab, var(--pine), var(--paper) 50%); }
.ill-modelcard-price-premium .ill-modelcard-price-unit { color: color-mix(in oklab, #7a3a02, var(--paper) 30%); }

/* Active card: the checkmark moves the price chip to make room. */
.ill-modelcard.is-active .ill-modelcard-price { right: 36px; }

/* When active is "premium" the price strip glows a bit so the cost is salient. */
.ill-modelcard.is-active.ill-modelcard-price-premium .ill-modelcard-price-premium { /* no-op kept for future tuning */ }

/* Header: price for the currently selected model so the curator sees what
   they're about to spend before clicking Generate. */
.ill-modelpicker-head {
  flex-wrap: wrap;
}
.ill-modelpicker-price {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--soft);
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--bg);
  border: 1px solid var(--rule);
}
.ill-modelpicker-price strong {
  color: var(--ink);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Bottom disclaimer for the picker. Small, italicized, restrained. */
.ill-modelpicker-disclaimer {
  font-size: 0.72rem;
  color: var(--softer);
  font-style: italic;
  margin: var(--s-3) 0 0;
  line-height: 1.45;
}

/* When the picker is collapsed (default), the single visible card spans
   the full row width so it reads as the deliberate primary choice rather
   than one option among many. The grid layout still applies but
   effectively becomes 1 column. */
.ill-modelpicker-grid[data-expanded="false"] {
  grid-template-columns: minmax(0, 1fr);
  max-width: 420px;
}

/* Compare-models toggle row — sits below the grid in both states. Hosts the
   toggle button itself plus a hint line in collapsed state. */
.ill-modelpicker-toggle-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-3);
}
.ill-modelpicker-toggle {
  display: inline-flex; align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--soft);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast);
  line-height: 1;
}
.ill-modelpicker-toggle:hover {
  border-color: var(--pine-line);
  color: var(--pine);
  background: var(--pine-bg-2);
}
.ill-modelpicker-toggle:focus-visible { outline: 2px solid var(--pine-line); outline-offset: 2px; }
.ill-modelpicker-toggle[aria-expanded="true"] {
  background: var(--pine-bg);
  color: var(--pine);
  border-color: var(--pine-line);
}
.ill-modelpicker-toggle svg { display: block; }

.ill-modelpicker-toggle-hint {
  font-size: 0.78rem;
  color: var(--softer);
  font-style: italic;
}

/* Selected-image attribution panel — cost chip. */
.ill-attr-cost {
  display: inline-flex; align-items: baseline; gap: 3px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Toolbar summary — cumulative cost pill. */
.ill-pill-cost {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ═══ Concept-first suggestion panels ═════════════════════════════════ */

/* Concept panel — leads the suggestion controls. Wraps the structured brief
   plus the model/asset-type recommendation. */
.ill-sug-concept {
  background: var(--pine-bg-2);
  border: 1px solid var(--pine-line);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  margin: 0 0 var(--s-3);
}
.ill-sug-concept[data-state="empty"] {
  background: var(--bg);
  border-style: dashed;
  border-color: var(--rule-strong);
}
.ill-sug-concept-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-2);
}
.ill-sug-concept-h {
  margin: 0;
  font-family: var(--f-serif);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--pine);
  letter-spacing: -0.005em;
}
.ill-sug-concept[data-state="empty"] .ill-sug-concept-h { color: var(--soft); }
.ill-sug-concept-empty {
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
  color: var(--soft);
}
.ill-sug-concept-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--s-4);
  row-gap: 5px;
  margin: var(--s-1) 0 var(--s-3);
}
.ill-sug-concept-dl dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--softer);
  padding-top: 2px;
}
.ill-sug-concept-dl dd {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink);
}
.ill-sug-concept-list {
  margin: 0; padding-left: 18px;
  list-style: disc;
}
.ill-sug-concept-list li { font-size: 0.85rem; line-height: 1.4; padding: 1px 0; }

/* Recommendation block inside the concept panel. */
.ill-sug-rec {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed color-mix(in oklab, var(--pine), var(--bg) 60%);
}
.ill-sug-rec-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--softer);
  margin-bottom: var(--s-2);
}
.ill-sug-rec-body {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 6px;
}
.ill-sug-rec-chip {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: .01em;
  background: var(--paper);
  border: 1.5px solid var(--rule-strong);
  color: var(--ink);
}
.ill-sug-rec-chip-model {
  background: var(--pine-bg);
  color: var(--pine);
  border-color: var(--pine);
  font-weight: 700;
}
.ill-sug-rec-chip-model.is-matched::before {
  content: "✓ ";
  font-weight: 700;
}
.ill-sug-rec-chip-asset { color: var(--soft); }
.ill-sug-rec-chip-output { color: var(--softer); font-family: ui-monospace, monospace; font-size: 0.74rem; }
.ill-sug-rec-chip-orient { color: var(--soft); }
.ill-sug-rec-chip.is-mismatch {
  background: color-mix(in oklab, #d97706, var(--bg) 86%);
  border-color: color-mix(in oklab, #d97706, var(--bg) 50%);
  color: #7a3a02;
}
.ill-sug-rec-already {
  font-size: 0.78rem;
  color: var(--pine);
  font-weight: 600;
}
.ill-sug-rec-why {
  margin: var(--s-2) 0 0;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--soft);
  line-height: 1.45;
}
.ill-sug-rec-warn {
  margin: var(--s-2) 0 0;
  font-size: 0.75rem;
  color: #7a3a02;
}
.ill-sug-rec-runners {
  margin-top: var(--s-2);
  font-size: 0.85rem;
}
.ill-sug-rec-runners summary { cursor: pointer; color: var(--soft); padding: 2px 0; }
.ill-sug-rec-runners ul {
  list-style: none; padding-left: 0; margin: var(--s-1) 0 0;
  display: flex; flex-direction: column; gap: 4px;
}
.ill-sug-rec-runners li {
  display: flex; align-items: center; gap: 6px;
}

/* Prompt panel — shown below the model picker. Houses the model-specific
   prompt textarea + crafter reasoning. */
.ill-sug-prompt-panel {
  margin: 0 0 var(--s-3);
}
.ill-sug-prompt-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-1);
  flex-wrap: wrap;
}
.ill-sug-prompt-head-line {
  display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap;
}
.ill-sug-prompt-h {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--soft);
  text-transform: uppercase;
  font-family: var(--f-sans);
}
.ill-sug-prompt-h strong { color: var(--ink); font-weight: 700; text-transform: none; }
.ill-sug-prompt-reasoning {
  margin: 6px 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--soft);
  border-left: 2px solid var(--pine-line);
  padding-left: var(--s-2);
}
.ill-sug-prompt-hint {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--softer);
  font-style: italic;
}

/* ═══ Studio button + panel ═══════════════════════════════════════════ */
.btn-studio {
  background: linear-gradient(135deg, color-mix(in oklab, var(--pine), var(--bg) 40%), color-mix(in oklab, var(--clay), var(--bg) 70%));
  color: var(--paper);
  border: 0;
  display: inline-flex; align-items: center;
  gap: 6px;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  transition: all var(--t-fast);
}
.btn-studio:hover:not(:disabled) {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
.btn-studio svg { display: block; opacity: 0.9; }
.ill-studio-badge {
  padding: 2px 6px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.18);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ill-studio-panel {
  margin-top: var(--s-4);
  padding: 0;
  background: linear-gradient(180deg, var(--pine-bg-2) 0%, var(--paper) 100%);
  border: 1px solid var(--pine-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.ill-studio-summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-3) var(--s-4);
  display: flex; align-items: center; gap: var(--s-2);
  user-select: none;
}
.ill-studio-summary::-webkit-details-marker { display: none; }
.ill-studio-summary-glyph {
  display: inline-block;
  transition: transform var(--t-fast);
  color: var(--pine);
}
.ill-studio-panel[open] .ill-studio-summary-glyph { transform: rotate(90deg); }
.ill-studio-summary strong { color: var(--pine); }

.ill-studio-body {
  padding: var(--s-3) var(--s-4) var(--s-4);
  border-top: 1px solid var(--pine-line);
  background: var(--paper);
  display: flex; flex-direction: column; gap: var(--s-4);
}

/* Brief — structured definition list. */
.ill-studio-brief {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
}
.ill-studio-brief-h {
  margin: 0 0 var(--s-2);
  font-family: var(--f-serif);
  font-size: 0.98rem;
  color: var(--pine);
}
.ill-studio-brief-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--s-4);
  row-gap: 4px;
  margin: 0;
}
.ill-studio-brief-dl dt {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--softer);
  padding-top: 2px;
}
.ill-studio-brief-dl dd {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--ink);
}
.ill-studio-brief-list {
  margin: 0; padding-left: 18px;
  list-style: disc;
}
.ill-studio-brief-list li { font-size: 0.85rem; line-height: 1.4; }

/* Iteration ladder. */
.ill-studio-iters-h {
  margin: 0 0 var(--s-2);
  font-family: var(--f-serif);
  font-size: 0.98rem;
  color: var(--pine);
}
.ill-studio-iters-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: var(--s-3);
}
.ill-studio-iter {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast);
}
@media (max-width: 640px) {
  .ill-studio-iter { grid-template-columns: 1fr; }
}
.ill-studio-iter.is-chosen { border-color: var(--pine); background: var(--pine-bg-2); box-shadow: 0 0 0 1px var(--pine); }
.ill-studio-iter.is-pass:not(.is-chosen) { border-color: color-mix(in oklab, var(--pine), var(--bg) 50%); }
.ill-studio-iter.is-below { border-color: color-mix(in oklab, #d97706, var(--bg) 60%); }
.ill-studio-iter.is-failed { border-color: var(--clay-line); background: var(--clay-bg); }

.ill-studio-iter-thumb {
  position: relative;
  width: 200px; height: 130px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg);
}
.ill-studio-iter-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ill-studio-iter-thumb-empty {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: var(--s-2);
  font-size: 0.75rem; color: var(--clay); text-align: center;
}
.ill-studio-iter-badge {
  position: absolute; top: 6px; left: 6px;
  background: rgba(0,0,0,0.6);
  color: var(--paper);
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--r-pill);
}
.ill-studio-iter-winner {
  position: absolute; top: 6px; right: 6px;
  background: var(--pine);
  color: var(--paper);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
}

.ill-studio-iter-body {
  display: flex; flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}
.ill-studio-iter-score-bar {
  display: flex; align-items: center; gap: var(--s-3);
  flex-wrap: wrap;
}
.ill-studio-iter-total {
  font-family: var(--f-serif);
  font-size: 1.2rem;
  line-height: 1;
}
.ill-studio-iter-total strong { color: var(--ink); font-weight: 700; }
.ill-studio-iter.is-chosen .ill-studio-iter-total strong { color: var(--pine); }
.ill-studio-iter-scores {
  display: inline-flex; gap: 4px; flex-wrap: wrap;
}
.ill-studio-iter-axis {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: .01em;
  border: 1px solid transparent;
  font-family: ui-monospace, "SF Mono", monospace;
}
.ill-studio-iter-axis-good { background: var(--pine-bg); color: var(--pine); border-color: var(--pine-line); }
.ill-studio-iter-axis-mid  { background: var(--bg); color: var(--soft); border-color: var(--rule-strong); }
.ill-studio-iter-axis-bad  { background: color-mix(in oklab, var(--clay), var(--bg) 80%); color: var(--clay); border-color: var(--clay-line); }

.ill-studio-iter-critique {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--soft);
  border-left: 2px solid var(--rule-strong);
  padding-left: var(--s-2);
}
.ill-studio-iter.is-chosen .ill-studio-iter-critique { border-left-color: var(--pine); color: var(--pine); }

.ill-studio-iter-prompt summary { cursor: pointer; padding: 4px 0; }
.ill-studio-iter-prompt pre {
  margin: var(--s-1) 0;
  padding: var(--s-2) var(--s-3);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre-wrap;
  color: var(--ink);
  max-height: 220px;
  overflow: auto;
}

.ill-studio-iter-actions { margin-top: 4px; }
.ill-studio-iter-actions .btn-sm {
  padding: 4px 10px;
  font-size: 0.78rem;
}

.ill-sug-actions {
  display: flex; gap: var(--s-2); flex-wrap: wrap;
  align-items: center;
  margin-top: var(--s-2);
}
.ill-danger { color: var(--clay); }
.ill-danger:hover { background: var(--clay-bg); }

.ill-sug-history {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  font-size: 0.82rem;
}
.ill-sug-history summary {
  cursor: pointer; color: var(--soft); font-weight: 500;
}
.ill-sug-history ul {
  list-style: none; padding-left: 0; margin: var(--s-2) 0 0;
}
.ill-sug-history li { padding: 2px 0; color: var(--soft); }

/* ── Asset-type + orientation badges ──────────────────────────────── */
.ill-asset-badge, .ill-orient-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.4;
  border: 1px solid transparent;
  white-space: nowrap;
}
.ill-asset-image {
  background: color-mix(in oklab, var(--pine), var(--bg) 86%);
  color: var(--pine);
  border-color: var(--pine-line);
}
.ill-asset-infographic {
  background: color-mix(in oklab, var(--clay), var(--bg) 88%);
  color: var(--clay);
  border-color: var(--clay-line);
}
.ill-orient-portrait,
.ill-orient-landscape,
.ill-orient-square {
  background: var(--paper);
  color: var(--soft);
  border-color: var(--rule);
}
.ill-orient-portrait  { color: #5a3a02; border-color: #d1c1a3; background: #fbf5e6; }
.ill-orient-landscape { color: #1f4a5e; border-color: #b8d0d8; background: #eef5f8; }
.ill-orient-square    { color: #4a4a4a; border-color: var(--rule-strong); background: var(--bg); }

/* Smaller variants for row chips. */
.ill-badge-mini { font-size: 0.7rem; padding: 1px 6px; }

/* Placement strategy badge — psychology-of-placement chip. Distinct color
   so it reads as a different axis than asset/orientation/status. */
.ill-strategy-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--pine), var(--bg) 78%);
  color: var(--pine);
  border: 1px solid color-mix(in oklab, var(--pine), transparent 60%);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.ill-strategy-glyph {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
}
.ill-rowchip-strategy {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--pine), var(--paper) 82%);
  color: var(--pine);
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid color-mix(in oklab, var(--pine), transparent 70%);
  white-space: nowrap;
}

/* Anchor preview — the verbatim prose snippet a mid-prose figure splits on. */
.ill-sug-anchor {
  margin: var(--s-2) 0 0;
  padding: var(--s-2) var(--s-3);
  border-left: 3px solid var(--rule-strong);
  background: var(--bg);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 0.83rem;
  line-height: 1.5;
}
.ill-sug-anchor-label {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--softer);
  margin-right: var(--s-2);
}
.ill-sug-anchor-snippet {
  color: var(--ink);
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.45;
}

/* (.ill-rowsug-* superseded by .ill-rowchip-* in the redesigned row layout — see above.) */

/* ── History thumbnail grid ───────────────────────────────────────── */
.ill-history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.ill-history-card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.ill-history-card[data-restorable="false"] { opacity: 0.65; }
.ill-history-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.ill-history-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ill-history-thumb-empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%; padding: var(--s-3);
  color: var(--softer); font-size: 0.78rem; text-align: center;
}
.ill-history-meta {
  padding: var(--s-2) var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-1);
  font-size: 0.78rem;
}
.ill-history-meta-line {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.ill-history-meta-when { font-size: 0.72rem; }
.ill-history-meta-prompt {
  font-style: italic;
  line-height: 1.35;
  max-height: 2.7em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ill-history-actions {
  margin-top: var(--s-1);
}
.ill-history-actions .btn-sm {
  padding: 3px 10px;
  font-size: 0.78rem;
}

/* Prominent attribution line for the selected (live) image. */
.ill-sug-attribution {
  display: flex; align-items: baseline; gap: var(--s-2);
  flex-wrap: wrap;
  padding: var(--s-2) var(--s-3);
  margin: var(--s-2) 0 var(--s-3);
  background: var(--pine-bg-2);
  border-left: 3px solid var(--pine);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 0.85rem;
  line-height: 1.45;
}
.ill-attr-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--softer);
  font-weight: 600;
}
.ill-attr-platform {
  color: var(--pine);
  font-weight: 700;
}
.ill-attr-sep { color: var(--softer); }
.ill-attr-model { color: var(--ink); font-weight: 600; }
.ill-attr-id { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.78rem; }
.ill-attr-dims { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.78rem; }
.ill-attr-when { font-size: 0.78rem; }

/* Pass groupings inside a lesson's detail panel. */
.ill-pass-group { margin-bottom: var(--s-5); }
.ill-pass-group:last-child { margin-bottom: 0; }
.ill-pass-group + .ill-pass-group { border-top: 1px dashed var(--rule-strong); padding-top: var(--s-4); }
.ill-pass-h {
  font-family: var(--f-serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--pine);
  margin: 0 0 var(--s-3);
  letter-spacing: .01em;
}
.ill-pass-group[data-pass="detailed"] .ill-pass-h { color: #6b4419; }

/* ─── Coupons / campaigns / access-code tabs ────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.badge-ok    { background: rgba(31,78,61,0.12); color: var(--pine, #1F4E3D); }
.badge-warn  { background: rgba(124,45,18,0.10); color: #7c2d12; }

/* Two-column form layout used by the discount + grant modals. */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2) var(--s-3);
  margin: var(--s-3) 0;
}
.form-grid > label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  color: var(--soft, #555);
}
.form-grid > label.checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.form-grid > label.checkbox input { margin: 0; }
.form-grid input[type="text"],
.form-grid input[type="number"],
.form-grid input[type="datetime-local"],
.form-grid select,
.form-grid textarea {
  font-size: 0.95rem;
  padding: 6px 8px;
  border: 1px solid var(--c-rule, #d4cfc1);
  border-radius: 4px;
  background: var(--c-bg, #fff);
  color: var(--ink, #1a1a1a);
}
.form-grid textarea { resize: vertical; min-height: 60px; font-family: inherit; }
@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* Reveal block for one-shot access code + PIN. */
.reveal-block {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  background: rgba(31,78,61,0.04);
  border: 1px dashed var(--pine, #1F4E3D);
  border-radius: var(--r-sm, 6px);
  padding: var(--s-3);
  margin: var(--s-3) 0;
}
.reveal-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.reveal-row code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 4px 10px;
  background: var(--c-bg, #fff);
  border: 1px solid var(--c-rule, #d4cfc1);
  border-radius: 4px;
  letter-spacing: .08em;
}
.reveal-row .meta {
  min-width: 100px;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: .08em;
}

/* ─── Detailed-generate confirm modal — facts grid ───────────────────── */
.subscribe-disclose-facts {
  margin: 0 0 var(--s-3, 16px);
  padding: 14px 16px;
  background: color-mix(in oklab, var(--c-pine, #1F4E3D), var(--c-bg, #fff) 92%);
  border-radius: 6px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
  font-size: 0.9rem;
}
.subscribe-disclose-facts div { display: contents; }
.subscribe-disclose-facts dt {
  font-weight: 600;
  color: var(--c-pine, #1F4E3D);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  align-self: baseline;
}
.subscribe-disclose-facts dd { margin: 0; }
.subscribe-disclose-facts dd code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85rem;
  background: var(--c-bg, #fff);
  padding: 1px 6px;
  border-radius: 3px;
}