/* ═══════════════════════════════════════════════════════
   ARGUMENT.HTML — 2-hour LIRIL documentary stage
   Cap#205 spec. Vars from css/liril-theme.css.
   ═══════════════════════════════════════════════════════ */

.arg-stage {
  position: fixed;
  inset: 0;
  background: var(--liril-bg, #0a0a0a);
  color: var(--liril-fg, #f0e9d6);
  font-family: var(--liril-font-sans, system-ui, sans-serif);
  overflow: hidden;
  z-index: 1;
}

/* ── Background video layer ─────────────────────── */
.arg-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.arg-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55; /* Cap#207: was 0.32 — buried under vignette */
  filter: contrast(1.05) saturate(0.85);
  transition: opacity 1200ms ease;
}
.arg-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, var(--liril-bg, #0a0a0a) 96%), /* Cap#207: 88%→96% */
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}
/* Cap#207: animated CSS fallback when video.onerror fires (file://, 404, blocked) */
.arg-bg.is-fallback {
  background:
    radial-gradient(ellipse at 30% 40%, rgba(201,164,76,0.18), transparent 55%),
    radial-gradient(ellipse at 70% 60%, rgba(74,144,201,0.14), transparent 55%),
    var(--liril-bg, #0a0a0a);
}
@media (prefers-reduced-motion: no-preference) {
  .arg-bg.is-fallback { animation: argBgPulse 14s ease-in-out infinite; }
  @keyframes argBgPulse {
    0%,100% { background-position: 0% 0%, 100% 100%, 0 0; filter: hue-rotate(0deg); }
    50%     { background-position: 100% 100%, 0% 0%, 0 0; filter: hue-rotate(8deg); }
  }
  /* Cap#207: viz panel entrance */
  .arg-viz { opacity: 0; transform: translateX(12px); transition: opacity 700ms ease, transform 700ms ease; }
  .arg-viz.is-on { opacity: 1; transform: translateX(0); }
}

/* ── Chapter HUD (top) ─────────────────────────── */
.arg-hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  padding: 18px 32px 14px;
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(180deg, rgba(0,0,0,0.7), transparent);
  font-family: var(--liril-font-mono, ui-monospace, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.arg-hud__brand {
  color: var(--liril-accent, #c9a44c);
  font-weight: 700;
}
.arg-hud__chap {
  color: var(--liril-fg, #f0e9d6);
  opacity: 0.9;
}
.arg-hud__coord {
  color: var(--liril-muted, #9a8f72);
}
.arg-hud__time {
  margin-left: auto;
  color: var(--liril-muted, #9a8f72);
  font-variant-numeric: tabular-nums;
}

/* ── Progress bar ──────────────────────────────── */
.arg-prog {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,0.06);
  z-index: 6;
}
.arg-prog__fill {
  height: 100%;
  width: 0;
  background: var(--liril-accent, #c9a44c);
  transition: width 250ms linear;
}

/* ── Center stage: title + overlay typography ──── */
.arg-center {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8% 6%;
  text-align: center;
  pointer-events: none;
}
.arg-center__title {
  font-family: var(--liril-font-display, var(--liril-font-sans, sans-serif));
  font-size: clamp(1.6rem, 3.4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0 0 0.6em;
  color: var(--liril-fg, #f0e9d6);
  text-shadow: 0 2px 24px rgba(0,0,0,0.85);
  max-width: 22ch;
}
.arg-center__overlay {
  font-family: var(--liril-font-display, var(--liril-font-sans, sans-serif));
  font-size: clamp(2.2rem, 7vw, 6rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--liril-accent, #c9a44c);
  text-shadow: 0 4px 32px rgba(0,0,0,0.9);
  max-width: 20ch;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 800ms ease, transform 800ms ease;
}
.arg-center__overlay.is-on {
  opacity: 1;
  transform: translateY(0);
}

/* Kinetic type variant — fires once per chapter */
.arg-kinetic {
  display: inline-block;
  animation: argKinetic 5200ms cubic-bezier(.2,.7,.1,1) both;
}
@keyframes argKinetic {
  0%   { letter-spacing: -0.05em; opacity: 0; transform: scale(0.94); }
  18%  { letter-spacing: -0.02em; opacity: 1; transform: scale(1); }
  82%  { letter-spacing: -0.02em; opacity: 1; transform: scale(1); }
  100% { letter-spacing: 0.02em;  opacity: 0; transform: scale(1.02); }
}

/* ── Side: data viz panel (right) ──────────────── */
.arg-viz {
  position: absolute;
  top: 18%;
  right: 4%;
  bottom: 22%;
  width: min(36vw, 520px);
  z-index: 4;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--liril-rule, rgba(255,255,255,0.12));
  border-radius: 6px;
  padding: 18px 20px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.arg-viz.is-on { opacity: 1; transform: translateX(0); }
.arg-viz__title {
  font-family: var(--liril-font-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--liril-accent, #c9a44c);
  margin: 0;
}
.arg-viz__body {
  flex: 1;
  min-height: 0;
  position: relative;
}
.arg-viz__body svg { width: 100%; height: 100%; display: block; }

/* SVG primitives themed via vars */
.arg-viz svg .axis { stroke: var(--liril-muted, #9a8f72); stroke-width: 1; }
.arg-viz svg .grid { stroke: var(--liril-rule, rgba(255,255,255,0.08)); stroke-width: 1; stroke-dasharray: 2 3; }
.arg-viz svg .bar { fill: var(--liril-accent, #c9a44c); transition: height 800ms ease, y 800ms ease; }
.arg-viz svg .bar.alt { fill: var(--liril-accent-2, var(--liril-info, #5ad6ff)); }
.arg-viz svg .line { fill: none; stroke: var(--liril-accent, #c9a44c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.arg-viz svg .line.alt { stroke: var(--liril-err, #ff453a); }
.arg-viz svg .area { fill: var(--liril-accent, #c9a44c); opacity: 0.18; }
.arg-viz svg .label { fill: var(--liril-muted, #9a8f72); font-family: var(--liril-font-mono, monospace); font-size: 10px; }
.arg-viz svg .label-fg { fill: var(--liril-fg, #f0e9d6); font-family: var(--liril-font-mono, monospace); font-size: 11px; }
.arg-viz svg .heat { stroke: rgba(0,0,0,0.5); stroke-width: 1; }
.arg-viz svg .node { fill: var(--liril-accent, #c9a44c); }
.arg-viz svg .edge { stroke: var(--liril-muted, #9a8f72); stroke-width: 1; opacity: 0.6; }

/* ── Bottom: caption + transport ──────────────── */
.arg-foot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  padding: 22px 32px 28px;
  background: linear-gradient(0deg, rgba(0,0,0,0.85), transparent);
}
.arg-caption {
  max-width: 70ch;
  margin: 0 auto 14px;
  font-family: var(--liril-font-sans, sans-serif);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  text-align: center;
  color: var(--liril-fg, #f0e9d6);
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
  min-height: 3em;
}
.arg-caption__cite {
  display: block;
  margin-top: 6px;
  font-family: var(--liril-font-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--liril-muted, #9a8f72);
}
.arg-caption__cite a { color: var(--liril-link, var(--liril-accent, #c9a44c)); text-decoration: none; }
.arg-caption__cite a:hover { text-decoration: underline; }

.arg-transport {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
.arg-btn {
  background: transparent;
  color: var(--liril-fg, #f0e9d6);
  border: 1px solid var(--liril-rule-strong, rgba(255,255,255,0.25));
  padding: 8px 16px;
  font-family: var(--liril-font-mono, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 3px;
  transition: background var(--liril-tx-fast, 120ms) ease, color var(--liril-tx-fast, 120ms) ease;
}
.arg-btn:hover, .arg-btn:focus-visible {
  background: var(--liril-accent, #c9a44c);
  color: var(--liril-ink, #0a0a0a);
  outline: none;
}
.arg-btn--primary {
  background: var(--liril-accent, #c9a44c);
  color: var(--liril-ink, #0a0a0a);
  font-weight: 700;
}
.arg-btn--primary:hover { background: var(--liril-fg, #f0e9d6); }

/* ── Boot screen ──────────────────────────────── */
.arg-boot {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--liril-bg, #0a0a0a);
  text-align: center;
  padding: 6%;
  transition: opacity 800ms ease;
}
.arg-boot.is-out { opacity: 0; pointer-events: none; }
.arg-boot__brand {
  font-family: var(--liril-font-mono, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.4em;
  color: var(--liril-accent, #c9a44c);
  margin-bottom: 32px;
}
.arg-boot__title {
  font-family: var(--liril-font-display, sans-serif);
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 0.4em;
  color: var(--liril-fg, #f0e9d6);
  max-width: 20ch;
}
.arg-boot__subtitle {
  font-family: var(--liril-font-sans, sans-serif);
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  color: var(--liril-muted, #9a8f72);
  max-width: 36ch;
  margin: 0 0 32px;
  line-height: 1.4;
}
.arg-boot__thesis {
  font-family: var(--liril-font-display, sans-serif);
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--liril-accent, #c9a44c);
  margin: 0 0 36px;
  letter-spacing: -0.01em;
}
.arg-boot__meta {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
  font-family: var(--liril-font-mono, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--liril-muted, #9a8f72);
}
.arg-boot__meta strong { color: var(--liril-fg, #f0e9d6); display: block; font-size: 1.4rem; margin-bottom: 4px; letter-spacing: 0; }
.arg-boot__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ── Chapter list (drawer) ─────────────────────── */
.arg-toc {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  z-index: 50;
  width: min(420px, 90vw);
  background: var(--liril-elev-2, #181818);
  border-right: 1px solid var(--liril-rule, rgba(255,255,255,0.12));
  transform: translateX(-100%);
  transition: transform 400ms cubic-bezier(.2,.7,.1,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.arg-toc.is-open { transform: translateX(0); }
.arg-toc__head {
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--liril-rule, rgba(255,255,255,0.12));
}
.arg-toc__title {
  margin: 0;
  font-family: var(--liril-font-mono, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--liril-accent, #c9a44c);
}
.arg-toc__list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  list-style: none;
  margin: 0;
}
.arg-toc__item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 24px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background var(--liril-tx-fast, 120ms) ease;
}
.arg-toc__item:hover { background: var(--liril-elev-1, #111); }
.arg-toc__item.is-active {
  background: var(--liril-elev-1, #111);
  border-left-color: var(--liril-accent, #c9a44c);
}
.arg-toc__num {
  font-family: var(--liril-font-mono, monospace);
  color: var(--liril-muted, #9a8f72);
  font-size: 0.78rem;
  min-width: 2ch;
}
.arg-toc__t {
  font-family: var(--liril-font-sans, sans-serif);
  color: var(--liril-fg, #f0e9d6);
  font-size: 0.92rem;
  line-height: 1.3;
  flex: 1;
}
.arg-toc__coord {
  font-family: var(--liril-font-mono, monospace);
  font-size: 0.7rem;
  color: var(--liril-muted, #9a8f72);
}

/* ── Chapter break flash ──────────────────────── */
.arg-break {
  position: absolute;
  inset: 0;
  z-index: 80;
  background: var(--liril-bg, #0a0a0a);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.arg-break.is-flash { opacity: 0.9; }

/* ── Reduced motion ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .arg-bg video { display: none; }
  .arg-bg::after { background: var(--liril-bg, #0a0a0a); }
  .arg-kinetic { animation: none; opacity: 1; }
  .arg-center__overlay,
  .arg-viz { transition: none; }
}

/* ── Mobile ───────────────────────────────────── */
@media (max-width: 760px) {
  .arg-viz {
    position: relative;
    top: auto; right: auto; bottom: auto;
    width: auto;
    margin: 0 16px;
  }
  .arg-center { padding: 14% 6% 0; justify-content: flex-start; }
  .arg-foot { padding: 14px 16px 20px; }
  .arg-hud { padding: 12px 16px; font-size: 0.7rem; }
  .arg-hud__time { display: none; }
}

/* hide LIRIL slate toggle on stage (we have our own transport) */
.arg-stage ~ .liril-slate-toggle,
body.arg-mode .liril-slate-toggle { bottom: 84px; }

/* ── Toast (Cap#205 share-link feedback) ───────────────── */
.arg-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%) translateY(8px);
  z-index: 9999;
  background: rgba(10,10,10,0.92);
  color: var(--liril-accent, #c9a44c);
  border: 1px solid var(--liril-accent, #c9a44c);
  padding: 0.65rem 1.1rem;
  font-family: var(--liril-font-mono, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease, transform 280ms ease;
  max-width: 80vw;
  text-align: center;
}
.arg-toast.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .arg-toast { transition: none; }
}

/* ═══════════════════════════════════════════════════════
   Cap#208/209 — Horizontal timeline + live-page panel
   ═══════════════════════════════════════════════════════ */

/* ── Horizontal chapter timeline (above .arg-foot) ────── */
.arg-timeline {
  position: absolute;
  left: 4%; right: 4%;
  bottom: calc(var(--arg-foot-h, 110px) + 8px);
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(25, 1fr);
  gap: 4px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--liril-rule, rgba(255,255,255,0.12));
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.arg-timeline__progress {
  position: absolute;
  left: 14px; right: 14px;
  top: 50%;
  height: 2px;
  background: var(--liril-rule, rgba(255,255,255,0.10));
  transform: translateY(-50%);
  border-radius: 2px;
  overflow: hidden;
  pointer-events: none;
}
.arg-timeline__progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--liril-accent-2, #8a6a22), var(--liril-accent, #c9a44c));
  transform-origin: left center;
  transform: scaleX(var(--arg-progress, 0));
  transition: transform 220ms ease;
}
.arg-timeline__tick {
  position: relative;
  appearance: none;
  background: transparent;
  color: var(--liril-fg-muted, #9a9a9a);
  border: 1px solid var(--liril-rule-strong, rgba(255,255,255,0.18));
  border-radius: 50%;
  width: 18px; height: 18px;
  margin: 0 auto;
  font: 600 10px/1 var(--liril-font-mono, monospace);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease, border-color 200ms ease;
}
.arg-timeline__tick:hover,
.arg-timeline__tick:focus-visible {
  color: var(--liril-fg, #fff);
  border-color: var(--liril-accent, #c9a44c);
  transform: scale(1.18);
  z-index: 1;
}
.arg-timeline__tick.is-current {
  background: var(--liril-accent, #c9a44c);
  color: var(--liril-accent-ink, #000);
  border-color: var(--liril-accent, #c9a44c);
  transform: scale(1.30);
  z-index: 2;
  box-shadow: 0 0 0 4px rgba(201,164,76,0.20), 0 0 14px rgba(201,164,76,0.45);
}
.arg-timeline__tick.is-done {
  background: var(--liril-accent-2, #8a6a22);
  color: var(--liril-fg, #fff);
  border-color: var(--liril-accent-2, #8a6a22);
}
.arg-timeline__tick[aria-label]:hover::after {
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--liril-bg-elev-2, #141414);
  color: var(--liril-fg, #fff);
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid var(--liril-rule-strong, rgba(255,255,255,0.18));
  font: 11px/1.3 var(--liril-font-sans, sans-serif);
  white-space: nowrap;
  max-width: 280px;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}
@media (prefers-reduced-motion: reduce) {
  .arg-timeline__progress::after,
  .arg-timeline__tick { transition: none !important; }
  .arg-timeline__tick:hover,
  .arg-timeline__tick.is-current { transform: none; }
}

/* ── Live-page panel (bottom-left) ────────────── */
.arg-livepage {
  position: absolute;
  left: 4%;
  top: 18%;
  width: min(28vw, 380px);
  max-height: 50vh;
  z-index: 4;
  background: rgba(0,0,0,0.62);
  border: 1px solid var(--liril-rule, rgba(255,255,255,0.12));
  border-left: 3px solid var(--liril-accent, #c9a44c);
  border-radius: 6px;
  padding: 16px 18px;
  overflow: auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.arg-livepage[hidden] { display: none !important; }
.arg-livepage.is-on { opacity: 1; transform: translateX(0); }
.arg-livepage__label {
  font: 600 0.62rem/1 var(--liril-font-mono, monospace);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--liril-accent, #c9a44c);
  margin: 0;
}
.arg-livepage__title {
  font: 600 1.05rem/1.25 var(--liril-font-sans, sans-serif);
  color: var(--liril-fg, #fff);
  margin: 0;
}
.arg-livepage__excerpt {
  font: 400 0.88rem/1.45 var(--liril-font-sans, sans-serif);
  color: var(--liril-fg-muted, #9a9a9a);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.arg-livepage__open {
  align-self: flex-start;
  font: 600 0.78rem/1 var(--liril-font-mono, monospace);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--liril-accent, #c9a44c);
  text-decoration: none;
  border: 1px solid var(--liril-accent, #c9a44c);
  padding: 8px 12px;
  border-radius: 3px;
  transition: background 180ms ease, color 180ms ease;
}
.arg-livepage__open:hover,
.arg-livepage__open:focus-visible {
  background: var(--liril-accent, #c9a44c);
  color: var(--liril-accent-ink, #000);
}
@media (prefers-reduced-motion: reduce) {
  .arg-livepage { transition: none; }
  .arg-livepage__open { transition: none; }
}
@media (max-width: 880px) {
  .arg-livepage { display: none; }
}