/* ------------------------------------------------------------------------- *
   Type — music-first single-page report
   Fonts: Space Grotesk (display, geometric sans), Inter (body),
          JetBrains Mono (code/nums). The display family used to be
          Fraunces (an editorial serif) but it kept reading "reading
          app" / "Anthropic blog" rather than "music app", so we
          swapped the whole display layer to a geometric sans with
          poster weight.
 * ------------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Two-color palette, type in white.
     Black + red. The red was previously #C8403B (an editorial brick
     red); pushed to a hotter, more saturated value so the UI reads
     loud, not calm. --accent-hot for the moments that should sting;
     --accent-deep for blood-red backgrounds; --accent-soft for the
     "secondary" badge background. */
  --bg: #000000;
  --paper: #141414;     /* cards, lifted just enough from pure black to read */
  --ink: #FFFFFF;
  --ink-soft: #D6D6D6;
  --ink-faint: #8A8A8A;
  --rule: #2A2A2A;
  --rule-strong: #3A3A3A;
  --accent: #E5251D;
  --accent-hot: #FF2D1F;
  --accent-deep: #8C1A14;
  --accent-soft: #2E0F0D;

  --max-w: 720px;
  --max-w-wide: 980px;
  --pad: clamp(1.25rem, 3vw, 2rem);
}

::selection {
  background: var(--accent);
  color: white;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-feature-settings: 'ss01', 'ss02', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  line-height: 1.55;
}

main {
  flex: 1;
  width: 100%;
}

a {
  color: var(--accent);
  text-decoration: none;
  /* Was 35% opacity — link underlines used to whisper. Solid underline
     by default so links carry visible weight; hover bumps to --accent-hot. */
  border-bottom: 1px solid var(--accent);
  transition: color 120ms ease, border-color 120ms ease;
}
a:hover { color: var(--accent-hot); border-bottom-color: var(--accent-hot); }

/* ---------- masthead ---------- */

.masthead {
  padding: 1.5rem var(--pad) 0;
  max-width: var(--max-w-wide);
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.8rem;
  border-bottom: none;
}
.brand:hover { border-bottom: none; }

/* ---------- proxy chip ---------- */

.proxy-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
  transition: border-color 160ms ease, background 160ms ease;
  flex-shrink: 0;
}
.proxy-chip:hover { border-color: var(--accent); }

.proxy-chip-label {
  text-transform: uppercase;
  font-size: 0.66rem;
  color: var(--ink-faint);
}

.proxy-chip-state {
  color: var(--ink);
  text-transform: lowercase;
  font-weight: 500;
}

.proxy-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex-shrink: 0;
}
.proxy-dot-ready    { background: #6ECF7F; box-shadow: 0 0 6px rgba(110,207,127,0.5); }
.proxy-dot-warning  { background: #F7C44C; box-shadow: 0 0 6px rgba(247,196,76,0.45); }
.proxy-dot-offline  { background: var(--accent); box-shadow: 0 0 6px rgba(200,64,59,0.45); }
.proxy-dot-checking {
  background: var(--ink-faint);
  animation: proxy-pulse 1.2s ease-in-out infinite;
}
@keyframes proxy-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ---------- proxy tray (drops below the chip when chip is clicked) ---------- */

.proxy-tray {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: var(--pad);
  z-index: 30;
  width: 320px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.9rem 1rem;
  box-shadow: 0 18px 40px rgba(0,0,0,0.4);
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
}

.proxy-tray-row {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--rule);
}
.proxy-tray-row:last-of-type { border-bottom: none; }

.proxy-tray-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.proxy-tray-error { color: var(--accent); text-align: right; flex: 1; }

.proxy-tray-actions {
  display: flex;
  gap: 0.5rem;
  margin: 0.7rem 0 0.6rem;
}

.proxy-action {
  flex: 1;
  background: var(--accent);
  color: white;
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 0.45rem 0.7rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 160ms ease;
}
.proxy-action:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 88%, black);
}
.proxy-action:disabled { opacity: 0.5; cursor: not-allowed; }

.proxy-action-ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--rule);
  flex: 0 0 auto;
}
.proxy-action-ghost:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
}

.proxy-tray-log {
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.7rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--ink-soft);
  max-height: 140px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.brand-mark {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  /* Space Grotesk caps at 700 in the standard Google Fonts package;
     the previous 900 was Fraunces-only. */
  font-weight: 700;
  font-size: 1.9rem;
  letter-spacing: -0.045em;
  color: var(--ink);
  /* Red period after the wordmark gives the brand a stamp-like presence. */
  position: relative;
}
.brand-mark::after {
  content: ".";
  color: var(--accent);
  margin-left: 0.05em;
}

.brand-tagline {
  /* Was italic Fraunces — read as a literary subtitle. Now small-caps
     Inter with caps tracking, like a flyer/poster tagline. */
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}

/* ---------- hero ---------- */

.report,
.empty {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 2.5rem var(--pad) 5rem;
}

.hero {
  max-width: var(--max-w);
  margin: 3.5rem auto 4.5rem;
  padding-bottom: 2.5rem;
  /* Was a 1px ink rule. Thick blood-red rule under the hero — the
     page begins with a strike. */
  border-bottom: 3px solid var(--accent);
  position: relative;
}

.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

/* Back-to-dashboard link at the top of the report hero.
   `display: flex` + `width: fit-content` makes it block-level (sits
   on its own line above the eyebrow) while still hugging its content
   horizontally. */
.back-link {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: none;
  margin: 0 0 1.4rem;
  transition: color 140ms ease, transform 140ms ease;
}
.back-link:hover {
  color: var(--accent);
  border-bottom: none;
  transform: translateX(-2px);
}
.back-link-arrow {
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
}
@media print {
  .back-link { display: none; }
}
.eyebrow-mark { color: var(--accent); }
.eyebrow-dot { opacity: 0.4; }
.eyebrow-date {}

.display {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  /* Space Grotesk caps at 700; tighter tracking + size bump compensates
     for the lighter weight visually. */
  font-weight: 700;
  font-size: clamp(2.6rem, 5.8vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: var(--ink);
  margin: 0 0 1.5rem;
  text-transform: none;
}

.hero-name {
  /* Was italic + accent. Space Grotesk has no italic; rely on color
     alone — the hot red already gives the name visible weight against
     the white display. */
  font-weight: 700;
  color: var(--accent);
}

.hero-scope {
  /* Was italic Fraunces — a literary subtitle. Now Inter at a small
     uppercase-tracked size; reads as a metadata strip, like a vinyl
     credit. */
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
}

/* ---------- sections ---------- */

.section {
  max-width: var(--max-w);
  margin: 0 auto 4.5rem;
}

.section.themes,
.section.recs,
.section.meta,
.section.usage {
  max-width: var(--max-w-wide);
}

.section-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  /* Was 500 — pushed to 700 so section headings shout. */
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 2rem;
  padding-bottom: 0.7rem;
  padding-left: 1.2rem;
  /* Left accent bar — every section title gets a red mark.
     Bottom is a thicker red rule for structural punch. */
  border-bottom: 2px solid var(--accent);
  border-left: 5px solid var(--accent);
  line-height: 1.05;
}

