/* Thrive Pulse — portfolio dashboard
   Dark surface, single orange accent. The accent is load-bearing: it marks the
   current series and nothing else, so it stays readable when a chart is dense. */

:root {
  --bg:        #0d1015;
  --panel:     #151a21;
  --panel-2:   #1b212a;
  --border:    #262e3a;
  --text:      #e8edf4;
  --muted:     #8994a6;
  --faint:     #5c6676;
  --accent:    #e2822b;
  --accent-dim:#8a5220;
  --pos:       #3fb950;
  --neg:       #f26d5b;
  --warn:      #d9a441;
  --radius:    10px;
  --sidebar:   232px;
}

* { box-sizing: border-box; }

/* The browser's own [hidden]{display:none} is a plain element rule, so ANY
   class that sets `display` silently outranks it. This bit four separate
   controls in this codebase — the nav items, the user menu, the range popover
   and the filter bar — each time presenting as "the JavaScript is not working"
   when el.hidden was being set correctly all along. One rule, applied once,
   removes the whole class of bug. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

/* ---------------------------------------------------------------- layout */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar);
  flex: 0 0 var(--sidebar);
  background: var(--panel);
  border-right: 1px solid var(--border);
  padding: 20px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 0 6px 18px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.brand img { width: 30px; height: 30px; }
.brand .name { font-weight: 650; letter-spacing: -0.01em; }
.brand .sub { font-size: 11px; color: var(--faint); margin-top: -2px; }

/* ---- grouped navigation ---- */
/* Claims the space between brand and footer and scrolls inside it. Without an
   explicit flex basis the list sizes to its content and the last section is
   clipped behind the user bar at laptop heights. */
.nav {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  margin-right: -6px; padding-right: 6px;   /* keep the scrollbar off the labels */
  scrollbar-width: thin;
}

.nav-sec + .nav-sec { margin-top: 6px; }

/* A real button: icon, label, state, affordance — in one row that cannot wrap.
   The label alone read as a caption, and the accent dot was breaking onto its
   own line because it was pinned to the text rather than laid out beside it. */
