/* Wayfinder Core v2 — fresh engine styles.
 * Vanilla Day/Night keep the Core's plain look. Glass is the Serve
 * package: dark glass on the night base, the map edge to edge under
 * everything, beveled 3D buttons with the word on top, etched cards,
 * a blue-glass Feedback button, and the Liquid glass block in
 * Settings — Opacity, Frosting and Tint sliders plus a tint
 * color picker — driving the surface fill, the backdrop blur
 * and the color wash independently (--glass-o / --glass-blur /
 * --glass-tint + --glass-tint-a). (Core v-next: the two-slider
 * model ported from the core-v2 preview onto this production
 * engine, superseding the single --glass-t slider; the sheets'
 * old alpha floor is retired with it, as on Serve — readability
 * rests on solid ink, and the rig proves the floors at the
 * shipped defaults.) */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; overscroll-behavior: none; }
body { font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink); background: var(--bg); }

/* ---------- theme variables ---------- */
body.theme-day { --bg: #e8ebee; --ink: #17202b; --dim: #44536a; --line: #c3ccd6;
  --surface: #ffffff; --surface2: #f2f5f8; --chip: #eef2f6;
  --accent: #1d4ed8; --star: #b97e00; }
body.theme-night { --bg: #0b0f14; --ink: #e9eef5; --dim: #a9b7c8; --line: #2a3547;
  --surface: #151c26; --surface2: #1b2432; --chip: #202b3c;
  --accent: #7db4ff; --star: #f5b301; }

/* Glass rides the night base (Serve's rule). Two sliders tune it,
 * independently (engine.js owns them; the values below are the
 * shipped defaults, landed by applyTheme before the sheet opens):
 * --glass-o is the OPACITY slider as a fill alpha — 0.04 at 0% (a
 * floor so a surface never vanishes outright) to 0.95 at 100%;
 * --glass-blur is the FROSTING slider as a backdrop blur — 0px at
 * 0% to 24px at 100%, each surface class taking its proportional
 * share so every surface defrosts together. At the low corner
 * (opacity 0, frosting 0) the glass is clear reflective glass:
 * the map reads sharp through a whisper of tint, and what keeps
 * it visibly glass is the REFLECTION layer — the sheen gradients,
 * the lit rims, the etched borders — which is constant and never
 * fades with either slider. Words are solid ink at every setting;
 * that, not a fill floor, is what keeps them readable. */
body.theme-glass { --bg: transparent; --ink: #f4f7fb; --dim: #d9e3f0; --line: rgba(255,255,255,.38);
  --accent: #9cc2ff; --star: #ffc61a;
  --glass-o: .6133; --glass-blur: 18px;
  /* Tint (core v-next): --glass-tint is the applied tint color as
   * an "r,g,b" triplet (the user's color, deepened toward the
   * glass base by the engine) and --glass-tint-a its strength as
   * a 0..1 fraction. The fills below mix the tint INTO the fill
   * color at the SAME alpha, so the total surface opacity is
   * always exactly the Opacity slider's --glass-o — a stronger
   * tint never makes the glass denser. The plain rgba line stands
   * first as the fallback for engines without color-mix. */
  --glass-tint: 13,18,29; --glass-tint-a: 0;
  --surface: rgba(16,22,33,var(--glass-o));
  --surface: color-mix(in srgb, rgba(var(--glass-tint), var(--glass-o)) calc(var(--glass-tint-a) * 100%), rgba(16,22,33, var(--glass-o)));
  --surface2: rgba(24,32,46,var(--glass-o));
  --surface2: color-mix(in srgb, rgba(var(--glass-tint), var(--glass-o)) calc(var(--glass-tint-a) * 100%), rgba(24,32,46, var(--glass-o)));
  --chip: rgba(255,255,255,.14); }
/* The night base, literally: in Glass the tile pane itself darkens
 * to a night face (Serve: glass switches the map to night), while
 * markers, island labels and controls ride above it undimmed. This
 * is also what lets the glass stay airy without washing the words. */
body.theme-glass .leaflet-tile-pane { filter: brightness(.52) saturate(.78); }

/* ---------- the map: edge to edge, under everything ---------- */
#map { position: fixed; inset: 0; z-index: 0; background: #0b0f14; }
.leaflet-control-attribution { font-size: 9px !important; background: rgba(255,255,255,.75) !important;
  color: #333 !important; padding: 0 4px; }
.leaflet-control-attribution a { color: #333 !important; }
.leaflet-bar a { color: #17202b; }

/* ---------- chrome ---------- */
.surface { background: var(--surface); }
#appHeader { position: fixed; z-index: 600; top: calc(8px + env(safe-area-inset-top));
  left: 8px; right: 8px; border-radius: 16px; padding: 10px 12px;
  display: flex; align-items: center; gap: 10px; border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(2,6,16,.18); }
.brand { min-width: 0; flex: 1; }
.brand h1 { margin: 0; font-size: 19px; line-height: 1.1; white-space: nowrap; }
.brand p { margin: 2px 0 0; font-size: 11.5px; color: var(--dim); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.headBtns { display: flex; gap: 6px; }
.btn { font: inherit; font-size: 13.5px; color: var(--ink); background: var(--surface2);
  border: 1px solid var(--line); border-radius: 11px; padding: 8px 10px; cursor: pointer; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: transparent; color: #fff; font-weight: 600; }
body.theme-night .btn.primary, body.theme-glass .btn.primary { color: #0b1220; background: var(--accent); }
.cornerBtn { min-width: 40px; font-size: 16px; padding: 8px 6px; }
#locateBtn { position: fixed; z-index: 600; right: 10px; bottom: 208px; border-radius: 12px;
  box-shadow: 0 6px 18px rgba(2,6,16,.18); }
/* the right-hand control column stacks clear of the drawer: the
   zoom lifts the whole corner stack (attribution rides above it),
   and the locate button stands above the zoom */
.leaflet-bottom .leaflet-control-zoom { margin-bottom: 84px; }

/* ---------- drawer / list ---------- */
#drawer { position: fixed; z-index: 600; left: 8px; right: 8px;
  bottom: calc(8px + env(safe-area-inset-bottom)); border-radius: 16px;
  border: 1px solid var(--line); box-shadow: 0 -6px 22px rgba(2,6,16,.20); overflow: hidden; }
#drawerHandle { width: 100%; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink);
  background: transparent; border: 0; padding: 13px 14px; display: flex; justify-content: space-between;
  align-items: center; cursor: pointer; }
#drawerBody { max-height: 52vh; overflow-y: auto; padding: 0 10px 10px; }
.searchRow { display: flex; gap: 6px; padding: 2px 2px 8px; }
#searchInput { flex: 1; font: inherit; font-size: 16px; padding: 9px 11px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--surface2); color: var(--ink); }
.listSub { margin: 0 2px 8px; font-size: 12.5px; color: var(--dim); }
.lrow { display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: var(--chip); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; margin: 0 0 8px; color: var(--ink); }
.lrow b { font-size: 15.5px; }
.lrow .meta { display: block; margin-top: 2px; font-size: 12.5px; color: var(--dim); }
.lrow .star { color: var(--star); }

/* ---------- feedback: floats in every view, never disappears ---------- */
#feedbackBtn { position: fixed; z-index: 900; left: 10px; bottom: 92px; font: inherit;
  font-size: 14px; font-weight: 600; color: #fff;
  background: linear-gradient(180deg, #2f6bd8, #1d4ed8 55%, #173f9e); border: 1px solid #173f9e;
  border-radius: 999px; padding: 10px 16px; cursor: pointer;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 4px rgba(2,10,40,.40), 0 8px 20px rgba(2,6,16,.30); }

/* ---------- sheets / detail ---------- */
.sheetView { position: fixed; inset: 0; z-index: 800; overflow-y: auto; background: var(--surface); }
.sheetHead { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px; border-bottom: 1px solid var(--line);
  font-size: 16px; font-weight: 600; }
.sheetBody { padding: 16px; max-width: 680px; margin: 0 auto; }
#detailBody { padding: 16px; max-width: 680px; margin: 0 auto calc(24px + env(safe-area-inset-bottom)); }
#detailBody h1 { font-size: 26px; margin: 4px 0 2px; line-height: 1.15; }
.dCat { font-size: 14px; color: var(--dim); margin: 0 0 14px; font-weight: 600; }
.dCard { background: var(--surface2); border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 14px; margin: 0 0 12px; }
.dCard h3 { margin: 0 0 7px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.dCard p { margin: 0 0 6px; font-size: 16px; line-height: 1.45; }
.dCard p:last-child { margin-bottom: 0; }
a.factLink { color: var(--accent); font-weight: 600; text-decoration: none; font-size: 17px; }
a.factLink small { display: block; font-size: 12px; color: var(--dim); font-weight: 400; margin-top: 2px; }
.awardLine { font-size: 16px; margin: 0 0 5px; }
.awardLine .star { color: var(--star); }
.paperLine { font-size: 13.5px; color: var(--dim); margin: 0 0 5px; line-height: 1.4; }
.paperLine b { color: var(--ink); font-weight: 600; }
.dim { color: var(--dim); font-size: 14px; line-height: 1.45; }
.fld { display: block; font-size: 14px; font-weight: 600; margin: 0 0 14px; }
.fld select, .fld textarea { display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 16px;
  padding: 10px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface2); color: var(--ink); }
.sheetBody h2 { font-size: 16px; margin: 20px 0 4px; }
.sheetBody h2:first-child { margin-top: 0; }
#glassOpRange, #glassFrRange, #glassTintRange { width: 100%; margin: 10px 0 2px; }
.segRow { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.segRow.col { flex-direction: column; align-items: stretch; }
.segRow .btn[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 1px; font-weight: 700; }

/* ---------- markers ---------- */
.wk-divicon { background: transparent; border: 0; }
.wk-marker { position: relative; display: block; }
.wk-marker .starBadge { position: absolute; top: -6px; right: -6px; z-index: 3; font-size: 14px;
  color: #ffc61a; text-shadow: 0 0 3px #5c3d00, 0 1px 2px rgba(0,0,0,.6); }
/* pins */
.wk-mk--pins svg { display: block; filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)); }
/* stamps: a paper seal, branch ink on cream */
.wk-mk--stamps .stampIn { display: block; width: 38px; height: 38px; border-radius: 50%;
  background: #f8ecd4; border: 2px solid var(--mk); outline: 1.5px dashed var(--mk); outline-offset: -6px;
  color: var(--mk); text-align: center; box-shadow: 0 3px 6px rgba(0,0,0,.30); }
.wk-mk--stamps .stampIn svg { margin: 8px auto 0; display: block; }
/* lights: a glowing orb on a stem over its pool */
.wk-mk--lights .pool { position: absolute; left: 50%; bottom: 0; width: 34px; height: 9px;
  transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at center, var(--mk) 0%, transparent 70%); opacity: .55; }
.wk-mk--lights .stem { position: absolute; left: 50%; bottom: 6px; width: 2px; height: 12px;
  transform: translateX(-50%); background: rgba(20,16,8,.55); }
.wk-mk--lights .orb { position: absolute; left: 50%; top: 0; width: 26px; height: 26px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #fffbe8 0%, #ffe9a8 26%, var(--mk) 78%);
  box-shadow: 0 0 14px 4px var(--mk), 0 2px 5px rgba(0,0,0,.35); }
/* flags: pole + cloth */
.wk-mk--flags .pole { position: absolute; left: 7px; bottom: 0; width: 3px; height: 46px; border-radius: 2px;
  background: linear-gradient(90deg, #6b5a3e, #a68d5f, #6b5a3e); }
.wk-mk--flags .finial { position: absolute; left: 5.5px; top: 0; width: 6px; height: 6px; border-radius: 50%;
  background: #d9b23c; box-shadow: 0 0 3px rgba(0,0,0,.4); }
.wk-mk--flags .cloth { position: absolute; left: 10px; top: 3px; width: 27px; height: 18px;
  background: var(--mk); clip-path: polygon(0 0, 100% 12%, 88% 50%, 100% 88%, 0 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.wk-mk--flags .cloth svg { margin: 2px 0 0 3px; display: block; }

/* ================================================================
 * GLASS — the whole package. Surfaces stop being flat panels and
 * become beveled glass: a lit top rim, a shaded lower rim, a soft
 * cast shadow, the map bleeding through under a blur. Buttons are
 * 3D glass with the word printed on top. Cards are etched glass.
 * ================================================================ */
body.theme-glass .surface, body.theme-glass #drawer, body.theme-glass #appHeader {
  background: linear-gradient(168deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 45%, rgba(4,8,16,.12)), var(--surface);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%); backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid rgba(255,255,255,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.35),
    inset 1px 0 0 rgba(255,255,255,.14), 0 12px 28px rgba(1,4,10,.42); }
body.theme-glass .sheetView { /* sheets wear the same glass as
   * everything else — the two sliders govern them in full; the
   * gradient overlay above the fill is the reflection layer and
   * stays, and the words are solid ink at any setting */
  background: linear-gradient(168deg, rgba(255,255,255,.16), rgba(255,255,255,.02) 40%, rgba(4,8,16,.08)),
    rgba(13,18,29, var(--glass-o));
  background: linear-gradient(168deg, rgba(255,255,255,.16), rgba(255,255,255,.02) 40%, rgba(4,8,16,.08)),
    color-mix(in srgb, rgba(var(--glass-tint), var(--glass-o)) calc(var(--glass-tint-a) * 100%), rgba(13,18,29, var(--glass-o)));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.22)) saturate(150%); backdrop-filter: blur(calc(var(--glass-blur) * 1.22)) saturate(150%); }
body.theme-glass .btn { /* beveled glass, word on top — a bead of
   * water with the symbol stamped on it: a specular highlight sits
   * high on the face, the rim is lit above and shaded below, and
   * the word printed over it stays solid */
  background: radial-gradient(120% 90% at 30% 12%, rgba(255,255,255,.42), rgba(255,255,255,0) 52%),
    linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.10) 48%, rgba(6,10,20,.16));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * .55)) saturate(150%); backdrop-filter: blur(calc(var(--glass-blur) * .55)) saturate(150%);
  border: 1px solid rgba(255,255,255,.42); color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.70), inset 0 -2px 3px rgba(0,0,0,.30),
    inset 1px 0 0 rgba(255,255,255,.16), 0 5px 12px rgba(1,4,10,.35); }