.block-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.7rem;
}

/* ---------- identity ---------- */

.identity-body {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.3rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

/* ---------- themes ---------- */

.theme-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.75rem;
}

.theme {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 1.6rem 1.6rem 1.35rem 2.1rem;
  position: relative;
  overflow: hidden;
  transition: border-color 200ms ease, transform 200ms ease;
}
.theme:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--rule));
  transform: translateY(-2px);
}

/* Stacked album thumbnails in the corner — like a record stack */
.theme-thumbs {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  display: flex;
  gap: -8px;
}
.theme-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border: 1px solid var(--bg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  margin-left: -10px;
  background: var(--rule);
  transition: transform 200ms ease;
}
.theme-thumb:first-child { margin-left: 0; }
.theme-thumb:hover { transform: translateY(-2px); z-index: 10; }
.theme:hover .theme-thumb { transform: rotate(-2deg); }
.theme:hover .theme-thumb:nth-child(2) { transform: rotate(1deg); }
.theme:hover .theme-thumb:nth-child(3) { transform: rotate(3deg); }

/* Left accent stripe whose weight maps to the theme's dominance.
   Dominant themes now also get a top accent bar so they read as
   "this is the headline theme" at a glance. */
.theme::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--ink-faint);
  opacity: 0.3;
  transition: opacity 200ms ease;
}
.theme.theme-dominant::before  { background: var(--accent); opacity: 1; width: 8px; box-shadow: 4px 0 12px rgba(229,37,29,0.25); }
.theme.theme-secondary::before { background: var(--accent); opacity: 0.7; }
.theme.theme-occasional::before { background: var(--ink-faint); opacity: 0.35; }

.theme-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
  /* Reserve the top-right corner for the album thumb stack so the badge
     and title never overlap with it. 3 thumbs at 44px with -10px overlap
     plus the 1.2rem container padding need ~7rem of clearance. */
  padding-right: 7.5rem;
  min-height: 3.2rem;
}

.theme-name {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1.45rem;
  letter-spacing: -0.012em;
  margin: 0;
  line-height: 1.18;
  color: var(--ink);
}

.theme-weight {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  flex-shrink: 0;
  border: 1px solid transparent;
}
.weight-dominant   { background: var(--accent); color: white; }
.weight-secondary  { background: transparent; color: var(--accent); border-color: var(--accent); }
.weight-occasional { background: transparent; color: var(--ink-faint); border-color: var(--rule); }

.theme-desc {
  font-size: 0.98rem;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
  line-height: 1.55;
}

.theme-meta {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 0.95rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule);
}
.theme-meta dt {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  align-self: baseline;
}
.theme-meta dd {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

/* ---------- model ---------- */

.model-block {
  margin-bottom: 1.75rem;
}
.model-block p,
.model-block .bullets {
  margin: 0;
  font-size: 1.02rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

.bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}
.bullets li {
  padding: 0.5rem 0 0.5rem 1.4rem;
  position: relative;
  border-top: 1px solid var(--rule);
}
.bullets li:first-child { border-top: none; }
.bullets li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-family: 'Space Grotesk', 'Inter', sans-serif;
}

/* ---------- hidden patterns ---------- */

.hidden-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: hidden;
}
.hidden-list li {
  counter-increment: hidden;
  padding: 1.1rem 0 1.1rem 3rem;
  position: relative;
  border-top: 1px solid var(--rule);
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--ink);
  font-style: italic;
}
.hidden-list li:first-child { border-top: none; }
.hidden-list li::before {
  content: counter(hidden, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.15rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--accent);
  font-style: normal;
  letter-spacing: 0.05em;
}

/* ---------- gap insights ---------- */

.section-lede {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-style: italic;
  font-size: 1.02rem;
  color: var(--ink-faint);
  margin: -1rem 0 1.8rem;
  line-height: 1.5;
}

.insight.gap .gap-belief,
.insight.gap .gap-behavior {
  margin: 0 0 0.45rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.insight.gap .gap-belief {
  color: var(--ink-faint);
  font-style: italic;
}

.gap-label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-block;
  margin-right: 0.4rem;
  font-style: normal;
}

/* ---------- insights ---------- */

.insight-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: insight;
}
.insight {
  counter-increment: insight;
  padding: 1.5rem 0 1.5rem 3.5rem;
  position: relative;
  border-top: 1px solid var(--rule);
}
.insight:first-child { border-top: none; padding-top: 0; }
.insight::before {
  content: counter(insight, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  color: var(--accent);
  letter-spacing: 0.05em;
}
.insight:first-child::before { top: 0; }

.insight-headline {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 0.7rem;
  color: var(--ink);
}
.insight-evidence {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0 0 0.6rem;
  line-height: 1.55;
}
.insight-why {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-faint);
  margin: 0;
  line-height: 1.5;
}

/* ---------- recommendations ---------- */

.rec-group { margin-bottom: 3rem; }

.rec-group-head { margin-bottom: 1.25rem; }
.rec-group-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1.4rem;
  margin: 0 0 0.3rem;
  letter-spacing: -0.01em;
}
.rec-group-sub {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-faint);
  margin: 0;
}

.rec-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}

.rec {
  background: var(--paper);
  border: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0;
  align-items: stretch;
  transition: border-color 200ms ease, transform 200ms ease;
  overflow: hidden;
}
.rec:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--rule));
  transform: translateY(-2px);
}

.rec-cover {
  position: relative;
  display: block;
  width: 140px;
  height: 140px;
  background: var(--rule);
  overflow: hidden;
  border-bottom: none;
  flex-shrink: 0;
}
.rec-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95);
  transition: transform 300ms ease, filter 300ms ease;
}
.rec-cover:hover img { transform: scale(1.04); filter: saturate(1.1); }
.rec-cover-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 3rem;
  font-weight: 600;
  color: var(--ink-faint);
  background: var(--paper);
}

.rec-play-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  background: var(--accent);
  border-radius: 50%;
  color: white;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 200ms ease, transform 200ms ease;
  padding-left: 2px;  /* optical centering of the triangle */
}
.rec:hover .rec-play-icon { opacity: 1; transform: translateY(0); }

.rec-body {
  padding: 1rem 1.2rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;  /* allow text truncation in grid */
}

.rec-head { display: flex; flex-direction: column; gap: 0.2rem; }
.rec-artist {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.18rem;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--ink);
  border-bottom: none;
}
.rec-artist:hover { color: var(--accent); }
.rec-track {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-style: italic;
}
.rec-genres {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  text-transform: lowercase;
  margin-top: 0.1rem;
}

.rec-why, .rec-listen {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.rec-label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.1rem;
}

/* ---------- rec provenance badge + feedback buttons ---------- */

