:root { --creator-accent:#116f79; --positive:#167c75; --negative:#d99132; --preview-paper:#f4f0dc; --preview-ink:#24251e; }
[data-theme="dark"] { --creator-accent:#63c3c8; --preview-paper:#242721; --preview-ink:#f2efe3; }
[hidden] { display:none!important; }
[class~="visually-hidden"] { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
body { background:var(--color-page); }
button, input, select, textarea { min-height:44px; }
input, select, textarea { width:100%; border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:.68rem .75rem; background:var(--color-surface); color:var(--color-text); font-size:1rem; }
textarea { min-height:5.5rem; resize:vertical; line-height:1.45; }
label { display:grid; gap:.4rem; color:var(--color-text-muted); font-size:.84rem; font-weight:750; }
fieldset { display:grid; gap:1rem; margin:0; padding:1rem 0 0; border:0; border-top:1px solid var(--color-border); }
legend { padding:0 .6rem 0 0; color:var(--color-text); font-weight:850; }
.creator-shell { min-height:100vh; }
.creator-topbar { position:sticky; z-index:20; top:0; display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:68px; padding:.75rem clamp(1rem,3vw,2rem); border-bottom:1px solid color-mix(in srgb,var(--color-border),transparent 15%); background:color-mix(in srgb,var(--color-page),transparent 5%); backdrop-filter:blur(18px); }
.editor-brand-lockup { display:flex; align-items:center; gap:.55rem; }
.beta-badge { display:inline-flex; align-items:center; min-height:20px; padding:2px 7px; border:1px solid color-mix(in srgb,var(--color-accent),transparent 45%); border-radius:999px; color:var(--color-accent); background:color-mix(in srgb,var(--color-accent),transparent 93%); font-size:.56rem; font-weight:800; letter-spacing:.1em; line-height:1; text-transform:uppercase; }
.app-title,.header-actions,.button-row,.step-buttons { display:flex; align-items:center; gap:.65rem; }
.app-title { color:var(--color-text); text-decoration:none; }
.app-title h1 { margin:0; }
.app-title h1 { font-size:1.05rem; line-height:1.2; }
.icon-button { display:grid; place-items:center; flex:0 0 auto; width:44px; height:44px; padding:0; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text); text-decoration:none; font-size:1.15rem; }
.quiet-button,.primary-button,.next-button { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:44px; padding:.6rem .9rem; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text); font-weight:800; }
.primary-button,.next-button { border-color:var(--color-accent); background:var(--color-accent); color:#fff; }
[data-theme="dark"] .primary-button,[data-theme="dark"] .next-button { color:#102326; }
.eyebrow,.step-number { color:var(--color-accent); font-size:.7rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.creator-workspace { display:grid; grid-template-columns:minmax(0,940px); justify-content:center; gap:1rem; max-width:1540px; margin:0 auto; padding:1.5rem clamp(1rem,3vw,2rem) 3rem; }
.builder-panel,.preview-panel { border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); box-shadow:var(--shadow-soft); }
.builder-panel { align-self:start; overflow:hidden; }
.configuration-tools { display:flex; align-items:center; justify-content:space-between; gap:1rem; color:var(--color-text-muted); }
.configuration-tools[hidden] { display:none; }
.configuration-open { overflow:hidden; }
.configuration-drawer { position:fixed; inset:0 auto 0 0; width:min(440px,calc(100vw - 2rem)); max-width:none; height:100vh; height:100dvh; max-height:none; margin:0; padding:0; border:0; border-right:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text); box-shadow:var(--shadow-card); }
.configuration-drawer[open] { display:flex; flex-direction:column; }
.configuration-drawer::backdrop { background:rgb(0 0 0 / .35); }
.configuration-drawer-heading { display:flex; align-items:center; justify-content:space-between; flex:none; gap:1rem; padding:.75rem 1rem; border-bottom:1px solid var(--color-border); }
.configuration-drawer-heading h2 { margin:0; font-size:1.2rem; }
.configuration-drawer-content { min-height:0; overflow:auto; overscroll-behavior:contain; }
.configuration-drawer .builder-panel { border:0; border-radius:0; box-shadow:none; }
.configuration-drawer .step-panel { padding:1.2rem; scroll-margin-top:0; }
.configuration-drawer .app-status { position:static; flex:none; max-width:none; margin:.75rem; }
.step-nav { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--color-border); background:var(--color-surface-muted); }
.step-nav button { display:grid; justify-items:center; gap:.2rem; min-height:64px; padding:.55rem .25rem; border:0; border-right:1px solid var(--color-border); background:transparent; color:var(--color-text-muted); font-size:.72rem; font-weight:800; }
.step-nav button:last-child { border-right:0; }
.step-nav button span { display:grid; place-items:center; width:23px; height:23px; border:1px solid var(--color-border); border-radius:50%; font-size:.68rem; }
.step-nav button[aria-current="step"] { background:var(--color-surface); color:var(--color-text); }
.step-nav button[aria-current="step"] span { border-color:var(--color-accent); background:var(--color-accent); color:#fff; }
.step-panel { display:grid; gap:1.5rem; padding:clamp(1.35rem,3vw,2.25rem); scroll-margin-top:10rem; }
.step-panel[hidden] { display:none; }
.step-heading h2,.step-heading p { margin:0; }
.step-heading h2 { margin-top:.2rem; font-size:1.55rem; }
.step-heading p { margin-top:.35rem; color:var(--color-text-muted); font-size:.9rem; }
.entry-paths { grid-template-columns:repeat(3,minmax(0,1fr)); padding-top:0; border-top:0; }
.entry-paths legend { grid-column:1/-1; }
.entry-paths label { position:relative; cursor:pointer; }
.entry-paths input { position:absolute; width:1px; height:1px; clip-path:inset(50%); }
.entry-paths label > span { display:grid; gap:.3rem; min-height:110px; padding:1rem; border:1px solid var(--color-border); border-radius:var(--radius-md); color:var(--color-text); }
.entry-paths small { color:var(--color-text-muted); font-size:.76rem; font-weight:550; line-height:1.4; }
.entry-paths input:checked + span { border-color:var(--color-accent); box-shadow:inset 0 0 0 1px var(--color-accent); background:color-mix(in srgb,var(--color-accent),transparent 94%); }
.entry-paths input:focus-visible + span { outline:3px solid color-mix(in srgb,var(--color-accent),transparent 55%); outline-offset:2px; }
.world-builder-link { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.8rem; padding:.85rem 1rem; border:1px solid color-mix(in srgb,var(--brand-gold),var(--color-border) 35%); border-radius:var(--radius-md); background:linear-gradient(100deg,color-mix(in srgb,var(--brand-gold),transparent 88%),color-mix(in srgb,var(--color-accent),transparent 94%)); color:var(--color-text); text-decoration:none; }
.world-builder-link > span:first-child { color:var(--brand-coral); font-size:1.35rem; }
.world-builder-link strong,.world-builder-link small { display:block; }
.world-builder-link small { margin-top:.15rem; color:var(--color-text-muted); font-size:.75rem; }
.world-builder-link:hover { border-color:var(--color-accent); }
.entry-panel { display:grid; gap:1rem; scroll-margin-top:6rem; }
.entry-panel[hidden] { display:none; }
.point-entry { display:grid; gap:.8rem; padding:1rem; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface-muted); }
.point-entry[hidden] { display:none; }
.point-entry h3,.point-entry p { margin:0; }
.point-entry p { margin-top:.2rem; color:var(--color-text-muted); font-size:.78rem; }
.point-entry-grid,.point-mapping-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
.point-mapping-fields legend,.point-mapping-fields label:last-child { grid-column:1/-1; }
.point-list { display:grid; gap:.45rem; }
.point-list > p { padding:.7rem; border:1px dashed var(--color-border); border-radius:var(--radius-sm); text-align:center; }
.point-list article { display:grid; grid-template-columns:minmax(0,1fr) auto 36px; align-items:center; gap:.65rem; padding:.6rem .7rem; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); }
.point-list article > div { display:grid; min-width:0; }
.point-list article small { overflow:hidden; color:var(--color-text-muted); font-size:.7rem; text-overflow:ellipsis; white-space:nowrap; }
.entry-heading h3,.entry-heading p,.manual-table-heading h3,.manual-table-heading p { margin:0; }
.entry-heading h3,.manual-table-heading h3 { font-size:1rem; }
.geography-preview-card { overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--preview-paper); color:var(--preview-ink); }
.geography-preview-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:.8rem 1rem; border-bottom:1px solid color-mix(in srgb,var(--preview-ink),transparent 86%); }
.geography-preview-card h3 { margin:.15rem 0 0; font-size:1rem; }
.geography-preview-card header > strong { color:color-mix(in srgb,var(--preview-ink),transparent 28%); font-size:.72rem; line-height:1.4; text-align:right; }
#geography-preview { display:block; width:100%; height:auto; max-height:320px; background:var(--preview-paper); }
.geography-preview-shape { fill:color-mix(in srgb,var(--preview-ink),transparent 91%); stroke:color-mix(in srgb,var(--preview-ink),transparent 64%); stroke-width:.75; vector-effect:non-scaling-stroke; }
.geography-preview-shape.has-data { fill:var(--positive); fill-opacity:.82; stroke:color-mix(in srgb,var(--preview-ink),transparent 45%); }
.geography-preview-legend { display:flex; align-items:center; justify-content:flex-end; gap:1rem; padding:.55rem 1rem; border-top:1px solid color-mix(in srgb,var(--preview-ink),transparent 86%); color:color-mix(in srgb,var(--preview-ink),transparent 30%); font-size:.68rem; font-weight:750; }
.geography-preview-legend span { display:flex; align-items:center; gap:.35rem; }
.geography-preview-legend i { width:11px; height:11px; border:1px solid color-mix(in srgb,var(--preview-ink),transparent 64%); border-radius:2px; background:color-mix(in srgb,var(--preview-ink),transparent 91%); }
.geography-preview-legend i.has-data { border-color:var(--positive); background:var(--positive); }
.entry-heading p,.manual-table-heading p { margin-top:.2rem; color:var(--color-text-muted); font-size:.78rem; }
.map-start-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.map-start-options button { display:grid; grid-template-columns:86px minmax(0,1fr); align-items:center; gap:.9rem; min-height:112px; padding:.85rem; border:1px solid var(--color-border); border-radius:var(--radius-md); color:var(--color-text); background:var(--color-surface); font:inherit; text-align:left; cursor:pointer; }
.map-start-options button:hover { border-color:color-mix(in srgb,var(--color-accent),var(--color-border) 38%); }
.map-start-options button.is-selected { border-color:var(--color-accent); box-shadow:inset 0 0 0 1px var(--color-accent); background:color-mix(in srgb,var(--color-accent),transparent 94%); }
.map-start-options button:focus-visible { outline:3px solid color-mix(in srgb,var(--color-accent),transparent 55%); outline-offset:2px; }
.map-start-options button > span:last-child { display:grid; gap:.3rem; }
.map-start-options small { color:var(--color-text-muted); font-size:.74rem; line-height:1.4; }
.map-start-options .mini-viz { width:86px; height:58px; }
.map-type-route { display:grid; gap:1rem; padding:1rem; border:1px solid color-mix(in srgb,var(--color-accent),var(--color-border) 55%); border-radius:var(--radius-md); background:color-mix(in srgb,var(--color-accent),transparent 95%); }
.map-type-route[hidden] { display:none; }
.map-type-route strong,.map-type-route p { display:block; margin:0; }
.map-type-route strong { margin-top:.15rem; font-size:1rem; }
.map-type-route p { margin-top:.25rem; color:var(--color-text-muted); font-size:.78rem; line-height:1.45; }
.manual-table-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; }
.manual-table-actions { display:flex; align-items:center; gap:.55rem; }
.manual-table-actions select { width:auto; min-width:190px; min-height:40px; padding:.45rem 2.1rem .45rem .65rem; font-size:.76rem; }
.manual-clear { width:40px; height:40px; min-height:40px; }
.manual-clear svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.manual-table-wrap { max-height:440px; overflow:auto; border:1px solid var(--color-border); border-radius:var(--radius-md); }
.manual-table { width:100%; border-collapse:collapse; font-size:.84rem; }
.manual-table th,.manual-table td { padding:.55rem .75rem; border-bottom:1px solid var(--color-border); text-align:left; }
.manual-table th { position:sticky; z-index:1; top:0; background:var(--color-surface-muted); color:var(--color-text-muted); font-size:.7rem; text-transform:uppercase; }
.manual-sort { display:flex; align-items:center; justify-content:space-between; gap:.45rem; width:100%; padding:0; border:0; background:transparent; color:inherit; font:inherit; letter-spacing:inherit; text-align:left; text-transform:inherit; cursor:pointer; }
.manual-sort span { min-width:.8rem; color:var(--color-accent); font-size:.82rem; text-align:center; }
.manual-sort:focus-visible { outline:2px solid var(--color-accent); outline-offset:3px; border-radius:2px; }
.manual-sort:hover { color:var(--color-text); }
.manual-table th:last-child,.manual-table td:last-child { width:42%; }
.manual-table tbody tr:last-child td { border-bottom:0; }
.manual-place { display:flex; align-items:baseline; gap:.45rem; color:var(--color-text); font-weight:800; }
.manual-place span { color:var(--color-text-muted); font-size:.7rem; }
.manual-value { min-height:38px; padding:.45rem .6rem; }
.manual-value[aria-invalid="true"] { border-color:var(--color-danger); box-shadow:0 0 0 1px var(--color-danger); }
.import-actions { display:grid; gap:.7rem; }
.arcgis-import { border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface-muted); }
.arcgis-import summary { padding:.85rem 1rem; color:var(--color-text); font-weight:800; cursor:pointer; }
.arcgis-import[open] summary { border-bottom:1px solid var(--color-border); }
.arcgis-import-fields { display:grid; gap:.75rem; padding:1rem; }
.arcgis-import-fields > p { margin:0; color:var(--color-text-muted); font-size:.8rem; line-height:1.5; }
.arcgis-import-status:empty { display:none; }
.arcgis-import-status[data-tone="error"] { color:var(--color-danger); }
.arcgis-import select[multiple] { min-height:150px; padding:.35rem; }
.arcgis-import select[multiple] option { padding:.35rem .45rem; }
.file-drop { place-items:center; min-height:112px; padding:1rem; border:1.5px dashed color-mix(in srgb,var(--color-accent),var(--color-border) 60%); border-radius:var(--radius-md); background:color-mix(in srgb,var(--color-accent),transparent 95%); color:var(--color-text); text-align:center; cursor:pointer; }
.file-drop span { color:var(--color-text-muted); font-size:.78rem; font-weight:600; }
.file-drop input { position:absolute; clip-path:inset(50%); width:1px; height:1px; }
.file-drop.is-dragging { border-style:solid; background:color-mix(in srgb,var(--color-accent),transparent 86%); }
.or-divider { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.6rem; color:var(--color-text-muted); font-size:.72rem; text-transform:uppercase; }
.or-divider::before,.or-divider::after { content:""; height:1px; background:var(--color-border); }
.field-help { color:var(--color-text-muted); font-size:.76rem; font-weight:500; }
.availability-note { margin:-.65rem 0 0; padding:.75rem .85rem; border-left:3px solid var(--color-accent); background:var(--color-surface-muted); color:var(--color-text-muted); font-size:.78rem; line-height:1.45; }
.availability-note strong { color:var(--color-text); }
.mapping-fields { grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.mapping-fields legend { grid-column:1/-1; }
.mapping-fields > label { align-self:start; align-content:start; width:100%; }
.template-download { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin:.25rem 0 1rem; }
.template-download .field-help { margin:0; }
.series-settings > p { margin:0; color:var(--color-text-muted); font-size:.88rem; }
.series-settings .series-question { color:var(--color-text); font-weight:750; }
.series-mode { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
.series-mode label { position:relative; cursor:pointer; }
.series-mode input { position:absolute; width:1px; min-height:1px; opacity:0; }
.series-mode span { display:grid; gap:.15rem; min-height:76px; padding:.8rem .9rem; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); }
.series-mode strong { color:var(--color-text); font-size:.88rem; }
.series-mode small { color:var(--color-text-muted); font-size:.73rem; font-weight:600; line-height:1.35; }
.series-mode input:checked + span { border-color:var(--color-accent); box-shadow:inset 0 0 0 1px var(--color-accent); background:color-mix(in srgb,var(--color-accent),transparent 94%); }
.series-mode input:focus-visible + span { outline:3px solid color-mix(in srgb,var(--color-accent),transparent 55%); outline-offset:2px; }
.series-settings .series-help { margin-top:-.2rem; font-size:.76rem; }
.series-list { display:grid; gap:.55rem; }
.series-row { display:grid; grid-template-columns:minmax(150px,1.05fr) minmax(180px,1.35fr) minmax(110px,.72fr) minmax(100px,.65fr) minmax(104px,auto); gap:.65rem; align-items:end; padding:.75rem; border:1px solid var(--color-border); border-radius:10px; background:var(--color-surface-subtle); }
.series-row > label { margin:0; }
.series-row .series-source { display:grid; min-width:0; gap:.08rem; }
.series-row .series-source strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.series-row .series-source small { color:var(--color-text-muted); font-weight:600; }
.series-row .series-include,.series-row .series-default { align-self:center; display:flex; gap:.55rem; align-items:center; color:var(--color-text); font-size:.78rem; }
.series-row .series-include input,.series-row .series-default input { flex:0 0 auto; width:20px; min-height:20px; margin:0; padding:0; accent-color:var(--color-accent); }
.series-row .series-default { justify-content:flex-end; white-space:nowrap; }
.series-settings.single-series .series-row { grid-template-columns:minmax(150px,1.05fr) minmax(180px,1.35fr) minmax(110px,.72fr) minmax(100px,.65fr); }
.configure-map-data { display:grid; gap:1rem; }
.configure-series { display:grid; gap:.75rem; }
.configure-series-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.configure-series-heading p { max-width:46rem; margin:.2rem 0 0; color:var(--color-text-muted); font-size:.78rem; }
.configure-series-list { display:grid; gap:.6rem; }
.encoding-controls { display:grid; gap:.85rem; padding-top:1rem; border-top:1px solid var(--color-border); }
.encoding-controls p { margin:.2rem 0 0; color:var(--color-text-muted); }
.encoding-mode-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; }
.encoding-mode-options label { position:relative; }
.encoding-mode-options input { position:absolute; opacity:0; pointer-events:none; }
.encoding-mode-options span { display:grid; gap:.2rem; min-height:72px; padding:.75rem; border:1px solid var(--color-border); border-radius:8px; cursor:pointer; }
.encoding-mode-options small { color:var(--color-text-muted); font-weight:400; }
.encoding-mode-options input:checked + span { border-color:var(--color-accent); box-shadow:inset 0 0 0 1px var(--color-accent); background:color-mix(in srgb,var(--color-accent),transparent 94%); }
.encoding-mode-options input:disabled + span { opacity:.45; cursor:not-allowed; }
.encoding-mode-options input:focus-visible + span { outline:3px solid var(--color-accent); outline-offset:2px; }
.encoding-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; padding:.8rem; border:1px solid var(--color-border); border-radius:8px; }
.bivariate-palette-control { grid-column:1/-1; }
.bivariate-palette-options { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.4rem; }
.bivariate-palette-option { display:flex; align-items:center; gap:.45rem; min-height:42px; padding:.4rem .55rem; border:1px solid var(--color-border); border-radius:7px; background:transparent; color:inherit; cursor:pointer; }
.bivariate-palette-option[aria-checked="true"] { border-color:var(--color-accent); box-shadow:inset 0 0 0 1px var(--color-accent); }
.bivariate-palette-swatch { display:grid; grid-template-columns:repeat(3,9px); width:27px; }
.bivariate-palette-swatch i { width:9px; height:9px; }
.bivariate-legend { display:grid; grid-template-columns:auto auto; align-items:center; gap:.45rem; }
.bivariate-legend-y { writing-mode:vertical-rl; transform:rotate(180deg); font-size:.72rem; font-weight:700; }
.bivariate-legend-main { display:grid; gap:.25rem; }
.bivariate-legend-grid { display:grid; grid-template-columns:repeat(3,28px); grid-template-rows:repeat(3,22px); }
.bivariate-legend-grid .legend-filter { min-width:0; min-height:0; padding:0; border-radius:0; }
.bivariate-legend-grid .legend-filter i { display:block; width:100%; height:100%; border-radius:0; }
.bivariate-legend-grid .legend-filter[aria-pressed="true"] { position:relative; z-index:1; outline:3px solid var(--color-accent); outline-offset:1px; }
.bivariate-legend-x { font-size:.72rem; font-weight:700; text-align:center; }
.encoding-value-details { display:grid; gap:.12rem; }
.encoding-value-details small { color:var(--color-text-muted); font-size:.7rem; font-weight:500; }
.configure-series-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(110px,.6fr); gap:.65rem; padding:.8rem; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface-subtle); }
.configure-series-row > label { margin:0; }
.configure-series-active { display:flex; align-items:center; gap:.45rem; align-self:center; font-size:.78rem; font-weight:800; }
.configure-series-active input { width:18px; min-height:18px; margin:0; padding:0; accent-color:var(--color-accent); }
.configure-series-remove { justify-self:end; align-self:start; }
.configure-series-title { grid-column:1/-1; }
.preview-series { display:flex; align-items:center; gap:.5rem; width:max-content; margin-top:.75rem; font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.preview-series select { min-width:180px; padding:.42rem 1.8rem .42rem .55rem; font-size:.82rem; text-transform:none; letter-spacing:normal; }
.data-check { display:grid; gap:.9rem; padding:1rem; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface-muted); }
.data-check h3 { margin:.15rem 0 0; font-size:1rem; }
.quality-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; }
.quality-grid span { display:grid; gap:.1rem; color:var(--color-text-muted); font-size:.7rem; }
.quality-grid[hidden],.quality-grid > span[hidden] { display:none; }
.quality-grid strong { color:var(--color-text); font-size:1.15rem; }
.data-check details { font-size:.8rem; }
.privacy-check { display:grid; gap:.75rem; padding:1rem; border:1px solid color-mix(in srgb,var(--negative),var(--color-border) 45%); border-radius:var(--radius-md); background:color-mix(in srgb,var(--negative),transparent 94%); }
.privacy-check h3,.privacy-check p { margin:0; }
.privacy-check h3 { margin-top:.15rem; font-size:1rem; }
.privacy-check > div > p,.privacy-caveat { color:var(--color-text-muted); font-size:.76rem; line-height:1.45; }
.privacy-check ul { display:grid; gap:.35rem; margin:0; padding-left:1.15rem; color:var(--color-text); font-size:.78rem; }
.privacy-check li strong { color:var(--color-text); }
.geocode-check { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:1rem; padding:1rem; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface-muted); }
.geocode-check h3,.geocode-check p { margin:0; }
.geocode-check h3 { margin-top:.15rem; font-size:1rem; }
.geocode-check p { margin-top:.25rem; color:var(--color-text-muted); font-size:.76rem; line-height:1.45; }
.field-settings { border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; }
.field-settings summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; cursor:pointer; padding:.9rem 1rem; background:var(--color-surface-muted); list-style:none; }
.field-settings summary::-webkit-details-marker { display:none; }
.field-settings summary span { display:grid; gap:.15rem; }
.field-settings summary small { color:var(--color-text-muted); font-size:.72rem; font-weight:550; }
.field-settings summary::after { content:"⌄"; flex:0 0 auto; color:var(--color-accent); font-size:1.15rem; font-weight:850; transition:transform .16s ease; }
.field-settings[open] summary::after { transform:rotate(180deg); }
.field-settings-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; padding:1rem; }
.field-setting { display:grid; grid-template-columns:minmax(0,1fr) minmax(105px,.75fr) minmax(125px,.7fr); align-items:end; gap:.5rem; padding:.65rem; border:1px solid var(--color-border); border-radius:var(--radius-sm); }
.field-setting > strong { align-self:center; overflow:hidden; color:var(--color-text); font-size:.78rem; text-overflow:ellipsis; white-space:nowrap; }
.field-setting label { gap:.2rem; font-size:.65rem; }
.field-setting select { min-height:38px; padding:.4rem .5rem; font-size:.76rem; }
.source-review { display:grid; gap:.8rem; }
.source-review-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; }
.review-actions { display:flex; align-items:center; justify-content:flex-end; gap:.5rem; }
.source-review-heading h3,.source-review-heading p { margin:0; }
.source-review-heading h3 { font-size:1rem; }
.source-review-heading p { margin-top:.2rem; color:var(--color-text-muted); font-size:.78rem; }
.review-table-wrap { max-height:460px; overflow:auto; border:1px solid var(--color-border); border-radius:var(--radius-md); }
.review-table { width:max-content; min-width:100%; border-collapse:collapse; font-size:.78rem; }
.review-table th,.review-table td { padding:.62rem .7rem; border-bottom:1px solid var(--color-border); text-align:left; vertical-align:middle; }
.review-table th { position:sticky; z-index:1; top:0; background:var(--color-surface-muted); color:var(--color-text-muted); font-size:.65rem; letter-spacing:.04em; text-transform:uppercase; }
.review-table th button { display:flex; align-items:center; justify-content:space-between; gap:.4rem; width:100%; min-height:28px; padding:0; border:0; background:transparent; color:inherit; font:inherit; letter-spacing:inherit; text-align:left; text-transform:inherit; }
.review-table td { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.review-table tbody tr:last-child td { border-bottom:0; }
.review-table .is-excluded { color:var(--color-text-muted); background:var(--color-surface-muted); opacity:.72; }
.review-include { width:18px; min-height:18px; accent-color:var(--color-accent); }
.review-place { display:flex; align-items:baseline; gap:.45rem; }
.review-place small { color:var(--color-text-muted); }
.review-status { display:inline-flex; padding:.2rem .42rem; border-radius:999px; font-size:.68rem; font-weight:800; white-space:nowrap; }
.review-status--success { background:color-mix(in srgb,var(--positive),transparent 88%); color:var(--positive); }
.review-status--warning { background:color-mix(in srgb,var(--negative),transparent 84%); color:color-mix(in srgb,var(--negative),#000 24%); }
.review-status--error { background:color-mix(in srgb,var(--color-danger),transparent 88%); color:var(--color-danger); }
.review-status--muted { background:var(--color-surface-muted); color:var(--color-text-muted); }
.review-empty { padding:1.5rem!important; color:var(--color-text-muted); text-align:center!important; }
.next-button { justify-self:stretch; }
.step-buttons { justify-content:space-between; }
.visual-options { grid-template-columns:repeat(2,1fr); }
.visual-options legend { grid-column:1/-1; }
.visual-options label { position:relative; cursor:pointer; }
.visual-options input { position:absolute; clip-path:inset(50%); width:1px; height:1px; }
.visual-options label > span { display:grid; align-content:start; gap:.35rem; min-height:116px; padding:1rem; border:1px solid var(--color-border); border-radius:var(--radius-md); color:var(--color-text); }
.visual-options small { color:var(--color-text-muted); font-size:.68rem; font-weight:500; line-height:1.25; }
.visual-options small b { color:var(--color-text); }
.visual-options em { color:var(--color-accent); font-size:.66rem; font-style:normal; font-weight:800; line-height:1.3; }
.visual-options input:checked + span { border-color:var(--color-accent); box-shadow:inset 0 0 0 1px var(--color-accent); background:color-mix(in srgb,var(--color-accent),transparent 94%); }
.visual-options input:focus-visible + span { outline:3px solid color-mix(in srgb,var(--color-accent),transparent 55%); outline-offset:2px; }
.visual-options .is-unavailable { cursor:not-allowed; }
.visual-options .is-unavailable > span { opacity:.62; background:var(--color-surface-muted); }
.format-note { margin:0; padding:.8rem 1rem; border-radius:var(--radius-sm); background:var(--color-surface-muted); color:var(--color-text-muted); font-size:.8rem; }
.mini-viz { align-self:end; width:100%; height:64px; margin-top:auto; border-radius:3px; opacity:.75; }
.mini-viz--blocks { background:linear-gradient(90deg,var(--positive) 0 22%,transparent 22% 26%,var(--positive) 26% 43%,transparent 43% 47%,var(--negative) 47% 60%,transparent 60% 64%,var(--positive) 64% 100%); clip-path:polygon(0 35%,22% 35%,22% 0,43% 0,43% 55%,60% 55%,60% 25%,78% 25%,78% 0,100% 0,100% 100%,64% 100%,64% 78%,47% 78%,47% 100%,26% 100%,26% 70%,0 70%); }
.mini-viz--map { background:var(--positive); clip-path:polygon(2% 33%,13% 18%,21% 26%,30% 9%,42% 15%,50% 3%,65% 25%,78% 19%,96% 39%,88% 76%,68% 82%,56% 98%,37% 80%,21% 89%,8% 66%); }
.mini-viz--hex { background:radial-gradient(circle at 11% 48%,var(--positive) 0 8%,transparent 8.5%),radial-gradient(circle at 28% 30%,var(--negative) 0 8%,transparent 8.5%),radial-gradient(circle at 28% 66%,var(--positive) 0 8%,transparent 8.5%),radial-gradient(circle at 45% 48%,var(--positive) 0 8%,transparent 8.5%),radial-gradient(circle at 62% 30%,var(--negative) 0 8%,transparent 8.5%),radial-gradient(circle at 62% 66%,var(--positive) 0 8%,transparent 8.5%),radial-gradient(circle at 79% 48%,var(--negative) 0 8%,transparent 8.5%),radial-gradient(circle at 96% 30%,var(--positive) 0 8%,transparent 8.5%); filter:drop-shadow(0 0 0 color-mix(in srgb,var(--preview-ink),transparent 50%)); }
.mini-viz--tour { background:radial-gradient(circle at 15% 70%,var(--positive) 0 6%,transparent 7%),radial-gradient(circle at 48% 22%,var(--negative) 0 7%,transparent 8%),radial-gradient(circle at 82% 58%,var(--positive) 0 6%,transparent 7%),linear-gradient(145deg,transparent 0 18%,color-mix(in srgb,var(--positive),transparent 35%) 19% 21%,transparent 22% 49%,color-mix(in srgb,var(--positive),transparent 35%) 50% 52%,transparent 53%); }
.mini-viz--world { border-radius:50%; background:radial-gradient(ellipse at 28% 36%,var(--positive) 0 2%,transparent 3%),radial-gradient(ellipse at 61% 31%,var(--positive) 0 2%,transparent 3%),radial-gradient(ellipse at 68% 66%,var(--negative) 0 3%,transparent 4%),radial-gradient(ellipse at center,color-mix(in srgb,var(--positive),transparent 84%) 0 64%,transparent 65%),repeating-radial-gradient(circle at center,var(--positive) 0 1px,transparent 1px 7px); }
.check-label { display:flex; grid-template-columns:auto 1fr; align-items:center; gap:.6rem; color:var(--color-text); }
.check-label input { width:20px; min-height:20px; accent-color:var(--color-accent); }
.save-options { display:grid; grid-template-columns:1fr; gap:.65rem; }
.save-options article { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:.75rem; padding:.85rem; border:1px solid var(--color-border); border-radius:var(--radius-md); }
.value-treatment-card { display:grid; gap:.18rem; padding:.8rem .85rem; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface-muted); }
.value-treatment-card > span { color:var(--color-text-muted); font-size:.68rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.value-treatment-card > strong { font-size:.9rem; }
.value-treatment-card > small { color:var(--color-text-muted); font-size:.74rem; line-height:1.35; }
.metric-controls { display:grid; gap:.75rem; padding:.85rem; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface-muted); }
.metric-slots { display:grid; gap:.45rem; }
.metric-controls label { margin:0; }
.metric-slot-row { display:grid; grid-template-columns:82px minmax(0,1fr); align-items:center; gap:.6rem; }
.metric-slot-row .check-label { min-height:44px; }
.metric-slots select { margin-top:0; }
.metric-slots select:disabled { cursor:not-allowed; opacity:.55; }
.save-options h3,.save-options p { margin:0; }
.save-options p { margin:.2rem 0 0; color:var(--color-text-muted); font-size:.78rem; line-height:1.35; }
.save-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--color-surface-muted); color:var(--color-accent); font-weight:900; }
.save-options article > button { min-width:92px; white-space:nowrap; }
.publish-result { display:grid; grid-template-columns:1fr auto; align-items:center; gap:.75rem 1rem; padding:1rem; border:1px solid var(--color-accent); border-radius:var(--radius-md); background:color-mix(in srgb,var(--color-accent),transparent 96%); }
.publish-result h3 { margin:.1rem 0 0; }
.publish-result a { min-width:0; overflow:hidden; color:var(--color-accent); font-size:.8rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.preview-panel { position:sticky; top:84px; align-self:start; min-width:0; overflow:hidden; container:preview / inline-size; }
.preview-top { border-bottom:1px solid color-mix(in srgb,var(--header-accent-start,var(--positive)),var(--color-border) 76%); background:linear-gradient(118deg,color-mix(in srgb,var(--header-accent-start,var(--positive)),var(--color-surface) 88%),color-mix(in srgb,var(--header-accent-end,var(--positive)),var(--color-surface) 96%)); }
.preview-heading { display:flex; justify-content:space-between; align-items:start; gap:1rem; padding:1.25rem 1.4rem; }
.preview-heading :is(h1,h2),.preview-heading p { margin:0; }
.preview-heading :is(h1,h2) { margin-top:.15rem; font-family:var(--font-serif); font-weight:500; font-size:clamp(1.6rem,3vw,2.6rem); line-height:1.05; }
.preview-heading p { max-width:700px; margin-top:.3rem; color:var(--color-text-muted); font-size:.88rem; }
.preview-brand { display:grid; flex:0 0 auto; grid-template-columns:32px auto; grid-template-rows:auto auto; align-items:center; column-gap:.5rem; color:var(--color-text); text-decoration:none; }
.preview-brand > img { display:block; grid-row:1/3; width:32px; height:32px; border-radius:7px; }
.preview-brand small { align-self:end; color:var(--color-text-muted); font-size:.58rem; line-height:1; text-transform:uppercase; letter-spacing:.08em; }
.preview-brand strong { align-self:start; max-width:105px; font-size:.68rem; line-height:1.05; }
.preview-metrics { display:grid; grid-template-columns:repeat(var(--metric-count,3),minmax(0,1fr)); gap:.6rem; padding:0 1.4rem 1rem; }
.preview-metric { min-width:0; padding:.7rem .8rem; border:1px solid color-mix(in srgb,var(--positive),var(--color-border) 72%); border-radius:var(--radius-sm); background:color-mix(in srgb,var(--color-surface),transparent 16%); }
.preview-metric > span { display:block; color:var(--color-text-muted); font-size:.62rem; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }
.preview-metric strong { display:block; margin-top:.15rem; overflow:hidden; font-size:clamp(.86rem,1.8vw,1.2rem); line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
.preview-body.side-table { display:grid; grid-template-columns:minmax(0,2.3fr) minmax(280px,.9fr); grid-template-areas:"map table" "legend table"; grid-template-rows:minmax(420px,auto) auto; align-items:stretch; gap:0; margin-top:0; }
.preview-body.side-table.table-collapsed { grid-template-columns:minmax(0,1fr); grid-template-areas:"map" "legend"; }
.preview-body.side-table .preview-canvas { grid-area:map; min-height:420px; border-right:1px solid var(--color-border); }
.preview-body.side-table .preview-legend { grid-area:legend; border-right:1px solid var(--color-border); }
.preview-body.side-table #visualization { min-height:400px; }
.preview-body.side-table .preview-table-view { grid-area:table; min-height:420px; max-height:620px; margin-top:0; border-top:0; }
.preview-body.side-table.table-collapsed .preview-table-view { display:none; min-height:0; }
.preview-body.side-table.table-collapsed .preview-table-heading { grid-template-columns:1fr; justify-items:center; padding:.65rem .35rem; }
.preview-body.side-table.table-collapsed .preview-table-heading button { grid-column:1; }
.preview-body.side-table .data-table-wrap th,.preview-body.side-table .data-table-wrap td { padding:.55rem .65rem; }
.preview-view-switch { display:inline-flex; width:max-content; padding:3px; border:1px solid var(--color-border); border-radius:8px; background:var(--color-surface); }
.preview-view-switch button { display:grid; place-items:center; width:34px; min-height:32px; padding:.35rem; border:0; border-radius:5px; background:transparent; color:var(--color-text-muted); cursor:pointer; }
.preview-view-switch button[aria-pressed="true"] { background:color-mix(in srgb,var(--color-accent),transparent 86%); color:var(--color-accent); }
.preview-view-switch svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.draft-status { flex:0 0 auto; padding:.35rem .55rem; border-radius:999px; background:var(--color-surface-muted); color:var(--color-text-muted); font-size:.7rem; font-weight:800; }
.preview-canvas { position:relative; min-height:500px; padding:1rem; overflow:hidden; background-color:var(--preview-paper); background-image:linear-gradient(180deg,color-mix(in srgb,var(--header-accent-start,var(--positive)),var(--preview-paper) 95%),var(--preview-paper) 42%); color:var(--preview-ink); }
.preview-canvas[data-background="textured-paper"] { background-color:var(--preview-paper); background-image:linear-gradient(180deg,color-mix(in srgb,var(--header-accent-start,var(--positive)),var(--preview-paper) 95%),transparent 42%),radial-gradient(ellipse at 20% 18%,rgba(255,255,255,.34) 0 1px,transparent 1.8px),radial-gradient(ellipse at 72% 64%,rgba(48,41,31,.11) 0 .8px,transparent 1.7px),repeating-linear-gradient(2deg,rgba(48,41,31,.045) 0 .7px,transparent .7px 8px),repeating-linear-gradient(92deg,rgba(255,255,255,.12) 0 .8px,transparent .8px 28px); background-size:auto,17px 21px,23px 19px,auto,auto; box-shadow:inset 0 0 70px rgba(77,58,30,.13); }
#visualization { display:block; width:100%; min-height:480px; overflow:hidden; touch-action:none; cursor:grab; }
#visualization:active { cursor:grabbing; }
.hex-overview-toggle { position:absolute; z-index:5; inset-inline-end:1.45rem; inset-block-end:6.85rem; display:grid; place-items:center; inline-size:30px; min-block-size:30px; padding:0; border:1px solid color-mix(in srgb,var(--preview-ink),transparent 70%); border-radius:7px; background:color-mix(in srgb,var(--preview-paper),transparent 4%); color:var(--preview-ink); box-shadow:0 5px 14px color-mix(in srgb,var(--preview-ink),transparent 86%); cursor:pointer; transition:inset-block-end .16s ease,background-color .16s ease; }
.hex-overview-toggle[hidden] { display:none; }
.hex-overview-toggle:hover { background:color-mix(in srgb,var(--preview-ink),var(--preview-paper) 92%); }
.hex-overview-toggle:focus-visible { outline:3px solid var(--color-accent); outline-offset:2px; }
.hex-overview-toggle svg { inline-size:17px; block-size:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .16s ease; }
.preview-canvas.hex-overview-collapsed .hex-overview-toggle { inset-block-end:1.25rem; }
.preview-canvas.hex-overview-collapsed .hex-overview-toggle svg { transform:rotate(180deg); }
.map-tools { position:absolute; z-index:4; top:1.75rem; right:1.75rem; display:grid; justify-items:end; gap:.45rem; }
.map-controls { display:grid; overflow:hidden; border:1px solid color-mix(in srgb,var(--preview-ink),transparent 72%); border-radius:9px; background:color-mix(in srgb,var(--preview-paper),transparent 5%); box-shadow:0 7px 22px color-mix(in srgb,var(--preview-ink),transparent 88%); }
.map-controls button { display:grid; place-items:center; width:40px; min-height:38px; padding:0; border:0; border-bottom:1px solid color-mix(in srgb,var(--preview-ink),transparent 80%); background:transparent; color:var(--preview-ink); font-size:1.18rem; font-weight:750; cursor:pointer; }
.map-controls button:last-child { border-bottom:0; }
.map-controls:not(.has-home) #map-zoom-out { border-bottom:0; }
.map-controls button:hover { background:color-mix(in srgb,var(--preview-ink),transparent 91%); }
.map-controls button[aria-disabled="true"] { color:color-mix(in srgb,var(--preview-ink),transparent 62%); cursor:default; }
.map-controls button:focus-visible { position:relative; z-index:1; outline:3px solid var(--color-accent); outline-offset:-3px; }
.map-controls svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.map-search { position:relative; width:40px; }
.map-search-toggle,.map-table-toggle { display:grid; place-items:center; width:40px; min-height:40px; padding:0; border:1px solid color-mix(in srgb,var(--preview-ink),transparent 72%); border-radius:9px; background:color-mix(in srgb,var(--preview-paper),transparent 5%); color:var(--preview-ink); box-shadow:0 7px 22px color-mix(in srgb,var(--preview-ink),transparent 88%); cursor:pointer; }
.map-search-toggle:hover,.map-search-toggle[aria-expanded="true"],.map-table-toggle:hover { background:color-mix(in srgb,var(--preview-ink),var(--preview-paper) 91%); }
.map-table-toggle svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.map-table-toggle[hidden] { display:none; }
.map-search-toggle:focus-visible,.map-table-toggle:focus-visible { outline:3px solid var(--color-accent); outline-offset:2px; }
.map-search-toggle svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.map-search-panel { position:absolute; top:0; right:48px; width:min(320px,calc(100vw - 9rem)); overflow:hidden; border:1px solid color-mix(in srgb,var(--preview-ink),transparent 68%); border-radius:9px; background:var(--color-surface); color:var(--color-text); box-shadow:var(--shadow-card); }
.map-search-panel[hidden] { display:none; }
.map-search-panel input { width:100%; min-height:40px; padding:.55rem .7rem; border:0; border-bottom:1px solid var(--color-border); border-radius:0; background:var(--color-surface); color:var(--color-text); font:inherit; }
.map-search-panel input:focus { outline:3px solid var(--color-accent); outline-offset:-3px; }
.map-search-results { max-height:260px; margin:0; padding:0; overflow:auto; list-style:none; overscroll-behavior:contain; }
.map-search-results:empty { display:none; }
.map-search-results li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.25rem .7rem; padding:.55rem .7rem; border-bottom:1px solid var(--color-border); cursor:pointer; }
.map-search-results li:last-child { border-bottom:0; }
.map-search-results li:hover,.map-search-results li[aria-selected="true"] { background:color-mix(in srgb,var(--color-accent),transparent 89%); }
.map-search-name { display:flex; min-width:0; align-items:baseline; gap:.4rem; }
.map-search-results strong { overflow:hidden; color:var(--color-text); font-size:.76rem; text-overflow:ellipsis; white-space:nowrap; }
.map-search-results small,.map-search-results span { color:var(--color-text-muted); font-size:.68rem; }
.map-search-results .map-search-value { text-align:right; white-space:nowrap; }
.map-search-status { display:block; padding:.55rem .7rem; color:var(--color-text-muted); font-size:.75rem; line-height:1.4; }
.globe-mode-toggle { display:flex; padding:3px; border:1px solid color-mix(in srgb,var(--preview-ink),transparent 72%); border-radius:9px; background:color-mix(in srgb,var(--preview-paper),transparent 5%); box-shadow:0 7px 22px color-mix(in srgb,var(--preview-ink),transparent 88%); }
.globe-mode-toggle[hidden] { display:none; }
.globe-mode-toggle button { min-width:42px; min-height:34px; padding:.35rem .55rem; border:0; border-radius:6px; background:transparent; color:var(--preview-ink); font:800 .72rem var(--font-sans); cursor:pointer; }
.globe-mode-toggle button[aria-pressed="true"] { background:var(--preview-ink); color:var(--preview-paper); }
.globe-dot { fill:color-mix(in srgb,var(--preview-ink),transparent 38%); pointer-events:none; }
.globe-sphere { fill:color-mix(in srgb,var(--positive),var(--preview-paper) 92%); stroke:color-mix(in srgb,var(--preview-ink),transparent 70%); stroke-width:1.1; pointer-events:none; }
.globe-spike { stroke:var(--positive); stroke-linecap:round; filter:drop-shadow(0 2px 4px color-mix(in srgb,var(--positive),transparent 55%)); }
.globe-spike.negative { stroke:var(--negative); }
.globe-spike-cap { fill:var(--positive); stroke:var(--preview-paper); stroke-width:1.2; }
.globe-spike-cap.negative { fill:var(--negative); }
.globe-mode .viz-hit { cursor:pointer; }
.region-base { fill:none; stroke:color-mix(in srgb,var(--preview-ink),transparent 80%); stroke-width:1; }
.map-graticule { fill:none; stroke:color-mix(in srgb,var(--preview-ink),transparent 91%); stroke-width:.65; vector-effect:non-scaling-stroke; pointer-events:none; }
.topographic-line { fill:none; stroke:var(--positive); stroke-opacity:.09; stroke-width:1; vector-effect:non-scaling-stroke; }
.topographic-backdrop { fill:url(#topographic-pattern); pointer-events:none; }
.data-mark,.state-shape { fill:var(--positive); }
.point-basemap { fill:color-mix(in srgb,var(--preview-ink),transparent 94%); stroke:color-mix(in srgb,var(--preview-ink),transparent 72%); stroke-width:.65; pointer-events:none; }
.point-marker,.point-pin path { fill:var(--positive); stroke:var(--preview-paper); stroke-width:1.5; }
.point-pin[style] path { fill:inherit; }
.point-marker.negative,.point-pin.negative path { fill:var(--negative); }
.point-pin circle { fill:var(--preview-paper); stroke:none; pointer-events:none; }
.point-label { fill:var(--preview-ink); stroke:var(--preview-paper); stroke-width:3px; paint-order:stroke fill; font:700 10px var(--font-sans); text-anchor:middle; pointer-events:none; }
.point-cluster { cursor:pointer; }
.point-cluster-ring { fill:var(--positive); stroke:var(--positive); transition:fill-opacity .14s ease,stroke-opacity .14s ease; }
.point-cluster-ring--outer { fill-opacity:.1; stroke-opacity:.22; stroke-width:2; }
.point-cluster-ring--inner { fill-opacity:.18; stroke-opacity:.42; stroke-width:2; }
.point-cluster-core { fill:var(--preview-ink); stroke:var(--preview-paper); stroke-width:1.5; transition:fill .14s ease; }
.point-cluster text { fill:var(--preview-paper); text-anchor:middle; pointer-events:none; }
.point-cluster-count { font:850 10px var(--font-sans); }
.point-cluster:focus-visible .point-cluster-core,.point-cluster:hover .point-cluster-core,.point-cluster.is-linked .point-cluster-core { fill:var(--color-accent-strong); }
.point-cluster:focus-visible .point-cluster-ring,.point-cluster:hover .point-cluster-ring,.point-cluster.is-linked .point-cluster-ring { fill-opacity:.28; stroke-opacity:.72; }
.negative { fill:var(--negative); }
.missing { fill:color-mix(in srgb,var(--preview-ink),transparent 92%); }
.state-boundary { fill:none; stroke:color-mix(in srgb,var(--preview-ink),transparent 58%); stroke-width:.7; pointer-events:none; }
.live-line { fill:none; stroke:var(--positive); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.live-line-hit { fill:none; stroke:transparent; stroke-width:14; vector-effect:non-scaling-stroke; cursor:pointer; }
.viz-region:focus-visible .live-line,.viz-region:hover .live-line,.viz-region.is-linked .live-line { stroke:var(--preview-ink); stroke-width:4; }
.hex-tile { stroke:var(--preview-paper); stroke-width:2; stroke-linejoin:round; }
.choropleth-pattern { pointer-events:none; }
.viz-label { fill:var(--preview-ink); stroke:var(--preview-paper); stroke-width:3px; paint-order:stroke fill; font:700 11px var(--font-sans); text-anchor:middle; pointer-events:none; }
.viz-label-value { font-size:9px; font-weight:800; }
.viz-label-icon { font-size:13px; font-weight:800; }
.viz-callout-line { fill:none; stroke:color-mix(in srgb,var(--preview-ink),transparent 35%); stroke-width:.9; pointer-events:none; }
.viz-callout-label { fill:var(--preview-ink); stroke:var(--preview-paper); stroke-width:3px; paint-order:stroke fill; font:750 10px var(--font-sans); dominant-baseline:middle; pointer-events:none; }
.viz-hit { fill:transparent; cursor:pointer; }
.viz-region:focus-visible { outline:none; }
.viz-region:focus-visible .viz-hit,.viz-region:hover .viz-hit,.viz-region.is-linked .viz-hit { stroke:var(--preview-ink); stroke-width:2; }
.viz-region { transition:opacity .18s ease; }
.viz-region.is-filtered-out { opacity:.07; pointer-events:none; }
.preview-tooltip { position:absolute; z-index:8; display:grid; gap:.2rem; max-width:280px; padding:.6rem .7rem; border:1px solid color-mix(in srgb,var(--preview-ink),transparent 70%); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text); box-shadow:var(--shadow-soft); font-size:.78rem; pointer-events:auto; }
.preview-tooltip b { color:var(--color-text-muted); font-size:.7rem; }
.preview-tooltip img { display:block; width:100%; max-height:120px; object-fit:cover; border-radius:4px; }
.tooltip-pager { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin:-.12rem -.18rem .2rem; color:var(--color-text-muted); font-size:.68rem; font-weight:800; }
.tooltip-pager-buttons { display:flex; gap:.2rem; }
.tooltip-pager button { display:grid; place-items:center; width:30px; height:30px; padding:0; border:1px solid var(--color-border); border-radius:6px; background:var(--color-surface); color:var(--color-text); font:700 1.15rem/1 var(--font-sans); cursor:pointer; }
.tooltip-pager button:hover { border-color:var(--color-accent); color:var(--color-accent-strong); }
.tooltip-pager button:focus-visible { outline:3px solid color-mix(in srgb,var(--color-accent),transparent 45%); outline-offset:1px; }
.tooltip-action { display:inline-flex; align-items:center; justify-content:center; min-height:34px; margin-top:.35rem; padding:.42rem .62rem; border-radius:6px; background:var(--color-accent); color:#fff; font-size:.72rem; font-weight:750; text-decoration:none; }
.tooltip-action:hover { background:var(--color-accent-strong); }
.tooltip-action:focus-visible { outline:3px solid color-mix(in srgb,var(--color-accent),transparent 45%); outline-offset:2px; }
.tooltip-close,.legend-breaks-toggle { display:none; }
.empty-preview { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); color:var(--preview-ink); }
.preview-legend { display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:.45rem 1rem; padding:.75rem 1.4rem; overflow-x:auto; scrollbar-width:thin; border-top:1px solid var(--color-border); color:var(--color-text-muted); font-size:.74rem; }
.preview-legend.is-large { align-content:flex-start; max-height:clamp(118px,18vh,168px); overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.preview-legend.is-large:focus-visible { outline:3px solid var(--color-accent); outline-offset:-3px; }
.legend-key { display:flex; flex:0 0 auto; align-items:center; gap:.35rem; white-space:nowrap; }
.legend-key i { width:12px; height:12px; border-radius:2px; background:var(--positive); }
.legend-pattern-key i { border:1px solid color-mix(in srgb,var(--preview-ink),transparent 65%); background-color:color-mix(in srgb,var(--preview-ink),transparent 94%); }
.legend-pattern-key i[data-pattern="dots"] { background-image:radial-gradient(circle,var(--preview-ink) 0 1px,transparent 1.2px); background-size:4px 4px; }
.legend-pattern-key i[data-pattern="diagonal"] { background-image:repeating-linear-gradient(135deg,transparent 0 3px,var(--preview-ink) 3px 4px); }
.legend-pattern-key i[data-pattern="crosshatch"] { background-image:repeating-linear-gradient(45deg,transparent 0 4px,var(--preview-ink) 4px 5px),repeating-linear-gradient(135deg,transparent 0 4px,var(--preview-ink) 4px 5px); }
.legend-pattern-key i[data-pattern="horizontal"] { background-image:repeating-linear-gradient(0deg,transparent 0 3px,var(--preview-ink) 3px 4px); }
.legend-pattern-key i[data-pattern="vertical"] { background-image:repeating-linear-gradient(90deg,transparent 0 3px,var(--preview-ink) 3px 4px); }
.legend-pattern-key i[data-pattern="waves"] { background-image:radial-gradient(ellipse at 50% 100%,transparent 0 45%,var(--preview-ink) 48% 55%,transparent 58%); background-size:8px 5px; }
.legend-key--negative i { background:var(--negative); }
.legend-filter { padding:.28rem .38rem; border:1px solid transparent; border-radius:6px; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.legend-filter:hover { border-color:var(--color-border); color:var(--color-text); }
.legend-filter[aria-pressed="true"] { border-color:var(--color-accent); background:color-mix(in srgb,var(--color-accent),transparent 90%); color:var(--color-text); box-shadow:0 0 0 1px var(--color-accent); }
.preview-legend.is-filtering .legend-filter[aria-pressed="false"] { opacity:.46; }
.legend-scale { display:grid; grid-template-columns:max-content minmax(100px,1fr) max-content; align-items:center; gap:.75rem; flex:1 1 420px; min-width:min(280px,100%); }
.legend-filter-ramp { position:relative; display:flex; min-width:0; width:100%; height:14px; overflow:visible; border:1px solid color-mix(in srgb,var(--preview-ink),transparent 75%); border-radius:999px; }
.legend-filter-ramp .legend-filter { flex:1; min-width:0; min-height:0; height:100%; padding:0; overflow:hidden; border:0; border-radius:0; box-shadow:none; }
.legend-filter-ramp .legend-filter:first-child { border-radius:999px 0 0 999px; }
.legend-filter-ramp .legend-filter:last-of-type { border-radius:0 999px 999px 0; }
.legend-filter-ramp .legend-filter i { display:block; width:100%; height:100%; border-radius:0; }
.legend-filter-ramp .legend-filter span { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.legend-filter-ramp .legend-filter[aria-pressed="true"] { position:relative; z-index:1; outline:3px solid var(--color-accent); outline-offset:2px; }
.legend-edge { flex:0 0 auto; }
.legend-ramp { position:relative; flex:1; min-width:80px; height:14px; align-self:center; border:1px solid color-mix(in srgb,var(--preview-ink),transparent 75%); border-radius:999px; background:var(--legend-ramp,linear-gradient(90deg,color-mix(in srgb,var(--positive),transparent 82%),var(--positive))); }
.legend-zero { position:absolute; top:-4px; bottom:-4px; left:var(--legend-zero,50%); width:2px; border-radius:2px; background:var(--preview-ink); box-shadow:0 0 0 1px var(--preview-paper); }
.legend-breaks { order:2; flex:0 0 100%; white-space:normal; font-size:.68rem; line-height:1.35; text-align:center; }
.data-table-wrap tbody tr[data-region] { cursor:pointer; transition:background .14s ease; }
.data-table-wrap tbody tr[data-region]:hover,.data-table-wrap tbody tr[data-region]:focus,.data-table-wrap tbody tr[data-region].is-linked { outline:none; background:color-mix(in srgb,var(--color-accent),transparent 89%); }
.data-table-wrap tbody tr[data-region].is-popup-current { background:color-mix(in srgb,var(--color-accent),transparent 80%); box-shadow:inset 4px 0 0 var(--color-accent); }
.preview-footer { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:.65rem 1rem; padding:.85rem 1.4rem; border-top:1px solid var(--color-border); }
.preview-meta { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; min-width:0; gap:.18rem .35rem; color:var(--color-text-muted); font-size:.64rem; line-height:1.35; }
.preview-meta:empty { display:none; }
.preview-meta-copy { display:-webkit-box; max-height:4.05em; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.preview-meta-copy span { display:block; }
.preview-meta-copy.is-expanded { display:block; max-height:none; overflow:visible; -webkit-line-clamp:unset; }
.preview-meta-toggle { display:grid; place-items:center; align-self:end; width:28px; min-height:28px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--color-accent-strong); cursor:pointer; }
.preview-meta-toggle[hidden] { display:none; }
.preview-meta-toggle:hover { background:color-mix(in srgb,var(--color-accent),transparent 90%); }
.preview-meta-toggle:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
.preview-meta-toggle svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s ease; }
.preview-meta-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
.preview-footer-toolbar { display:flex; justify-content:flex-end; align-items:center; gap:.55rem; justify-self:end; }
.preview-create-cta { display:flex; justify-content:center; padding:.7rem 1rem; border-top:1px solid var(--color-border); background:var(--color-surface-muted); text-align:center; }
.preview-create-cta a { color:var(--color-accent); font-size:.75rem; font-weight:700; letter-spacing:.015em; text-decoration:none; }
.preview-create-cta a:hover { text-decoration:underline; text-underline-offset:3px; }
.preview-create-cta a:focus-visible { outline:3px solid var(--color-accent); outline-offset:3px; border-radius:2px; }
.preview-actions { display:flex; flex:0 0 auto; gap:.4rem; }
.preview-actions button { display:grid; place-items:center; width:38px; min-height:38px; padding:.45rem; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text); cursor:pointer; }
.preview-actions button:hover { border-color:var(--color-accent); color:var(--color-accent); }
.preview-actions svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.save-options .export-option { grid-template-columns:38px minmax(0,1fr); align-items:start; }
.export-option > .button-row { grid-column:2; flex-wrap:wrap; justify-content:flex-start; }
.export-settings { display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:.6rem; margin-top:.7rem; }
.export-settings label { font-size:.72rem; }
.preview-panel.is-fullscreen { position:fixed; z-index:100; inset:0; width:100vw; height:100vh; overflow:auto; border:0; border-radius:0; background:var(--color-surface); }
.preview-panel.is-fullscreen .preview-canvas { min-height:calc(100vh - 290px); }
.preview-panel.is-fullscreen #visualization { min-height:calc(100vh - 320px); }
.preview-overlay-open { overflow:hidden; }
.data-table-wrap { max-height:230px; overflow:auto; border-top:1px solid var(--color-border); }
.preview-table-view { min-height:360px; max-height:560px; margin-top:1rem; overflow:hidden; border-top:1px solid var(--color-border); }
.preview-table-heading { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:.55rem; min-height:48px; padding:.55rem 1rem; border-bottom:1px solid var(--color-border); background:var(--color-surface); }
.preview-table-heading:has(> button[hidden]) { grid-template-columns:minmax(0,1fr); }
.preview-table-search { position:relative; justify-self:stretch; width:100%; }
.preview-table-search[hidden] { display:none; }
.preview-table-search svg { position:absolute; top:50%; left:.55rem; width:16px; height:16px; transform:translateY(-50%); fill:none; stroke:var(--color-text-muted); stroke-width:2; stroke-linecap:round; pointer-events:none; }
.preview-table-search input { width:100%; min-height:34px; padding:.35rem .55rem .35rem 1.75rem; border:1px solid var(--color-border); border-radius:6px; background:var(--color-surface); color:var(--color-text); font:500 1rem var(--font-sans); }
.preview-table-search input:focus-visible { outline:3px solid color-mix(in srgb,var(--color-accent),transparent 45%); outline-offset:1px; }
.preview-table-heading button { display:grid; place-items:center; width:34px; min-height:34px; padding:.35rem; border:1px solid var(--color-border); border-radius:6px; background:var(--color-surface); color:var(--color-text); cursor:pointer; }
.preview-table-heading > button { grid-column:1; grid-row:1; }
.preview-table-heading button:hover { border-color:var(--color-accent); color:var(--color-accent); }
.preview-table-heading button:focus-visible { outline:3px solid color-mix(in srgb,var(--color-accent),transparent 45%); outline-offset:2px; }
.preview-table-heading button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.table-cluster-filter { display:flex; align-items:center; justify-content:space-between; gap:.6rem; min-height:40px; padding:.45rem .75rem; border-bottom:1px solid var(--color-border); background:color-mix(in srgb,var(--color-accent),var(--color-surface) 91%); color:var(--color-text); font-size:.72rem; }
.table-cluster-filter[hidden] { display:none; }
.table-cluster-filter button { flex:0 0 auto; padding:.25rem .4rem; border:0; border-radius:5px; background:transparent; color:var(--color-accent-strong); font:800 .7rem var(--font-sans); cursor:pointer; }
.table-cluster-filter button:hover { background:color-mix(in srgb,var(--color-accent),transparent 88%); }
.table-cluster-filter button:focus-visible { outline:2px solid var(--color-accent); outline-offset:1px; }
.preview-table-view > .data-table-wrap { max-height:calc(100% - 48px); border-top:0; scrollbar-gutter:stable; overscroll-behavior:contain; }
.preview-table-view:has(.table-cluster-filter:not([hidden])) > .data-table-wrap { max-height:calc(100% - 88px); }
.data-table-wrap table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:.82rem; }
.data-table-wrap th,.data-table-wrap td { padding:.62rem 1.4rem; border-bottom:1px solid var(--color-border); text-align:left; }
.data-table-wrap th { position:sticky; top:0; background:var(--color-surface); color:var(--color-text-muted); font-size:.7rem; text-transform:uppercase; }
.data-table-wrap th:last-child,.data-table-wrap td:last-child { text-align:right; }
.data-table-wrap th:first-child,.data-table-wrap td:first-child { width:82px; padding-right:.35rem; color:var(--color-text-muted); }
.data-table-wrap th:last-child,.data-table-wrap td:last-child { width:190px; white-space:nowrap; }
.territory-inset-frame { fill:color-mix(in srgb,var(--preview-paper),var(--preview-ink) 3%); stroke:color-mix(in srgb,var(--preview-ink),transparent 78%); stroke-width:1; }
.territory-inset-label { fill:var(--preview-ink); font:800 13px var(--font-sans); letter-spacing:.04em; }
.territory-inset-label tspan { font-weight:650; letter-spacing:0; }
.preview-body.side-table .data-table-wrap { font-size:.74rem; }
.preview-body.side-table .data-table-wrap th:first-child,.preview-body.side-table .data-table-wrap td:first-child { width:54px; padding-left:.65rem; }
.preview-body.side-table .data-table-wrap th:last-child,.preview-body.side-table .data-table-wrap td:last-child { width:130px; }
.app-status { position:fixed; z-index:40; right:1rem; bottom:1rem; max-width:min(420px,calc(100vw - 2rem)); margin:0; padding:.7rem .9rem; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); box-shadow:var(--shadow-card); font-size:.82rem; }
.app-status:empty { display:none; }
.app-status[data-tone="error"] { border-color:var(--color-danger); color:var(--color-danger); }
.small-screen-notice { display:none; }
.viewer-loading { display:none; }
html.viewer-route:not(.viewer-ready) .creator-shell { visibility:hidden; pointer-events:none; }
html.viewer-route:not(.viewer-ready) .viewer-loading { display:grid; position:fixed; inset:0; z-index:100; place-items:center; padding:1.5rem; background:var(--color-page); color:var(--color-text); }
.viewer-loading > div { display:grid; justify-items:center; gap:.55rem; text-align:center; }
.viewer-loading h1 { margin:0; font-weight:500; font-family:Georgia,serif; font-size:1.35rem; }
#viewer-loading-copy { color:var(--color-text-muted); font-size:.86rem; }
.viewer-loading-brand { position:relative; display:grid; place-items:center; width:64px; height:64px; margin-bottom:.15rem; }
.viewer-loading-brand img { display:block; width:38px; height:38px; }
.viewer-loading-mark { position:absolute; inset:0; border:3px solid color-mix(in srgb,var(--color-accent),transparent 76%); border-top-color:var(--color-accent); border-radius:50%; animation:viewer-loading-spin .8s linear infinite; }
.viewer-loading.is-error .viewer-loading-mark { display:none; }
@keyframes viewer-loading-spin { to { transform:rotate(360deg); } }
dialog { width:min(560px,calc(100vw - 2rem)); padding:0; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); color:var(--color-text); box-shadow:var(--shadow-card); }
dialog::backdrop { background:rgba(10,14,16,.58); backdrop-filter:blur(4px); }
dialog form { display:grid; gap:1rem; padding:1.25rem; }
.dialog-heading { display:flex; justify-content:space-between; gap:1rem; }
.dialog-heading h2 { margin:.15rem 0 0; }
.dialog-heading + p { margin:0; color:var(--color-text-muted); }
.code-output { display:block; overflow-wrap:anywhere; padding:.7rem; border-radius:var(--radius-sm); background:var(--color-surface-muted); font:12px var(--font-mono); }
.viewer-mode .creator-topbar,.viewer-mode .builder-panel { display:none; }
.viewer-mode .creator-workspace { grid-template-columns:minmax(0,1100px); padding-top:2rem; }
.viewer-mode .preview-panel { position:relative; top:auto; display:block; }
.example-back-link { display:flex; align-items:center; gap:.45rem; width:max-content; margin:.8rem 1rem; color:var(--color-text-muted); font-size:.82rem; font-weight:700; text-decoration:none; }
.example-back-link:hover { color:var(--color-accent); }
.example-back-link:focus-visible { color:var(--color-accent); outline:2px solid var(--color-focus); outline-offset:4px; border-radius:2px; }
.example-back-link[hidden] { display:none; }
.palette-control { display:grid; gap:.55rem; }
.palette-control .field-label { font-weight:700; }
.palette-picker { overflow:hidden; border:1px solid var(--color-border); border-radius:8px; background:var(--color-surface); }
.palette-picker summary { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.75rem; padding:.65rem; cursor:pointer; list-style:none; }
.palette-picker summary::-webkit-details-marker { display:none; }
.palette-picker summary:focus-visible { outline:3px solid var(--color-focus); outline-offset:-3px; }
.palette-current { display:grid; grid-template-columns:minmax(64px,.8fr) minmax(0,1fr); align-items:center; gap:.7rem; min-width:0; }
.palette-current > span:last-child { display:grid; gap:.1rem; min-width:0; }
.palette-current strong { overflow:hidden; font-size:.82rem; text-overflow:ellipsis; white-space:nowrap; }
.palette-current small { color:var(--color-text-muted); font-size:.67rem; }
.palette-change { color:var(--color-accent-strong); font-size:.74rem; font-weight:800; white-space:nowrap; }
.palette-picker-panel { display:grid; gap:.65rem; padding:.65rem; border-top:1px solid var(--color-border); background:var(--color-surface-muted); }
.palette-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }
.palette-option { display:grid; gap:.5rem; min-width:0; padding:.65rem; border:1px solid var(--color-border); border-radius:8px; background:var(--color-surface); color:var(--color-text); font:inherit; text-align:left; cursor:pointer; }
.palette-option:hover { border-color:color-mix(in srgb,var(--color-accent) 55%,var(--color-border)); }
.palette-option[aria-checked="true"] { border-color:var(--color-accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--color-accent) 22%,transparent); }
.palette-option:focus-visible { outline:3px solid var(--color-focus); outline-offset:2px; }
.palette-option > span:last-child { display:grid; gap:.1rem; min-width:0; }
.palette-option strong { overflow:hidden; font-size:.82rem; text-overflow:ellipsis; white-space:nowrap; }
.palette-option small { color:var(--color-text-muted); font-size:.67rem; }
.palette-swatch { display:flex; height:18px; overflow:hidden; border:1px solid color-mix(in srgb,var(--color-text) 14%,transparent); border-radius:4px; }
.palette-swatch i { flex:1; background:var(--palette-color); }
.example-guide { overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); content-visibility:auto; contain-intrinsic-size:auto 760px; }
.example-guide-heading { max-width:780px; padding:clamp(2rem,5vw,4.5rem) clamp(1.25rem,5vw,4.5rem) clamp(1.5rem,3vw,2.5rem); }
.example-guide-heading h2 { margin:.55rem 0 .8rem; font-family:var(--font-serif); font-size:clamp(2.25rem,5vw,4.25rem); font-weight:500; letter-spacing:-.045em; line-height:1; }
.example-guide-heading p { max-width:68ch; margin:0; color:var(--color-text-muted); font-size:1.05rem; line-height:1.7; }
.example-guide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--color-border); }
.example-guide-grid > * { min-width:0; padding:clamp(1.25rem,3vw,2.2rem); }
.example-guide-grid > * + * { border-left:1px solid var(--color-border); }
.example-guide-number { color:var(--color-accent); font:700 .68rem/1 var(--font-mono); letter-spacing:.12em; }
.example-guide-grid h3 { margin:.5rem 0 1rem; font-size:1.12rem; letter-spacing:-.02em; }
.example-guide-grid ul,.example-guide-grid ol { display:grid; gap:.75rem; margin:0; padding-left:1.15rem; color:var(--color-text-muted); font-size:.9rem; line-height:1.55; }
.example-guide-grid li::marker { color:var(--color-accent); font-weight:700; }
.example-guide-action { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.25rem clamp(1.25rem,3vw,2.2rem); border-top:1px solid var(--color-border); background:var(--color-surface-muted); }
.example-guide-action > div { display:grid; gap:.2rem; }
.example-guide-action span { color:var(--color-text-muted); font-size:.84rem; line-height:1.45; }
.example-guide-action .primary-button { flex:none; text-decoration:none; }
@supports not (content-visibility:auto) { .example-guide { contain:layout style paint; } }
.preview-mode .creator-workspace { grid-template-columns:minmax(320px,440px) minmax(0,1fr); }
.preview-mode .preview-panel { display:block; }
@media (min-width:781px) and (max-width:1000px) {
  .series-row { grid-template-columns:minmax(180px,1.5fr) minmax(110px,.75fr) minmax(110px,.7fr) minmax(104px,auto); }
  .series-row .series-include { grid-column:1/4; grid-row:1; }
  .series-row .series-default { grid-column:4; grid-row:1; }
  .series-row .series-title { grid-column:1/3; grid-row:2; }
  .series-row .series-type { grid-column:3; grid-row:2; }
  .series-row .series-unit { grid-column:4; grid-row:2; }
  .series-settings.single-series .series-include { grid-column:1/-1; }
}
@media (max-width:780px) { .creator-topbar { position:relative; align-items:flex-start; } .header-actions { flex-wrap:wrap; justify-content:flex-end; } .header-actions .quiet-button { display:none; } .creator-workspace,.preview-mode .creator-workspace { grid-template-columns:1fr; } .entry-paths { grid-template-columns:1fr; } .entry-paths legend { grid-column:1; } .entry-paths label > span { min-height:auto; } .mapping-fields,.point-mapping-fields,.field-settings-list { grid-template-columns:1fr; } .series-row { grid-template-columns:auto 1fr; } .series-row > label:not(.series-include):not(.series-default) { grid-column:1/-1; } .point-mapping-fields legend,.point-mapping-fields label:last-child { grid-column:1; } .visual-options { grid-template-columns:1fr; } .visual-options label > span { min-height:auto; } .map-start-options { grid-template-columns:1fr; } .map-start-options .mini-viz { grid-column:1; grid-row:auto; } .save-options { grid-template-columns:1fr; } .preview-panel { position:relative; top:auto; } .preview-body.side-table,.preview-body.side-table.table-collapsed { grid-template-columns:1fr; grid-template-areas:"map" "legend" "table"; grid-template-rows:auto; } .preview-body.side-table .preview-canvas { border-right:0; border-bottom:0; } .preview-body.side-table .preview-legend { border-right:0; } .preview-body.side-table .preview-table-view { min-height:0; max-height:300px; border-top:1px solid var(--color-border); } .preview-body.side-table.table-collapsed .preview-table-heading { grid-template-columns:auto minmax(0,1fr); justify-content:normal; justify-items:stretch; padding:.55rem 1rem; } .preview-body.side-table .preview-table-heading button { justify-self:start; } .preview-canvas { min-height:390px; } #visualization { min-height:360px; } }
.compact-editor .creator-workspace { grid-template-columns:minmax(0,1fr); }
@media (max-width:780px) { .encoding-fields,.encoding-mode-options { grid-template-columns:1fr; } }
.compact-editor .preview-panel { position:relative; top:auto; }
@media (max-width:860px) { .preview-heading { flex-direction:column; gap:.8rem; } .preview-heading > div { width:100%; } .preview-brand { order:-1; align-self:flex-end; } }
/* Keep place names and values readable in phone summary cards. */
@media (max-width:520px) {
  .preview-metrics { gap:.4rem; padding-inline:1rem; }
  .preview-metric { padding:.65rem .5rem; }
  .preview-metric strong { overflow:visible; white-space:normal; overflow-wrap:anywhere; line-height:1.3; }
  .preview-metric .metric-place,.preview-metric .metric-number { display:block; }
}
@media (max-width:520px) { .creator-topbar { padding:.65rem; } .creator-workspace { padding-left:.7rem; padding-right:.7rem; } .entry-paths,.mapping-fields,.quality-grid { grid-template-columns:1fr; } .entry-paths legend { grid-column:1; } .entry-paths label > span { min-height:auto; } .manual-table th:last-child,.manual-table td:last-child { width:46%; } .publish-result { grid-template-columns:1fr; } .preview-heading { padding:1rem; } .preview-canvas { min-height:330px; padding:.5rem; } #visualization { min-height:310px; } .preview-footer { grid-template-columns:1fr; padding:.65rem 1rem; } .preview-footer-toolbar { justify-self:end; } .preview-legend { padding:.65rem 1rem; } }
@media (max-width:520px) { .hex-overview-toggle { inset-inline-end:1.15rem; inset-block-end:6.35rem; } .preview-canvas.hex-overview-collapsed .hex-overview-toggle { inset-block-end:1.15rem; } }
@media (max-width:760px) { .example-guide-grid { grid-template-columns:1fr; } .example-guide-grid > * + * { border-top:1px solid var(--color-border); border-left:0; } .example-guide-action { align-items:flex-start; flex-direction:column; } }
@media (max-width:560px) { .palette-options { grid-template-columns:1fr; } }
@media (max-width:680px) {
  body:not(.viewer-mode) .creator-workspace { display:none; }
  body:not(.viewer-mode) .header-actions .quiet-button { display:none; }
  body:not(.viewer-mode) .small-screen-notice { display:grid; grid-template-columns:48px 1fr; gap:1rem; max-width:560px; margin:clamp(2rem,10vh,6rem) auto; padding:1.4rem; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); box-shadow:var(--shadow-card); }
  .small-screen-notice h2,.small-screen-notice p { margin:0; }
  .small-screen-notice h2 { margin:.25rem 0 .5rem; font-family:Georgia,serif; font-size:1.65rem; line-height:1.08; }
  .small-screen-notice p { color:var(--color-text-muted); line-height:1.5; }
  .small-screen-mark { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:color-mix(in srgb,var(--color-accent),transparent 86%); color:var(--color-accent); font-size:1.4rem; font-weight:900; }
  .viewer-mode .small-screen-notice { display:none; }
  .preview-body.side-table { grid-template-columns:1fr; grid-template-areas:"map" "legend" "table"; }
  .preview-body.side-table .preview-canvas { border-right:0; border-bottom:1px solid var(--color-border); }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } .viewer-loading-mark { animation:none!important; } }

