/* ============================================================
   APP  —  layout shell + reusable components.

   This file rarely changes. It reads only from tokens.css, so it
   is brand-agnostic. Re-skinning a client never touches this file.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
svg { display: block; }

/* ---------------- App grid ---------------- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* ---------------- Sidebar ---------------- */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: var(--sp-4) var(--sp-3);
  gap: var(--sp-5);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-2);
}
.brand-mark {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--brand);
  color: var(--brand-fg);
  display: grid; place-items: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  flex: none;
}
.brand-name { font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }
.brand-sub { font-size: var(--fs-xs); color: var(--text-subtle); }

.nav { display: flex; flex-direction: column; gap: var(--sp-4); overflow-y: auto; flex: 1; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
/* section dividers give the sidebar structure (like the reference) */
.nav-group + .nav-group { border-top: 1px solid var(--border); padding-top: var(--sp-4); }
.nav-heading {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-subtle);
  padding: var(--sp-1) var(--sp-3) var(--sp-2);
}
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
  font-size: var(--fs-md);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-item svg { width: 17px; height: 17px; flex: none; opacity: .85; }
.nav-item:hover { background: var(--surface-hover); color: var(--text); }
.nav-item.is-active {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: var(--fw-semibold);
}
.nav-item.is-active svg { opacity: 1; }

.sidebar-foot {
  border-top: 1px solid var(--border);
  padding-top: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.sidebar-foot .avatar { flex: none; }
.foot-meta { min-width: 0; }
.foot-name { font-size: var(--fs-md); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foot-role { font-size: var(--fs-xs); color: var(--text-subtle); }

/* ---------------- Main + topbar ---------------- */
.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 0 var(--sp-6);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--border);
}
.crumbs { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); }
.crumbs .muted { color: var(--text-subtle); }
.crumbs .sep { color: var(--text-subtle); }
.crumbs .current { font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }

.topbar-right { display: flex; align-items: center; gap: var(--sp-2); }

/* Global search (topbar) */
.topsearch {
  flex: 1; min-width: 0; max-width: 440px; margin-left: var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3);
  color: var(--text-subtle); cursor: text;
  transition: border-color var(--dur) var(--ease);
}
.topsearch:focus-within { border-color: var(--border-strong); }
.topsearch-ic { width: 16px; height: 16px; flex: none; }
/* width:0 + flex:1 so the input's intrinsic size can never widen the topbar
   (it forced ~230px and pushed the whole page into sideways scroll on phones) */
.topsearch input { flex: 1; width: 0; min-width: 0; border: none; background: none; outline: none; color: var(--text); font-size: var(--fs-md); }
.topsearch input::placeholder { color: var(--text-subtle); }
.topsearch-k { flex: none; font-size: var(--fs-xs); color: var(--text-subtle); border: 1px solid var(--border); border-radius: 5px; padding: 0 5px; line-height: 16px; }

/* Notification badge on an icon button */
.icon-btn { position: relative; }
.icon-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--negative); border: 2px solid var(--surface); }

/* Profile chip in the topbar */
.topprofile { display: inline-grid; place-items: center; padding: 2px; border-radius: 50%; border: 1px solid transparent; transition: border-color var(--dur) var(--ease); }
.topprofile:hover { border-color: var(--border-strong); }
.topprofile .avatar { width: 32px; height: 32px; }

/* Segmented control (date range) */
.segmented {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
}
.segmented button {
  padding: 4px var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  border-radius: 6px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.segmented button.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.icon-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--surface-hover); color: var(--text); }
.icon-btn svg { width: 17px; height: 17px; }

.pill-switch {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text);
}
.pill-switch .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--positive); }

.avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
  display: grid; place-items: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

/* ---------------- Content ---------------- */
.content {
  padding: var(--sp-6) var(--sp-8) var(--sp-10);
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.page-head-text { min-width: 0; }
.page-actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.page-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
}
.page-sub { color: var(--text-muted); font-size: var(--fs-md); margin-top: var(--sp-1); }

/* ---------------- Grid + cards ---------------- */
.grid { display: grid; gap: var(--sp-4); }
.grid-kpi { grid-template-columns: repeat(4, 1fr); margin-bottom: var(--sp-4); }
.grid-2 { grid-template-columns: 1.6fr 1fr; align-items: start; }
/* one uniform 16px gutter between all dashboard rows, same as the grid gap */
.page > section + section { margin-top: var(--sp-4); }

/* Two independent columns. Each packs its own cards, so a short card next to
   a tall one no longer leaves a page-sized void below itself (the old shared
   grid rows did exactly that between "attention" and "booking sources"). */
