/* ============================================================
   GemStudio design system — restrained, monochrome, typographic.
   Used by both super-admin and tenant dashboards.
   ============================================================ */

:root {
  --bg:           #F7F9FA;     /* cool light grey — platform canvas */
  --bg-veil:      radial-gradient(1200px 800px at 100% -10%, rgba(189,158,112,0.06), transparent 62%),
                  radial-gradient(900px 700px at -10% 110%, rgba(120,140,160,0.05), transparent 60%);
  --surface:      rgba(255, 255, 255, 0.72);     /* frosted card */
  --surface-solid:#FFFFFF;
  --glass:        rgba(255, 255, 255, 0.55);
  --glass-strong: rgba(255, 255, 255, 0.82);
  --line:         rgba(15, 15, 15, 0.07);
  --line-strong:  rgba(15, 15, 15, 0.14);
  --ink:          #14110E;     /* warm near-black */
  --ink-soft:     rgba(20, 17, 14, 0.62);
  --ink-mute:     rgba(20, 17, 14, 0.42);
  --ink-faint:    rgba(20, 17, 14, 0.24);
  --hover:        rgba(20, 17, 14, 0.04);
  --accent:       #14110E;
  --accent-soft:  rgba(20, 17, 14, 0.92);
  --gold:         #BD9E70;     /* champagne — the Atrium accent */
  --gold-soft:    #D6BE96;
  --gold-glow:    rgba(189, 158, 112, 0.35);
  --gold-tint:    rgba(189, 158, 112, 0.18);
  --paper:        #FBF9F5;
  --paper-2:      #F5F1EA;
  --elevated:     #FFFFFF;
  --on-accent:    #FBF8F3;
  /* Atrium accent scale — black opacity ladder (substitutes their navy tints) */
  --accent-50:    rgba(15, 15, 15, 0.04);
  --accent-100:   rgba(15, 15, 15, 0.08);
  --accent-200:   rgba(15, 15, 15, 0.12);
  --accent-300:   rgba(15, 15, 15, 0.18);
  --accent-400:   rgba(15, 15, 15, 0.24);
  --accent-500:   rgba(15, 15, 15, 0.32);
  --accent-600:   rgba(15, 15, 15, 0.48);
  --success:      #4F7A4D;
  --warning:      #A37038;
  --danger:       #B83A2E;
  --success-bg:   rgba(79, 122, 77, 0.10);
  --warning-bg:   rgba(163, 112, 56, 0.10);
  --danger-bg:    rgba(184, 58, 46, 0.10);
  --info-bg:      rgba(20, 17, 14, 0.05);
  /* Atrium radii — 14 / 20 / 28 are canonical, plus pill */
  --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-xl: 28px; --r-pill: 999px;
  /* Atrium shadows */
  --shadow-neu:        0 14px 34px rgba(20,17,14,0.09);
  --shadow-neu-soft:   inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 0 rgba(20,17,14,0.04);
  --shadow-gold:       0 14px 30px rgba(189,158,112,0.18);
  /* Legacy aliases — keep until all callers migrate */
  --shadow-soft:       0 1px 2px rgba(20,17,14,0.04), 0 12px 40px rgba(20,17,14,0.06);
  --shadow-elev:       0 1px 2px rgba(20,17,14,0.04), 0 24px 60px rgba(20,17,14,0.10);
  --blur:              18px;
  /* iOS / iPadOS motion language.
     `ease-out-quint` (0.16, 1, 0.3, 1) is Apple's stock "soft-pop" used for
     sheets sliding in, menus opening, cards appearing — it's slow at the
     end so things feel like they're "settling" rather than snapping.
     `ease-spring` adds a touch of overshoot for decisive UI actions
     (button confirms, toggles).
     `ease-natural` (0.32, 0.72, 0, 1) is Apple's all-purpose curve for
     small property changes (hover, focus, colour shifts). */
  --ease:              cubic-bezier(0.32, 0.72, 0, 1);   /* alias for ease-natural */
  --ease-natural:      cubic-bezier(0.32, 0.72, 0, 1);
  --ease-pop:          cubic-bezier(0.16, 1, 0.3, 1);    /* soft-pop / settling */
  --ease-spring:       cubic-bezier(0.22, 1.12, 0.32, 1);/* gentle overshoot */
  --ease-emphasised:   cubic-bezier(0.2, 0, 0, 1);       /* iOS emphasised */
  --dur-instant:       80ms;       /* hover-feedback */
  --dur-fast:          180ms;      /* small property shifts */
  --dur:               260ms;      /* entries / exits */
  --dur-slow:          480ms;      /* sheets, drawers */
  --dur-very-slow:     720ms;      /* page-level transitions */
  /* Density-aware base font size — bumped to feel like Safari at 115% */
  --fz-base:           16.5px;
  --fz-base-mobile:    15.25px;
  /* ─── Type system ───────────────────────────────────────────────
     Fraunces — a soft, high-contrast optical serif — carries the
     wordmark, hero titles and editorial numerals. Hanken Grotesk — a
     warm humanist grotesque — carries every piece of UI: nav, labels,
     body, data. Two families, each with one job. No Inter. */
  /* One minimal sans system platform-wide. The decorative serif is retired;
     hierarchy now comes from weight + scale + colour, not a second typeface.
     --font-display is kept as a token (many rules reference it) but points at
     the same grotesque — so "display" just means larger + a heavier weight. */
  --font-display: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-sans:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  /* Fixed rem ramp, ~1.2 ratio. Hierarchy comes from scale + weight +
     colour together, never size alone. */
  --t-micro:   0.6875rem;   /* 11px  — eyebrows, pill caps */
  --t-caption: 0.75rem;     /* 12px  — captions, table heads */
  --t-small:   0.8125rem;   /* 13px  — secondary, nav */
  --t-body:    0.9375rem;   /* 15px  — body, inputs */
  --t-lg:      1.0625rem;   /* 17px  — lead paragraphs */
  --t-h3:      1.375rem;    /* 22px */
  --t-h2:      1.75rem;     /* 28px */
  --t-h1:      2.25rem;     /* 36px  — page titles (display) */
  --t-display: 3rem;        /* 48px  — hero (display) */
  /* Tracking — grotesque body wants a hair tight; display wants tighter still */
  --track-body:    -0.006em;
  --track-display: -0.02em;
  --track-caps:     0.14em;   /* uppercase eyebrows / labels */
}

html[data-theme="dark"] {
  /* Pure-black palette: jet base, deep charcoal surfaces, cool pearl text,
     champagne gold + silver-pearl as complements. Designed to feel like a
     velvet-lined jewellery case under museum lighting. */
  /* Layered black ladder: true-black canvas, three stepped graphite
     greys for surfaces, near-white pearl ink. A whisper of warm tint
     keeps it from going clinical-blue; gold reads like candlelight. */
  --bg:           #000000;     /* L0 — canvas, true black */
  /* Neutral grey depth only — no warm/gold tint (kept strictly black/grey/white). */
  --bg-veil:      radial-gradient(1200px 800px at 100% -10%, rgba(255,255,255,0.022), transparent 62%),
                  radial-gradient(900px 700px at -10% 110%, rgba(255,255,255,0.014), transparent 60%);
  --surface:      rgba(23, 23, 25, 0.74);   /* L2 frosted card */
  --surface-solid:#101012;                   /* L1 raised solid    */
  --elevated:     #19191C;                   /* L3 popovers/menus  */
  --glass:        rgba(13, 13, 15, 0.60);
  --glass-strong: rgba(30, 30, 34, 0.84);
  --line:         rgba(255, 255, 255, 0.08);
  --line-strong:  rgba(255, 255, 255, 0.16);
  --ink:          #F6F6F4;     /* near-white pearl */
  --ink-soft:     rgba(246, 246, 244, 0.70);
  --ink-mute:     rgba(246, 246, 244, 0.47);
  --ink-faint:    rgba(246, 246, 244, 0.28);
  --hover:        rgba(255, 255, 255, 0.05);
  --accent:       #FFFFFF;     /* pure white for primary emphasis */
  --accent-soft:  rgba(255, 255, 255, 0.90);
  --gold:         #BD9E70;     /* same warm champagne — reads beautifully on jet */
  --gold-soft:    #D6BE96;
  --gold-glow:    rgba(189, 158, 112, 0.42);
  --gold-tint:    rgba(189, 158, 112, 0.22);
  --paper:        #0E0E10;     /* fallback for no-backdrop-filter */
  --paper-2:      #060606;
  --on-accent:    #000000;
  --accent-50:    rgba(255, 255, 255, 0.04);
  --accent-100:   rgba(255, 255, 255, 0.08);
  --accent-200:   rgba(255, 255, 255, 0.12);
  --accent-300:   rgba(255, 255, 255, 0.18);
  --accent-400:   rgba(255, 255, 255, 0.24);
  --accent-500:   rgba(255, 255, 255, 0.32);
  --accent-600:   rgba(255, 255, 255, 0.48);
  --success:      #7FB07C;
  --warning:      #D4A574;
  --danger:       #E07A6F;
  --success-bg:   rgba(127, 176, 124, 0.10);
  --warning-bg:   rgba(212, 165, 116, 0.10);
  --danger-bg:    rgba(224, 122, 111, 0.10);
  --info-bg:      rgba(255, 255, 255, 0.05);
  --shadow-neu:        0 14px 34px rgba(0,0,0,0.65);
  --shadow-neu-soft:   inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 0 rgba(0,0,0,0.55);
  --shadow-gold:       0 14px 30px rgba(189,158,112,0.16);
  --shadow-soft:       0 1px 2px rgba(0,0,0,0.6), 0 12px 40px rgba(0,0,0,0.55);
  --shadow-elev:       0 1px 2px rgba(0,0,0,0.6), 0 24px 60px rgba(0,0,0,0.70);
}
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
/* Nothing in the UI is bold. 500 is the emphasis weight and 400 the body;
   the UA sheet would otherwise render b/strong at 700. Both fonts are
   variable (Fraunces 300–600, Hanken Grotesk 300–700), so 500 is a real
   weight rather than a synthesised one. */
