/* ============================================================
   FEAZEL EXECUTIVE DASHBOARD SUITE
   Shared design system. Loaded by every page.
   Brand: Feazel Roofing — navy-led, single-family Barlow.
   60% neutrals · 30% navy · 10% accent blue.
   ============================================================ */

/* Barlow from Google Fonts (self-host in production) */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ---------- BRAND ---------- */
  --feazel-navy:        #1f2d4b;
  --feazel-navy-90:     #2a3759;
  --feazel-navy-80:     #34405c;
  --feazel-navy-deep:   #16203a;
  --feazel-slate:       #4c5a7c;
  --feazel-slate-soft:  #6b7693;
  --feazel-blue:        #5e82bc;
  --feazel-blue-hover:  #4f72ab;
  --feazel-blue-press:  #426292;
  --feazel-blue-tint:   #eaf0fa;
  --feazel-blue-tint-2: #d6e2f3;

  /* ---------- NEUTRALS ---------- */
  --bg:                 #f7f8fb;
  --bg-2:               #f2f4f7;
  --bg-3:               #e6eaf1;
  --surface:            #ffffff;
  --surface-2:          #fbfcfe;
  --line:               #e3e6ec;
  --line-strong:        #c9cfda;

  /* ---------- TEXT ---------- */
  --fg-1:               #1a1a1a;
  --fg-2:               #3a3f4a;
  --fg-3:               #6b7280;
  --fg-on-navy:         #ffffff;
  --fg-on-navy-soft:    rgba(255,255,255,0.78);

  /* ---------- SEMANTIC ---------- */
  --success:            #2e7d55;
  --success-tint:       #e6f1ec;
  --warning:            #c77a1a;
  --warning-tint:       #fbf1e2;
  --danger:             #b23a2c;
  --danger-tint:        #f5e3df;
  --info:               var(--feazel-blue);

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: "Barlow", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;

  /* ---------- SPACING ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---------- RADII ---------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-1: 0 1px 2px rgba(31,45,75,0.06), 0 1px 1px rgba(31,45,75,0.04);
  --shadow-2: 0 2px 6px rgba(31,45,75,0.08), 0 1px 2px rgba(31,45,75,0.04);
  --shadow-3: 0 8px 24px rgba(31,45,75,0.12), 0 2px 4px rgba(31,45,75,0.06);

  /* ---------- LAYOUT ---------- */
  --sidebar-w: 296px;
  --header-h: 64px;
  --subnav-h: 40px;

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-sans);
  color: var(--fg-1);
  margin: 0;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: 32px; line-height: 1.12; letter-spacing: -0.015em; }
h2 { font-size: 22px; line-height: 1.2;  font-weight: var(--fw-semibold); }
h3 { font-size: 16px; line-height: 1.3;  font-weight: var(--fw-semibold); letter-spacing: -0.005em; }
h4 { font-size: 14px; line-height: 1.3;  font-weight: var(--fw-semibold); letter-spacing: 0; }

p { margin: 0 0 var(--space-3); color: var(--fg-2); text-wrap: pretty; }
small, .caption { font-size: 12.5px; color: var(--fg-3); line-height: 1.45; }
.eyebrow {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--feazel-blue);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.tnum { font-variant-numeric: tabular-nums; }
a { color: var(--feazel-blue); text-decoration: none; }
a:hover { color: var(--feazel-blue-hover); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   APP SHELL — fixed sidebar + header + scrollable main
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* ---- SIDEBAR ---- */
.sidebar {
  background: var(--feazel-navy);
  color: var(--fg-on-navy);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--feazel-navy-deep);
}
.sidebar-brand {
  padding: 22px 20px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-brand img {
  height: 26px;
  width: auto;
  display: block;
}
.sidebar-brand-meta {
  font-size: 10.5px;
  font-weight: var(--fw-semibold);
  color: rgba(255,255,255,0.58);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 10px;
  line-height: 1;
}
.sidebar-section {
  padding: 18px 20px 6px;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  color: rgba(255,255,255,0.42);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
}

/* Line of Business switcher in the sidebar */
.lob-switch {
  display: flex;
  margin: 12px 16px 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.lob-switch a {
  flex: 1;
  text-align: center;
  padding: 7px 8px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.7);
  background: transparent;
  border-radius: 6px;
  text-decoration: none;
  transition: all var(--dur-1) var(--ease-out);
}
.lob-switch a:hover { color: #fff; background: rgba(255,255,255,0.06); }
.lob-switch a.is-active {
  background: var(--feazel-blue);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.16);
}
.sidebar-nav { padding: 4px 10px 12px; flex: 1; overflow-y: auto; }
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  color: rgba(255,255,255,0.80);
  font-size: 13.5px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.005em;
  line-height: 1.2;
  margin-bottom: 1px;
  transition: background var(--dur-1), color var(--dur-1);
  text-decoration: none;
}
.sidebar-nav a:hover {
  background: rgba(255,255,255,0.07);
  color: #fff;
  text-decoration: none;
}
.sidebar-nav a.is-active {
  background: rgba(94,130,188,0.92);
  color: #fff;
  font-weight: var(--fw-semibold);
  box-shadow: inset 2px 0 0 rgba(255,255,255,0.7), 0 1px 2px rgba(0,0,0,0.18);
}
.sidebar-nav .ic {
  width: 17px; height: 17px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center; justify-content: center;
  opacity: 0.92;
}
.sidebar-nav a.is-active .ic { opacity: 1; }
.sidebar-foot {
  padding: 14px 20px 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  line-height: 1.45;
}
.sidebar-foot strong {
  color: rgba(255,255,255,0.92);
  display: block;
  font-weight: var(--fw-semibold);
  font-size: 12px;
  letter-spacing: -0.005em;
  margin-bottom: 3px;
}

