/* STATAS – Swiss Stats Explorer
   App-wide styling. Dash automatically serves every file in this assets/
   folder, so this stylesheet is loaded without any extra configuration. */

/* --- Type: Libre Franklin ----------------------------------------------- */
/* Self-hosted from assets/fonts/ (SIL Open Font License). The variable font
   covers every weight 100–900 in one file; the brackets in the file name are
   percent-encoded. */
@font-face {
    font-family: "Libre Franklin";
    src: url("fonts/LibreFranklin%5Bwght%5D.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Libre Franklin";
    src: url("fonts/LibreFranklin-Italic%5Bwght%5D.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --accent: #4A5C69;          /* dark slate blue (logo tile + title text) */
    --accent-hover: #3A4954;    /* darker slate for hover fills */
    --accent-soft: #E5E9EC;     /* pale slate for hover backgrounds */
    --terracotta: #C36E4F;      /* terracotta secondary highlight */
    --ink: #2E3A43;             /* dark slate text */
    --muted: #6E7B84;           /* muted slate-grey */
    --line: #DED6C8;            /* warm sand border */
    --bg: #EDE6D9;              /* warm cream paper page background */
    --ribbon: #E4DCCC;          /* warm sand top ribbon */ 
    --card: #F7F3EC;            /* warm off-white cards, a soft step up from the page */
    --muted-surface: #ECE5D8;   /* mellow warm surface: plot windows + button fill */
    --radius: 4px;              /* panels: cards, popups, menus */
    --radius-sm: 2px;           /* controls: buttons, inputs, tiles, tags */
    --shadow: 0 1px 3px rgba(46, 58, 67, 0.10), 0 1px 2px rgba(46, 58, 67, 0.06);
    /* Same stack as theme.FONT_FAMILY (the charts). */
    --font-sans: "Libre Franklin", "Franklin Gothic Book", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.5;
}
/* Form controls (the dropdowns' search fields among them) don't inherit the
   font by default. */
button, input, select, textarea { font-family: inherit; }

/* --- Shell -------------------------------------------------------------- */
.app-shell {
    /* dvh excludes the mobile URL bar, which 100vh does not — the second
       declaration simply wins where it is supported. */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 28px;
    background: var(--ribbon);
    border-bottom: 3px solid var(--terracotta);
    position: sticky;
    top: 0;
    z-index: 10;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    cursor: pointer;
}
.brand:hover { opacity: 0.85; }
.brand-logo { height: 40px; width: auto; display: block; }
.brand-name { font-weight: 600; color: var(--ink); }

.nav { display: flex; align-items: center; gap: 6px; }
/* Shown only under the header breakpoint; see the media query at the end
   of this file and the toggle callback in index.py. */
.nav-toggle {
    display: none;
    font: inherit;
    font-weight: 600;
    color: var(--accent);
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    cursor: pointer;
}
.nav-link {
    text-decoration: none;
    color: var(--muted);
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    transition: background 0.15s, color 0.15s;
}
.nav-link:hover { background: var(--card); color: var(--accent); }
/* The top-level header links (not the «Themen» dropdown items). */
#nav-kantone, #nav-themen, #nav-angebot, #nav-about, #nav-kontakt { font-weight: 600; }
/* The current page (index.py). */
.nav-link.is-active { color: var(--terracotta); }
/* «Kontakt»: a dark button, as in the deck. */
.nav-link--cta { margin-left: 6px; background: var(--accent); color: #fff; }
.nav-link--cta:hover { background: var(--accent-hover); color: #fff; }
.nav-link--cta.is-active { background: var(--terracotta); color: #fff; }

/* «Anmelden»: a mock login (index.py). Desktop: the panel drops below the
   button, aligned to its right edge. Phone: it opens inline in the menu. */
.nav-login { position: relative; }
.nav-login__toggle {
    font: inherit;
    font-weight: 600;
    margin-left: 6px;
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    cursor: pointer;
}
.nav-login__toggle:hover { background: var(--accent); color: #fff; }
.nav-login__panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 17rem;
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 12;
    flex-direction: column;
    gap: 6px;
}
.nav-login__panel--open { display: flex; }
.nav-login__label { font-size: 13px; font-weight: 600; color: var(--muted); }
.nav-login__panel .btn { margin-top: 8px; }
.nav-login__panel .lead-form-msg:empty { display: none; }

/* DE · FR · IT · EN (index.py): the current language in terracotta. */
.nav-lang { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
.nav-lang__link {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    padding: 6px 6px;
    border-radius: var(--radius-sm);
}
.nav-lang__link:hover { background: var(--card); color: var(--accent); }
.nav-lang__link.is-active { color: var(--terracotta); }

/* «Themen» → the topic pages. Desktop: the menu appears on hover or keyboard
   focus. Phone: the open menu lists the topics under the label. */
.nav-drop { position: relative; }
.nav-drop__label {
    display: inline-flex;
    align-items: center;
}
.nav-drop__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 12.5rem;
    padding: 6px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 12;
    flex-direction: column;
    gap: 2px;
}
.nav-drop__menu .nav-link { display: block; white-space: nowrap; }
.nav-drop:hover .nav-drop__menu,
.nav-drop:focus-within .nav-drop__menu {
    display: flex;
}

.app-main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 28px; }

.app-footer {
    border-top: 1px solid var(--line);
    padding: 16px 28px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

/* --- Page intro -------------------------------------------------------- */
.page-intro { margin-bottom: 22px; }
.page-intro h1 { margin: 0 0 6px; font-size: 26px; letter-spacing: -0.3px; }
.lead { margin: 0; color: var(--muted); max-width: 62ch; }

/* --- Buttons ------------------------------------------------------------ */
/* Primary outline button (contact form). */
.btn-toggle {
    font: inherit;
    font-weight: 600;
    color: var(--accent);
    background: var(--muted-surface);
    border: 1px solid var(--accent);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.btn-toggle:hover { background: var(--accent); color: #fff; }

/* --- Chart section (deck, slide 7) ------------------------------------- */
/* One chart with its Kernaussage, filters, graph and toolbar. A card on
   the cream page, so a long region page reads as a stack of distinct charts.
   scroll-margin keeps an anchored section clear of the sticky header (and,
   on a phone, the region page's section bar); assets/regionpage.js measures
   both into the two variables. */
.chart-section {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 20px 14px;
    min-width: 0;
    scroll-margin-top: calc(var(--header-h, 71px) + var(--menu-bar-h, 0px) + 16px);
}
.chart-section + .chart-section { margin-top: 20px; }
/* The Plotly template paints figures white, which the PNG download and the
   PDF reports keep; on screen the paper, plot area, legend and map take the
   card colour instead. Only the bottom layer: a second .main-svg (hover
   labels) lies transparent on top of the plot. */
.js-plotly-plot .svg-container > .main-svg:first-child { background: var(--card) !important; }
.js-plotly-plot rect.bg { fill: var(--card) !important; }
.section-title { margin: 0 0 8px; font-size: 18px; letter-spacing: -0.2px; }

/* A map's Einordnung: where the page's canton stands, generated from data. */
.section-einordnung {
    margin: -2px 0 10px;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.45;
}
.section-einordnung:empty { display: none; }

/* «Kernaussage in einem Satz»: hand-written, hidden when there is none. */
.section-kernaussage {
    margin: 0 0 14px;
    padding: 8px 12px;
    background: var(--accent-soft);
    border-radius: var(--radius-sm);
    font-size: 14px;
    line-height: 1.45;
}
.section-kernaussage:empty { display: none; }

/* Filters flow in a row; the comparison sits at the right end (slide 7). */
.section-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 14px;
    margin-bottom: 6px;
}
.section-controls > .control { flex: 1 1 200px; min-width: 0; }
.section-controls > .control--checklist { flex-basis: 100%; }
.section-controls > .control--scale { flex: 0 0 auto; }
.section-controls > .control--compare { flex: 0 1 250px; margin-left: auto; }
.control--compare .dash-dropdown-placeholder { color: var(--accent); font-weight: 600; }
.control-radio { display: flex; gap: 2px 14px; padding: 2px 0; }
.controls-note:empty { display: none; }

/* PNG · CSV · Link · Quelle — quiet text buttons under the chart. */
.section-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    font-size: 13px;
}
.btn-tool {
    font: inherit;
    color: var(--accent);
    background: none;
    border: none;
    padding: 2px 0;
    cursor: pointer;
}
.btn-tool:hover { color: var(--terracotta); text-decoration: underline; }
.section-sources > summary {
    color: var(--accent);
    cursor: pointer;
    padding: 2px 0;
}
.section-sources > summary:hover { color: var(--terracotta); }
/* Open, the note takes the full toolbar width instead of a narrow column. */
.section-sources[open] { flex-basis: 100%; }
.section-sources__body {
    margin-top: 6px;
    color: var(--muted);
    line-height: 1.45;
    max-width: 90ch;
}
.section-sources__body p { margin: 0 0 4px; }
.section-sources__body a { color: var(--accent); text-decoration: none; }
.section-sources__body a:hover { text-decoration: underline; }

/* The graph fills a wrapper (.panel-graph-box) that carries a stable height,
   giving Plotly's responsive mode a real box to measure and fit into. The
   height lives on the wrapper rather than on the dcc.Graph element because
   responsive mode inline-styles the graph's own height (to 100%), which would
   override a height set via a class directly on the graph. The plot uses the
   full width on every screen because the legend now sits along the top, not in
   a wide right margin. */
.panel-graph-box { width: 100%; height: 420px; margin-top: 4px; }

/* The small time series under a map (ExplorerSpec.trend_fn). */
.panel-trend { margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--line); }
.panel-trend-box { width: 100%; height: 240px; }

/* Choropleth needs more vertical room than the line charts. */
.chart-section--map .panel-graph-box { height: 510px; }

/* The chart's descriptive title, lifted out of the figure to sit above the
   plot's top legend. min-height reserves its space so the first render (before
   the callback fills it) doesn't shift the layout. */
.panel-chart-title {
    font-weight: 600;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.3;
    margin: 2px 0 4px;
    min-height: 1.3em;
}

/* The title with the STATAS logo at its right, above every chart. The logo
   is HTML, not part of the figure, so it keeps its size on every screen and
   never covers the map or the legend (see panels._chart_head). */
.panel-chart-head {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}
.panel-chart-head .panel-chart-title { flex: 1; min-width: 0; }
.panel-logo {
    flex: none;
    display: block;
    height: 32px;
    width: auto;
    margin-bottom: 4px;
}

/* --- Map legend and click detail --------------------------------------- */
/* The class legend of a choropleth is HTML rather than a Plotly colorbar: the
   labels run to ~49 characters, which no vertical colour bar can hold once the
   panel is phone-width, and as HTML they wrap, stay selectable and let the map
   itself use the full width of the plot. Continuous scales keep a real
   colorbar (a gradient is not a list) — laid out horizontally under the map. */
.panel-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 18px;
    margin-top: 10px;
}
.panel-legend:empty { display: none; }
.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    line-height: 1.35;
}
.legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: var(--radius-sm);
    flex: none;
}
/* A mark drawn on the map (e.g. the vacancy map's asterisk), not a colour. */
.legend-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
}