.nav-head {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 7px 9px;
  border: 1px solid transparent; border-radius: 7px;
  background: none; cursor: pointer; font: inherit;
  font-size: 11px; font-weight: 700; letter-spacing: .085em; text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.nav-head:hover { background: var(--panel-2); color: var(--text); }
.nav-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.nav-ico { flex: 0 0 15px; opacity: .75; }
.nav-head:hover .nav-ico { opacity: 1; }
.nav-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Pushed to the right edge by the label's auto margin, so it never wraps. */
.nav-chev { flex: 0 0 9px; margin-left: auto; opacity: .55; transition: transform .15s ease; }
.nav-sec.shut .nav-chev { transform: rotate(-90deg); }
.nav-head:hover .nav-chev { opacity: .9; }

.nav-mark { flex: 0 0 auto; width: 0; }
.nav-sec.shut.here .nav-head { color: var(--text); border-color: var(--border); }
.nav-sec.shut.here .nav-mark {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.nav-sec.here .nav-ico { color: var(--accent); opacity: 1; }

.nav-items { display: flex; flex-direction: column; gap: 1px; padding-left: 9px; }
/* Collapsing hides the items, not the heading — the heading is how you get
   them back, and [hidden] would take it with them. */
.nav-sec.shut .nav-items { display: none; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
  border: 0; background: none; width: 100%; text-align: left;
  font: inherit; font-size: 13.5px;
}
.nav-item:hover { background: var(--panel-2); color: var(--text); }
.nav-item[aria-current="true"] { background: var(--panel-2); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.nav-item .dot {
  width: 5px; height: 5px; border-radius: 50%; background: currentColor;
  opacity: .4; flex: 0 0 5px;
}
.nav-item[aria-current="true"] .dot { opacity: 1; background: var(--accent); }

.sidebar-foot {
  margin-top: 8px; padding: 10px 6px 0; flex: 0 0 auto;
  font-size: 11px; color: var(--faint);
  border-top: 1px solid var(--border);
}
.sidebar-foot .src { display: flex; align-items: center; gap: 6px; }
.sidebar-foot .pip { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: 0 0 7px; }
.sidebar-foot .pip.live { background: var(--pos); }
/* Freshness, not connection: amber after a missed night, red once the job is
   plainly not running. */
.sidebar-foot .pip.stale { background: var(--warn); }
.sidebar-foot .pip.old   { background: var(--neg); }
.sidebar-foot .pip.local { background: var(--accent); }

.main { flex: 1; min-width: 0; padding: 22px 26px 60px; }

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
h1 { font-size: 20px; margin: 0; letter-spacing: -0.02em; }
.page-head .sub { color: var(--muted); font-size: 13px; margin-top: 3px; }

.controls { display: flex; gap: 8px; align-items: center; }
.seg { display: inline-flex; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg button {
  background: none; border: 0; color: var(--muted); font: inherit;
  padding: 6px 12px; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--panel-2); color: var(--text); }
.seg button + button { border-left: 1px solid var(--border); }

/* ---------------------------------------------------------------- cards */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; margin-bottom: 16px; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.kpi .label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); }
.kpi .value { font-size: 25px; font-weight: 650; letter-spacing: -0.025em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.kpi .meta { font-size: 12px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.delta.pos { color: var(--pos); }
.delta.neg { color: var(--neg); }

.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px; }
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 14px 16px 0;
}
.panel-head h2 { font-size: 14px; margin: 0; font-weight: 600; }
.panel-head .note { font-size: 12px; color: var(--faint); }
.panel-body { padding: 12px 16px 16px; overflow-x: auto; }

/* ---------------------------------------------------------------- table */

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: 8px 10px; text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
thead th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint); font-weight: 600; border-bottom: 1px solid var(--border);
  cursor: pointer; user-select: none;
}
thead th:hover { color: var(--muted); }
thead th[aria-sort] { color: var(--text); }
tbody tr { border-bottom: 1px solid rgba(38,46,58,.5); }
tbody tr:hover { background: var(--panel-2); }
tbody tr:last-child { border-bottom: 0; }
td.num { font-variant-numeric: tabular-nums; }
tfoot td { font-weight: 600; color: var(--text); border-top: 1px solid var(--border); }

.tag {
  display: inline-block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .05em; padding: 2px 6px; border-radius: 4px;
  border: 1px solid var(--border); color: var(--muted); margin-left: 7px;
}
.tag.closed { color: var(--neg); border-color: rgba(242,109,91,.35); }
.tag.third_party { color: var(--accent); border-color: var(--accent-dim); }
.tag.won { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 40%, transparent); }

.bar { height: 5px; border-radius: 3px; background: var(--panel-2); position: relative; min-width: 56px; }
.bar > i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--accent); }

/* ---------------------------------------------------------------- chart */

