/* BOUNDARY Forge — Copper Foundry design system (owner-approved identity)
 *
 * Canvas: warm ivory. Surfaces: forged graphite. Accent: forged copper.
 * States: VERIFIED (verified green), HOLD/UNSAFE (unsafe red), UNVERIFIED
 * (copper wash). Every state signal pairs a text label (and, where icons are
 * used, an inline SVG mark) with color — never color-only. WCAG 2.2 AA: all
 * foreground/background pairs in this file measure >= 4.5:1 for body-size
 * text and >= 3:1 for large text. Local-only: no remote fonts, CDNs, or
 * images of any kind.
 *
 * Legacy token names (--obsidian, --cobalt, --cyan, --emerald, --amber,
 * --coral) are kept because tests pin those names; their values now carry
 * the Copper Foundry palette.
 */

:root {
  /* Copper Foundry core palette */
  --ivory: #F7F4ED;            /* warm ivory canvas (page background) */
  --ivory-card: #FFFFFF;       /* raised card surface */
  --ivory-alt: #EFEAE0;        /* quiet surface (inputs, table stripes) */
  --copper-tint: #F3E3D3;      /* copper-washed info surface */
  --copper-tint-deep: #EFDCC8; /* hover/active copper wash */
  --graphite: #17212B;         /* forged graphite: text + header/footer */
  --graphite-2: #232F3B;       /* raised dark surface (skip-link) */
  --graphite-3: #2E3C49;       /* dark surface hairline */
  --copper: #A94E2D;           /* forged copper accent (buttons, current nav) */
  --copper-bright: #C9714A;    /* copper text on graphite (4.61:1) */
  --copper-brightest: #D98B5F; /* large copper display text on graphite (6.06:1) */
  --copper-dark: #8F3D20;      /* copper links/text on light surfaces (>=5.8:1) */
  --verified: #11675D;         /* VERIFIED state on light surfaces (6.12:1) */
  --verified-bright: #3FA893;  /* VERIFIED text on graphite (5.61:1) */
  --verified-tint: #E3EEEB;    /* verified wash */
  --unsafe: #AE2636;           /* HOLD/UNSAFE state on light surfaces (6.11:1) */
  --unsafe-bright: #E06A5E;    /* HOLD/UNSAFE text on graphite (4.96:1) */
  --unsafe-tint: #F7E3E1;      /* unsafe wash */

  /* Derived neutrals */
  --text: var(--graphite);     /* primary text on light surfaces */
  --text-dark: var(--ivory);   /* primary text on graphite surfaces */
  --text-muted: #5A6672;       /* muted text on light surfaces (>=4.6:1) */
  --text-muted-dark: #C9CFC7;  /* muted text on graphite (>=7:1) */
  --border: #D8D0C2;           /* hairline borders on light surfaces */
  --border-strong: #B9AE9C;    /* emphasized borders on light surfaces */
  --focus: #A94E2D;            /* focus ring */

  /* Legacy aliases (names pinned by UI tests; values = Copper Foundry) */
  --obsidian: var(--graphite);
  --obsidian-2: var(--ivory-alt);
  --cobalt: var(--ivory-card);
  --cobalt-2: var(--copper-tint);
  --cyan: var(--copper-dark);
  --cyan-dim: var(--copper-tint);
  --emerald: var(--verified);
  --emerald-dim: var(--verified-tint);
  --amber: var(--unsafe);
  --amber-dim: var(--unsafe-tint);
  --coral: var(--unsafe);
  --coral-dim: var(--unsafe-tint);

  --radius: 8px;
  --radius-lg: 12px;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  font-size: 1rem;
}

a { color: var(--copper-dark); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--graphite-2);
  color: var(--text-dark);
  padding: 0.5rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* --- Header, brand, navigation ------------------------------------------- */

.site-header {
  background: var(--graphite);
  border-bottom: 3px solid var(--copper);
  padding: 1rem 1.25rem;
  color: var(--text-dark);
}
.site-header .brand {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--ivory);
}
.site-header .brand .accent { color: var(--copper-brightest); }
.site-header .tagline {
  margin: 0.25rem 0 0;
  color: var(--text-muted-dark);
  font-size: 0.9rem;
}