/* Tapping a canton pins its breakdown here. On a touch screen there is no
   hover, and a tooltip that follows the finger is unreadable, so the detail
   moves into the page where it can be scrolled and stays put. */
.panel-detail {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    line-height: 1.45;
    /* pre-wrap, not pre: the headline above the table is prose and should wrap
       rather than push the block sideways. The table itself is padded with
       non-breaking spaces and is narrower than the panel at every breakpoint,
       so its rows stay on one line and stay aligned. overflow-x is the safety
       net for a long canton name at 320px. */
    white-space: pre-wrap;
    overflow-x: auto;
}
.panel-detail:empty { display: none; }

/* Only worth saying where there is no hover to discover it with. */
.panel-detail-hint {
    display: none;
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--muted);
}

/* Caveat under a section's filters: filters that cannot be freely combined
   (ExplorerSpec.note), or what a comparison shows (Comparison.note). */
.controls-note {
    margin: 2px 0 8px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
}

.control-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}
.control-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 16px;
    padding: 4px 0 2px;
}
.control-checkboxes__option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    color: var(--ink);
    cursor: pointer;
    min-height: 32px;
}
/* dcc.Checklist / RadioItems inline-style each option as display:block, which
   beats the class's inline-flex, so its gap never applies — space the box
   from its text on the input itself. */
