/* Layout modes — */
/* ── Split (default): narrow map rail + wide results ───────────────────── */
html[data-layout="split"] .main {
grid-template-columns: 420px 1fr;
}
/* ── Stacked: map & controls full width on top, results below ───────────── */
html[data-layout="stacked"] .main {
grid-template-columns: 1fr;
max-width: 900px;
}
html[data-layout="stacked"] .panel-controls {
border-right: none;
border-bottom: 1px solid var(--border);
}
html[data-layout="stacked"] .panel-results {
max-height: none;
}
html[data-layout="stacked"] #map {
height: 340px;
}
/* ── Map focus: hero map, then compact workflow, then deep scroll ───────── */
html[data-layout="map-focus"] .main {
grid-template-columns: 1fr;
}
html[data-layout="map-focus"] .panel-controls {
border-right: none;
border-bottom: 1px solid var(--border);
}
html[data-layout="map-focus"] .panel-results {
max-height: none;
}
html[data-layout="map-focus"] #map {
height: min(52vh, 520px);
min-height: 280px;
}
html[data-layout="map-focus"] .btn-locate {
max-width: 280px;
}
html[data-layout="map-focus"] .controls {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 16px;
align-items: start;
}
html[data-layout="map-focus"] .location-display {
grid-column: 1 / -1;
}
html[data-layout="map-focus"] .btn-analyze {
grid-column: 1 / -1;
}
@media (max-width: 700px) {
html[data-layout="map-focus"] .controls {
grid-template-columns: 1fr;
}
}
/* ── Reading: wide article column + map rail on the right ──────────────── */
html[data-layout="reading"] .main {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
max-width: 1200px;
}
html[data-layout="reading"] .panel-controls {
grid-column: 2;
grid-row: 1;
border-right: none;
border-left: 1px solid var(--border);
max-height: calc(100vh - 65px);
overflow-y: auto;
}
html[data-layout="reading"] .panel-results {
grid-column: 1;
grid-row: 1;
max-height: calc(100vh - 65px);
}
html[data-layout="reading"] .recommendations {
max-width: 720px;
}
html[data-layout="reading"] #map {
height: 240px;
}
/* ── Wide: balanced two-column workspace ───────────────────────────────── */
html[data-layout="wide"] .main {
grid-template-columns: minmax(340px, 1fr) minmax(340px, 1fr);
max-width: 1280px;
}
html[data-layout="wide"] .panel-controls {
border-right: 1px solid var(--border);
}
html[data-layout="wide"] .panel-results {
max-height: calc(100vh - 65px);
}
html[data-layout="wide"] #map {
height: 280px;
}
/* Glass theme: keep translucent panels on layout swaps */
html[data-theme="glass"][data-layout="stacked"] .panel-controls,
html[data-theme="glass"][data-layout="map-focus"] .panel-controls {
border-bottom-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="glass"][data-layout="reading"] .panel-controls {
border-left-color: rgba(255, 255, 255, 0.08);
}
/* Mobile: all layouts collapse to single column, map before results */
@media (max-width: 900px) {
html[data-layout="split"] .main,
html[data-layout="stacked"] .main,
html[data-layout="map-focus"] .main,
html[data-layout="reading"] .main,
html[data-layout="wide"] .main {
grid-template-columns: 1fr;
max-width: 1440px;
}
html[data-layout="reading"] .panel-controls,
html[data-layout="wide"] .panel-controls {
grid-column: 1;
grid-row: auto;
border-left: none;
border-right: none;
border-bottom: 1px solid var(--border);
max-height: none;
overflow-y: visible;
}
html[data-layout="reading"] .panel-results,
html[data-layout="wide"] .panel-results {
grid-column: 1;
max-height: none;
}
html[data-layout="reading"] .recommendations {
max-width: none;
}
html[data-layout="stacked"] .main {
max-width: 1440px;
}
html[data-layout="map-focus"] #map {
height: 260px;
min-height: 220px;
}
}