main {
  max-width: 62rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

.site-footer {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.25rem 2rem;
  color: var(--text-muted);
  font-size: 0.82rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

/* Navigation: ivory-on-graphite pills; copper current page */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.site-nav a {
  color: var(--ivory);
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--graphite-3);
  border-radius: 999px;
  font-size: 0.85rem;
}
.site-nav a:hover, .site-nav a:focus-visible {
  text-decoration: none;
  background: var(--graphite-2);
  border-color: var(--copper-bright);
}
.site-nav a[aria-current="page"] {
  background: var(--copper);
  border-color: var(--copper);
  color: #FFFFFF;
  font-weight: 600;
}

h1 { font-size: 1.5rem; margin: 0 0 0.75rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; color: var(--copper-dark); }
h3 { font-size: 1rem; margin: 0 0 0.25rem; }

.muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); min-width: 0; overflow-wrap: anywhere; }
.icon { width: 1em; height: 1em; flex: none; vertical-align: -0.12em; }

/* --- Status pills (label + color, never color-only) ------------------------ */

.pill {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid;
  white-space: nowrap;
}
.pill--verified { color: var(--verified); background: var(--verified-tint); border-color: var(--verified); }
.pill--hold { color: var(--unsafe); background: var(--unsafe-tint); border-color: var(--unsafe); }
.pill--risk { color: var(--unsafe); background: var(--unsafe-tint); border-color: var(--unsafe); }
.pill--info { color: var(--copper-dark); background: var(--copper-tint); border-color: var(--copper-dark); }
.pill--none { color: var(--text-muted); background: var(--ivory-alt); border-color: var(--border-strong); }

/* --- Evidence status labels (mono caps chips) ------------------------------- */

.status-label {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  background: var(--ivory-alt);
  vertical-align: middle;
}
.status-label--measured { color: var(--verified); border-color: var(--verified); }
.status-label--demonstrated { color: var(--copper-dark); border-color: var(--copper-dark); }
.status-label--offline { color: var(--text-muted); border-color: var(--border-strong); }
.status-label--counterfactual { color: var(--copper-dark); border-color: var(--copper-dark); }
.status-label--incomplete { color: var(--unsafe); border-color: var(--unsafe); }
.status-label--unverified { color: var(--unsafe); border-color: var(--unsafe); background: var(--unsafe-tint); }
.status-label--replay { color: var(--copper-dark); border-color: var(--copper-dark); background: var(--copper-tint); }

/* Forge state badges: inline SVG icon + text label + color */
.state-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  border: 1px solid;
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
}
.state-badge--verified { color: var(--verified); background: var(--verified-tint); border-color: var(--verified); }
.state-badge--hold { color: var(--unsafe); background: var(--unsafe-tint); border-color: var(--unsafe); }
.state-badge--unverified { color: var(--copper-dark); background: var(--copper-tint); border-color: var(--copper-dark); }
.state-badge--incomplete { color: var(--unsafe); background: var(--unsafe-tint); border-color: var(--unsafe); }

/* --- Notices ------------------------------------------------------------------ */

.notice {
  border: 1px solid var(--border);
  border-left: 4px solid var(--copper-dark);
  background: var(--copper-tint);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  font-size: 0.9rem;
}
.notice--warn { border-left-color: var(--unsafe); background: var(--unsafe-tint); }
.notice--info { border-left-color: var(--copper-dark); background: var(--copper-tint); }
.notice--verified { border-left-color: var(--verified); background: var(--verified-tint); }
.notice--unsafe { border-left-color: var(--unsafe); background: var(--unsafe-tint); }
.notice--neutral { border-left-color: var(--copper); background: var(--ivory-alt); }

/* --- Case list and cards ------------------------------------------------------- */

.case-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.case-card {
  background: var(--ivory-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
}
.case-card a {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--graphite);
}
.case-card a:hover, .case-card a:focus-visible { color: var(--copper-dark); }
.case-card .meta {
  margin: 0.35rem 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}

/* --- Trace timeline -------------------------------------------------------------- */