.chart-wrap { position: relative; }
svg { display: block; width: 100%; overflow: visible; }
.axis text { fill: var(--faint); font-size: 10px; }
.grid line { stroke: var(--border); stroke-width: 1; }
.series-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.series-area { fill: url(#accentFade); }
.dot { fill: var(--accent); }

.tip {
  position: absolute; pointer-events: none; opacity: 0;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 7px; padding: 7px 10px; font-size: 12px;
  transform: translate(-50%, -115%); white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0,0,0,.45); transition: opacity .1s;
}
.tip b { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- states */

.banner {
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  background: var(--panel); border-radius: var(--radius);
  padding: 13px 16px; margin-bottom: 16px; font-size: 13px; color: var(--muted);
}
.banner b { color: var(--text); font-weight: 600; }
.banner code {
  background: var(--panel-2); padding: 1px 5px; border-radius: 4px;
  font-size: 12px; color: var(--text);
}
.banner.err { border-left-color: var(--neg); }

.empty { color: var(--faint); padding: 26px 0; text-align: center; }

.skeleton { background: var(--panel-2); border-radius: 6px; animation: pulse 1.3s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .45 } 50% { opacity: .85 } }

@media (max-width: 760px) {
  .shell { flex-direction: column; }
  .sidebar { width: auto; flex: none; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
  .brand { border-bottom: 0; padding: 0 8px 0 0; margin: 0; }
  /* The desktop nav is a vertical list, so items are width:100%. Left as-is
     when the sidebar becomes a horizontal strip, each one claims its own row
     and pushes the content a full screen down. */
  .nav-item { width: auto; padding: 6px 10px; }
  .nav-item[aria-current="true"] { box-shadow: inset 0 -2px 0 var(--accent); }
  .sidebar-foot { margin: 0 0 0 auto; }
  .main { padding: 16px 14px 48px; }
}

.warn { color: var(--accent); margin-left: 2px; cursor: help; font-weight: 700; }

/* ---------------------------------------------------------- location view */

/* minmax(0, 1fr), not 1fr. A bare 1fr track has an automatic minimum of its
   content's min-content width, and these panels hold tables with nowrap cells —
   so one track inflates to fit its widest row and squeezes the other to a
   sliver (194px against 447px was the observed split). Zeroing the minimum lets
   both tracks stay equal and hands overflow back to .panel-body's scroller. */
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
/* The breakpoint is on the viewport, but the constraint is the content area —
   the sidebar takes ~195px of it. At 900px each column was ~325px, too narrow
   for these tables, which then clipped their own share column. */
@media (max-width: 1100px) { .grid-2 { grid-template-columns: 1fr; } }

.picker {
  background: var(--panel); color: var(--text); font: inherit;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; cursor: pointer; max-width: 260px;
}
.picker:focus { outline: 2px solid var(--accent-dim); outline-offset: 1px; }

/* Location names in the league table are drill-through links, but a real <a>
   would imply a URL this single-page view does not have. */
.linkish {
  background: none; border: 0; padding: 0; font: inherit; color: var(--text);
  cursor: pointer; text-align: left;
}
.linkish:hover { color: var(--accent); text-decoration: underline; }

h1 .tag { vertical-align: middle; }

/* ----------------------------------------------------------- billing view */

.series-b { stroke: var(--muted); stroke-width: 1.8; stroke-dasharray: 4 3; }

.legend { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { width: 14px; height: 2px; border-radius: 2px; background: var(--accent); }
.legend .sw.b { background: var(--muted); }
/* Bars need a block swatch; the 2px line above is for the line chart. */
.legend .sw.sq { width: 10px; height: 10px; border-radius: 2px; }

.foot-note { color: var(--faint); font-size: 12px; margin: 12px 2px 0; max-width: 72ch; }

/* ------------------------------------------------------------- rooms view */

.heat { display: inline-block; min-width: 100%; }
.heat-row { display: flex; align-items: center; gap: 3px; margin-bottom: 3px; }
.heat-day { width: 34px; flex: 0 0 34px; font-size: 11px; color: var(--muted); }
.heat-h { flex: 1 1 0; min-width: 20px; font-size: 10px; color: var(--faint); text-align: center; }
.heat-c { flex: 1 1 0; min-width: 20px; height: 24px; border-radius: 3px; cursor: help; }
.heat-head { margin-bottom: 5px; }
.heat-legend {
  display: flex; align-items: center; gap: 4px;
  margin-top: 10px; font-size: 11px; color: var(--faint);
}
.heat-legend i { width: 16px; height: 10px; border-radius: 2px; display: inline-block; }
.heat-legend span:last-child { margin-left: 4px; }

.warn-text { color: var(--accent); }

/* ------------------------------------------------------------- sign-in */

.login {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 32px 20px; gap: 18px;
  /* A single warm pool behind the card, so the page does not read as a flat
     black rectangle with a box on it. */
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(226,130,43,.09), transparent 70%),
    var(--bg);
}

.login-card {
  width: 100%; max-width: 396px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 30px 30px 26px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}

.login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 26px; }
.login-brand img { width: 34px; height: 34px; }
.login-name { font-weight: 650; letter-spacing: -.01em; }
.login-sub { font-size: 11px; color: var(--faint); margin-top: -2px; }

.login-h { font-size: 21px; margin: 0 0 6px; letter-spacing: -.02em; }
.login-lede { color: var(--muted); font-size: 13px; margin: 0 0 20px; line-height: 1.55; }

.login-label {
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--faint); margin-bottom: 6px;
}
.login-row { display: flex; align-items: baseline; justify-content: space-between; }