/* ---- MAIN COLUMN ---- */
.main { display: flex; flex-direction: column; min-width: 0; }

/* ---- HEADER STACK (topbar + subnav as one unit) ---- */
.header-stack {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
/* When inside the header stack, the topbar and subnav both drop their own
   sticky/border/box-shadow so the two pieces render as a single header chrome
   — breadcrumbs above, tabs below — bumped flush together with no dead space
   between them. The header-stack itself owns the bottom border. */
.header-stack .topbar {
  position: static;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.header-stack .subnav {
  position: static;
  top: auto;
  border-bottom: none;
  box-shadow: none;
  margin: 0;
}

/* ---- TOP HEADER ---- */
.topbar {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  position: sticky;
  top: 0;
  z-index: 30;
}
.topbar-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.topbar-crumbs {
  font-size: 11.5px;
  font-weight: var(--fw-semibold);
  color: var(--fg-3);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1;
}
.topbar-crumbs span + span::before {
  content: "›";
  margin: 0 8px;
  color: var(--line-strong);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
}
.topbar-crumbs .crumb-current { color: var(--fg-1); }
.topbar-crumbs a { color: inherit; }
.topbar-crumbs a:hover { color: var(--feazel-blue); text-decoration: none; }
.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--fg-3);
}
.topbar-right .stamp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-2);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-semibold);
  font-size: 11.5px;
  color: var(--fg-2);
  letter-spacing: 0.01em;
  line-height: 1;
}
.topbar-right .stamp .dot {
  width: 6px; height: 6px;
  background: var(--success);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(46,125,85,0.15);
}
.topbar-user {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: var(--fw-semibold);
  font-size: 12.5px;
  color: var(--fg-2);
  line-height: 1;
}
.topbar-user .avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--feazel-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  line-height: 1;
}

/* ---- SUB-NAV (tabs) ---- */
.subnav {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--subnav-h);
  overflow-x: auto;
  position: sticky;
  top: var(--header-h);
  z-index: 25;
}
.subnav::-webkit-scrollbar { height: 0; }
.subnav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  height: 28px;
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  color: var(--fg-2);
  border-radius: var(--radius-md);
  white-space: nowrap;
  letter-spacing: 0.01em;
  line-height: 1;
  transition: background var(--dur-1), color var(--dur-1);
  text-decoration: none;
}
.subnav a:hover { background: var(--bg-2); color: var(--fg-1); text-decoration: none; }
.subnav a.is-active {
  background: var(--feazel-blue-tint);
  color: var(--feazel-blue-press);
}

/* ---- PAGE BODY ---- */
.page {
  padding: 32px;
  max-width: 1500px;
  width: 100%;
}

/* Page header */
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 28px;
}
.page-head-title h1 { margin: 0; }
.page-head-title .eyebrow { display: block; margin-bottom: 6px; line-height: 1; }
.page-head-title p {
  font-size: 14.5px;
  color: var(--fg-2);
  max-width: 740px;
  line-height: 1.55;
  margin: 10px 0 0;
}
.page-head-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding-top: 4px;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: var(--fw-semibold);
  background: var(--bg-2);
  color: var(--fg-2);
  border: 1px solid var(--line);
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.tag-success { background: var(--success-tint); color: var(--success); border-color: rgba(46,125,85,0.2); }
.tag-warn    { background: var(--warning-tint); color: var(--warning); border-color: rgba(199,122,26,0.2); }
.tag-danger  { background: var(--danger-tint); color: var(--danger); border-color: rgba(178,58,44,0.22); }
.tag-info    { background: var(--feazel-blue-tint); color: var(--feazel-blue-press); border-color: var(--feazel-blue-tint-2); }

/* ============================================================
   GRID UTILITIES
   ============================================================ */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
.grid-12 { grid-template-columns: repeat(12, 1fr); }
.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-5  { grid-column: span 5; }
.col-span-6  { grid-column: span 6; }
.col-span-7  { grid-column: span 7; }
.col-span-8  { grid-column: span 8; }
.col-span-9  { grid-column: span 9; }
.col-span-12 { grid-column: span 12; }
.section { margin-bottom: 28px; }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  gap: 16px;
}
.section-head h2 {
  font-size: 17px;
  color: var(--fg-1);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.section-head small { color: var(--fg-3); font-size: 12px; line-height: 1.4; }

@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-6 { grid-template-columns: 1fr; }
  .col-span-3, .col-span-4, .col-span-6, .col-span-8, .col-span-9 { grid-column: span 1; }
  .page { padding: 16px; }
  .topbar, .subnav { padding: 0 16px; }
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 20px;
}
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 12px;
}
.card-head h3 { margin: 0; font-size: 14.5px; line-height: 1.25; }
.card-head .caption { display: block; margin-top: 3px; line-height: 1.4; }
.card-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--fg-3);
}

