/* ============================================================
   research/dsi/terrain/ — Decision Terrain instrument (DT-UX-3).
   Page-local styles only. Global palette, type, and nav are inherited
   from ../../../styles.css.

   Height in this instrument means within-population concentration share
   ONLY (PVL-v1-Instrument-Spec.md § Comparative Concentration
   Projection, KSP-PVL-V1.1) — never Decision Mode balance, never raw
   corpus size. Color encodes comparative ROLE (Subject/sand, Peer/blue,
   Reference/green), independently normalized per population and drawn
   as three nested, registered plates sharing one X/Z grid coordinate.
   Decision Mode remains real governed information but is inspectable
   only, in the coordinate readout and evidence cards below — it is
   never a topology channel here.
   ============================================================ */

.terrain-instrument {
    --ti-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --ti-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
    --ti-line: rgba(225, 221, 207, .14);
    --ti-line-2: rgba(225, 221, 207, .26);
    /* PUB-LOCK-3: --ti-dim/--ti-faint were local literals that had
       drifted off the canonical sand hierarchy (.62/.40 alpha vs. the
       site's .78/.56). Aliased to --sand-dim/--muted so instrument text
       (Research Measures, Decision Inventory, Audit) now renders at the
       same computed color as this page's own --publication-text-dim/
       -faint editorial tokens (decision-terrain/index.html), which were
       already aliased the same way. */
    --ti-dim: var(--sand-dim);
    --ti-faint: var(--muted);

    /* Comparative-role palette. Reuses the instrument's existing warm/
       cool/mint hues (formerly Decision-Mode-owned) under new meaning —
       role, not governing mode — so the visual identity stays continuous
       while the semantics change, per PVL v1.1's role admission.
       KSP-TERRAIN-H2H: Subject (sand) reuses the site's existing warm
       near-white / sand token (--sand, styles.css) rather than the prior
       gold/amber #D8B26E, which read as yellow rather than Pointer sand.
       Peer/Reference untouched. */
    --role-sand: var(--sand, #E7DAC6);
    --role-blue: #6E9CD8;
    --role-green: #8FC79E;

    position: relative;
    padding: clamp(72px, 8vw, 120px) 0 clamp(56px, 7vw, 96px);
    border-bottom: 1px solid var(--ti-line);
}

.terrain-instrument .container { width: min(1180px, 92%); margin: 0 auto; }

.terrain-instrument__eyebrow {
    margin: 0 0 18px;
    font-family: var(--ti-mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ti-faint);
}

/* ---- active state readout (case question / exploration / finding) ---- */
.terrain-state { margin: 0 0 22px; }

.terrain-state__label {
    margin: 0;
    font-family: var(--ti-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--role-green);
}

/* Executive thesis (KSP-TERRAIN-H2Q §2) — case-specific commercial
   framing, always visible (unlike the Management Question disclosure
   below it), so it reads as editorial body copy rather than instrument
   metadata: same size register as .case-card__copy on the public page. */
.terrain-state__thesis {
    max-width: 68ch;
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--ti-dim);
}

/* Management Question disclosure (KSP-TERRAIN-H2L §5) — collapsed by
   default; same +/- disclosure grammar as .case-card__disclosure /
   .inventory-disclosure / .proof-disclosure (research/decision-terrain/
   index.html), reused rather than reinvented. Native <details>/<summary>
   gives correct keyboard operation and expanded/collapsed state for free. */
.terrain-state__question-disclosure {
    margin: 8px 0 0;
}

.terrain-state__question-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    font-family: var(--ti-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--role-green);
    transition: color .2s ease;
}

.terrain-state__question-summary::-webkit-details-marker { display: none; }
.terrain-state__question-summary::after { content: "+"; color: var(--ti-faint); }
.terrain-state__question-disclosure[open] .terrain-state__question-summary::after { content: "\2212"; }
.terrain-state__question-summary:hover { color: var(--ti-dim); }

