/* Eval Framework — The Hermetic Laboratory
   Extends _shared.css via <link> cascade (beyond-parity precedent) */

:root {
  /* Phase lifecycle */
  --phase-foundation: oklch(0.42 0.12 200);
  --phase-foundation-bg: oklch(0.42 0.12 200 / 0.06);
  --phase-foundation-border: oklch(0.42 0.12 200 / 0.22);
  --phase-enrichment: oklch(0.44 0.10 270);
  --phase-enrichment-bg: oklch(0.44 0.10 270 / 0.06);
  --phase-enrichment-border: oklch(0.44 0.10 270 / 0.22);
  --phase-analysis: oklch(0.40 0.14 320);
  --phase-analysis-bg: oklch(0.40 0.14 320 / 0.06);
  --phase-analysis-border: oklch(0.40 0.14 320 / 0.22);
  --phase-evolution: oklch(0.45 0.16 55);
  --phase-evolution-bg: oklch(0.45 0.16 55 / 0.06);
  --phase-evolution-border: oklch(0.45 0.16 55 / 0.22);
  /* Agent aliases */
  --pi-agent: var(--subq);
  --pi-agent-bg: var(--subq-bg);
  --pi-agent-border: var(--subq-border);
  --claude-code: var(--claude);
  --claude-code-bg: var(--claude-bg);
  --claude-code-border: var(--claude-border);
  --codex-cli: var(--codex);
  --codex-cli-bg: var(--codex-bg);
  --codex-cli-border: var(--codex-border);
  /* Evolution-specific */
  --frontier: oklch(0.42 0.12 145);
  --frontier-bg: oklch(0.42 0.12 145 / 0.06);
  --frontier-border: oklch(0.42 0.12 145 / 0.22);
  /* Status aliases (no duplicate values) */
  --status-complete: var(--subq);
  --status-complete-bg: var(--subq-bg);
  --status-complete-border: var(--subq-border);
  --status-planned: var(--moderate);
  --status-planned-bg: var(--moderate-bg);
  --status-planned-border: var(--moderate-border);
  --status-active: var(--high);
  --status-active-bg: var(--high-bg);
  --status-active-border: var(--high-border);
  /* Atmospheric — alchemical palette */
  --verdigris: oklch(0.48 0.10 175);
  --verdigris-bg: oklch(0.48 0.10 175 / 0.06);
  --verdigris-border: oklch(0.48 0.10 175 / 0.22);
  --sulfur: oklch(0.58 0.14 95);
  --iron-gall: oklch(0.30 0.04 280);
  --quicksilver: oklch(0.68 0.02 250);
}

/* ─── ANTI-PATTERN OVERRIDE ─── */
.matrix-note {
  border-left: none;
  border-top: 3px solid var(--high);
  border-radius: 0 0 6px 6px;
  padding-top: 0.75rem;
}
.matrix-note--dealbreaker { border-top-color: var(--dealbreaker); }
.matrix-note--subq { border-top-color: var(--subq); }
.matrix-note--claude { border-top-color: var(--claude); }
.matrix-note--codex { border-top-color: var(--codex); }

/* ─── PHASE VARIANTS ─── */
.state-card--phase-foundation::before { background: var(--phase-foundation); }
.state-card--phase-foundation h4 { color: var(--phase-foundation); }
.state-card--phase-foundation:hover { border-color: var(--phase-foundation-border); box-shadow: 0 4px 20px var(--phase-foundation-bg); }
.state-card--phase-foundation .verb-chip { border-color: var(--phase-foundation-border); color: var(--phase-foundation); }

.state-card--phase-enrichment::before { background: var(--phase-enrichment); }
.state-card--phase-enrichment h4 { color: var(--phase-enrichment); }
.state-card--phase-enrichment:hover { border-color: var(--phase-enrichment-border); box-shadow: 0 4px 20px var(--phase-enrichment-bg); }
.state-card--phase-enrichment .verb-chip { border-color: var(--phase-enrichment-border); color: var(--phase-enrichment); }

.state-card--phase-analysis::before { background: var(--phase-analysis); }
.state-card--phase-analysis h4 { color: var(--phase-analysis); }
.state-card--phase-analysis:hover { border-color: var(--phase-analysis-border); box-shadow: 0 4px 20px var(--phase-analysis-bg); }
.state-card--phase-analysis .verb-chip { border-color: var(--phase-analysis-border); color: var(--phase-analysis); }

