/* ═══════════════════════════════════════════════════════════════════════
   Embassy Eden · shared glass buttons
   ───────────────────────────────────────────────────────────────────────
   Client 2026-09-04, with the Citadel nav tray as the reference:
   "in eaden also make sure to have this glass finish as attached image
    for the buttons".

   This is a port of Embassy Citadel's `ec-glass.css` recipe into Eden's
   warm palette. The structure is what makes that reference read as glass,
   so the structure is what is carried over — not the slate-blue colour,
   which belongs to Citadel.

   THE RECIPE (from ec-glass.css, light-ground variant):
     · a 155° two-stop gradient in near-white paper, not a flat fill
     · blur(18px) saturate(150%) so the ground smears rather than reads
     · a bright hairline border in the same paper
     · 0 10px 30px -12px drop shadow — the negative spread pulls it tight,
       which is what makes it float instead of haze
     · inset 0 1px 0 white, the lit top edge of a pane

   THE STRUCTURE — the part that matters most:
     A group of buttons is ONE tray of glass holding TRANSPARENT tiles.
     The tiles have no glass of their own; they take a faint wash and an
     accent underline only when hovered or current. Eden previously drew
     every chip as its own opaque slab, which is why a row of them read
     as heavy beige blocks rather than a single pane.

   Eden's accent is the estate green (--e-ink) where Citadel uses gold.
   Every Eden screen sits on a light ground — the landing montage, the
   pale map, paper-toned drawings — so only the light variant is needed.

   Loaded last, so it is the single source of truth for button material.
   Earlier glass passes in v8-shell.css remain for structure (sizing and
   layout) and are superseded here on colour, border and shadow only.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* ── how transparent, and why ──────────────────────────────────────────
     Client 2026-09-04: "why are the buttons not transparent … shape and all
     is fine but its not transparent".

     They were right, and the cause was a bad assumption in the port. Citadel
     has a "light" glass variant at ~.74 alpha and I took those numbers as the
     light-ground answer — but Citadel's light variant still sits over a DARK
     slate map, where a pale film at .74 obviously reads as glass. Every one
     of Eden's grounds is light: the warm montage, the paper drawings, the
     pale map. A pale film at .74 over a pale ground has nothing to be seen
     against, so it renders as a solid slab no matter how good the hairline is.

     Transparency is a RELATIONSHIP with what is behind, not a number that
     travels between brands. On a light ground the fill has to drop far enough
     that the ground still reads through it, and the blur, the lit edge and
     the shadow do the work the fill was doing. */
  --eg-hair:rgba(255,255,255,.58);
  --eg-hi:rgba(255,250,246,.32);
  --eg-lo:rgba(254,236,222,.18);

  --eg-hover-hi:rgba(255,250,246,.46);
  --eg-hover-lo:rgba(254,236,222,.30);

  --eg-on-hi:rgba(255,250,246,.52);
  --eg-on-lo:rgba(254,236,222,.36);

  --eg-wash:rgba(255,250,246,.30);          /* tile hover, inside a tray */
  --eg-wash-on:rgba(255,250,246,.56);       /* tile current, inside a tray */

  --eg-shadow:0 10px 30px -12px rgba(63,89,58,.34),inset 0 1px 0 rgba(255,255,255,.62);
  --eg-shadow-l:0 16px 40px -14px rgba(63,89,58,.42),inset 0 1px 0 rgba(255,255,255,.72);
  /* heavier blur now that the fill is thin — this is what keeps the type
     legible over a busy map instead of the opacity */
  --eg-blur:blur(24px) saturate(160%);
  --eg-ease:cubic-bezier(.22,1,.36,1);
  --eg-accent:#3f593a;                      /* estate green; Citadel's gold */
}

/* ── the pane · a single control made of glass ─────────────────────────── */
.eg-pane,
.tm-toggle,
.icon-action,
.efab-main,
.map-zoom button,
.model-tools button,
.drawing-actions button,
.md-row,
.vs-card{
  border:1px solid var(--eg-hair)!important;
  background:linear-gradient(155deg,var(--eg-hi),var(--eg-lo))!important;
  -webkit-backdrop-filter:var(--eg-blur)!important;backdrop-filter:var(--eg-blur)!important;
  box-shadow:var(--eg-shadow)!important;
  color:var(--e-ink-strong)!important;
  transition:background .26s ease,border-color .26s ease,
             transform .26s var(--eg-ease),box-shadow .26s ease!important;
}
.eg-pane:hover,
.tm-toggle:hover,
.icon-action:hover,
.efab-main:hover,
.map-zoom button:hover,
.model-tools button:hover,
.drawing-actions button:hover,
.md-row:hover,
.vs-card:hover{
  background:linear-gradient(155deg,var(--eg-hover-hi),var(--eg-hover-lo))!important;
  box-shadow:var(--eg-shadow-l)!important;
}
.eg-pane:active,
.tm-toggle:active,
.icon-action:active,
.efab-main:active,
.map-zoom button:active,
.drawing-actions button:active{transform:scale(.96)!important}