.login-input {
  width: 100%; margin-bottom: 15px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; font: inherit;
}
.login-input::placeholder { color: var(--faint); }
.login-input:focus {
  outline: none; border-color: var(--accent-dim);
  box-shadow: 0 0 0 3px rgba(226,130,43,.14);
}

.login-btn {
  width: 100%; margin-top: 4px;
  background: var(--accent); color: #17110a;
  border: 0; border-radius: 8px; padding: 11px 14px;
  font: inherit; font-weight: 650; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.login-btn:hover { background: #ef9243; }
.login-btn:disabled { opacity: .62; cursor: default; }

.login-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--accent);
}
.login-link:hover { text-decoration: underline; }

.login-alt { margin-top: 16px; text-align: center; }

.login-msg {
  margin-top: 16px; padding: 10px 12px; border-radius: 8px;
  font-size: 13px; line-height: 1.5;
  border: 1px solid var(--border); background: var(--panel-2);
}
.login-msg.error { border-left: 3px solid var(--neg); color: var(--text); }
.login-msg.ok    { border-left: 3px solid var(--pos); color: var(--text); }

.login-warn {
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  background: var(--panel-2); border-radius: 8px;
  padding: 11px 13px; margin-bottom: 20px;
  font-size: 12.5px; line-height: 1.55; color: var(--muted);
}
.login-warn b { color: var(--text); }

.login-foot { color: var(--faint); font-size: 12px; margin: 0; text-align: center; max-width: 396px; }

.spin {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(23,17,10,.3); border-top-color: #17110a;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------- Thrive Intel consent (consent.js) */

a.login-btn { text-decoration: none; }
.login-btn.secondary {
  background: transparent; color: var(--text);
  border: 1px solid var(--border);
}
.login-btn.secondary:hover { background: var(--panel-2); }

.consent-list {
  border: 1px solid var(--border); background: var(--panel-2);
  border-radius: 8px; padding: 12px 14px 4px; margin-bottom: 14px;
  font-size: 13px; line-height: 1.5;
}
.consent-h {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--faint);
}
.consent-list ul { margin: 4px 0 12px; padding-left: 18px; color: var(--muted); }
.consent-list li + li { margin-top: 3px; }
.consent-list b, .login-lede b { color: var(--text); font-weight: 600; }
.consent-note { color: var(--faint); font-size: 12px; line-height: 1.5; margin: 0 0 16px; }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consent-actions .login-btn { margin-top: 0; }

/* ------------------------------------------------- signed-in user (sidebar) */

.userbar { position: relative; margin-bottom: 10px; }

.user-btn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: 1px solid transparent; border-radius: 8px;
  padding: 7px 8px; cursor: pointer; font: inherit; text-align: left;
  color: var(--text);
}
.user-btn:hover { background: var(--panel-2); border-color: var(--border); }
.user-btn[aria-expanded="true"] { background: var(--panel-2); border-color: var(--border); }

.avatar {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--accent), #b4661f);
  color: #17110a; font-size: 11px; font-weight: 700; letter-spacing: .02em;
}