.state-card--phase-evolution::before { background: var(--phase-evolution); }
.state-card--phase-evolution h4 { color: var(--phase-evolution); }
.state-card--phase-evolution:hover { border-color: var(--phase-evolution-border); box-shadow: 0 4px 20px var(--phase-evolution-bg); }
.state-card--phase-evolution .verb-chip { border-color: var(--phase-evolution-border); color: var(--phase-evolution); }

/* Frontier variant */
.state-card--frontier::before { background: var(--frontier); }
.state-card--frontier h4 { color: var(--frontier); }
.state-card--frontier:hover { border-color: var(--frontier-border); box-shadow: 0 4px 20px var(--frontier-bg); }
.state-card--frontier .verb-chip { border-color: var(--frontier-border); color: var(--frontier); }

/* Verdict badges for eval domain */
.matrix__verdict--pi-agent { background: var(--subq-bg); color: var(--subq); border: 1px solid var(--subq-border); }
.matrix__verdict--claude-code { background: var(--claude-bg); color: var(--claude); border: 1px solid var(--claude-border); }
.matrix__verdict--codex-cli { background: var(--codex-bg); color: var(--codex); border: 1px solid var(--codex-border); }

/* Console verb variants */
.console-verb--worktree { color: var(--phase-foundation); }
.console-verb--pi-agent { color: var(--subq); }
.console-verb--compare { color: var(--frontier); }
.console-verb--report { color: var(--copper); }
.console-verb--proposer { color: var(--phase-evolution); }
.console-verb--feedback { color: var(--quicksilver); }
.console-verb--builder { color: var(--verdigris); }
.console-verb--guardrail { color: var(--phase-analysis); }
.console-verb--frontier { color: var(--frontier); }

/* Chip variants */
.chip--phase-foundation { border-color: var(--phase-foundation-border); color: var(--phase-foundation); background: var(--phase-foundation-bg); }
.chip--phase-enrichment { border-color: var(--phase-enrichment-border); color: var(--phase-enrichment); background: var(--phase-enrichment-bg); }
.chip--phase-analysis { border-color: var(--phase-analysis-border); color: var(--phase-analysis); background: var(--phase-analysis-bg); }
.chip--phase-evolution { border-color: var(--phase-evolution-border); color: var(--phase-evolution); background: var(--phase-evolution-bg); }

/* ─── PHASE TIMELINE ─── */
.phase-timeline {
  display: flex; align-items: flex-start; gap: 0;
  padding: 1.5rem 0; overflow-x: auto;
}
.phase-node {
  display: flex; flex-direction: column; align-items: center;
  min-width: 100px; flex: 1; position: relative; text-decoration: none; color: inherit;
}
.phase-node__dot {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2.5px solid var(--border);
  background: var(--bg-card); position: relative; z-index: 2;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 0.65rem; font-weight: 700; color: var(--text-muted);
}
.phase-node--complete .phase-node__dot {
  border-color: var(--status-complete);
  background: var(--status-complete-bg);
  color: var(--status-complete);
}
.phase-node__connector {
  position: absolute; top: 14px; left: calc(50% + 14px); right: calc(-50% + 14px);
  height: 2px; background: var(--border); z-index: 1;
}
.phase-node:last-child .phase-node__connector { display: none; }
.phase-node--complete .phase-node__connector { background: var(--status-complete); }
.phase-node__label {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); margin-top: 0.5rem; text-align: center;
  max-width: 90px; line-height: 1.3;
}
.phase-node--complete .phase-node__label { color: var(--status-complete); }
.phase-node__status {
  font-family: var(--mono); font-size: 0.55rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-top: 0.25rem; padding: 0.1rem 0.4rem;
  border-radius: 100px; white-space: nowrap;
}
.phase-node--complete .phase-node__status {
  background: var(--status-complete-bg); color: var(--status-complete);
  border: 1px solid var(--status-complete-border);
}
.phase-node--planned .phase-node__status {
  background: var(--status-planned-bg); color: var(--status-planned);
  border: 1px solid var(--status-planned-border);
}

/* ─── HERMETIC LOOP ─── */
.loop-container {
  --radius: 170px;
  position: relative;
  width: calc(var(--radius) * 2 + 200px);
  height: calc(var(--radius) * 2 + 200px);
  margin: 2rem auto;
}
.loop-ring {
  position: absolute; inset: 0;
  border: 2px solid var(--border);
  border-radius: 50%;
}
.loop-stage {
  --angle: calc(var(--i) * 72deg - 90deg);
  position: absolute;
  left: calc(50% + var(--radius) * cos(var(--angle)) - 55px);
  top: calc(50% + var(--radius) * sin(var(--angle)) - 55px);
  width: 110px; text-align: center;
  z-index: 3;
}
.loop-stage:nth-child(4) { --i: 0; }
.loop-stage:nth-child(5) { --i: 1; }
.loop-stage:nth-child(6) { --i: 2; }
.loop-stage:nth-child(7) { --i: 3; }
.loop-stage:nth-child(8) { --i: 4; }

