/* ---------- themes ----------
   Urgestein (default): gneiss grey-black, chalk white, gold.
   Löss: a printed atlas — warm loess paper, iron-gall ink, ochre.
   Veltliner: bottle green, pale straw gold.
   Map ramps / categorical colours are tokens so JS recolours on theme change. */
:root, [data-theme="urgestein"] {
  color-scheme: dark;
  --bg: #0d0d0e;
  --map: #121213;
  --surface: #151516;
  --surface-2: #1f1f21;
  --glass: rgba(13, 13, 14, .88);
  --line: rgba(236, 230, 218, .10);
  --line-2: rgba(236, 230, 218, .20);
  --ink: #f2efe8;
  --ink-2: #b6b1a7;
  --ink-3: #7f7a71;
  --gold: #d8b25e;
  --gold-ink: #e7c877;
  --river: #7f98a6;
  --focus: #f3d78e;
  --halo: rgba(13, 13, 14, .88);
  --hatch: #34332f;
  --kg: #1c2125;
  --kg-t: rgba(130, 155, 180, .13);
  --kg-far: rgba(130, 155, 180, .22);
  --kg-stroke: rgba(170, 195, 220, .42);
  --kg-sel: rgba(150, 180, 210, .24);
  --kg-sw: #2b333a;
  --c-ez: #3d372b; --c-ez-line: #74694f;
  --plant: rgba(255, 238, 190, .30); --plant-sw: #6b5d3c;
  --gew: rgba(236, 230, 218, .6);
  --ctx: rgba(170, 155, 120, .38);
  --lines: rgba(216, 186, 120, .62);
  --nodata: #2b2a28;
  --ried-stroke: #121213;
  --r0: #3e3421; --r1: #5f4c27; --r2: #866a2e; --r3: #ae8b37; --r4: #d4ae50; --r5: #f1d792;
  --c-gl: #b38a1f; --c-el: #4f93e0; --c-rw: #a19574; --c-ow: rgba(150, 180, 210, .28);
  --tiles-o: .95;
  --elid-num: #d9d5cc;
  --land: #161718; --lake: #1d2a33; --wbg: rgba(216, 178, 94, .05); --wbg-stroke: rgba(216, 178, 94, .35); --c-nv: rgba(236, 230, 218, .07);
  --shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
[data-theme="loess"] {
  color-scheme: light;
  --bg: #e9e4d8;
  --map: #efeadf;
  --surface: #f8f5ee;
  --surface-2: #ede8dc;
  --glass: rgba(248, 245, 238, .92);
  --line: rgba(52, 40, 20, .12);
  --line-2: rgba(52, 40, 20, .24);
  --ink: #1d1a15;
  --ink-2: #544f45;
  --ink-3: #857e71;
  --gold: #9c7524;
  --gold-ink: #8a6519;
  --river: #587a8e;
  --focus: #1d1a15;
  --halo: rgba(245, 241, 232, .9);
  --hatch: #cfc7b6;
  --kg: #dfe4e6;
  --kg-t: rgba(80, 110, 135, .12);
  --kg-far: rgba(80, 110, 135, .18);
  --kg-stroke: rgba(55, 80, 105, .5);
  --kg-sel: rgba(80, 110, 140, .22);
  --kg-sw: #d3dadd;
  --c-ez: #e6dbc2; --c-ez-line: #b09c72;
  --plant: rgba(90, 68, 25, .34); --plant-sw: #b29a66;
  --gew: rgba(40, 30, 15, .55);
  --ctx: rgba(150, 125, 75, .30);
  --lines: rgba(60, 50, 35, .6);
  --nodata: #d8d1c2;
  --ried-stroke: #efeadf;
  --r0: #efe0b4; --r1: #e1c47c; --r2: #cda34e; --r3: #ad8430; --r4: #83611f; --r5: #573f14;
  --c-gl: #b38a1f; --c-el: #4f93e0; --c-rw: #c7b489; --c-ow: rgba(80, 110, 140, .22);
  --tiles-o: .78;
  --elid-num: #404040;
  --land: #f5f1e8; --lake: #cfdbe0; --wbg: rgba(156, 117, 36, .06); --wbg-stroke: rgba(138, 101, 25, .4); --c-nv: rgba(52, 40, 20, .07);
  --shadow: 0 18px 40px rgba(60, 45, 20, .18);
}
[data-theme="veltliner"] {
  color-scheme: dark;
  --bg: #0a100c;
  --map: #0e1510;
  --surface: #111a14;
  --surface-2: #19241c;
  --glass: rgba(10, 16, 12, .88);
  --line: rgba(226, 232, 208, .10);
  --line-2: rgba(226, 232, 208, .20);
  --ink: #eef0e2;
  --ink-2: #b1b7a2;
  --ink-3: #7a826f;
  --gold: #dccb82;
  --gold-ink: #e6d690;
  --river: #86a3a0;
  --focus: #efe3a2;
  --halo: rgba(10, 16, 12, .88);
  --hatch: #2b3a2f;
  --kg: #18221c;
  --kg-t: rgba(150, 190, 160, .12);
  --kg-far: rgba(150, 190, 160, .2);
  --kg-stroke: rgba(185, 215, 185, .4);
  --kg-sel: rgba(160, 200, 170, .22);
  --kg-sw: #233128;
  --c-ez: #353927; --c-ez-line: #666f47;
  --plant: rgba(240, 245, 200, .28); --plant-sw: #697048;
  --gew: rgba(230, 235, 210, .55);
  --ctx: rgba(160, 165, 115, .36);
  --lines: rgba(220, 205, 140, .55);
  --nodata: #26312a;
  --ried-stroke: #0e1510;
  --r0: #3a3a22; --r1: #5a5728; --r2: #817c32; --r3: #a8a13f; --r4: #cdc45a; --r5: #ece4a0;
  --c-gl: #b38a1f; --c-el: #4f93e0; --c-rw: #979c72; --c-ow: rgba(160, 200, 170, .26);
  --tiles-o: .95;
  --elid-num: #d9dccd;
  --land: #121a14; --lake: #1a2a2c; --wbg: rgba(220, 203, 130, .05); --wbg-stroke: rgba(220, 203, 130, .32); --c-nv: rgba(226, 232, 208, .07);
  --shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
:root {
  --panel-w: 390px;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  /* ELID component colours (same as elid.wine) */
  --elid-country: #e06a44;
  --elid-region: #c92d50;
  --elid-producer: #20985c;
  --elid-vintage: #007cb1;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 14px/1.45 var(--sans); overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
#app { position: fixed; inset: 0; }

/* ---------- top bar ---------- */
#topbar {
  position: absolute; top: 0; left: 0; right: 0; height: 56px; z-index: 20;
  display: flex; align-items: center; gap: 18px; padding: 0 16px;
  background: var(--glass); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; letter-spacing: .26em; font-size: 12px; white-space: nowrap; }
.brand b { color: var(--gold); font-weight: 600; }
.search { position: relative; flex: 0 1 420px; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 19px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-3); }
.search:focus-within { border-color: var(--line-2); }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--ink); font: inherit; }
.search input::placeholder { color: var(--ink-3); }
#results { position: absolute; top: 44px; left: 0; right: 0; max-height: 60vh; overflow: auto; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; padding: 6px; box-shadow: var(--shadow); z-index: 5; }
#results button { display: flex; width: 100%; justify-content: space-between; gap: 10px; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 8px; color: var(--ink); }
#results button:hover, #results button.active { background: var(--surface-2); }
#results .k { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
#results .sub { color: var(--ink-3); font-size: 12px; }
.themes { margin-left: auto; display: flex; gap: 6px; padding: 4px; border-radius: 16px; border: 1px solid var(--line); }
.themes button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); padding: 0; background: none; display: grid; place-items: center; }
.themes button i { width: 14px; height: 14px; border-radius: 50%; display: block; }
.themes [data-theme="urgestein"] i { background: linear-gradient(135deg, #111 50%, #d8b25e 50%); }
.themes [data-theme="loess"] i { background: linear-gradient(135deg, #efeadf 50%, #1d1a15 50%); }
.themes [data-theme="veltliner"] i { background: linear-gradient(135deg, #0e1510 50%, #dccb82 50%); }
.themes button[aria-checked="true"] { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.ghost { background: none; border: 1px solid var(--line-2); border-radius: 18px; padding: 7px 14px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.ghost:hover { color: var(--ink); border-color: var(--ink-3); }

/* ---------- stage & map ---------- */
#stage { position: absolute; top: 56px; bottom: 0; left: var(--panel-w); right: 0; background: var(--map); overflow: hidden; z-index: 0; }
#tiles { position: absolute; inset: 0; pointer-events: none; opacity: calc(var(--tiles-o) * var(--tz, 1)); transition: opacity .25s; }
#tiles.off { opacity: 0; }
/* Day background: approximate summer landcover under the vineyard layers */
#stage.day { background: #a7b88a; }
.day #tiles { opacity: 1; }
.day .kg, .terrain.day .kg, .terrain.day.far .kg { fill: transparent; }
#map.day .ried:not(.free) { fill-opacity: .5; }
#map.day .ried[fill="url(#rows)"] { fill-opacity: .28; }
.day .river { opacity: .2; }
.day .plant { opacity: .3; }
#tiles canvas { position: absolute; left: 0; top: 0; }
#map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; user-select: none; }
#map.dragging { cursor: grabbing; }
.kg { fill: var(--kg); stroke: var(--kg-stroke); stroke-width: 1; vector-effect: non-scaling-stroke; }
.no-kg .kg { fill: transparent !important; stroke: transparent; }
.ctx { fill: var(--ctx); stroke: none; pointer-events: none; }
.no-ctx .ctx { display: none; }
.ried.off { display: none; }
.plant { fill: url(#vines); pointer-events: none; display: none; }
.pz .plant { display: inline; }
.no-plant .plant { display: none !important; }
.moving .plant, .moving g:not(.focus) > .sub { display: none !important; }
.moving .ried[fill="url(#rows)"] { fill: var(--c-ez); }
.sub { fill: none; stroke: var(--gew); stroke-width: .8; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; display: none; }
.gz .sub { display: inline; pointer-events: stroke; }
.no-sub g:not(.focus) > .sub { display: none !important; }
/* focused Einzellage: its Gewanne become clickable shapes */
.lfocus .focus > .sub { display: inline; fill: rgba(0, 0, 0, 0); stroke: color-mix(in srgb, var(--map) 85%, transparent); stroke-width: 1.3; stroke-dasharray: 4 3; pointer-events: all; cursor: pointer; }
.lfocus .focus > .sub:hover { fill: color-mix(in srgb, var(--focus) 22%, transparent); stroke: var(--focus); stroke-width: 1.6; stroke-dasharray: none; }
.lfocus .focus > .sub.sel { fill: color-mix(in srgb, var(--gold) 38%, transparent); stroke: var(--gold-ink); stroke-width: 2; stroke-dasharray: none; }
.hl.soft { stroke-width: 1.2; stroke-dasharray: 5 4; opacity: .8; }
.hl.gwhl { stroke: var(--gold-ink); stroke-width: 2.6; }

.no-est .est { display: none; }
.terrain .kg { fill: var(--kg-t); }
.terrain.far .kg { fill: var(--kg-far, var(--kg-t)); stroke: var(--kg-stroke); }
.kg:hover { fill: var(--kg-sel); }
.kg.sel { fill: var(--kg-sel); stroke: var(--ink-3); }
.kg.ow { fill: var(--c-ow); }
.river { fill: none; stroke: var(--river); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: opacity .3s; }
.terrain.near .river { opacity: .35; }
.ried { stroke: var(--ried-stroke); stroke-width: 0.6; vector-effect: non-scaling-stroke; cursor: pointer; transition: opacity .2s; }
.terrain .ried:not(.free) { fill-opacity: .9; }
.ried.free { fill: url(#hatch); cursor: default; }
.terrain .ried.free { fill: none; }
.far .ried:not(.free) { stroke: currentColor; stroke-width: 2.2; }
.mid .ried:not(.free) { stroke-width: 0.4; }
.ried:hover { stroke: var(--focus); stroke-width: 1.5; }
.dim .ried:not(.on), .dim .kg:not(.on) { opacity: .25; }
.hl { fill: none; stroke: var(--ink); stroke-width: 2.2; vector-effect: non-scaling-stroke; pointer-events: none; }
.lbl { pointer-events: none; paint-order: stroke; stroke: var(--halo); stroke-linejoin: round; fill: var(--ink-2); font-family: var(--sans); }
.lbl.v { fill: var(--ink); font-weight: 600; letter-spacing: .02em; }
.lbl.l { fill: var(--gold-ink); font-weight: 600; font-family: var(--serif); font-style: italic; letter-spacing: .01em; }
.lbl.b { fill: var(--ink-3); font-weight: 600; letter-spacing: .28em; text-transform: uppercase; }
.lbl.ctxl { letter-spacing: .16em; font-weight: 500; }
.lbl.g { fill: var(--ink-2); font-style: italic; font-weight: 400; }
.lbl.g.f { fill: var(--ink); }
.lbl.g.on { fill: var(--gold-ink); font-weight: 700; }
.lbl.sub { fill: var(--gold-ink); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
/* estates */
#L-est { display: none; }
.show-est #L-est { display: inline; }
.est { cursor: pointer; }
.estfar .est:not(.on) { display: none; }
.est .bg { fill: var(--surface); stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.est .eagle { fill: var(--ink); }
.est .dot { fill: var(--ink-2); stroke: var(--surface); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.est.on .bg { stroke: var(--gold); stroke-width: 2; }
.est.on .dot { fill: var(--gold); }
.est:hover .bg { stroke: var(--focus); }

#crumb { position: absolute; top: 12px; left: 12px; padding: 4px 12px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; max-width: calc(100% - 560px); overflow: hidden; text-overflow: ellipsis; }
#scale { position: absolute; bottom: 46px; right: 72px; color: var(--ink-3); font-size: 10px; pointer-events: none; }
#scale text { fill: var(--ink-3); font: 10px var(--sans); paint-order: stroke; stroke: var(--halo); stroke-width: 3px; }
#scale line { stroke: var(--ink-2); }
#attrib { position: absolute; right: 8px; bottom: 2px; font-size: 9.5px; color: var(--ink-3); background: var(--glass); padding: 1px 6px; border-radius: 6px; }
#attrib a { color: inherit; }

#metric { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.seg { display: flex; background: var(--glass); border: 1px solid var(--line); border-radius: 18px; padding: 3px; }
.seg button { background: none; border: 0; border-radius: 15px; padding: 5px 11px; font-size: 12px; color: var(--ink-2); }
.seg button .s { display: none; }
.seg button[aria-checked="true"] { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
#legend { background: var(--glass); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 11px; color: var(--ink-2); max-width: 300px; }
#legend .row { display: flex; gap: 2px; }
#legend .sw { width: 38px; height: 8px; border-radius: 2px; }
#legend .ticks { display: flex; gap: 2px; margin-top: 3px; color: var(--ink-3); font-size: 10px; }
#legend .ticks span { width: 38px; }
#legend .nod { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--ink-3); font-size: 10.5px; flex-wrap: wrap; }
#legend .nod i { width: 12px; height: 8px; border-radius: 2px; display: inline-block; }
#legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
#legend li { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 7px; }
#legend li i { width: 14px; height: 10px; border-radius: 2px; display: block; }
#legend li small { color: var(--ink-3); font-variant-numeric: tabular-nums; }
#legend { max-height: calc(100vh - 260px); overflow: auto; scrollbar-width: thin; }
#legend .lg-toggle { display: flex; justify-content: space-between; width: 100%; gap: 12px; background: none; border: 0; padding: 0 0 6px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
#legend.collapsed .lg-toggle { padding: 0; }
#legend.collapsed .lg-body { display: none; }
#legend .lg-h { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 2px 0 5px; }
#legend .sw2 { width: 38px; height: 8px; border-radius: 2px; }
.chk { display: grid; grid-template-columns: 14px 16px 1fr auto; align-items: center; gap: 7px; padding: 2px 0; cursor: pointer; user-select: none; }
.chk input { position: absolute; opacity: 0; pointer-events: none; }
.chk .box { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line-2); display: grid; place-items: center; }
.chk input:checked + .box { background: var(--gold); border-color: var(--gold); }
.chk input:checked + .box::after { content: ""; width: 7px; height: 4px; border: 2px solid var(--surface); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.chk input:focus-visible + .box { outline: 2px solid var(--focus); outline-offset: 1px; }
.chk input:not(:checked) ~ span, .chk input:not(:checked) ~ i { opacity: .45; }
.chk .ks { width: 16px; height: 10px; border-radius: 2px; display: block; }
.chk .ks.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-2); margin-left: 4px; }
.chk small { color: var(--ink-3); font-variant-numeric: tabular-nums; }
#legend .sep { border-top: 1px solid var(--line); margin: 6px 0 4px; }
#legend .foot { color: var(--ink-3); font-size: 10px; margin-top: 6px; }

#ctrl { position: absolute; right: 12px; bottom: 64px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
#base button { padding: 5px 10px; }
#btn3d { height: 34px; padding: 0 12px; white-space: nowrap; border-radius: 12px; border: 1px solid var(--gold); background: var(--glass); color: var(--gold-ink); font-size: 12px; letter-spacing: .08em; }
#btn3d:hover { background: var(--surface-2); }
.cta.c3d { border-color: color-mix(in srgb, var(--gold) 55%, transparent); text-transform: none; letter-spacing: .02em; font-size: 13px; }
.cta.c3d b { color: var(--gold-ink); letter-spacing: .08em; margin-right: 6px; }
.classline.gl { border-color: color-mix(in srgb, var(--c-gl) 55%, transparent); }
.classline.el { border-color: color-mix(in srgb, var(--c-el) 55%, transparent); }
.classline a { color: var(--ink-2); }
/* 3D overlay */
#v3 { position: absolute; inset: 0; z-index: 25; background: var(--map); display: flex; flex-direction: column; }
#v3[hidden] { display: none; }
.v3-open #metric, .v3-open #ctrl, .v3-open #chips, .v3-open #crumb, .v3-open #scale { visibility: hidden; }
.v3-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 16px 6px; }
.v3-head h2 { margin: 2px 0 0; font-size: 26px; }
.v3-sub { color: var(--ink-3); font-size: 12px; }
.v3-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.v3-lbl { font-size: 11px; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; }
.v3-btn { border: 1px solid var(--line-2); background: var(--glass); border-radius: 14px; padding: 6px 12px; font-size: 12px; color: var(--ink-2); }
.v3-btn[aria-pressed="true"] { color: var(--ink); border-color: var(--gold); }
.v3-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.v3-stage canvas { display: block; width: 100%; height: 100%; }
.v3-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }
.v3-foot { padding: 6px 16px 10px; font-size: 10.5px; color: var(--ink-3); } .v3-foot b { color: var(--ink-2); font-weight: 600; }
.v3-stage { --ls: 1; outline: none; }
.v3-stage[data-size="s"] { --ls: .82; }
.v3-stage[data-size="l"] { --ls: 1.25; }
.v3-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.v3-label { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; white-space: nowrap; color: var(--ink-2); font-family: var(--sans); font-size: calc(11px * var(--ls)); text-shadow: 0 0 3px var(--map), 0 0 7px var(--map), 0 0 1px var(--map); }
.v3-label::after { content: ""; display: block; width: 1px; height: calc(10px * var(--ls)); margin: 1px auto 0; background: currentColor; opacity: .5; }
.v3-label.v { color: var(--ink); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: calc(10.5px * var(--ls)); }
.v3-label.l { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: calc(14px * var(--ls)); color: var(--ink); }
.v3-label.lc { color: var(--gold-ink); }
.v3-label.sub { color: var(--gold-ink); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: calc(10px * var(--ls)); }
.v3-label.gw { font-style: italic; font-size: calc(11.5px * var(--ls)); color: var(--ink); }
.v3-label.hov { color: var(--focus); }
.v3-label.on { color: var(--gold-ink); font-weight: 700; font-size: calc(16px * var(--ls)); z-index: 2; }
.v3-label.on::after { opacity: 1; height: calc(16px * var(--ls)); }
.v3-card { position: absolute; left: 12px; bottom: 12px; z-index: 3; width: min(300px, calc(100% - 24px)); background: var(--glass); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; backdrop-filter: blur(6px); }
.v3-card[hidden] { display: none; }
.v3-card b { display: block; font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--gold-ink); margin: 1px 0 2px; padding-right: 20px; }
.v3-card .v3-sub { margin-top: 2px; }
.v3-card-b { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.v3-plane-t { position: absolute; left: 12px; top: 12px; z-index: 4; display: flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px; background: var(--glass); border: 1px solid var(--line-2); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; user-select: none; backdrop-filter: blur(6px); }
.v3-plane-t input { position: absolute; opacity: 0; pointer-events: none; }
.v3-plane-t .box { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--ink-3); display: grid; place-items: center; }
.v3-plane-t input:checked + .box { background: var(--gold); border-color: var(--gold); }
.v3-plane-t input:checked + .box::after { content: ""; width: 7px; height: 4px; border: 2px solid var(--surface); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.v3-plane-t input:focus-visible + .box { outline: 2px solid var(--focus); outline-offset: 1px; }
.v3-x { position: absolute; top: 6px; right: 6px; border: 0; background: none; color: var(--ink-3); font-size: 13px; padding: 4px 6px; }
.v3-tip { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; background: var(--glass); border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 7px; font-size: 12px; color: var(--ink); white-space: nowrap; }
.v3-tip[hidden], .v3-status[hidden] { display: none; }
.v3-status { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); background: var(--glass); padding: 4px 10px; border-radius: 10px; }
.v3-pop-wrap { position: relative; }
.v3-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 230px; background: var(--glass); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; backdrop-filter: blur(8px); display: flex; flex-direction: column; gap: 5px; }
.v3-pop[hidden] { display: none; }
.v3-pop-h { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; }
.v3-pop .seg { align-self: flex-start; }
.v3-pop-note { font-size: 11px; color: var(--ink-3); margin: 4px 0 0; line-height: 1.4; }
#zoom { display: flex; flex-direction: column; background: var(--glass); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
#zoom button { width: 40px; height: 38px; border: 0; background: none; font-size: 18px; color: var(--ink-2); display: grid; place-items: center; }
#zoom button + button { border-top: 1px solid var(--line); }
#zoom button:hover { color: var(--ink); background: var(--surface-2); }

#chips { position: absolute; left: 12px; right: 170px; bottom: 20px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
#chips button { flex: none; display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); font-size: 12px; color: var(--ink-2); }
#chips button small { color: var(--ink-3); }
#chips button[aria-pressed="true"] { color: var(--ink); border-color: var(--gold); background: var(--surface-2); }

#tip { position: absolute; z-index: 30; pointer-events: none; max-width: 280px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 10px; font-size: 12px; box-shadow: var(--shadow); }
#tip b { display: block; font-size: 13px; }
#tip .sub { color: var(--ink-3); font-size: 11px; }
#tip .kv { display: flex; justify-content: space-between; gap: 14px; color: var(--ink-2); }
#tip .kv span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; }
#tip .cls { display: flex; align-items: center; gap: 6px; margin: 3px 0 2px; color: var(--ink-2); font-size: 11px; }

/* ---------- panel ---------- */
#panel { position: absolute; top: 56px; bottom: 0; left: 0; width: var(--panel-w); z-index: 10; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--line); padding: 18px 18px 40px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.ph { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.ph > div { min-width: 0; }
.back { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: none; color: var(--ink-2); display: grid; place-items: center; margin-top: 4px; }
.back:hover { color: var(--ink); }
.eyebrow { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.eyebrow a { color: inherit; text-decoration: none; cursor: pointer; }
.eyebrow a:hover { color: var(--ink); }
h1, h2 { font-family: var(--serif); font-weight: 600; margin: 0; letter-spacing: .005em; }
h1 { font-size: 33px; line-height: 1.05; }
h2 { font-size: 20px; margin: 22px 0 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
h2 small { font: 11px var(--sans); color: var(--ink-3); text-align: right; }
.lede { color: var(--ink-2); font-size: 13px; margin: 6px 0 0; }
.lede a { color: var(--ink); text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.note { color: var(--ink-3); font-size: 11.5px; margin: 6px 0 0; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 14px 0 4px; }
.tile { background: var(--surface); padding: 10px 12px; }
.tile .v { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tile .v small { font-size: 12px; color: var(--ink-3); }
.tile .k { font-size: 11px; color: var(--ink-3); }
.cta { width: 100%; margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); text-align: left; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; display: flex; justify-content: space-between; }
.cta:hover { border-color: var(--ink-3); }

/* classification banner on Lage / producer panels */
.classline { display: flex; align-items: center; gap: 10px; margin: 12px 0 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.classline b { display: block; font-size: 12px; letter-spacing: .08em; }
.classline span { color: var(--ink-3); font-size: 11.5px; }
.classline .swatch { width: 12px; height: 34px; border-radius: 3px; flex: none; }


.rank { list-style: none; margin: 0; padding: 0; }
.rank li button { width: 100%; background: none; border: 0; padding: 6px 4px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; border-radius: 8px; }
.rank li button:hover { background: var(--surface-2); }
.rank .n { font-weight: 500; }
.rank .n small { color: var(--ink-3); font-weight: 400; }
.rank .val { color: var(--ink-2); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.rank .bar { grid-column: 1 / -1; height: 4px; border-radius: 0 2px 2px 0; background: var(--gold); opacity: .85; }

.chart { margin: 4px 0 2px; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart text { fill: var(--ink-3); font: 10px var(--sans); }
.chart .grid { stroke: var(--line); }
.chart .dot { fill: var(--gold); stroke: var(--surface); stroke-width: 2; }
.chart .dot.glass { fill: none; stroke: var(--gold); stroke-width: 1.5; }
.chart .rrp { fill: var(--elid-vintage); stroke: var(--surface); stroke-width: 2; }
.chart .med { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 3; }
.chart .hit { fill: transparent; cursor: pointer; }
.key { display: flex; gap: 14px; font-size: 11px; color: var(--ink-3); margin-top: 4px; flex-wrap: wrap; }
.key i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }

.prod { border-top: 1px solid var(--line); padding: 10px 0 4px; }
.prod > .pn { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.prod > .pn button { background: none; border: 0; padding: 0; font-weight: 600; text-align: left; display: inline-flex; align-items: center; gap: 6px; }
.prod > .pn button:hover { color: var(--gold-ink); }
.prod > .pn small { color: var(--ink-3); font-size: 11px; white-space: nowrap; }
.wine { margin: 6px 0 0; padding: 6px 0 6px 10px; border-left: 2px solid var(--line-2); }
.wine.listed { border-left-color: var(--gold); }
.wine .wn { font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 5px; line-height: 1.4; white-space: nowrap; }
.badge.gl { color: var(--ink); border-color: color-mix(in srgb, var(--c-gl) 70%, transparent); }
.badge.el { color: var(--ink); border-color: color-mix(in srgb, var(--c-el) 70%, transparent); }
.wine .meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.wine .meta b { color: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.wine .meta a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 2px; }
.wine .meta a:hover b, .wine .meta a:hover { color: var(--ink); }
.wine details { margin-top: 4px; }
.wine summary { font-size: 11.5px; color: var(--ink-2); cursor: pointer; list-style: none; }
.wine summary::before { content: "▸ "; color: var(--ink-3); }
.wine details[open] summary::before { content: "▾ "; }
table.lst { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 11.5px; }
table.lst td { padding: 3px 4px 3px 0; border-top: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
table.lst td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); }
table.lst td small { color: var(--ink-3); }
.pill { display: inline-block; font-size: 10px; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 8px; padding: 0 6px; }
.more { background: none; border: 0; color: var(--ink-2); font-size: 12px; padding: 8px 0; text-decoration: underline; text-underline-offset: 3px; }
.riedlist { display: flex; flex-wrap: wrap; gap: 6px; }
.riedlist button { border: 1px solid var(--line-2); background: none; border-radius: 14px; padding: 4px 10px; font-size: 12px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.riedlist button:hover { color: var(--ink); border-color: var(--ink-3); }
.riedlist button small { color: var(--ink-3); }
.riedlist button.has { color: var(--ink); }
.riedlist button i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* ELID code: component colours as on elid.wine */
.elid { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-decoration: none; color: var(--ink-3); white-space: nowrap; }
a.elid { border-bottom: 1px solid var(--line-2); }
a.elid:hover { border-bottom-color: currentColor; }
.elid .ec { color: var(--elid-country); }
.elid .er { color: var(--elid-region); }
.elid .ep { color: var(--elid-producer); }
.elid .en { color: var(--elid-num); }
.elid .es { color: var(--ink-3); }
.elid-row { margin-top: 3px; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-3); }
.elid-row .ext { font-size: 10px; }
.plinks { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }

dialog#about { max-width: 660px; width: calc(100% - 32px); max-height: 85vh; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: 16px; padding: 24px 26px; }
dialog#about::backdrop { background: rgba(2, 4, 6, .6); }
dialog#about h1 { font-size: 28px; }
dialog#about h3 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin: 18px 0 6px; font-weight: 600; }
dialog#about p, dialog#about li { color: var(--ink-2); font-size: 13px; }
dialog#about a { color: var(--gold-ink); }
dialog#about table { border-collapse: collapse; font-size: 12.5px; width: 100%; }
dialog#about td { border-top: 1px solid var(--line); padding: 4px 6px 4px 0; color: var(--ink-2); }
dialog#about td.num { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
dialog#about .close { float: right; }

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  :root { --panel-w: 0px; }
  #topbar { gap: 8px; padding: 0 10px; }
  .brand span { display: none; }
  .search { flex: 1 1 0; min-width: 0; padding: 0 10px; }
  .themes { gap: 3px; padding: 3px; }
  .themes button { width: 18px; height: 18px; }
  .themes button i { width: 11px; height: 11px; }
  .ghost { padding: 7px 10px; font-size: 0; }
  .ghost::after { content: "About"; font-size: 12px; }
  #stage { left: 0; bottom: 46vh; }
  #panel { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 46vh; border-right: 0; border-top: 1px solid var(--line-2); border-radius: 16px 16px 0 0; padding: 14px 16px 30px; }
  #metric { top: 8px; right: 8px; left: 8px; align-items: stretch; }
  .seg button { flex: 1; padding: 5px 4px; font-size: 11px; }
  .seg button .l { display: none; }
  .seg button .s { display: inline; }
  #legend { display: none; }
  #crumb { display: none; }
  #chips { bottom: 8px; right: 8px; left: 8px; }
  #ctrl { bottom: 52px; right: 8px; flex-direction: column; align-items: flex-end; gap: 6px; }
  #zoom { display: none; }
  #base button { padding: 5px 7px; font-size: 11px; }
  .v3-head h2 { font-size: 21px; }
  /* 3D takes the whole screen on phones; the sheet comes back on close */
  body.v3-on #stage { bottom: 0; }
  body.v3-on #panel { display: none; }
  .v3-head { flex-wrap: wrap; padding: 10px 12px 4px; }
  .v3-head > div:first-child { flex: 1 1 100%; }
  .v3-ctl { justify-content: flex-start; }
  .v3-pop { right: auto; left: 0; }
  #zoom #zfit { display: none; }
  #scale { display: none; }
  #attrib { display: none; }
  h1 { font-size: 27px; }
}
.v3-pop .chk { grid-template-columns: 14px 1fr; font-size: 12.5px; color: var(--ink-2); }

/* daylight 3D: labels need a darker halo against the bright ground and sky */
.v3-stage.day .v3-label { color: #fff; text-shadow: 0 0 3px rgba(20, 30, 15, .9), 0 0 7px rgba(20, 30, 15, .6); }
.v3-stage.day .v3-label.l.lc, .v3-stage.day .v3-label.sub, .v3-stage.day .v3-label.on { color: #ffe39a; }
.v3-stage.day .v3-status { color: #234; }

/* ---------- Austria Atlas additions ---------- */
#labels { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.land { fill: var(--land); stroke: none; }
.border { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.lake { fill: var(--lake); stroke: none; pointer-events: none; }
.wbg { fill: var(--wbg); stroke: var(--wbg-stroke); stroke-width: 1.2; vector-effect: non-scaling-stroke; pointer-events: none; transition: fill .3s; }
.far .wbg { pointer-events: all; cursor: pointer; }
.far .wbg:hover { fill: var(--kg-sel); }
.wbg.on { stroke: var(--gold); stroke-width: 2; }
.no-wbg .wbg { display: none; }
.ried.nv { fill: var(--c-nv); }
.no-nv .ried.nv { display: none; }
.lbl.t { fill: var(--ink-3); font-weight: 500; }
.tdot { fill: var(--ink-3); stroke: var(--halo); stroke-width: 1.5; }
.lbl.w { fill: var(--ink-2); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.lbl.w.on { fill: var(--gold-ink); }
.terr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 8px 0 4px; }
.terr .tile .v { font-size: 18px; }
.aspect { display: flex; align-items: center; gap: 10px; }
.aspect svg { flex: none; }
.aspect .rose-bg { fill: none; stroke: var(--line-2); }
.aspect .rose { fill: color-mix(in srgb, var(--gold) 55%, transparent); stroke: var(--gold-ink); stroke-width: 1; }
.aspect text { fill: var(--ink-3); font: 9px var(--sans); }
.varieties { display: grid; gap: 3px; margin-top: 4px; }
.rnlist { display: flex; flex-wrap: wrap; gap: 6px; }
.rnlist span { border: 1px dashed var(--line-2); border-radius: 14px; padding: 3px 9px; font-size: 12px; color: var(--ink-2); }
#map.far .kg { stroke: transparent; }
#map.far .kg.sel, #map.far .kg.on { stroke: var(--kg-stroke); }