b, strong { font-weight: 500; }
html { font-size: var(--fz-base-mobile); }
@media (min-width: 768px) { html { font-size: var(--fz-base); } }
html, body {
  margin: 0; padding: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss03', 'cv05';   /* Hanken: single-storey a, tidy comma */
  letter-spacing: var(--track-body);
}
/* Soft champagne veil that gives the whole UI a warm depth */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background: var(--bg-veil); pointer-events: none;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
/* Display face — Fraunces. Optical sizing on, weight kept light for
   that thin-stroke couture feel; lining numerals; tracking pulled in. */
.serif, .display {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-feature-settings: 'lnum' 1, 'ss01' 1;
  letter-spacing: var(--track-display);
  line-height: 1.08;
}
::selection { background: rgba(189, 158, 112, 0.26); color: var(--ink); }
html[data-theme="dark"] ::selection { background: rgba(189, 158, 112, 0.34); color: #FFFFFF; }

/* ─── Shell ─────────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; transition: grid-template-columns .28s var(--ease); }
.shell.nav-collapsed { grid-template-columns: 72px 1fr; }
.sidebar {
  position: sticky; top: 0; align-self: start; height: 100vh;
  background: var(--glass); backdrop-filter: blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  border-right: 1px solid var(--line);
  padding: 22px 14px; display: flex; flex-direction: column; gap: 2px;
  transition: padding .28s var(--ease);
}
.shell.nav-collapsed .sidebar { padding: 22px 8px; }
.shell.nav-collapsed .nav-link span,
.shell.nav-collapsed .nav-section,
.shell.nav-collapsed .brand-name,
.shell.nav-collapsed .nav-foot,
.shell.nav-collapsed .theme-toggle > span:first-child { display: none; }
.shell.nav-collapsed .nav-link { justify-content: center; padding: 10px; }
.shell.nav-collapsed .theme-toggle { justify-content: center; padding: 8px; }
.shell.nav-collapsed .brand { justify-content: center; padding: 6px 0 20px; }

.nav-collapse-btn {
  position: absolute; right: -10px; top: 24px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--surface-solid); border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-soft); cursor: pointer; z-index: 5;
  color: var(--ink-soft); transition: color .18s var(--ease), transform .28s var(--ease);
}
.nav-collapse-btn:hover { color: var(--ink); }
.shell.nav-collapsed .nav-collapse-btn { transform: scaleX(-1); }
@media (max-width: 768px) { .nav-collapse-btn { display: none; } }
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px 26px; user-select: none;
}
.brand-mark {
  width: 26px; height: 26px; flex: none; position: relative;
  background: linear-gradient(140deg, var(--gold) 0%, #E8C9A1 45%, var(--gold) 100%);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  box-shadow: 0 2px 8px rgba(176,141,87,0.35);
}
.brand-mark::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,0.55) 0%, transparent 40%);
  clip-path: inherit;
}

/* ─── Theme toggle ──────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 7px 10px;
  border-radius: var(--r-md);
  color: var(--ink-soft); font-size: 12.5px; font-weight: 500;
  background: transparent;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.theme-toggle:hover { background: var(--hover); color: var(--ink); }
.theme-toggle-icon { width: 16px; height: 16px; }
.theme-toggle .moon { display: none; }
html[data-theme="dark"] .theme-toggle .sun  { display: none; }
html[data-theme="dark"] .theme-toggle .moon { display: inline-block; }
.brand-name { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 400; font-size: 1.3rem; letter-spacing: var(--track-display); }

.nav-section {
  font-size: var(--t-micro); font-weight: 500; text-transform: uppercase;
  letter-spacing: var(--track-caps); color: var(--ink-faint);
  padding: 14px 12px 6px;
}
.nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--r-md);
  color: var(--ink-soft); font-size: var(--t-small); font-weight: 500;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
  position: relative;
}
.nav-link:hover { background: var(--hover); color: var(--ink); }
/* Active = quiet tinted fill + a short gold marker. No boxy border. */
.nav-link.active { background: var(--accent-50); color: var(--ink); }
.nav-link.active::before {
  content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  height: 16px; width: 2px; background: var(--gold); border-radius: 2px;
}
.nav-link.active .nav-icon { color: var(--gold); opacity: 1; }
.nav-icon { width: 16px; height: 16px; flex: none; color: var(--ink-mute); }
.nav-link.active .nav-icon { opacity: 1; }
.nav-sep { height: 1px; background: var(--line); margin: 14px 12px; }
.nav-foot { margin-top: auto; padding: 10px 12px 4px; }
.nav-foot small { font-size: 11px; color: var(--ink-faint); display: block; margin-bottom: 2px; }
.nav-foot strong { font-size: 12.5px; color: var(--ink); font-weight: 500; display: block; }

/* ─── Content ───────────────────────────────────────────────── */
.content { padding: 36px 44px 64px; max-width: 1240px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.page-title { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 400; font-size: var(--t-h1); line-height: 1.06; letter-spacing: var(--track-display); margin: 0; font-feature-settings: 'lnum' 1, 'ss01' 1; }
.page-eyebrow { font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--gold); margin: 0 0 9px; }
.page-sub { color: var(--ink-mute); font-size: var(--t-small); margin-top: 7px; max-width: 64ch; line-height: 1.5; }

/* ─── Buttons (everything is pill-shaped) ───────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 18px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap;
  transition: all 0.18s var(--ease);
}
.btn-primary {
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 1px 2px rgba(20,17,14,0.18), 0 8px 24px rgba(20,17,14,0.10);
  position: relative;
}
.btn-primary::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), transparent 40%);
  pointer-events: none;
}
.btn-primary:hover { background: var(--accent-soft); transform: translateY(-0.5px); box-shadow: 0 2px 4px rgba(20,17,14,0.20), 0 16px 36px rgba(20,17,14,0.16); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  background: var(--glass); color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn-ghost:hover { color: var(--ink); border-color: var(--gold); background: var(--glass-strong); }
.btn-soft { background: var(--glass); color: var(--ink); border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn-soft:hover { background: var(--glass-strong); border-color: var(--gold); }
.btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger-bg); }
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); }

/* ─── Kebab popover menu (reusable) ─────────────────────────── */
.gs-menu-wrap { position: relative; display: inline-flex; }
.gs-kebab {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; color: var(--ink-soft);
  cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.gs-kebab:hover { background: var(--hover); border-color: var(--line); color: var(--ink); }
.gs-kebab svg { width: 18px; height: 18px; }
.gs-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 188px; padding: 6px; border-radius: 14px;
  background: var(--surface-solid); border: 1px solid var(--line);
  box-shadow: var(--shadow-neu);
  opacity: 0; transform: translateY(-6px) scale(0.98); transform-origin: top right; pointer-events: none;
  transition: opacity 160ms var(--ease-pop), transform 160ms var(--ease-pop);
}
html[data-theme="dark"] .gs-menu { background: var(--elevated); }
.gs-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.gs-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: 9px; border: 0; background: transparent;
  font: inherit; font-size: 13px; color: var(--ink-soft); text-align: left;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.gs-menu-item:hover { background: var(--hover); color: var(--ink); }
.gs-menu-item svg { width: 15px; height: 15px; flex: none; opacity: .72; }
.gs-menu-item:hover svg { opacity: 1; }
.gs-menu-item.is-danger { color: var(--danger); }
.gs-menu-item.is-danger:hover { background: var(--danger-bg); color: var(--danger); }
.gs-menu-sep { height: 1px; margin: 5px 4px; background: var(--line); }
.gs-menu form { margin: 0; }

/* ─── Confirm dialog (replaces window.confirm) ──────────────── */
.gs-confirm-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(15,15,17,0.42);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity 160ms var(--ease);
}
.gs-confirm-overlay.is-open { opacity: 1; pointer-events: auto; }
.gs-confirm {
  width: min(400px, 100%); padding: 22px 22px 18px; border-radius: 18px;
  background: var(--surface-solid); border: 1px solid var(--line);
  box-shadow: var(--shadow-neu); transform-origin: center;
  transform: scale(0.96); opacity: 0.6;
  transition: transform 180ms var(--ease-spring), opacity 180ms var(--ease);
}
html[data-theme="dark"] .gs-confirm { background: var(--elevated); }
.gs-confirm-overlay.is-open .gs-confirm { transform: none; opacity: 1; }
.gs-confirm-title { margin: 0 0 6px; font-family: var(--font-display); font-weight: 500; font-size: 18px; color: var(--ink); }
.gs-confirm-msg { margin: 0 0 18px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.gs-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
.gs-confirm [data-confirm-ok].btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.gs-confirm [data-confirm-ok].btn-danger:hover { filter: brightness(1.06); background: var(--danger); }
@media (prefers-reduced-motion: reduce) {
  .gs-menu, .gs-confirm, .gs-confirm-overlay { transition: none; }
}

/* ─── Impersonation banner ──────────────────────────────────── */
.impersonate-banner {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px; padding: 10px 16px; border-radius: var(--r-md, 14px);
  background: var(--accent-50); border: 1px solid var(--gold-tint);
  color: var(--ink); font-size: 13px;
}
.impersonate-banner .imp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; box-shadow: 0 0 0 3px var(--gold-glow); }
.impersonate-banner .imp-exit {
  border: 1px solid var(--gold); background: var(--gold); color: var(--on-accent);
  padding: 6px 13px; border-radius: 999px; font-size: 12px; font-weight: 500; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-pop), filter var(--dur-fast) var(--ease);
}
.impersonate-banner .imp-exit:hover { filter: brightness(1.04); transform: translateY(-0.5px); }
.impersonate-banner .imp-exit:active { transform: scale(0.97); }