.dash-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--sp-4); align-items: start; }
.dash-main, .dash-side { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
@media (max-width: 1040px) {
  .dash-cols { display: flex; flex-direction: column; }
  .dash-main, .dash-side { display: contents; }
  /* single-column story order: calendar, attention, revenue, sources */
  #calCard { order: 1; }
  #attCard { order: 2; }
  #revCard { order: 3; }
  #srcCard { order: 4; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  /* min-width:0 lets a card shrink below its content's intrinsic width when it's
     a grid/flex item. Without it, a wide table's min-content forces the card
     past its track and the whole page scrolls sideways on mobile. */
  min-width: 0;
}
.card-pad { padding: var(--sp-6); }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.card-head h3 { font-size: var(--fs-base); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }
.card-head .sub { font-size: var(--fs-sm); color: var(--text-subtle); }

/* KPI tile */
.kpi { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); position: relative; cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.kpi:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.kpi-link-icon {
  position: absolute; top: 12px; right: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(130, 130, 140, 0.15);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(130, 130, 140, 0.2);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur) var(--ease);
}
.kpi-link-icon svg { width: 12px; height: 12px; }
.kpi:hover .kpi-link-icon { background: var(--ink); color: var(--bg); border-color: transparent; }
.kpi-label { font-size: var(--fs-md); color: var(--text-muted); font-weight: var(--fw-medium); }
.kpi-value { font-size: var(--fs-3xl); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); }
.kpi-foot { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.badge-pos { background: var(--positive-soft); color: var(--positive); }
.badge-neg { background: var(--negative-soft); color: var(--negative); }
.badge-muted { background: var(--surface-2); color: var(--text-muted); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md); font-weight: var(--fw-medium);
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn-primary { background: var(--primary); color: var(--primary-fg); }
.btn-primary:hover { opacity: .9; }
.btn-ghost { border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.btn-ghost:hover { background: var(--surface-hover); }
.btn-export { background: var(--primary); color: var(--primary-fg); }
.btn-export:hover { opacity: .9; }
.btn-export svg { width: 15px; height: 15px; }

/* Placeholder slot (Phase 0 scaffolding — Phase 1 fills these) */
.slot {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: repeating-linear-gradient(-45deg, transparent, transparent 9px, var(--surface-2) 9px, var(--surface-2) 10px);
  display: grid; place-items: center;
  color: var(--text-subtle);
  font-size: var(--fs-sm);
  min-height: 120px;
  gap: var(--sp-1);
}
.slot .slot-tag {
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--border);
  font-weight: var(--fw-medium);
}
.kpi .slot { min-height: 44px; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1040px) {
  .grid-kpi { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 64px 1fr; }
  .sidebar { padding: var(--sp-4) var(--sp-2); }
  .brand-text, .nav-heading, .nav-item .nav-label, .foot-meta { display: none; }
  .nav-item { justify-content: center; padding: var(--sp-3); }
  .brand { justify-content: center; }
  .sidebar-foot { justify-content: center; }
}
@media (max-width: 560px) {
  .content { padding: var(--sp-4); }
  .grid-kpi { grid-template-columns: 1fr; }
  .topbar { padding: 0 var(--sp-4); }
  .segmented, .pill-switch .label { display: none; }
  .crumbs .muted, .crumbs .sep, .topsearch-k { display: none; }
}

/* ---------------- Life: smooth theme flip + entrance ---------------- */
.slot-lg { min-height: 200px; }

body, .sidebar, .topbar, .card, .kpi, .slot, .nav-item, .segmented,
.segmented button, .icon-btn, .pill-switch, .badge, .brand-mark, .avatar {
  transition: background-color .22s var(--ease), border-color .22s var(--ease),
              color .18s var(--ease), box-shadow .18s var(--ease);
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
.content > * { animation: riseIn .55s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  *, .content > * { animation: none !important; transition: none !important; }
}

/* ---------------- KPI foot ---------------- */
.kpi-vs { color: var(--text-subtle); font-size: var(--fs-sm); }

/* ---------------- Occupancy heatmap ---------------- */
/* --hc = heat cell size, --hg = gap between cells. Bump --hc to scale the whole
   heatmap; every coupled measurement below reads from these two. */
#heatmap { --hc: 21px; --hg: 4px; display: flex; flex-direction: column; gap: var(--sp-4); }
/* The month row and the night grid share ONE horizontal scroll container so they
   scroll together and stay aligned. Scrolling only the grid (the old setup) left
   the month labels overflowing the card and desynced from the columns on mobile. */
.heat-scroll { overflow-x: auto; padding-bottom: 2px; }
.heat-inner { width: max-content; display: flex; flex-direction: column; gap: var(--sp-3); }
.heat-months { display: flex; gap: var(--hg); padding-left: calc(30px + var(--sp-2)); font-size: var(--fs-xs); color: var(--text-subtle); }
.heat-months span { width: var(--hc); flex: none; }
.heat-body { display: flex; gap: var(--sp-2); }
.heat-dows { display: grid; grid-template-rows: repeat(7, var(--hc)); gap: var(--hg); width: 30px; font-size: var(--fs-xs); color: var(--text-subtle); }
.heat-dows span { line-height: var(--hc); }
.heat-grid { display: flex; gap: var(--hg); }
.heat-col { display: grid; grid-template-rows: repeat(7, var(--hc)); gap: var(--hg); }
.heat-cell { width: var(--hc); height: var(--hc); border-radius: 5px; background: var(--heat-0); }
.heat-cell.b0 { background: var(--heat-0); }
.heat-cell.b1 { background: var(--heat-1); }
.heat-cell.b2 { background: var(--heat-2); }
.heat-cell.b3 { background: var(--heat-3); }
.heat-cell.b4 { background: var(--heat-4); }
.heat-cell.heat-pad { background: transparent; }
.heat-cell.is-future { opacity: .55; box-shadow: inset 0 0 0 1px var(--border-strong); }
.heat-cell[data-t] { cursor: pointer; transition: transform .1s var(--ease); }
.heat-cell[data-t]:hover { transform: scale(1.28); }
.heat-legend { display: flex; align-items: center; gap: 4px; justify-content: flex-end; font-size: var(--fs-xs); color: var(--text-subtle); }
.heat-legend .heat-cell { width: 12px; height: 12px; }
.heat-legend .hm-cell { width: 14px; height: 14px; border-radius: 4px; }

/* ---------------- Occupancy calendar (apartment x day) ---------------- */
.hm { display: grid; grid-template-columns: 88px 1fr; gap: var(--sp-3); }
.hm-ylabels { display: grid; grid-template-rows: repeat(12, 1fr); gap: 3px; }
.hm-yl { display: flex; align-items: center; font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-grid { display: grid; gap: 3px; min-height: 300px; }
.hm-cell { border-radius: 4px; background: var(--heat-0); cursor: pointer; outline: 1.5px solid transparent; outline-offset: -1px; transition: transform .1s var(--ease), outline-color .1s var(--ease); }
.hm-cell:hover { transform: scale(1.12); outline-color: var(--text); }
.hm-cell.b0 { background: var(--heat-0); }
.hm-cell.b1 { background: var(--heat-1); }
.hm-cell.b2 { background: var(--heat-2); }
.hm-cell.b3 { background: var(--heat-3); }
.hm-cell.b4 { background: var(--heat-4); }
.hm-xlabels { display: grid; gap: 3px; padding-left: calc(88px + var(--sp-3)); margin-top: 6px; font-size: var(--fs-xs); color: var(--text-subtle); }
.hm-xlabels span { text-align: center; overflow: hidden; white-space: nowrap; }

/* occupancy footer: stats + occupancy ticks bar, INSIDE the calendar card */
#occFoot { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--sp-4); }
.occ-foot-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; }
.occ-lead { display: flex; align-items: baseline; gap: var(--sp-3); }
.occ-pct { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); line-height: 1; }
.occ-cap { font-size: var(--fs-sm); color: var(--text-muted); }
.occ-mini { display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.occ-m { display: flex; flex-direction: column; gap: 1px; }
.occ-m b { font-size: var(--fs-base); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }
.occ-m span { font-size: var(--fs-xs); color: var(--text-subtle); }
.occ-fill-cap { font-size: var(--fs-sm); }
.occ-fill-cap strong { font-weight: var(--fw-semibold); }
.occ-fill-cap .muted-t { color: var(--text-subtle); }
.ticks { display: flex; gap: 2px; height: 28px; }
.tick { flex: 1; border-radius: 2px; background: var(--surface-2); }
.tick.on { background: var(--heat-3); }
.snap-big { font-size: 44px; font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); line-height: 1; }
.snap-label { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-2); }
.snap-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.snap-v { font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }
.snap-l { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 3px; }
.heat-tip {
  position: fixed; z-index: 50;
  transform: translate(-50%, -100%);
  background: var(--primary); color: var(--primary-fg);
  font-size: var(--fs-sm); padding: 5px 9px; border-radius: 7px;
  pointer-events: none; opacity: 0; white-space: nowrap;
  transition: opacity .12s var(--ease); box-shadow: var(--shadow-pop);
}