.loop-stage__icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--bg-card); border: 2.5px solid var(--border);
  display: grid; place-items: center; margin: 0 auto 0.4rem;
  font-size: 1.1rem; color: var(--copper);
  transition: border-color 0.4s, box-shadow 0.4s;
}
.loop-stage__label {
  font-family: var(--mono); font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); line-height: 1.3;
}
.loop-stage__desc {
  font-family: var(--body); font-size: 0.72rem;
  color: var(--text-body); line-height: 1.4; margin-top: 0.2rem;
}

/* Loop stage highlight animation */
.loop-stage { animation: stageHighlight 15s ease-in-out infinite; }
.loop-stage:nth-child(4) { animation-delay: 0s; }
.loop-stage:nth-child(5) { animation-delay: 3s; }
.loop-stage:nth-child(6) { animation-delay: 6s; }
.loop-stage:nth-child(7) { animation-delay: 9s; }
.loop-stage:nth-child(8) { animation-delay: 12s; }

@keyframes stageHighlight {
  0%, 13% {
    transform: scale(1);
  }
  6.5% {
    transform: scale(1.08);
    --stage-active: 1;
  }
}

.loop-stage__icon {
  animation: stageGlow 15s ease-in-out infinite;
}
.loop-stage:nth-child(4) .loop-stage__icon { animation-delay: 0s; }
.loop-stage:nth-child(5) .loop-stage__icon { animation-delay: 3s; }
.loop-stage:nth-child(6) .loop-stage__icon { animation-delay: 6s; }
.loop-stage:nth-child(7) .loop-stage__icon { animation-delay: 9s; }
.loop-stage:nth-child(8) .loop-stage__icon { animation-delay: 12s; }

@keyframes stageGlow {
  0%, 100% {
    border-color: var(--border);
    box-shadow: none;
  }
  5%, 15% {
    border-color: var(--copper);
    box-shadow: 0 0 16px oklch(0.45 0.12 55 / 0.35);
  }
}