/* Card variants */
.card-navy {
  background: var(--feazel-navy);
  color: var(--fg-on-navy);
  border-color: var(--feazel-navy-deep);
}
.card-navy h2, .card-navy h3, .card-navy h4 { color: #fff; }
.card-navy .caption, .card-navy p { color: rgba(255,255,255,0.78); }

.card-tint { background: var(--feazel-blue-tint); border-color: var(--feazel-blue-tint-2); }

/* ============================================================
   KPI CARDS (premium)
   ============================================================ */
.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px 18px 18px 21px;
  box-shadow: var(--shadow-1);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.kpi:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}
.kpi::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--feazel-blue);
}
.kpi.kpi-success::before { background: var(--success); }
.kpi.kpi-warn::before    { background: var(--warning); }
.kpi.kpi-danger::before  { background: var(--danger); }
.kpi.kpi-navy::before    { background: var(--feazel-navy); }

.kpi-label {
  font-size: 10.5px;
  font-weight: var(--fw-semibold);
  color: var(--fg-3);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin: 0 0 10px;
  line-height: 1.1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.kpi-value {
  font-size: 28px;
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  line-height: 1.05;
  letter-spacing: -0.018em;
  font-variant-numeric: tabular-nums;
}
.kpi-value-sm { font-size: 22px; }
.kpi-sub {
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 8px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.kpi-delta {
  font-size: 11.5px;
  font-weight: var(--fw-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.3;
}
.kpi-delta-up { background: var(--success-tint); color: var(--success); }
.kpi-delta-down { background: var(--danger-tint); color: var(--danger); }
.kpi-delta-flat { background: var(--bg-2); color: var(--fg-2); }

.kpi-spark {
  position: absolute;
  right: 12px;
  bottom: 8px;
  width: 96px;
  height: 32px;
  opacity: 0.85;
  pointer-events: none;
}

/* ============================================================
   CHART CARDS
   ============================================================ */
.chart-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
}
.chart-card .chart-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 12px;
}
.chart-card h3 { font-size: 14.5px; margin: 0; line-height: 1.25; letter-spacing: -0.005em; }
.chart-card .chart-sub { font-size: 11.5px; color: var(--fg-3); margin-top: 3px; line-height: 1.4; }
.chart-canvas-wrap {
  position: relative;
  width: 100%;
  height: 280px;
}
.chart-canvas-wrap.h-200 { height: 200px; }
.chart-canvas-wrap.h-260 { height: 260px; }
.chart-canvas-wrap.h-320 { height: 320px; }
.chart-canvas-wrap.h-360 { height: 360px; }
.chart-canvas-wrap.h-420 { height: 420px; }
.chart-foot {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--fg-3);
}

/* ============================================================
   TABLES
   ============================================================ */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.tbl thead th {
  background: var(--bg-2);
  text-align: left;
  font-weight: var(--fw-semibold);
  color: var(--fg-2);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0;
  line-height: 1.2;
}
.tbl tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--fg-1);
  vertical-align: middle;
  line-height: 1.4;
}
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .neg { color: var(--danger); }
.tbl .pos { color: var(--success); }
.tbl tfoot td {
  padding: 10px 12px;
  background: var(--bg-2);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  border-top: 2px solid var(--line-strong);
}
.tbl-compact tbody td, .tbl-compact thead th { padding: 7px 10px; }
.tbl-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