.user-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.user-name {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-cap {
  font-size: 10.5px; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.chev {
  width: 12px; height: 12px; flex: 0 0 12px; color: var(--faint);
  transition: transform .15s;
}
.user-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Opens upward: the button lives at the bottom of the sidebar, so a menu
   dropping down would render off-screen. */
.user-menu {
  position: absolute; bottom: calc(100% + 6px); left: 0; right: 0;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 9px; padding: 5px; z-index: 40;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
}
.user-menu-head {
  padding: 8px 9px 9px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.user-menu-head .user-cap { font-size: 11px; }

.user-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: 0; border-radius: 6px;
  padding: 8px 9px; font: inherit; font-size: 12.5px;
  color: var(--muted); cursor: pointer; text-align: left;
}
.user-menu-item:hover { background: var(--panel); color: var(--text); }
.user-menu-item svg { width: 15px; height: 15px; flex: 0 0 15px; }

@media (max-width: 760px) {
  .login-card { padding: 24px 20px 22px; }
}

/* ---------------------------------------------------------- retention view */

.kpi .value.bad { color: var(--neg); }
.kpi .value.warn { color: var(--warn); }

.cohort { font-size: 12px; }
.cohort th, .cohort td { padding: 5px 7px; }
.cohort th.n, .cohort td.n { text-align: right; }
.cohort td:first-child { white-space: nowrap; color: var(--muted); }
.cohort td.dim { color: var(--faint); }
.cohort td.heat-cell { border-radius: 3px; color: var(--text); }
.cohort td.empty-cell { background: transparent; }
.cohort tbody tr:hover { background: none; }
.cohort tbody tr { border-bottom: 0; }

.sub-cell { font-size: 11px; color: var(--faint); margin-top: 1px; }

.pt { fill: var(--muted); font-size: 10px; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }

/* --------------------------------------------------- user button, mobile ---
   These must come AFTER the .user-* definitions above, not in the earlier
   media query: same specificity, so whichever is written last wins, and the
   base `.user-meta { display: flex }` was silently re-enabling the label. */

@media (max-width: 760px) {
  .sidebar-foot .src, .sidebar-foot #gen { display: none; }
  .userbar { margin-bottom: 0; }

  /* Avatar only — there is no room for a name in a horizontal strip. */
  .user-btn { width: auto; padding: 4px; }
  .user-meta, .chev { display: none; }

  /* The button sits at the TOP of the screen here, so the menu has to drop
     downward. Opening upward put it off the top edge and clipped it. */
  .user-menu {
    top: calc(100% + 6px); bottom: auto;
    left: auto; right: 0; width: 220px;
  }
}

/* ------------------------------------------------------- workspace switcher */

.brandbar { position: relative; padding-bottom: 14px; margin-bottom: 8px;
            border-bottom: 1px solid var(--border); }

.brand {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 1px solid transparent; border-radius: 8px;
  padding: 5px 6px; cursor: pointer; font: inherit; text-align: left; color: var(--text);
}
.brand:hover { background: var(--panel-2); border-color: var(--border); }
.brand[aria-expanded="true"] { background: var(--panel-2); border-color: var(--border); }
.brand img { width: 30px; height: 30px; flex: 0 0 30px; }
.brand-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.brand .name { font-weight: 650; letter-spacing: -0.01em; font-size: 13.5px;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand .sub { font-size: 11px; color: var(--faint); margin-top: -1px;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand .chev { width: 12px; height: 12px; flex: 0 0 12px; color: var(--faint);
               transition: transform .15s; }
.brand[aria-expanded="true"] .chev { transform: rotate(180deg); }

.ws-menu {
  position: absolute; top: calc(100% - 6px); left: 0; right: 0; z-index: 50;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 9px; padding: 5px; box-shadow: 0 14px 34px rgba(0,0,0,.5);
}
.ws-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: 0; border-radius: 6px; padding: 8px 9px;
  font: inherit; cursor: pointer; text-align: left; color: var(--muted);
}
.ws-item:hover { background: var(--panel); color: var(--text); }
.ws-item[aria-current="true"] { color: var(--text); }
.ws-item .tick { width: 14px; flex: 0 0 14px; color: var(--accent); }
.ws-item .ws-name { font-size: 13px; font-weight: 600; }
.ws-item .ws-sub { font-size: 11px; color: var(--faint); }

@media (max-width: 760px) {
  .brandbar { border-bottom: 0; padding: 0 6px 0 0; margin: 0; }
  .brand .chev { display: none; }
  .ws-menu { left: 0; right: auto; width: 230px; }
}

/* Substantive warnings, not footnotes. These were styled as .foot-note, which
   is var(--faint) — the dimmest thing on the page for the content that most
   needs reading. */
.caution {
  max-width: 82ch; margin: 0 0 14px; font-size: 13px; line-height: 1.6;
  color: var(--muted); padding-left: 12px; border-left: 2px solid var(--border);
}
.caution:last-child { margin-bottom: 0; }
.caution b { color: var(--text); font-weight: 600; }

/* ---------------------------------------------------------------- filter bar */

/* Right-aligned control group, not a full-width bar — it is a filter on the
   page, not a header for it. */
.filterbar {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 6px; margin-bottom: 14px;
}
.fb-controls {
  display: inline-flex; gap: 6px; padding: 5px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
}
.fb-wrap { position: relative; }

.fb-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 11px; font: inherit; font-size: 13px; cursor: pointer;
}
.fb-btn:hover { border-color: var(--accent-dim); }
.fb-btn[aria-expanded="true"] { border-color: var(--accent); }
.fb-icon { width: 15px; height: 15px; flex: 0 0 15px; color: var(--muted); }
.fb-chev { width: 11px; height: 11px; flex: 0 0 11px; color: var(--faint); transition: transform .15s; }
.fb-btn[aria-expanded="true"] .fb-chev { transform: rotate(180deg); }

.fb-note { font-size: 12px; color: var(--faint); display: flex; align-items: center; gap: 6px; }
.fb-note b { color: var(--muted); font-weight: 600; }

/* ---- range popover ---- */
.rangepop {
  position: absolute; top: calc(100% + 7px); right: 0; z-index: 40;
  display: grid; grid-template-columns: 154px 1fr;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 20px 48px rgba(0,0,0,.55);
  min-width: 430px; overflow: hidden;
}
.rp-quick { border-right: 1px solid var(--border); padding: 12px 8px; }
.rp-quick h4 {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 8px 8px; font-weight: 600;
}
.rp-quick button {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 6px;
  padding: 7px 9px; font: inherit; font-size: 13px;
  color: var(--muted); cursor: pointer;
}
.rp-quick button:hover { background: var(--panel); color: var(--text); }
.rp-quick button[aria-current="true"] { color: var(--accent); font-weight: 600; }

.rp-body { padding: 14px 16px 12px; }
.rp-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.rp-hint { font-size: 11.5px; color: var(--faint); }
.rp-year { display: inline-flex; align-items: center; gap: 6px; }
.rp-year button {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  font: inherit; padding: 1px 4px; border-radius: 4px; line-height: 1;
}
.rp-year button:hover:not(:disabled) { background: var(--panel); color: var(--text); }
.rp-year button:disabled { opacity: .25; cursor: default; }
.rp-year span { font-variant-numeric: tabular-nums; color: var(--text); font-size: 13px; }

.rp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
/* One grid now, so it can breathe — four across, taller targets. */
.rp-grid-single { grid-template-columns: repeat(4, 1fr); gap: 7px; }
.rp-grid-single button { padding: 11px 0; font-size: 13px; }
.rp-grid button {
  background: var(--panel); border: 1px solid var(--border); border-radius: 7px;
  padding: 8px 0; font: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer;
}
.rp-grid button:hover:not(:disabled) { color: var(--text); border-color: var(--accent-dim); }
.rp-grid button:disabled { opacity: .3; cursor: default; }
.rp-grid button[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: #17110a; font-weight: 650;
}
/* Endpoints are solid; months between them read as a connected band. */
.rp-grid button.in-range {
  background: color-mix(in srgb, var(--accent) 26%, var(--panel));
  border-color: transparent; color: var(--text);
}

.rp-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
}
.rp-sel { font-size: 12.5px; color: var(--muted); }
.rp-sel b { color: var(--text); font-weight: 600; }
.rp-actions { display: flex; gap: 8px; }
.rp-actions button {
  border-radius: 7px; padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel); color: var(--muted);
}
.rp-actions button:hover { color: var(--text); }
.rp-actions button.primary {
  background: var(--accent); border-color: var(--accent); color: #17110a; font-weight: 650;
}
.rp-actions button.primary:hover { background: #ef9243; }

/* ---- location popover ---- */
.locpop {
  position: absolute; top: calc(100% + 7px); right: 0; z-index: 40;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 18px 40px rgba(0,0,0,.5);
  min-width: 300px; display: flex; flex-direction: column; max-height: 400px;
}
/* The list scrolls; the footer stays put, so Done is always reachable. */
.locpop-list { overflow-y: auto; padding: 5px; flex: 1; min-height: 0; }
.locpop-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 10px; border-top: 1px solid var(--border);
}
.locpop-foot .rp-sel {
  font-size: 12.5px; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.locpop-foot button {
  flex: 0 0 auto; border-radius: 7px; padding: 6px 13px;
  font: inherit; font-size: 13px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent);
  color: #17110a; font-weight: 650;
}
.locpop-foot button:hover { background: #ef9243; }
/* Scoped to the list, not the whole popover. Unscoped, `width: 100%` here also
   applied to the footer's Done button, which then crushed the label beside it
   to zero width. */
.locpop-list button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: 0; border-radius: 6px; padding: 7px 9px;
  font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; text-align: left;
}
.locpop-list button:hover { background: var(--panel); color: var(--text); }
/* Matches the active quick-range preset, so "what is selected" reads the same
   way in both popovers. */