.control-checkboxes__input {
    width: 16px;
    height: 16px;
    margin: 0 8px 0 0;
    vertical-align: -3px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}

/* --- About page («Über uns») ------------------------------------------- */
/* Copy is authored in Markdown (content/ueber_uns.<lang>.md) and rendered by
   dcc.Markdown, so these rules style generated <h1>/<h2>/<p>/<ul>/<a> tags.
   The text renders straight on the page background (no card) — just a readable
   line length. */
.about-content {
    max-width: 120ch;
    margin: 0 auto;
}
.about-content h1 {
    font-size: 24px;
    letter-spacing: -0.3px;
    margin: 0 0 12px;
}
.about-content h2 { font-size: 17px; margin: 26px 0 8px; }
.about-content p { margin: 0 0 12px; line-height: 1.6; }
.about-content ul { margin: 0 0 14px; padding-left: 20px; }
.about-content li { margin: 6px 0; line-height: 1.55; }
.about-content a { color: var(--accent); text-decoration: none; }
.about-content a:hover { text-decoration: underline; }
.muted { color: var(--muted); }

.dim-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.dim-table th, .dim-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    vertical-align: top;
}
.dim-table th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; }
.dim-name { font-weight: 600; }
.dim-sample { color: var(--muted); }

/* --- Lead-capture form -------------------------------------------------- */
.lead-form-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 24px;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.lead-field { display: flex; flex-direction: column; }
.lead-input {
    font: inherit;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.lead-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}