body.theme-glass .btn:active { box-shadow: inset 0 2px 5px rgba(0,0,0,.35), 0 2px 5px rgba(1,4,10,.3); }
body.theme-glass .btn.primary { background: linear-gradient(180deg, rgba(147,197,253,.75), rgba(37,99,235,.72) 55%, rgba(23,63,158,.78));
  color: #fff; border-color: rgba(255,255,255,.5); }
body.theme-glass .lrow, body.theme-glass .dCard { /* etched glass
   * pieces floating over the map: a frosted face, a hairline groove
   * cut around the edge (the double inset line), light caught on
   * the top edge, and a soft cast shadow lifting them off the map */
  background: linear-gradient(165deg, rgba(255,255,255,.14), rgba(255,255,255,.03) 55%, rgba(4,8,16,.08));
  background-color: rgba(10,15,24, calc(var(--glass-o) * .4)); /* a
   * dark wash under the etch, scaled with the Opacity slider — at
   * the shipped default it is the same .25 it has always been, and
   * it thins with the fill so the low corner goes truly clear */
  background-color: color-mix(in srgb, rgba(var(--glass-tint), calc(var(--glass-o) * .4)) calc(var(--glass-tint-a) * 100%), rgba(10,15,24, calc(var(--glass-o) * .4)));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * .67)) saturate(145%); backdrop-filter: blur(calc(var(--glass-blur) * .67)) saturate(145%);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(0,0,0,.24),
    inset 0 0 0 1px rgba(255,255,255,.05), inset 0 -10px 18px rgba(0,0,0,.10),
    0 8px 18px rgba(1,4,10,.34); }