/* Mapfetti editor: warm paper, quiet surfaces, and clear actions. */
:root,[data-theme="dark"] { --creator-accent:var(--brand-green); }
.creator-topbar { background:var(--color-page); backdrop-filter:none; }
.editor-brand { display:flex; align-items:center; gap:12px; color:var(--color-text); text-decoration:none; }
.editor-brand img { flex:none; }
.editor-brand h1 { font-size:25px; font-weight:700; letter-spacing:-1.2px; }
.editor-brand p { margin-top:2px; font-size:11px; font-weight:400; }
.creator-intro { padding-top:32px; padding-bottom:28px; }
.creator-intro h2 { max-width:700px; font-family:var(--font-sans); font-size:clamp(2rem,3.3vw,3.25rem); letter-spacing:-.055em; line-height:1.08; }
.creator-intro p { font-size:14px; line-height:1.7; }
.builder-panel,.preview-panel { box-shadow:none; }
.step-heading h2 { font-weight:500; letter-spacing:-.035em; }
label,legend,.quiet-button,.primary-button,.next-button { font-weight:600; }
.primary-button,.next-button { background:var(--brand-ink); border-color:var(--brand-ink); color:var(--brand-paper); }
[data-theme="dark"] .primary-button,[data-theme="dark"] .next-button { color:var(--brand-paper); }
.primary-button:hover,.next-button:hover { background:var(--brand-green); border-color:var(--brand-green); }
.quiet-button:hover,.icon-button:hover,.gallery-link:hover { background:var(--color-surface-muted); }
.step-nav button { min-height:70px; font-weight:600; }
.step-nav button[aria-current="step"] { box-shadow:inset 0 -3px var(--brand-green); }
.step-nav button[aria-current="step"] span { background:var(--brand-green); border-color:var(--brand-green); color:var(--brand-paper); }
.entry-paths input:checked + span { box-shadow:none; }
.eyebrow,.step-number { font-weight:700; letter-spacing:.14em; }
.preview-brand strong { font-size:.8rem; letter-spacing:-.03em; }
@media(max-width:1000px) { .editor-brand p { display:none; } .header-actions { gap:.4rem; } }
@media(max-width:680px) { .editor-brand h1 { font-size:22px; } .editor-brand img { width:28px; height:28px; } .app-title { gap:8px; } .editor-brand { gap:8px; } }
.small-screen-notice { box-shadow:none; }
.small-screen-notice h2 { font-family:var(--font-sans); font-weight:500; letter-spacing:-.04em; }