/* Dash 4 wraps dcc.Input in a div that takes the className, and pads the
   <input> inside it again. Keep a single padding, on the input itself, so the
   text starts where the box's padding says it does. */
.lead-input.dash-input-container { padding: 0; height: auto; }
.lead-input .dash-input-element { padding: 9px 12px; }
.lead-textarea { min-height: 96px; resize: vertical; }
/* Submit + feedback sit below the card; match its width and left edge. */
.lead-form-actions {
    max-width: 560px;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.lead-form-msg { font-size: 14px; font-weight: 500; }
.lead-form-msg--error { color: #9E5237; }
.lead-form-msg--success { color: #4A5C69; }

/* --- Region page (deck, slides 7–8) ------------------------------------- */
/* Full width: the menu runs down the left edge, the charts sit in a readable
   column beside it. */
.app-main:has(.region-page) { max-width: none; padding: 0; }
.region-page {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: start;
}

/* Sticky menu: region, sections by topic, «nach oben». */
.region-menu {
    position: sticky;
    top: var(--header-h, 71px);
    height: calc(100vh - var(--header-h, 71px));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 22px 16px 18px;
    background: var(--ribbon);
    border-right: 1px solid var(--line);
}
.region-menu__toggle { display: none; }
.region-menu__sections {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.region-menu__topic {
    margin: 0 0 4px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.region-menu__group ul { list-style: none; margin: 0; padding: 0; }
.region-menu__link {
    display: block;
    padding: 5px 8px 5px 12px;
    border-left: 3px solid transparent;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--ink);
    font-size: 14px;
    text-decoration: none;
}
.region-menu__link:hover { background: rgba(255, 255, 255, 0.55); }
.region-menu__link.is-active {
    background: var(--card);
    border-left-color: var(--terracotta);
    font-weight: 600;
}
.region-menu__top {
    margin-top: auto;
    padding-left: 12px;
    color: var(--muted);
    font-size: 13px;
    text-decoration: none;
}
.region-menu__top:hover { color: var(--accent); }

.region-main {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 18px 32px 40px;
}

/* Slim header: breadcrumb, name + crest, three numbers — so the first chart
   starts above the fold. */
.breadcrumb { font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.region-head { margin-bottom: 18px; }
.region-head__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
}
.region-head__name { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.region-head__name h1 { margin: 0; font-size: 28px; letter-spacing: -0.3px; }
.region-crest { height: 38px; width: auto; display: block; }
.region-kpis { display: flex; flex-wrap: wrap; gap: 10px; }
.kpi-card {
    display: flex;
    flex-direction: column;
    min-width: 150px;
    padding: 8px 14px;
    background: var(--muted-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}
.kpi-card:hover { border-color: var(--accent); background: var(--card); }
.kpi-card__value {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}
.kpi-card__label { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }

.region-topic + .region-topic { margin-top: 32px; }
.region-topic__title {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.region-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
.region-footer h2 { margin: 0 0 10px; font-size: 15px; }
.region-footer__cantons { display: flex; flex-wrap: wrap; gap: 6px; }
.region-footer__cantons a {
    padding: 3px 11px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--accent);
    font-size: 13px;
    text-decoration: none;
}
.region-footer__cantons a:hover { border-color: var(--accent); }
.region-footer__cantons .region-footer__ch { font-weight: 600; }
.region-footer__contact { margin: 16px 0 0; color: var(--muted); font-size: 14px; }
.region-footer__contact a { color: var(--accent); font-weight: 600; text-decoration: none; }
.region-footer__contact a:hover { color: var(--terracotta); }

/* --- Topic page (deck, slide 9) ----------------------------------------- */
.topic-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.topic-tab {
    padding: 7px 18px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}
.topic-tab:hover { border-color: var(--accent); }
.topic-tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

.topic-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 32px;
    margin-bottom: 20px;
}
.topic-head__text { flex: 1 1 420px; }
.topic-head h1 { margin: 0 0 6px; font-size: 28px; letter-spacing: -0.3px; }
.topic-region { flex: 0 1 280px; min-width: 220px; }

.topic-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 26px;
}
.topic-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    text-decoration: none;
    transition: border-color 0.15s;
}
.topic-kpi:hover { border-color: var(--accent); }
.topic-kpi__label { font-size: 12.5px; color: var(--muted); }
.topic-kpi__value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}
.topic-kpi__note { font-size: 12.5px; color: var(--muted); line-height: 1.35; }

.topic-tiles {
    display: grid;
    /* Three across at full width, as in the mockup; fewer as it narrows. */
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 18px;
}
.topic-tile {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--ink);
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.15s;
}
.topic-tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.topic-tile__thumb {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 32 / 15;
    border-bottom: 1px solid var(--line);
}
.topic-tile__body { padding: 12px 16px 16px; }
.topic-tile__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0 0 4px;
    font-size: 16px;
}
.topic-tile__badge {
    padding: 1px 8px;
    background: var(--muted-surface);
    border-radius: 999px;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
}
.topic-tile__text { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; }