.trace {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  counter-reset: step;
}
.trace-step {
  position: relative;
  background: var(--ivory-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--copper-dark);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem 0.9rem 1.35rem;
}
.trace-step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0.6rem;
  top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}
.trace-step--verified { border-left-color: var(--verified); }
.trace-step--hold { border-left-color: var(--unsafe); }
.trace-step--risk { border-left-color: var(--unsafe); }
.trace-step--info { border-left-color: var(--copper-dark); }

.trace-step .step-title {
  margin: 0 0 0.35rem;
  font-weight: 600;
}
.trace-step .step-note {
  margin: 0.35rem 0 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.trace-step .step-note--authority {
  color: var(--unsafe);
  font-weight: 600;
}

/* --- Facts / definition lists ----------------------------------------------------- */

.facts {
  margin: 0;
  display: grid;
  gap: 0.25rem;
}
.facts div {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0.75rem;
}
.facts dt { color: var(--text-muted); }
.facts dd { margin: 0; font-family: var(--font-mono); overflow-wrap: anywhere; }

.reason-code {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--unsafe);
  display: inline-block;
  margin: 0.1rem 0.35rem 0.1rem 0;
}

/* --- Data table -------------------------------------------------------------------- */

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0;
  font-size: 0.9rem;
  background: var(--ivory-card);
}
.data-table th, .data-table td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.data-table thead th {
  color: var(--graphite);
  font-weight: 600;
  font-size: 0.82rem;
  border-top: 1px solid var(--border-strong);
}
.data-table tbody tr:nth-child(even) { background: var(--ivory-alt); }

/* --- Hero (light) --------------------------------------------------------------------- */