/* ---------------- Attention feed ---------------- */
.att-list { display: flex; flex-direction: column; padding-top: 0; padding-bottom: 0; }
.att-item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
.att-item:last-child { border-bottom: none; }
.att-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: none; }
.att-dot.warn { background: var(--warning); }
.att-dot.pos  { background: var(--positive); }
.att-dot.neg  { background: var(--negative); }
.att-main { flex: 1; min-width: 0; }
.att-title { font-size: var(--fs-md); font-weight: var(--fw-medium); }
.att-sub { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }
.att-right { text-align: right; flex: none; }
.att-impact { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.att-action { font-size: var(--fs-sm); color: var(--text-muted); font-weight: var(--fw-medium); white-space: nowrap; }
.att-action:hover { color: var(--text); }

/* ---------------- KPI sparkline ---------------- */
.spark { height: 34px; flex: 1; display: block; min-width: 0; }
.spark-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.spark-line { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.spark-area { fill: var(--ink); opacity: .07; }
.delta { font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; }
.delta-pos { color: var(--positive); }
.delta-neg { color: var(--negative); }

/* ---------------- Revenue bars ---------------- */
.rev-total { font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); margin-bottom: var(--sp-4); }
.rev-total span { font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--text-subtle); margin-left: var(--sp-2); }
.rbars { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: var(--sp-3); height: 260px; }
.r-grid { position: absolute; inset: 0; z-index: -1; background-image: repeating-linear-gradient(to bottom, transparent, transparent 39px, var(--border) 39px, var(--border) 40px); -webkit-mask-image: repeating-linear-gradient(to right, black, black 4px, transparent 4px, transparent 8px); mask-image: repeating-linear-gradient(to right, black, black 4px, transparent 4px, transparent 8px); pointer-events: none; }
/* dynamic height bars: solid top demarcated part with striped major body inside */
.rbar { position: relative; flex: 1; display: flex; align-items: flex-end; padding: 0 1.5px; background: var(--surface-2); border: 1px solid var(--border); border-bottom: none; border-radius: 7px 7px 0 0; cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); animation: growUp .6s var(--ease) both; transform-origin: bottom; }
.rbar-fill { width: 100%; height: 80%; background: repeating-linear-gradient(-45deg, transparent, transparent 4px, var(--border-strong) 4px, var(--border-strong) 8px); border-radius: 4px 4px 0 0; transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease); pointer-events: none; }
.rbar:hover { background: var(--border-strong); border-color: var(--ink-soft); }
.rbar:hover .rbar-fill { opacity: 1; background: repeating-linear-gradient(-45deg, transparent, transparent 4px, var(--ink) 4px, var(--ink) 8px); }
.rbar::after { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) scale(0); width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--ink); transition: transform var(--dur) var(--ease); }
.rbar:hover::after { transform: translateX(-50%) scale(1); }
/* equal-width grid columns, not flex: flex items kept their label text as an
   intrinsic width floor, which forced sideways page scroll on phones */