/* --- Buttons (landing page) --------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--secondary { background: transparent; color: var(--accent); }
.btn--secondary:hover { background: var(--accent); color: #fff; }
.btn--cta { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--cta:hover { background: var(--accent); border-color: var(--accent); }
.btn--block { display: flex; width: 100%; }

/* --- Landing page (deck, slides 4–6) ------------------------------------ */
/* Full-width bands (the tracker); content in the usual 1180px column. */
.app-main:has(.landing-page) { max-width: none; padding: 0; }
.landing-inner { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.landing-page [id] { scroll-margin-top: calc(var(--header-h, 71px) + 16px); }

.landing-hero { padding: 44px 0 36px; }
.landing-hero h1 { margin: 0 0 10px; font-size: 34px; letter-spacing: -0.5px; }
.landing-hero__lead { margin: 0; max-width: 64ch; color: var(--muted); font-size: 17px; }
.landing-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.landing-eyebrow {
    margin: 0 0 10px;
    color: var(--terracotta);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.landing-tracker {
    padding: 18px 0 22px;
    background: var(--ribbon);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.landing-tracker__figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px 28px;
}
.tracker-figure {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--ink);
    text-decoration: none;
}
.tracker-figure__value {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.tracker-figure__label { color: var(--muted); font-size: 13px; line-height: 1.4; max-width: 32ch; }
.tracker-figure:hover .tracker-figure__value { color: var(--accent); }
.tracker-figure:hover .tracker-figure__label { text-decoration: underline; }

.landing-section { padding: 30px 0 6px; }
.landing-heading { margin: 0 0 14px; font-size: 20px; }

/* Canton picker: tile map + search. */
.canton-picker {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
    gap: 28px 44px;
    align-items: center;
    padding: 28px 32px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.canton-map {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 60px));
    grid-auto-rows: 64px;
    gap: 7px;
    justify-content: center;
}
.canton-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: var(--accent-soft);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.canton-tile__crest {
    display: block;
    height: 26px;
    width: auto;
    max-width: 70%;
    object-fit: contain;
}
.canton-tile:hover,
.canton-tile:focus-visible {
    background: var(--card);
    border-color: var(--accent);
    color: var(--terracotta);
    outline: none;
    z-index: 2;
}
.canton-tile__card {
    display: none;
    position: absolute;
    top: 0;
    left: calc(100% + 6px);
    flex-direction: column;
    gap: 2px;
    min-width: 150px;
    padding: 7px 12px;
    background: var(--ink);
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
    pointer-events: none;
}
.canton-tile__card strong { font-size: 13px; }
.canton-tile--flip .canton-tile__card { left: auto; right: calc(100% + 6px); }
.canton-tile:hover .canton-tile__card,
.canton-tile:focus-visible .canton-tile__card { display: flex; }
.canton-picker__side h2 { margin: 0 0 6px; font-size: 20px; }
.canton-picker__side > p { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.canton-picker__side .control { margin-bottom: 14px; }

/* Topic and new-dashboard cards. */
.landing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 18px;
}
.landing-card {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--ink);
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.15s;
}
.landing-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.card-thumb {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 32 / 15;
    background: var(--muted-surface);
}
.landing-card__body { padding: 12px 16px 16px; }
.landing-card__body h3 { margin: 0 0 4px; font-size: 16px; }
.landing-card__meta { margin: 0 0 4px; color: var(--muted); font-size: 12.5px; }
.landing-card__action { color: var(--terracotta); font-size: 13px; font-weight: 600; }