/* Heatmap cell styling for table-driven heatmaps */
.heat {
  display: inline-block;
  min-width: 36px;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  font-weight: var(--fw-semibold);
  font-size: 12px;
  text-align: center;
  background: var(--feazel-blue-tint);
  color: var(--feazel-blue-press);
}
.heat-0 { background: transparent; color: var(--fg-3); }
.heat-1 { background: #f3f6fb; color: var(--feazel-slate); }
.heat-2 { background: #e3ecf7; color: var(--feazel-slate); }
.heat-3 { background: #c9daee; color: var(--feazel-blue-press); }
.heat-4 { background: #99b6dc; color: #fff; }
.heat-5 { background: var(--feazel-blue); color: #fff; }
.heat-6 { background: var(--feazel-navy); color: #fff; }

/* ============================================================
   STATUS PILLS / BADGES
   ============================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  background: var(--bg-2);
  color: var(--fg-2);
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.pill-success { background: var(--success-tint); color: var(--success); }
.pill-warn { background: var(--warning-tint); color: var(--warning); }
.pill-danger { background: var(--danger-tint); color: var(--danger); }
.pill-info { background: var(--feazel-blue-tint); color: var(--feazel-blue-press); }
.pill-navy { background: var(--feazel-navy); color: #fff; }

/* ============================================================
   INSIGHT / CALLOUT BLOCKS
   ============================================================ */
.callout {
  border-left: 3px solid var(--feazel-blue);
  background: var(--feazel-blue-tint);
  padding: 14px 18px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-1);
}
.callout-success { border-color: var(--success); background: var(--success-tint); color: #1e5238; }
.callout-warn { border-color: var(--warning); background: var(--warning-tint); color: #7a4a0f; }
.callout-danger { border-color: var(--danger); background: var(--danger-tint); color: #6f2419; }
.callout strong { color: inherit; font-weight: var(--fw-bold); }
.callout-title {
  display: block;
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 6px;
  opacity: 0.82;
  line-height: 1;
}

/* Insight list */
.insights {
  display: grid;
  gap: 8px;
  margin: 0;
}
.insights li {
  list-style: none;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.5;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: start;
}
.insights .ic {
  width: 22px; height: 22px;
  background: var(--feazel-blue-tint);
  color: var(--feazel-blue);
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold);
  font-size: 11.5px;
  flex-shrink: 0;
  margin-top: 1px;
  line-height: 1;
}
.insights .ic.danger { background: var(--danger-tint); color: var(--danger); }
.insights .ic.warn { background: var(--warning-tint); color: var(--warning); }
.insights .ic.success { background: var(--success-tint); color: var(--success); }

/* ============================================================
   HUB-PAGE TILES (top-level dashboard cards)
   ============================================================ */
.tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.tile:hover {
  box-shadow: var(--shadow-3);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}
.tile-mark {
  width: 42px; height: 42px;
  border-radius: var(--radius-md);
  background: var(--feazel-blue-tint);
  color: var(--feazel-blue);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tile h2 {
  color: var(--fg-1);
  font-size: 21px;
  font-weight: var(--fw-bold);
  margin: 4px 0 0;
  letter-spacing: -0.012em;
  line-height: 1.18;
}
.tile p {
  color: var(--fg-2);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 6px 0 0;
}
.tile-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 16px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.tile-stat .l {
  font-size: 10px;
  font-weight: var(--fw-semibold);
  color: var(--fg-3);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 4px;
}
.tile-stat .v {
  font-size: 18px;
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.tile-cta {
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  color: var(--feazel-blue);
  letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 6px;
}

/* ============================================================
   HUB HERO
   ============================================================ */
.hub-hero {
  background: linear-gradient(135deg, var(--feazel-navy) 0%, var(--feazel-slate) 100%);
  color: #fff;
  padding: 48px 32px;
  border-radius: var(--radius-xl);
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}
.hub-hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(94,130,188,0.4), transparent 70%);
  pointer-events: none;
}
.hub-hero .eyebrow { color: rgba(255,255,255,0.68); letter-spacing: 0.16em; }
.hub-hero h1 {
  color: #fff;
  font-size: 36px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 8px 0 14px;
  max-width: 740px;
  text-wrap: balance;
}
.hub-hero p {
  color: rgba(255,255,255,0.80);
  font-size: 15.5px;
  line-height: 1.55;
  max-width: 740px;
  margin: 0;
  text-wrap: pretty;
}
.hub-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.16);
  position: relative;
  z-index: 1;
}
.hub-hero-stat .l {
  font-size: 10.5px;
  font-weight: var(--fw-semibold);
  color: rgba(255,255,255,0.62);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 6px;
}
.hub-hero-stat .v {
  font-size: 28px;
  font-weight: var(--fw-bold);
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.018em;
  line-height: 1.05;
}
.hub-hero-stat .s {
  font-size: 11.5px;
  color: rgba(255,255,255,0.66);
  margin-top: 4px;
  line-height: 1.4;
}
@media (max-width: 900px) {
  .hub-hero-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   PROSE BLOCKS (commentary, recommendations)
   ============================================================ */
.prose { color: var(--fg-2); font-size: 13.5px; line-height: 1.6; }
.prose p { margin: 0 0 10px; text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--fg-1); font-weight: var(--fw-semibold); }
.prose ul { padding-left: 18px; margin: 0 0 12px; }
.prose ul li { margin-bottom: 6px; }

/* Sticky summary bar (used on dashboard hubs) */
.summary-bar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  box-shadow: var(--shadow-1);
}
.summary-bar .item .l {
  font-size: 10px;
  font-weight: var(--fw-semibold);
  color: var(--fg-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.summary-bar .item .v {
  font-size: 18px;
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}

/* Inline progress bar */
.bar {
  height: 6px;
  background: var(--bg-3);
  border-radius: var(--radius-pill);
  overflow: hidden;
  position: relative;
}
.bar > i {
  display: block;
  height: 100%;
  background: var(--feazel-blue);
  border-radius: var(--radius-pill);
}
.bar-success > i { background: var(--success); }
.bar-warn > i { background: var(--warning); }
.bar-danger > i { background: var(--danger); }

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .sidebar, .topbar, .subnav, .tile-cta { display: none !important; }
  .app { grid-template-columns: 1fr; }
  .page { max-width: 100%; padding: 0; }
  .card, .kpi, .chart-card, .tbl-wrap { box-shadow: none; }
}

/* ============================================================
   FEAZEL PREMIUM INTERACTIONS LAYER (v2)
   Animation, micro-interactions, motion. Triggered by
   shared/interactions.js via class hooks (fz-*).
   ============================================================ */

/* ----- Top scroll progress bar ----- */
.fz-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--feazel-blue) 0%, var(--feazel-blue-press) 50%, #d4a857 100%);
  box-shadow: 0 0 14px rgba(94,130,188,0.6);
  z-index: 1000;
  border-radius: 0 3px 3px 0;
  transition: width 60ms linear;
  pointer-events: none;
}

/* ----- Fade-up reveal ----- */
.fz-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.fz-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* ----- Card 3D tilt + spotlight ----- */
.fz-tilt {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 320ms ease,
              border-color 320ms ease;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --mx: 50%;
  --my: 50%;
}
.fz-tilt:hover {
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-3px);
  box-shadow: 0 20px 48px -16px rgba(31,45,75,0.28),
              0 8px 16px -8px rgba(31,45,75,0.12);
  border-color: rgba(94,130,188,0.35);
}
.fz-tilt::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle 220px at var(--mx) var(--my), rgba(94,130,188,0.10), transparent 65%);
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
}
.fz-tilt:hover::after { opacity: 1; }