.rbar-labels { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--sp-2); margin-top: var(--sp-2); }
.rbar-label { min-width: 0; text-align: center; font-size: var(--fs-xs); color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes growUp { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------------- Source bars ---------------- */
.src-row { display: grid; grid-template-columns: 96px 1fr 64px; align-items: center; gap: var(--sp-4); padding: var(--sp-3) 0; }
.src-name { font-size: var(--fs-md); color: var(--text-muted); }
.src-track { height: 10px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.src-fill { display: block; height: 100%; border-radius: var(--radius-pill); transform-origin: left; animation: growRight .6s var(--ease) both; }
.src-fill.direct { background: var(--ink); }
.src-fill.ota { background: var(--ink-soft); }

/* ---------------- Booking sources (art pie + tile cluster) ----------------
   Recreates the reference "Expenses" card: painted gradient lobes per wedge,
   one hatched wedge, ink spokes with capsule handles, map-style tools on the
   right, big total bottom-left, small square tiles with a sparkle center. */
#srcChart { position: relative; display: flex; flex-direction: column; gap: var(--sp-4); container-type: inline-size; }
.pie-zone { position: relative; padding-right: 44px; }
.pie-art { width: 100%; max-width: 320px; margin: 0 auto; transition: transform .28s var(--ease); }
.pie-svg { width: 100%; height: auto; display: block; overflow: visible; }
.slice { transition: opacity .16s var(--ease); }
.pie-svg.dim .slice { opacity: .3; }
.pie-svg.dim .slice.lit { opacity: 1; }
/* hairline spokes, like the reference; they begin at the centre dot's edge */
.pie-line { stroke: var(--ink); stroke-width: 1; }
.pie-handle, .pie-center { fill: var(--ink); }
.pie-hit { fill: transparent; cursor: pointer; }
.pie-lab { fill: var(--text); stroke: var(--surface); stroke-width: 3px; paint-order: stroke; font-size: 13px; font-weight: var(--fw-bold); text-anchor: middle; dominant-baseline: central; pointer-events: none; display: none; }
.pie-svg.labels-on .pie-lab { display: block; }
/* map-style tools, upper right, clear of the tile overlay hanging bottom-right */
.pie-tools { position: absolute; top: 2px; right: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.ptool { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); display: grid; place-items: center; box-shadow: var(--shadow-sm); transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ptool:hover { background: var(--surface-hover); color: var(--text); }
.ptool.is-on { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.ptool svg { width: 16px; height: 16px; }

/* pill on the card head, like the reference's "Year to date" control */
.pill-drop { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); white-space: nowrap; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.pill-drop:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.pill-drop svg { width: 13px; height: 13px; color: var(--text-muted); }

/* big total, bottom-left in the flow */
.src-total { min-width: 0; position: relative; z-index: 1; }
.src-total-num { font-size: 32px; font-weight: var(--fw-semibold); letter-spacing: -0.02em; line-height: 1; }
.src-total-cap { color: var(--text-muted); font-size: var(--fs-md); margin-top: var(--sp-2); }

/* Glass tile cluster OVERLAID on the pie's lower right, like the reference:
   portrait tiles, taller than they are wide, dot up top and text at the foot.
   bottom matches the card padding: #srcChart IS the card-pad box, and abs
   positioning resolves against its padding box, so bottom:0 would sit flush
   on the card border. */
.src-tiles { position: absolute; right: 0; bottom: var(--sp-6); z-index: 2; width: clamp(192px, 50%, 208px); display: flex; flex-direction: column; gap: var(--sp-2); }
.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.tile {
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 16px; padding: 12px; min-width: 0; min-height: 102px;
  display: flex; flex-direction: column; align-items: flex-start;
  box-shadow: var(--shadow-sm);
}
/* ring dot: dark outline circle with the gradient colour glowing inside it */
.tile-dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; flex: none; }
.tile-dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle, currentColor 20%, color-mix(in srgb, currentColor 55%, transparent) 62%, transparent 100%); }
.tile-dot.is-hollow { border-color: color-mix(in srgb, var(--ink) 55%, transparent); }
.tile-dot.is-hollow::after { background: transparent; }
.tile-name { font-size: var(--fs-sm); color: var(--text-muted); margin-top: auto; padding-top: var(--sp-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tile-val { font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); margin-top: 1px; }
.tile-wide { flex-direction: row; align-items: center; gap: var(--sp-2); padding: 8px 12px; min-height: 0; }
.tile-wide .tile-name { margin: 0; padding: 0; flex: 1; }
.tile-wide .tile-val { margin: 0; font-size: var(--fs-md); }

/* Below ~368px of chart width (phones, narrow side columns) the overlay would
   swallow the art, so: tools become a row above the pie, the total tucks into
   the pie's empty corner, and the tile cluster flows full-width below it.
   Container query, not viewport: it is the CARD's width that decides.
   This block must stay at the END of the booking-sources section: the base
   rules above would otherwise win the cascade (equal specificity, later). */
@container (width < 368px) {
  .pie-zone { padding-right: 0; display: flex; flex-direction: column; }
  .pie-tools { position: static; order: -1; flex-direction: row; justify-content: flex-end; margin-bottom: var(--sp-2); }
  .src-total { margin-top: -34px; }
  .src-tiles { position: static; width: 100%; margin-top: var(--sp-2); }
  .tile { min-height: 0; }
}

.src-val { font-size: var(--fs-sm); font-weight: var(--fw-medium); text-align: right; }
@keyframes growRight { from { transform: scaleX(0); } to { transform: scaleX(1); } }


/* ---------------- Table ---------------- */
/* Tables scroll INSIDE their card on narrow screens instead of pushing the
   whole page sideways. Without this, a 6-column table forces horizontal
   overflow on mobile and every card renders squeezed with dead space. */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { white-space: nowrap; }
.tbl th { text-align: left; font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); padding: 0 var(--sp-3) var(--sp-3); }
.tbl td { padding: var(--sp-3); border-top: 1px solid var(--border); font-size: var(--fs-md); }
.tbl tbody tr { transition: background-color var(--dur) var(--ease); }
.tbl tbody tr:hover { background: var(--surface-hover); }
.t-guest { font-weight: var(--fw-medium); }
.t-ref { color: var(--text-subtle); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.src-tag { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.src-tag.direct { background: var(--surface-2); color: var(--text); }
.src-tag.ota { background: var(--surface-2); color: var(--text-muted); }

/* ---------------- Heatmap summary footer ---------------- */
.heat-summary { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-muted); }
.heat-summary strong { color: var(--text); font-weight: var(--fw-semibold); }

/* ---------------- KPI drill-down drawer ---------------- */
.kpi { cursor: pointer; }
.kpi:hover { background: var(--surface-hover); }

.drawer-backdrop { position: fixed; inset: 0; background: rgba(8,10,13,.42); opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s; z-index: 40; pointer-events: none; }
.drawer-backdrop.show { opacity: 1; visibility: visible; }
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(580px, 94vw); background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-pop); transform: translateX(100%); transition: transform .3s var(--ease); z-index: 41; display: flex; flex-direction: column; }
.drawer.open { transform: none; }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-6); border-bottom: 1px solid var(--border); }
.drawer-label { font-size: var(--fs-sm); color: var(--text-muted); font-weight: var(--fw-medium); }
.drawer-value { font-size: var(--fs-3xl); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); margin-top: 2px; }
.drawer-body { padding: var(--sp-6); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-6); }
.drawer-cmp { font-size: var(--fs-md); color: var(--text-muted); }
.drawer-cmp strong { color: var(--text); font-weight: var(--fw-semibold); }
.drawer-sub { font-size: var(--fs-sm); color: var(--text-muted); font-weight: var(--fw-medium); margin-bottom: var(--sp-3); }

