/* Competitive terrain map (/research/terrain) — only what is unique to this page.
   Band colors mark each tier of the landscape. Where they color text (the "Access" row)
   they meet WCAG 2.2 AA (4.5:1) on --surface. Cairn's trail uses the site's --waypoint gold. */

:root {
    --band-water: #33637c;
    --band-camp: #7d6a28;
    --band-oasis: #2c7b68;
    --band-ridge: #a8471f;
    --band-summit: #6e2a2a;
    --band-ghost: #6f6a58;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --band-water: #7fb6cf;
        --band-camp: #d3a35e;
        --band-oasis: #5fcbb0;
        --band-ridge: #e08b56;
        --band-summit: #d17d7d;
        --band-ghost: #9a9378;
    }
}

:root[data-theme="dark"] {
    --band-water: #7fb6cf;
    --band-camp: #d3a35e;
    --band-oasis: #5fcbb0;
    --band-ridge: #e08b56;
    --band-summit: #d17d7d;
    --band-ghost: #9a9378;
}

/* The map needs more room than a reading column. */
.page-wide { max-width: 1160px; }

.b-water { --band: var(--band-water); }
.b-camp { --band: var(--band-camp); }
.b-oasis { --band: var(--band-oasis); }
.b-ridge { --band: var(--band-ridge); }
.b-summit { --band: var(--band-summit); }
.b-ghost { --band: var(--band-ghost); }
.b-trail { --band: var(--waypoint); }

/* ---------- Map card ---------- */
.mapcard {
    background: var(--surface);
    border: 1px solid var(--surface-line);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 20px 20px 12px;
}

.maptitle h2 { font-size: 1.15rem; margin-bottom: 10px; }

.maplegend {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    color: var(--ink-muted);
}

.maplegend li { display: inline-flex; align-items: center; gap: 6px; }

.maplegend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    background: var(--band);
}

/* On narrow screens the map keeps a legible size and scrolls sideways inside its card. */
.map-scroll { overflow-x: auto; }

svg.terrain {
    display: block;
    width: 100%;
    min-width: 680px;
    height: auto;
}

.contour { fill: none; stroke: var(--accent); stroke-width: 1; opacity: 0.25; }
.axisline { stroke: var(--rule); stroke-width: 1.2; }
.tick { stroke: var(--ink-faint); stroke-width: 1; opacity: 0.6; }

.axis-x,
.axis-y {
    font-family: 'IBM Plex Mono', monospace;
    fill: var(--ink-muted);
}

.axis-x { font-size: 12px; text-anchor: middle; }
.axis-y { font-size: 11px; letter-spacing: 0.03em; }

.span { stroke: var(--band); stroke-width: 3; opacity: 0.55; stroke-linecap: round; }
.span.b-ghost { stroke-dasharray: 2 4; }

.pin { cursor: pointer; }
.pin-halo { fill: var(--surface); opacity: 0.001; }
.pin-dot { fill: var(--band); stroke: var(--surface); stroke-width: 2; transition: r 0.15s ease; }

.pin-num {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9.5px;
    font-weight: 600;
    fill: var(--surface);
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}

.pin:hover .pin-dot,
.pin:focus-visible .pin-dot { r: 12; }

.pin:focus-visible { outline: none; }
.pin:focus-visible .pin-halo { opacity: 1; fill: none; stroke: var(--accent); stroke-width: 3; }

.trailpath { fill: none; stroke: var(--waypoint); stroke-width: 3.4; stroke-linecap: round; }
.trailpath.dotted { stroke-dasharray: 1 9; stroke-width: 4; }
.handoff-dot { fill: var(--surface); stroke: var(--waypoint); stroke-width: 2.5; }

.maplabel {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    fill: var(--waypoint);
}

.mapfoot {
    font-size: 0.8rem;
    color: var(--ink-muted);
    padding-top: 10px;
    margin: 4px 0 0;
    border-top: 1px dashed var(--rule);
}

/* ---------- Cairn callout ---------- */
.cairncard {
    background: var(--surface);
    border: 1.5px solid var(--waypoint);
    border-radius: 12px;
    padding: 24px 26px;
    box-shadow: var(--shadow);
}

.cairncard .card-tag {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--waypoint);
    margin: 0 0 8px;
}

.cairncard > p { color: var(--ink-muted); max-width: none; }

.cairngrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 18px;
}

.cairngrid h3 { font-size: 1.05rem; }
.cairngrid p { font-size: 0.95rem; max-width: none; }

.cairncard .honest {
    margin-top: 20px;
    padding: 12px 16px;
    background: var(--bg);
    border: 1px dashed var(--rule);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--ink-muted);
    max-width: none;
}

.cairncard .honest strong { color: var(--ink); }

@media (max-width: 760px) {
    .cairngrid { grid-template-columns: 1fr; }
    .cairncard { padding: 20px 18px; }
}

/* ---------- Landmark bands ---------- */
.band-heading { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; }

.band-heading .swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-top: 9px;
    flex-shrink: 0;
    background: var(--band);
}

.band-heading h2 { font-size: 1.3rem; }
.band-sub { margin: 0; font-size: 0.95rem; color: var(--ink-muted); max-width: 72ch; }

.lm-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 14px;
}

.lm-card {
    background: var(--surface);
    border: 1px solid var(--surface-line);
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: var(--shadow);
    scroll-margin-top: 24px;
    transition: border-color 0.15s ease;
}

/* Highlight the landmark a map marker just jumped to. */
.lm-card:target { border-color: var(--waypoint); box-shadow: 0 0 0 2px var(--waypoint); }

.cardhead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }

.cardhead .num {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    color: var(--ink-faint);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 1px 6px;
    flex-shrink: 0;
}

.lm-card h3 { font-size: 1.02rem; margin: 0; }
.lm-card h3 a { color: var(--ink); }
.lm-card h3 a:hover { color: var(--accent); }

.lm-card .row {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 10px;
    margin-top: 8px;
    font-size: 0.84rem;
    line-height: 1.5;
}

.lm-card .k {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding-top: 2px;
}

.lm-card .v.good { color: var(--ink); }
.lm-card .v.limit { color: var(--ink-muted); }
.lm-card .v.cost { font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; color: var(--ink); }
.lm-card .row.access .v { color: var(--band-ridge); }