/* The ripple lives inside .tile / .subnav a — clip overflow so it doesn't bleed */
.tile, .subnav a { position: relative; overflow: hidden; }

/* ----- Click ripples ----- */
.fz-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(94,130,188,0.28);
  transform: translate(-50%, -50%) scale(0);
  width: 12px; height: 12px;
  animation: fz-ripple-anim 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
}
@keyframes fz-ripple-anim {
  to { transform: translate(-50%, -50%) scale(28); opacity: 0; }
}

/* ----- Subnav animated indicator ----- */
.subnav { position: relative; }
.fz-subnav-indicator {
  position: absolute;
  bottom: 6px;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--feazel-blue) 0%, #d4a857 100%);
  border-radius: 2px;
  opacity: 0;
  transition: left 380ms cubic-bezier(0.16, 1, 0.3, 1),
              width 380ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 220ms ease;
  pointer-events: none;
}

/* ----- Sticky topbar glass ----- */
.topbar {
  transition: background 280ms ease,
              backdrop-filter 280ms ease,
              border-color 280ms ease,
              box-shadow 280ms ease;
}
.topbar.is-scrolled {
  background: rgba(31,45,75,0.78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: rgba(255,255,255,0.10);
  box-shadow: 0 4px 24px -8px rgba(0,0,0,0.28);
}
/* When the topbar is in its scrolled navy state, flip every interior text
   element to a light treatment so it stays readable against the dark glass.
   Defaults are tuned for a white surface; without this override the
   breadcrumbs and user name disappear into the navy background. */
.topbar.is-scrolled,
.topbar.is-scrolled * { color: rgba(255,255,255,0.92); }
.topbar.is-scrolled .topbar-crumbs { color: rgba(255,255,255,0.62); }
.topbar.is-scrolled .topbar-crumbs .crumb-current { color: #ffffff; }
.topbar.is-scrolled .topbar-crumbs span + span::before { color: rgba(255,255,255,0.32); }
.topbar.is-scrolled .topbar-crumbs a { color: rgba(255,255,255,0.62); }
.topbar.is-scrolled .topbar-crumbs a:hover { color: #ffffff; }
.topbar.is-scrolled .topbar-right { color: rgba(255,255,255,0.72); }
.topbar.is-scrolled .topbar-right .stamp {
  background: rgba(255,255,255,0.10);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.14);
}
.topbar.is-scrolled .topbar-user { color: #ffffff; }
.topbar.is-scrolled .topbar-user .avatar {
  background: var(--feazel-blue);
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18);
}
/* Smooth the color flip so it doesn't snap when the glass state toggles. */
.topbar .topbar-crumbs,
.topbar .topbar-crumbs .crumb-current,
.topbar .topbar-crumbs a,
.topbar .topbar-right,
.topbar .topbar-right .stamp,
.topbar .topbar-user,
.topbar .topbar-user .avatar {
  transition: color 220ms ease, background 220ms ease, border-color 220ms ease;
}

/* ----- KPI value: click to copy flash ----- */
.kpi-value { position: relative; }
.fz-copy-flash {
  position: absolute;
  top: -8px; right: -10px;
  background: var(--success);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  animation: fz-flash-pop 1100ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
}
@keyframes fz-flash-pop {
  0%   { opacity: 0; transform: translateY(6px) scale(0.85); }
  20%  { opacity: 1; transform: translateY(0) scale(1); }
  80%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-6px) scale(0.95); }
}

/* ----- Sub-nav links: subtle underline grow on hover ----- */
.subnav a {
  transition: color 200ms ease, background 200ms ease, transform 200ms ease;
}
.subnav a:not(.is-active):hover {
  transform: translateY(-1px);
}

/* ----- Tile arrow: nudge on hover ----- */
.tile-cta { transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms ease; }
.tile:hover .tile-cta { transform: translateX(4px); }
.tile-cta svg { transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1); }
.tile:hover .tile-cta svg { transform: translateX(2px); }

/* ----- Stamp dot pulse already exists; make it more alive ----- */
.stamp .dot {
  animation: fz-dot-pulse 2.4s ease-out infinite;
}
@keyframes fz-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

/* ----- Hub hero: soft floating gradient orbs in the background ----- */
.hub-hero {
  position: relative;
  overflow: hidden;
}
.hub-hero::before,
.hub-hero::after {
  content: '';
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}
.hub-hero::before {
  background: radial-gradient(circle, rgba(94,130,188,0.55), transparent 70%);
  top: -120px; right: -80px;
  animation: fz-orb-a 18s ease-in-out infinite alternate;
}
.hub-hero::after {
  background: radial-gradient(circle, rgba(212,168,87,0.30), transparent 70%);
  bottom: -140px; left: 30%;
  animation: fz-orb-b 22s ease-in-out infinite alternate;
}
.hub-hero > * { position: relative; z-index: 1; }
@keyframes fz-orb-a {
  from { transform: translate(0, 0); }
  to   { transform: translate(-30px, 20px); }
}
@keyframes fz-orb-b {
  from { transform: translate(0, 0); }
  to   { transform: translate(40px, -20px); }
}