/* area chart */
.chart-wrap { position: relative; }
.chart { width: 100%; height: auto; display: block; }
.ch-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.ch-ylab { fill: var(--text-subtle); font-size: 10px; }
.ch-area { animation: fadeIn .5s var(--ease) both; }
.ch-line { fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ch-g0 { stop-color: var(--ink); stop-opacity: .14; }
.ch-g1 { stop-color: var(--ink); stop-opacity: 0; }
.ch-dot { fill: var(--surface); stroke: var(--ink); stroke-width: 2; opacity: 0; transition: opacity .1s var(--ease); }
.ch-dot.on { opacity: 1; }
.ch-guide { stroke: var(--border-strong); stroke-width: 1; opacity: 0; transition: opacity .1s var(--ease); }
.ch-guide.on { opacity: 1; }
.ch-hit { fill: transparent; cursor: crosshair; }
.chart-tip { position: absolute; top: -6px; transform: translateX(-50%); background: var(--primary); color: var(--primary-fg); padding: 5px 9px; border-radius: 7px; font-size: var(--fs-sm); opacity: 0; pointer-events: none; transition: opacity .12s var(--ease); white-space: nowrap; display: flex; flex-direction: column; box-shadow: var(--shadow-pop); z-index: 2; }
.chart-tip.on { opacity: 1; }
.chart-tip strong { font-weight: var(--fw-semibold); }
.chart-tip span { font-size: var(--fs-xs); opacity: .75; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* day-of-week mini bars */
.dow-bars { display: flex; align-items: flex-end; gap: var(--sp-2); height: 92px; }
.dowb { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--sp-1); }
.dowb-fill { width: 68%; background: var(--ink); border-radius: 5px 5px 0 0; min-height: 4px; transform-origin: bottom; animation: growUp .5s var(--ease) both; }
.dowb span { font-size: var(--fs-xs); color: var(--text-subtle); }

/* ---------------- Pages + Guests (CRM) ---------------- */
.page.is-hidden { display: none; }
.stat { padding: var(--sp-4) var(--sp-5); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.stat-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--surface-2); color: var(--text-muted); display: grid; place-items: center; flex: none; }
.stat-ic svg { width: 20px; height: 20px; }
#guestTable .tbl tbody tr { cursor: pointer; }
.t-ltv { font-weight: var(--fw-semibold); }
.t-src .src-tag { margin-right: 4px; }
.gstat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.gstat-v { font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }
.gstat-l { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }
@media (max-width: 560px) { .gstat-row { grid-template-columns: repeat(2, 1fr); } }