.terrain-state__question {
    margin: 10px 0 0;
    max-width: 62ch;
    font-family: var(--ti-serif);
    font-weight: 400;
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.22;
    letter-spacing: -.01em;
    color: var(--sand-bright, #F1E6D6);
}

.terrain-state__meta {
    margin: 12px 0 0;
    font-family: var(--ti-mono);
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--ti-dim);
}

.terrain-state__meta a {
    color: var(--role-green);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.terrain-state__note {
    max-width: 66ch;
    margin: 12px 0 0;
    padding: 10px 14px;
    border: 1px solid var(--ti-line-2);
    border-left: 2px solid var(--role-sand);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--ti-dim);
}

/* No max-width here (unlike most .terrain-state__* text blocks): the
   rail below needs the instrument's full width to show 2-3 cards, not a
   readable-line-length column. */
.terrain-state__finding { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--ti-line); }

.terrain-state__finding-label {
    margin: 0 0 8px;
    font-family: var(--ti-mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ti-faint);
}

/* KSP-TERRAIN-H2N — compact horizontal rail, not a stacked grid: each
   finding was a full-width block of prose stacked above the controls/
   scene, reading as dense stacked rows before a reader ever reached the
   terrain. Same instrument enclosure, same computeTopCoordinates()/
   findingNode() text and ordering (untouched) — presentation only.
   Visually subordinate to the page's real .case-card grammar (research/
   decision-terrain/index.html: 20px radius, line-strong border, 30px
   padding) rather than reusing those classes directly, since terrain.css
   is the shared instrument stylesheet (also loaded by research/dsi/
   terrain/index.html, which never loads that page-local stylesheet) —
   smaller radius, lighter border, tighter padding here instead. */
.terrain-state__finding-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 34%);
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    margin: 0 -2px;
}

.terrain-state__finding-item {
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--ti-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .015);
    scroll-snap-align: start;
}

.terrain-state__finding-coord {
    margin: 0 0 6px;
    font-family: var(--ti-mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--role-green);
}

.terrain-state__finding-stat {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ti-dim);
}

.terrain-state__finding-def {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--ti-faint);
}

.terrain-state__finding-lead {
    margin: 8px 0 0;
    font-family: var(--ti-mono);
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--sand-bright, #F1E6D6);
}

/* ---- control strip ---- */
.terrain-controls { display: flex; align-items: flex-end; justify-content: flex-start; gap: 20px; flex-wrap: wrap; margin: 0 0 20px; }
.terrain-controls__select-wrap { display: flex; flex-direction: column; gap: 7px; min-width: 220px; flex: 1 1 240px; max-width: 360px; }
.terrain-controls__select-wrap[hidden] { display: none; }

.terrain-controls__label {
    font-family: var(--ti-mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ti-faint);
}

/* ---- select control (KSP-TERRAIN-H2P §15 geometry fix) ----
   A native <select>'s own text box does not reliably honor
   text-overflow/overflow across browsers/engines — several ignore it
   entirely and let a long selected-option string run to the element's
   edge, under whatever sits there. Rather than depend on that, the
   chevron is no longer a background-image sharing the select's own text
   box: it is a separate, non-interactive `.terrain-select__arrow`
   layered on top in a dedicated reserved lane (see .terrain-select
   below), with an opaque fade matching the instrument's own dark
   backdrop so any overflowing text is masked, never visually collided
   with the glyph, on any engine. The select keeps its own
   text-overflow/ellipsis as a best-effort for engines that do support
   it; the wrapper is what guarantees no overlap on the ones that don't. */
.terrain-select { position: relative; display: block; }

.terrain-controls select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: block;
    margin: 0;
    width: 100%;
    padding: 10px 40px 10px 16px;
    font-family: var(--ti-mono);
    font-size: 13px;
    letter-spacing: .04em;
    color: var(--sand-bright, #F1E6D6);
    background: rgba(255, 255, 255, .028);
    border: 1px solid var(--ti-line-2);
    border-radius: 10px;
    cursor: pointer;
    min-height: 44px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    transition: border-color .22s var(--ease-out, ease);
}