.locpop-list button[aria-current="true"] { color: var(--accent); font-weight: 600; }
.locpop-list .tick { width: 13px; flex: 0 0 13px; color: var(--accent); }
.locpop-list .sep { height: 1px; background: var(--border); margin: 5px 2px; }

@media (max-width: 760px) {
  .filterbar { align-items: stretch; }
  .fb-controls { flex-wrap: wrap; }
  .rangepop { position: fixed; left: 10px; right: 10px; min-width: 0;
              grid-template-columns: 1fr; max-height: 80vh; overflow-y: auto; }
  .rp-quick { border-right: 0; border-bottom: 1px solid var(--border); }
  .rp-quick button { display: inline-block; width: auto; }
}

/* A single-month range has nothing to trend — say the number instead of
   drawing a lone dot on an axis scaled to one value. */
.one-month {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 34px 16px; text-align: center;
}
.one-month-v { font-size: 30px; font-weight: 650; letter-spacing: -.025em;
               font-variant-numeric: tabular-nums; color: var(--text); }
.one-month-m { font-size: 13px; color: var(--muted); }
.one-month-h { font-size: 12px; color: var(--faint); margin-top: 4px; }

/* Marks a panel that ignores the location filter because its mart has no
   location dimension. */
.chip-wide {
  display: inline-block; margin-left: 8px; padding: 2px 7px;
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid var(--accent-dim); border-radius: 4px;
  color: var(--accent); vertical-align: middle; cursor: help;
}