/* ─── Bottom sheet (mobile-native pattern) ──────────────────── */
body.gs-sheet-locked { overflow: hidden; }
.gs-sheet-overlay {
  position: fixed; inset: 0; z-index: 210; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(15,15,17,0.44); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease);
}
.gs-sheet-overlay.open { opacity: 1; pointer-events: auto; }
.gs-sheet {
  width: 100%; max-width: 560px; background: var(--surface-solid);
  border-radius: 22px 22px 0 0; box-shadow: 0 -10px 44px rgba(0,0,0,0.24);
  padding: 6px 0 calc(12px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform 280ms cubic-bezier(0.32,0.72,0,1);
  max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
}
html[data-theme="dark"] .gs-sheet { background: var(--elevated); }
.gs-sheet-overlay.open .gs-sheet { transform: translateY(0); }
.gs-sheet-handle { width: 40px; height: 4px; border-radius: 999px; background: var(--line-strong); margin: 9px auto 4px; flex: none; }
.gs-sheet-head { padding: 6px 22px 8px; font-family: var(--font-display); font-weight: 500; font-size: 19px; color: var(--ink); }
.gs-sheet-body { padding: 6px 12px 8px; }
.gs-sheet-menu, .gs-sheet-body { display: block; }
.gs-sheet-menu .gs-menu-item, .gs-sheet-body .gs-menu-item {
  font-size: 15px; padding: 14px 14px; border-radius: 12px; gap: 13px;
}
.gs-sheet-menu .gs-menu-item svg { width: 19px; height: 19px; opacity: .8; }
.gs-sheet-menu .gs-menu-sep { margin: 6px 12px; }
.gs-sheet-menu form { margin: 0; }
@media (prefers-reduced-motion: reduce) { .gs-sheet, .gs-sheet-overlay { transition: opacity .01ms; } .gs-sheet { transform: none; } }
.btn-sm { padding: 7px 14px; font-size: 12.5px; }

/* ─── Inputs ────────────────────────────────────────────────── */
.input, .select, .textarea {
  display: block; width: 100%;
  background: var(--glass);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 16px;
  font-size: 14.5px; font-family: inherit; color: inherit;
  transition: all 0.18s var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  background: var(--glass-strong); outline: none;
  /* Just a crisp hairline highlight — no drop-shadow ring. The inset 0.5px
     stroke doubles the border so it reads sharp at any DPR. */
  border-color: var(--gold);
  box-shadow: inset 0 0 0 0.5px var(--gold);
}
/* Kill the browser autofill yellow fill: paint the field surface over it and
   keep our own text colour. The large inset shadow is the fill, not a shadow. */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus,
.input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  caret-color: var(--ink);
  transition: background-color 9999s ease-out 0s;
}
.input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset, inset 0 0 0 0.5px var(--gold);
}
.textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.label {
  display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-mute);
  letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 8px;
}
.checkbox-row { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); }
.checkbox-row input { width: 16px; height: 16px; accent-color: var(--ink); }

/* ─── Card ──────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-elev); }
.card-pad { padding: 24px; }
.card-row + .card-row { border-top: 1px solid var(--line); }

/* Hairline gold accent on premium surfaces (page-head, metric tiles) */
.card.gilt { position: relative; }
.card.gilt::before {
  content: ''; position: absolute; top: 0; left: 20px; right: 20px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
  opacity: .55;
}

/* ─── Metric tiles ──────────────────────────────────────────── */
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 36px; }
.metric { padding: 24px 26px; }
.metric-label { font-size: 12.5px; font-weight: 500; color: var(--ink-mute); letter-spacing: 1.4px; text-transform: uppercase; }
.metric-value { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1; margin-top: 10px; letter-spacing: -0.3px; }
.metric-delta { font-size: 12px; color: var(--ink-mute); margin-top: 8px; }
.metric:hover { background: var(--bg); }

/* ─── Infographic stat tiles (dashboard · insights · settings) ──
   One recipe, three pages: gilt hairline, small-caps label, big serif
   tabular numeral, one honest micro-visual, one quiet detail line.
   Text wears text tokens; colour lives only in the marks. */
.stat-tile { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.stat-tile .st-label { font-size: 10.5px; font-weight: 500; letter-spacing: 1.7px;
  text-transform: uppercase; color: var(--ink-mute); }
.stat-tile .st-value { font-family: var(--font-display); font-weight: 400; font-size: 34px;
  line-height: 1.05; letter-spacing: -0.4px; margin-top: 10px; color: var(--ink);
  font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 8px; }
.stat-tile .st-value .st-denom { font-size: 16px; color: var(--ink-mute); letter-spacing: 0; }
.stat-tile .st-viz { margin-top: 12px; }
.stat-tile .st-detail { font-size: 12px; color: var(--ink-mute); margin-top: 10px;
  display: flex; align-items: center; gap: 8px; min-width: 0; }
.stat-tile .st-detail .sep { color: var(--line-strong); }
/* These rows are <p> elements — kill the inherited bottom margins that were
   padding each tile with ~90px of dead vertical space; keep only the intended
   top rhythm. */
.stat-tile .st-label, .stat-tile .st-value, .stat-tile .st-detail { margin-bottom: 0; }
.stat-tile .st-label { margin-top: 0; }
/* Compact, premium tiles — no cavernous padding. */
.metric-row .stat-tile.card-pad { padding: 20px 22px; }
/* Honest delta pill — rendered only when a prior period exists. */
.st-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px; letter-spacing: 0.2px; font-variant-numeric: tabular-nums; }
.st-delta.up   { color: #2E7D5B; background: rgba(46,125,91,0.10); }
.st-delta.down { color: var(--ink-mute); background: rgba(20,17,14,0.06); }
html[data-theme="dark"] .st-delta.up   { color: #6FBF9B; background: rgba(111,191,155,0.12); }
html[data-theme="dark"] .st-delta.down { color: var(--ink-mute); background: rgba(244,244,245,0.08); }
/* Hairline meter — quota, countdown, completeness. 3px, rounded, calm. */
.st-meter { height: 3px; border-radius: 999px; background: var(--line); overflow: hidden; }
.st-meter > i { display: block; height: 100%; border-radius: 999px; background: var(--gold);
  transition: width .6s cubic-bezier(0.22, 1, 0.36, 1); }
.st-meter > i.danger { background: var(--danger, #B83A2E); }
/* Sparkline / chart strokes stay ink; gold marks the "now" point. */
.st-spark { display: block; }
.st-spark polyline { fill: none; stroke: var(--ink); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; }
.st-spark .spark-dot { fill: var(--gold); }
/* Rank numeral in a hairline ring (top lists). */
.rank-ring { width: 24px; height: 24px; flex: none; border-radius: 50%;
  border: 1px solid var(--line-strong); display: inline-flex; align-items: center;
  justify-content: center; font-family: var(--font-display); font-size: 12px; color: var(--ink-soft); }
/* Card header voice shared by the stats surfaces. */
/* Section header — one vocabulary for every settings/admin panel. Sentence
   case, sans, not a display face: these are UI labels, not editorial titles. */
.sec-head { margin: 0 0 14px; }
.sec-title { font-size: var(--t-lg); font-weight: 500; margin: 0; letter-spacing: -0.01em; color: var(--ink); }
.sec-desc { margin: 3px 0 0; font-size: var(--t-small); color: var(--ink-mute); max-width: 60ch; }
.card-eyebrow { font-size: 10px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold); margin: 0 0 3px; }
.card-title-serif { font-family: var(--font-display); font-weight: 400; font-size: 18px;
  letter-spacing: -0.01em; color: var(--ink); margin: 0; }

/* ─── Table ─────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table thead th { color: var(--ink-mute); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.2px; padding: 14px 22px; text-align: left; border-bottom: 1px solid var(--line); }
.table tbody td { padding: 16px 22px; border-bottom: 1px solid var(--line); vertical-align: middle; transition: background 0.15s var(--ease); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--hover); }

/* Momentum horizontal scroll so wide tables never clip on small screens. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

/* ≤640: .table--stack reflows each row into a tidy "label: value" card. */
@media (max-width: 640px) {
  .table-scroll { overflow-x: visible; }
  .table--stack thead { display: none; }
  .table--stack, .table--stack tbody { display: block; width: 100%; }
  .table--stack tr {
    display: block; padding: 4px 14px; margin-bottom: 12px;
    border: 1px solid var(--line); border-radius: 14px; background: var(--surface-solid);
  }
  .table--stack tbody tr:last-child { margin-bottom: 0; }
  .table--stack tr:hover td { background: transparent; }
  .table--stack td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 9px 0; border-bottom: 1px solid var(--line); white-space: normal; text-align: right;
  }
  .table--stack td:last-child { border-bottom: 0; }
  .table--stack td::before {
    content: attr(data-label); flex: 0 0 auto; text-align: left;
    font-size: 11px; font-weight: 500; letter-spacing: 0.4px; text-transform: uppercase; color: var(--ink-mute);
  }
  .table--stack td:empty { display: none; }
}

/* ─── Pills ─────────────────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 500; letter-spacing: 0.3px; text-transform: uppercase; line-height: 1.4; }
.pill-muted   { background: var(--info-bg); color: var(--ink-soft); }
.pill-success { background: var(--success-bg); color: var(--success); }
.pill-warn    { background: var(--warning-bg); color: var(--warning); }
.pill-danger  { background: var(--danger-bg); color: var(--danger); }
.pill-info    { background: var(--info-bg); color: var(--ink); }

/* ─── Flash ─────────────────────────────────────────────────── */
.flash { padding: 11px 16px; border-radius: var(--r-md); font-size: 13px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; border: 1px solid; }
.flash.error { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-bg); }
.flash.ok    { background: var(--success-bg); color: var(--success); border-color: var(--success-bg); }

/* ─── Utilities ─────────────────────────────────────────────── */
.hstack { display: flex; align-items: center; gap: 8px; }
.vstack { display: flex; flex-direction: column; gap: 8px; }
.gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; }
.muted { color: var(--ink-mute); } .muted-2 { color: var(--ink-faint); }
.right { margin-left: auto; }
.text-sm { font-size: 12.5px; } .text-xs { font-size: 11.5px; } .text-lg { font-size: 16px; }
.divider { height: 1px; background: var(--line); margin: 24px 0; }
.empty { padding: 56px 32px; text-align: center; color: var(--ink-mute); }
.empty-title { font-family: var(--font-display); font-size: 28px; line-height: 1.1; color: var(--ink); margin: 0 0 6px; }

