/* Design tokens are defined once, in /edu_common.css, which every page
   carrying this stylesheet also loads and loads first. They were duplicated
   here and in four sibling stylesheets until 24 Aug 2026; six copies agreed
   only by hand, and a colour change meant six edits or a half-applied
   redesign. The shared file is now the single definition.
   Only this app's own tokens remain below. */
:root {
  --accent-dim: #e3f3fa;
}

  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.6; min-height: 100vh; }

  /* Front page (12 Aug) — sighted copy, placed per
     2026-08-12_briefs_od_d1dev_front_page_copy_corrections_and_promotion_v1_0.md.
     Own section, above the tool; deliberately not styled as another
     .step-card so it doesn't read as one more step in the process. */
  .cr-front { border-bottom: 1px solid var(--rule); background: var(--paper); }
  .cr-front-inner { max-width: 640px; margin: 0 auto; padding: 3.5rem 1.5rem 3rem; }
  .cr-front-eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.75rem; }
  .cr-front-title { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; line-height: 1.35; color: var(--ink); margin-bottom: 1rem; }
  .cr-front-sub { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink-mid); margin-bottom: 2.25rem; }
  .cr-front-h2 { font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; color: var(--ink); margin: 2rem 0 0.75rem; }
  .cr-front-p { font-family: var(--font-display); font-size: 0.95rem; line-height: 1.7; color: var(--ink-mid); margin-bottom: 0.9rem; }
  .cr-front-p strong { color: var(--ink); }
  .cr-front-cta {
    display: inline-block; margin-top: 1.75rem; font-family: var(--font-body); font-weight: 600;
    font-size: 0.9rem; color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-light);
    padding-bottom: 0.15rem;
  }
  .cr-front-cta:hover { color: var(--ink); border-color: var(--ink); }

  header {
    border-bottom: 2px solid var(--ink); padding: 1.75rem 3rem 1.5rem;
    display: flex; align-items: baseline; gap: 2rem; flex-wrap: wrap;
  }
  .logo { font-family: var(--font-display); font-weight: 300; font-size: 1.4rem; letter-spacing: -0.02em; }
  .logo em { font-style: italic; color: var(--accent); }
  .phase-tag {
    font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--paper); background: var(--accent);
    padding: 0.25rem 0.65rem; border-radius: 2px;
  }
  .nav-links { margin-left: auto; display: flex; gap: 1.5rem; }
  .nav-link {
    font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-light); text-decoration: none;
    border-bottom: 1px solid transparent; transition: color 0.15s, border-color 0.15s;
  }
  .nav-link:hover { color: var(--accent); border-color: var(--accent); }

  .workspace { max-width: 1200px; margin: 0 auto; padding: 2.5rem 3rem; }

  .section-head {
    font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--ink-light); margin-bottom: 1.25rem;
    display: flex; align-items: center; gap: 0.75rem;
  }
  .section-head::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

  /* ── Pyodide status ── */
  .pyodide-status {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem;
    border-radius: 3px; margin-bottom: 2rem; font-size: 0.82rem;
    font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em;
    border: 1px solid var(--rule); background: white;
  }
  .pyodide-status.loading { color: var(--warning); border-color: var(--warning-border); background: var(--warning-bg); }
  .pyodide-status.ready   { color: var(--success); border-color: var(--success-border); background: var(--success-bg); }
  .pyodide-status.error   { color: var(--accent);  border-color: #e8b4aa; background: #fdf0ee; }
  .py-spinner { width: 14px; height: 14px; border: 2px solid var(--warning-border); border-top-color: var(--warning); border-radius: 50%; animation: spin 0.7s linear infinite; flex-shrink: 0; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ── Upload zone ── */
  .upload-zone {
    border: 2px dashed var(--paper-dark); border-radius: 4px; padding: 1.5rem 2rem;
    display: flex; align-items: center; gap: 1.5rem; background: white; cursor: pointer;
    transition: border-color 0.2s, background 0.2s; position: relative; margin-bottom: 1.5rem;
  }
  .upload-zone:hover, .upload-zone.drag-over { border-color: var(--accent-light); background: #fdf9f7; }
  .upload-zone.loaded { border-style: solid; border-color: var(--success); background: var(--success-bg); cursor: default; }
  .upload-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
  .upload-zone.loaded input { pointer-events: none; }
  .upload-icon { font-size: 1.8rem; flex-shrink: 0; color: var(--ink-light); }
  .upload-zone.loaded .upload-icon { color: var(--success); }
  .upload-body strong { display: block; font-size: 0.88rem; color: var(--ink); margin-bottom: 0.2rem; }
  .upload-zone.loaded .upload-body strong { color: var(--success); }
  .upload-sub { font-family: var(--font-mono); font-size: 0.65rem; color: var(--ink-light); }
  .upload-stats { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-light); margin-top: 0.5rem; }
  .upload-clear { position: absolute; top: 0.5rem; right: 0.6rem; background: none; border: none; cursor: pointer; color: var(--ink-light); font-size: 0.85rem; }
  .upload-clear:hover { color: var(--accent); }

  /* ── Step cards ── */
  .step-card {
    background: white; border: 1px solid var(--rule); border-radius: 4px;
    margin-bottom: 1.5rem; overflow: hidden;
  }
  .step-card-header {
    padding: 1rem 1.5rem; border-bottom: 1px solid var(--paper-mid);
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
  }
  .step-card-title {
    display: flex; align-items: center; gap: 0.75rem;
  }
  .step-num {
    font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em;
    text-transform: uppercase; background: var(--ink); color: var(--paper);
    padding: 0.2rem 0.5rem; border-radius: 2px;
  }
  .step-num.done { background: var(--success); }
  .step-num.active { background: var(--accent); }
  .step-name { font-weight: 600; font-size: 0.9rem; color: var(--ink); }
  .step-card-body { padding: 1.25rem 1.5rem; }

  /* ── Stats row ── */
  .stats-row { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
  .stat-item { display: flex; flex-direction: column; gap: 0.1rem; }
  .stat-val { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 500; color: var(--ink); }
  .stat-label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-light); }

  /* ── Threshold controls ── */
  .threshold-modes {
    display: flex; gap: 0; border: 1px solid var(--paper-dark);
    border-radius: 3px; overflow: hidden; margin-bottom: 1.25rem;
  }
  .tmode-opt { flex: 1; position: relative; }
  .tmode-opt input { position: absolute; opacity: 0; width: 0; }
  .tmode-opt label {
    display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
    padding: 0.65rem 0.75rem; cursor: pointer; background: white;
    font-family: var(--font-body); font-size: 0.75rem; font-weight: 500;
    letter-spacing: 0.03em; border-right: 1px solid var(--paper-dark);
    transition: background 0.15s, color 0.15s; text-align: center; margin: 0;
  }
  .tmode-opt:last-child label { border-right: none; }
  .tmode-opt label span.tmode-sub { font-size: 0.62rem; color: var(--ink-light); font-weight: 400; font-family: var(--font-mono); }
  .tmode-opt input:checked + label { background: var(--ink); color: var(--paper); }
  .tmode-opt input:checked + label .tmode-sub { color: var(--paper-dark); }

  /* The normalise question sits above the threshold options and is
     independent of them: it decides what the threshold is compared against,
     not where the threshold sits. */
  .normalise-row {
    display: flex; gap: 0.6rem; align-items: flex-start; cursor: pointer;
    padding: 0.7rem 0.85rem; border: 1px solid var(--paper-dark); border-radius: 3px;
    background: white;
  }
  .normalise-row input { margin-top: 0.2rem; flex: none; }
  .normalise-row span {
    font-family: var(--font-body); font-size: 0.78rem; line-height: 1.5;
    color: var(--ink-light);
  }
  .normalise-row span strong { color: var(--ink); }

  .slider-row {
    display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem;
    padding: 0.85rem 1rem; background: var(--paper); border-radius: 3px;
    border: 1px solid var(--rule);
  }
  .slider-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mid); white-space: nowrap; }
  .slider-track { flex: 1; }
  input[type="range"].threshold-slider {
    width: 100%; height: 4px; -webkit-appearance: none; appearance: none;
    background: var(--paper-dark); border-radius: 2px; outline: none; cursor: pointer;
  }
  input[type="range"].threshold-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
    background: var(--accent); cursor: pointer; border: 2px solid white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  }
  input[type="range"].threshold-slider::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%; background: var(--accent);
    cursor: pointer; border: 2px solid white;
  }
  .slider-val {
    font-family: var(--font-mono); font-size: 0.88rem; font-weight: 500;
    color: var(--accent); min-width: 2.5rem; text-align: center;
  }
  .slider-tick-labels {
    display: flex; justify-content: space-between;
    font-family: var(--font-mono); font-size: 0.58rem; color: var(--ink-light);
    margin-top: 0.25rem; padding: 0 1px;
  }

  /* ── Bin stats grid ── */
  .bin-stats-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem; margin-bottom: 1.25rem;
  }
  .bin-stat-card {
    background: white; border: 1px solid var(--rule); border-radius: 3px;
    padding: 0.75rem 1rem;
  }
  .bin-stat-card.warn { border-color: var(--warning-border); background: var(--warning-bg); }
  .bin-stat-card.good { border-color: var(--success-border); background: var(--success-bg); }
  .bsc-val { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 500; color: var(--ink); line-height: 1; margin-bottom: 0.2rem; }
  .bsc-val.warn { color: var(--warning); }
  .bsc-val.good { color: var(--success); }
  .bsc-label { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-light); line-height: 1.3; }

  /* ── Calibration criteria ── */
  .calibration-checks { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.25rem; }
  .cal-check {
    display: flex; align-items: center; gap: 0.6rem;
    font-family: var(--font-body); font-size: 0.78rem; color: var(--ink-mid);
  }
  .cal-icon { font-size: 0.85rem; flex-shrink: 0; width: 1.2rem; text-align: center; }

  /* ── Heatmap ── */
  .heatmap-section { margin-bottom: 1.25rem; }
  .heatmap-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.5rem; flex-wrap: wrap; gap: 0.5rem;
  }
  .heatmap-label { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-light); }
  .heatmap-legend { display: flex; align-items: center; gap: 0.75rem; }
  .legend-item { display: flex; align-items: center; gap: 0.35rem; font-family: var(--font-mono); font-size: 0.6rem; color: var(--ink-light); }
  .legend-swatch { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }
  .heatmap-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 3px; background: white; }
  canvas#dtm-heatmap { display: block; image-rendering: pixelated; }
  .heatmap-note { font-family: var(--font-display); font-style: italic; font-size: 0.72rem; color: var(--ink-light); margin-top: 0.35rem; }

  .confirm-bin-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: 0.5rem; border-top: 1px solid var(--rule); }
  .confirm-bin-note { font-family: var(--font-display); font-style: italic; font-size: 0.82rem; color: var(--ink-light); }

  /* ── Action buttons ── */
  .btn {
    border: none; border-radius: 3px; padding: 0.7rem 1.5rem; font-family: var(--font-body);
    font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    cursor: pointer; transition: background 0.15s, transform 0.1s;
  }
  .btn:active:not(:disabled) { transform: translateY(1px); }
  .btn:disabled { opacity: 0.4; cursor: not-allowed; }
  .btn-primary { background: var(--ink); color: var(--paper); }
  .btn-primary:hover:not(:disabled) { background: var(--accent); }
  .btn-success { background: var(--success); color: white; }
  .btn-success:hover:not(:disabled) { background: #1a5a3a; }
  .btn-outline { background: none; border: 1px solid var(--paper-dark); color: var(--ink-mid); }
  .btn-outline:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); background: var(--paper); }

  .btn-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }

  /* Contact capture (12 Aug) - plainest possible field, no marketing
     sentence beside it, per Annex A item 3/A2. */
  .contact-capture { display: flex; align-items: baseline; gap: 0.6rem; margin-top: 1.25rem; }
  .contact-capture label { font-family: var(--font-body); font-size: 0.78rem; color: var(--ink-mid); white-space: nowrap; }
  .contact-capture input {
    font-family: var(--font-body); font-size: 0.85rem; padding: 0.4rem 0.6rem;
    border: 1px solid var(--paper-dark); border-radius: 3px; color: var(--ink);
    max-width: 260px; flex: 1;
  }
  .contact-capture input:focus { outline: none; border-color: var(--accent-light); }

  /* ── TTM table ── */
  .matrix-wrap { overflow: auto; max-height: 400px; border: 1px solid var(--rule); border-radius: 3px; }
  .matrix-table { border-collapse: collapse; font-size: 0.68rem; white-space: nowrap; min-width: 100%; }
  .matrix-table thead { position: sticky; top: 0; z-index: 2; }
  .matrix-table th {
    background: var(--ink); color: var(--paper); padding: 0.4rem 0.5rem;
    font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.06em; text-transform: uppercase;
    text-align: center; border-right: 1px solid #333; font-weight: 400;
  }
  .matrix-table th:first-child { text-align: left; min-width: 160px; position: sticky; left: 0; background: var(--ink); }
  .matrix-table tbody tr:nth-child(even) { background: #fafaf8; }
  .matrix-table tbody tr:hover { background: var(--accent-dim); }
  .matrix-table td {
    padding: 0.35rem 0.5rem; border-right: 1px solid var(--paper-mid);
    text-align: center; font-family: var(--font-mono); color: var(--ink-mid);
    border-bottom: 1px solid var(--paper-mid);
  }
  .matrix-table td:first-child {
    text-align: left; position: sticky; left: 0; background: white; font-weight: 500;
    color: var(--ink); z-index: 1;
  }
  .matrix-table tbody tr:hover td:first-child { background: var(--accent-dim); }
  .ttm-high { color: var(--accent) !important; font-weight: 700; }
  .ttm-mid  { color: var(--ink) !important; font-weight: 500; }
  .ttm-zero { color: var(--paper-dark) !important; }

  /* ── Error ── */
  .error-box { background: #fdf0ee; border: 1px solid #e8b4aa; border-radius: 3px; padding: 1rem 1.25rem; color: var(--accent); font-size: 0.82rem; margin-bottom: 1rem; }
  .error-box strong { display: block; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.25rem; }

  .callout { background: white; border-left: 3px solid var(--accent); padding: 1rem 1.25rem; margin-bottom: 2rem; font-family: var(--font-display); font-size: 0.88rem; line-height: 1.7; color: var(--ink-mid); }
  .callout strong { color: var(--ink); font-family: var(--font-body); font-size: 0.82rem; }


  /* Declared-parameters transparency, read-only (spec §3.1-3.2, Annex A
     §A5). Status badges distinguish Fixed/Calibrated/Open per spec §3.2's
     explicit instruction that Fixed constants must be visually
     unmistakable from calibrated, per-corpus values. */
  .params-panel {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem; padding: 1rem; background: var(--paper-mid);
    border: 1px solid var(--rule); border-radius: 3px; margin-bottom: 1.25rem;
  }
  .param-item { display: flex; flex-direction: column; gap: 0.15rem; }
  .param-label { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-light); display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
  .param-val { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink); font-weight: 500; }
  /* What the setting does, in the researcher's terms. Added 26 Aug 2026:
     the panel previously gave a name, a number and a status word, none of
     which told the reader what the number governed. */
  .param-does { font-family: var(--font-body); font-size: 0.68rem; line-height: 1.45; color: var(--ink-light); }

  /* The split-half scan behind the gate statistic. The operating block
     count is marked so a reader can see at a glance whether the k in use is
     where the grid actually peaks. */
  .ari-scan { margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid var(--rule); }
  .ari-scan-title {
    font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-light); margin-bottom: 0.4rem;
  }
  .ari-scan-scroll { overflow-x: auto; }
  .ari-table { border-collapse: collapse; font-family: var(--font-mono); font-size: 0.68rem; }
  .ari-table th, .ari-table td { padding: 0.2rem 0.5rem; text-align: right; white-space: nowrap; }
  .ari-table thead th { color: var(--ink-light); font-weight: 500; border-bottom: 1px solid var(--rule); }
  .ari-table tbody th { text-align: left; color: var(--ink-light); font-weight: 500; }
  .ari-table .ari-operating { background: var(--paper-dark); }
  .ari-table td.ari-best { font-weight: 600; color: var(--accent); }
  .ari-scan-note { font-family: var(--font-body); font-size: 0.68rem; line-height: 1.5; color: var(--ink-light); margin: 0.5rem 0 0; }

  /* Stability distribution across concepts. Bars below the threshold are
     drawn in the warning colour so the split is readable without counting. */
  .stability-dist { margin-bottom: 1.25rem; padding: 0.8rem 0.9rem; border: 1px solid var(--rule); border-radius: 3px; }
  .sd-title {
    font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-light); margin-bottom: 0.6rem;
  }
  .sd-chart { display: flex; align-items: flex-end; gap: 3px; height: 78px; }
  .sd-bar { flex: 1; display: flex; flex-direction: column; height: 100%; }
  .sd-col { flex: 1; display: flex; align-items: flex-end; }
  .sd-fill { width: 100%; min-height: 1px; border-radius: 1px 1px 0 0; }
  .sd-fill.sd-under { background: var(--warning); }
  .sd-fill.sd-over  { background: var(--accent); }
  .sd-tick { font-family: var(--font-mono); font-size: 0.52rem; color: var(--ink-light); text-align: center; padding-top: 0.2rem; }
  .sd-note { font-family: var(--font-body); font-size: 0.68rem; line-height: 1.5; color: var(--ink-light); margin: 0.6rem 0 0; }

  .handoff-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin: 0 0 1.25rem; }
  .handoff-note { font-family: var(--font-body); font-size: 0.68rem; line-height: 1.45; color: var(--ink-light); flex: 1 1 16rem; }
  .param-status {
    font-size: 0.52rem; letter-spacing: 0.04em; padding: 0.05rem 0.35rem;
    border-radius: 2px; text-transform: uppercase;
  }
  .param-status.param-fixed { background: var(--paper-dark); color: var(--ink-mid); }
  .param-status.param-calibrated { background: var(--accent-dim); color: var(--accent); }
  .param-status.param-open { background: var(--warning-bg); color: var(--warning); }

  /* Vocabulary discipline (spec §3.4): "role classification" is this
     four-role scheme (Core/Boundary display groupings + four leaves) and
     must read as distinct from "concept typology" (the fixed Stage-1
     coding frame) wherever both terms could appear near each other. */
  .vocab-note { font-family: var(--font-display); font-style: italic; font-size: 0.78rem; color: var(--ink-light); margin-bottom: 1.25rem; }
  .vocab-note strong { font-style: normal; color: var(--ink-mid); }

  /* Role taxonomy: Core{Distinguishing,Bridging,Anchoring} / Boundary{Weak,Orthogonal}
     per corres_methodology_specification_v2_0.md §2.6/§3.4 and
     artie/corres/role_vocabulary.json (source of truth, v3.0.0 - anchoring
     added 3 Aug by AD ruling). "core"/"boundary"/"border"/"unclassified
     core" must never be an assignable role VALUE - category names are
     display groupings only. Backend returns the flat leaf value (or null
     for UNRESOLVED); grouping into Core/Boundary happens here, client-side,
     matching role_vocabulary.json. */
  .role-badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.04em;
    padding: 0.2rem 0.5rem; border-radius: 2px; white-space: nowrap;
  }
  .role-badge .tier { opacity: 0.7; }
  .role-core-distinguishing { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
  .role-core-bridging       { background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent-light); }
  .role-core-anchoring      { background: #f0ecf7; color: #6b4a9c; border: 1px solid #d9cce8; }
  .role-boundary-weak       { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
  .role-boundary-orthogonal { background: var(--paper-mid); color: var(--ink-light); border: 1px solid var(--rule); }

  /* Status labelling (spec §3.3: warnings "not logged - visible to the
     person reading the result"; status travels with the number, not a footnote) */
  .status-tag {
    font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.08em;
    text-transform: uppercase; padding: 0.1rem 0.4rem; border-radius: 2px;
    margin-left: 0.4rem;
  }
  .status-certified   { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
  .status-exploratory { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }

  /* Stability certificates: earned/not-earned per concept; "no
     certificates" is a real, non-error result - see .cert-none-banner */
  .cert-icon { font-size: 0.85rem; }
  .cert-icon.earned { color: var(--success); }
  .cert-icon.not-earned { color: var(--ink-light); opacity: 0.5; }
  .cert-none-banner {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.1rem;
    background: var(--paper-mid); border: 1px solid var(--rule); border-radius: 3px;
    font-family: var(--font-display); font-size: 0.85rem; color: var(--ink-mid); margin-bottom: 1.25rem;
  }

  /* Prominent warnings (spec §3.3) - never logged only, always visible. */
  .warnings-block { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.25rem; }
  .warning-banner {
    padding: 0.75rem 1rem; border-radius: 3px; font-size: 0.82rem;
    font-family: var(--font-body); line-height: 1.5;
  }
  .warning-banner strong { display: block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.25rem; }
  .warning-fail        { background: #fdf0ee; color: var(--accent); border: 1px solid #e8b4aa; }
  .warning-pass         { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
  .warning-unavailable  { background: var(--paper-mid); color: var(--ink-light); border: 1px dashed var(--rule); }

  /* Five-stage demonstration sequence (spec §3.6 via d1dev brief) */
  .stage-head { display: flex; align-items: baseline; gap: 0.75rem; margin: 2rem 0 0.5rem; padding-top: 1.5rem; border-top: 2px solid var(--ink); }
  #stage-1 .stage-head { border-top: none; padding-top: 0; margin-top: 0; }
  .stage-num { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 0.2rem 0.6rem; border-radius: 2px; }
  .stage-name { font-weight: 600; font-size: 1rem; color: var(--ink); }
  .panel-sub { font-family: var(--font-display); font-style: italic; font-size: 0.8rem; color: var(--ink-light); margin-bottom: 1rem; }
  /* Panel caption (4 Aug): none of the six real-path panels carry a
     baked-in title/suptitle any more (v3.0 §5's format spec) - that text
     lives only in PanelImage.caption, rendered visibly here rather than
     left as alt-text alone. Distinct from .panel-sub (this build's own
     pedagogical framing) - caption is the backend's own account of what
     the figure shows. */
  .panel-caption { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-mid); background: var(--paper-mid); border-radius: 2px; padding: 0.4rem 0.6rem; margin: 0.5rem 0 1rem; }

  /* Panel B: alphabetical, structure-blind concept list */
  .concept-list { display: flex; flex-direction: column; gap: 0.4rem; }
  .concept-row {
    display: grid; grid-template-columns: 1fr auto auto auto; gap: 1rem; align-items: center;
    padding: 0.6rem 0.85rem; border: 1px solid var(--rule); border-radius: 3px; background: white;
  }
  .concept-row-term { font-weight: 500; color: var(--ink); }
  .concept-row-stat { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-mid); text-align: right; }
  .concept-row-stat .cs-label { display: block; font-size: 0.55rem; color: var(--ink-light); letter-spacing: 0.06em; text-transform: uppercase; }

  /* Panel D: role space scatter (primary evidentiary weight, brief §2) */
  .role-space-wrap { border: 1px solid var(--rule); border-radius: 3px; background: white; padding: 1rem; overflow: auto; }
  .role-space-legend { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.75rem; font-family: var(--font-mono); font-size: 0.62rem; color: var(--ink-light); }
  .role-space-legend .legend-item { display: flex; align-items: center; gap: 0.35rem; }

  /* Panel E: BEA-seriated order */
  .bea-order-strip { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
  .bea-order-item {
    font-family: var(--font-mono); font-size: 0.68rem; padding: 0.3rem 0.6rem;
    border-radius: 2px; background: var(--paper-mid); color: var(--ink-mid);
    border: 1px solid var(--rule);
  }
  .bea-adjacency-stat { display: flex; gap: 2rem; flex-wrap: wrap; }

  /* Panel C: inherits Panel E's ordering - never independently re-derived */
  .panel-c-note { font-family: var(--font-display); font-style: italic; font-size: 0.75rem; color: var(--ink-light); margin-bottom: 1rem; }

  @media (max-width: 800px) {
    .workspace { padding: 1.5rem; }
    header { padding: 1.25rem 1.5rem; }
    .frame-name-row { grid-template-columns: 1fr; }
    .concept-row { grid-template-columns: 1fr; text-align: left; }
    .concept-row-stat { text-align: left; }
  }


/* Input scale table (CD corres_beta_copy v0.1, "What you need") */
.cr-scale { border-collapse: collapse; margin: 0.75rem 0; font-size: 0.9rem; }
.cr-scale td { padding: 0.25rem 1rem 0.25rem 0; vertical-align: top; }
.cr-scale td:first-child { width: 2rem; }