/* ── the tray · a group of buttons is one pane ─────────────────────────── */
.tm-items,
.vs-sides,
.gal-switch,
.poi-cats,
.location-view .poi-cats{
  gap:calc(5px * var(--ui))!important;
  padding:calc(6px * var(--ui))!important;
  border-radius:calc(20px * var(--ui))!important;
  border:1px solid var(--eg-hair)!important;
  background:linear-gradient(155deg,var(--eg-hi),var(--eg-lo))!important;
  -webkit-backdrop-filter:var(--eg-blur)!important;backdrop-filter:var(--eg-blur)!important;
  box-shadow:var(--eg-shadow)!important;
}

/* ── the tile · transparent until it is wanted ─────────────────────────── */
.tm-items button,
.vs-sides button,
.gal-switch button,
.poi-cats button,
.location-view .poi-cats button{
  position:relative;
  border:1px solid transparent!important;
  background:transparent!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:none!important;
  color:var(--e-ink-strong)!important;
  border-radius:calc(15px * var(--ui))!important;
  transition:background .26s ease,border-color .26s ease,
             transform .26s var(--eg-ease)!important;
}
.tm-items button:hover,
.vs-sides button:hover,
.gal-switch button:hover,
.poi-cats button:hover,
.location-view .poi-cats button:hover{
  background:var(--eg-wash)!important;
  border-color:rgba(63,89,58,.14)!important;
  box-shadow:none!important;
  transform:none!important;
}
.tm-items button:active,
.vs-sides button:active,
.gal-switch button:active,
.poi-cats button:active{transform:scale(.955)!important}

/* current — a brighter tile against the tray, plus the accent rule.
   This replaces the pressed-slab treatment of v8-34: inside a tray the
   inset shadow read as a dent in the pane rather than a selection. */
.tm-items button.is-current,
.vs-sides button.is-active,
.gal-switch button.is-active,
.poi-cats button.is-active,
.location-view .poi-cats button.is-active{
  background:var(--eg-wash-on)!important;
  border-color:rgba(63,89,58,.20)!important;
  box-shadow:none!important;
  color:var(--e-ink-strong)!important;
  font-weight:600!important;
  transform:none!important;
}
.tm-items button::after,
.vs-sides button::after,
.gal-switch button::after,
.poi-cats button::after{
  content:"";position:absolute;left:50%;bottom:5px;
  width:0;height:1px;background:var(--eg-accent);
  transform:translateX(-50%);
  transition:width .3s var(--eg-ease);
}
.tm-items button:hover::after,
.tm-items button.is-current::after,
.vs-sides button:hover::after,
.vs-sides button.is-active::after,
.gal-switch button:hover::after,
.gal-switch button.is-active::after,
.poi-cats button:hover::after,
.poi-cats button.is-active::after{width:26px}

/* ═══ THE NAV TRAY · the reference itself ════════════════════════════════
   Icon over label, the way the attached image is built. The head grows to
   sit beside a taller tray; it keeps the fold-to-close mark from v8-35. */
/* Every fixed dimension in this tray is a token so eden-scale.css can retune
   the whole nav for tablet and TV without re-stating a single rule. The
   defaults are the 1280x800 / 1366x1024 values it was drawn at. */
.top-menu{gap:var(--nav-gap)!important;align-items:flex-start!important}

.tm-toggle{
  width:var(--nav-head)!important;min-width:var(--nav-head)!important;
  height:var(--nav-head)!important;min-height:var(--nav-head)!important;
  border-radius:var(--nav-head-r)!important;
}
.tm-burger{width:var(--nav-burger-w)!important;height:var(--nav-burger-h)!important}
.tm-burger span{height:var(--nav-burger-bar)}
.top-menu.is-open .tm-burger span:nth-child(1){transform:translateY(var(--nav-burger-fold)) rotate(45deg)}
.top-menu.is-open .tm-burger span:nth-child(3){transform:translateY(calc(-1 * var(--nav-burger-fold))) rotate(-45deg)}
.top-menu.is-open .tm-toggle{
  border-color:rgba(63,89,58,.34)!important;
  background:linear-gradient(155deg,var(--eg-on-hi),var(--eg-on-lo))!important;
}

.tm-items{
  padding:var(--nav-tray-pad)!important;
  border-radius:var(--nav-tray-r)!important;
  gap:var(--nav-tray-gap)!important;
  align-items:stretch!important;
}
.tm-items button{
  width:var(--nav-tile-w);
  flex-direction:column;
  align-items:center;justify-content:center;
  gap:var(--nav-tile-gap)!important;
  padding:var(--nav-tile-pad)!important;
  min-height:0!important;
  border-radius:var(--nav-tile-r)!important;
  font-size:var(--nav-label)!important;
  letter-spacing:.11em!important;
  font-weight:400!important;
}
.tm-items button.is-current{font-weight:500!important}
.tm-items button svg{
  width:var(--nav-icon);height:var(--nav-icon);
  stroke:var(--eg-accent);fill:none;stroke-width:1.35;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:.92;
}
.tm-items button.is-current svg{opacity:1}