/* ─── Two-col split ─────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile drawer — sidebar slides in from the left, hamburger lives in the top-bar */
.mobile-topbar { display: none; }
@media (max-width: 768px) {
  .shell { grid-template-columns: 1fr; }
  .mobile-topbar {
    display: flex; align-items: center; gap: 10px;
    position: sticky; top: 0; z-index: 30;
    padding: 12px 16px; background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .mobile-topbar .brand-name { font-family: var(--font-display); font-size: 20px; }
  .hamburger {
    width: 36px; height: 40px; border-radius: 8px;
    border: 1px solid var(--line); background: var(--surface);
    display: flex; align-items: center; justify-content: center;
  }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 50;
    height: 100vh; width: 260px;
    transform: translateX(-100%); transition: transform .25s var(--ease);
    box-shadow: 0 0 0 1px var(--line);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(15,15,15,0.42);
    z-index: 49; backdrop-filter: blur(2px);
  }
  .sidebar-backdrop.open { display: block; }
  .content { padding: 20px 16px 56px; }
  .metrics { grid-template-columns: 1fr; }
  .page-head { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Forms: 16px stops iOS focus-zoom; ≥44px keeps controls thumb-friendly. */
  .input, .select, .textarea { font-size: 16px; min-height: 46px; }
  .textarea { min-height: 96px; }
  /* Setting rows stack their control full-width under the description. */
  .setting-row { align-items: stretch; }
  .setting-row .hstack { width: 100%; }
  .setting-row .hstack .select { flex: 1 1 auto; min-width: 0; }
  /* Page-head primary action becomes a reachable, full-width pill. */
  .page-head .page-actions { width: 100%; display: flex; gap: 10px; }
  .page-head .page-actions > .btn { flex: 1 1 auto; justify-content: center; }
}

/* Global touch ergonomics — applied everywhere, harmless on desktop. */
@media (hover: none) {
  a, button, .btn, .mobile-tab, .gs-menu-item, .lt-filters-btn { -webkit-tap-highlight-color: transparent; }
}
html { overscroll-behavior-y: none; }

/* ─── Modal ─────────────────────────────────────────────────── */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15,15,15,0.42); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal { background: var(--surface); border-radius: var(--r-xl); max-width: 520px; width: 100%; padding: 28px; box-shadow: 0 24px 80px rgba(15,15,15,0.18); border: 1px solid var(--line); }
.modal h3 { font-family: var(--font-display); font-weight: 400; font-size: 26px; margin: 0 0 10px; letter-spacing: -0.3px; }

/* ─── Stone card grid (jeweller dashboard) ──────────────────── */
/* Fixed columns from --gv-cols (set by the view toggle), so tiles
   stay comfortable and uniform as the column count changes. */
.stone-grid { display: grid; grid-template-columns: repeat(var(--gv-cols, 4), minmax(0, 1fr)); gap: 14px; }
.stone-card {
  background: var(--surface); border-radius: var(--r-md); border: 1px solid var(--line);
  padding: 12px; transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  display: flex; flex-direction: column; position: relative; text-decoration: none;
}
.stone-card:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.stone-card-art {
  aspect-ratio: 1; border-radius: var(--r-sm, 6px); background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px; position: relative; overflow: hidden;
}
.stone-card-art img { width: 50%; height: 50%; opacity: 0.85; transition: opacity 0.2s; }
.stone-card:hover .stone-card-art img { opacity: 1; }
/* Cut-icon line art is dark-stroked — invert it on dark so it stays visible. */
html[data-theme="dark"] .stone-card-art { background: rgba(255,255,255,0.03); }
html[data-theme="dark"] .stone-card-art img { filter: invert(1) brightness(1.5); opacity: 0.72; }
html[data-theme="dark"] .stone-card:hover .stone-card-art img { opacity: 0.92; }
/* Name row: the stone's colour sits opposite its name rather than floating in
   the card's corner — it reads as part of the record, not a sticker on it. */
.stone-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin: 0 0 2px;
}
.stone-card-dot {
  flex: none;
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid rgba(15,15,15,0.08);
  box-shadow: 0 1px 2px rgba(15,15,15,0.06);
}
.stone-card-name { font-weight: 500; font-size: 13px; color: var(--ink); margin: 0;
  min-width: 0; flex: 1 1 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stone-card-meta { font-size: 11px; color: var(--ink-mute); }


/* ─── Loader / micro-interactions ───────────────────────────── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.content > * { animation: fadeUp 0.4s var(--ease) both; }
.content > *:nth-child(1) { animation-delay: 0ms; }
.content > *:nth-child(2) { animation-delay: 50ms; }
.content > *:nth-child(3) { animation-delay: 100ms; }
.content > *:nth-child(4) { animation-delay: 150ms; }

/* ─────────────────────────────────────────────────────────────
   Atrium luxury layer — Phase 5.5
   Keyframes, button variants, card-clickable, reduced-motion guard.
   ───────────────────────────────────────────────────────────── */

@keyframes soft-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes count-up {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
@keyframes line-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes bar-rise {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes nav-item-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0);    }
}

.anim-pop       { animation: soft-pop var(--dur) var(--ease-pop) both; }
.anim-count     { animation: count-up 0.45s var(--ease-pop) both; }
.anim-float     { animation: float-slow 6s ease-in-out infinite; }
.anim-line      { transform-origin: left center; animation: line-grow var(--dur-slow) var(--ease-pop) both; }
.anim-bar       { transform-origin: bottom center; animation: bar-rise var(--dur-slow) var(--ease-pop) both; }
.anim-nav-item  { animation: nav-item-in 200ms var(--ease-spring) both; }

/* ─── Button — additive variants per Atrium spec ──────────────── */
.btn-outline {
  background: rgba(255,255,255,0.62); color: var(--ink);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn-outline:hover { border-color: var(--gold); background: rgba(255,255,255,0.85); }
html[data-theme="dark"] .btn-outline { background: rgba(28,28,31,0.55); }
html[data-theme="dark"] .btn-outline:hover { background: rgba(28,28,31,0.78); }

.btn-subtle {
  background: rgba(255,255,255,0.62); color: var(--accent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid transparent;
}
.btn-subtle:hover { background: rgba(255,255,255,0.92); border-color: var(--gold-tint); }
html[data-theme="dark"] .btn-subtle { background: rgba(28,28,31,0.55); color: var(--ink); }

.btn-icon {
  padding: 0; width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); background: transparent;
  border: 1px solid var(--line);
}
.btn-icon:hover { background: var(--hover); border-color: var(--gold-tint); }
.btn-icon svg { width: 19px; height: 19px; stroke: currentColor; }

.btn-sm { padding: 7px 14px; font-size: 12.5px; }
.btn-lg { padding: 13px 25px; font-size: 15px; }

/* Focus ring — gold for premium feel */
.btn:focus-visible, .btn-icon:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--gold-tint);
}
a:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px;
}