/* Copper tracer */
.loop-tracer {
  position: absolute;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--copper);
  filter: drop-shadow(0 0 6px oklch(0.55 0.14 55 / 0.6));
  offset-path: circle(170px at 50% 50%);
  offset-rotate: 0deg;
  animation: traceLoop 15s linear infinite;
  z-index: 4;
}
@keyframes traceLoop {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

/* Loop center label */
.loop-center {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; z-index: 2;
}
.loop-center__title {
  font-family: var(--display); font-size: 1.1rem; font-style: italic;
  color: var(--ink); line-height: 1.2;
}
.loop-center__subtitle {
  font-family: var(--body); font-size: 0.75rem; font-style: italic;
  color: var(--copper); margin-top: 0.2rem;
}

/* ─── IRON-GALL DEBUGGER VARIANT ─── */
.debugger-panel--dark {
  background: oklch(0.14 0.02 270);
  border-color: oklch(0.25 0.02 270);
}
.debugger-panel--dark .debugger-titlebar {
  background: oklch(0.18 0.02 270);
  border-bottom-color: oklch(0.25 0.02 270);
}
.debugger-panel--dark .debugger-titlebar span { color: oklch(0.55 0.02 250); }
.debugger-panel--dark .console-msg { color: oklch(0.72 0.01 60); }
.debugger-panel--dark .console-state { border-color: oklch(0.30 0.02 250); color: oklch(0.55 0.02 250); }

/* ─── DROP CAP ─── */
.lead--drop { max-width: none; }
.lead--drop::first-letter {
  font-family: var(--display);
  font-weight: 900;
  color: var(--copper);
  initial-letter: 3;
  -webkit-initial-letter: 3;
  margin-right: 0.1em;
  font-style: normal;
}
@supports not (initial-letter: 3) {
  .lead--drop::first-letter {
    float: left;
    font-size: 3.75em;
    line-height: 0.8;
    padding-right: 0.08em;
    margin-top: 0.05em;
  }
}

/* ─── SECTION DIVIDER ─── */
.section-divider {
  border: none; height: 1px; margin-block: 3rem;
  background: radial-gradient(ellipse at center, oklch(0.55 0.06 55) 0%, transparent 70%);
}

/* ─── SKIP LINK ─── */
.skip-link {
  position: absolute; top: -40px; left: 0;
  background: var(--copper); color: var(--bg); padding: 0.5rem 1rem;
  font-family: var(--mono); font-size: 0.75rem; z-index: 100;
  text-decoration: none; border-radius: 0 0 6px 0;
}
.skip-link:focus { top: 0; }

/* ─── SCROLL MARGIN ─── */
section[id] { scroll-margin-top: 4rem; }

/* ─── RESPONSIVE: LOOP FALLBACK ─── */
@media (max-width: 640px) {
  .loop-container {
    display: flex; flex-direction: column; gap: 1rem;
    width: 100%; height: auto; padding: 0 1rem;
  }
  .loop-ring, .loop-tracer { display: none; }
  .loop-center { position: static; transform: none; margin-bottom: 1rem; }
  .loop-stage {
    position: static; width: 100%;
    display: flex; align-items: center; gap: 1rem;
    text-align: left;
  }
  .loop-stage__icon { margin: 0; flex-shrink: 0; }
  .loop-stage, .loop-stage__icon { animation: none; }
  .loop-stage__icon {
    border-color: var(--copper);
    box-shadow: 0 0 8px oklch(0.45 0.12 55 / 0.2);
  }
  .phase-timeline { flex-wrap: wrap; }
  .phase-node { min-width: 80px; }
  .phase-node__connector { display: none; }
}

/* ─── EXTRACTED INLINE STYLES ─── */
.mt-sm { margin-top: 1rem; }
.mt-md { margin-top: 1.25rem; }
.mt-lg { margin-top: 1.5rem; }
.mt-xl { margin-top: 2rem; }
.text-center { text-align: center; }

.matrix--4col .matrix__row { grid-template-columns: 28% 24% 24% 24%; }
.matrix--3col .matrix__row { grid-template-columns: 25% 35% 40%; }
.matrix--env .matrix__row { grid-template-columns: 30% 35% 35%; }

.states-grid--1col { grid-template-columns: 1fr; }

.code-inline {
  font-family: var(--mono); font-size: 0.82rem;
  background: var(--bg-warm); padding: 0.1rem 0.4rem;
  border-radius: 4px; color: var(--copper);
}
.score {
  font-family: var(--mono); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cap-panel .chip-grid { margin-top: 0.75rem; }
.cap-panel--hermes h4 { color: var(--phase-evolution); }
.cap-panel--gepa h4 { color: var(--phase-analysis); }

.ring--outer { margin: 1.5rem 0 1rem; }
.ring--nested { margin: 1rem 1.25rem; }
.ring--nested-flush { margin: 0 1.25rem; }

.hook-grid--quotes { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ─── ACTIVE PAGE INDICATOR ─── */
.page-position {
  display: flex; justify-content: center; gap: 0.5rem;
  margin-top: 0.75rem;
}
.page-position__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--border); transition: background 0.2s ease-out;
}
.page-position__dot--active {
  background: var(--copper); box-shadow: 0 0 6px oklch(0.45 0.12 55 / 0.3);
}

/* ─── TYPOGRAPHY POLISH ─── */
h1, h2 { text-wrap: balance; }
p, .lead { text-wrap: pretty; }
.lead:not(.lead--drop), .cap-panel p, .state-card p, .hook-card p { max-width: 65ch; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ─── FOCUS STATES ─── */
.further-card:focus-visible,
.hook-card:focus-visible,
a:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─── MOBILE MATRIX ─── */
@media (max-width: 640px) {
  .matrix--4col .matrix__row { grid-template-columns: 1fr; gap: 0.25rem; }
  .matrix--4col .matrix__row--head { display: none; }
  .matrix--4col .matrix__cell { padding: 0.35rem 0.5rem; }
  .matrix--4col .matrix__cell--center { text-align: left; }
  .matrix--4col .matrix__tool {
    font-weight: 700; color: var(--ink);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.35rem; margin-bottom: 0.15rem;
  }
  .matrix--4col .matrix__cell::before {
    font-family: var(--mono); font-size: 0.6rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted); display: block; margin-bottom: 0.15rem;
  }
  .matrix--4col .matrix__cell:nth-child(2)::before { content: "SubQ Code"; }
  .matrix--4col .matrix__cell:nth-child(3)::before { content: "Claude Code"; }
  .matrix--4col .matrix__cell:nth-child(4)::before { content: "Codex CLI"; }
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  .loop-stage, .loop-stage__icon { animation: none; }
  .loop-tracer { animation: none; offset-distance: 0%; }
  .loop-stage__icon {
    border-color: var(--copper);
    box-shadow: 0 0 8px oklch(0.45 0.12 55 / 0.2);
  }
}