/* File actions describe editable projects separately from CSV data import. */
.header-actions .quiet-button { font-family:var(--font-sans); font-size:14px; font-weight:500; line-height:1.3; }
.draft-status { color:var(--color-text-muted); font-size:11px; margin-right:10px; }
.map-file-menu { position:relative; }
.map-file-menu summary { cursor:pointer; list-style:none; }
.map-file-menu summary::-webkit-details-marker { display:none; }
.map-file-panel { position:absolute; right:0; top:calc(100% + 10px); width:min(310px,calc(100vw - 32px)); padding:8px; border:1px solid var(--color-border); border-radius:8px; background:var(--color-surface); box-shadow:var(--shadow-card); }
.map-file-panel button { display:grid; width:100%; gap:5px; padding:12px; border:0; border-radius:5px; background:transparent; color:var(--color-text); text-align:left; font:14px var(--font-sans); }
.map-file-panel button:hover { background:var(--color-surface-muted); }
.map-file-panel strong { font-weight:500; }
.map-file-panel span,.map-file-panel p { font-size:12px; line-height:1.5; color:var(--color-text-muted); }
.map-file-panel p { margin:8px 12px; padding-top:12px; border-top:1px solid var(--color-border); }
@media(max-width:1000px) { .draft-status { display:none; } }
@media(max-width:780px) and (min-width:681px) { .header-actions>.quiet-button,.map-file-menu>.quiet-button { display:inline-flex; } }
@media(max-width:680px) { .map-file-menu { display:none; } }

