/* Design tokens (2026-10): the palette the sidebar, panel and map chrome
     share. Neutrals are a lightness scale (--n-0 white … --n-900 near-black)
     so a token is truthful on a dark sidebar and a light panel alike; the
     named colours are the roles the paint and the legend key on — keep
     --c-accent / --c-pgi / --c-spirit in step with _build_source_block. The
     three former burgundies (#934050 / #7A1F2B / #7a1f3a) are one accent now. */
  :root {
    --c-accent:#934050; --c-accent-hover:#8d2a48; --c-accent-ink-dark:#d98b97; --c-accent-rule-dark:#5a2a33;
    --c-pgi:#6e7546; --c-spirit:#a07530; --c-cream:#fff8e8;
    --n-0:#fff; --n-100:#eee; --n-200:#ddd; --n-300:#bbb; --n-400:#888; --n-500:#666; --n-600:#555;
    --n-700:#444; --n-750:#333; --n-800:#2a2a2a; --n-850:#222; --n-900:#1a1a1a;
    --n-dark-panel:#1c1c1e; --n-dark-text:#e3e3e3;
    --note-bg:#fbf3df; --note-ink:#7a5a1a; --note-rule:#d6b35a;
    --note-bg-dark:#322b18; --note-ink-dark:#e6cf86; --note-rule-dark:#6a5a2a;
    /* Type scale for the chrome's small text (headings stay literal). */
    --fs-2xs:10px; --fs-xs:11px; --fs-sm:12.5px; --fs-md:13px;
    /* The sidebar, the phone bar and the ⚙ menu by role — light here, dark
       under html.theme-dark below (feedback 2026-10-18: light mode had left
       the menu dark). Text tokens hold AA against their backgrounds:
       --side-text-3 is the dimmest used for words. */
    --side-bg:#fff; --side-bg-2:#f5f5f6; --side-bg-3:#ebebed; --side-bg-4:#dedee1;
    --side-border:#e4e4e7; --side-border-2:#cfcfd4;
    --side-text:#1f1f22; --side-text-2:#4b4b50; --side-text-3:#6b6b70;
    --side-input-bg:#fff; --side-focus:var(--c-accent); --side-link:#3b5fa8;
    --side-chip-on:#f3e6ea; --side-accent-ink:var(--c-accent);
  }
  html.theme-dark {
    --side-bg:#1a1a1a; --side-bg-2:#222; --side-bg-3:#2a2a2a; --side-bg-4:#333;
    --side-border:#333; --side-border-2:#444;
    --side-text:#eee; --side-text-2:#ccc; --side-text-3:#9a9a9a;
    --side-input-bg:#222; --side-focus:var(--c-cream); --side-link:#9ac4ff;
    --side-chip-on:#3a2730; --side-accent-ink:var(--c-accent-ink-dark);
  }
  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, html.js .entity-nav { display:none }
  /* No-JS / crawler cross-link nav (browse + parent + children). Hidden once
     the map boots; it exists to feed internal links into the link graph. */
  .entity-nav { padding:12px 16px; font-size:var(--fs-md); line-height:1.7; border-top:1px solid var(--n-100); background:#fafafa; color:var(--n-750) }
  .entity-nav a { color:var(--c-accent) }
  .entity-nav .entity-nav-parent, .entity-nav .entity-nav-children { display:block; margin-top:4px; color:var(--n-600) }
  #app { display:flex; height:100vh; height:100dvh }
  /* Phone chrome (the bar, the scrim, the sheet handle) exists only ≤768px. */
  #mobile-bar, #scrim, #panel .sheet-handle { display:none }
  /* Boot: no slide-in for a panel or drawer that is open from the first
     frame (an entity landing); app.js adds `booted` after two frames. */
  html:not(.booted) #panel, html:not(.booted) #sidebar { transition:none }
  #sidebar { width:300px; flex:0 0 300px; background:var(--side-bg); color:var(--side-text); overflow-y:auto; border-right:1px solid var(--side-border); display:flex; flex-direction:column }
  /* No child of the column ever shrinks below its content (the chip tray
     once did, spilling its chip onto the header below); the open
     appellation tree is the one flexing child, by its own rule. */
  #sidebar > * { flex:0 0 auto }
  /* The head: the brand and, on desktop, the button that folds the sidebar to
     a rail (feedback 2026-10-18: "sidebar collapsable on desktop as well"). */
  .sidebar-head { display:flex; align-items:center; gap:8px; padding:12px 8px 2px 16px }
  #sidebar .brand-title { flex:1; font-size:15px; padding:0; margin:0; font-weight:600; letter-spacing:0.02em; display:flex; align-items:center; gap:8px; min-width:0 }
  #sidebar .brand-title .brand-mark { width:18px; height:18px; flex:0 0 18px; display:inline-block }
  #sidebar-collapse { flex:0 0 32px; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; background:none; border:none; border-radius:4px; color:var(--side-text-3); font-size:22px; line-height:1; cursor:pointer }
  #sidebar-collapse:hover { background:var(--side-bg-3); color:var(--side-text) }
  #sidebar .subtitle { font-size:var(--fs-xs); color:var(--side-text-3); padding:0 16px 10px; border-bottom:1px solid var(--side-border) }
  #sidebar h2 { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:0.08em; color:var(--side-text-3); padding:14px 16px 4px; margin:0 }
  /* Folded: a 48 px rail with the search and the expand button; the rest of
     the sidebar leaves the layout (and the accessibility tree) until it is
     unfolded. The state is a class on <html>, restored before first paint. */
  #sidebar-rail { display:none }
  @media (min-width: 769px) {
    html.sidebar-collapsed #sidebar { width:48px; flex-basis:48px; overflow:hidden }
    html.sidebar-collapsed #sidebar > :not(#sidebar-rail) { display:none }
    html.sidebar-collapsed #sidebar-rail { display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 0 }
  }
  #sidebar-rail .brand-mark { width:20px; height:20px; margin-bottom:6px }
  #sidebar-rail button { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; background:none; border:none; border-radius:6px; color:var(--side-text-2); cursor:pointer; font-size:22px; line-height:1; padding:0 }
  #sidebar-rail button svg { width:18px; height:18px }
  #sidebar-rail button:hover { background:var(--side-bg-3); color:var(--side-text) }
  #sidebar input[type=text]:not(.omni-input) { width:calc(100% - 32px); margin:0 16px 8px; padding:7px 9px; box-sizing:border-box; background:var(--side-input-bg); color:var(--side-text); border:1px solid var(--side-border-2); border-radius:3px; font-size:var(--fs-md) }
  #sidebar input[type=text]:focus { outline:none; border-color:var(--c-accent) }
  #sidebar input[type=text]:focus-visible { outline:2px solid var(--side-focus); outline-offset:1px; border-color:var(--c-accent) }
  .visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
  /* Search first (feedback 2026-10-18: "search more prominent"): a taller
     field with a magnifier, and a clear button once it holds text. */
  #omnisearch { position:relative; padding:10px 16px 8px }
  #omnisearch .omni-box { position:relative }
  #omnisearch .omni-icon { position:absolute; left:11px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--side-text-3); pointer-events:none }
  .omni-input { width:100%; box-sizing:border-box; padding:11px 36px 11px 38px; background:var(--side-input-bg); color:var(--side-text); border:1px solid var(--side-border-2); border-radius:6px; font-size:15px }
  .omni-input::placeholder { color:var(--side-text-3) }
  #omni-clear { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; background:none; border:none; border-radius:50%; color:var(--side-text-3); font-size:20px; line-height:1; cursor:pointer; padding:0 }
  #omni-clear:hover { background:var(--side-bg-3); color:var(--side-text) }
  #omni-clear[hidden] { display:none }
  /* The results are in the flow, not a popup: while the box holds text
     they replace the filters below (`#sidebar.searching`) and scroll with
     the sidebar — the dropdown that sat half over the tree read as a
     layout error (feedback 2026-10-18). */
  .omni-suggestions { position:static; margin:8px -16px -8px; background:var(--side-bg); border:0; border-top:1px solid var(--side-border) }
  #sidebar.searching > details, #sidebar.searching #active-filters, #sidebar.searching #status { display:none }
  .omni-suggestions[hidden] { display:none }
  .omni-group-header { position:sticky; top:0; padding:4px 8px; background:var(--side-bg-2); color:var(--side-text-3); font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:0.09em }
  .omni-suggestions .suggestion { display:flex; align-items:center; gap:6px; padding:6px 8px; cursor:pointer; font-size:var(--fs-sm); color:var(--side-text); border-bottom:1px solid var(--side-border) }
  .omni-suggestions .suggestion:last-child { border-bottom:none }
  .omni-suggestions .suggestion.active, .omni-suggestions .suggestion:hover { background:var(--side-chip-on) }
  /* A suggestion's name wraps rather than truncates — the same fifteen
     "Aloxe-Corton premier …" rows the tree showed (feedback 2026-10-18). */
  .omni-suggestions .suggestion .name { flex:1 1 auto; min-width:0; line-height:1.3 }
  .omni-suggestions .suggestion .sub { color:var(--side-text-3); font-style:italic; font-size:var(--fs-xs); flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .omni-suggestions .suggestion .count { margin-left:auto; color:var(--side-text-3); font-size:var(--fs-xs); font-variant-numeric:tabular-nums; flex:0 0 auto }
  .omni-empty { padding:10px 12px; color:var(--side-text-3); font-size:var(--fs-sm); font-style:italic }
  /* Language and theme live in the ⚙ menu on the map (feedback 2026-10-18:
     "move to config"); app.js moves this block into that control. Without
     JS it stays in the sidebar footer, its language links still crawlable. */
  html.js #config-menu:not(.placed) { display:none }
  #config-menu { padding:8px 0 }
  #config-menu .config-h { font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:0.08em; color:var(--side-text-3); padding:6px 14px 2px }
  #lang-switcher { display:flex; flex-direction:column; padding:0 6px 6px }
  #lang-switcher a { color:var(--side-text); font-size:var(--fs-md); text-decoration:none; padding:7px 10px; border-radius:4px }
  #lang-switcher a:hover { background:var(--side-bg-3) }
  #lang-switcher a.active { background:var(--side-chip-on); color:var(--side-accent-ink); font-weight:600 }
  /* Theme: one row — the heading left, three icon-only buttons (sun /
     monitor / moon, the convention) right; the word is each button's
     accessible name and hover hint (feedback 2026-10-19: the words made
     the cells cramped). */
  .config-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 14px 6px 0 }
  .config-row .config-h { padding:0 14px }
  #theme-toggle { display:inline-flex; gap:0; flex:0 0 auto }
  /* Three equal cells (basis 0), an SVG icon beside each word — the ☀ ◐ ☾
     glyphs rendered as emoji or text by platform and sized each cell to
     its label (feedback 2026-10-18). */
  #theme-toggle .theme-btn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:30px; background:var(--side-bg-2); color:var(--side-text-2); border:1px solid var(--side-border-2); border-left:none; padding:0; cursor:pointer }
  #theme-toggle .theme-btn:first-child { border-left:1px solid var(--side-border-2); border-radius:4px 0 0 4px }
  #theme-toggle .theme-btn:last-child { border-radius:0 4px 4px 0 }
  #theme-toggle .theme-btn:hover { color:var(--side-text) }
  #theme-toggle .theme-btn.active { background:var(--c-accent); color:var(--n-0); border-color:var(--c-accent) }
  #theme-toggle .theme-btn svg { width:16px; height:16px }
  /* The chip tray shares the sidebar's 16 px gutter and breathes above the
     next header (feedback 2026-10-18: the chip overhung the content edge
     and sat on the border below). */
  #active-filters { display:flex; align-items:flex-start; gap:8px; padding:10px 16px; border-bottom:1px solid var(--side-border) }
  #active-filters:has(#active-filters-chips:empty) { display:none }
  #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:var(--side-bg-3); color:var(--side-text); border:1px solid var(--side-border-2); border-radius:11px; font-size:var(--fs-xs); line-height:1.3 }
  .filter-chip.region-chip { border-color:var(--c-accent); box-shadow:inset 0 0 0 1px var(--c-accent); font-weight:600 }
  .filter-chip button { background:none; border:none; color:var(--side-text-3); cursor:pointer; padding:0 4px; font-size:14px; line-height:1; border-radius:50% }
  .filter-chip button:hover { color:var(--side-text); background:var(--side-bg-4) }
  /* The "main grape only" scope, rendered as a chip-shaped checkbox right
     after the grape chips it refines. */
  .filter-chip.toggle-chip { padding:2px 9px 2px 6px; cursor:pointer; border-color:var(--c-accent); gap:5px }
  .filter-chip.toggle-chip:hover { background:var(--side-chip-on) }
  .filter-chip.toggle-chip input { accent-color:var(--c-accent); margin:0; width:12px; height:12px }
  .filter-chip.toggle-chip:has(input:checked) { background:var(--side-chip-on); color:var(--side-text) }
  #active-filters #reset { background:transparent; color:var(--side-text-3); border:none; padding:3px 0 3px 6px; cursor:pointer; font-size:var(--fs-xs); text-decoration:underline; flex:0 0 auto; line-height:1.3 }
  #active-filters #reset:hover { color:var(--side-text) }
  #active-filters-chips:empty + #reset { display:none }
  #sidebar > details > summary .facet-badge { display:inline-block; margin-left:6px; padding:1px 6px; background:var(--c-accent); color:var(--n-0); border-radius:8px; font-size:var(--fs-2xs); 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, .facet .country-group-wrap { display:flex; align-items:flex-start; gap:6px; margin:2px 0 }
  .facet .region-group-wrap > .region-select, .facet .country-group-wrap > .country-select { accent-color:var(--c-accent); cursor:pointer; flex:0 0 auto; margin-top:6px }
  .facet .region-group-wrap > .region-select:checked, .facet .region-group-wrap > .region-select:indeterminate,
  .facet .country-group-wrap > .country-select:checked, .facet .country-group-wrap > .country-select:indeterminate { accent-color:var(--c-accent) }
  .facet .region-group-wrap > .region-group, .facet .country-group-wrap > .country-group { flex:1 1 auto; min-width:0 }
  .facet .region-group > summary, .facet .country-group > summary { display:flex; align-items:center; gap:6px }
  #status { padding:6px 16px 8px; font-size:var(--fs-xs); color:var(--side-text-3); border-bottom:1px solid var(--side-border) }
  #status .hint-action { background:none; border:0; padding:0; margin-left:6px; color:var(--side-link); font:inherit; cursor:pointer; text-decoration:underline }
  #status .hint-action:hover { filter:brightness(0.85) }
  details { margin:0 }
  summary { cursor:pointer; padding:8px 16px; color:var(--side-text-2); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:0.06em; user-select:none; border-top:1px solid var(--side-border) }
  summary:hover { color:var(--side-text) }
  summary::-webkit-details-marker { color:var(--side-text-3) }
  .facet { max-height:240px; overflow-y:auto; padding:0 16px 8px }
  /* The appellation tree takes every pixel the sidebar has left and scrolls
     inside it; the footer sits at the bottom whatever the list's length
     (feedback 2026-10-18: it floated mid-sidebar after a 340 px list).
     The other facets keep their 240 px box. */
  /* The <details> itself is the scroll box (its content sits in a shadow
     slot, out of reach of flex), its summary sticky at the top. */
  #sidebar > details[data-facet="appellations"] { min-height:0 }
  #sidebar > details[data-facet="appellations"][open] { flex:1 1 auto; min-height:190px; overflow-y:auto }
  #sidebar > details[data-facet="appellations"] > summary { position:sticky; top:0; background:var(--side-bg); z-index:1 }
  .facet.facet-appellations { max-height:none; overflow:visible }
  .facet label { display:flex; align-items:center; gap:6px; padding:2px 0; cursor:pointer; font-size:var(--fs-sm); color:var(--side-text) }
  .facet input[type=checkbox] { accent-color:var(--c-accent); flex:0 0 auto }
  .facet .name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  /* An appellation name wraps rather than truncates (feedback 2026-10-18:
     fifteen Aloxe-Corton rows read the same after the ellipsis). The name
     opens its detail panel (the checkbox is the filter) — underline on
     name-hover signals the "go to this one" link affordance. */
  .facet .aoc-row .name { white-space:normal; overflow:visible; text-overflow:clip; line-height:1.3 }
  .facet .aoc-row .name:hover { text-decoration:underline; text-decoration-color:var(--c-accent); text-underline-offset:2px }
  /* A row is a flex line: the checkbox's label (name + count) and, beside it,
     a sibling button — the → that opens the panel, or a tree chevron. */
  .facet .aoc-row, .facet .tree-row { display:flex; align-items:center; gap:6px; padding:2px 0; color:var(--side-text) }
  .facet .aoc-row > label, .facet .tree-row > label { flex:1 1 auto; min-width:0; padding:0; color:inherit; font-weight:inherit }
  .facet .count { color:var(--side-text-3); font-size:var(--fs-xs); margin-left:4px }
  .facet .count .sub-count { margin-left:3px }
  .facet .syns { color:var(--side-text-3); font-size:var(--fs-xs); 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:var(--side-text-3); 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 .aoc-row:hover .open-aoc { opacity:1; color:var(--side-accent-ink) }
  .facet .open-aoc:hover { color:var(--side-text); background:var(--side-bg-3) }
  .facet .open-aoc:focus-visible { opacity:1 }
  .facet .aoc-row.facet-unavailable, .facet .tree-row.facet-unavailable { display:none }
  .facet .region-group-wrap.facet-unavailable, .facet .country-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, .facet .tree-row[data-depth="0"] { font-weight:600; color:var(--side-text) }
  /* The chevron folding a subtree: rotates when open; the subtree is the
     hidden sibling wrapper after the row. */
  .facet .tree-toggle, .facet .tree-toggle-spacer { flex:0 0 28px; width:28px; height:24px }
  .facet .tree-toggle { display:inline-flex; align-items:center; justify-content:center; background:none; border:none; color:var(--side-text-3); cursor:pointer; font-size:15px; line-height:1; padding:0; border-radius:3px; transition:transform 0.12s ease, color 0.12s ease }
  .facet .tree-toggle:hover { color:var(--side-text); background:var(--side-bg-3) }
  .facet .tree-toggle[aria-expanded="true"] { transform:rotate(90deg) }
  /* Every row is the chevron's height, with or without one — the country
     rows' rhythm (≈ 28 px), so the three trees and the appellation list read
     as one list. */
  .facet .tree-row { min-height:24px }
  .facet .tree-children[hidden] { display:none }
  .facet .tree-row[data-depth="2"] .name { color:var(--side-text-2) }
  /* Sub-denominations sit under their appellation behind a chevron, the
     parent's name stripped from theirs (childLabel in app.js). The chevron
     slot is narrower here: two tree levels already indent the row. */
  .facet-appellations .tree-toggle, .facet-appellations .tree-toggle-spacer { flex-basis:18px; width:18px }
  .facet-appellations .tree-toggle { font-size:14px }
  .facet .aoc-row[data-depth="1"] { padding-left:18px }
  .facet .aoc-row[data-depth="1"] .name { color:var(--side-text-2) }
  /* Mixed case here too. The FR bassin labels are the join key's own
     ALL-CAPS form only until the catalog translates them — every locale
     including fr now carries the proper name, so the transform that used
     to hide that inconsistency is gone. */
  .facet .region-group > summary { padding:4px 0; border-top:none; font-size:var(--fs-xs); color:var(--side-text-2); text-transform:none; letter-spacing:0.01em; display:flex; align-items:center; gap:6px }
  .facet .region-group > summary:hover { color:var(--side-text) }
  .facet .region-group > summary .name { flex:1 }
  .facet .region-group > summary .count { color:var(--side-text-3) }
  .facet .region-group .region-items { padding-left:8px }
  /* Country level sits above the regions: brighter and heavier, with the
     flag as the scanning anchor. Regions keep their dimmer, smaller row. */
  .facet .country-group > summary { padding:5px 0; border-top:none; font-size:var(--fs-sm); font-weight:600; color:var(--side-text); text-transform:none; letter-spacing:0.01em }
  .facet .country-group > summary:hover { color:var(--side-accent-ink) }
  .facet .country-group > summary .name { flex:1 }
  .facet .country-group > summary .country-flag { flex:0 0 auto; font-size:var(--fs-sm); line-height:1; letter-spacing:normal }
  .facet .country-group > summary .count { color:var(--side-text-3); font-weight:400 }
  /* Two levels of indent cost the appellation name ~10px of width, so each
     step is 8px rather than 10 — the disclosure marker and the summary's
     weight carry most of the hierarchy anyway. */
  .facet .country-group .country-items { padding-left:8px }
  .facet .empty { color:var(--side-text-3); font-size:var(--fs-xs); font-style:italic; padding:4px 0 }
  #map { flex:1; height:100%; min-width:0 }
  #panel { width:0; flex:0 0 0; background:var(--n-0); border-left:1px solid var(--n-200); 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:var(--n-100); border:none; border-radius:50%; width:28px; height:28px; cursor:pointer; font-size:16px; color:var(--n-500); z-index:2 }
  #panel .close:hover { background:var(--n-200); color:#000 }
  #panel .body { padding:16px 24px 40px; line-height:1.55; color:var(--n-850) }
  #panel .body h1 { font-size:22px; margin:8px 0 10px; padding-bottom:6px; border-bottom:2px solid var(--c-accent) }
  #panel .body h2 { font-size:var(--fs-md); text-transform:uppercase; letter-spacing:0.04em; color:var(--c-accent); margin:18px 0 6px }
  #panel .body p { margin:0 0 8px }
  #panel .meta { color:var(--n-500); font-size:var(--fs-sm); margin-bottom:8px }
  #panel .meta .gi-scheme { white-space:nowrap }
  .gi-term.has-info, .gi-scheme.has-info { cursor:help; text-decoration:underline dotted; text-underline-offset:2px }
  .gi-term abbr, .gi-scheme abbr { text-decoration:inherit }
  #panel .meta .meta-country { display:inline-flex; align-items:center; gap:5px; color:var(--n-700) }
  #panel .meta .country-flag { font-size:var(--fs-md); line-height:1 }
  #panel .meta .country-name { font-weight:600 }
  #panel .translation-attr { font-size:var(--fs-xs); color:var(--n-500); font-style:italic; margin:0 0 8px }
  #panel .translation-attr a { color:var(--n-400) }
  #panel .stack-header { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:0.06em; color:var(--n-500); margin-bottom:6px; padding-bottom:6px; border-bottom:1px solid var(--n-100); display:flex; align-items:center; gap:6px }
  #panel .stack-pos { font-size:var(--fs-2xs); 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, #panel .facts-inherited { font-size:var(--fs-xs); color:var(--note-ink); background:var(--note-bg); border-left:2px solid var(--note-rule); padding:4px 8px; margin:4px 0 8px; border-radius:2px }
  #panel .approx-line a.parent-link, #panel .facts-inherited a.parent-link { color:var(--note-ink); text-decoration:underline }
  #panel .role-disclaimer { font-size:var(--fs-xs); color:var(--n-400); font-style:italic; margin:2px 0 8px; line-height:1.35 }
  .cancelled-badge { display:inline-block; font-size:var(--fs-2xs); font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:#8a2323; background:#fbe6e6; border:1px solid #e0a3a3; border-radius:3px; padding:0 5px; margin-left:6px; vertical-align:middle; line-height:16px }
  .cancelled-badge.sm { font-size:var(--fs-2xs); line-height:14px; padding:0 4px; margin-left:4px }
  #panel .cancelled-line { font-size:var(--fs-xs); color:#8a2323; background:#fbe6e6; border-left:2px solid #c85a5a; padding:6px 9px; margin:6px 0 8px; border-radius:2px; line-height:1.45 }
  #panel .cancelled-line a { color:#8a2323; text-decoration:underline }
  .promoted-badge { display:inline-block; font-size:var(--fs-2xs); font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:#1f5e3a; background:#e3f3e8; border:1px solid #9cc9ab; border-radius:3px; padding:0 5px; margin-left:6px; vertical-align:middle; line-height:16px }
  .promoted-badge.sm { font-size:var(--fs-2xs); line-height:14px; padding:0 4px; margin-left:4px }
  #panel .promoted-line { font-size:var(--fs-xs); color:#1f5e3a; background:#e3f3e8; border-left:2px solid #4f9a6b; padding:6px 9px; margin:6px 0 8px; border-radius:2px; line-height:1.45 }
  #panel .promoted-line a { color:#1f5e3a; text-decoration:underline }
  #panel .appellation-note { font-size:var(--fs-xs); 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:var(--fs-xs); color:var(--n-700) }
  #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:var(--note-ink) }
  #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:var(--fs-xs); 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 var(--c-accent) }
  /* Stacked overlap: a subordinate card is a click target that brings its
     appellation to the front (see the panel click handler in app.js); the ↑
     button in its title is the keyboard path. */
  /* A stack: the focus card in full, the rest as rows (stackRows in app.js). */
  #panel .stack-hint { font-size:var(--fs-xs); color:var(--n-500); margin:0 0 10px }
  #panel .stack-others-h { margin-top:22px }
  #panel .stack-list { list-style:none; margin:0 0 12px; padding:0 }
  #panel .stack-row { display:flex; flex-direction:column; align-items:flex-start; gap:1px; width:100%; padding:7px 10px; margin:0 0 4px; background:none; border:1px solid var(--n-200); border-radius:6px; cursor:pointer; font:inherit; color:var(--n-850); text-align:left }
  #panel .stack-row:hover, #panel .stack-row:focus-visible { border-color:var(--c-accent); background:#fbf6f7 }
  #panel .stack-row .name { font-weight:600; font-size:var(--fs-md) }
  #panel .stack-row .sub { font-size:var(--fs-xs); color:var(--n-500) }
  /* The boundary notes, folded below the content; the sidebar's global
     uppercase `summary` rule is undone here. */
  #panel .boundary-notes { margin:12px 0 4px }
  #panel .boundary-notes > summary { cursor:pointer; padding:4px 8px; font-size:var(--fs-xs); color:var(--note-ink); background:var(--note-bg); border-left:2px solid var(--note-rule); border-top:none; border-radius:2px; text-transform:none; letter-spacing:0; user-select:auto }
  #panel .boundary-notes > summary:hover { color:var(--note-ink); filter:brightness(0.97) }
  #panel .boundary-notes > summary .sub { font-style:italic }
  #panel .boundary-notes[open] > summary { margin-bottom:4px }
  #panel .boundary-notes .approx-line { margin:4px 0 }
  /* Related appellations: a parent's sub-denominations and the scope links. */
  #panel .subappellations { margin:0 0 6px; padding-left:18px; font-size:var(--fs-md); line-height:1.5 }
  #panel .subappellations .sub-kind { color:var(--n-500); font-size:var(--fs-xs); margin-left:4px }
  #panel .subappellations-more > summary { cursor:pointer; padding:2px 0; font-size:var(--fs-sm); color:var(--c-accent); text-transform:none; letter-spacing:0; border-top:none }
  #panel .related-links { font-size:var(--fs-sm); margin:10px 0 0 }
  /* First-open skeleton: real title shows from startup data; the body shimmers
     until the lazy panel-detail JSON lands (Phase 3 data-bundle diet). */
  #panel .aoc-skeleton .skel { display:block; border-radius:4px; height:13px; margin:9px 0;
    background:linear-gradient(90deg,#ececec 25%,#f6f6f6 37%,#ececec 63%);
    background-size:400% 100%; animation:skel-shimmer 1.3s ease infinite }
  #panel .aoc-skeleton .skel-meta { width:55%; height:11px; margin:6px 0 0 }
  #panel .aoc-skeleton .skel-h { width:34%; height:11px; margin:20px 0 10px }
  #panel .aoc-skeleton .skel-line.short { width:68% }
  @keyframes skel-shimmer { 0% { background-position:100% 0 } 100% { background-position:0 0 } }
  @media (prefers-reduced-motion: reduce) { #panel .aoc-skeleton .skel { animation:none } }
  #panel .sources { margin:4px 0 0; padding-left:18px; font-size:var(--fs-sm); color:#3a3a3a }
  #panel .sources li { margin:3px 0 }
  #panel .sources code { font-size:var(--fs-xs); color:var(--n-400) }
  #panel .card-feedback { margin:18px 0 2px; padding-top:12px; border-top:1px solid #e3ddd4; font-size:var(--fs-md); line-height:1.6; color:var(--n-850) }
  #panel .card-feedback h2 { margin:0 0 4px }
  #panel .card-feedback .fb-prompt { display:block; margin:0 0 6px; font-size:var(--fs-sm); color:var(--n-600) }
  #panel .fb-chip { display:inline-block; padding:3px 11px; margin:2px 6px 4px 0; border:1px solid #c9bfb2; border-radius:12px; background:var(--n-0); color:var(--n-750); font:inherit; font-size:var(--fs-sm); line-height:1.5; cursor:pointer }
  #panel .fb-chip:hover { background:#f0ebe3; color:var(--n-850) }
  #panel .fb-chip:focus-visible { outline:2px solid var(--c-accent); outline-offset:1px }
  #panel .fb-chip[aria-pressed="true"] { background:var(--c-accent); border-color:var(--c-accent); color:var(--n-0) }
  #panel .fb-more { margin-top:6px }
  #panel .fb-more textarea { display:block; width:100%; box-sizing:border-box; min-height:54px; margin:5px 0; padding:6px 8px; border:1px solid #d9d3ca; border-radius:4px; background:var(--n-0); color:var(--n-850); font:inherit; font-size:var(--fs-sm); line-height:1.4; resize:vertical }
  #panel .fb-more textarea:focus-visible { outline:2px solid var(--c-accent); outline-offset:0 }
  #panel .fb-send { padding:3px 12px; border:1px solid var(--c-accent); border-radius:4px; background:var(--c-accent); color:var(--n-0); font:inherit; font-size:var(--fs-xs); cursor:pointer }
  #panel .fb-send:hover { background:var(--c-accent-hover) }
  #panel .fb-send:disabled { opacity:.5; cursor:default }
  #panel .fb-status { color:#5a6b3a; font-weight:600 }
  #panel .fb-more .fb-aspect { color:var(--c-accent); font-weight:600 }
  #panel .fb-more a { color:var(--c-accent); text-decoration:underline; text-underline-offset:2px }
  #panel .facts-sub-h { font-size:var(--fs-xs); font-weight:600; color:var(--n-600); margin:8px 0 2px; text-transform:none; letter-spacing:0 }
  #panel ul.facts { margin:0 0 6px; padding-left:18px; font-size:var(--fs-md); color:var(--n-850) }
  #panel ul.facts li { margin:2px 0 }
  #panel ul.facts .wiki-attr { font-size:var(--fs-xs); color:var(--n-500); font-style:italic }
  #panel ul.facts .wiki-attr a { color:var(--n-400) }
  #panel blockquote.facts-verbatim { margin:4px 0 6px; padding:6px 10px; border-left:3px solid var(--n-200); background:#f9f7f4; font-size:var(--fs-md); color:var(--n-750); 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:var(--fs-2xs); 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:var(--n-100); border-radius:10px; font-size:var(--fs-xs); color:var(--n-750); text-decoration:none }
  .pill.style { background:#fdebe5; color:var(--c-accent) }
  .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:var(--n-500) }
  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 { color:#4a5668; font-weight:normal; font-size:0.9em }
  .pill.grape.accessory .canon, .pill.grape.observation .canon { color:inherit }
  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:var(--fs-2xs); color:#999; font-style:italic; vertical-align:baseline }
  #grape-tooltip .fr-marker { font-size:var(--fs-2xs); color:var(--n-400) }
  /* Tablet (769–1024px): the open panel overlays the map's right edge instead
     of pushing it — 300 + 440 px of chrome left an iPad an 80 px map. */
  @media (min-width: 769px) and (max-width: 1024px) {
    #app { position:relative }
    #panel { position:absolute; top:0; right:0; bottom:0; width:0; flex:0 0 0; z-index:20; box-shadow:-4px 0 16px rgba(0,0,0,0.18) }
    #panel.open { width:min(420px, 55vw); flex-basis:0 }
  }
  @media (max-width: 768px) {
    #app { flex-direction:column }
    /* The bar carries the brand; the drawer's own brand block (the page's
       <h1> on the home and fold pages) stays in the DOM for assistive tech
       and crawlers, out of sight — it would repeat the bar 50px below it. */
    #sidebar .brand-title, #sidebar .subtitle { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
    .sidebar-head { padding:0 }
    #sidebar-collapse { display:none }
    /* The bar: brand, ⚙, search — so the first screen is not a bare map. */
    #mobile-bar { display:flex; align-items:center; gap:4px; flex:0 0 auto; min-height:44px; padding:env(safe-area-inset-top, 0px) 6px 0 12px; background:var(--side-bg); color:var(--side-text); border-bottom:1px solid var(--side-border); z-index:30 }
    #mobile-bar .mobile-brand { flex:1; display:flex; align-items:center; gap:8px; min-width:0; color:var(--side-text); text-decoration:none; font-weight:600; font-size:15px; letter-spacing:0.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
    #mobile-bar .brand-mark { width:18px; height:18px; flex:0 0 18px }
    /* Direct children only: the ⚙ menu homed into the bar carries its own buttons. */
    #mobile-bar > button { flex:0 0 44px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:none; color:var(--side-text); border:none; border-radius:4px; font-size:18px; cursor:pointer }
    #mobile-bar > button:hover, #mobile-bar > button[aria-expanded="true"] { background:var(--side-bg-3) }
    /* The drawer is search-first, so its button is a magnifier (feedback 2026-10-21: a ☰
       said "menu"); while the drawer is open the button reads ×, since it is what closes it. */
    #sidebar-toggle svg { width:20px; height:20px }
    #sidebar-toggle .ico-close { display:none; font-size:24px; line-height:1 }
    #sidebar-toggle[aria-expanded="true"] svg { display:none }
    #sidebar-toggle[aria-expanded="true"] .ico-close { display:inline }
    /* The drawer opens under the bar, which stays usable (its search button closes it). */
    #sidebar { position:fixed; top:calc(44px + env(safe-area-inset-top, 0px)); left:0; width:280px; height:calc(100vh - 44px); height:calc(100dvh - 44px - env(safe-area-inset-top, 0px)); padding-bottom:env(safe-area-inset-bottom, 0px); box-sizing:border-box; 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) }
    #scrim { display:block; position:fixed; inset:0; top:calc(44px + env(safe-area-inset-top, 0px)); background:rgba(0,0,0,0.4); z-index:24 }
    #scrim[hidden] { display:none }
    #map { flex:1; height:auto; min-height:0; min-width:0 }
    /* The sheet: 45 % peek, 92 % expanded, above the home indicator. */
    #panel { position:fixed; bottom:0; left:0; right:0; width:auto; height:0; flex:none; max-height:92vh; max-height:92dvh; transition:height 0.18s ease; border-left:none; border-top:1px solid var(--n-200); border-radius:12px 12px 0 0; box-shadow:0 -4px 16px rgba(0,0,0,0.15); z-index:20 }
    #panel.open { width:auto; height:45vh; height:45dvh; flex-basis:auto }
    #panel.open.expanded { height:92vh; height:92dvh }
    #panel .sheet-handle { display:flex; position:sticky; top:0; width:100%; height:28px; align-items:center; justify-content:center; background:var(--n-0); border:none; border-radius:12px 12px 0 0; cursor:pointer; z-index:3 }
    #panel .sheet-handle .grip { width:40px; height:4px; border-radius:2px; background:var(--n-300) }
    #panel .sheet-handle:focus-visible .grip { background:var(--c-accent) }
    #panel .body { padding-bottom:calc(40px + env(safe-area-inset-bottom, 0px)) }
    #panel .close { width:44px; height:44px; font-size:20px; top:28px }
    /* The legend and the scale rise above the peeked sheet, and leave while it is expanded. */
    #app:has(#panel.open) .maplibregl-ctrl-bottom-left { bottom:45vh; bottom:45dvh }
    #app:has(#panel.open.expanded) .maplibregl-ctrl-bottom-left { display:none }
    #panel .stack-row { min-height:44px }
    .facet input[type=checkbox] { width:18px; height:18px }
    .facet .open-aoc { opacity:1; padding:6px 10px; font-size:18px }
    /* The drawer is the one scroll surface: no facet scrolls inside a box of its own. */
    .facet, .facet.facet-appellations { max-height:none }
    #sidebar > details[data-facet="appellations"][open] { flex:0 0 auto; min-height:0; overflow:visible }
    /* The same rhythm as the country rows below; the chevron keeps a
       36 × 24 px target, the WCAG AA minimum. */
    .facet .tree-toggle, .facet .tree-toggle-spacer { flex-basis:36px; width:36px }
    .facet .tree-toggle { font-size:16px }
    .facet-appellations .tree-toggle, .facet-appellations .tree-toggle-spacer { flex-basis:26px; width:26px }
    .owm-legend .scope-hint { width:24px; height:24px; font-size:12px }
    /* Pinch zooms on a phone; the buttons would only crowd the corner. */
    .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group { display:none }
    /* Chips at the drawer's text size, the × a 24 px target. */
    .filter-chip { font-size:var(--fs-sm); padding:4px 6px 4px 10px }
    .filter-chip button { font-size:18px; padding:0 6px; min-width:24px; min-height:24px }
    #active-filters #reset { font-size:var(--fs-sm); padding-top:6px }
    /* 16px avoids iOS Safari auto-zoom on focus (lab omnisearch box). */
    .omni-input { font-size:16px }
  }
  #sidebar-footer { flex:0 0 auto; margin-top:auto; padding:12px 16px 16px; border-top:1px solid var(--side-border); font-size:var(--fs-xs); color:var(--side-text-3); text-align:center }
  #sidebar-footer a { color:var(--side-text-3); text-decoration:none }
  #sidebar-footer a:hover { color:var(--side-text); text-decoration:underline }
  #sidebar-footer .sep { margin:0 6px; color:var(--side-border-2) }
  #sidebar-credit { margin:10px 0 0; font-size:var(--fs-xs); color:var(--side-text-2) }
  #sidebar-credit .heart { color:var(--side-accent-ink) }
  #sidebar-footer #sidebar-credit a { color:var(--side-accent-ink); font-weight:600 }
  #sidebar-footer #sidebar-credit a:hover { text-decoration:underline }
  #sidebar-disclaimer { padding:0 4px 10px; margin-bottom:10px; border-bottom:1px solid var(--side-border); font-size:var(--fs-xs); line-height:1.5; color:var(--side-text-3) }
  #sidebar-disclaimer a { color:var(--side-text-2); text-decoration:underline; text-underline-offset:2px }
  #sidebar-disclaimer a:hover { color:var(--side-text) }
  .feedback-copied { display:inline-block; margin-left:6px; padding:2px 6px; border-radius:3px; background:var(--c-accent); color:var(--n-0); font-size:var(--fs-2xs); 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, #share-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:var(--n-0); color:var(--n-850) }
  #about-dialog::backdrop, #share-dialog::backdrop { background:rgba(0,0,0,0.45) }
  #about-dialog .copy-field, #share-dialog .copy-field { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; margin:2px 0 }
  #about-dialog .copy-field code, #share-dialog .copy-field code { user-select:all; background:#f3f3f3; border:1px solid var(--n-200); border-radius:4px; padding:2px 6px; font-size:var(--fs-sm); word-break:break-all }
  #about-dialog .copy-btn, #share-dialog .copy-btn { font:inherit; font-size:var(--fs-sm); padding:2px 10px; border:1px solid var(--n-300); border-radius:4px; background:var(--n-0); color:var(--n-850); cursor:pointer }
  #about-dialog .copy-btn:hover, #share-dialog .copy-btn:hover { background:#f3f3f3 }
  #about-dialog .copy-btn.copied, #share-dialog .copy-btn.copied { border-color:#2e7d32; color:#2e7d32 }
  html.theme-dark #about-dialog .copy-field code, html.theme-dark #share-dialog .copy-field code { background:var(--n-800); border-color:var(--n-700); color:var(--n-100) }
  html.theme-dark #about-dialog .copy-btn, html.theme-dark #share-dialog .copy-btn { background:var(--n-800); border-color:var(--n-600); color:var(--n-100) }
  html.theme-dark #about-dialog .copy-btn.copied, html.theme-dark #share-dialog .copy-btn.copied { border-color:#66bb6a; color:#66bb6a }
  #about-dialog .close, #share-dialog .close { position:absolute; top:10px; right:10px; background:var(--n-100); border:none; border-radius:50%; width:28px; height:28px; cursor:pointer; font-size:16px; color:var(--n-500) }
  #about-dialog .close:hover, #share-dialog .close:hover { background:var(--n-200); color:#000 }
  #about-dialog .about-body, #share-dialog .about-body { padding:24px 28px; line-height:1.55 }
  #about-dialog h2, #share-dialog h2 { font-size:20px; margin:0 0 14px; padding:0 32px 8px 0; border-bottom:2px solid var(--c-accent) }
  #about-dialog h3, #share-dialog h3 { font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:0.05em; color:var(--c-accent); margin:20px 0 6px }
  #about-dialog p, #share-dialog p { margin:0 0 10px }
  #about-dialog ul { margin:0 0 10px; padding-left:18px }
  #about-dialog li { margin:0 0 4px }
  #about-dialog .about-meta { font-size:var(--fs-md); color:var(--n-500) }
  #about-dialog .data-updated { white-space:nowrap }
  #about-dialog .about-credit { margin:20px 0 0; padding-top:10px; border-top:1px solid var(--n-100); font-size:var(--fs-md); color:var(--n-500) }
  #about-dialog .about-credit .heart { color:var(--c-accent) }
  #about-dialog a { color:var(--c-accent) }
  #about-dialog a.bsky { white-space:nowrap }
  #about-dialog .bsky-logo { width:1.05em; height:1.05em; vertical-align:-0.16em; margin-right:0.3em; fill:#1185fe }
  #grape-tooltip { position:fixed; max-width:340px; background:var(--n-0); color:var(--n-850); border:1px solid var(--n-200); border-radius:4px; padding:10px 12px; font-size:var(--fs-sm); 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:var(--n-600) }
  #grape-tooltip .thumb { float:right; width:96px; height:auto; margin:0 0 6px 10px; border-radius:3px; background:#f3f3f3 }
  #grape-tooltip .src { color:var(--n-400); font-size:var(--fs-2xs); clear:both }
  #grape-tooltip .src a { color:var(--n-400) }
  #panel .body a { color:var(--c-accent) }
  .maplibregl-popup { max-width:320px !important }
  .maplibregl-popup-content { font-size:var(--fs-md); padding:10px 12px !important }
  .maplibregl-popup-content h3 { margin:0 0 4px; font-size:14px; color:var(--c-accent) }
  .maplibregl-popup-content .meta { color:#777; font-size:var(--fs-xs) }
  /* 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 button:focus-visible,
  #sidebar-toggle:focus-visible { outline:2px solid var(--side-focus); 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 var(--c-accent); outline-offset:2px; border-radius:3px }
  .maplibregl-popup-content a:focus-visible { outline:2px solid var(--c-accent); outline-offset:2px }
  /* The share dialog (app.js openShare): the link, the OS share sheet where
     the browser has one, the embed code in a textarea. */
  #share-dialog .share-what { font-weight:600; margin:0 0 6px }
  #share-dialog .copy-field { display:flex; align-items:center; gap:6px; flex-wrap:wrap }
  #share-dialog .copy-field code { flex:1 1 220px; min-width:0 }
  #share-dialog .copy-field.embed-field { align-items:flex-start }
  #share-dialog textarea { flex:1 1 220px; min-width:0; box-sizing:border-box; min-height:112px; padding:8px; border:1px solid var(--n-200); border-radius:4px; background:#f3f3f3; color:var(--n-850); font:12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize:vertical }
  html.theme-dark #share-dialog textarea { background:var(--n-800); border-color:var(--n-700); color:var(--n-100) }
  #share-dialog button:focus-visible, #share-dialog a:focus-visible, #share-dialog textarea:focus-visible { outline:2px solid var(--c-accent); outline-offset:2px; border-radius:3px }
  #share-dialog .share-theme { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 8px; font-size:var(--fs-sm) }
  #share-dialog .share-theme label { display:inline-flex; align-items:center; gap:5px; cursor:pointer }
  #share-dialog .share-theme input { margin:0; accent-color:var(--c-accent) }
  #share-dialog .share-params { margin-top:14px; font-size:var(--fs-sm) }
  #share-dialog .share-params summary { cursor:pointer; color:var(--n-500); display:flex; align-items:center; gap:8px; list-style:none }
  #share-dialog .share-params summary::-webkit-details-marker { display:none }
  #share-dialog .share-params summary:hover, #share-dialog .share-params[open] summary { color:var(--n-850) }
  #share-dialog .share-params .info-i { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border:1px solid currentColor; border-radius:50%; font:italic 600 11px/1 Georgia, "Times New Roman", serif; flex:0 0 18px }
  #share-dialog .share-params p { margin:8px 0 6px; color:var(--n-500) }
  /* One parameter per row: code left, meaning right, a hairline and zebra
     striping per row so a pair reads as one wherever the eye lands
     (feedback 2026-10-22: stacked pairs with even gaps gave no ownership). */
  #share-dialog .share-params dl { margin:0; display:grid; grid-template-columns:fit-content(45%) 1fr; border:1px solid var(--n-200); border-radius:4px; overflow:hidden }
  #share-dialog .share-params dt, #share-dialog .share-params dd { margin:0; padding:5px 10px; border-top:1px solid var(--n-200) }
  #share-dialog .share-params dt:first-of-type, #share-dialog .share-params dd:first-of-type { border-top:0 }
  #share-dialog .share-params dt:nth-of-type(even), #share-dialog .share-params dd:nth-of-type(even) { background:#f7f7f7 }
  #share-dialog .share-params dt code { font-size:var(--fs-xs); word-break:break-all; color:var(--n-850) }
  #share-dialog .share-params dd { color:var(--n-700) }
  html.theme-dark #share-dialog .share-params dl, html.theme-dark #share-dialog .share-params dt, html.theme-dark #share-dialog .share-params dd { border-color:var(--n-700) }
  html.theme-dark #share-dialog .share-params dt:nth-of-type(even), html.theme-dark #share-dialog .share-params dd:nth-of-type(even) { background:var(--n-800) }
  html.theme-dark #share-dialog .share-params dt code { color:var(--n-100) }
  html.theme-dark #share-dialog .share-params dd { color:var(--n-300) }
  /* The share control (top-right, above the ⚙; in the bar on a phone). */
  .owm-share .owm-share-btn { width:36px !important; height:36px !important; display:flex; align-items:center; justify-content:center; color:var(--n-850) }
  .owm-share .owm-share-btn svg, #mobile-bar .owm-share-btn svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
  @media (max-width: 768px) {
    .maplibregl-ctrl-top-right .owm-share { display:none }
  }
  /* An embedded map (?embed=1): the map alone. The chrome never paints
     (html.embed is set pre-paint); a brand badge top-left links to the same
     view on the site; a click opens a popup whose rows open the appellation
     there (app.js showEmbedPopup). */
  html.embed #sidebar, html.embed #sidebar-rail, html.embed #mobile-bar, html.embed #scrim, html.embed #panel, html.embed .skip-link, html.embed #about-dialog, html.embed #share-dialog { display:none !important }
  .owm-brand a { display:inline-flex; align-items:center; gap:6px; padding:5px 10px 5px 8px; border-radius:18px; background:rgba(255,255,255,0.94); color:var(--n-850); font-weight:600; font-size:var(--fs-sm); letter-spacing:0.02em; text-decoration:none; box-shadow:0 0 0 2px rgba(0,0,0,0.1); pointer-events:auto }
  .owm-brand a:hover, .owm-brand a:focus-visible { background:#fff; text-decoration:underline }
  .owm-brand img { width:16px; height:16px }
  .owm-brand .arrow { font-size:var(--fs-xs); opacity:0.7 }
  html.theme-dark .owm-brand a { background:var(--n-dark-panel); color:var(--n-dark-text) }
  .owm-embed-pop .maplibregl-popup-content { padding:8px 10px !important; border-radius:6px }
  .owm-embed-pop .rows { display:flex; flex-direction:column; gap:7px; padding-right:12px }
  .owm-embed-pop a { display:block; color:var(--c-accent); text-decoration:none }
  .owm-embed-pop a .n { display:block; font-weight:600; font-size:var(--fs-sm) }
  .owm-embed-pop a .m { display:block; font-size:var(--fs-xs); color:var(--n-500) }
  .owm-embed-pop a:hover .n, .owm-embed-pop a:focus-visible .n { text-decoration:underline }
  .owm-embed-pop .more { font-size:var(--fs-xs); color:var(--n-500) }
  html.theme-dark .owm-embed-pop a .m, html.theme-dark .owm-embed-pop .more { color:var(--n-300) }
  /* Map chrome (app.js): the hover label that follows the cursor, the legend
     chip above the scale, and MapLibre's controls in both themes. Bottom-corner
     controls stack (later ones above): zoom above the attribution, the legend
     above the scale. */
  .maplibregl-ctrl-bottom-left .maplibregl-ctrl, .maplibregl-ctrl-bottom-right .maplibregl-ctrl { clear:both }
  .owm-hover { pointer-events:none }
  .owm-hover .maplibregl-popup-content { padding:4px 9px !important; font-size:var(--fs-sm); font-weight:600; color:var(--n-850); background:rgba(255,255,255,0.95); box-shadow:0 1px 4px rgba(0,0,0,0.3); border-radius:4px; white-space:nowrap }
  .owm-hover .maplibregl-popup-tip { display:none }
  /* The legend is the scope control (feedback 2026-10-18: the mockups put
     the PDO / PGI toggles on the map as pills, each with its ⓘ): one pill
     per fill colour, filled while that scheme is drawn, outlined while it
     is hidden. The spirits pill takes dark ink — white fails AA on #a07530. */
  .owm-legend { display:flex; gap:6px; align-items:center; padding:4px; background:rgba(255,255,255,0.92); border-radius:20px; box-shadow:0 0 0 2px rgba(0,0,0,0.1); font-size:var(--fs-xs); color:var(--n-850); pointer-events:auto }
  .owm-legend .legend-pill { --pill-c:var(--c-accent); --pill-ink:var(--n-0); display:inline-flex; align-items:center; border-radius:14px; border:1px solid var(--pill-c); background:var(--n-0); color:var(--pill-c); padding:0 3px 0 0 }
  .owm-legend .legend-pill.igp { --pill-c:var(--c-pgi) }
  .owm-legend .legend-pill.spirit { --pill-c:var(--c-spirit); --pill-ink:#1f1f22; color:#7a5720 }
  .owm-legend .legend-pill.on { background:var(--pill-c); color:var(--pill-ink) }
  .owm-legend .legend-pill label { display:inline-flex; align-items:center; gap:6px; padding:4px 4px 4px 8px; cursor:pointer; font-weight:600; letter-spacing:0.02em }
  .owm-legend .legend-pill input { margin:0; width:14px; height:14px; accent-color:var(--pill-c); cursor:pointer }
  .owm-legend .legend-pill.on input { accent-color:var(--pill-ink) }
  .owm-legend .scope-hint { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; padding:0; border:1px solid currentColor; border-radius:50%; background:none; color:inherit; font:italic 600 11px/1 Georgia, "Times New Roman", serif; cursor:help; opacity:0.85 }
  .owm-legend .scope-hint:hover, .owm-legend .scope-hint:focus-visible { opacity:1; background:rgba(255,255,255,0.25) }
  /* The ⚙ control (top-right): language and theme in one popover. */
  .owm-settings { position:relative }
  .owm-settings .owm-settings-btn { width:36px !important; height:36px !important; display:flex; align-items:center; justify-content:center; color:var(--n-850) }
  .owm-settings .owm-settings-btn svg { width:20px; height:20px; fill:currentColor }
  #config-menu.placed { position:absolute; right:0; top:42px; min-width:220px; background:var(--side-bg); color:var(--side-text); border:1px solid var(--side-border-2); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,0.2); z-index:5 }
  #config-menu.placed[hidden] { display:none }
  /* On a phone the ⚙ sits in the bar (app.js homeSettings) and the map's
     control is empty; the menu drops from the bar's right end. */
  @media (max-width: 768px) {
    .maplibregl-ctrl-top-right .owm-settings { display:none }
    #mobile-bar .owm-settings-btn svg { width:20px; height:20px; fill:currentColor }
    #config-menu.in-bar { position:fixed; top:calc(44px + env(safe-area-inset-top, 0px)); right:6px; min-width:220px; background:var(--side-bg); color:var(--side-text); border:1px solid var(--side-border-2); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,0.2); z-index:5 }
    #config-menu.in-bar[hidden] { display:none }
    #theme-toggle .theme-btn { width:44px; height:36px }
    #theme-toggle .theme-btn svg { width:18px; height:18px }
    #lang-switcher a { padding:10px 10px; font-size:15px }
  }
  html.theme-dark .maplibregl-ctrl-attrib, html.theme-dark .maplibregl-ctrl-group { background:var(--n-dark-panel); color:var(--n-dark-text) }
  html.theme-dark .maplibregl-ctrl-attrib a { color:var(--n-dark-text) }
  html.theme-dark .maplibregl-ctrl-attrib-button, html.theme-dark .maplibregl-ctrl-group .maplibregl-ctrl-icon { filter:invert(1) }
  html.theme-dark .maplibregl-ctrl-group button + button { border-top-color:var(--n-700) }
  html.theme-dark .maplibregl-ctrl-scale { background:rgba(28,28,30,0.7); color:var(--n-dark-text); border-color:var(--n-dark-text) }
  html.theme-dark .owm-legend { background:rgba(28,28,30,0.92); color:var(--n-dark-text); box-shadow:0 0 0 2px rgba(255,255,255,0.12) }
  html.theme-dark .owm-legend .legend-pill { background:var(--n-dark-panel) }
  html.theme-dark .owm-legend .legend-pill:not(.on) { color:var(--n-dark-text) }
  html.theme-dark .owm-legend .legend-pill.on { background:var(--pill-c) }
  html.theme-dark .owm-settings .owm-settings-btn { color:var(--n-dark-text) }
  html.theme-dark .owm-share .owm-share-btn { color:var(--n-dark-text) }
  html.theme-dark .owm-hover .maplibregl-popup-content { background:rgba(28,28,30,0.95); color:var(--n-dark-text) }
  /* 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:var(--c-accent); color:var(--n-0);
               padding:8px 14px; border-radius:0 0 4px 4px; font-size:var(--fs-md); 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 follows
     the --side-* tokens above; 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:var(--n-dark-panel); border-left-color:var(--n-750) }
  html.theme-dark #panel .body { color:var(--n-dark-text) }
  html.theme-dark #panel .body h1, html.theme-dark #panel .body h2 { color:var(--c-accent-ink-dark); border-bottom-color:var(--c-accent-rule-dark) }
  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:var(--c-accent-ink-dark) }
  /* Focus ring must keep ≥3:1 against the dark surface (WCAG 1.4.11/2.4.11):
     the burgundy var(--c-accent) ring drops to ~2:1 on var(--n-dark-panel), 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, html.theme-dark #share-dialog button:focus-visible, html.theme-dark #share-dialog a:focus-visible, html.theme-dark #share-dialog textarea:focus-visible { outline-color:var(--c-accent-ink-dark) }
  html.theme-dark #panel .close, html.theme-dark #about-dialog .close, html.theme-dark #share-dialog .close { background:var(--n-750); color:var(--n-300) }
  html.theme-dark #panel .close:hover, html.theme-dark #about-dialog .close:hover, html.theme-dark #share-dialog .close:hover { background:var(--n-700); color:var(--n-0) }
  html.theme-dark #panel .meta { color:#9a9a9a }
  html.theme-dark #panel .meta .meta-country { color:#cfcfcf }
  html.theme-dark #panel .stack-header { color:var(--n-300); border-bottom-color:var(--n-750) }
  html.theme-dark #panel .aoc-card + .aoc-card { border-top-color:var(--n-700) }
  html.theme-dark #panel .sheet-handle { background:var(--n-dark-panel) }
  html.theme-dark #panel .sheet-handle .grip { background:var(--n-600) }
  html.theme-dark #panel .stack-row { border-color:var(--n-700); color:var(--n-dark-text) }
  html.theme-dark #panel .stack-row:hover, html.theme-dark #panel .stack-row:focus-visible { background:#2a2024; border-color:var(--c-accent-ink-dark) }
  html.theme-dark #panel .stack-row .sub, html.theme-dark #panel .stack-hint, html.theme-dark #panel .subappellations .sub-kind { color:var(--n-300) }
  html.theme-dark #panel .boundary-notes > summary { color:var(--note-ink-dark); background:var(--note-bg-dark); border-left-color:var(--note-rule-dark) }
  html.theme-dark #panel .boundary-notes > summary:hover { color:var(--note-ink-dark) }
  html.theme-dark #panel .subappellations-more > summary { color:var(--c-accent-ink-dark) }
  html.theme-dark #panel .stack-focus:hover { background:var(--c-accent-ink-dark); border-color:var(--c-accent-ink-dark); color:var(--n-dark-panel) }
  html.theme-dark #panel .aoc-skeleton .skel { background:linear-gradient(90deg,#2b2b2b 25%,#363636 37%,#2b2b2b 63%); background-size:400% 100% }
  html.theme-dark #panel .sources, html.theme-dark #panel .facts-sub-h { color:var(--n-300) }
  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:var(--n-600) }
  html.theme-dark #panel .approx-line, html.theme-dark #panel .facts-inherited { background:var(--note-bg-dark); color:var(--note-ink-dark); border-left-color:var(--note-rule-dark) }
  html.theme-dark #panel .approx-line a.parent-link, html.theme-dark #panel .facts-inherited a.parent-link { color:var(--note-ink-dark) }
  html.theme-dark .cancelled-badge { color:#f0a8a8; background:#3a1d1d; border-color:#7a3a3a }
  html.theme-dark #panel .cancelled-line { background:#3a1d1d; color:#f0b4b4; border-left-color:#8a4444 }
  html.theme-dark #panel .cancelled-line a { color:#f0b4b4 }
  html.theme-dark .promoted-badge { color:#a8e0bb; background:#1b3324; border-color:#3f7a54 }
  html.theme-dark #panel .promoted-line { background:#1b3324; color:#b6e3c5; border-left-color:#3f7a54 }
  html.theme-dark #panel .promoted-line a { color:#b6e3c5 }
  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:var(--n-750) }
  html.theme-dark #about-dialog, html.theme-dark #share-dialog { background:var(--n-dark-panel); color:var(--n-dark-text); border-color:var(--n-700) }
  html.theme-dark #about-dialog h2, html.theme-dark #about-dialog h3, html.theme-dark #share-dialog h2, html.theme-dark #share-dialog h3 { color:var(--c-accent-ink-dark); border-bottom-color:var(--c-accent-rule-dark) }
  html.theme-dark #share-dialog .share-params summary { color:var(--n-300) }
  html.theme-dark #share-dialog .share-params summary:hover, html.theme-dark #share-dialog .share-params[open] summary { color:var(--n-dark-text) }
  html.theme-dark #share-dialog .share-params p { color:var(--n-300) }
  html.theme-dark #about-dialog .about-meta, html.theme-dark #about-dialog .about-credit { color:#aaa; border-top-color:var(--n-750) }
  html.theme-dark #about-dialog .about-credit .heart { color:var(--c-accent-ink-dark) }
  html.theme-dark #grape-tooltip { background:var(--n-dark-panel); color:var(--n-dark-text); border-color:var(--n-700); box-shadow:0 4px 16px rgba(0,0,0,0.5) }
  html.theme-dark #grape-tooltip .note { color:var(--n-300) }
  html.theme-dark #grape-tooltip .thumb { background:var(--n-750) }
  html.theme-dark .maplibregl-popup-content { background:var(--n-dark-panel); color:var(--n-dark-text) }
  html.theme-dark .maplibregl-popup-content h3 { color:var(--c-accent-ink-dark) }
  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:var(--n-dark-panel) }
  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:var(--n-dark-panel) }
  html.theme-dark .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color:var(--n-dark-panel) }
  html.theme-dark .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color:var(--n-dark-panel) }
  /* 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 .pill.grape .canon { color:inherit }
  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 .card-feedback { border-top-color:#3a3a3d; color:var(--n-dark-text) }
  html.theme-dark #panel .card-feedback .fb-prompt { color:#b5b5b5 }
  html.theme-dark #panel .fb-chip { background:#232325; border-color:#4a4a4e; color:#d0d0d0 }
  html.theme-dark #panel .fb-chip:hover { background:#343437; color:var(--n-100) }
  html.theme-dark #panel .fb-chip[aria-pressed="true"] { background:var(--c-accent-hover); border-color:var(--c-accent-hover); color:var(--n-0) }
  html.theme-dark #panel .fb-more textarea { background:#1e1e20; border-color:var(--n-700); color:var(--n-200) }
  html.theme-dark #panel .fb-status { color:#a7c48a }
  html.theme-dark #panel .fb-more .fb-aspect { color:#e6a0b6 }
  html.theme-dark #panel .fb-more a { color:#e6a0b6 }
  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 }