.rec-prov {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  margin-top: 0.15rem;
  border-radius: 2px;
  color: var(--paper);
}
.rec-prov-sem  { background: #4a6fa5; }     /* semantic — cool blue */
.rec-prov-tim  { background: #c25450; }     /* timbral — warm red */
.rec-prov-both { background: #5a8a5a; }     /* both — green */
.rec-prov-off_pool {
  background: transparent;
  color: var(--ink-faint);
  border: 1px solid var(--rule);
}

.rec-feedback {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--rule);
}
.rec-fb {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  padding: 0;
}
.rec-fb:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.rec-fb.is-active {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
.rec-fb-status {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  color: var(--ink-faint);
  margin-left: 0.4rem;
}

/* ---------- agent mode (pattern recognition) ---------- */

.agent-cost-note {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-top: 0.6rem;
  font-style: italic;
}

.agent-context {
  margin-top: 2.5rem;
}
.agent-context-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.agent-context-cell {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 0.9rem 1rem;
}
.agent-context-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 0.5rem;
}
.agent-context-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.agent-context-list li {
  margin-bottom: 0.2rem;
}
.agent-context-dim {
  color: var(--ink-faint);
  font-size: 0.78rem;
}

.agent-batches { margin-top: 2.5rem; }

.agent-batch-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: agent-batches;
}

.agent-batch {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.agent-batch:first-child { border-top: none; padding-top: 0; }

.agent-batch-head {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.agent-batch-num {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  flex-shrink: 0;
  line-height: 1.2;
}
.agent-batch-head-body {
  flex: 1;
}
.agent-batch-name {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1.35rem;
  margin: 0 0 0.3rem;
  letter-spacing: -0.01em;
}
.agent-batch-reason {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 0.55rem;
  line-height: 1.5;
}

.agent-batch-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  align-items: baseline;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  color: var(--ink-faint);
}
.agent-strategy {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  padding: 0.18rem 0.5rem;
  border-radius: 2px;
  background: var(--rule);
  color: var(--ink);
}
.agent-strategy-co_listen      { background: #d6d6e8; color: #2c2c4a; }
.agent-strategy-timbral        { background: #f0c5a8; color: #5c2a0a; }
.agent-strategy-semantic       { background: #c5d9f0; color: #1c3a5e; }
.agent-strategy-theme_anchored { background: #d4e6c4; color: #2e4a1e; }
.agent-strategy-cycle_complement { background: #e8c5d6; color: #4a1c30; }
.agent-strategy-lineage_latent { background: #ebe2c4; color: #5a4a1c; }
.agent-strategy-cross_genre_function { background: #c4e6e6; color: #1c4a4a; }
.agent-strategy-vocal_posture  { background: #e6c4e0; color: #4a1c44; }
.agent-strategy-structural_arc { background: #d6c4e8; color: #2c1c5a; }
.agent-strategy-user_library_recall { background: #f0e4a8; color: #5c4a0a; }

.agent-strategy-params code {
  background: transparent;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--ink-soft);
}
.agent-strategy-pool {
  color: var(--ink-faint);
}

.agent-pick-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0.7rem;
  margin-top: 0.3rem;
}
.agent-pick {
  padding: 0.85rem 1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.agent-pick-head {
  margin-bottom: 0.35rem;
}
.agent-pick-name {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.98rem;
}
.agent-pick-why, .agent-pick-listen {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.agent-batch-empty {
  font-size: 0.85rem;
  color: var(--ink-faint);
  font-style: italic;
  margin: 0;
}

.agent-unmatched {
  margin-top: 2rem;
}
.agent-unmatched-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.agent-unmatched-list li {
  padding: 0.7rem 0.9rem;
  background: var(--paper);
  border: 1px dashed var(--rule);
}
.agent-unmatched-name {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  margin-right: 0.6rem;
}
.agent-unmatched-reason {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* ---------- explore mode ---------- */

.explore-form-section { margin-top: 2rem; }
.explore-form { display: flex; flex-direction: column; gap: 0.5rem; }
.explore-label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}
.explore-hint {
  font-weight: 400;
  color: var(--ink-faint);
  font-size: 0.82rem;
  margin-left: 0.6rem;
}
.explore-input-row {
  display: flex;
  gap: 0.7rem;
}
.explore-input-row input {
  flex: 1;
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.explore-input-row input:focus {
  outline: none;
  border-color: var(--accent);
}
.explore-submit {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  padding: 0.65rem 1.5rem;
  background: var(--accent);
  color: var(--paper);
  border: none;
  cursor: pointer;
  font-size: 1rem;
}
.explore-submit:hover { filter: brightness(1.1); }
.explore-submit:disabled { opacity: 0.6; cursor: wait; }
.explore-progress {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin: 0.5rem 0 0;
  min-height: 1.2em;
}
.explore-progress-active {
  color: var(--accent);
  font-style: italic;
}


/* ---------- search results list (Explore + Agent pick step) ---------- */

.search-results {
  margin-top: 1.4rem;
}

.search-results-prompt {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.7rem;
}

.search-results-empty {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--ink-faint);
  margin: 0.5rem 0 0;
}

.search-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.6rem;
}

.search-result {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: baseline;
  gap: 0.2rem 0.7rem;
  text-align: left;
  padding: 0.85rem 1rem;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--rule-strong);
  border-left: 4px solid var(--rule-strong);
  border-radius: 2px;
  cursor: pointer;
  font: inherit;
  transition: border-color 140ms ease, background 140ms ease,
              transform 140ms ease, opacity 200ms ease;
}
.search-result:hover:not(:disabled) {
  border-color: var(--accent);
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--paper));
  transform: translateY(-1px);
}
.search-result:disabled { cursor: default; }

.search-result-title {
  grid-column: 1;
  grid-row: 1;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.012em;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-result-artist {
  grid-column: 1;
  grid-row: 2;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-result-listeners {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* States once the user has clicked a card */
.search-result-picked {
  border-color: var(--accent) !important;
  border-left-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 14%, var(--paper)) !important;
  transform: none;
}
.search-result-faded {
  opacity: 0.35;
  transform: none;
}


/* ---------- agent stage tracker (live progress UI) ---------- */

.stage-tracker {
  margin-top: 1.6rem;
  padding: 1.1rem 1.2rem;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-left: 4px solid var(--accent);
  border-radius: 2px;
}

.stage-tracker-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.stage-tracker-eyebrow {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.stage-tracker-elapsed {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--ink-faint);
}

/* Vertical stack of stages, each with a state dot on the left */
.stage-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.stage {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 0.7rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  color: var(--ink-soft);
  transition: color 200ms ease;
}

.stage-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rule-strong);
  border: 2px solid var(--rule-strong);
  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.stage-pending .stage-dot { background: transparent; }
.stage-pending { color: var(--ink-faint); }

.stage-active .stage-dot {
  background: var(--accent);
  border-color: var(--accent);
  animation: stage-pulse 1.1s ease-in-out infinite;
}
.stage-active { color: var(--ink); font-weight: 500; }

.stage-done .stage-dot {
  background: #6ECF7F;
  border-color: #6ECF7F;
}
.stage-done { color: var(--ink-soft); }

@keyframes stage-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229,37,29,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(229,37,29,0); }
}

.stage-detail {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--ink-faint);
}

/* Per-hypothesis dot grid (revealed when fulfill starts) */
.batch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.7rem 0 0;
  padding-left: 26px; /* align with stage labels */
}

.batch-dot {
  width: 18px;
  height: 18px;
  border-radius: 2px;
  border: 1.5px solid var(--rule-strong);
  background: transparent;
  transition: background 250ms ease, border-color 250ms ease, transform 200ms ease;
}

.batch-dot-pending {
  /* Subtle breathing animation to signal that work is happening on all
     parallel hypotheses even before any has completed. */
  animation: batch-breathing 1.6s ease-in-out infinite;
}

.batch-dot-done {
  background: var(--accent);
  border-color: var(--accent);
  animation: none;
  transform: scale(1.05);
}

@keyframes batch-breathing {
  0%, 100% { border-color: var(--rule-strong); }
  50%      { border-color: var(--accent); }
}

.batch-counter {
  margin-top: 0.6rem;
  padding-left: 26px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.stage-error {
  margin-top: 0.8rem;
  padding: 0.6rem 0.8rem;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  font-family: 'Inter', sans-serif;
  font-size: 0.86rem;
  color: var(--accent);
}


/* ---------- agent pick confidence chips ---------- */

.agent-pick-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.agent-pick-confidence {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.12rem 0.5rem;
  border-radius: 2px;
  border: 1px solid currentColor;
  flex-shrink: 0;
}

.agent-pick-confidence-high {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent);
  color: white;
}

.agent-pick-confidence-medium {
  color: var(--accent);
  background: transparent;
}

.agent-pick-confidence-speculative {
  color: var(--ink-faint);
  background: transparent;
}

.agent-pick-unverified {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: var(--accent);
  padding: 0.12rem 0.4rem;
  border: 1px dashed var(--accent);
  border-radius: 2px;
}


/* ---------- hypothesis grounding chips (Phase A) ---------- */

.agent-grounding {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.12rem 0.5rem;
  border-radius: 2px;
  flex-shrink: 0;
  cursor: help;
}
.agent-grounding-grounded {
  background: color-mix(in srgb, #6ECF7F 30%, var(--paper));
  color: #6ECF7F;
  border: 1px solid #6ECF7F;
}
.agent-grounding-speculative {
  background: transparent;
  color: var(--ink-faint);
  border: 1px solid var(--ink-faint);
}
.agent-grounding-ungrounded {
  background: transparent;
  color: var(--accent);
  border: 1px dashed var(--accent);
}


/* ---------- convergent picks section (Phase A) ---------- */

.agent-convergent {
  /* Frame this section so it visually leads — these are the
     highest-confidence picks. Thick accent rule + extra padding. */
  padding-left: 1.4rem;
  border-left: 4px solid var(--accent);
  margin-bottom: 2.4rem;
}

.convergent-list {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
  display: grid;
  gap: 0.9rem;
}

.convergent-pick {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1rem;
  padding: 0.9rem 1rem;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
}

.convergent-cover {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 2px;
}

.convergent-cover-placeholder {
  width: 80px;
  height: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rule-strong);
  color: var(--ink-soft);
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  border-radius: 2px;
}

.convergent-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.convergent-head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.convergent-name {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 140ms ease;
}
.convergent-name:hover {
  border-bottom-color: var(--accent);
}

.convergence-badge {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.14rem 0.55rem;
  border-radius: 2px;
  background: var(--accent);
  color: white;
}

.convergent-why {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.45;
}

.convergent-sources {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin: 0;
}
.convergent-source {
  color: var(--ink-soft);
}


/* ---------- feedback buttons on agent picks (Phase B) ---------- */

.agent-pick-feedback {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--rule);
}

.feedback-btn {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
  background: transparent;
  color: var(--ink-faint);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease,
              transform 140ms ease;
}
.feedback-btn:hover:not(:disabled) {
  color: var(--ink);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.feedback-btn:disabled { opacity: 0.6; cursor: wait; }

.feedback-btn.feedback-btn-active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.feedback-btn-active:hover:not(:disabled) {
  background: var(--accent-hot);
  border-color: var(--accent-hot);
  color: white;
  transform: none;
}

/* Tweak per-action hover colors so the meaning is obvious. */
.feedback-play:hover:not(:disabled) { color: #6ECF7F; border-color: #6ECF7F; }
.feedback-save:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.feedback-skip:hover:not(:disabled) { color: var(--ink-faint); border-color: var(--ink-faint); }
.feedback-no:hover:not(:disabled)   { color: var(--accent); border-color: var(--accent); }


/* ---------- sonic signature block (C → B audio analysis) ---------- */

.signature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.signature-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem 1rem;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
}

.signature-stat-wide { grid-column: 1 / -1; }

.signature-label {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.signature-value {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.05;
}

.signature-value small {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-left: 0.15rem;
}

.signature-mode-label {
  margin-left: 0.4rem;
  font-family: 'Inter', sans-serif;
  text-transform: lowercase;
  letter-spacing: 0;
  font-size: 0.78rem !important;
  color: var(--ink-faint) !important;
}

.signature-detail {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--ink-faint);
  margin-top: 0.1rem;
}

.signature-key {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.95rem;
  color: var(--accent);
  margin-right: 0.15rem;
}


/* ---------- ingest quality (banner + section) — B+ ingestion move ---------- */

.ingest-banner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 1.5rem 0 2.5rem;
  padding: 1.1rem 1.3rem;
  background: var(--paper);
  border: 1px solid var(--accent);
  border-left: 4px solid var(--accent);
  border-radius: 2px;
}

.ingest-banner-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  background: var(--accent);
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  border-radius: 50%;
}

.ingest-banner-body { flex: 1 1 auto; }

.ingest-banner-title {
  margin: 0 0 0.25rem;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.ingest-banner-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.ingest-banner-link {
  margin-left: 0.4rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}

.ingest-banner-link:hover { opacity: 0.8; }


.ingest-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin: 1rem 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule-soft);
}

.ingest-summary-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.ingest-label {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.ingest-value {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}

.ingest-grade {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid currentColor;
}

.ingest-grade-thin { color: var(--accent); }
.ingest-grade-ok   { color: var(--ink-soft); }
.ingest-grade-rich { color: #1f7a3a; }


.ingest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.85rem;
  margin: 1.2rem 0 1.6rem;
}

.ingest-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem 0.85rem;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
}

.ingest-stat-bool {
  border-left-color: var(--ink-faint);
}

.ingest-stat-label {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.ingest-stat-value {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.05;
}


.ingest-warnings {
  margin: 1.4rem 0 1.4rem;
  padding: 1rem 1.2rem;
  background: var(--paper);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
}

.ingest-warning-list {
  margin: 0.6rem 0 0;
  padding-left: 1.2rem;
  list-style: square;
}

.ingest-warning-list li {
  margin-bottom: 0.4rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.ingest-warning-list li::marker { color: var(--accent); }


.ingest-semantics {
  margin-top: 1.5rem;
}

.ingest-semantics-list {
  margin: 0.6rem 0 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.4rem;
}

.ingest-semantics-list dt {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 0.2rem;
}

.ingest-semantics-list dd {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}


/* ---------- skipped (negative signal) + when (listening context) ---------- */

.rejected-block { margin-top: 1.3rem; }

.rejected-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.rejected-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule-soft);
}

.rejected-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}

.rejected-name em {
  color: var(--ink-soft);
  font-style: normal;
  font-weight: 500;
}

.rejected-stats {
  display: inline-flex;
  align-items: baseline;
  gap: 0.85rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.rejected-rate {
  font-weight: 700;
  color: var(--accent);
}

.rejected-bail {
  padding: 0.05rem 0.35rem;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  color: var(--ink-faint);
}


.when-distribution {
  margin: 1rem 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.when-bar-row {
  display: grid;
  grid-template-columns: 7.5rem 1fr 2.5rem;
  align-items: center;
  gap: 0.6rem;
}

.when-bar-label {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.when-bar {
  position: relative;
  height: 0.6rem;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 1px;
  overflow: hidden;
}

.when-bar-fill {
  display: block;
  height: 100%;
  background: var(--accent);
}

.when-bar-pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}


.when-artists { margin-top: 1.6rem; }

.when-artist-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.when-artist-list li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule-soft);
}

.when-artist-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}