/* section label + 3-col */
.sec-label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .05em; text-transform: uppercase; color: var(--text-subtle); margin: var(--sp-2) 0 var(--sp-1); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } }

/* top guest cards */
.topg { padding: var(--sp-5); cursor: pointer; position: relative; display: flex; flex-direction: column; transition: background-color var(--dur) var(--ease); }
.topg:hover { background: var(--surface-hover); }
.topg-rank { position: absolute; top: var(--sp-4); right: var(--sp-5); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-subtle); }
.topg-av { width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); color: var(--text); display: grid; place-items: center; font-weight: var(--fw-semibold); margin-bottom: var(--sp-3); }
.topg-tier { position: absolute; top: var(--sp-4); right: var(--sp-5); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .05em; text-transform: uppercase; }
.topg-name { font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }
.topg-meta { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }

/* search */
.search { display: flex; align-items: center; gap: var(--sp-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); min-width: 210px; }
.search-ic { width: 15px; height: 15px; color: var(--text-subtle); flex: none; }
.search input { border: none; background: none; outline: none; color: var(--text); font-size: var(--fs-md); width: 100%; }
.search input::placeholder { color: var(--text-subtle); }

/* segment chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5) var(--sp-3); }
.chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-muted); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.chip:hover { background: var(--surface-hover); color: var(--text); }
.chip.is-active { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.chip-n { font-size: var(--fs-xs); opacity: .7; }

/* row avatar + name */
.row-av { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); margin-right: var(--sp-3); vertical-align: middle; }
.row-name { vertical-align: middle; }
.badge-vip { background: var(--brand-soft); color: var(--brand); }

/* sortable header */
.th-sort { cursor: pointer; -webkit-user-select: none; user-select: none; }
.th-sort:hover { color: var(--text); }
.th-caret { opacity: 0; margin-left: 3px; font-size: 9px; }
.th-sort.is-sort { color: var(--text); }
.th-sort.is-sort .th-caret { opacity: 1; }

/* pager */
.pager { display: flex; align-items: center; gap: 4px; justify-content: flex-end; padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); }
.pg-btn { min-width: 30px; height: 30px; padding: 0 var(--sp-2); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-muted); border: 1px solid transparent; }
.pg-btn:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); }
.pg-btn.is-active { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.pg-btn:disabled { opacity: .4; cursor: default; }
.pg-ell { color: var(--text-subtle); padding: 0 2px; }

/* empty */
.empty { padding: var(--sp-8); text-align: center; color: var(--text-subtle); }

/* ---------------- Guest overview group card ---------------- */
.guest-overview .card, .dash-overview .card, .funnel-overview .card { box-shadow: none; border: none; background: var(--surface-2); }
.guest-overview .stat-ic { background: var(--surface); }
/* the KPI grid is the overview card's only child; its trailing margin just
   fattened the card's bottom padding */
.dash-overview .grid-kpi { margin-bottom: 0; }

/* avatar colours (muted; the one place colour is welcome) */
.av-0 { background: #6b7a99; color: #fff; }
.av-1 { background: #7f8a57; color: #fff; }
.av-2 { background: #a5746a; color: #fff; }
.av-3 { background: #5f8a8a; color: #fff; }
.av-4 { background: #8a7a9c; color: #fff; }
.av-5 { background: #9c8560; color: #fff; }

/* medal (gold / silver / bronze) top-guest cards */
.topg.medal-1 { background: linear-gradient(150deg, color-mix(in srgb, var(--gold) 15%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--border)); }
.topg.medal-2 { background: linear-gradient(150deg, color-mix(in srgb, var(--silver) 16%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--silver) 42%, var(--border)); }
.topg.medal-3 { background: linear-gradient(150deg, color-mix(in srgb, var(--bronze) 15%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--bronze) 42%, var(--border)); }
.medal-1 .topg-av { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 55%, transparent); }
.medal-2 .topg-av { box-shadow: 0 0 0 2px color-mix(in srgb, var(--silver) 55%, transparent); }
.medal-3 .topg-av { box-shadow: 0 0 0 2px color-mix(in srgb, var(--bronze) 55%, transparent); }
.medal-1 .topg-tier { color: color-mix(in srgb, var(--gold) 75%, var(--text)); }
.medal-2 .topg-tier { color: color-mix(in srgb, var(--silver) 80%, var(--text)); }
.medal-3 .topg-tier { color: color-mix(in srgb, var(--bronze) 80%, var(--text)); }

/* rising star */
.guest-overview .rising { margin-top: var(--sp-4); padding: var(--sp-5); display: flex; align-items: center; gap: var(--sp-4); cursor: pointer; background: var(--surface); border: 1px solid var(--border); }
.rising-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex: none; }
.rising-ic svg { width: 20px; height: 20px; }
.rising-body { flex: 1; min-width: 0; }
.rising-tag { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .05em; text-transform: uppercase; color: var(--brand); }
.rising-name { font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); margin-top: 1px; }
.rising-meta { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }
.rising-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: var(--fw-semibold); flex: none; }

/* drawer guest profile */
.drawer-contact { font-size: var(--fs-md); color: var(--text-muted); }
.drawer-summary { font-size: var(--fs-md); line-height: 1.55; color: var(--text); background: var(--surface-2); border-radius: var(--radius-sm); padding: var(--sp-4); }
.prof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.prof { background: var(--surface-2); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); }
.prof-l { font-size: var(--fs-xs); color: var(--text-subtle); text-transform: uppercase; letter-spacing: .04em; }
.prof-v { font-size: var(--fs-md); font-weight: var(--fw-medium); margin-top: 2px; }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ---------------- Win-back Queue ---------------- */

.wb-row { display: flex; align-items: center; padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border); transition: background var(--dur); }
.wb-row:last-child { border-bottom: none; }
.wb-row:hover { background: var(--surface-hover); }
.wb-main { flex: 1; display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; }
.wb-info { display: flex; flex-direction: column; }
.wb-name { font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.wb-days { font-size: var(--fs-sm); color: var(--text-subtle); }
.wb-offer-wrap { display: flex; align-items: center; gap: var(--sp-4); }
.wb-val { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.wb-offer-btn { padding: 6px 14px; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); transition: all var(--dur); cursor: pointer; background: transparent; }
.wb-offer-btn:hover { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }

.wb-toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); background: var(--ink); color: var(--bg); padding: 12px 20px; border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: var(--fw-medium); box-shadow: var(--shadow-pop); opacity: 0; pointer-events: none; transition: all .3s var(--ease); z-index: 100; display: flex; align-items: center; gap: 8px; }
.wb-toast.show { opacity: 1; transform: translate(-50%, 0); }
.wb-toast svg { width: 16px; height: 16px; color: var(--positive); flex: none; }

