html, body { margin:0; padding:0; height:100%; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:14px }
/* Hide the server-rendered card once JS is available (class set pre-paint):
the app swaps it for the live panel, so JS users skip the boot-time flash;
non-JS visitors and non-rendering crawlers still receive it in the HTML. */
html.js #ssr-content { display:none }
#app { display:flex; height:100vh }
#sidebar { width:300px; flex:0 0 300px; background:#1a1a1a; color:#eee; overflow-y:auto; border-right:1px solid #333 }
#sidebar .brand-title { font-size:15px; padding:14px 16px 4px; margin:0; font-weight:600; letter-spacing:0.02em; display:flex; align-items:center; gap:8px }
#sidebar .brand-title .brand-mark { width:18px; height:18px; flex:0 0 18px; display:inline-block }
#sidebar .subtitle { font-size:11px; color:#888; padding:0 16px 10px; border-bottom:1px solid #333 }
#sidebar h2 { font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:#888; padding:14px 16px 4px; margin:0 }
/* `:not(.grape-search)` excludes the chip-filter's typeahead input —
it owns its own layout via `.grape-search-wrap`, which already
applies the 16/16 horizontal margin. Without the exclusion the
catch-all rule stacks margin on top of the wrap's, leaving the
grape input 32px narrower than the appellation search. */
#sidebar input[type=text]:not(.grape-search) { width:calc(100% - 32px); margin:0 16px 8px; padding:7px 9px; box-sizing:border-box; background:#222; color:#eee; border:1px solid #444; border-radius:3px; font-size:13px }
#sidebar input[type=text]:focus { outline:none; border-color:#934050 }
#sidebar input[type=text]:focus-visible { outline:2px solid #fff8e8; outline-offset:1px; border-color:#934050 }
#lang-switcher { display:flex; gap:2px; padding:6px 12px 8px; border-bottom:1px solid #333 }
#lang-switcher a { color:#888; font-size:11px; text-transform:uppercase; letter-spacing:0.08em; text-decoration:none; padding:3px 8px; border-radius:3px }
#lang-switcher a:hover { color:#fff }
#lang-switcher a.active { color:#fff8e8; background:#2a2a2a; font-weight:700 }
#mode-toggle { display:flex; gap:0; padding:8px 16px; border-bottom:1px solid #333 }
#mode-toggle .mode-btn { flex:1; background:#222; color:#888; border:1px solid #444; padding:6px 8px; cursor:pointer; font-size:12px; letter-spacing:0.04em }
#mode-toggle .mode-btn:first-child { border-radius:3px 0 0 3px }
#mode-toggle .mode-btn:last-child { border-radius:0 3px 3px 0; border-left:none }
#mode-toggle .mode-btn:hover { color:#fff }
#mode-toggle .mode-btn.active { background:#934050; color:#fff; border-color:#934050 }
#theme-toggle { display:flex; gap:0; padding:6px 16px 8px }
#theme-toggle .theme-btn { flex:1; background:#222; color:#888; border:1px solid #444; border-left:none; padding:5px 8px; cursor:pointer; font-size:13px; line-height:1.2 }
#theme-toggle .theme-btn:first-child { border-left:1px solid #444; border-radius:3px 0 0 3px }
#theme-toggle .theme-btn:last-child { border-radius:0 3px 3px 0 }
#theme-toggle .theme-btn:hover { color:#fff }
#theme-toggle .theme-btn.active { background:#934050; color:#fff; border-color:#934050 }
#sidebar [data-modes="simple"].mode-hidden, #sidebar [data-modes="advanced"].mode-hidden { display:none }
html.mode-simple #sidebar [data-modes="advanced"] { display:none }
html.mode-advanced #sidebar [data-modes="simple"] { display:none }
#igp-toggle { padding:8px 16px; border-top:1px solid #2a2a2a }
#igp-toggle label { display:flex; align-items:center; gap:6px; cursor:pointer; font-size:12.5px; color:#ddd }
#igp-toggle label:hover { color:#fff }
#igp-toggle input { accent-color:#6e7546 }
#spirits-toggle { padding:6px 16px 10px }
#spirits-toggle label { display:flex; align-items:center; gap:6px; cursor:pointer; font-size:12.5px; color:#ddd }
#spirits-toggle label:hover { color:#fff }
#spirits-toggle input { accent-color:#a07530 }
#active-filters { display:flex; align-items:center; gap:6px; padding:8px 12px 4px; min-height:0 }
#active-filters:has(#active-filters-chips:empty) { padding-bottom:0 }
#active-filters-chips { display:flex; flex-wrap:wrap; gap:4px; flex:1 }
#active-filters-chips:empty { display:none }
.filter-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 4px 2px 8px; background:#2a2a2a; color:#eee; border:1px solid #444; border-radius:11px; font-size:11px; line-height:1.3 }
.filter-chip.region-chip { border-color:#934050; box-shadow:inset 0 0 0 1px #934050; font-weight:600 }
.filter-chip button { background:none; border:none; color:#888; cursor:pointer; padding:0 4px; font-size:14px; line-height:1; border-radius:50% }
.filter-chip button:hover { color:#fff; background:#444 }
#active-filters #reset { background:transparent; color:#888; border:none; padding:2px 6px; cursor:pointer; font-size:11px; text-decoration:underline; flex:0 0 auto }
#active-filters #reset:hover { color:#fff }
#active-filters-chips:empty + #reset { display:none }
.facet-search { width:calc(100% - 32px); margin:4px 16px 6px; padding:5px 8px; box-sizing:border-box; background:#1f1f1f; color:#eee; border:1px solid #3a3a3a; border-radius:3px; font-size:12px }
.facet-search:focus { outline:none; border-color:#934050 }
/* Grape chip filter — replaces the long-list checkbox facet with a
typeahead + selected-chip UX. Three instances on the page (simple
all, advanced principal, advanced accessory) all share these rules. */
/* Horizontal spacing matches `.facet-search`'s `margin:4px 16px 6px`
so the grape search input lines up with the appellation search
input below it. The chip-tray and search-wrap each carry their
own 16px L/R margin instead of the chip-filter container padding. */
.grape-chip-filter { padding:0 }
.grape-chip-filter .chip-tray { display:flex; flex-wrap:wrap; gap:4px; margin:4px 16px 6px }
.grape-chip-filter .chip-tray:empty { display:none }
.grape-chip-filter .chip { display:inline-flex; align-items:center; gap:4px; padding:2px 4px 2px 8px; background:#3a2730; color:#fff; border:1px solid #934050; border-radius:11px; font-size:11px; line-height:1.3 }
.grape-chip-filter .chip .canon { color:#cfa; opacity:0.7; font-style:italic }
.grape-chip-filter .chip-x { background:none; border:none; color:#cfa; cursor:pointer; padding:0 4px; font-size:14px; line-height:1; border-radius:50% }
.grape-chip-filter .chip-x:hover { color:#fff; background:#5a3045 }
.grape-search-wrap { position:relative; margin:4px 16px 6px }
.grape-search { width:100%; padding:5px 8px; box-sizing:border-box; background:#1f1f1f; color:#eee; border:1px solid #3a3a3a; border-radius:3px; font-size:12px }
.grape-search:focus { outline:none; border-color:#934050 }
.grape-suggestions { position:absolute; left:0; right:0; top:calc(100% + 2px); z-index:50; max-height:280px; overflow-y:auto; background:#1a1a1a; border:1px solid #3a3a3a; border-radius:3px; box-shadow:0 4px 12px rgba(0,0,0,0.4) }
.grape-suggestions[hidden] { display:none }
.grape-suggestions .suggestion { display:flex; align-items:center; gap:6px; padding:5px 8px; cursor:pointer; font-size:12px; color:#ddd; border-bottom:1px solid #2a2a2a }
.grape-suggestions .suggestion:last-child { border-bottom:none }
.grape-suggestions .suggestion.active, .grape-suggestions .suggestion:hover { background:#2a1f25 }
.grape-suggestions .suggestion .name { flex:0 0 auto }
.grape-suggestions .suggestion .canon { flex:1 1 auto; color:#999; font-style:italic; font-size:11px }
.grape-suggestions .suggestion .count { flex:0 0 auto; margin-left:auto; color:#888; font-size:11px; font-variant-numeric:tabular-nums }
#sidebar > details > summary .facet-badge { display:inline-block; margin-left:6px; padding:1px 6px; background:#934050; color:#fff; border-radius:8px; font-size:10px; font-weight:600 }
#sidebar > details > summary .facet-badge:empty { display:none }
#sidebar > details > summary { display:flex; align-items:center }
#sidebar > details > summary .facet-label { flex:1 }
.facet .region-group-wrap { display:flex; align-items:flex-start; gap:6px; margin:2px 0 }
.facet .region-group-wrap > .region-select { accent-color:#934050; cursor:pointer; flex:0 0 auto; margin-top:6px }
.facet .region-group-wrap > .region-select:checked, .facet .region-group-wrap > .region-select:indeterminate { accent-color:#934050 }
.facet .region-group-wrap > .region-group { flex:1 1 auto; min-width:0 }
.facet .region-group > summary { display:flex; align-items:center; gap:6px }
#status { padding:8px 16px; font-size:11px; color:#aaa; background:#222; border-bottom:1px solid #333 }
#status .hint-action { background:none; border:0; padding:0; margin-left:6px; color:#9ac4ff; font:inherit; cursor:pointer; text-decoration:underline }
#status .hint-action:hover { color:#cfe0ff }
details { margin:0 }
summary { cursor:pointer; padding:8px 16px; color:#bbb; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; user-select:none; border-top:1px solid #2a2a2a }
summary:hover { color:#fff }
summary::-webkit-details-marker { color:#666 }
.facet { max-height:240px; overflow-y:auto; padding:0 16px 8px }
.facet.facet-appellations { max-height:340px }
.facet label { display:flex; align-items:center; gap:6px; padding:2px 0; cursor:pointer; font-size:12.5px; color:#ddd }
.facet label:hover { color:#fff }
.facet input[type=checkbox] { accent-color:#c0392b; flex:0 0 auto }
.facet .name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.facet .count { color:#666; font-size:11px; margin-left:4px }
.facet .syns { color:#888; font-size:11px; font-weight:normal }
/* Keyboard/SR path to open an appellation panel (the WebGL polygons aren't
DOM-reachable). Subtle until the row is hovered or the button is focused. */
.facet .open-aoc { flex:0 0 auto; margin-left:auto; background:none; border:none; color:#8a8a8a; cursor:pointer; font-size:14px; line-height:1; padding:0 4px; border-radius:3px; opacity:0.55; transition:opacity 0.12s ease, color 0.12s ease, background 0.12s ease }
.facet label:hover .open-aoc { opacity:1; color:#cfa }
.facet .open-aoc:hover { color:#fff; background:#333 }
.facet .open-aoc:focus-visible { opacity:1 }
.facet label.facet-unavailable { display:none }
.facet .region-group-wrap.facet-unavailable { display:none }
.facet .tree-row[data-depth="0"] { padding-left:0 }
.facet .tree-row[data-depth="1"] { padding-left:14px }
.facet .tree-row[data-depth="2"] { padding-left:28px }
.facet .tree-row-parent { font-weight:600; color:#eee }
.facet .tree-row[data-depth="0"]:not(:first-child) { margin-top:4px }
.facet .tree-row[data-depth="2"] .name { color:#bbb }
.facet .region-group > summary { padding:4px 0; border-top:none; font-size:10.5px; color:#888; letter-spacing:0.06em; display:flex; align-items:center; gap:6px }
.facet .region-group > summary:hover { color:#ddd }
.facet .region-group > summary .name { flex:1 }
.facet .region-group > summary .count { color:#555 }
.facet .region-group .region-items { padding-left:10px }
.facet .empty { color:#666; font-size:11px; font-style:italic; padding:4px 0 }
#actions { position:sticky; bottom:0; background:#1a1a1a; padding:10px 16px; border-top:1px solid #333; display:flex; gap:8px }
#actions button { flex:1; padding:6px; background:#333; color:#eee; border:1px solid #555; border-radius:3px; cursor:pointer; font-size:12px }
#actions button:hover { background:#444 }
#map { flex:1; height:100%; min-width:0 }
#panel { width:0; flex:0 0 0; background:#fff; border-left:1px solid #ddd; overflow-y:auto; transition:flex-basis 0.18s ease, width 0.18s ease }
#panel.open { width:440px; flex-basis:440px }
#panel .close { position:sticky; top:0; float:right; margin:8px 12px; background:#eee; border:none; border-radius:50%; width:28px; height:28px; cursor:pointer; font-size:16px; color:#666; z-index:2 }
#panel .close:hover { background:#ddd; color:#000 }
#panel .body { padding:16px 24px 40px; line-height:1.55; color:#222 }
#panel .body h1 { font-size:22px; margin:8px 0 10px; padding-bottom:6px; border-bottom:2px solid #934050 }
#panel .body h2 { font-size:13px; text-transform:uppercase; letter-spacing:0.04em; color:#934050; margin:18px 0 6px }
#panel .body p { margin:0 0 8px }
#panel .meta { color:#666; font-size:12px; margin-bottom:8px }
#panel .meta .meta-country { display:inline-flex; align-items:center; gap:5px; color:#444 }
#panel .meta .country-flag { font-size:13px; line-height:1 }
#panel .meta .country-name { font-weight:600 }
#panel .translation-attr { font-size:11.5px; color:#666; font-style:italic; margin:0 0 8px }
#panel .translation-attr a { color:#888 }
#panel .stack-header { font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:#888; margin-bottom:6px; padding-bottom:6px; border-bottom:1px solid #eee; display:flex; align-items:center; gap:6px }
#panel .stack-pos { font-size:10.5px; padding:1px 7px; background:#efe7d8; color:#5a4a2a; border-radius:9px; font-variant-numeric:tabular-nums; letter-spacing:0; text-transform:none; cursor:default }
#panel .approx-line { font-size:11.5px; color:#7a5a1a; background:#fbf3df; border-left:2px solid #d6b35a; padding:4px 8px; margin:4px 0 8px; border-radius:2px }
#panel .approx-line a.parent-link { color:#7a5a1a; text-decoration:underline }
#panel .role-disclaimer { font-size:11px; color:#888; font-style:italic; margin:2px 0 8px; line-height:1.35 }
#panel .appellation-note { font-size:11.5px; color:#33506b; background:#eef3f8; border-left:2px solid #6f93b5; padding:6px 9px; margin:8px 0; border-radius:2px; line-height:1.45 }
#panel .appellation-note .note-srcs { margin-top:4px }
#panel .appellation-note a { color:#33506b; text-decoration:underline }
#panel details.dulok { margin:8px 0; font-size:11.5px; color:#444 }
#panel details.dulok > summary { cursor:pointer; font-weight:600; color:#5a4a2a; padding:2px 0; list-style:revert }
#panel details.dulok[open] > summary { margin-bottom:4px }
#panel details.dulok .dulo-row { padding:2px 0; line-height:1.4; border-top:1px solid #f0ece2 }
#panel details.dulok .dulo-tel { font-weight:600; color:#7a5a1a }
#panel details.menzioni .menzioni-chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px }
#panel details.menzioni .pill.menzione { background:#f3eee2; color:#5a4a2a; border:1px solid #e4dcc8; font-size:11px; padding:1px 7px; border-radius:10px }
#panel .appellation-note .note-srcs a { margin-right:10px; white-space:nowrap }
#panel .aoc-card + .aoc-card { margin-top:24px; padding-top:20px; border-top:1px dashed #ccc }
#panel .aoc-card h1 { font-size:18px; margin:0 0 6px; padding-bottom:4px; border-bottom:2px solid #934050 }
#panel .aoc-card.subordinate h1 { font-size:16px; color:#444; border-bottom-color:#ccc }
#panel .sources { margin:4px 0 0; padding-left:18px; font-size:12.5px; color:#3a3a3a }
#panel .sources li { margin:3px 0 }
#panel .sources code { font-size:11px; color:#888 }
#panel .facts-sub-h { font-size:11px; font-weight:600; color:#555; margin:8px 0 2px; text-transform:none; letter-spacing:0 }
#panel ul.facts { margin:0 0 6px; padding-left:18px; font-size:13px; color:#222 }
#panel ul.facts li { margin:2px 0 }
#panel ul.facts .wiki-attr { font-size:11px; color:#666; font-style:italic }
#panel ul.facts .wiki-attr a { color:#888 }
#panel blockquote.facts-verbatim { margin:4px 0 6px; padding:6px 10px; border-left:3px solid #ddd; background:#f9f7f4; font-size:13px; color:#333; font-style:italic; white-space:pre-wrap }
#panel .verbatim-badge { display:inline-block; margin-left:8px; padding:1px 8px; background:#fff5e5; color:#a05a00; border:1px solid #f0d8a8; border-radius:9px; font-size:10.5px; font-weight:600; font-style:normal; vertical-align:middle }
#panel .pills { margin:0 0 4px }
.pill { display:inline-block; padding:2px 8px; margin:2px 4px 2px 0; background:#eee; border-radius:10px; font-size:11px; color:#333; text-decoration:none }
.pill.style { background:#fdebe5; color:#934050 }
.pill.style.style--red, .pill.style.style--clairet, .pill.style.style--primeur { background:#f3d6d6; color:#7a1620 }
.pill.style.style--white, .pill.style.style--dry, .pill.style.style--tranquille { background:#f6efd1; color:#5a4a10 }
.pill.style.style--rose { background:#fbdce5; color:#7a3050 }
.pill.style.style--sparkling, .pill.style.style--cremant { background:#e3eaf2; color:#3a4a5e }
.pill.style.style--sweet, .pill.style.style--vendanges-tardives, .pill.style.style--grains-nobles { background:#fbe8c0; color:#6a4a08 }
.pill.style.style--vdn, .pill.style.style--vin-de-liqueur { background:#f4d8a8; color:#5a3508 }
.pill.style.style--vin-jaune { background:#f7e7a3; color:#5a4810 }
.pill.style.style--vin-de-paille { background:#f9e4b8; color:#684a08 }
.pill.grape { background:#e8eef5; color:#234 }
a.pill.grape:hover { background:#d4dff0; text-decoration:underline }
.pill.grape.accessory { background:#f0f0f0; color:#666 }
a.pill.grape.accessory:hover { background:#e0e0e0 }
.pill.grape.observation { background:#fff8d8; color:#7a5a00 }
a.pill.grape.observation:hover { background:#f5ecc0 }
a.pill.grape.has-info { border-bottom:1px dotted currentColor; padding-bottom:1px }
.pill.grape .canon { opacity:0.65; font-weight:normal; font-size:0.9em }
h1 .latin, .facet label .latin { opacity:0.55; font-weight:normal; font-size:0.85em; margin-left:0.25em }
.pill.style { cursor:default }
a.pill.style { text-decoration:none }
a.pill.style:hover { text-decoration:underline; opacity:0.85 }
.pill.style.has-info { border-bottom:1px dotted currentColor; padding-bottom:1px }
a.pill.style.has-info { cursor:pointer }
.fr-marker { display:inline-block; margin-left:4px; font-size:10px; color:#999; font-style:italic; vertical-align:baseline }
#grape-tooltip .fr-marker { font-size:10px; color:#888 }
#sidebar-toggle { display:none; position:fixed; top:8px; right:8px; z-index:30; width:44px; height:44px; background:#1a1a1a; color:#eee; border:1px solid #444; border-radius:4px; font-size:18px; cursor:pointer; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,0.2) }
#sidebar-toggle:hover { background:#2a2a2a }
#legend { border-top:1px solid #2a2a2a }
#legend > summary { padding:8px 16px; color:#bbb; font-size:11px; text-transform:uppercase; letter-spacing:0.06em }
#legend .legend-body { padding:4px 16px 12px; font-size:11.5px; color:#bbb; line-height:1.5 }
#legend .swatch-row { display:flex; align-items:center; gap:6px; margin:3px 0 }
#legend .sw { display:inline-block; width:14px; height:14px; border-radius:3px; flex:0 0 14px; border:1px solid rgba(255,255,255,0.1) }
#legend .sw.aoc { background:#934050 }
#legend .sw.igp { background:#6e7546 }
#legend .sw.principal { background:#e8eef5 }
#legend .sw.accessory { background:#f0f0f0 }
#legend .sw.observation { background:#fff8d8 }
#legend .legend-h { color:#888; font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; margin-top:8px }
#legend .legend-h:first-child { margin-top:0 }
#legend .hint { color:#888; font-style:italic; margin-top:4px }
@media (max-width: 768px) {
#app { flex-direction:column }
#sidebar-toggle { display:flex }
#sidebar { position:fixed; top:0; left:0; width:280px; height:100vh; flex:0 0 auto; transform:translateX(-100%); transition:transform 0.18s ease; z-index:25; box-shadow:2px 0 12px rgba(0,0,0,0.25) }
#sidebar.open { transform:translateX(0) }
#map { flex:1; height:100vh; min-width:0 }
#panel { position:fixed; bottom:0; left:0; right:0; width:auto; height:0; flex:none; max-height:75vh; transition:height 0.18s ease; border-left:none; border-top:1px solid #ddd; z-index:20 }
#panel.open { width:auto; height:75vh; flex-basis:auto }
#panel .close { width:44px; height:44px; font-size:20px }
.facet input[type=checkbox] { width:18px; height:18px }
.facet .open-aoc { opacity:1; padding:6px 10px; font-size:18px }
#actions button { min-height:36px }
}
#sidebar-footer { padding:12px 16px 16px; margin-top:8px; border-top:1px solid #2a2a2a; font-size:11px; color:#888; text-align:center }
#sidebar-footer a { color:#888; text-decoration:none }
#sidebar-footer a:hover { color:#fff; text-decoration:underline }
#sidebar-footer .sep { margin:0 6px; color:#444 }
#sidebar-disclaimer { padding:0 4px 10px; margin-bottom:10px; border-bottom:1px solid #222; font-size:11px; line-height:1.5; color:#888 }
#sidebar-disclaimer a { color:#aaa; text-decoration:underline; text-underline-offset:2px }
#sidebar-disclaimer a:hover { color:#fff }
.feedback-copied { display:inline-block; margin-left:6px; padding:2px 6px; border-radius:3px; background:#7a1f3a; color:#fff; font-size:10.5px; opacity:0; transform:translateY(-1px); transition:opacity 180ms ease, transform 180ms ease; pointer-events:none }
.feedback-copied.visible { opacity:1; transform:translateY(0) }
#about-dialog { width:520px; max-width:calc(100vw - 32px); padding:0; border:1px solid #ccc; border-radius:6px; box-shadow:0 8px 32px rgba(0,0,0,0.18); background:#fff; color:#222 }
#about-dialog::backdrop { background:rgba(0,0,0,0.45) }
#about-dialog .close { position:absolute; top:10px; right:10px; background:#eee; border:none; border-radius:50%; width:28px; height:28px; cursor:pointer; font-size:16px; color:#666 }
#about-dialog .close:hover { background:#ddd; color:#000 }
#about-dialog .about-body { padding:24px 28px; line-height:1.55 }
#about-dialog h1 { font-size:20px; margin:0 0 14px; padding-bottom:8px; border-bottom:2px solid #934050 }
#about-dialog p { margin:0 0 10px }
#about-dialog a { color:#934050 }
#grape-tooltip { position:fixed; max-width:340px; background:#fff; color:#222; border:1px solid #ddd; border-radius:4px; padding:10px 12px; font-size:12px; line-height:1.5; box-shadow:0 4px 16px rgba(0,0,0,0.15); z-index:1000; display:none }
#grape-tooltip .ext { margin:0 0 6px }
#grape-tooltip .note { margin:0 0 6px; font-style:italic; color:#555 }
#grape-tooltip .thumb { float:right; width:96px; height:auto; margin:0 0 6px 10px; border-radius:3px; background:#f3f3f3 }
#grape-tooltip .src { color:#888; font-size:10.5px; clear:both }
#grape-tooltip .src a { color:#888 }
#panel .body a { color:#934050 }
.maplibregl-popup { max-width:320px !important }
.maplibregl-popup-content { font-size:13px; padding:10px 12px !important }
.maplibregl-popup-content h3 { margin:0 0 4px; font-size:14px; color:#934050 }
.maplibregl-popup-content .meta { color:#777; font-size:11px }
/* Visible focus indicators (WCAG 2.4.7). Light outline on the dark sidebar,
burgundy outline on the light panel/dialog. */
#sidebar a:focus-visible,
#sidebar button:focus-visible,
#sidebar summary:focus-visible,
#sidebar input[type=checkbox]:focus-visible,
#sidebar-toggle:focus-visible { outline:2px solid #fff8e8; outline-offset:2px; border-radius:3px }
#panel button:focus-visible,
#panel a:focus-visible,
#about-dialog button:focus-visible,
#about-dialog a:focus-visible { outline:2px solid #934050; outline-offset:2px; border-radius:3px }
.maplibregl-popup-content a:focus-visible { outline:2px solid #934050; outline-offset:2px }
/* Skip-to-map link: off-screen until focused, so keyboard users can bypass
the filter sidebar and jump straight to the map. */
.skip-link { position:absolute; left:8px; top:-48px; z-index:60; background:#7A1F2B; color:#fff;
padding:8px 14px; border-radius:0 0 4px 4px; font-size:13px; text-decoration:none;
transition:top 0.15s ease }
.skip-link:focus { top:0 }
/* Respect the OS "reduce motion" setting (WCAG 2.3.3): neutralise the
panel/sidebar slides, toast fades and any animation. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important;
transition-duration:0.01ms !important; scroll-behavior:auto !important }
}
/* Dark mode. Gated on the `html.theme-dark` class (NOT a media query) so the
manual light/dark/system toggle works: a pre-paint inline script adds the
class for system-dark OR a manual dark choice, and removing it forces light
even on a dark OS — no light-mode reset rules needed. The sidebar is already
dark; this flips the detail panel, about dialog, grape tooltip and map
popup. Polygon fill tints are unchanged (map layers, not CSS); the basemap
swaps live via setLayoutProperty (see the dual basemap sources below). */
html.theme-dark #panel { background:#1c1c1e; border-left-color:#333 }
html.theme-dark #panel .body { color:#e3e3e3 }
html.theme-dark #panel .body h1, html.theme-dark #panel .body h2 { color:#d98b97; border-bottom-color:#5a2a33 }
html.theme-dark #panel .body a, html.theme-dark #panel .translation-attr a,
html.theme-dark #about-dialog a, html.theme-dark #grape-tooltip a, html.theme-dark #grape-tooltip .src a { color:#d98b97 }
/* Focus ring must keep ≥3:1 against the dark surface (WCAG 1.4.11/2.4.11):
the burgundy #934050 ring drops to ~2:1 on #1c1c1e, so brighten it. */
html.theme-dark #panel button:focus-visible, html.theme-dark #panel a:focus-visible,
html.theme-dark #about-dialog button:focus-visible, html.theme-dark #about-dialog a:focus-visible { outline-color:#d98b97 }
html.theme-dark #panel .close, html.theme-dark #about-dialog .close { background:#333; color:#bbb }
html.theme-dark #panel .close:hover, html.theme-dark #about-dialog .close:hover { background:#444; color:#fff }
html.theme-dark #panel .meta { color:#9a9a9a }
html.theme-dark #panel .meta .meta-country { color:#cfcfcf }
html.theme-dark #panel .stack-header { border-bottom-color:#333 }
html.theme-dark #panel .aoc-card + .aoc-card { border-top-color:#444 }
html.theme-dark #panel .aoc-card.subordinate h1 { color:#bbb; border-bottom-color:#444 }
html.theme-dark #panel .sources, html.theme-dark #panel .facts-sub-h { color:#bbb }
html.theme-dark #panel ul.facts { color:#e0e0e0 }
html.theme-dark #panel .translation-attr, html.theme-dark #panel ul.facts .wiki-attr { color:#a3a3a3 }
html.theme-dark #panel blockquote.facts-verbatim { background:#262320; color:#dcdcdc; border-left-color:#555 }
html.theme-dark #panel .approx-line { background:#322b18; color:#e6cf86; border-left-color:#6a5a2a }
html.theme-dark #panel .approx-line a.parent-link { color:#e6cf86 }
html.theme-dark #panel .appellation-note { background:#1e2a36; color:#aecbe6; border-left-color:#3f6182 }
html.theme-dark #panel .appellation-note a { color:#aecbe6 }
html.theme-dark #panel details.dulok { color:#ccc }
html.theme-dark #panel details.dulok > summary, html.theme-dark #panel details.dulok .dulo-tel { color:#d8b86a }
html.theme-dark #panel details.dulok .dulo-row { border-top-color:#333 }
html.theme-dark #about-dialog { background:#1c1c1e; color:#e3e3e3; border-color:#444 }
html.theme-dark #about-dialog h1 { color:#d98b97; border-bottom-color:#5a2a33 }
html.theme-dark #grape-tooltip { background:#1c1c1e; color:#e3e3e3; border-color:#444; box-shadow:0 4px 16px rgba(0,0,0,0.5) }
html.theme-dark #grape-tooltip .note { color:#bbb }
html.theme-dark #grape-tooltip .thumb { background:#333 }
html.theme-dark .maplibregl-popup-content { background:#1c1c1e; color:#e3e3e3 }
html.theme-dark .maplibregl-popup-content h3 { color:#d98b97 }
html.theme-dark .maplibregl-popup-content .meta { color:#aaa }
html.theme-dark .maplibregl-popup-close-button { color:#aaa }
html.theme-dark .maplibregl-popup-anchor-top .maplibregl-popup-tip,
html.theme-dark .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
html.theme-dark .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color:#1c1c1e }
html.theme-dark .maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
html.theme-dark .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
html.theme-dark .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color:#1c1c1e }
html.theme-dark .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color:#1c1c1e }
html.theme-dark .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color:#1c1c1e }
/* Pills: the light pastel chips glow on the dark panel — re-tint to dark,
muted, hue-preserving backgrounds with light text so they read calmly. */
html.theme-dark .pill { background:#2d2d30; color:#d6d6d6 }
html.theme-dark .pill.style { background:#34232a; color:#e3aab4 }
html.theme-dark .pill.style.style--red, html.theme-dark .pill.style.style--clairet, html.theme-dark .pill.style.style--primeur { background:#3a1f24; color:#e7a3ab }
html.theme-dark .pill.style.style--white, html.theme-dark .pill.style.style--dry, html.theme-dark .pill.style.style--tranquille { background:#2f2a16; color:#d9c886 }
html.theme-dark .pill.style.style--rose { background:#371f2b; color:#e7a6c1 }
html.theme-dark .pill.style.style--sparkling, html.theme-dark .pill.style.style--cremant { background:#1f2a36; color:#a8c5e1 }
html.theme-dark .pill.style.style--sweet, html.theme-dark .pill.style.style--vendanges-tardives, html.theme-dark .pill.style.style--grains-nobles { background:#33290f; color:#e6c684 }
html.theme-dark .pill.style.style--vdn, html.theme-dark .pill.style.style--vin-de-liqueur { background:#2f2110; color:#e2b97e }
html.theme-dark .pill.style.style--vin-jaune { background:#2f2914; color:#e7d186 }
html.theme-dark .pill.style.style--vin-de-paille { background:#2f2614; color:#e7c987 }
html.theme-dark .pill.grape { background:#202d3b; color:#aecbe8 }
html.theme-dark a.pill.grape:hover { background:#2a3a4c }
html.theme-dark .pill.grape.accessory { background:#2a2a2c; color:#aeaeae }
html.theme-dark a.pill.grape.accessory:hover { background:#343437 }
html.theme-dark .pill.grape.observation { background:#2e2a14; color:#e0cb84 }
html.theme-dark a.pill.grape.observation:hover { background:#383218 }
html.theme-dark #panel .stack-pos { background:#2e2a1c; color:#d8c79a }
html.theme-dark #panel .verbatim-badge { background:#33280f; color:#e6b86a; border-color:#5a4a1e }
html.theme-dark #panel details.menzioni .pill.menzione { background:#2c2a20; color:#d8c89a; border-color:#3e3a2c }