/* ─── Type system — one grotesque, weight-driven hierarchy ─────────
   With the serif retired, "display" headings need a heavier weight to hold
   presence at large sizes; big data numerals sit a touch lighter. Placed
   after all heading definitions so it wins on equal specificity. */
.page-title, .card-title-serif, .empty-title, .modal h3,
.brand-name, .mobile-topbar .brand-name, .gs-confirm-title, .gs-sheet-head {
  font-weight: 500; letter-spacing: -0.01em;
}
.metric-value, .stat-tile .st-value { font-weight: 500; letter-spacing: -0.015em; }

/* ─── Card — clickable + elevated additions ───────────────────── */
.card { border-radius: var(--r-lg); }   /* 28px radius — luxurious */
.card-pad { padding: 24px; }            /* comfortable, not cavernous */

.card-clickable {
  position: relative; display: block; text-decoration: none;
  cursor: pointer;
}
.card-clickable::before {
  content: ''; position: absolute; inset-inline: 24px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-glow) 50%, transparent);
  opacity: 0; transition: opacity var(--dur) var(--ease-pop);
}
.card-clickable:hover { transform: translateY(-1px); border-color: var(--gold-tint); box-shadow: var(--shadow-gold); }
.card-clickable:hover::before { opacity: 1; }
.card-clickable .card-arrow {
  position: absolute; right: 18px; bottom: 18px;
  width: 28px; height: 28px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-solid); color: var(--ink-mute);
  border: 1px solid var(--line); font-size: 16px; line-height: 1;
  transition: all var(--dur) var(--ease-pop);
}
.card-clickable:hover .card-arrow { color: var(--gold); border-color: var(--gold-tint); }
.card-clickable .card-hint {
  position: absolute; right: 18px; top: 16px;
  font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--gold); opacity: 0; transition: opacity var(--dur) var(--ease-pop);
}
.card-clickable:hover .card-hint { opacity: 0.85; }

.card-elevated { box-shadow: var(--shadow-neu); }

/* ─── Pill — refined + size variants ─────────────────────────── */
.pill { border-radius: var(--r-pill); padding: 4px 10px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }

/* ─── Glass utility (used by nav rail + drawer + topbar) ─────── */
.glass-surface {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  border: 1px solid var(--line);
}
html[data-theme="dark"] .glass-surface { background: rgba(28,28,31,0.72); }
@supports not (backdrop-filter: blur(1px)) {
  .glass-surface { background: var(--paper); }
  html[data-theme="dark"] .glass-surface { background: var(--paper); }
}

/* ─── Hairline gold rule utility ─────────────────────────────── */
.hairline-gold {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold) 82%, transparent);
  opacity: 0.55;
}

/* ─────────────────────────────────────────────────────────────
   Nav rail — 108px vertical capsule + hover drawer (Atrium)
   ───────────────────────────────────────────────────────────── */

.app-shell {
  display: block; position: relative; min-height: 100vh;
}
.content-shell {
  margin-left: 106px;                  /* 74px rail + 16px left gutter + 16px breathing */
  min-height: 100vh;
}
.nav-rail {
  position: fixed; left: 16px; top: 16px; bottom: 16px;
  width: 74px; z-index: 40;
  display: flex; flex-direction: column; align-items: center;
  padding: 18px 0 16px; gap: 6px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-neu);
}
html[data-theme="dark"] .nav-rail { background: rgba(28,28,31,0.72); }
@supports not (backdrop-filter: blur(1px)) {
  .nav-rail { background: var(--paper); }
}
/* Gold hairline atop the rail */
.nav-rail::before {
  content: ''; position: absolute; top: 10px; left: 16px; right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
  opacity: 0.55;
}

.nav-rail-brand {
  width: 44px; height: 44px; flex: none; margin: 4px 0 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px; overflow: hidden;
}
.nav-rail-brand img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}

.nav-rail-btn {
  position: relative;
  width: 46px; height: 46px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px;
  color: var(--ink-soft); background: transparent;
  transition: color 180ms var(--ease-pop), background 180ms var(--ease-pop), box-shadow 180ms var(--ease-pop);
  cursor: pointer;
}
.nav-rail-btn svg { width: 20px; height: 20px; stroke-width: 1.6; }
.nav-rail-btn:hover { color: var(--gold); background: var(--accent-50); }
.nav-rail-btn.active {
  background: var(--surface-solid); color: var(--accent);
  box-shadow: 0 4px 14px rgba(20,17,14,0.07);   /* gentle lift, no outline ring */
}
html[data-theme="dark"] .nav-rail-btn.active { box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
html[data-theme="dark"] .nav-rail-btn.active { color: var(--ink); }
/* Active marker — a thin vertical gold stroke the height of the icon, just
   outside the capsule's left edge. */
.nav-rail-btn.active::before {
  content: ''; position: absolute; left: -13px; top: 50%; transform: translateY(-50%);
  width: 2px; height: 20px; border-radius: 2px; background: var(--gold);
}

.nav-rail-spacer { flex: 1; }

/* Theme-toggle icon swap when sitting on the nav rail */
#theme-toggle .moon { display: none; }
html[data-theme="dark"] #theme-toggle .sun  { display: none; }
html[data-theme="dark"] #theme-toggle .moon { display: inline-block; }

/* Tooltip on hover (just the label, shows when no drawer) */
.nav-rail-btn[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%);
  padding: 6px 10px; border-radius: 8px;
  background: var(--surface-solid); color: var(--ink);
  font-size: 11.5px; font-weight: 500; white-space: nowrap;
  border: 1px solid var(--line); box-shadow: var(--shadow-neu-soft);
  opacity: 0; pointer-events: none;
  transition: opacity 120ms cubic-bezier(.16,1,.3,1);
}
.nav-rail-btn:hover[data-tip]::after,
.nav-rail-btn:focus-visible[data-tip]::after { opacity: 1; transition-delay: 80ms; }
/* Suppress tooltip when its drawer is open */
.nav-item.is-open .nav-rail-btn[data-tip]::after { opacity: 0; }

/* ─── Drawer that slides out from the rail ──────────────────── */
.nav-item { position: relative; }
.nav-drawer {
  position: fixed; left: 102px; top: 16px;
  width: 16rem; max-height: calc(100vh - 32px);
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-neu);
  z-index: 41;
  opacity: 0; transform: translateX(-6px) scale(0.98); pointer-events: none;
  transition: opacity 200ms var(--ease-spring), transform 200ms var(--ease-spring);
  overflow-y: auto;
}
html[data-theme="dark"] .nav-drawer { background: rgba(28,28,31,0.85); }
@supports not (backdrop-filter: blur(1px)) {
  .nav-drawer { background: var(--paper); }
}
.nav-item.is-open .nav-drawer {
  opacity: 1; transform: translateX(0) scale(1); pointer-events: auto;
}
.nav-drawer-eyebrow {
  font-size: 10px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--gold); margin: 0 0 12px;
}
.nav-drawer-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  color: var(--ink-soft); font-size: 13px; font-weight: 500;
  transition: background 180ms var(--ease-pop), color 180ms var(--ease-pop);
  position: relative;
}
.nav-drawer-link:hover {
  color: var(--gold); background: rgba(255,255,255,0.7);
  box-shadow: var(--shadow-neu-soft);
}
html[data-theme="dark"] .nav-drawer-link:hover { background: rgba(28,28,31,0.7); }
.nav-drawer-link.active { color: var(--accent); background: rgba(255,255,255,0.7); }
.nav-drawer-link svg { width: 14px; height: 14px; stroke-width: 1.6; }
.nav-drawer-link:hover svg { color: var(--accent); }

/* Backdrop blur scrim when any drawer is open */
.nav-scrim {
  position: fixed; inset: 0; left: 106px; z-index: 39;
  background: rgba(15,15,15,0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms var(--ease-pop);
}
.app-shell.has-open-nav .nav-scrim { opacity: 1; pointer-events: auto; }

/* ─── Topbar — glass capsule above the content ───────────────── */
.topbar {
  position: sticky; top: 0; z-index: 30;
  margin: 18px 18px 0; padding: 12px 20px;
  display: flex; align-items: center; gap: 12px;
  min-height: 68px;
  border-radius: 22px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-neu);
}
html[data-theme="dark"] .topbar { background: rgba(28,28,31,0.72); }
@supports not (backdrop-filter: blur(1px)) { .topbar { background: var(--paper); } }
@media (min-width: 1280px) { .topbar { min-height: 68px; padding: 12px 20px; } }

.topbar-title {
  /* Quiet sans wordmark — the decorative serif is reserved for editorial page
     titles; the ever-present header name should read light and minimal. */
  font-family: var(--font-sans); font-weight: 500;
  font-size: 18px; letter-spacing: 0.2px; color: var(--ink);
  margin: 0; flex: none; line-height: 1.15;
}
.topbar-crumb { font-size: 11.5px; color: var(--ink-mute); padding-left: 12px; border-left: 1px solid var(--line); margin-left: 4px; }
.topbar-spacer { flex: 1; }

/* Centred search input — anchored to the middle of the topbar regardless of
   the left title / right controls widths. */