.hero {
  background: var(--ivory-card);
  border: 1px solid var(--border);
  border-top: 4px solid var(--copper);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.5rem 1.25rem;
  margin: 0 0 1.5rem;
}
.hero-title { font-size: 1.4rem; margin: 0 0 0.5rem; color: var(--graphite); }
.hero-principle { font-style: italic; color: var(--copper-dark); margin: 0 0 1rem; }
.hero-metrics {
  list-style: none; margin: 0 0 0.75rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
}
.metric { flex: 1 1 9rem; min-width: 9rem; }
.metric-value {
  display: block; font-family: var(--font-mono);
  font-size: 1.6rem; font-weight: 700; color: var(--verified);
}
.metric-value--none { color: var(--copper-dark); }
.metric-label { display: block; color: var(--text-muted); font-size: 0.85rem; }
.hero-caveat { font-size: 0.82rem; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
  margin: 1.4rem 0 0.85rem;
}
.hero-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 120ms ease;
}
.hero-action--primary,
.intake-form .button--primary {
  background: var(--copper);
  color: #FFFFFF;
  border-color: var(--copper);
}
.hero-action--secondary {
  background: var(--ivory-card);
  color: var(--graphite);
}
.hero-action:hover,
.hero-action:focus-visible {
  text-decoration: none;
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.hero-action--secondary:hover { background: var(--copper-tint); }

/* --- How-it-works process strip ---------------------------------------------------------- */

.how { margin: 0 0 1.5rem; }
.process-strip {
  list-style: none; margin: 0.75rem 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.process-step {
  flex: 1 1 9rem;
  background: var(--ivory-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--copper);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
}
.process-num {
  display: block; font-family: var(--font-mono);
  font-size: 0.72rem; color: var(--copper-dark); font-weight: 700;
}
.process-name { display: block; font-weight: 600; }
.process-note { display: block; color: var(--text-muted); font-size: 0.82rem; }
.how-list { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.how-list li { margin: 0.35rem 0; }

/* --- Experiment journey -------------------------------------------------------------------- */

.journey {
  list-style: none; margin: 0.75rem 0 0; padding: 0;
  display: grid; gap: 0.5rem;
}
.journey-step {
  background: var(--ivory-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--copper-dark);
  border-radius: var(--radius);
  padding: 0.7rem 1rem;
  display: flex; gap: 0.75rem; align-items: baseline; flex-wrap: wrap;
}
.journey-route { font-family: var(--font-mono); font-weight: 700; font-size: 0.85rem; }
.journey-step--deterministic { border-left-color: var(--verified); }
.journey-step--inference { border-left-color: var(--copper-dark); }
.journey-step--held { border-left-color: var(--unsafe); }

.zero-call {
  margin: 0.5rem 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* --- Batch panel grid ------------------------------------------------------------------------- */

.panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}
.panel-grid > .case-card { min-width: 0; margin: 0; }
.panel-grid .meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.panel-grid h3 { margin-top: 0; overflow-wrap: anywhere; }

main details {
  background: var(--ivory-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin: 0.75rem 0;
  padding: 0.9rem 1.1rem;
}
main details summary {
  color: var(--graphite);
  cursor: pointer;
  font-weight: 600;
}
main details summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
main details[open] summary { margin-bottom: 0.75rem; }
main details .data-table { margin-bottom: 0; }

/* --- Intake form (test application) -------------------------------------------------------------- */

.scenario-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  padding: 0;
  margin: 1rem 0 1.6rem;
  list-style: none;
}
.scenario-list li {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.4rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--ivory-card);
}
.scenario-chip {
  display: inline-block;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--graphite);
  font-weight: 700;
  text-decoration: none;
  background: var(--ivory-alt);
}
.scenario-chip--active {
  color: #FFFFFF;
  border-color: var(--copper);
  background: var(--copper);
}
.scenario-chip:hover,
.scenario-chip:focus-visible {
  text-decoration: none;
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.intake-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 860px;
  padding: 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--ivory-card);
  margin-bottom: 1.5rem;
}
.intake-form .field {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.4rem;
}
.intake-form label {
  font-weight: 600;
  color: var(--graphite);
}
.intake-form input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--ivory-alt);
  color: var(--graphite);
  font: inherit;
}
.intake-form input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.intake-form .button--primary {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 46px;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.intake-form .button--primary:hover,
.intake-form .button--primary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* ==========================================================================
   Copper Foundry product components (Control Center, J1/J2, Explorer,
   Journey, Base). Server-rendered only: no scripts, no external requests.
   ========================================================================== */

/* Forge hero (dark graphite, copper top rule) */
.forge-hero {
  background: var(--graphite);
  color: var(--text-dark);
  border: 1px solid var(--graphite-3);
  border-top: 4px solid var(--copper);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem 1.5rem;
  margin: 0 0 1.5rem;
}
.forge-hero h1 {
  font-size: 1.6rem;
  margin: 0 0 0.4rem;
  color: var(--ivory);
}
.forge-hero-kicker {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--copper-brightest);
  margin: 0 0 0.5rem;
}
.forge-hero-lede {
  font-size: 1.02rem;
  color: var(--text-muted-dark);
  max-width: 46rem;
  margin: 0 0 1rem;
}
.forge-hero a { color: var(--copper-brightest); }
.forge-hero .hero-actions { margin: 0.4rem 0; }
.forge-hero .hero-action { text-decoration: none; }
.forge-hero .hero-action--primary { color: #FFFFFF; }
.forge-hero .hero-action--secondary {
  background: transparent;
  color: var(--ivory);
  border-color: var(--graphite-3);
}
.forge-hero .hero-action--secondary:hover { background: var(--graphite-2); }
.forge-hero .hero-caveat { color: var(--text-muted-dark); }

/* Workflow strip: issue -> repair -> verification -> release */
.workflow {
  list-style: none;
  margin: 1rem 0 1.25rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  counter-reset: wf;
}
.workflow-step {
  position: relative;
  background: var(--ivory-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--copper);
  border-radius: var(--radius);
  padding: 0.8rem 0.9rem 0.8rem 2.4rem;
}
.workflow-step::before {
  counter-increment: wf;
  content: counter(wf);
  position: absolute;
  left: 0.75rem;
  top: 0.85rem;
  width: 1.15em;
  height: 1.15em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--copper);
  color: #FFFFFF;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
}
.workflow-step--human { border-top-color: var(--verified); }
.workflow-step--human::before { background: var(--verified); }
.workflow-name { display: block; font-weight: 700; }
.workflow-note { display: block; color: var(--text-muted); font-size: 0.82rem; }