/* ----- KPI card: subtle accent bar on hover ----- */
.kpi {
  position: relative;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 320ms ease, box-shadow 320ms ease;
}
.kpi::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  background: linear-gradient(180deg, var(--feazel-blue) 0%, transparent 100%);
  border-radius: 0 3px 3px 0;
  opacity: 0;
  transition: opacity 280ms ease;
}
.kpi:hover::before { opacity: 1; }

/* ----- Table row hover: subtle slide-in tint ----- */
.tbl tbody tr {
  transition: background 200ms ease;
}
.tbl tbody tr:hover {
  background: linear-gradient(90deg, var(--feazel-blue-tint) 0%, transparent 100%) !important;
}

/* ----- Chart card: lift slightly on hover ----- */
.chart-card { transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 320ms ease; }
.chart-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -16px rgba(31,45,75,0.22);
}

/* ----- Sidebar nav: shimmer on active link ----- */
.sidebar-nav a.is-active {
  position: relative;
  overflow: hidden;
}
.sidebar-nav a.is-active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.10) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: fz-shimmer 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fz-shimmer {
  0%, 100% { transform: translateX(-100%); }
  60%      { transform: translateX(100%); }
}

/* ----- Reduced motion: respect user preference ----- */
@media (prefers-reduced-motion: reduce) {
  .fz-reveal { opacity: 1; transform: none; transition: none; }
  .fz-tilt:hover { transform: none; }
  .fz-ripple, .fz-shimmer, .fz-orb-a, .fz-orb-b, .fz-dot-pulse,
  .stamp .dot { animation: none; }
  .hub-hero::before, .hub-hero::after { display: none; }
}

/* ----- Sidebar brand: clickable logo navigates to landing page ----- */
.sidebar-brand-link {
  display: inline-block;
  text-decoration: none;
  transition: opacity 200ms ease, transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sidebar-brand-link:hover {
  opacity: 0.85;
  transform: scale(1.03);
}
.sidebar-brand-link:active {
  transform: scale(0.96);
}

/* ----- Page head: give the eyebrow + title clear breathing room ----- */
/* The topbar (64px) + subnav (40px) stick to the top. When content scrolls
   under that 104px band, the page-head needs enough top buffer that the
   eyebrow doesn't visually touch the bottom of the sticky subnav. */
html { scroll-padding-top: 116px; }   /* topbar + subnav + 12px buffer */
.page { padding-top: var(--space-6); }
.page-head { padding-top: var(--space-3); }   /* 12px extra buffer above eyebrow */


/* ============================================================
   HOME-AESTHETIC DARK THEME (universal)
   The iOS app's Home tab and the embed-mode webview both use a
   dark navy mesh background with frosted-glass cards. This block
   promotes that look to every viewer of feazelcommandcenter.com
   (desktop suite, public mobile suite, and the iOS WebView) so the
   product reads as one cohesive surface from any entry point.

   The chrome-hiding rules (topbar / LOB switcher / hub-hero hiding,
   floating-pill subnav) live in mobile/shared/styles-mobile.css under
   html.embed-mode because they are iOS-app-specific.
   ============================================================ */

/* Re-tune the neutral design tokens for the dark canvas. Existing rules
   throughout the file use var(--fg-1), var(--fg-2), var(--fg-3),
   var(--surface), var(--bg-*), var(--line) — re-aliasing these to the
   dark-mode equivalents flips the whole stylesheet at once instead of
   needing per-rule overrides everywhere. Brand tokens (--feazel-navy,
   --feazel-blue, --gold) are intentionally NOT changed; they still serve
   as the navy backgrounds on the topbar, sidebar, and LOB switcher. */
:root {
  /* Backgrounds: transparent or near-transparent so the body mesh shows. */
  --bg:        transparent;
  --bg-2:      rgba(255,255,255,0.04);
  --bg-3:      rgba(255,255,255,0.08);
  --surface:   rgba(255,255,255,0.04);
  --surface-2: rgba(255,255,255,0.02);

  /* Hairlines: 1-px white-alpha. */
  --line:        rgba(255,255,255,0.10);
  --line-strong: rgba(255,255,255,0.18);

  /* Text scale: white → 78% → 55%. Replaces the dark-on-light scale. */
  --fg-1: #ffffff;
  --fg-2: rgba(255,255,255,0.78);
  --fg-3: rgba(255,255,255,0.55);

  /* Semantic tints: brighter on dark so they still register. */
  --success:      #4ade80;
  --success-tint: rgba(74,222,128,0.18);
  --warning:      #fbbf24;
  --warning-tint: rgba(251,191,36,0.20);
  --danger:       #f87171;
  --danger-tint:  rgba(248,113,113,0.18);

  /* Elevation: lighter so it does not vanish on the navy. */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.32);
  --shadow-3: 0 12px 28px rgba(0,0,0,0.40);
}

/* Paint the navy mesh on BOTH html and body. If a higher-specificity rule
   later sets body { background: ... } to transparent (e.g. via var(--bg)
   which we rebound to transparent), the html mesh stays visible behind
   it. This is what protected against a regression where the public
   mobile site rendered white because styles-mobile.css overrode the body
   background. */