.topbar-search {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  flex: none; width: min(420px, 34vw); z-index: 1;
}
.topbar-search input {
  width: 100%; height: 40px;
  padding: 0 18px 0 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: inherit; font-size: 13px; color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-pop), box-shadow var(--dur-fast) var(--ease-pop);
}
.topbar-search input::placeholder { color: var(--ink-mute); }
.topbar-search input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); }
.topbar-search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--ink-mute);
}
html[data-theme="dark"] .topbar-search input { background: rgba(28,28,31,0.55); }

.topbar-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px; font-size: 12px;
  background: var(--surface-solid); border: 1px solid var(--line);
  color: var(--ink-soft); white-space: nowrap;
}
.topbar-chip.disabled { opacity: 0.55; cursor: not-allowed; }
.topbar-chip .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--success); }
.topbar-chip.is-ok .dot      { background: var(--success); }
.topbar-chip.is-trial .dot   { background: var(--warning); }
.topbar-chip.is-expired .dot { background: var(--danger); }
/* Link variant — the chip navigates to the merchant's public profile. */
.topbar-chip.is-link {
  text-decoration: none; cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s var(--ease-pop);
}
.topbar-chip.is-link:hover {
  color: var(--ink); background: var(--gold-tint); border-color: var(--gold);
}
.topbar-chip.is-link:active { transform: scale(0.97); }
.topbar-chip.is-link:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}

/* Tenant selector (admin) */
.topbar-select {
  height: 40px; padding: 0 30px 0 12px;
  border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: inherit; font-size: 12.5px; color: var(--ink);
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2314110E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
  max-width: 240px;
}
html[data-theme="dark"] .topbar-select { background-color: rgba(28,28,31,0.55); }

/* Topbar icon-only action button */
/* Circular, not oval: width and height must match or border-radius:50%
   stretches into an ellipse. flex:none stops a flex parent squashing it. */
.topbar-icon-btn {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  color: var(--ink-soft); cursor: pointer;
  position: relative; transition: all var(--dur-fast) var(--ease-pop);
}
.topbar-icon-btn:hover { color: var(--gold); border-color: var(--gold-tint); background: rgba(255,255,255,0.82); }
.topbar-icon-btn svg { width: 17px; height: 17px; stroke-width: 1.7; }
.topbar-icon-btn .badge-dot {
  position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 6px var(--gold-glow);
  border: 1px solid rgba(255,255,255,0.9);
}
html[data-theme="dark"] .topbar-icon-btn { background: rgba(28,28,31,0.55); }
html[data-theme="dark"] .topbar-icon-btn:hover { background: rgba(28,28,31,0.82); }

/* Quick-action button (primary, gold accent) */
.topbar-quick-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 14px; border-radius: 12px;
  background: var(--accent); color: var(--on-accent);
  font-size: 12.5px; font-weight: 500; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(20,17,14,0.18), 0 8px 24px rgba(20,17,14,0.10);
  transition: all var(--dur-fast) var(--ease-pop);
}
.topbar-quick-btn:hover { transform: translateY(-0.5px); box-shadow: var(--shadow-gold), 0 1px 2px rgba(20,17,14,0.18); }
.topbar-quick-btn svg { width: 14px; height: 14px; stroke-width: 2; }

/* User avatar + dropdown */
.topbar-avatar {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--gold) 0%, var(--gold-soft) 100%);
  color: var(--paper); font-weight: 500; font-size: 12.5px;
  letter-spacing: 0.3px; cursor: pointer; user-select: none;
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: var(--shadow-neu-soft);
}
html[data-theme="dark"] .topbar-avatar { color: var(--accent); }
.topbar-menu { position: relative; }
.topbar-menu-panel {
  position: absolute; right: 0; top: calc(100% + 10px);
  width: 240px; padding: 8px;
  border-radius: 16px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--line); box-shadow: var(--shadow-neu);
  opacity: 0; transform: translateY(-6px) scale(0.98); pointer-events: none;
  transition: opacity 180ms var(--ease-spring), transform 180ms var(--ease-spring);
  z-index: 50;
}
html[data-theme="dark"] .topbar-menu-panel { background: rgba(28,28,31,0.92); }
.topbar-menu.is-open .topbar-menu-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.topbar-menu-head {
  padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px;
}
.topbar-menu-head .label { font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); margin: 0 0 2px; }
.topbar-menu-head strong { display: block; font-size: 13px; color: var(--ink); font-weight: 500; }
.topbar-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 12px; border-radius: 10px;
  color: var(--ink-soft); font-size: 13px; cursor: pointer;
  background: transparent; text-align: left;
}
.topbar-menu-item:hover { background: var(--hover); color: var(--ink); }
.topbar-menu-item svg { width: 14px; height: 14px; stroke-width: 1.6; opacity: 0.7; }
.topbar-menu-item:hover svg { opacity: 1; color: var(--gold); }