/* ── the other trays keep their own shapes, only the material changes ──── */
.vs-sides button,
.gal-switch button,
.poi-cats button,
.location-view .poi-cats button{padding-bottom:calc(12px * var(--ui))!important}

/* ── landing scope ──────────────────────────────────────────────────────
   v8-shell.css carries three older passes that style the nav specifically
   over the montage (`.app[data-current-view="home"] .tm-items button`).
   Those selectors outrank the unbounded ones above, so on the landing the
   tiles kept their old opaque fill and the head kept its own lighter
   glass — the row read as slabs again the moment you left the gate.
   The same recipe is re-asserted here at matching specificity; this file
   loads last, so it takes the tie. The older declarations are now inert.  */
.app[data-current-view="home"] .tm-toggle{
  border:1px solid var(--eg-hair)!important;
  background:linear-gradient(155deg,var(--eg-hi),var(--eg-lo))!important;
  box-shadow:var(--eg-shadow)!important;
  color:var(--e-ink-strong)!important;
}
.app[data-current-view="home"] .tm-toggle:hover{
  background:linear-gradient(155deg,var(--eg-hover-hi),var(--eg-hover-lo))!important;
  box-shadow:var(--eg-shadow-l)!important;
}
.app[data-current-view="home"].app .top-menu.is-open .tm-toggle{
  border-color:rgba(63,89,58,.34)!important;
  background:linear-gradient(155deg,var(--eg-on-hi),var(--eg-on-lo))!important;
}
.app[data-current-view="home"] .tm-items button{
  border:1px solid transparent!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--e-ink-strong)!important;
}
.app[data-current-view="home"] .tm-items button:hover{
  background:var(--eg-wash)!important;
  border-color:rgba(63,89,58,.14)!important;
  color:var(--e-ink-strong)!important;
}
.app[data-current-view="home"] .tm-items button.is-current{
  background:var(--eg-wash-on)!important;
  border-color:rgba(63,89,58,.20)!important;
  box-shadow:none!important;
  color:var(--e-ink-strong)!important;
}

/* ── Location · the category column becomes a vertical tray ─────────────
   When the POI list was removed from Location the categories were left as
   free-floating buttons, and v8-shell.css strips the tray explicitly at
   `.location-view .location-copy > .poi-cats` — higher specificity than
   the group rule above. Re-asserted here so the five categories read as
   one pane of glass on the left, the same material as the nav tray.      */
.location-view .location-copy > .poi-cats{
  display:flex!important;flex-direction:column;align-items:stretch;
  gap:5px!important;
  padding:6px!important;
  border:1px solid var(--eg-hair)!important;
  border-radius:20px!important;
  background:linear-gradient(155deg,var(--eg-hi),var(--eg-lo))!important;
  -webkit-backdrop-filter:var(--eg-blur)!important;backdrop-filter:var(--eg-blur)!important;
  box-shadow:var(--eg-shadow)!important;
  width:max-content;
}
.location-view .location-copy > .poi-cats button{
  border:1px solid transparent!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:calc(15px * var(--ui))!important;
  min-height:calc(44px * var(--ui))!important;
}
.location-view .location-copy > .poi-cats button:hover{
  background:var(--eg-wash)!important;
  border-color:rgba(63,89,58,.14)!important;
}
.location-view .location-copy > .poi-cats button.is-active{
  background:var(--eg-wash-on)!important;
  border-color:rgba(63,89,58,.20)!important;
}

/* ── keeping type legible without thickening the glass ──────────────────
   Thin glass buys transparency and spends legibility: Eden's labels are dark
   ink, and over the landing montage they now sit on branches and shadow
   rather than a beige slab.

   Citadel's answer to the same problem is a dark text-shadow — but its type
   is pale on dark glass, and the mirror of that here is a LIGHT halo behind
   dark type. It lifts the label off whatever is behind it while leaving the
   panel as see-through as it was. Opacity stays where the client asked. */
.tm-items button,
.vs-sides button,
.gal-switch button,
.poi-cats button,
.location-view .poi-cats button{
  text-shadow:0 1px 2px rgba(255,248,243,.92),0 0 9px rgba(255,248,243,.75);
}
.tm-items button svg,
.tm-toggle .tm-burger span{
  filter:drop-shadow(0 1px 2px rgba(255,248,243,.9));
}
/* the head's bars are a graphic, not type — give them the same lift */
.tm-toggle .tm-burger span{box-shadow:0 0 6px rgba(255,248,243,.75)}