.terrain-controls select:hover { border-color: rgba(225, 221, 207, .4); }
.terrain-controls select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.terrain-controls select option { color: #16150f; background: #E7DAC6; white-space: normal; }

.terrain-select__arrow {
    position: absolute;
    top: 1px; right: 1px; bottom: 1px;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 9px 9px 0;
    pointer-events: none;
    background: linear-gradient(to right, transparent, rgba(10, 9, 8, .88) 46%, rgba(10, 9, 8, .94) 100%);
}

.terrain-select__arrow::after {
    content: "";
    width: 12px;
    height: 12px;
    background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23AFA890' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---- Clear Settings — visually subordinate to the two selects, easy to
   find without reading as a third dropdown (DT-UX-4 §20). ---- */
.terrain-controls__clear {
    align-self: center;
    margin: 0 0 2px;
    padding: 4px 2px;
    font-family: var(--ti-mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ti-faint);
    background: none;
    border: none;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}

.terrain-controls__clear:hover,
.terrain-controls__clear:focus-visible {
    color: var(--ti-dim);
    border-bottom-color: var(--ti-line-2);
}

.terrain-reconciliation { display: flex; flex-wrap: wrap; gap: 4px 18px; font-family: var(--ti-mono); font-size: 11px; letter-spacing: .04em; color: var(--ti-faint); }
.terrain-reconciliation__item b { color: var(--ti-dim); font-weight: 400; }
.terrain-reconciliation__item--sand { color: var(--role-sand); }
.terrain-reconciliation__item--blue { color: var(--role-blue); }
.terrain-reconciliation__item--green { color: var(--role-green); }

/* ---- legend ---- */
.terrain-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 18px 0 0; font-family: var(--ti-mono); font-size: 10px; letter-spacing: .06em; color: var(--ti-faint); }
.terrain-legend span { display: inline-flex; align-items: center; gap: 8px; }
.terrain-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.terrain-legend .swatch-sand { background: var(--role-sand); }
.terrain-legend .swatch-blue { background: var(--role-blue); opacity: .7; }
.terrain-legend .swatch-green { background: transparent; border: 1.5px solid var(--role-green); opacity: .8; }

/* ---- the scene ---- */
.terrain-scene {
    position: relative;
    margin-top: 26px;
    height: clamp(440px, 54vw, 640px);
    border: 1px solid var(--ti-line);
    border-radius: 4px;
    background: radial-gradient(70% 60% at 50% 20%, rgba(216, 195, 154, .05), transparent 70%), var(--bg-2, #0A090A);
    overflow: hidden;
    touch-action: none;
    cursor: grab;
}

.terrain-scene.is-dragging { cursor: grabbing; }
.terrain-scene__perspective { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 42%; }
.terrain-rig { position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
#terrainCells { position: absolute; top: 0; left: 0; transform-style: preserve-3d; }

.terrain-plane {
    position: absolute;
    transform-style: preserve-3d;
    background-image:
        repeating-linear-gradient(to right, var(--ti-line) 0 1px, transparent 1px calc(100% / 3)),
        repeating-linear-gradient(to bottom, var(--ti-line) 0 1px, transparent 1px calc(100% / 3));
    background-size: 100% 100%;
    border: 1px solid var(--ti-line-2);
}

.terrain-axis-label {
    position: absolute;
    transform-style: preserve-3d;
    font-family: var(--ti-mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ti-faint);
    white-space: nowrap;
    pointer-events: none;
}

/* ---- registered cell: up to three nested plates (green outermost/
   quietest, blue middle, sand innermost/foregrounded), sharing one
   X/Z coordinate. Each plate's own height is set inline by terrain.js
   from that population's independently-normalized concentration share. ---- */
.terrain-cell { position: absolute; transform-style: preserve-3d; cursor: pointer; }
.terrain-cell.is-empty-coord { cursor: default; }

.terrain-plate { position: absolute; transform-style: preserve-3d; transition: transform .22s var(--ease-out, ease); }
.terrain-plate__box { position: absolute; transform-style: preserve-3d; }

.terrain-plate__face {
    position: absolute;
    box-sizing: border-box;
    transition: filter .18s var(--ease-out, ease), opacity .18s var(--ease-out, ease);
    backface-visibility: hidden;
}

/* Reference (green) — quiet, thin wireframe emphasis: low fill, visible edge. */
.terrain-plate--green .terrain-plate__face { background: color-mix(in srgb, var(--role-green) 16%, transparent); border: 1px solid color-mix(in srgb, var(--role-green) 55%, transparent); }
.terrain-plate--green .terrain-plate__face--top { background: color-mix(in srgb, var(--role-green) 24%, transparent); }

/* Peer (blue) — clearly legible, medium translucency. */
.terrain-plate--blue .terrain-plate__face { background: color-mix(in srgb, var(--role-blue) 46%, transparent); border: 1px solid color-mix(in srgb, var(--role-blue) 70%, transparent); }
.terrain-plate--blue .terrain-plate__face--top { background: color-mix(in srgb, var(--role-blue) 60%, transparent); }

/* Subject (sand) — foregrounded: near-solid fill, drawn last (DOM order) so it reads on top. */
.terrain-plate--sand .terrain-plate__face { background: var(--role-sand); border: 1px solid rgba(5, 4, 5, .55); opacity: .95; }
.terrain-plate--sand .terrain-plate__face--top { background: color-mix(in srgb, var(--role-sand) 88%, white); }
.terrain-plate--sand .terrain-plate__face--side { filter: brightness(.68); }

.terrain-cell:hover .terrain-plate--sand .terrain-plate__face,
.terrain-cell.is-focus .terrain-plate--sand .terrain-plate__face { filter: brightness(1.15); }
.terrain-cell:hover .terrain-plate--blue .terrain-plate__face,
.terrain-cell.is-focus .terrain-plate--blue .terrain-plate__face { filter: brightness(1.25); }
.terrain-cell:hover .terrain-plate--green .terrain-plate__face,
.terrain-cell.is-focus .terrain-plate--green .terrain-plate__face { filter: brightness(1.3); }

.terrain-scene__hint {
    position: absolute; left: 18px; bottom: 14px; z-index: 3;
    font-family: var(--ti-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ti-faint); pointer-events: none;
}

/* ---- lightweight hover preview (desktop only, KSP-TERRAIN-H2K §8) ----
   Cursor-following, never covers the readout panel's z-index below it and
   never intercepts pointer events itself (a hovered coordinate is still
   the .terrain-cell underneath). Content is set inline by terrain.js. */
.terrain-hover-tip {
    position: absolute; z-index: 4; width: 210px;
    padding: 10px 12px;
    border: 1px solid var(--ti-line-2);
    border-left: 2px solid var(--role-green);
    border-radius: 8px;
    background: rgba(10, 9, 8, .94);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s var(--ease-out, ease);
}
.terrain-hover-tip.is-visible { opacity: 1; }
.terrain-hover-tip__coord {
    margin: 0 0 6px; font-family: var(--ti-mono); font-size: 10px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--sand-bright, #F1E6D6);
}
.terrain-hover-tip__line { margin: 3px 0 0; font-size: 11px; line-height: 1.5; color: var(--ti-dim); }
.terrain-hover-tip__hint {
    margin: 8px 0 0; padding-top: 6px; border-top: 1px solid var(--ti-line);
    font-family: var(--ti-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ti-faint);
}

@media (hover: none) {
    .terrain-hover-tip { display: none; }
}

.terrain-scene__empty {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    padding: 20px; text-align: center; max-width: 46ch; margin: auto;
    font-family: var(--ti-mono); font-size: 11px; line-height: 1.7; color: var(--ti-faint);
}
.terrain-scene__empty[hidden] { display: none; }

/* ---- coordinate readout (Sand / Peer / Reference columns) ---- */
/* KSP-TERRAIN-H2Q §10 — the readout already spans the full scene width
   and lays Subject/Peer/Reference out in 3 columns where room allows
   (.terrain-readout__cols below); raised the height ceiling here so that
   width is doing more of the work and a reader scrolls vertically less
   often to compare columns that are already side by side. */
.terrain-readout {
    position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 5;
    max-height: min(78%, 560px); overflow-y: auto;
    padding: 18px 20px;
    border: 1px solid var(--ti-line-2);
    border-left: 2px solid var(--role-sand);
    border-radius: 12px;
    background: rgba(10, 9, 8, .92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0; transform: translateY(8px); pointer-events: none;
    transition: opacity .22s var(--ease-out, ease), transform .22s var(--ease-out, ease);
}
.terrain-readout.is-open { opacity: 1; transform: none; pointer-events: auto; }

.terrain-readout__eyebrow { margin: 0 0 8px; font-family: var(--ti-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sand-bright, #F1E6D6); }
.terrain-readout__note { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--ti-line); font-size: 11px; line-height: 1.6; color: var(--ti-faint); }
.terrain-readout__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.terrain-readout__col-role { margin: 0; font-family: var(--ti-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.terrain-readout__col--sand .terrain-readout__col-role { color: var(--role-sand); }
.terrain-readout__col--blue .terrain-readout__col-role { color: var(--role-blue); }
.terrain-readout__col--green .terrain-readout__col-role { color: var(--role-green); }

.terrain-readout__col-title { margin: 4px 0 8px; font-size: 13px; font-weight: 400; color: var(--sand-bright, #F1E6D6); }
.terrain-readout__col-pending { font-size: 11px; line-height: 1.6; color: var(--ti-faint); }
.terrain-readout__count { margin: 0 0 8px; font-family: var(--ti-mono); font-size: 11px; line-height: 1.6; color: var(--ti-dim); }
.terrain-readout__mode { margin: 0 0 10px; font-family: var(--ti-mono); font-size: 10px; letter-spacing: .02em; color: var(--ti-faint); }

.terrain-readout__fork { padding: 8px 0; border-top: 1px solid var(--ti-line); font-size: 11px; line-height: 1.5; }
.terrain-readout__fork-head { margin: 0 0 3px; font-family: var(--ti-mono); font-size: 9px; color: var(--ti-faint); }
.terrain-readout__fork-head b { color: var(--ti-dim); font-weight: 400; }
.terrain-readout__fork-rule { margin: 0 0 3px; color: var(--ti-dim); }
.terrain-readout__fork-source { margin: 3px 0 0; font-family: var(--ti-mono); font-size: 9px; }
.terrain-readout__fork-source a { color: var(--role-blue); text-decoration: underline; text-underline-offset: 2px; }

/* ---- registration non-equivalence disclosure ---- */
.terrain-nonequivalence {
    max-width: 74ch;
    margin: 18px 0 0;
    padding: 10px 14px;
    border: 1px solid var(--ti-line-2);
    border-radius: 8px;
    font-family: var(--ti-mono);
    font-size: 11px;
    line-height: 1.6;
    color: var(--ti-dim);
}

.terrain-instrument__mapping {
    display: flex; flex-wrap: wrap; gap: 8px 28px;
    margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--ti-line);
    font-family: var(--ti-mono); font-size: 11px; letter-spacing: .04em; color: var(--ti-faint);
}
.terrain-instrument__mapping b { color: var(--ti-dim); font-weight: 400; }

/* ---- axis legend ---- */
.terrain-axis-legend { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 32px; margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--ti-line); }
.terrain-axis-legend__group { display: flex; flex-direction: column; gap: 6px; }
.terrain-axis-term { font-size: 11px; line-height: 1.5; color: var(--ti-faint); }
.terrain-axis-term b { font-family: var(--ti-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ti-dim); font-weight: 400; margin-right: 6px; }

/* KSP-TERRAIN-H2T §3 — the control cluster (Case Study / Platform Focus
   selectors, Clear Settings, the active-population readout, the
   Subject/Peer/Reference legend) was spreading across several hundred
   px of mobile height. Root cause: `flex-direction: column` turned the
   base rule's `gap: 20px` (line 219; sized for HORIZONTAL space between
   side-by-side desktop controls) into a 20px VERTICAL gap between every
   stacked child, including the narrow Clear Settings button and the
   reconciliation line, which don't need a full row each. Fix: stay
   row+wrap (not column) so narrow children share a line, force only the
   selects (which do need full width) onto their own row via
   flex-basis, and shrink the gap and the following elements' own top
   margins to match. */
@media (max-width: 720px) {
    .terrain-controls {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 16px;
        margin-bottom: 12px;
    }
    .terrain-controls__select-wrap {
        flex: 1 1 100%;
        max-width: none;
        gap: 5px;
    }
    .terrain-controls select { width: 100%; }
    .terrain-legend { margin-top: 10px; }
    .terrain-scene { margin-top: 14px; height: clamp(380px, 96vw, 480px); }
    .terrain-readout { left: 10px; right: 10px; bottom: 10px; }
    .terrain-readout__cols { grid-template-columns: 1fr; gap: 16px; }
    .terrain-axis-legend { grid-template-columns: 1fr; }
    .terrain-state__finding-list { grid-auto-columns: minmax(200px, 84%); gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .terrain-rig { transition: none !important; }
    .terrain-plate { transition: none !important; }
}

/* ============================================================
   Examine the evidence — population summary cards (DT-UX-3 §11).
   ============================================================ */
.terrain-evidence-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 24px 0 0; }

.terrain-evidence-card {
    padding: 18px 20px;
    border: 1px solid var(--ti-line-2);
    border-radius: 14px;
    background:
        radial-gradient(90% 120% at 15% 0%, rgba(225, 221, 207, .045), transparent 64%),
        rgba(255, 255, 255, .015);
}
.terrain-evidence-card--sand { border-left: 2px solid var(--role-sand); }
.terrain-evidence-card--blue { border-left: 2px solid var(--role-blue); }
.terrain-evidence-card--green { border-left: 2px solid var(--role-green); }

.terrain-evidence-card__role { margin: 0; font-family: var(--ti-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ti-faint); }
.terrain-evidence-card--sand .terrain-evidence-card__role { color: var(--role-sand); }
.terrain-evidence-card--blue .terrain-evidence-card__role { color: var(--role-blue); }
.terrain-evidence-card--green .terrain-evidence-card__role { color: var(--role-green); }

.terrain-evidence-card__title { margin: 6px 0 8px; font-size: 15px; font-weight: 400; color: var(--sand-bright, #F1E6D6); }
.terrain-evidence-card__framing { margin: 0 0 10px; font-size: 12px; line-height: 1.6; color: var(--ti-faint); }
.terrain-evidence-card__kind { margin: 0 0 10px; font-family: var(--ti-mono); font-size: 10px; line-height: 1.6; color: var(--ti-faint); font-style: italic; }
.terrain-evidence-card__stats { margin: 0; font-family: var(--ti-mono); font-size: 11px; line-height: 1.6; color: var(--ti-dim); }
.terrain-evidence-card__pending { margin: 0; font-size: 12px; line-height: 1.6; color: var(--ti-faint); }

@media (max-width: 900px) {
    .terrain-evidence-cards { grid-template-columns: 1fr; }
}