/* ─── Notifications dropdown ─────────────────────────────────── */
.topbar-notif { position: relative; }
.notif-badge {
  position: absolute; top: 3px; right: 2px;
  min-width: 15px; height: 15px; padding: 0 3px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 500; line-height: 1; letter-spacing: -0.2px;
  color: var(--on-accent); background: var(--gold);
  border-radius: 999px; border: 1.5px solid var(--paper);
}
html[data-theme="dark"] .notif-badge { border-color: #18181b; }
.notif-panel { width: 346px; padding: 0; right: 0; overflow: hidden; }
.topbar-notif.is-open .notif-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
}
.notif-head-title { font-size: 13px; font-weight: 500; color: var(--ink); letter-spacing: -0.1px; }
.notif-clear {
  border: 0; background: transparent; cursor: pointer;
  font-size: 11.5px; font-weight: 500; color: var(--gold);
  padding: 2px 2px; border-radius: 6px;
  transition: opacity var(--dur-fast) var(--ease);
}
.notif-clear:hover { opacity: 0.7; }
.notif-clear[hidden] { display: none; }
.notif-list { max-height: 384px; overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.notif-item {
  display: grid; grid-template-columns: 32px 1fr auto; align-items: start;
  gap: 11px; padding: 10px; border-radius: 12px; position: relative;
  text-decoration: none; transition: background var(--dur-fast) var(--ease);
}
a.notif-item { cursor: pointer; }
.notif-item + .notif-item { margin-top: 2px; }
.notif-item:hover { background: var(--hover); }
.notif-item.is-unread { background: color-mix(in srgb, var(--gold) 7%, transparent); }
.notif-item.is-unread:hover { background: color-mix(in srgb, var(--gold) 11%, transparent); }
.notif-ic {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-50); color: var(--gold);
}
.notif-ic svg { width: 16px; height: 16px; }
.notif-item.tone-warn    .notif-ic { background: rgba(183,121,31,0.12); color: #B7791F; }
.notif-item.tone-danger  .notif-ic { background: rgba(197,48,48,0.10);  color: var(--danger); }
.notif-item.tone-success .notif-ic { background: rgba(47,133,90,0.12);  color: var(--success); }
.notif-item.tone-default .notif-ic { background: var(--hover); color: var(--ink-mute); }
.notif-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.notif-title {
  font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-sub {
  font-size: 11.5px; color: var(--ink-mute); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notif-time {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  font-size: 10.5px; color: var(--ink-mute); white-space: nowrap;
  padding-top: 2px; font-variant-numeric: tabular-nums;
}
.notif-item.is-unread .notif-time::after {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
}
.notif-empty { text-align: center; padding: 36px 24px; color: var(--ink-mute); }
.notif-empty svg { width: 30px; height: 30px; opacity: 0.4; margin-bottom: 10px; }
.notif-empty p { margin: 0 0 2px; font-size: 13px; font-weight: 500; color: var(--ink); }
.notif-empty span { font-size: 11.5px; }
@media (max-width: 480px) { .notif-panel { width: calc(100vw - 28px); } }
.topbar-menu-sep { height: 1px; background: var(--line); margin: 6px 8px; }

/* Segmented toggle inside menu (theme/density) */
.topbar-seg {
  display: flex; gap: 2px; padding: 4px; margin: 4px 8px;
  border-radius: 12px; background: var(--accent-50); border: 1px solid var(--line);
}
.topbar-seg button {
  flex: 1; padding: 6px 10px; border-radius: 9px;
  font-size: 11.5px; color: var(--ink-mute);
  transition: background var(--dur-fast) var(--ease-pop), color var(--dur-fast) var(--ease-pop);
}
.topbar-seg button.is-active { background: var(--surface-solid); color: var(--ink); box-shadow: var(--shadow-neu-soft); }

/* Mobile topbar tweaks */
.topbar-search-toggle { display: none; }   /* desktop uses the centered field */

/* ≤1000: the centred search is absolutely positioned, so once the bar gets
   narrow it drives straight through the title on the left and the plan chip
   on the right. Tablets hit this too — swap to the icon toggle before the
   collision, not just on phones. */
@media (max-width: 1000px) {
  .topbar-search { display: none; }
  .topbar-search-toggle { display: inline-flex; }

  /* Tap the search icon → the field expands over the bar. */
  .topbar.search-open .topbar-search {
    display: flex; position: absolute; left: 14px; right: 52px; top: 50%; transform: translateY(-50%);
    margin: 0; max-width: none; width: auto; z-index: 5;
  }
  .topbar.search-open .topbar-search input { width: 100%; height: 40px; background: var(--surface-solid); }
  .topbar.search-open .topbar-search-toggle { z-index: 6; }
  .topbar.search-open .topbar-title,
  .topbar.search-open .topbar-crumb,
  .topbar.search-open .topbar-chip,
  .topbar.search-open .topbar-notif,
  .topbar.search-open #theme-toggle,
  .topbar.search-open .topbar-menu { visibility: hidden; }
}

@media (max-width: 768px) {
  .topbar { gap: 6px; padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top)); }
  .topbar-title { font-size: 18px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-crumb { display: none; }
  .topbar-chip { display: none; }            /* free room for the action cluster */
  .topbar-spacer { flex: 1 1 auto; }
  .topbar-select { max-width: 130px; font-size: 11.5px; }
}

/* ─── Content area (replaces .content) ───────────────────────── */
/* Left padding matches the topbar title's inset so page headings line up
   vertically with the wordmark in the top bar. */
.app-shell .content { padding: 24px 24px 56px 28px; max-width: 1240px; margin: 0 auto; }

/* ─── Adapt — when nav rail is active, hide the legacy sidebar ─ */
.app-shell .sidebar,
.app-shell .mobile-topbar { display: none; }

/* Mobile: hide rail entirely (mobile floating tab bar will take over) */
@media (max-width: 768px) {
  .content-shell { margin-left: 0; overflow-x: clip; }
  body { overflow-x: clip; }
  .nav-rail { display: none; }
  .nav-drawer, .nav-scrim { display: none !important; }
  .topbar { margin: 0; border-radius: 0; border-top: 0; border-left: 0; border-right: 0; padding-left: 16px; padding-right: 16px; }
  .app-shell .content { padding: 16px 16px 96px; }   /* leave room for the tab bar */
}

/* ─── Mobile bottom-tab nav (≤768px only) ──────────────────── */
.mobile-tabbar { display: none; }
@media (max-width: 768px) {
  .mobile-tabbar {
    display: flex;
    position: fixed;
    /* Floating pill — inset from all edges with a full rounded shape. */
    left: 12px; right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 60;
    align-items: stretch;
    justify-content: space-around;
    gap: 2px;
    padding: 6px;
    border-radius: var(--r-pill);
    background: var(--paper);
    background: color-mix(in srgb, var(--paper) 84%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
    border: 1px solid var(--line);
    box-shadow: 0 8px 30px rgba(0,0,0,0.14);
  }
  html[data-theme="dark"] .mobile-tabbar {
    background: rgba(28,28,31,0.9);
    box-shadow: 0 8px 30px rgba(0,0,0,0.55);
  }
  .mobile-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 7px 2px 5px;
    border-radius: var(--r-pill);
    color: var(--muted);
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: transform 140ms cubic-bezier(0.23,1,0.32,1), color 140ms ease, background 140ms ease;
  }
  .mobile-tab svg { width: 22px; height: 22px; stroke-width: 1.6; }
  .mobile-tab.active { color: var(--gold); }
  html[data-theme="dark"] .mobile-tab.active { color: var(--ink); }
  .mobile-tab.active svg { stroke-width: 1.9; }
  .mobile-tab:active { transform: scale(0.94); background: var(--accent-50); }
}

/* ─── Reduced-motion guard (Atrium accessibility religion) ──── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .anim-pop, .anim-count, .anim-float, .anim-line, .anim-bar, .anim-nav-item {
    animation: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   iOS / iPadOS motion layer — Apple-grade interaction feel.
   
   Three rules drive everything:
   1. ALWAYS animate `transform` + `opacity`, NEVER `width/height/top/left`
      (the former is GPU-composited, the latter forces layout reflow).
   2. Use `--ease-pop` for entrances, `--ease-natural` for state shifts,
      `--ease-spring` for confirmation feedback.
   3. Hover lifts are subtle (translateY(-1px) + 1.02 scale at most).
   ───────────────────────────────────────────────────────────── */

/* GPU-promote surfaces that animate frequently so they don't repaint */
.card, .btn, .nav-rail-btn, .topbar-icon-btn, .topbar-avatar,
.topbar-menu-panel, .nav-drawer, .topbar-quick-btn,
.stone-card, .pill, .metric, [data-tip]::after {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Universal hover/press micro-feedback on interactive surfaces */
.btn, .btn-icon, .topbar-icon-btn, .topbar-quick-btn, .topbar-avatar,
.nav-rail-btn:not(.active), .pill {
  transition:
    transform var(--dur-fast) var(--ease-pop),
    background-color var(--dur-fast) var(--ease-natural),
    color var(--dur-fast) var(--ease-natural),
    border-color var(--dur-fast) var(--ease-natural),
    box-shadow var(--dur-fast) var(--ease-pop);
}
.btn:active, .btn-icon:active, .topbar-icon-btn:active,
.topbar-quick-btn:active, .topbar-avatar:active,
.nav-rail-btn:not(.active):active {
  transform: scale(0.96);
}

/* Cards — quiet hover lift, longer settle on exit */
.card, .stone-card {
  transition:
    transform var(--dur) var(--ease-pop),
    box-shadow var(--dur) var(--ease-pop),
    border-color var(--dur) var(--ease-natural);
}
.card:hover { transform: translateY(-1px); }
.stone-card:hover { transform: translateY(-2px) scale(1.005); }
.stone-card:active { transform: translateY(0) scale(0.99); }

/* Topbar menu — emphasised spring on open */
.topbar-menu-panel {
  transition:
    opacity var(--dur) var(--ease-pop),
    transform var(--dur) var(--ease-spring);
}

/* Modals — backdrop fades, panel scales 0.96→1 with spring */
.modal-backdrop {
  transition: opacity var(--dur) var(--ease-pop);
}
.modal {
  transition:
    opacity var(--dur) var(--ease-pop),
    transform var(--dur) var(--ease-spring);
}

/* Drawer (nav rail hover-out menu) — slow settle in, faster exit */
.nav-drawer {
  transition:
    opacity var(--dur-fast) var(--ease-pop),
    transform var(--dur) var(--ease-spring);
}

/* Topbar fades smoothly on theme/density switch */
.topbar { transition: background-color var(--dur) var(--ease-natural), border-color var(--dur) var(--ease-natural); }

/* Sidebar drawer (mobile slide-in) */
.sidebar { transition: transform var(--dur-slow) var(--ease-pop); }
.sidebar-backdrop { transition: opacity var(--dur) var(--ease-natural); }

/* Inputs — softer focus ring (animates in instead of snapping) */
.input, .select, .textarea {
  transition:
    background-color var(--dur-fast) var(--ease-natural),
    border-color var(--dur-fast) var(--ease-natural),
    box-shadow var(--dur) var(--ease-pop);
}

/* Theme + density crossfade — every colour-referencing element
   transitions softly when var(--ink), var(--bg), etc. switch. */
body, .card, .input, .btn, .topbar, .nav-rail, .nav-drawer,
.topbar-menu-panel, .stone-card, .pill, .metric, .modal,
.sidebar, .content-shell {
  transition:
    background-color var(--dur) var(--ease-natural),
    border-color var(--dur) var(--ease-natural),
    color var(--dur) var(--ease-natural);
}
/* Don't fight the per-element transform transitions above — when a card
   transitions colour it should still use its own transform timing. */
.card { transition:
    transform var(--dur) var(--ease-pop),
    box-shadow var(--dur) var(--ease-pop),
    border-color var(--dur) var(--ease-natural),
    background-color var(--dur) var(--ease-natural),
    color var(--dur) var(--ease-natural);
}

/* Page entrance — stagger first 6 cards on the content area */
.content > * { animation: appleSettle var(--dur) var(--ease-pop) both; }
.content > *:nth-child(1) { animation-delay: 0ms; }
.content > *:nth-child(2) { animation-delay: 40ms; }
.content > *:nth-child(3) { animation-delay: 80ms; }
.content > *:nth-child(4) { animation-delay: 120ms; }
.content > *:nth-child(5) { animation-delay: 160ms; }
.content > *:nth-child(6) { animation-delay: 200ms; }
@keyframes appleSettle {
  0%   { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.98); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Stone-grid cards — staggered settle so they "rise" into place */
.stone-card { animation: appleSettle var(--dur-slow) var(--ease-pop) both; }
.stone-grid .stone-card:nth-child(1)  { animation-delay: 0ms; }
.stone-grid .stone-card:nth-child(2)  { animation-delay: 30ms; }
.stone-grid .stone-card:nth-child(3)  { animation-delay: 60ms; }
.stone-grid .stone-card:nth-child(4)  { animation-delay: 90ms; }
.stone-grid .stone-card:nth-child(5)  { animation-delay: 120ms; }
.stone-grid .stone-card:nth-child(6)  { animation-delay: 150ms; }
.stone-grid .stone-card:nth-child(7)  { animation-delay: 180ms; }
.stone-grid .stone-card:nth-child(8)  { animation-delay: 210ms; }
.stone-grid .stone-card:nth-child(n+9) { animation-delay: 240ms; }

/* Theme-toggle button — refined press feel */
#theme-toggle { transition: transform var(--dur-fast) var(--ease-pop), color var(--dur-fast) var(--ease-natural); }
#theme-toggle:active { transform: rotate(15deg) scale(0.92); }

/* Flash messages — bubble in from above with a soft bounce */
.flash {
  animation: flashIn var(--dur-slow) var(--ease-spring) both;
}
@keyframes flashIn {
  0%   { opacity: 0; transform: translate3d(0, -10px, 0) scale(0.96); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Tooltips — settle in instead of fading linearly */
[data-tip]::after {
  transition: opacity var(--dur-fast) var(--ease-pop), transform var(--dur-fast) var(--ease-pop);
  transform: translate(-50%, 4px);
}
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  transform: translate(-50%, 0);
}
.nav-rail-btn[data-tip]::after {
  transform: translateY(-50%) translateX(-4px);
}
.nav-rail-btn:hover[data-tip]::after,
.nav-rail-btn:focus-visible[data-tip]::after {
  transform: translateY(-50%) translateX(0);
}

/* Touch interaction polish — soften pointer-down across the board */
@media (hover: none) {
  /* On touch devices we don't have hover but we DO want a press flash */
  .btn:active, .stone-card:active, .nav-rail-btn:active,
  .topbar-icon-btn:active, .topbar-quick-btn:active { opacity: 0.85; }
}

/* ─────────────────────────────────────────────────────────────
   List / grid view switcher (.gv) — one item set, two layouts.
   Toolbar offers List + 3/4/5-column grid; choice persists per page.
   ───────────────────────────────────────────────────────────── */
.gv-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 14px; }

/* ─── List toolbar (search · filters · sort · view) ─────────────── */
.list-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.list-toolbar .gv-toolbar { margin: 0 0 0 auto; }
.lt-search { position: relative; display: flex; align-items: center; flex: 1 1 240px; max-width: 360px; min-width: 170px; }
.lt-search svg { position: absolute; left: 12px; width: 15px; height: 15px; color: var(--ink-mute); pointer-events: none; }
.lt-search input {
  width: 100%; height: 38px; padding: 0 16px 0 37px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface-solid); font: inherit; font-size: 13px; color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-pop), box-shadow var(--dur-fast) var(--ease-pop);
}
.lt-search input::placeholder { color: var(--ink-mute); }
.lt-search input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); }
.list-toolbar .lt-select { height: 38px; width: auto; min-width: 150px; flex: 0 0 auto;
  border-radius: var(--r-pill);
  /* The generic .select uses 12px vertical padding; inside this fixed 38px
     height that clips the text. Zero the vertical padding and let the native
     control centre its label. Horizontal padding is kept (and the sort
     variant re-adds left room for its icon below). */
  padding-top: 0; padding-bottom: 0; line-height: 1.2; }
