/* BUILD16-SHADOW-FRONTIER-VERTICAL-001 -- Frontier Labs vertical.
   Additive stylesheet. Uses only the site's own theme variables (Light /
   Medium / Dark). Reuses .fip-chip / .fip-s-* (inspect-siw.css) and
   .provenance-header / .provenance-not-established (lifecycle.css) and the
   .scenario-* classes already defined in human-vertical.css -- this file
   adds only what Frontier needs beyond that shared base. */

/* ---------- landing ---------- */
.frontier-hero { padding: 20px 0 8px; }
.frontier-hero .lead { max-width: 700px; color: var(--ink-soft); }

.capability-diagram {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
  margin: 22px 0; background: var(--surface); box-shadow: var(--shadow);
}
.capability-diagram > div { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; background: var(--surface-2); }
.capability-diagram h2 { font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px; }
.capability-diagram .cd-arrow { text-align: center; font-size: 1.6rem; color: var(--ink-soft); }
.capability-diagram .cd-reach { border-left: 4px solid var(--historical); }
.capability-diagram .cd-gate { border-left: 4px solid var(--accent); text-align: center; }
.capability-diagram .cd-permit { border-left: 4px solid var(--brand); }
@media (max-width: 760px) { .capability-diagram { grid-template-columns: 1fr; } .capability-diagram .cd-arrow { transform: rotate(90deg); } }

/* ---------- synthetic/demonstration marker ---------- */
.frontier-synthetic-badge { margin: 0 0 16px; }

/* ---------- three-panel signature control surface ---------- */
.frontier-panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 20px; }
.frontier-panel { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); padding: 16px 18px; }
.frontier-panel-title { display: flex; align-items: center; gap: 8px; font: 800 .78rem/1.3 var(--sans); letter-spacing: .05em; text-transform: uppercase; margin: 0 0 10px; }
.frontier-panel-capability { border-left: 4px solid var(--historical); }
.frontier-panel-capability .frontier-panel-title { color: var(--historical); }
.frontier-panel-standing { border-left: 4px solid var(--accent); }
.frontier-panel-standing .frontier-panel-title { color: var(--accent); }
.frontier-panel-consequence { border-left: 4px solid var(--brand); }
.frontier-panel-consequence .frontier-panel-title { color: var(--brand); }
@media (max-width: 900px) { .frontier-panels { grid-template-columns: 1fr; } }

.frontier-panel dl { margin: 0; display: grid; gap: 8px; }
.frontier-panel dt { font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.frontier-panel dd { margin: 2px 0 0; font-size: .92rem; }

/* ---------- synthetic controls ---------- */
.frontier-controls { border: 1px dashed var(--ink-soft); border-radius: var(--radius-sm); padding: 14px 16px; margin: 0 0 16px; background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.frontier-controls-label { font: 800 .7rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px; }
.frontier-control-group { margin: 0 0 12px; }
.frontier-control-group:last-child { margin-bottom: 0; }
.frontier-control-group legend { font: 700 .82rem/1.3 var(--sans); color: var(--ink); padding: 0; margin: 0 0 6px; }
.frontier-control-group .frontier-options { display: flex; flex-wrap: wrap; gap: 8px; }
.frontier-control-group label {
  display: inline-flex; align-items: center; gap: 6px; font-size: .84rem;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; background: var(--surface);
}
.frontier-control-group input[type="radio"] { accent-color: var(--brand); }
.frontier-control-group label:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); font-weight: 700; }

/* ---------- gate result (live, deterministic) ---------- */
.frontier-gate-result { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
.frontier-gate-reason { margin: 0; color: var(--ink-soft); font-size: .9rem; }

/* ---------- implementation-status panel ---------- */
.frontier-status-panel { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); padding: 16px 18px; margin: 0 0 20px; }
.frontier-status-row { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: start; margin: 10px 0 0; }
.frontier-status-row:first-of-type { margin-top: 12px; }
.frontier-status-row p { margin: 0; font-size: .88rem; color: var(--ink-soft); }

/* ---------- progression (scenario 6) ---------- */
.frontier-progression { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 16px; }
.frontier-progression .stage { display: flex; align-items: center; gap: 8px; }
.frontier-progression .stage-arrow { color: var(--ink-soft); }