.when-artist-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--accent);
}

.when-artist-plays {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--ink-faint);
}


/* ---------- audio signature A-grade: pockets + outliers ---------- */

.pocket-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
  margin-top: 1.2rem;
}

.pocket {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.1rem 1.2rem;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-left: 4px solid var(--accent);
  border-radius: 2px;
}

.pocket-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.pocket-rank {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent);
}

.pocket-label {
  flex: 1 1 auto;
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: lowercase;
}

.pocket-share {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--ink-faint);
  white-space: nowrap;
}

.pocket-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.45rem 1rem;
  margin: 0;
}

.pocket-stats > div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.pocket-stats dt {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.pocket-stats dd {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
}

.pocket-examples {
  list-style: none;
  margin: 0.4rem 0 0;
  padding-top: 0.7rem;
  padding-left: 0;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.pocket-examples li {
  font-size: 0.85rem;
  line-height: 1.35;
}

.pocket-track {
  font-weight: 600;
  color: var(--ink);
}

.pocket-artist {
  color: var(--ink-soft);
}


.outlier-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-top: 1.3rem;
}

.outlier-col {
  display: flex;
  flex-direction: column;
}

.outlier-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.outlier-list li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule-soft);
}

.outlier-track {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink);
}

.outlier-track em {
  font-style: normal;
  color: var(--ink-soft);
  font-weight: 500;
}