.rp-mode button { padding: 4px 10px; font-size: 12px; }
.rp-hint { font-size: 11.5px; color: var(--faint); margin: 0 0 10px; }

/* Header is a fixed band above the scrolling list, like the picker's. */
.locpop-head {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 10px 12px 9px; border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
/* align-self keeps the segmented control at its content width — as a flex item
   in a column it would otherwise stretch the full popover. */
.locpop-mode { align-self: flex-start; }
.locpop-mode button { padding: 4px 11px; font-size: 12px; }
.locpop-head .rp-hint { margin: 0; }

/* Table cells are nowrap so figures stay on one line, but these descriptive
   notes are prose — left unwrapped they pushed the split table past its panel
   and hid the share column at narrower widths. */
.split-note { color: var(--faint); font-size: 12px; white-space: normal; }

/* Prose in a table cell. Cells are nowrap so figures hold one line, which
   silently pushes any sentence past the panel — the same way the renewals
   split table lost its share column. */
td.prose {
  white-space: normal; text-align: left; color: var(--muted);
  font-size: 13.5px; line-height: 1.5; min-width: 260px;
}

/* ---- customers: signal tiles ---- */
.sigrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 9px; }
.sig {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 11px 13px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); color: var(--muted); font: inherit; cursor: pointer;
}
.sig:hover { border-color: var(--accent-dim); color: var(--text); }
.sig.on { border-color: var(--accent); background: var(--panel-2); }
.sig-n { font-size: 21px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.sig.on .sig-n { color: var(--accent); }
.sig-l { font-size: 12px; }
.na { color: var(--faint); }
.allmark { font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
           color: var(--neg); font-weight: 700; }

/* ---- account drill-down ---- */
.crumb { margin-bottom: 6px; }
.crumb .linkish { font-size: 13px; color: var(--muted); }
.crumb .linkish:hover { color: var(--accent); }
.linkish.strong { font-weight: 600; color: var(--text); text-align: left; }
.linkish.strong:hover { color: var(--accent); }

.banner.bad { border-left-color: var(--neg); }

.sigline { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; }
.sig-chip {
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  padding: 4px 9px; border-radius: 5px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
}

#acct-units tr.past td { color: var(--faint); }
#acct-units tr.past td b { color: var(--muted); font-weight: 500; }
tr.divider td {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint); padding-top: 14px; border-bottom: 1px solid var(--border);
}
tr.flagged td:first-child { box-shadow: inset 2px 0 0 var(--neg); padding-left: 9px; }
#unit-table tr.vacant td:first-child b { color: var(--muted); }
#unit-table tr.vacant { background: color-mix(in srgb, var(--panel) 45%, transparent); }

