/* ui_v2_public.css — the anonymous public shells: embedded map, embedded 3D
 * model, and the published report.
 *
 * UI v2 (W5 hygiene, spec §5 W5 scope 4 + §6 "Public/guest standalone" row).
 *
 * GATED ON THE FLEET LEVER. Every consumer links this only inside
 * `{% ui_v2_public_skin %}` (settings.UI_V2_DEFAULT == 'v2'). These pages are
 * served to anonymous visitors — and, for the map/model, INSIDE CUSTOMERS'
 * OWN WEBSITES via maps.geodb.io / 3d.geodb.io iframes. There is no per-user
 * experience to resolve and no way to soak a change on a subset of them, so
 * they flip with the app at the canvas launch and not one moment earlier.
 * With the flag off nothing here is linked: the embeds render today's bytes.
 *
 * It is linked AFTER each page's own stylesheet, so equal-specificity rules win
 * on source order — the original CSS stays verbatim, nothing to drift.
 *
 * TWO DATA INVARIANTS (spec §4.4) THIS FILE MUST NOT BREAK:
 *   1. Basemap TILES are data, not chrome. Nothing here restyles, filters or
 *      swaps a tile layer — a user's basemap choice survives the theme.
 *   2. The 3D SCENE's materials and data colours are data. Only the HUD,
 *      the page background and the share chrome are touched.
 */

/* ══════════════════════════════════════════════════════════════════════════
 * 1. THE TWO VIEWERS — always-dark surfaces
 *
 * public_map and public_model already wear a dark glass chrome (a near-black
 * sidebar/HUD with a teal accent) over the map or scene. They are the mirror
 * of the always-LIGHT print list: a viewer is a dark room. So they pin
 * data-theme="dark" (see the templates) and simply re-point their ad-hoc
 * literals — rgba(30,30,30), #4ECDC4 — at the brand's dark token set. Same
 * look, one palette, no light/dark split to validate on an embed we cannot see.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── public_map: the overlays that float on the map ── */
.map-title-label,
.legend-overlay,
.watermark,
.loading-overlay {
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.legend-overlay h6 { color: var(--ink); }
.legend-label,
.watermark { color: var(--ink-2); }
.legend-color-box { border: 1px solid var(--line); }

/* The map sidebar + its legends */
.public-map-sidebar,
.public-sidebar-header,
.public-sidebar-footer,
.public-legends-wrapper {
    background: var(--panel);
    color: var(--ink);
    border-color: var(--line);
}

.public-sidebar-header,
.public-legends-header,
.layer-group-title,
.public-legend-header { color: var(--ink); }

.public-sidebar-content,
.public-legend-label,
.info-label,
.stat-label { color: var(--ink-2); }

.info-value,
.stat-value { color: var(--ink); }

.layer-toggle-item:hover,
.basemap-option:hover { background: var(--panel-2); }

.public-map-sidebar input[type="checkbox"],
.layer-toggle-item input[type="checkbox"] { accent-color: var(--teal); }

.geodb-link { color: var(--teal); }

/* ── public_model: the 3D HUD. The <canvas> and every scene material is DATA
 *    and is untouched — only the chrome around it moves. ── */
#public-viewer-container { background: var(--ground); }

.model-info,
.public-controls,
.legend-header,
.legend-body,
.share-modal-content {
    background: var(--panel);
    color: var(--ink);
    border-color: var(--line);
}

.legend-header { color: var(--ink); }
.embed-code {
    background: var(--panel-2);
    color: var(--ink);
    border: 1px solid var(--line);
}
.copy-link-btn {
    background: var(--cta-bg);
    color: var(--cta-ink);
    border-color: var(--cta-bg);
}
.copy-link-btn:hover { filter: brightness(1.08); }

#loading-indicator,
#loading-message,
#loading-counter { color: var(--ink); }
#loading-progress { background: var(--panel-2); }
#loading-progress-bar { background: var(--teal); }

/* ── Leaflet chrome, shared by public_map. TILES UNTOUCHED. ── */
.leaflet-container { background: var(--ground); }

.leaflet-control-zoom a,
.leaflet-bar a {
    background: var(--panel);
    color: var(--ink);
    border-bottom-color: var(--line);
}
.leaflet-control-zoom a:hover,
.leaflet-bar a:hover { background: var(--panel-2); color: var(--ink); }
.leaflet-bar { border: 1px solid var(--line); box-shadow: var(--shadow); }

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: var(--panel);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
}

.leaflet-control-attribution {
    background: var(--panel);
    color: var(--ink-2);
}
.leaflet-control-attribution a { color: var(--accent); }

.leaflet-control-layers {
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

/* ══════════════════════════════════════════════════════════════════════════
 * 2. THE PUBLISHED REPORT — a DOCUMENT, so it stays LIGHT
 *
 * Unlike the two viewers, a published report is a reading surface that people
 * PRINT. It pins data-theme="light" (see the template) and takes the brand
 * accent only. It is not on the always-light PINNED list (that governs
 * report_pdf / claim packages, which never load a token sheet at all) — but it
 * follows the same reasoning, so a shared report can never print dark.
 * ══════════════════════════════════════════════════════════════════════════ */

/* The page defines its own two variables and paints everything from them —
 * re-pointing the pair re-brands the whole document through one indirection. */
:root {
    --primary-color: var(--accent);
    --secondary-color: var(--chart-3);
}

.report-container { background: var(--panel); box-shadow: var(--shadow); }
.report-meta,
.report-meta-item { color: var(--ink-2); }
.section-title { color: var(--ink); }
.toc-item a { color: var(--accent); }
.table-of-contents { background: var(--panel-2); border: 1px solid var(--line); }
.resource-caption { color: var(--ink-2); }
.frozen-badge { background: var(--good-soft); color: var(--good); }