.outlier-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--ink-faint);
}

.outlier-dist {
  font-weight: 700;
  color: var(--accent);
}

.outlier-dist-center {
  color: var(--ink-soft);
}

.outlier-coverage {
  margin: 1.4rem 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--ink-faint);
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule-soft);
}

/* Lower-confidence picks fade slightly so the high-confidence ones
   read as primary. Subtle — not invisible, just deprioritized. */
.agent-pick-speculative {
  opacity: 0.75;
}


/* ---------- mode toggle on /analyze ---------- */

.mode-toggle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5rem;
  margin: 0 0 1.1rem;
}

.mode-option {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: left;
  padding: 0.8rem 1rem;
  background: var(--paper);
  color: var(--ink-soft);
  border: 2px solid var(--rule-strong);
  border-radius: 2px;
  cursor: pointer;
  font: inherit;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.mode-option:hover:not(.mode-option-active) {
  border-color: var(--accent);
  color: var(--ink);
}
.mode-option-label {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.012em;
}
.mode-option-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--ink-faint);
}
.mode-option-active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.mode-option-active .mode-option-label { color: white; }
.mode-option-active .mode-option-sub { color: color-mix(in srgb, white 80%, var(--accent)); }


/* ---------- past-analyses mode badge ---------- */

.past-mode {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  margin-right: 0.4rem;
  border-radius: 2px;
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  vertical-align: middle;
}
.past-mode-explore {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.past-mode-agent {
  background: var(--accent);
  color: white;
  border: 1px solid var(--accent);
}


/* ---------- delete / bin button on report + analysis cards ---------- */

/* Bin button positioned absolutely in the top-right corner of any card.
   Default state: muted ink-faint outline + grey glyph, so it doesn't
   compete with the card content. Hover: accent-red wash + white glyph.
   The card containers (.report-card, .past-explore) must be position-
   relative so the absolute positioning anchors to them. */

.report-card,
.past-explore {
  position: relative;
}

/* Make sure the card's primary link doesn't fight the bin button.
   The button sits 0.55rem from the top/right; the link's right
   padding leaves a clear 2.4rem gutter so titles never run under it. */
.report-card .report-card-link { padding-right: 2.8rem; }
.past-explore .past-explore-link { padding-right: 2.8rem; }

.card-delete {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  width: 1.85rem;
  height: 1.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  color: var(--ink-faint);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  cursor: pointer;
  z-index: 2;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.card-delete svg {
  width: 0.95rem;
  height: 0.95rem;
  display: block;
}
.card-delete:hover:not(:disabled) {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: scale(1.05);
}
.card-delete:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* The past-analyses rows are a bit tighter than the report cards;
   nudge the bin button slightly so it doesn't crowd the row's content. */
.card-delete-inline {
  top: 0.4rem;
  right: 0.4rem;
}

.past-explore-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.6rem;
}
.past-explore a {
  display: flex;
  flex-direction: column;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  transition: border-color 150ms ease;
}
.past-explore a:hover {
  border-color: var(--accent);
}
.past-explore-name {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
}
.past-explore-tags {
  font-size: 0.72rem;
  color: var(--ink-faint);
  margin-top: 0.15rem;
}

.explore-seed-title {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.7em;
}
.explore-feats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.explore-feat b {
  color: var(--ink);
  font-weight: 600;
}

.explore-batch { margin-top: 2.5rem; }
.explore-batch-ai .section-title::before {
  content: "⟡  ";
  color: var(--accent);
}
.explore-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.explore-pick {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.explore-pick-name {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
}
.explore-pick-meta {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: var(--ink-faint);
  text-align: right;
}
.explore-pick-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.explore-ai-pick {
  padding: 1rem 1.1rem;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.explore-ai-head {
  margin-bottom: 0.4rem;
}
.explore-ai-name {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
}
.explore-ai-why, .explore-ai-listen {
  margin: 0.3rem 0 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ---------- sonic signature (audio-derived) ---------- */

.sonic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin: 1rem 0 2rem;
}
.sonic-cell {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.sonic-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sonic-value {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.sonic-stdev {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: var(--ink-faint);
}

.sonic-subhead { margin-top: 2rem; }
.sonic-sub-lede {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-style: italic;
  color: var(--ink-faint);
  margin: 0 0 1rem;
}

.sonic-outlier-list, .sonic-disagreement-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sonic-outlier {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.sonic-outlier-cover {
  width: 48px; height: 48px; object-fit: cover;
  flex-shrink: 0;
}
.sonic-outlier-body {
  display: flex; flex-direction: column; gap: 0.15rem;
}
.sonic-outlier-name {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
}
.sonic-outlier-artist {
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.sonic-outlier-meta {
  font-size: 0.72rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.sonic-disagreement {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  display: grid;
  grid-template-columns: 2fr 2fr 1.6fr;
  gap: 0.85rem;
  align-items: baseline;
}
.sonic-disagreement-name {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
}
.sonic-disagreement-artist {
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.sonic-disagreement-meta {
  font-size: 0.72rem;
  color: var(--ink-faint);
  text-align: right;
}
.sonic-skip-note {
  font-size: 0.85rem;
  color: var(--ink-faint);
  font-style: italic;
  margin: 1rem 0;
}

/* ---------- top picks (first thing in the report) ---------- */

.section.top-picks { margin-top: 2.5rem; }

.rec-list-top {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.rec-top { position: relative; }
.rec-top-rank {
  position: absolute;
  top: 0.55rem;
  left: 0.6rem;
  z-index: 2;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--paper);
  background: var(--accent);
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
}

/* ---------- meta (genres, audio fingerprint) ---------- */

.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;
}

/* Genre cloud — pills sized by listening share, like a tag cloud */
.genre-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.6rem;
  align-items: baseline;
  padding-top: 0.3rem;
}
.genre-pill {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: lowercase;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
  white-space: nowrap;
}
.genre-pill:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

/* Audio feature bars stay as-is for now (separate visual concern) */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.feature-list li {
  display: grid;
  grid-template-columns: 1fr 100px 50px;
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--rule);
}
.feature-list li:first-child { border-top: none; }

.feature-name {
  font-size: 0.93rem;
  color: var(--ink-soft);
  font-family: 'Inter', sans-serif;
  text-transform: capitalize;
}

.feature-bar {
  height: 6px;
  background: var(--rule);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.feature-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

.feature-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-align: right;
}

/* ---------- usage ---------- */

.usage-summary {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
  line-height: 1.6;
}
.usage-summary strong {
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-weight: 500;
  color: var(--ink);
}

.usage-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
}
.usage-table th, .usage-table td {
  padding: 0.55rem 0.8rem;
  text-align: left;
  border-bottom: 1px solid var(--rule);
}
.usage-table th {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.usage-table td.num, .usage-table th.num { text-align: right; }

/* ---------- footer ---------- */

footer {
  padding: 2rem var(--pad) 3rem;
  max-width: var(--max-w-wide);
  margin: 0 auto;
  width: 100%;
  font-size: 0.82rem;
  color: var(--ink-faint);
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.footer-dot { opacity: 0.5; }

/* ---------- empty state ---------- */

.empty {
  text-align: left;
  max-width: var(--max-w);
}
.empty .display { margin-top: 4rem; }
.empty-body {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.1rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 1.5rem 0 0.5rem;
}
.empty-cmd {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 0.85rem 1.1rem;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.92rem;
  color: var(--ink);
  margin: 0.5rem 0 1rem;
  overflow-x: auto;
}

/* ---------- run UI (buttons, status, log panel) ---------- */

.hidden { display: none !important; }

.run-panel {
  background: var(--paper);
  /* Thick top accent rule frames the "run the pipeline" panel as
     the primary action on the empty page. */
  border: 1px solid var(--rule-strong);
  border-top: 4px solid var(--accent);
  padding: 1.5rem 1.5rem 1rem;
  margin: 1.5rem 0 1rem;
  border-radius: 2px;
}

.run-panel-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  margin: 0 0 1.1rem;
  letter-spacing: -0.02em;
}

.run-options {
  display: grid;
  gap: 0.75rem;
}

.run-option {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: left;
  background: var(--bg);
  /* Thicker default border + sharper corners. */
  border: 2px solid var(--rule-strong);
  padding: 1.05rem 1.15rem 1.05rem 1.4rem;
  border-radius: 2px;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  position: relative;
  overflow: hidden;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
/* Red bar slides in from the left on hover — gives every option a
   physical "selecting" gesture. */
.run-option::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--accent);
  transform: translateX(-100%);
  transition: transform 160ms ease;
}
.run-option:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg));
  transform: translateY(-1px);
}
.run-option:hover:not(:disabled)::before { transform: translateX(0); }
.run-option:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.run-option-label {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  /* Heavier label so the option title has visual presence. */
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.run-option-sub {
  font-size: 0.85rem;
  color: var(--ink-faint);
  line-height: 1.4;
}
.run-option-sub code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  background: var(--paper);
  padding: 0 0.3rem;
  border-radius: 3px;
}

.run-option-primary {
  background: var(--accent);
  border-color: var(--accent);
}
.run-option-primary::before { transform: translateX(0); background: var(--accent-hot); }
.run-option-primary .run-option-label {
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
}
.run-option-primary .run-option-sub { color: color-mix(in srgb, white 75%, var(--accent)); }
.run-option-primary:hover:not(:disabled) {
  background: var(--accent-hot);
  border-color: var(--accent-hot);
}

.run-interview-link {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-faint);
}

.run-status {
  background: var(--paper);
  /* Thick left red bar marks the running state — the pipeline panel
     reads as live, not optional. */
  border: 1px solid var(--rule-strong);
  border-left: 5px solid var(--accent);
  padding: 1rem 1.2rem;
  margin: 1.5rem 0 0;
  border-radius: 2px;
}

.status-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-faint);
}
.status-dot.status-starting,
.status-dot.status-running {
  background: var(--accent);
  /* Faster, more strobing pulse on running state. Goes to a hotter
     red at peak so the dot feels like it's actively chewing through
     work rather than idling. */
  box-shadow: 0 0 0 0 var(--accent);
  animation: pulse-aggressive 0.9s ease-out infinite;
}
.status-dot.status-done { background: #4a7a3f; }
.status-dot.status-error { background: var(--accent-hot); box-shadow: 0 0 10px var(--accent-hot); }
.status-dot.status-cancelled { background: var(--ink-faint); }
/* status-conflict reuses error dot styling via JS (sets status-error). */

.status-cancel {
  margin-left: 0.6rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border-radius: 2px;
  border: 2px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
  flex-shrink: 0;
}
.status-cancel:hover:not(:disabled) {
  background: var(--accent);
  color: white;
}
.status-cancel:disabled { opacity: 0.6; cursor: wait; }


/* ---------- past reports list (dashboard) ---------- */

.reports-list {
  margin: 4rem 0 0;
}

.reports-list-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 1.4rem;
  padding-bottom: 0.55rem;
  padding-left: 1rem;
  border-bottom: 2px solid var(--accent);
  border-left: 5px solid var(--accent);
  line-height: 1.05;
}