/* ---- data health ---- */
.hcheck { padding: 13px 0 15px; border-bottom: 1px solid var(--border); }
.hcheck:last-child { border-bottom: 0; padding-bottom: 2px; }
.hcheck-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hstat {
  flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .09em;
  padding: 3px 7px; border-radius: 4px;
}
.hstat.ok   { background: color-mix(in srgb, var(--pos) 16%, transparent); color: var(--pos); }
.hstat.warn { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.hstat.fail { background: color-mix(in srgb, var(--neg) 16%, transparent); color: var(--neg); }
.hcheck-t { font-weight: 600; color: var(--text); }
.hcheck-n { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hcheck-v { font-size: 12.5px; color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }
.hcheck-d { margin: 6px 0 0; color: var(--muted); font-size: 14px; max-width: 78ch; }
.hcheck.ok .hcheck-d { color: var(--faint); }
.hcheck-a {
  margin: 7px 0 0; font-size: 13px; color: var(--text);
  padding-left: 10px; border-left: 2px solid var(--accent-dim); max-width: 74ch;
}

/* ---- risk profiles ---- */
.rband {
  display: inline-block; min-width: 34px; text-align: center;
  padding: 3px 7px; border-radius: 5px; font-weight: 700; font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.rband.critical { background: color-mix(in srgb, var(--neg) 20%, transparent); color: var(--neg); }
.rband.high     { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.rband.watch    { background: var(--panel-2); color: var(--muted); }
.rband.steady   { background: none; color: var(--faint); }
.rdrv {
  display: inline-block; font-size: 11.5px; color: var(--muted);
  background: var(--panel); border: 1px solid var(--border);
  padding: 2px 7px; border-radius: 4px; margin: 2px 4px 2px 0; white-space: nowrap;
}
.card.kpi.on { border-color: var(--accent); }

/* ---- forecast ---- */
.fc-legend {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
}
.fc-legend span { font-size: 13px; color: var(--muted); line-height: 1.5; }
.fc-legend b { color: var(--text); }
.fc-legend .sw {
  display: inline-block; width: 12px; height: 3px; border-radius: 2px;
  margin-right: 7px; vertical-align: middle;
}