/* Twin Mark — glass layer (2026-10-11)
   Loaded AFTER app.css on every page. app.css stays the design system; this
   file only re-skins it as frosted-glass widgets floating over a wallpaper:
   a detached sidebar, one smoked-glass main panel, KPI tiles lit in their own
   hue, and the right rail (renderRail in crm-app.js).
   Apart from the rail, nothing here changes markup or behaviour — remove the
   <link> to revert the look (app.css hides .rail by default, so it simply disappears).

   Rules for editing this file:
   - app.css re-sizes things inside @media blocks. Any property set here that
     app.css also sets in a media query must be re-declared in the matching
     block at the bottom of this file, or the desktop value wins on phones.
   - Translucent surfaces stack. Anything that needs to be READ on its own
     over the page (panel, modal, palette, toast, menus) uses --glass-strong. */

:root {
  --wallpaper: url("../img/wallpapers/hills.jpg");
  --wall-dim:  rgba(6,7,12,0.20);

  /* glass fills, darkest to lightest */
  --glass-strong: rgba(16,18,27,0.86);
  --glass:        rgba(14,16,24,0.54);
  --glass-side:   rgba(12,14,22,0.50);
  --glass-line:   rgba(255,255,255,0.09);
  --glass-rim:    rgba(255,255,255,0.10);   /* the lit top edge of a pane */
  --glass-blur:   blur(18px) saturate(1.5);
  --scrim:        rgba(4,5,9,0.38);
  --menu-bg:      #1C1F29;                  /* native <option> lists can't be translucent */

  /* surfaces become tints over the glass instead of solid fills */
  --surface:   rgba(255,255,255,0.045);
  --surface-2: rgba(255,255,255,0.08);
  --line:      rgba(255,255,255,0.085);
  --line-2:    rgba(255,255,255,0.16);
  --muted:     #9DA3B5;
  --faint:     #6E7489;

  /* widget hues — each KPI tile, and the rail's day marks, take one */
  --hue-gold:   237,169,63;
  --hue-green:  52,211,153;
  --hue-blue:   91,141,239;
  --hue-violet: 167,139,250;
  --hue-red:    240,86,74;
  --hue-slate:  144,150,168;

  --radius:   18px;
  --radius-s: 10px;
  --radius-l: 26px;
  --shadow-1: 0 1px 0 var(--glass-rim) inset, 0 8px 24px -14px rgba(0,0,0,.55);
  --shadow-2: 0 12px 32px -10px rgba(0,0,0,.55);
  --shadow-3: 0 24px 70px -12px rgba(0,0,0,.7);
}

/* ── WALLPAPER ──
   On a fixed pseudo-element rather than background-attachment: fixed, which
   iOS Safari ignores. */
body { background: var(--bg); }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--wall-dim), var(--wall-dim)), var(--wallpaper) center / cover no-repeat;
}
html { scrollbar-color: rgba(255,255,255,0.18) transparent; }

/* ── SHELL: floating sidebar + one glass main panel ── */
.shell { padding: 14px; gap: 14px; }

.sidebar {
  top: 14px;
  height: calc(100vh - 28px); height: calc(100dvh - 28px);
  border: 1px solid var(--glass-line); border-radius: var(--radius-l);
  background: var(--glass-side);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-1), var(--shadow-3);
  overflow-y: auto; scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }
.workspace { border-color: var(--glass-line); background: var(--surface); border-radius: 14px; }

/* active nav = a lit gold tile, like a selected widget */
.nav { gap: 3px; }
.nav-item { border-radius: 12px; }
.nav-item:hover { background: var(--surface-2); }
.nav-item.active {
  background: linear-gradient(135deg, var(--amber-hi), var(--amber) 55%, var(--accent-deep));
  color: var(--on-accent); font-weight: 600;
  box-shadow: 0 6px 18px -8px rgba(var(--amber-rgb), 0.75), inset 0 1px 0 rgba(255,255,255,0.35);
}
.nav-item.active::before { display: none; }
.nav-item.active svg { color: var(--on-accent); }
.nav-item.active .nav-chevron-btn { color: var(--on-accent); }
.nav-sub { border-left-color: var(--glass-line); }
.nav-sub-item { border-radius: 9px; }
.signout-row { border-radius: 12px; }