/* Editorial headings balance the geometric interface typography. */
.step-heading h2 { font-family:var(--font-serif); font-size:2.1rem; font-weight:500; letter-spacing:-.035em; line-height:1.15; }
.entry-heading h3,.manual-table-heading h3 { font-weight:650; }
.entry-paths strong { font-weight:650; }
.entry-paths small { font-weight:450; line-height:1.55; }
.header-actions .quiet-button { font-weight:600; letter-spacing:-.015em; }
.creator-intro h2,.small-screen-notice h2 { font-family:var(--font-serif); }
/* Map labels keep a portable font for standalone SVG and PNG rendering. */
.viz-label,.viz-callout-label,.point-label { font-family:Arial,sans-serif; }

/* Keep the editor header focused; supporting destinations live in its footer. */
.editor-home-link { display:inline-flex; align-items:center; gap:.35rem; min-height:44px; margin-left:.55rem; color:var(--color-text-muted); font:600 13px/1.3 var(--font-sans); text-decoration:none; white-space:nowrap; }
.editor-home-link:hover { color:var(--color-accent); text-decoration:underline; text-underline-offset:4px; }
.editor-footer { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:1rem 2rem; min-height:84px; padding:1rem clamp(1rem,3vw,2rem); border-top:1px solid var(--color-border); background:var(--color-page); color:var(--color-text-muted); font-family:var(--font-sans); }
.editor-footer-brand { display:inline-flex; align-items:center; }
.editor-footer-brand img { display:block; width:132px; height:auto; }
.editor-footer nav { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.25rem 1.25rem; }
.editor-footer nav a { display:inline-flex; align-items:center; min-height:44px; color:inherit; font-size:12px; font-weight:600; text-decoration:none; }
.editor-footer nav a:hover { color:var(--color-accent); text-decoration:underline; text-underline-offset:4px; }
body.viewer-mode .editor-footer,html.viewer-route:not(.viewer-ready) .editor-footer { display:none; }
[data-theme="dark"] .editor-footer-brand img { filter:brightness(0) invert(1); }
.editor-leave-dialog { width:min(520px,calc(100vw - 2rem)); padding:1.5rem; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); color:var(--color-text); }
.editor-leave-dialog h2 { margin:0 0 .75rem; font-size:1.4rem; }
.editor-leave-dialog p { color:var(--color-text-muted); line-height:1.5; }
.editor-leave-dialog form { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.25rem; }
.editor-leave-dialog::backdrop { background:rgb(0 0 0 / .35); }
@media(max-width:780px) { .editor-home-link { margin-left:.2rem; } }