body.theme-glass .lrow b, body.theme-glass #detailBody h1, body.theme-glass .sheetHead span {
  text-shadow: 0 1px 0 rgba(255,255,255,.14), 0 2px 6px rgba(0,0,0,.35); }
body.theme-glass #searchInput, body.theme-glass .fld select, body.theme-glass .fld textarea,
body.theme-glass .reportForm textarea {
  background: rgba(255,255,255,.13); color: #fff; border-color: rgba(255,255,255,.35); }
body.theme-glass #feedbackBtn { /* a piece of BLUE glass — tinted
   * through its depth, a bright specular cap, the word stamped on
   * top; its tint is deep enough that the white word holds the
   * contrast floor over the night map (proved in qa-glass-v2.js) */
  background: radial-gradient(100% 42% at 50% 0%, rgba(191,219,254,.45), rgba(191,219,254,0) 62%),
    linear-gradient(180deg, rgba(37,99,235,.88), rgba(30,64,175,.90) 52%, rgba(23,37,84,.92));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * .67)) saturate(170%); backdrop-filter: blur(calc(var(--glass-blur) * .67)) saturate(170%);
  border: 1px solid rgba(255,255,255,.55); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.80), inset 0 -2px 4px rgba(2,10,40,.45), 0 10px 22px rgba(1,4,10,.45); }