.main {
  min-height: calc(100vh - 28px); min-height: calc(100dvh - 28px);
  border: 1px solid var(--glass-line); border-radius: var(--radius-l);
  background: var(--glass);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-1), var(--shadow-3);
}
.topbar {
  height: 62px;
  border-bottom: 1px solid var(--glass-line);
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  background: rgba(var(--bg-rgb), 0.38);
}
.view-title { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.search-stub {
  border-radius: 999px; padding: 7px 12px;
  border-color: var(--glass-line); background: rgba(255,255,255,0.06);
}
.kbd { background: rgba(255,255,255,0.06); border-color: var(--glass-line); }

/* ── BUTTONS / CONTROLS ── */
.btn-ghost { background: rgba(255,255,255,0.04); border-color: var(--glass-line); }
.btn-ghost:hover { background: rgba(255,255,255,0.08); }
.input, select.input, textarea.input { background: rgba(255,255,255,0.055); border-color: var(--glass-line); }
.input:focus { box-shadow: 0 0 0 3px var(--amber-dim); }
select.input option, select.input optgroup { background: var(--menu-bg); color: var(--text); }

.seg { border-radius: 999px; padding: 3px; gap: 2px; border-color: var(--glass-line); background: rgba(255,255,255,0.05); }
.seg-btn { border-radius: 999px; }
.seg-btn.on { box-shadow: 0 4px 14px -6px rgba(var(--amber-rgb), 0.8); }
.cal-step { border-radius: 999px; }
.layer { background: rgba(255,255,255,0.04); border-color: var(--glass-line); }

/* ── WIDGETS (cards and everything card-shaped) ── */
.card, .table-wrap, .kcol, .cal-grid, .cal-foot, .call-strip, .ktray-zone {
  border-color: var(--glass-line);
}
.task-row, .prospect-row { border-radius: 14px; }
.task-row { background: var(--surface); border-color: var(--glass-line); }
.kcard { border-radius: 12px; border-color: var(--glass-line); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
.kcard:hover { background: rgba(255,255,255,0.11); }
.next7-day { border-radius: 14px; }
.console-phone { border-radius: 14px; }
.outcome-btn { border-radius: 12px; }
.ev-block { border-radius: 14px; }
table.data tbody tr:hover { background: rgba(255,255,255,0.04); }

/* scroll-edge fades on the board fade to the glass, not to the old black */
.board-wrap::before { background: linear-gradient(to right, rgba(var(--bg-rgb), 0.55), transparent); }
.board-wrap::after  { background: linear-gradient(to left,  rgba(var(--bg-rgb), 0.55), transparent); }
.kcol { max-height: calc(100vh - 276px); max-height: calc(100dvh - 276px); }

/* the console's save bar floats as its own strip of glass */
.console-actions {
  background: rgba(var(--bg-rgb), 0.5);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-top-color: var(--glass-line);
}

/* ── KPI TILES: dark glass, each lit in its own hue ──
   A glow from the top-right corner and a hue badge — the colour says which
   tile, the number stays white. (Mark had the bottom-edge hue bar removed.) */
.kpis > .kpi:nth-child(4n+1) { --hue: var(--hue-gold); }
.kpis > .kpi:nth-child(4n+2) { --hue: var(--hue-green); }
.kpis > .kpi:nth-child(4n+3) { --hue: var(--hue-blue); }
.kpis > .kpi:nth-child(4n+4) { --hue: var(--hue-violet); }
/* a tile that means something specific names its own hue (Money in is green,
   Money out red), so a grid of six doesn't inherit the cycle's leftovers */
.kpis > .kpi.hue-gold   { --hue: var(--hue-gold); }
.kpis > .kpi.hue-green  { --hue: var(--hue-green); }
.kpis > .kpi.hue-blue   { --hue: var(--hue-blue); }
.kpis > .kpi.hue-violet { --hue: var(--hue-violet); }
.kpis > .kpi.hue-red    { --hue: var(--hue-red); }
.kpis > .kpi.hue-slate  { --hue: var(--hue-slate); }
.kpi {
  --hue: var(--hue-gold);
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 95% at 100% 0%, rgba(var(--hue), 0.24), transparent 62%),
    linear-gradient(160deg, rgba(255,255,255,0.075), rgba(255,255,255,0.02));
  border: 1px solid rgba(var(--hue), 0.24); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 14px 34px -18px rgba(var(--hue), 0.55);
}
.kpi::after {
  content: ''; position: absolute; top: 14px; right: 14px;
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--hue)) 0 3.5px, transparent 4px), rgba(var(--hue), 0.18);
  box-shadow: inset 0 0 0 1px rgba(var(--hue), 0.45), 0 0 14px rgba(var(--hue), 0.45);
}
.kpi-label { padding-right: 28px; font-weight: 600; color: rgba(var(--hue), 0.95); }
.kpi-val { font-size: 29px; }