/* Statement cards: AI repairs / Evidence verifies / Humans release */
.statement-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0 1.25rem;
}
.statement-card {
  background: var(--ivory-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1rem;
}
.statement-card h3 { margin: 0 0 0.3rem; }
.statement-card p { margin: 0; font-size: 0.88rem; color: var(--text-muted); }
.statement-card .statement-mark { color: var(--copper-dark); font-weight: 700; }
.statement-card--human { border-top: 3px solid var(--verified); }
.statement-card--ai { border-top: 3px solid var(--copper); }
.statement-card--evidence { border-top: 3px solid var(--copper-dark); }

/* Challenge / experience cards */
.challenge-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 0.75rem 0 1.25rem;
}
.challenge-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: var(--ivory-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  text-decoration: none;
}
.challenge-card:hover { border-color: var(--copper); text-decoration: none; }
.challenge-card h3 { margin: 0; }
.challenge-card p { margin: 0; font-size: 0.85rem; color: var(--text-muted); }
.challenge-card .challenge-cta {
  margin-top: auto;
  color: var(--copper-dark);
  font-weight: 700;
  font-size: 0.85rem;
}

/* Inner-page header (J1/J2/Explorer/Journey) */
.page-header { margin: 0 0 1.25rem; }
.page-header .crumb {
  font-size: 0.82rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
  margin: 0 0 0.3rem;
}
.page-header h1 { margin: 0 0 0.3rem; }
.page-header .page-lede { margin: 0; max-width: 46rem; }

/* J1 before/after toggle */
.repair-toggle {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin: 0.75rem 0 1rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--ivory-card);
}
.repair-toggle .toggle-label { font-weight: 700; font-size: 0.85rem; color: var(--text-muted); }
.repair-toggle a {
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--graphite);
  background: var(--ivory-alt);
  text-decoration: none;
}
.repair-toggle a:hover { border-color: var(--copper); text-decoration: none; }
.repair-toggle a[aria-pressed="true"] {
  background: var(--copper);
  border-color: var(--copper);
  color: #FFFFFF;
}
.repair-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--ivory-card);
  padding: 1rem 1.1rem;
  margin: 0.75rem 0;
}
.repair-panel--defective { border-left: 4px solid var(--unsafe); }
.repair-panel--corrected { border-left: 4px solid var(--verified); }
.repair-panel h3 { margin-top: 0; }

/* Source code window */
.code-window {
  background: var(--graphite);
  border: 1px solid var(--graphite-3);
  border-radius: var(--radius);
  margin: 0.5rem 0;
  overflow-x: auto;
}
.code-window .code-title {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--copper-brightest);
  padding: 0.45rem 0.9rem;
  border-bottom: 1px solid var(--graphite-3);
}
.code-window pre {
  margin: 0;
  padding: 0.75rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ivory);
  white-space: pre;
}
.code-window pre .code-diff-add { color: var(--verified-bright); font-weight: 700; }
.code-window pre .code-diff-del { color: var(--unsafe-bright); }
.code-window pre .code-diff-hunk { color: var(--text-muted-dark); }