body.theme-glass #locateBtn { /* floats alone over the map: it takes
   the dark chrome glass, not the pale button gradient, so its
   symbol stays readable on a light stretch of map */
  background: linear-gradient(168deg, rgba(255,255,255,.22), rgba(255,255,255,.04) 45%, rgba(4,8,16,.12)), rgba(13,18,29,.58);
  color: #fff; }
body.theme-glass .leaflet-control-attribution { background: rgba(10,14,22,.55) !important; color: #dbe4f0 !important; }
body.theme-glass .leaflet-control-attribution a { color: #dbe4f0 !important; }
/* the Leaflet zoom pair is chrome too — in Glass it wears the same
 * dark beveled glass as the locate button, never the stock white */
body.theme-glass .leaflet-bar { border: 1px solid rgba(255,255,255,.34); border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 22px rgba(1,4,10,.42); overflow: hidden; }
body.theme-glass .leaflet-bar a { width: 34px; height: 34px; line-height: 34px; color: #fff;
  background: linear-gradient(168deg, rgba(255,255,255,.22), rgba(255,255,255,.04) 45%, rgba(4,8,16,.12)), rgba(13,18,29,.62);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * .67)) saturate(150%); backdrop-filter: blur(calc(var(--glass-blur) * .67)) saturate(150%);
  border-bottom: 1px solid rgba(255,255,255,.22); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
body.theme-glass .leaflet-bar a:last-child { border-bottom: 0; }
body.theme-glass .leaflet-bar a:hover { background: linear-gradient(168deg, rgba(255,255,255,.30), rgba(255,255,255,.06) 45%, rgba(4,8,16,.10)), rgba(23,32,48,.66); }

/* ---- the Liquid glass block's own controls (house standard) -- */
.swatchRow { display: flex; gap: 10px; align-items: center; margin: 2px 0 12px; }
.swatch { width: 34px; height: 34px; border-radius: 50%; flex: none;
  border: 2px solid var(--line); background: var(--sw, transparent);
  color: var(--dim); font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center; }
.swatch[aria-pressed="true"] { border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent); }
.swatchPicker { width: 34px; height: 34px; border-radius: 50%; flex: none;
  overflow: hidden; border: 2px dashed var(--line); cursor: pointer;
  display: inline-block; }