.reports-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.9rem;
}

.report-card {
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-left: 4px solid var(--rule-strong);
  border-radius: 2px;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.report-card:hover {
  border-color: var(--accent);
  border-left-color: var(--accent);
  transform: translateY(-1px);
}

.report-card-link {
  display: block;
  padding: 1rem 1.1rem;
  text-decoration: none;
  border-bottom: none;
  color: var(--ink);
}
.report-card-link:hover { border-bottom: none; color: var(--ink); }

.report-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
}

.report-card-label {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-card-source {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  flex-shrink: 0;
}

.report-card-summary {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 0.7rem;
}

.report-card-dot { color: var(--ink-faint); margin: 0 0.15rem; }

.report-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--ink-faint);
}

.report-card-id {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}

@keyframes pulse-aggressive {
  0%   { box-shadow: 0 0 0 0 rgba(229,37,29,0.7); background: var(--accent-hot); }
  70%  { box-shadow: 0 0 0 8px rgba(229,37,29,0);  background: var(--accent); }
  100% { box-shadow: 0 0 0 0 rgba(229,37,29,0);   background: var(--accent); }
}
/* Keep the old name working in case any caller still references it */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.status-heading {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
}
.status-detail {
  margin-left: auto;
  font-size: 0.82rem;
  color: var(--ink-faint);
  font-style: italic;
}