/* Match shared identity while keeping the editor and published map compact. */
.example-site-chrome[hidden],.viewer-recovery[hidden] { display:none; }
.editor-brand img { width:156px; height:32px; }
.editor-brand .visually-hidden { margin:0; }
.viewer-recovery { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:20px; margin-top:20px; }
.viewer-recovery a { color:var(--color-accent-strong); text-underline-offset:4px; }
html.viewer-route { scrollbar-gutter:stable; }
.example-embed-route { background:var(--preview-paper,var(--color-canvas)); }
.example-embed-route .example-site-chrome,.example-embed-route .example-guide,.example-embed-route .editor-footer,.example-embed-route .preview-create-cta,.example-embed-route #example-back-link { display:none!important; }
.example-embed-route .creator-shell { max-width:none; min-height:0; padding:0; }
.example-embed-route .creator-workspace { display:block; padding:0; }
.example-embed-route .preview-panel { border:0; border-radius:0; box-shadow:none; }
.thumbnail-route { width:100dvw; height:100dvh; overflow:hidden; background:var(--preview-paper,var(--color-canvas)); }
.thumbnail-route :is(.example-site-chrome,.example-guide,.editor-footer,.preview-heading,.preview-metrics,.preview-legend,.preview-table-view,.preview-footer,.preview-create-cta,#example-back-link,.map-tools,.globe-mode-toggle) { display:none!important; }
.thumbnail-route .creator-shell,.thumbnail-route .creator-workspace,.thumbnail-route .preview-panel,.thumbnail-route .preview-body,.thumbnail-route .preview-canvas { width:100%; height:100%; min-height:0; margin:0; padding:0; border:0; border-radius:0; box-shadow:none; }
.thumbnail-route .creator-shell { max-width:none; }
.thumbnail-route .creator-workspace,.thumbnail-route .preview-body { display:block; }
.thumbnail-route .preview-canvas { overflow:hidden; }
.thumbnail-route #visualization { width:100%; height:100%; min-height:0; }
.script-notice { padding:24px; text-align:center; }
@media(max-width:680px) { .editor-brand img { width:128px; height:auto; } .editor-home-link { font-size:0; } .editor-home-link span { font-size:18px; } .editor-footer { flex-direction:column; gap:.25rem; padding-block:1.25rem; } .example-route .creator-workspace { padding-top:16px; } }

/* A narrow map keeps its data available as a drawer without shrinking the geography. */
@container preview (max-width:800px) {
  .preview-body.side-table,.preview-body.side-table.table-collapsed { position:relative; grid-template-columns:1fr; grid-template-areas:"map" "legend"; grid-template-rows:minmax(390px,auto) auto; }
  .preview-body.side-table .preview-canvas { border-right:0; }
  .preview-body.side-table .preview-legend { border-right:0; }
  .preview-body.side-table .preview-table-view { position:absolute; z-index:7; top:.75rem; right:.75rem; width:min(370px,calc(100% - 1.5rem)); height:calc(100% - 4.5rem); min-height:0; max-height:none; margin:0; overflow:hidden; border:1px solid var(--color-border); border-radius:10px; background:var(--color-surface); box-shadow:0 18px 48px rgb(0 0 0 / .22); }
  .preview-body.side-table.table-collapsed .preview-table-view { display:none; }
  .preview-body.side-table .preview-table-heading { grid-template-columns:auto minmax(0,1fr); padding:.55rem .65rem; }
  .preview-body.side-table .preview-table-heading button { justify-self:start; }
}

/* Phone viewers prioritize the map and reveal supporting detail on demand. */
@media(max-width:599px) {
  .example-embed-route.viewer-mode .preview-canvas,.example-embed-route.viewer-mode #visualization { min-height:clamp(330px,70vw,460px); }
  .viewer-mode .creator-workspace { padding:0; }
  .viewer-mode .preview-panel { border-inline:0; border-radius:0; }
  .viewer-mode .preview-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.45rem .75rem; padding:.8rem .9rem .7rem; }
  .viewer-mode .preview-heading > div { min-width:0; width:auto; }
  .viewer-mode .preview-heading :is(h1,h2) { font-size:clamp(1.45rem,7vw,1.9rem); line-height:1.02; }
  .viewer-mode .preview-heading p { display:-webkit-box; margin-top:.3rem; overflow:hidden; font-size:.8rem; line-height:1.35; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
  .viewer-mode .preview-heading .eyebrow { font-size:.6rem; }
  .viewer-mode .preview-brand { grid-column:2; grid-row:1; align-self:start; order:0; grid-template-columns:24px auto; column-gap:.35rem; }
  .viewer-mode .preview-brand > img { width:24px; height:24px; border-radius:5px; }
  .viewer-mode .preview-brand small { font-size:.46rem; }
  .viewer-mode .preview-brand strong { max-width:68px; font-size:.56rem; }
  .viewer-mode .preview-series { margin-top:.45rem; }

  .viewer-mode .preview-metrics { display:grid; grid-template-columns:repeat(var(--metric-count,3),minmax(132px,1fr)); gap:.4rem; padding:0 .9rem .7rem; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:none; }
  .viewer-mode .preview-metrics::-webkit-scrollbar { display:none; }
  .viewer-mode .preview-metric { display:grid; grid-template-columns:max-content minmax(0,1fr); align-items:baseline; gap:.38rem; min-width:0; padding:.42rem .58rem; border-radius:999px; }
  .viewer-mode .preview-metric > span,.viewer-mode .preview-metric strong,.viewer-mode .preview-metric .metric-place,.viewer-mode .preview-metric .metric-number { display:inline; margin:0; font-size:.7rem; line-height:1; white-space:nowrap; }
  .viewer-mode .preview-metric > span { font-size:.54rem; }
  .viewer-mode .preview-metric strong { min-width:0; text-align:left; }
  .viewer-mode .preview-metric .metric-place { display:inline-block; max-width:120px; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom; }

  .viewer-mode .preview-canvas { min-height:65dvh; padding:.35rem; }
  .viewer-mode #visualization { min-height:65dvh; }
  .viewer-mode .map-tools { top:.65rem; right:.65rem; gap:.35rem; }
  .viewer-mode .map-controls #map-zoom-in,.viewer-mode .map-controls #map-zoom-out { display:none; }
  .viewer-mode .map-controls:not(.has-home) { display:none; }
  .viewer-mode .map-controls button,.viewer-mode .map-search,.viewer-mode .map-search-toggle,.viewer-mode .map-table-toggle { width:44px; min-height:44px; }
  .viewer-mode .map-table-toggle { display:flex; width:auto; gap:.38rem; padding-inline:.65rem; }
  .viewer-mode .map-table-toggle::after { content:"Data"; font:750 .7rem var(--font-sans); }
  .viewer-mode .map-table-toggle[hidden] { display:none; }
  .viewer-mode .map-search-panel { right:52px; width:min(280px,calc(100vw - 4.5rem)); }

  .viewer-mode .preview-tooltip { position:absolute; z-index:10; inset:auto .5rem .5rem!important; display:grid; width:auto; max-width:none; max-height:min(58dvh,430px); padding:.8rem .9rem calc(.8rem + env(safe-area-inset-bottom)); overflow:auto; border-radius:16px; box-shadow:0 18px 48px rgb(0 0 0 / .28); overscroll-behavior:contain; }
  .viewer-mode .preview-tooltip[hidden] { display:none; }
  .viewer-mode .tooltip-close { position:absolute; top:.45rem; right:.5rem; display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:var(--color-surface-muted); color:var(--color-text); font:500 1.25rem/1 var(--font-sans); }
  .viewer-mode .tooltip-pager { min-height:36px; padding-right:2.5rem; }
  .viewer-mode .tooltip-pager button { width:36px; height:36px; }
  .viewer-mode .tooltip-action { min-height:44px; }

  .viewer-mode .preview-legend { flex-wrap:nowrap; gap:.45rem; padding:.55rem .8rem; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:none; }
  .viewer-mode .preview-legend.is-large { max-height:none; overflow-y:hidden; scrollbar-gutter:auto; }
  .viewer-mode .preview-legend::-webkit-scrollbar { display:none; }
  .viewer-mode .legend-scale { flex:0 0 calc(100vw - 5.8rem); grid-template-columns:max-content minmax(96px,1fr) max-content; gap:.5rem; min-width:0; }
  .viewer-mode .preview-legend > .legend-key { flex:none; }
  .viewer-mode .legend-breaks { display:none; flex:0 0 auto; white-space:nowrap; }
  .viewer-mode .preview-legend.show-breaks { flex-wrap:wrap; }
  .viewer-mode .preview-legend.show-breaks .legend-breaks { display:block; order:10; flex:0 0 100%; padding-top:.1rem; white-space:normal; text-align:left; }
  .viewer-mode .legend-breaks-toggle { display:grid; flex:none; place-items:center; width:32px; min-height:32px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--color-text-muted); cursor:pointer; }
  .viewer-mode .legend-breaks-toggle:hover { background:color-mix(in srgb,var(--preview-ink),transparent 92%); color:var(--color-text); }
  .viewer-mode .legend-breaks-toggle:focus-visible { outline:3px solid var(--color-accent); outline-offset:1px; }
  .viewer-mode .legend-breaks-toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s ease; }
  .viewer-mode .legend-breaks-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }

  .viewer-mode .preview-body.side-table,.viewer-mode .preview-body.side-table.table-collapsed { position:relative; grid-template-columns:1fr; grid-template-areas:"map" "legend"; grid-template-rows:auto auto; }
  .viewer-mode .preview-body.side-table .preview-table-view { position:fixed; z-index:50; inset:auto 0 0; width:100%; height:min(70dvh,560px); min-height:0; max-height:none; margin:0; overflow:hidden; border:1px solid var(--color-border); border-bottom:0; border-radius:18px 18px 0 0; background:var(--color-surface); box-shadow:0 -18px 48px rgb(0 0 0 / .25); }
  .viewer-mode .preview-body.side-table .preview-table-heading { grid-template-columns:auto minmax(0,1fr); min-height:58px; padding:.7rem .8rem; }
  .viewer-mode .preview-body.side-table .preview-table-heading::before { position:absolute; top:7px; left:50%; width:38px; height:4px; transform:translateX(-50%); border-radius:99px; background:var(--color-border); content:""; }
  .viewer-mode .preview-body.side-table .preview-table-heading button { width:40px; min-height:40px; }
  .viewer-mode .preview-body.side-table .data-table-wrap th,.viewer-mode .preview-body.side-table .data-table-wrap td { padding:.62rem .5rem; }
  .viewer-mode .preview-body.side-table .data-table-wrap th:first-child,.viewer-mode .preview-body.side-table .data-table-wrap td:first-child { width:42px; padding-left:.7rem; }
  .viewer-mode .preview-body.side-table .data-table-wrap th:last-child,.viewer-mode .preview-body.side-table .data-table-wrap td:last-child { width:118px; }
  .viewer-mode .preview-body.side-table.table-collapsed .preview-table-view { display:none; }

  .viewer-mode .preview-footer { grid-template-columns:minmax(0,1fr) auto; align-items:end; padding:.65rem .8rem; }
  .viewer-mode .preview-meta { font-size:.58rem; }
  .viewer-mode .preview-meta-copy { max-height:2.7em; -webkit-line-clamp:2; }
  .viewer-mode .preview-footer-toolbar { flex-wrap:nowrap; gap:.35rem; }
  .viewer-mode .preview-actions { gap:.3rem; }
  .viewer-mode .preview-actions button,.viewer-mode .preview-view-switch button { width:40px; min-height:40px; }
  .viewer-mode .preview-create-cta { padding:.55rem .75rem; }
}

/* Reference geography is separate from decorative backgrounds and map data. */
.preview-canvas[data-background="none"], .preview-canvas[data-background="reference"] { background:var(--preview-paper); box-shadow:none; }
#reference-settings { display:grid; gap:.8rem; }
#reference-settings[hidden] { display:none; }
.reference-background { pointer-events:none; }