/* ── RIGHT RAIL ──
   Shown from 1280px up, on every view but Pipeline and Calendar (renderRail
   sets body.has-rail). Same glass as the sidebar. */
.rail { display: none; }
@media (min-width: 1280px) {
  body.ready.has-rail .rail {
    display: flex; flex-direction: column; gap: 12px;
    width: 300px; flex-shrink: 0;
    position: sticky; top: 14px;
    height: calc(100vh - 28px); height: calc(100dvh - 28px);
    padding: 14px; overflow-y: auto; scrollbar-width: none;
    border: 1px solid var(--glass-line); border-radius: var(--radius-l);
    background: var(--glass-side);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-1), var(--shadow-3);
  }
}
.rail::-webkit-scrollbar { display: none; }
.rail-sec {
  background: var(--surface); border: 1px solid var(--glass-line);
  border-radius: var(--radius); padding: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.rail-hd { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.rail-title { flex: 1; font-size: 12.5px; font-weight: 600; }
.rail-title-bar { display: flex; align-items: center; gap: 8px; }
.rail-title-bar::before { content: ''; width: 3px; height: 13px; border-radius: 2px; background: var(--amber); }
.rail-link { font-size: 11px; color: var(--faint); text-decoration: none; }
.rail-link:hover { color: var(--amber); }
.rail-step {
  width: 24px; height: 24px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; font-size: 14px; line-height: 1;
  background: var(--surface-2); border: 1px solid var(--glass-line); color: var(--muted);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.rail-step:hover { color: var(--text); border-color: var(--line-2); }

/* profile */
.rail-me-row { display: flex; align-items: center; gap: 11px; }
.rail-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--line-2); color: var(--text);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.05);
}
.rail-avatar .logo-mark { height: 12px; }
.rail-me-txt { display: flex; flex-direction: column; min-width: 0; }
.rail-me-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-me-sub { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 13px;
  border-radius: 12px; background: rgba(var(--bg-rgb), 0.35); border: 1px solid var(--glass-line);
}
.rail-stat {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 9px 4px; text-decoration: none; border-radius: 12px;
  transition: background var(--t-fast);
}
.rail-stat + .rail-stat { border-left: 1px solid var(--glass-line); border-radius: 0; }
.rail-stat:hover { background: var(--surface-2); }
.rail-stat b { font-family: var(--mono); font-size: 16px; font-variant-numeric: tabular-nums; }
.rail-stat span { font-size: 10px; color: var(--faint); }

/* month */
.rail-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.rail-dow { font-size: 9.5px; font-weight: 600; color: var(--faint); padding-bottom: 3px; }
.rail-day {
  aspect-ratio: 1; border-radius: 50%; padding: 0;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums;
  background: none; border: 1px solid transparent; color: var(--muted);
  transition: background var(--t-fast), color var(--t-fast);
}
button.rail-day:hover { background: var(--surface-2); color: var(--text); }
.rail-day.cb   { --hue: var(--hue-green); }
.rail-day.task { --hue: var(--hue-gold); }
.rail-day.late { --hue: var(--hue-red); }
.rail-day:is(.cb, .task, .late) { background: rgba(var(--hue), 0.2); border-color: rgba(var(--hue), 0.4); color: rgb(var(--hue)); font-weight: 600; }
.rail-day.today {
  background: linear-gradient(135deg, var(--amber-hi), var(--amber) 55%, var(--accent-deep));
  color: var(--on-accent); font-weight: 700;
  box-shadow: 0 4px 12px -4px rgba(var(--amber-rgb), 0.8);
}
.rail-legend { display: flex; gap: 10px; margin-top: 10px; font-size: 10px; color: var(--faint); }
.rail-legend span { display: inline-flex; align-items: center; gap: 4px; }
.rail-legend span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--hue)); }
.rail-legend .cb { --hue: var(--hue-green); }
.rail-legend .task { --hue: var(--hue-gold); }
.rail-legend .late { --hue: var(--hue-red); }