.status-log {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--ink-soft);
  background: var(--bg);
  padding: 0.7rem 0.9rem;
  border-radius: 3px;
  border: 1px solid var(--rule);
  max-height: 320px;
  overflow-y: auto;
  /* Keep the scroll container's own scroll local to itself; without
     this, scrolling past the top or bottom edge of the log will
     "chain" into the page and yank the whole window. The user's
     report was that the page felt like it was fighting them. */
  overscroll-behavior: contain;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------- hero controls (re-run pill) ---------- */

.hero-controls {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-start;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.rerun-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'Inter', sans-serif;
  /* Was 500/0.8rem/light. Loud uppercase track gets the pill speaking
     at full volume. Default state is already-red so it doesn't have
     to be "discovered". */
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  border: 2px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.rerun-pill:hover:not(:disabled) {
  border-color: var(--accent-hot);
  color: white;
  background: var(--accent-hot);
  transform: translateY(-1px);
}
.rerun-pill:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.rerun-pill-icon {
  display: inline-block;
  font-size: 0.95rem;
  line-height: 1;
  transition: transform 240ms ease;
}
.rerun-pill:hover:not(:disabled) .rerun-pill-icon {
  transform: rotate(180deg);
}

.rerun-pill-ghost {
  background: transparent;
}

/* ---------- interview form ---------- */

.interview {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2.5rem var(--pad) 5rem;
}

.interview-hero {
  margin: 2rem 0 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
}

.interview-form {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-top: 1rem;
}

.iq {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.iq-label {
  display: flex;
  gap: 0.85rem;
  align-items: baseline;
  cursor: text;
}

.iq-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  color: var(--accent);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.iq-prompt {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--ink);
}

.iq-input {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 0.7rem 0.85rem;
  border-radius: 4px;
  resize: vertical;
  min-height: 2.4rem;
  transition: border-color 120ms ease, background 120ms ease;
}
.iq-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
}

.interview-actions {
  margin-top: 1rem;
}

/* ============================================================ *
   ALBUM ART BAND — top albums grid below the hero
 * ============================================================ */

.album-band {
  max-width: var(--max-w-wide);
  margin: 1.5rem auto 4rem;
  padding: 0 var(--pad);
}

.album-band-rule {
  width: 60px;
  height: 2px;
  background: var(--accent);
  margin-bottom: 0.85rem;
}

.album-band-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.25rem;
}

.album-band-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.85rem;
}

.album-tile {
  margin: 0;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--paper);
  cursor: default;
  transition: transform 200ms ease;
}
.album-tile:hover { transform: translateY(-2px); }
.album-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9);
}
.album-tile figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.6rem 0.7rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 65%);
  color: white;
  opacity: 0;
  transition: opacity 200ms ease;
}
.album-tile:hover figcaption { opacity: 1; }
.album-tile-name {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.88rem;
  line-height: 1.18;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.album-tile-artist {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================ *
   TABLE OF CONTENTS — sticky right rail on desktop
 * ============================================================ */

.toc {
  display: none;
}

@media (min-width: 1100px) {
  .toc {
    display: block;
    position: fixed;
    right: clamp(1.5rem, 3vw, 3rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    pointer-events: auto;
  }
  .toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
  }
  .toc-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--ink-faint);
    text-decoration: none;
    padding: 0.25rem 0;
    border-bottom: none;
    transition: color 160ms ease;
    line-height: 1;
  }
  .toc-link::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 1px;
    background: currentColor;
    opacity: 0.4;
    transition: width 200ms ease, opacity 200ms ease, background 200ms ease;
  }
  .toc-link:hover,
  .toc-link.toc-link-active {
    color: var(--ink);
  }
  .toc-link.toc-link-active::before {
    width: 28px;
    opacity: 1;
    background: var(--accent);
  }
  .toc-link-pivot {
    color: var(--accent);
  }
  .toc-link-dim {
    opacity: 0.55;
  }
}

/* Anchor scroll offset so the TOC anchor lands cleanly */
:where(section[id]) { scroll-margin-top: 2rem; }

/* ============================================================ *
   GAP INSIGHTS — the centerpiece
   The highest-stakes section. Treated with maximum visual weight:
   thicker rule, larger display title, two-column belief/behavior
   layout that makes the contradiction physical.
 * ============================================================ */

.section.gaps {
  margin: 6rem auto 5rem;
  position: relative;
}

.gaps-rule {
  width: 100%;
  height: 1px;
  background: var(--ink);
  opacity: 0.9;
  margin-bottom: 2.5rem;
}

.gaps-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.25rem;
}

.gaps-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0 0 1.5rem;
  max-width: 18ch;
}

.gaps-lede {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 3rem;
  max-width: 56ch;
}

.gap-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gap-card {
  position: relative;
  padding: 2rem 0 2.5rem 4rem;
  border-top: 1px solid var(--rule);
}
.gap-card:first-child { border-top: none; padding-top: 0.5rem; }
.gap-card:last-child { padding-bottom: 0; }

.gap-num {
  position: absolute;
  left: 0;
  top: 2rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  color: var(--accent);
  letter-spacing: 0.05em;
}
.gap-card:first-child .gap-num { top: 0.5rem; }

.gap-contradiction {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 1.5rem;
  max-width: 30ch;
}