/* #angebot (slide 6). */
.landing-angebot { padding: 40px 0 48px; }
.angebot-title {
    margin: 0;
    font-size: 22px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.angebot-subtitle { margin: 2px 0 10px; color: var(--accent); font-size: 17px; }
.angebot-intro { margin: 0 0 8px; max-width: 80ch; }
.angebot-label {
    margin: 26px 0 10px;
    font-size: 13px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.angebot-number { display: block; color: var(--terracotta); font-size: 20px; font-weight: 300; }
.angebot-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}
.angebot-feature {
    padding: 12px 16px 16px;
    background: var(--card);
    border-top: 4px solid var(--accent);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.angebot-feature:nth-child(1) { border-top-color: #7D8D9D; }
.angebot-feature:nth-child(3) { border-top-color: #D9A451; }
.angebot-feature:nth-child(4) { border-top-color: var(--terracotta); }
.angebot-feature h4 { margin: 2px 0 6px; font-size: 15px; }
.angebot-feature p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; }

.angebot-roadmap { display: flex; gap: 14px; align-items: stretch; }
.roadmap-body { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.roadmap-step { margin: 0; padding: 8px 14px; border-radius: var(--radius-sm); font-size: 13.5px; }
.roadmap-step:nth-child(1) { background: #DCE0D5; }
.roadmap-step:nth-child(2) { background: #EFE7E2; }
.roadmap-step:nth-child(3) { background: #DDE2E7; }
.roadmap-step:nth-child(4) { background: #F1DDB5; }
.roadmap-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
    margin-top: 4px;
}
.roadmap-field {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 8px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 13px;
    text-align: center;
}
.roadmap-cycle {
    flex: 0 0 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--line);
    clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%);
    color: var(--ink);
    font-size: 30px;
    padding-right: 14px;
}

/* «Vorgehen» (landing_page._process). Wide: a table — a label column, then
   one column per step; row 1 the step, 2 Demografik's tasks, 3 the feedback
   rounds, 4 the canton's part. Each step is a display: contents wrapper, so
   its parts sit in the grid directly, in the column its --col names. Up to
   1024px the steps become cards instead (see the media queries). */
.process-heading { margin: 0 0 12px; color: var(--accent); font-size: 20px; font-weight: 700; }
.process-route {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    margin: 0 0 18px;
    font-size: 15px;
    font-weight: 600;
}
.process-route p { margin: 0; }
.process-route__label {
    margin-right: 10px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.process-route__arrow {
    position: relative;
    flex: 1 1 60px;
    max-width: 260px;
    height: 1px;
    background: var(--muted);
}
.process-route__arrow::after {
    content: "";
    position: absolute;
    right: -1px;
    top: -5px;
    border: 5px solid transparent;
    border-left: 8px solid var(--muted);
    border-right: 0;
}
.process-grid {
    display: grid;
    grid-template-columns: 8.5rem repeat(var(--steps, 5), minmax(0, 1fr));
    gap: 10px 16px;
}
.process-step { display: contents; }
.process-head, .process-cell, .process-rounds { grid-column: var(--col); }
.process-head { grid-row: 1; display: flex; flex-direction: column; }
.process-cell--demografik, .process-role--demografik { grid-row: 2; }
.process-rounds { grid-row: 3; }
.process-cell--kanton, .process-role--kanton { grid-row: 4; }
.process-when {
    margin: 0 0 6px;
    color: var(--terracotta);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.process-name {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 14px;
    line-height: 1.3;
}
/* The arrow to the next step, in the gap between the boxes. */
.process-step:not(:last-child) .process-name::after {
    content: "";
    position: absolute;
    right: -13px;
    top: 50%;
    margin-top: -5px;
    border: 5px solid transparent;
    border-left: 7px solid var(--muted);
    border-right: 0;
}
.process-number { color: var(--terracotta); font-size: 18px; font-weight: 600; }
.process-role {
    grid-column: 1;
    padding: 12px;
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    line-height: 1.4;
    text-transform: uppercase;
}
.process-role--demografik { background: var(--accent-hover); }
.process-role--kanton { background: var(--terracotta); }
.process-cell {
    padding: 12px 14px 12px 12px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    line-height: 1.4;
}
.process-cell ul { margin: 0; padding-left: 18px; list-style: square; }
.process-cell li + li { margin-top: 8px; }
.process-cell--demografik { background: var(--accent); color: #fff; }
.process-cell--demografik li::marker { color: rgba(255, 255, 255, 0.7); }
.process-cell--kanton { background: var(--card); border: 1px solid var(--line); }
.process-cell--kanton li::marker { color: var(--terracotta); }
.process-cell--kanton strong { color: var(--ink); font-weight: 700; }
/* Only shown where the steps stack as cards; otherwise left to screen
   readers, since the label column says it. */
.process-cell__role {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.process-rounds {
    margin: -4px 0;
    color: var(--terracotta);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-align: center;
    text-transform: uppercase;
}

/* Too narrow for five columns: one card per step, each cell labelled. */
@media (max-width: 1024px) {
    .process-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
    .process-role { display: none; }
    .process-step { display: flex; flex-direction: column; gap: 8px; }
    .process-head, .process-cell, .process-rounds { grid-column: auto; grid-row: auto; }
    .process-name { flex: none; }
    .process-step:not(:last-child) .process-name::after { display: none; }
    .process-cell--kanton { flex: 1; }
    .process-cell__role {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
        margin: 0 0 6px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.8px;
        text-transform: uppercase;
    }
    .process-cell--demografik .process-cell__role { color: rgba(255, 255, 255, 0.75); }
    .process-cell--kanton .process-cell__role { color: var(--terracotta); }
    .process-rounds { margin: 0; text-align: left; }
}

.angebot-demografik {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    margin-top: 32px;
    padding: 20px 24px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.angebot-demografik > div { flex: 1 1 480px; }
.angebot-demografik h3 { margin: 0 0 6px; color: var(--accent); font-size: 16px; }
.angebot-demografik p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; max-width: 90ch; }
.angebot-demografik a:not(.btn) { color: var(--accent); font-weight: 600; font-size: 14px; text-decoration: none; }
.angebot-demografik a:not(.btn):hover { color: var(--terracotta); }

/* --- Dropdowns (Dash defaults tweaked to match the accent) ------------- */
/* Dash 4 themes its components (dropdown, checklist, radio …) through these
   variables, declared on :root by a stylesheet injected after this one —
   hence body, which wins by inheritance. Defaults: purple and navy. */
body {
    --Dash-Fill-Interactive-Strong: var(--accent);
    --Dash-Fill-Interactive-Weak: var(--accent-soft);
    --Dash-Fill-Inverse-Strong: #fff;
    --Dash-Fill-Primary-Hover: var(--accent-soft);
    --Dash-Fill-Primary-Active: var(--accent-soft);
    --Dash-Fill-Disabled: rgba(46, 58, 67, 0.08);
    --Dash-Stroke-Strong: var(--line);
    --Dash-Stroke-Weak: var(--line);
    --Dash-Text-Strong: var(--ink);
    --Dash-Text-Primary: var(--ink);
    --Dash-Text-Weak: var(--muted);
    --Dash-Text-Disabled: var(--muted);
    --Dash-Shading-Strong: rgba(46, 58, 67, 0.22);
    --Dash-Shading-Weak: rgba(46, 58, 67, 0.12);
}
/* Same shape as the form fields (.lead-input). */
.dash-dropdown, .dash-dropdown-content { border-radius: var(--radius-sm); }
.dash-dropdown-trigger { min-height: 40px; }
.dash-dropdown:focus,
.dash-dropdown[data-state="open"] {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 1px var(--accent);
}
.dash-dropdown-search-container { border-radius: var(--radius-sm); }
.dash-dropdown-search-container:focus-within { outline: none; box-shadow: 0 0 0 1px var(--accent); }
.dash-dropdown-option:hover,
.dash-dropdown-option:focus-within { background: var(--accent-soft); color: var(--ink); }
.dash-dropdown-option:has(input:checked) { font-weight: 600; }

/* --- Responsive -------------------------------------------------------- */
/* Below this width the nav no longer fits beside the brand and its tagline;
   wrapped, the sticky header would hold a good part of a phone screen. The
   links collapse behind the "Menü" button instead. */
@media (max-width: 860px) {
    .app-main { padding: 18px; }
    .app-header { padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
    .brand-name { display: none; }
    .nav-toggle { display: inline-flex; }
    .nav { display: none; }
    .nav--open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 2px;
        padding-top: 6px;
        border-top: 1px solid var(--line);
    }
    .nav--open .nav-link { padding: 10px 8px; justify-content: flex-start; }
    .nav--open .nav-drop__menu {
        display: flex;
        position: static;
        min-width: 0;
        padding: 0 0 4px 12px;
        background: transparent;
        border: none;
        box-shadow: none;
    }
    .nav--open .nav-drop__label:not(.is-active) { color: var(--ink); }
    .nav--open .nav-link--cta { align-self: flex-start; margin: 6px 0 4px; padding: 8px 16px; }
    .nav--open .nav-login__toggle { align-self: flex-start; margin: 2px 0 4px; padding: 8px 16px; }
    .nav--open .nav-login__panel { position: static; width: 100%; max-width: 22rem; margin-bottom: 8px; }
    .nav--open .nav-lang { margin: 4px 0 6px; padding-top: 8px; border-top: 1px solid var(--line); }
    .nav--open .nav-lang__link { padding: 8px 10px; }
    /* Switzerland is a wide shape, so a fixed pixel height leaves a band of
       white under it as soon as the panel is narrow. Size the box by its
       aspect ratio instead and let the height follow the width. */
    .canton-picker { grid-template-columns: 1fr; padding: 20px 16px; }
    .region-page { display: block; }
    .region-menu {
        top: var(--header-h, 64px);
        z-index: 9;
        height: auto;
        overflow: visible;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border-right: none;
        border-bottom: 1px solid var(--line);
    }
    .region-menu__region { flex: 1 1 0; min-width: 0; }
    .region-menu__region .control-label { display: none; }
    .region-menu__toggle {
        display: inline-flex;
        align-items: center;
        max-width: 55%;
        min-height: 36px;
        padding: 6px 12px;
        font: inherit;
        font-weight: 600;
        color: var(--accent);
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        cursor: pointer;
    }
    .region-menu__toggle::before {
        content: attr(data-current);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .region-menu__toggle::after { content: "▾"; margin-left: 6px; }
    .region-menu__sections {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: 70vh;
        overflow-y: auto;
        padding: 14px 14px 18px;
        background: var(--ribbon);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 8px 16px rgba(46, 58, 67, 0.12);
    }
    .region-menu.is-open .region-menu__sections { display: flex; }
    .region-menu__top { margin-top: 0; }
    .region-main { padding: 14px 18px 32px; }
    .chart-section--map .panel-graph-box {
        height: auto;
        aspect-ratio: 5 / 4;
        min-height: 280px;
    }
}

/* Two dropdown columns stop working before the old 520px breakpoint — at
   ~190px per column "Wohnung im Mehrfamilienhaus" is already truncated. */
@media (max-width: 620px) {
    .section-controls > .control,
    .section-controls > .control--compare { flex: 1 1 100%; margin-left: 0; }
    .panel-legend { flex-direction: column; gap: 7px; }
}

@media (max-width: 520px) {
    .app-main { padding: 14px; }
    .region-main { padding: 12px 12px 28px; }
    .region-head__name h1 { font-size: 24px; }
    .region-kpis { width: 100%; }
    .kpi-card { flex: 1 1 0; min-width: 0; padding: 6px 10px; }
    .kpi-card__value { font-size: 17px; }
    .topic-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
    .landing-inner { padding: 0 14px; }
    .landing-hero { padding: 28px 0 24px; }
    .landing-hero h1 { font-size: 27px; }
    .landing-tracker__figures { grid-template-columns: 1fr 1fr; }
    .tracker-figure__value { font-size: 22px; }
    .canton-map { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-rows: 48px; gap: 4px; }
    .canton-tile { gap: 2px; font-size: 10px; letter-spacing: 0; }
    .canton-tile__crest { height: 20px; }
    /* Tapping a tile opens the canton at once; the hover card is not needed. */
    .canton-tile__card { display: none !important; }
    .angebot-roadmap { flex-direction: column; }
    .process-route { flex-direction: column; align-items: flex-start; gap: 4px; }
    .process-route__arrow { display: none; }
    .process-route__label { display: block; margin: 0; }
    .roadmap-cycle { display: none; }
    .topic-kpi { padding: 10px 12px; }
    .topic-kpi__value { font-size: 19px; }
    .topic-tab { padding: 6px 12px; font-size: 13px; }
    .topic-head h1 { font-size: 24px; }
    .chart-section { padding: 14px; }
    .panel-graph-box { height: 340px; }
    .panel-logo { height: 26px; }
}

/* Touch input. 44px is the minimum comfortable target, and 16px is the
   threshold below which iOS Safari zooms into a focused field and never zooms
   back out. */
@media (pointer: coarse) {
    .nav-link,
    .nav-drop__label,
    .nav-lang__link,
    .control-checkboxes__option,
    .btn-tool,
    .section-sources > summary,
    .btn-toggle {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .region-menu__link { padding-top: 11px; padding-bottom: 11px; }
    .region-menu__toggle { min-height: 44px; }
    .lead-input { font-size: 16px; }
    /* Touch-sized dropdowns; a 16px search field stops iOS zooming in. */
    .dash-dropdown-trigger { min-height: 44px; }
    .dash-dropdown-search { font-size: 16px; }
    .panel-detail-hint { display: block; }
}