/* scheduled */
.rail-sched { flex: 1; }
.rail-list { display: flex; flex-direction: column; gap: 7px; }
.rail-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px; border-radius: 12px;
  background: rgba(var(--bg-rgb), 0.3); border: 1px solid var(--glass-line);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.rail-item:hover { background: var(--surface-2); border-color: var(--line-2); }
.rail-thumb {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--text);
  background: linear-gradient(135deg, var(--tc), rgba(var(--bg-rgb), 0.6));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.rail-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rail-tag {
  align-self: flex-start; font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--amber); background: var(--amber-dim); border-radius: 4px; padding: 0 5px;
}
.rail-item-title { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-item-sub { font-size: 10.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-when { flex-shrink: 0; font-family: var(--mono); font-size: 10px; color: var(--muted); align-self: flex-start; }
.rail-when.late { color: var(--down); }
.rail-empty { font-size: 12px; color: var(--faint); padding: 8px 2px; }

/* ── WALLPAPER PICKER (js/wallpaper.js) ──
   The button sits in the sidebar's top-right corner, level with the wordmark;
   it opens a centred window of live thumbnails, five to a row. */
.wall-btn {
  position: absolute; top: 13px; right: 12px;
  width: 30px; height: 30px; border-radius: 10px; padding: 0;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--glass-line); color: var(--muted);
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.wall-btn:hover { color: var(--amber); background: var(--amber-dim); border-color: rgba(var(--amber-rgb), 0.35); }
.wall-btn:active { transform: scale(0.94); }

.wall-scrim { z-index: 120; padding-top: 8vh; }
.wall-modal.modal { max-width: 860px; max-height: 84vh; max-height: 84dvh; padding: 22px 24px 24px; }
.wall-hd { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.wall-hd > div { flex: 1; min-width: 0; }
.wall-hd .modal-title { margin-bottom: 2px; }
.wall-sub { font-size: 12px; color: var(--muted); }
.wall-group { margin-top: 16px; }
.wall-group .panel-sec-title { margin-bottom: 9px; }
.wall-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.wall-grid-lg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.wall-grid-lg .wall-thumb { aspect-ratio: 16 / 9; }
.wall-opt {
  display: flex; flex-direction: column; gap: 7px; padding: 0;
  background: none; border: none; text-align: left; color: var(--muted);
}
.wall-thumb {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 10;
  border-radius: 12px; background-size: cover; background-position: center;
  border: 1px solid var(--glass-line);
  box-shadow: 0 8px 20px -12px rgba(0,0,0,.8);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t-fast);
}
.wall-opt:hover .wall-thumb { transform: translateY(-2px); border-color: var(--line-2); box-shadow: 0 12px 26px -12px rgba(0,0,0,.9); }
.wall-opt:focus-visible { outline: none; }
.wall-opt:focus-visible .wall-thumb { outline: 2px solid var(--amber); outline-offset: 2px; }
.wall-opt.on .wall-thumb { border-color: transparent; box-shadow: 0 0 0 2px var(--amber), 0 10px 26px -10px rgba(var(--amber-rgb), 0.6); }
/* the tick on the chosen one */
.wall-opt.on .wall-thumb::after {
  content: '✓'; position: absolute; top: 7px; right: 7px;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--amber); color: var(--on-accent);
}
.wall-name { font-size: 11.5px; font-weight: 500; }
.wall-opt.on .wall-name { color: var(--text); font-weight: 600; }

/* ── CALENDAR GRID ──
   app.css draws hairlines by letting the grid's background show through a 1px
   gap. With translucent cells that background bleeds through every cell, so
   here the lines are right/bottom borders instead; the trailing bottom border
   is pulled under the grid's own edge so no seam is drawn twice. */
.cal-weeks { gap: 0; background: none; margin-bottom: -1px; }
.cal-cell { background-color: transparent; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell:hover { background-color: rgba(255,255,255,0.05); }
.cal-dow { border-bottom-color: var(--line); }

/* ── OVERLAYS: strong glass, blurred scrims ── */
.panel-scrim, .modal-scrim, .palette-scrim {
  background: var(--scrim);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.panel {
  top: 12px; right: 12px; bottom: 12px;
  border: 1px solid var(--glass-line); border-radius: 24px;
  background: var(--glass-strong);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  transform: translateX(calc(100% + 24px));
  overflow: hidden;
}
.panel.open { transform: none; }
.panel-hd { border-bottom-color: var(--glass-line); }
.panel-x { border-radius: 999px; }
.modal, .palette {
  border-color: var(--glass-line); border-radius: 22px;
  background: var(--glass-strong);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.palette-input { border-bottom-color: var(--glass-line); }
.palette-item { border-radius: 10px; }
.toast {
  border-color: var(--glass-line); border-radius: 14px;
  background: var(--glass-strong);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.drag-ghost {
  background: var(--glass-strong);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

/* ── LOGIN ── */
.login-card {
  border-color: var(--glass-line); border-radius: var(--radius-l);
  background: var(--glass-strong);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-1), var(--shadow-3);
}

/* ── BOOT SKELETON: same floating layout, so the page doesn't jump on load ── */
.boot-skeleton { background: none; padding: 14px; gap: 14px; }
.boot-skeleton .sidebar { background: var(--glass-side); }
.boot-skeleton-main {
  border: 1px solid var(--glass-line); border-radius: var(--radius-l);
  background: var(--glass);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.boot-skeleton-topbar { height: 62px; }

/* ── TAB BAR (phones): a floating glass dock ── */
.tabbar {
  left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  padding: 6px;
  border: 1px solid var(--glass-line); border-radius: 22px;
  background: var(--glass-strong);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-3);
}
.tab { border-radius: 14px; }
.tab.active { background: rgba(var(--amber-rgb), 0.14); }

/* ── RESPONSIVE (mirrors app.css's breakpoints) ── */
@media (max-width: 860px) {
  .sidebar { border-radius: 20px; }
  /* the rail is too narrow for a corner button: it drops under the logo */
  .wall-btn { position: static; margin: 12px auto 0; flex-shrink: 0; }
  .wall-grid, .wall-grid-lg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav-item.active { box-shadow: 0 4px 12px -6px rgba(var(--amber-rgb), 0.75); }
}
@media (max-width: 620px) {
  /* a phone has no room for margins around panes: the main panel goes
     edge to edge and the wallpaper shows only through the glass */
  .shell, .boot-skeleton { padding: 0; gap: 0; }
  .main, .boot-skeleton-main { min-height: 100vh; min-height: 100dvh; border: none; border-radius: 0; }
  .topbar { border-radius: 0; height: 56px; }
  .boot-skeleton-topbar { height: 56px; }
  .view-title { font-size: 15px; }
  .kcol { max-height: calc(100dvh - 316px); }
  .kpi::after { top: 11px; right: 11px; width: 16px; height: 16px; }
  .kpi-label { padding-right: 20px; }
  .kpi-val { font-size: 20px; }
  .panel { top: 8px; right: 8px; bottom: 8px; border-radius: 20px; }
  .wall-scrim { padding-top: 20px; }
  .wall-modal.modal { padding: 18px 16px 20px; }
  .wall-grid, .wall-grid-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* clear the floating dock, which sits 10px higher than the old flush bar */
  .console-actions { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .toast { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}

/* ── ACCESSIBILITY / FALLBACKS ── */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: rgba(14,16,24,0.94); --glass-side: rgba(12,14,22,0.95); --glass-strong: rgba(16,18,27,0.98); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(14,16,24,0.9); --glass-side: rgba(12,14,22,0.92); --glass-strong: rgba(16,18,27,0.97); }
}