.gap-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  margin: 0 0 1.25rem;
  padding: 1.2rem 1.4rem;
  background: var(--paper);
  border-radius: 4px;
  position: relative;
}

/* The vertical rule between the two columns reads as the gap itself.
   In dark mode the accent-toned divider lets the metaphor land. */
.gap-pair::before {
  content: "";
  position: absolute;
  top: 1.2rem;
  bottom: 1.2rem;
  left: 50%;
  width: 1px;
  background: color-mix(in srgb, var(--accent) 50%, var(--rule));
}

.gap-pair-col { display: flex; flex-direction: column; gap: 0.45rem; }

.gap-pair-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.gap-pair-belief .gap-pair-label { color: var(--ink-faint); }
.gap-pair-behavior .gap-pair-label { color: var(--accent); }

.gap-pair-body {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.gap-pair-belief .gap-pair-body {
  font-style: italic;
  color: var(--ink-faint);
}

.gap-why {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 60ch;
}


/* ---------- login (basic-auth gate for deployed instance) ---------- */

.section.login {
  margin-top: 2.5rem;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 24rem;
  padding: 1.6rem 1.7rem;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-left: 4px solid var(--accent);
  border-radius: 2px;
}

.login-error {
  padding: 0.55rem 0.75rem;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--accent);
  background: rgba(229, 37, 29, 0.08);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
}

.login-label {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.login-input {
  appearance: none;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 0.55rem 0.7rem;
  outline: none;
  transition: border-color 0.12s ease;
}

.login-input:focus {
  border-color: var(--accent);
}

.login-submit {
  appearance: none;
  cursor: pointer;
  margin-top: 0.4rem;
  padding: 0.7rem 1rem;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  transition: opacity 0.12s ease;
}

.login-submit:hover { opacity: 0.88; }
.login-submit:active { opacity: 0.75; }


/* ---------- responsive ---------- */

@media (max-width: 600px) {
  .hero { margin: 1.5rem auto 2.5rem; }
  .section { margin-bottom: 3rem; }
  .section.gaps { margin: 3.5rem auto 3rem; }
  .theme-meta { grid-template-columns: 1fr; gap: 0.1rem 0; }
  .theme-meta dt { margin-top: 0.5rem; }
  .theme-meta dt:first-child { margin-top: 0; }
  .insight { padding-left: 2.5rem; }
  .insight::before { font-size: 0.75rem; }
  .feature-list li { grid-template-columns: 1fr 80px 40px; }

  /* Album band: smaller tiles on mobile */
  .album-band-grid { grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }

  /* Theme thumbs: tuck them tighter on mobile */
  .theme-thumbs { top: 0.9rem; right: 0.9rem; }
  .theme-thumb { width: 36px; height: 36px; }
  /* Mobile: 3 × 36px thumbs with -10px overlap = ~76px, plus padding */
  .theme-head { padding-right: 6rem; min-height: 2.8rem; }

  /* Rec cards: stack cover above text */
  .rec { grid-template-columns: 1fr; }
  .rec-cover { width: 100%; height: 200px; }

  /* Gap-section two-column layout stacks on mobile */
  .gap-card { padding-left: 2.5rem; }
  .gap-pair { grid-template-columns: 1fr; padding: 1rem 1.2rem; }
  .gap-pair::before {
    top: 50%;
    left: 1.2rem;
    right: 1.2rem;
    width: auto;
    height: 1px;
    background: var(--rule);
  }
  .gap-contradiction { font-size: 1.3rem; }
  .gaps-title { font-size: 2rem; }
}

/* ============================================================ *
   PRINT — convert the dark editorial theme to a paper-friendly
   layout when printing or saving as PDF.

   Browsers handle window.print() via the OS print dialog, which
   uses these @media print rules. Keep the typography and structure;
   flip the palette; hide interactive chrome and embeds; force
   page breaks where they hurt.
 * ============================================================ */

@media print {
  /* Light palette overrides */
  :root {
    --bg: #ffffff;
    --paper: #fafafa;
    --ink: #111111;
    --ink-soft: #333333;
    --ink-faint: #666666;
    --rule: #d0d0d0;
    --accent: #B5563C;      /* slightly less saturated red — prints cleanly */
    --accent-soft: #f3e0db;
    color-scheme: light;
  }

  html, body {
    background: #fff !important;
    color: #111 !important;
  }

  /* Strip all transitions / animations / hover-only states */
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }

  /* Hide all interactive or non-paper elements */
  .toc,
  .hero-controls,
  .run-status,
  .rec-play-icon,
  .masthead .brand,
  footer {
    display: none !important;
  }

  /* Show the masthead brand simply on print */
  .masthead {
    border-bottom: 1px solid var(--rule);
    margin-bottom: 1.5rem;
    padding: 0 0 0.5rem 0;
  }
  .masthead::before {
    content: "Type — a reading of your listening";
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: #111;
    display: block;
  }

  /* iFrames (Spotify embeds) don't print — replace with a short note */
  iframe { display: none !important; }
  .rec-cover .rec-play-icon { display: none !important; }

  /* Cover images can stay but shouldn't be massive on paper */
  .album-tile img { filter: none !important; }
  .album-band-grid { grid-template-columns: repeat(6, 1fr); gap: 0.4rem; }
  .album-tile figcaption {
    position: static;
    background: none;
    opacity: 1;
    color: #111;
    padding: 0.15rem 0 0;
  }
  .album-tile-name { font-size: 0.62rem; color: #111; }
  .album-tile-artist { font-size: 0.55rem; color: #555; }

  /* Don't break key blocks across pages */
  .theme,
  .gap-card,
  .rec,
  .insight,
  .album-band {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Force major sections onto new pages so the report reads as chapters */
  .section.gaps,
  .section.recs {
    page-break-before: always;
  }

  /* Recs in print stack vertically with smaller covers */
  .rec-list { display: block; }
  .rec {
    display: grid;
    grid-template-columns: 100px 1fr;
    margin-bottom: 0.8rem;
    border: 1px solid var(--rule) !important;
    background: var(--paper) !important;
  }
  .rec-cover { width: 100px; height: 100px; }

  /* Accent colors stay readable but get gentler on paper */
  .hero-name,
  .eyebrow-mark,
  .gaps-eyebrow,
  .rec-label,
  .gap-pair-behavior .gap-pair-label,
  .theme-meta dt {
    color: var(--accent) !important;
  }

  /* Card backgrounds */
  .theme,
  .gap-pair,
  .rec,
  .empty-cmd,
  .run-status {
    background: var(--paper) !important;
    border-color: var(--rule) !important;
  }
  .theme-thumb { box-shadow: none !important; border: 1px solid var(--rule) !important; }

  /* Genre pills */
  .genre-pill {
    background: var(--paper) !important;
    color: #111 !important;
    border: 1px solid var(--rule) !important;
  }

  /* Usage table */
  .usage-table th, .usage-table td { color: #111 !important; }

  /* Set printable page geometry */
  @page {
    size: A4;
    margin: 18mm;
  }
}