/* ---------------- Funnel page ---------------- */
.fn-stat { padding: var(--sp-5); display: flex; flex-direction: column; gap: 6px; }
.fn-stat-sub { font-size: var(--fs-xs); color: var(--text-subtle); }

.fn-row { display: grid; grid-template-columns: minmax(120px, 178px) 1fr minmax(96px, 132px); align-items: center; gap: var(--sp-4); }
.fn-meta { min-width: 0; }
.fn-label { font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }
.fn-sub { font-size: var(--fs-sm); color: var(--text-subtle); }
.fn-track { background: var(--surface-2); border-radius: var(--radius-sm); height: 34px; overflow: hidden; min-width: 0; }
.fn-bar { height: 100%; background: var(--ink); border-radius: var(--radius-sm); transform-origin: left; animation: growRight .6s var(--ease) both; }
.fn-bar.is-leak { background: var(--ink-soft); }
.fn-nums { text-align: right; min-width: 0; }
.fn-count { font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }
.fn-conv { font-size: var(--fs-xs); color: var(--text-subtle); }
.fn-gap { padding-left: calc(178px + var(--sp-4)); }
.fn-drop { display: inline-block; font-size: var(--fs-xs); color: var(--text-muted); padding: var(--sp-2) 0; }
.fn-drop.is-leak { color: var(--negative); font-weight: var(--fw-semibold); }

.leak-hero { padding: var(--sp-5); background: var(--surface-2); border-radius: var(--radius); }
.leak-tag { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .05em; text-transform: uppercase; color: var(--negative); }
.leak-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); margin-top: var(--sp-2); }
.leak-arrow { color: var(--text-subtle); }
.leak-big { font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--negative); letter-spacing: var(--tracking-tight); line-height: 1.1; }
.leak-sub { font-size: var(--fs-sm); color: var(--text-muted); }
.leak-money { margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--border); border-radius: var(--radius); }
.leak-money-v { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }
.leak-money-v span { font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--text-subtle); }
.leak-money-l { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }
.drop-list { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.drop-item { display: grid; grid-template-columns: 1fr 84px 40px; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); }
.drop-names { color: var(--text-muted); min-width: 0; }
.drop-bar { height: 6px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.drop-fill { display: block; height: 100%; background: var(--ink-soft); border-radius: var(--radius-pill); }
.drop-pct { text-align: right; font-weight: var(--fw-medium); }

/* conversion-by-source table + trend caption */
.t-conv { font-weight: var(--fw-semibold); }
.t-convbar { width: 120px; }
.th-bar { width: 120px; }
.t-convbar .src-track { height: 8px; }
.fn-trend-cap { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-muted); }
.fn-trend-cap strong { color: var(--text); font-weight: var(--fw-semibold); font-size: var(--fs-md); }