html,
body {
  background:
    radial-gradient(circle at 18% 18%, rgba(94,130,188,0.36), transparent 50%),
    radial-gradient(circle at 82% 22%, rgba(212,168,87,0.18),  transparent 45%),
    radial-gradient(circle at 70% 88%, rgba(94,130,188,0.30), transparent 50%),
    linear-gradient(160deg, #16203a 0%, #1f2d4b 60%, #1a2540 100%);
  background-attachment: fixed;
  color: #ffffff;
}

/* The grid containers stay transparent so the body mesh shows through. */
.app, .main, .page { background: transparent; }

/* Headings now sit on dark navy: white instead of feazel-navy. */
h1, h2, h3, h4 { color: #ffffff; }

/* Body copy: 78% white, the same scale Home uses. */
p, .prose, .prose p, small, .caption {
  color: rgba(255,255,255,0.78);
}

/* Eyebrows pick up Home's blue-soft accent. */
.eyebrow {
  color: #7895c4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Frosted-glass surfaces: same recipe as Home's .ent-strip and .lob-card. */
.callout,
.card,
.tile,
.kpi,
.chart-card,
.tbl-wrap,
.hub-hero-stat,
.page-head {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  color: #ffffff;
  box-shadow: none;
}

/* .page-head historically had no padding (it was a flex row, not a card).
   Now that the dark theme renders it as a frosted card, give the eyebrow
   + title + description their own breathing room inside the frame so
   the text does not hug the left edge. Mobile gets a slightly tighter
   inset; desktop gets a more generous one to match the rest of the
   .card padding scale. */
.page-head {
  padding: 18px 20px;
}
@media (max-width: 768px) {
  .page-head { padding: 14px 16px; }
}

/* Tile (LOB hub dashboard cards): brighter top fade, press-state shrink. */
.tile {
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.tile:active {
  transform: scale(0.98);
  transition: transform 120ms ease;
}
.tile h2 { color: #ffffff; }
.tile p {
  color: rgba(255,255,255,0.70);
}

/* Mini stats inside tiles: tight, no card chrome (the parent .tile is the
   card). The hub-hero-stat blocks DO get their own card chrome so they
   stay readable on the dark mesh — keep the dark-theme card recipe but
   preserve the original 10-px inner padding so labels and values do not
   crash into the edges. */
.tile-stat {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.hub-hero-stat {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 10px 12px;
}
.tile-stat .l,
.hub-hero-stat .l {
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.tile-stat .v,
.hub-hero-stat .v {
  color: #ffffff;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
/* Inline color="var(--danger)" used for "Gap" stat — recolor for dark surface */
.tile-stat .v[style*="color"],
.hub-hero-stat .v[style*="color"] {
  color: #f87171 !important;
}
.hub-hero-stat .s {
  color: rgba(255,255,255,0.55);
  margin-top: 4px;
  line-height: 1.3;
}

/* Tile-stats divider, mirroring Home's hairline rule. */
.tile-stats {
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: 12px;
  margin-top: 12px;
}

/* Tile CTA: blue-soft, no underline. */
.tile-cta {
  color: #7895c4;
  font-weight: 600;
}

/* KPI value: bold white, tabular-nums. The gradient-text effect (blue-soft
   to gold) reads too pale on the dark mesh; keep the gradient reserved for
   the truly hero value (Home's .ent-strip .value). */
.kpi-value {
  color: #ffffff !important;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}
.kpi-label {
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kpi-sub {
  color: rgba(255,255,255,0.70);
}

/* Callout: keep the colored left rail accent on dark. */
.callout {
  border-left: 3px solid #7895c4;
}
.callout-title {
  color: #7895c4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.callout strong {
  color: #ffffff;
}

/* Section heads. */
.section-head h2 { color: #ffffff; }
.section-head small { color: rgba(255,255,255,0.55); }

/* Tables: dark frosted with white text. */
.tbl,
.tbl th,
.tbl td {
  color: #ffffff;
  border-color: rgba(255,255,255,0.08);
}
.tbl th {
  color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.04);
}
.tbl tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.02);
}

/* Insights list. */
.insights li { color: rgba(255,255,255,0.85); }
.insights .ic {
  background: rgba(120,149,196,0.22);
  color: #7895c4;
}
.insights .ic.danger  { background: rgba(248,113,113,0.18); color: #f87171; }
.insights .ic.warning { background: rgba(212,168,87,0.20);  color: #d4a857; }
.insights .ic.success { background: rgba(110,231,215,0.22); color: #6ee7d7; }

/* Pills (markets, status). */
.pill {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.10);
}
.pill-info    { background: rgba(120,149,196,0.20); color: #7895c4; }
.pill-success { background: rgba(110,231,215,0.18); color: #6ee7d7; }
.pill-warning { background: rgba(212,168,87,0.20);  color: #d4a857; }
.pill-danger  { background: rgba(248,113,113,0.18); color: #f87171; }

.tag {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.10);
}

/* Chart card heads. */
.chart-head h3 { color: #ffffff; }
.chart-sub,
.chart-foot {
  color: rgba(255,255,255,0.55);
}

/* Inline links pick up the blue-soft accent on dark.
   Excluded: tile (full-card link), subnav, lob-switch, sidebar-nav since
   those have their own treatments. */
.page a:not(.tile):not(.tile-cta),
.callout a,
.card a {
  color: #7895c4;
}

/* Strong text inside paragraphs/cards remains punchy. */
strong { color: #ffffff; }

/* Hide the page-foot "View desktop site" link on desktop. It exists for
   public mobile users who want the full layout; on desktop it would
   point in a circle. */
@media (min-width: 769px) {
  .page-foot { display: none; }
}


/* ============================================================
   TOPBAR — transparent so it dissolves into the body mesh.
   The desktop topbar previously used --surface (was white). On the
   dark theme we want the breadcrumb + freshness stamp to read like a
   floating row, not a separate white bar pinned to the top.
   ============================================================ */
.topbar {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.topbar-crumbs { color: rgba(255,255,255,0.55); }
.topbar-crumbs .crumb-current { color: #ffffff; }
.topbar-right .stamp {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.78);
  border: 1px solid rgba(255,255,255,0.10);
}


/* ============================================================
   HUB HERO — mobile-app aesthetic on the desktop landing pages.
   Each LOB gets an animated background pattern (residential
   chevrons, multi-family window grid, service radar pulse) plus
   a giant LOB title and italic tagline that mirrors App.js's
   ResidentialHeader / MultiFamilyHeader / ServiceHeader.
   ============================================================ */
.hub-hero {
  position: relative;
  overflow: hidden;
  padding: 56px 32px 36px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background:
    linear-gradient(180deg, rgba(94,130,188,0.18) 0%, transparent 60%),
    linear-gradient(180deg, var(--feazel-navy-deep) 0%, var(--feazel-navy) 55%, #1a2540 100%);
  margin: 0 0 28px;
  isolation: isolate;
}

/* Animated background per LOB. ::before holds the texture so the
   .hub-hero itself can keep its solid base gradient. */
.hub-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hub-hero > * { position: relative; z-index: 1; }

/* RESIDENTIAL: chevron rooftop pattern, two layers drifting opposite ways */
.hub-hero[data-lob="residential"]::before {
  background-image:
    repeating-linear-gradient(135deg, transparent 0 28px, rgba(120,149,196,0.20) 28px 30px, transparent 30px 56px),
    repeating-linear-gradient(45deg,  transparent 0 64px, rgba(212,168,87,0.12)  64px 65px, transparent 65px 130px);
  background-size: 200% 200%;
  opacity: 0.55;
  animation: hubChevrons 28s linear infinite;
}
@keyframes hubChevrons {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 320px 320px, -320px 0; }
}

/* MULTI-FAMILY: subtle grid of glowing windows */
.hub-hero[data-lob="multi-family"]::before {
  background-image:
    radial-gradient(circle at 20% 28%, rgba(212,168,87,0.28) 5px, transparent 7px),
    radial-gradient(circle at 52% 62%, rgba(212,168,87,0.18) 4px, transparent 6px),
    radial-gradient(circle at 78% 22%, rgba(212,168,87,0.22) 5px, transparent 7px),
    radial-gradient(circle at 35% 78%, rgba(212,168,87,0.20) 5px, transparent 7px),
    radial-gradient(circle at 65% 38%, rgba(212,168,87,0.16) 4px, transparent 6px),
    radial-gradient(circle at 12% 70%, rgba(212,168,87,0.24) 5px, transparent 7px),
    radial-gradient(circle at 88% 78%, rgba(212,168,87,0.18) 4px, transparent 6px);
  background-size:
    220px 180px, 200px 200px, 250px 200px, 180px 220px,
    240px 180px, 200px 240px, 200px 200px;
  animation: hubWindows 6s ease-in-out infinite alternate;
}
@keyframes hubWindows {
  0%   { opacity: 0.35; }
  50%  { opacity: 0.70; }
  100% { opacity: 0.45; }
}

/* SERVICE: radar pulse rings off the right side */
.hub-hero[data-lob="service"]::before {
  background:
    radial-gradient(circle at 85% 50%, rgba(110,231,215,0.45) 0 2px, transparent 4px),
    radial-gradient(circle at 85% 50%, transparent 60px, rgba(110,231,215,0.18) 62px, transparent 66px),
    radial-gradient(circle at 85% 50%, transparent 130px, rgba(110,231,215,0.10) 132px, transparent 138px),
    radial-gradient(circle at 85% 50%, transparent 210px, rgba(110,231,215,0.06) 212px, transparent 218px);
  animation: hubRadar 3.6s ease-out infinite;
}
@keyframes hubRadar {
  0%   { transform: scale(0.92); opacity: 0.45; }
  100% { transform: scale(1.08); opacity: 0.10; }
}

/* Hero typography */
.hub-hero .eyebrow {
  color: rgba(255,255,255,0.55);
  font-size: 11px;
  letter-spacing: 0.18em;
  margin-bottom: 6px;
  display: block;
}
.hub-hero h1 {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.0;
  margin: 0;
  color: #ffffff;
}
@media (max-width: 768px) {
  .hub-hero { padding: 36px 20px 24px; border-radius: 14px; }
  .hub-hero h1 { font-size: 38px; }
}
.hub-hero .hero-tagline {
  margin: 6px 0 14px;
  font-size: 22px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.01em;
  color: #7895c4;            /* default: residential blue */
}
.hub-hero[data-lob="multi-family"] .hero-tagline { color: #d4a857; }
.hub-hero[data-lob="service"]      .hero-tagline { color: #6ee7d7; }

.hub-hero .hero-narrative,
.hub-hero p {
  margin-top: 4px;
  font-size: 14px;
  color: rgba(255,255,255,0.70);
  max-width: 760px;
  line-height: 1.55;
}

/* The 4-stat KPI block keeps its grid; just tighten spacing now that the
   hero has a stronger headline above it. */
.hub-hero-stats {
  margin-top: 26px;
}