.swatchPicker input[type="color"] { width: 100%; height: 100%;
  border: 0; padding: 0; background: none; cursor: pointer; }
.switchRow { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; font-weight: 650; }
.switchRow input[type="checkbox"] { width: 22px; height: 22px; flex: none;
  accent-color: var(--accent); }

/* ---- islands (addenda A3/A4/A5) ---- */
.wk-island-label { pointer-events: none; }
.wk-island-label span { position: absolute; transform: translate(-50%, -190%);
  white-space: nowrap; font: 700 13px/1.2 -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #0d2f52; letter-spacing: .01em;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff, 0 1px 2px #fff, 0 -1px 2px #fff, 1px 0 2px #fff, -1px 0 2px #fff; }
.islInfoBtn { display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #1d4ed8; color: #fff; border: 2px solid #fff;
  font: italic 700 16px/1 Georgia, "Times New Roman", serif;
  box-shadow: 0 2px 9px rgba(2, 10, 30, .5); cursor: pointer; }
.warnBlock { border: 2.5px solid #b91c1c; background: #fef2f2; color: #7f1d1d;
  border-radius: 14px; padding: 14px 15px; margin: 0 0 14px; }
.warnBlock h3 { margin: 0 0 6px; font-size: 19px; letter-spacing: .04em; color: #991b1b; }
.warnBlock p { margin: 0; font-size: 16.5px; font-weight: 600; }
body.theme-night .warnBlock { background: #431407; color: #ffedd5; border-color: #ef4444; }
body.theme-night .warnBlock h3 { color: #fca5a5; }
body.theme-glass .warnBlock { /* the floor, doubled: near-solid */
  background: linear-gradient(168deg, rgba(255,255,255,.14), rgba(255,255,255,0) 45%), rgba(69, 10, 10, .92);
  color: #fee2e2; border-color: #f87171; backdrop-filter: blur(calc(var(--glass-blur) * .78)) saturate(150%); -webkit-backdrop-filter: blur(calc(var(--glass-blur) * .78)) saturate(150%); }
body.theme-glass .warnBlock h3 { color: #fca5a5; }

/* ---- report door (addendum A1) ---- */
.reportBtn { margin-top: 2px; }
.reportForm { margin-top: 12px; display: grid; gap: 9px; }
.reportForm[hidden] { display: none; }
.reportForm label { font-weight: 650; }
.reportForm textarea { font: inherit; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface2); color: var(--ink); }
.reportState { margin: 0; font-size: 14.5px; }

/* ---- cutover 2026-11-01: filters tree, shelf dots, services ---- */
.wk-mk--dot { display: block; }
.wk-mk--dot .dotIn { display: block; width: 11px; height: 11px; margin: 1.5px;
  border-radius: 50%; background: var(--mk); border: 1.6px solid rgba(255,255,255,.92);
  box-shadow: 0 1px 4px rgba(2,10,30,.45); }
.svcLine { margin: 0 0 8px; line-height: 1.45; }
.svcLine:last-child { margin-bottom: 0; }
#filtersBody { margin-top: 14px; }
.fNode { }
.fRow { display: flex; align-items: center; gap: 9px; padding: 8px 6px;
  border-bottom: 1px solid var(--line); cursor: pointer; min-height: 40px; }
.fRow .fLabel { flex: 1; font-weight: 560; }
.fRow .fCount { color: var(--dim); font-size: 13.5px; }
.fExp { width: 26px; text-align: center; color: var(--dim); font-size: 15px; }
.fExpNone { }
.tri { flex: none; width: 21px; height: 21px; border-radius: 6px;
  border: 2px solid var(--dim); position: relative; background: transparent; }
.tri-on { background: #1d4ed8; border-color: #1d4ed8; }
.tri-on::after { content: "✓"; position: absolute; inset: 0; color: #fff;
  font-size: 14px; line-height: 18px; text-align: center; font-weight: 700; }
.tri-half { background: linear-gradient(90deg, #1d4ed8 50%, transparent 50%); border-color: #1d4ed8; }
.tri-off { background: transparent; }
body.theme-glass .fRow { border-bottom-color: rgba(255,255,255,.16); }
body.theme-glass .tri { border-color: rgba(255,255,255,.65); }
body.theme-glass .tri-on, body.theme-glass .tri-half { border-color: #7db4ff; }