@media (max-width: 560px) {
  .fn-row { grid-template-columns: 1fr auto; grid-template-areas: "meta nums" "track track"; row-gap: var(--sp-2); }
  .fn-meta { grid-area: meta; } .fn-nums { grid-area: nums; } .fn-track { grid-area: track; }
  .fn-gap { padding-left: 0; }
}

/* ---------------- Globe: the centerpiece on a dark space stage ---------------- */
.globe-sec { margin: var(--sp-4) 0; }
.globe-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.globe-title { font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }
.globe-cap { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }
.globe-drop { position: relative; }
.geo-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 180px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); padding: var(--sp-1); display: flex; flex-direction: column; gap: 2px; }
.geo-menu[hidden] { display: none; }
.geo-opt { text-align: left; padding: var(--sp-2) var(--sp-3); border-radius: 6px; font-size: var(--fs-md); color: var(--text-muted); }
.geo-opt:hover { background: var(--surface-hover); color: var(--text); }
.geo-opt.is-active { background: var(--surface-2); color: var(--text); font-weight: var(--fw-medium); }

/* NO card: the globe + stars sit on the page, with a soft dark vignette that
   fades to transparent so there is no card edge, just space melting into the page. */
.globe-stage { position: relative; overflow: hidden; min-height: 680px; display: grid; place-items: center; background: radial-gradient(closest-side at 50% 46%, rgba(6,9,18,0.97), rgba(6,9,18,0.72) 46%, rgba(6,9,18,0) 80%); }
.star-canvas { position: absolute; inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px); pointer-events: none; opacity: .7; }
.globe-holder { position: relative; z-index: 2; width: 640px; max-width: 82vw; aspect-ratio: 1 / 1; }
#globeViz { width: 100%; height: 100%; }
#globeViz canvas { display: block; cursor: grab; touch-action: none; }
#globeViz canvas:active { cursor: grabbing; }
/* GPS-tracked city labels (globe.gl positions these; we offset them above the point) */
.globe-label { pointer-events: none; transform: translate(-50%, -150%); white-space: nowrap; text-align: center; transition: opacity .3s var(--ease); }
.glabel-dot { display: block; width: 7px; height: 7px; margin: 0 auto 4px; border-radius: 50%; background: #5b9bf0; box-shadow: 0 0 10px #5b9bf0; }
.glabel-city { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: #eef3fa; letter-spacing: var(--tracking-tight); }
.glabel-meta { display: block; font-size: var(--fs-xs); color: #9fb0c8; }

/* overlays (fixed light colors — the stage is dark) */
.globe-clock { position: absolute; top: var(--sp-5); left: var(--sp-6); z-index: 5; font-family: var(--font-mono); font-size: var(--fs-sm); color: #e8eef7; display: flex; align-items: center; gap: var(--sp-2); letter-spacing: .02em; }
.clock-dot { width: 7px; height: 7px; border-radius: 50%; background: #34c07a; box-shadow: 0 0 8px #34c07a; }
.globe-feed { position: absolute; bottom: var(--sp-5); left: var(--sp-6); z-index: 5; display: flex; flex-direction: column; gap: 5px; max-width: 280px; }
.feed-row { font-size: var(--fs-xs); color: #aeb9cc; display: flex; align-items: center; gap: 6px; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.feed-row.in { opacity: 1; transform: none; }
.feed-row b { color: #eef3fa; font-weight: var(--fw-semibold); }
.feed-dot { width: 6px; height: 6px; border-radius: 50%; background: #4f8fe4; flex: none; box-shadow: 0 0 6px #4f8fe4; }
.feed-ago { color: #6b7688; margin-left: 4px; }

/* side editorial labels hidden for now — Phase 2 replaces them with GPS-tracked labels */
.geo-overlay { display: none; position: absolute; top: 0; height: 100%; z-index: 5; flex-direction: column; justify-content: center; gap: var(--sp-5); pointer-events: none; }
.geo-left { left: var(--sp-6); align-items: flex-start; }
.geo-right { right: var(--sp-6); align-items: flex-end; }
.geo-tag { display: flex; align-items: center; gap: var(--sp-2); background: none; pointer-events: auto; }
.geo-right .geo-tag { flex-direction: row-reverse; }
.geo-tag-line { width: 30px; height: 1px; background: linear-gradient(90deg, transparent, #4f8fe4); flex: none; }
.geo-right .geo-tag-line { background: linear-gradient(270deg, transparent, #4f8fe4); }
.geo-tag-body { text-align: left; }
.geo-right .geo-tag-body { text-align: right; }
.geo-tag-city { display: block; font-size: var(--fs-md); font-weight: var(--fw-semibold); color: #eef3fa; letter-spacing: var(--tracking-tight); }
.geo-tag-meta { display: block; font-size: var(--fs-xs); color: #8b97ab; margin-top: 1px; }
.geo-tag:hover .geo-tag-city { color: #7fb0f2; }

.globe-nowebgl #globeViz { display: none; }
.globe-nowebgl .globe-holder::after { content: 'Open on a WebGL browser to see the globe'; color: #8b97ab; font-size: var(--fs-sm); position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }

@media (max-width: 860px) {
  .globe-stage { min-height: 460px; }
  .globe-holder { width: 300px; max-width: 82vw; }
  .geo-overlay { display: none; }
  .globe-feed { max-width: 200px; }
}