/* Evidence record grid (explorer, replay disclosures) */
.evidence-grid {
  list-style: none;
  margin: 0.75rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.evidence-record {
  background: var(--ivory-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.8rem 0.9rem;
  font-size: 0.88rem;
}
.evidence-record h3 {
  margin: 0 0 0.25rem;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.record-id {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.evidence-record .record-id {
  font-size: 0.8rem;
}
.evidence-record p { margin: 0.25rem 0 0; color: var(--text-muted); }
.evidence-record p a { font-weight: 600; }

/* J2 scenario cards */
.scenario-card-grid {
  list-style: none;
  margin: 0.75rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.scenario-card {
  background: var(--ivory-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--copper);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.scenario-card--rejected { border-left-color: var(--unsafe); }
.scenario-card h3 { margin: 0 0 0.25rem; font-size: 0.95rem; }
.scenario-card p { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--text-muted); }
.scenario-card .claim-vs-gate {
  margin-top: 0.5rem;
  display: grid;
  gap: 0.35rem;
}

/* Guided journey list */
.journey-page-list {
  list-style: none;
  margin: 0.75rem 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  counter-reset: js;
}
.journey-page-item {
  position: relative;
  background: var(--ivory-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem 0.75rem 2.8rem;
}
.journey-page-item::before {
  counter-increment: js;
  content: counter(js);
  position: absolute;
  left: 0.9rem;
  top: 0.9rem;
  width: 1.35rem;
  height: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--copper);
  color: #FFFFFF;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
}
.journey-page-item a { font-weight: 700; }
.journey-page-item .muted { display: block; font-size: 0.85rem; }

/* Responsive ------------------------------------------------------------------------ */

@media (max-width: 44rem) {
  .scenario-list,
  .intake-form {
    grid-template-columns: 1fr;
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-action {
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 40rem) {
  .facts div { grid-template-columns: 1fr; gap: 0; }
  .facts dt { margin-top: 0.35rem; }
  .site-header { padding: 0.85rem 1rem; }
  main { padding: 1rem 1rem 2.5rem; }
  .data-table { display: block; overflow-x: auto; }
  .workflow { grid-template-columns: 1fr; }
  .statement-row { grid-template-columns: 1fr; }
  .challenge-grid { grid-template-columns: 1fr; }
  .evidence-grid { grid-template-columns: 1fr; }
  .scenario-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 50rem) {
  .panel-grid {
    grid-template-columns: 1fr;
  }
  .scenario-card-grid {
    grid-template-columns: 1fr;
  }
}/* Forge source workbench */
.forge-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:2rem 0}.forge-card{padding:1.4rem;border:1px solid #79543d;border-radius:12px;background:#201b18}.forge-card h2{font-size:1.25rem}.button{display:inline-block;padding:.7rem 1rem;border:1px solid #c78352;border-radius:6px;color:#ffc18d}main{max-width:1160px;margin:auto;padding:2rem 1.2rem}dd,code,pre,p,li{overflow-wrap:anywhere}dd{margin-left:0;margin-bottom:1rem}pre{white-space:pre-wrap}nav{display:flex;flex-wrap:wrap;gap:1rem}details{margin:1.5rem 0}section{margin-top:2rem}@media(max-width:800px){.forge-grid{grid-template-columns:1fr}}@media(max-width:360px){main{padding:1rem}.site-header{padding:1rem}}
.forge-card{color:#f3e8dd}.forge-card h2{color:#ffc18d}.forge-card p{color:#f3e8dd}
button.button{font:inherit;cursor:pointer;background:transparent}
button.button:disabled{opacity:.55;cursor:progress}
/* Live run progress (AJAX run flow — real engine, no simulated stages) */
.run-progress-track{height:10px;border:1px solid #79543d;border-radius:999px;background:#201b18;overflow:hidden;margin:.6rem 0 .6rem}
.run-progress-fill{height:100%;width:8%;background:linear-gradient(90deg,#8f3d20,#c78352);transition:width 1s linear;border-radius:999px}
#run-progress h2, #run-result h2 {font-size:1.2rem;margin-top:0}
/* Safety Challenge guided journey — visually distinct from the Workbench card grid */
.safety-journey{list-style:none;margin:1.5rem 0;padding:0;display:grid;gap:1rem;counter-reset:sj}
.safety-journey > li{position:relative;padding:1.4rem 1.4rem 1.4rem 3.6rem;border:1px solid #79543d;border-left:5px solid #c78352;border-radius:12px;background:#201b18;counter-increment:sj}
.safety-journey > li::before{content:counter(sj);position:absolute;left:1.1rem;top:1.45rem;width:1.7rem;height:1.7rem;display:inline-flex;align-items:center;justify-content:center;background:#c78352;color:#17212B;border-radius:999px;font-family:var(--font-mono);font-weight:700}
.safety-journey > li.attack::before{background:#e06a5e}
.safety-journey > li.forgery::before{background:#d98b5f}
.safety-journey > li h2{margin-top:0}
@media(max-width:800px){.safety-journey > li{padding:1.2rem 1.1rem 1.2rem 3rem}.safety-journey > li::before{left:.8rem}}