.lt-sort { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; }
.lt-sort > svg { position: absolute; left: 11px; width: 14px; height: 14px; color: var(--ink-mute); pointer-events: none; z-index: 1; }
.lt-sort .lt-select { padding-left: 32px; min-width: 168px; }
/* Desktop: controls flow inline inside the toolbar flex; pill stays hidden. */
.lt-controls { display: contents; }
.lt-filters-btn { display: none; }
.list-empty { display: none; text-align: center; padding: 40px 24px; color: var(--ink-mute); font-size: 13.5px; }

/* ≤640: search on row 1; a Filters pill + density toggle on row 2.
   The filter/sort selects are hoisted into a bottom sheet on tap (nav.js). */
@media (max-width: 640px) {
  .list-toolbar { gap: 10px; }
  .list-toolbar .lt-search { flex: 1 1 100%; max-width: none; order: 0; }
  .list-toolbar .lt-controls { display: none; }
  .lt-filters-btn {
    display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px;
    border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface-solid);
    font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; order: 1;
    transition: transform var(--dur-fast) var(--ease-pop), border-color var(--dur-fast) var(--ease-pop);
  }
  .lt-filters-btn:active { transform: scale(0.97); }
  .lt-filters-btn svg { width: 17px; height: 17px; }
  .lt-filters-btn.has-active { border-color: var(--gold); color: var(--ink); }
  .lt-fcount {
    min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--gold);
    color: #1a1206; font-size: 11.5px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center;
  }
  .lt-fcount[hidden] { display: none; }
  .list-toolbar .gv-toolbar { margin: 0 0 0 auto; order: 2; }
}

/* Filter/sort selects, rendered as large tappable rows inside the bottom sheet. */
.gs-sheet-filters .lt-controls { display: flex; flex-direction: column; gap: 14px; }
.gs-sheet-filters .lt-sort { display: flex; }
.gs-sheet-filters .lt-sort > svg { left: 14px; width: 16px; height: 16px; }
.gs-sheet-filters .lt-select {
  width: 100%; min-width: 0; height: 50px; font-size: 16px; border-radius: 13px; padding: 0 16px;
}
.gs-sheet-filters .lt-sort .lt-select { padding-left: 40px; }
.gs-sheet-filters .lt-sheet-done {
  width: 100%; height: 50px; margin-top: 4px; border-radius: 13px; font-size: 16px; font-weight: 500;
}
.gv-switch {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--accent-50); border: 1px solid var(--line); border-radius: var(--r-pill);
}
.gv-switch button {
  width: 30px; height: 30px; padding: 0; border: 0; background: transparent;
  border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-mute); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.gv-switch button:hover { color: var(--ink); }
.gv-switch button.active { background: var(--surface-solid); color: var(--ink); box-shadow: var(--shadow-neu-soft); }
html[data-theme="dark"] .gv-switch button.active { background: var(--elevated); }
.gv-switch svg { width: 15px; height: 15px; }

.gv-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--ink); text-decoration: none; position: relative;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.gv-item[data-href] { cursor: pointer; }
.gv-item:hover { border-color: var(--gold-tint); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.gv-thumb {
  position: relative; width: 34px; height: 34px; flex: none; border-radius: 9px;
  background: var(--accent-50); display: flex; align-items: center; justify-content: center;
}
.gv-thumb img { width: 22px; height: 22px; opacity: 0.82; }
html[data-theme="dark"] .gv-thumb img { filter: invert(1) brightness(1.5); }
.gv-thumb .gv-dot { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--surface-solid); }
.gv-title { font-weight: 500; color: var(--ink); font-size: var(--t-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gv-sub { font-size: var(--t-caption); color: var(--ink-mute); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gv-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gv-k { font-size: 9.5px; font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-faint); }
.gv-v { font-size: var(--t-small); color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* LIST — full-width rows */
.gv[data-view="list"] { display: flex; flex-direction: column; gap: 8px; }
.gv[data-view="list"] .gv-item { display: flex; align-items: center; gap: 22px; padding: 13px 18px; }
.gv[data-view="list"] .gv-main { flex: 0 0 230px; min-width: 0; }
.gv[data-view="list"] .gv-fields { display: flex; align-items: center; gap: 30px; flex: 1; min-width: 0; }
.gv[data-view="list"] .gv-actions { margin-left: auto; flex: none; }

/* GRID — literal fixed columns from --gv-cols (set by the view toggle).
   minmax(0, 1fr) lets cards shrink to share the row so content can never
   overflow the track. Responsive caps (above) reduce the count on small
   screens. */
.gv[data-view="grid"] { display: grid; grid-template-columns: repeat(var(--gv-cols, 4), minmax(0, 1fr)); gap: 14px; }
.gv[data-view="grid"] .gv-item { display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.gv[data-view="grid"] .gv-fields { display: flex; flex-direction: column; gap: 9px; }
.gv[data-view="grid"] .gv-actions { margin-top: auto; }

/* Responsive column caps — reduce the fixed count on smaller screens so
   fixed-column grids never cram. Placed AFTER both grid definitions so the
   cap wins on source order. Applies to .stone-grid and .gv grids alike. */
@media (max-width: 1024px) {
  .stone-grid, .gv[data-view="grid"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .stone-grid, .gv[data-view="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .stone-grid, .gv[data-view="grid"] { grid-template-columns: 1fr; }
}

/* Responsive — list rows wrap on small screens; grid auto-fit handles itself. */
@media (max-width: 820px) {
  .gv[data-view="list"] .gv-item { flex-wrap: wrap; gap: 12px 18px; }
  .gv[data-view="list"] .gv-main { flex-basis: 100%; }
  .gv[data-view="list"] .gv-actions { margin-left: 0; flex: 1 1 100%; flex-wrap: wrap; }
}

/* ═══════════ Foldable postures ═══════════ */

/* Cover bars (book-fold outer screens, 320–360px): tighten chrome so nothing
   crowds at 320 — the smallest real viewport the platform supports. */
@media (max-width: 379px) {
  .content { padding: 12px 12px 96px; }
  .topbar { padding: 8px 10px; padding-top: calc(8px + env(safe-area-inset-top)); }
  .metrics { grid-template-columns: 1fr; }
  .notif-panel { width: calc(100vw - 16px); }
  .topbar-icon-btn, .topbar-avatar { width: 34px; height: 34px; }
}

/* Short landscape (phone on its side, ≤480px tall): the bottom tab bar is the
   biggest fixed cost — slim it, and respect side notches. */
@media (orientation: landscape) and (max-height: 480px) {
  .mobile-tabbar { padding: 3px 6px calc(3px + env(safe-area-inset-bottom));
    padding-left: max(6px, env(safe-area-inset-left));
    padding-right: max(6px, env(safe-area-inset-right)); }
  .mobile-tab { padding: 4px 0; }
  .mobile-tab span { display: none; }          /* icons carry the meaning at this height */
  .topbar { padding: 6px 14px; min-height: 0; }
  .content { padding-bottom: 64px; }
}