* { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Overflow lock — must be on BOTH html AND body for iOS Safari ── */
html {
  overflow-x: hidden;       /* iOS scrolls the html element, not body */
  max-width: 100vw;
}
body {
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #f5f5f5;
  color: #333;
}

.header {
  background: white;
  /* Top padding uses max() of the design baseline (1.1rem) and the
     iOS notch inset, so on devices without a notch the header keeps
     its original spacing, but on iPhones with notches the header
     pushes down so its content doesn't disappear under the cutout. */
  padding: max(1.1rem, env(safe-area-inset-top, 0px)) 1rem 1rem;
  text-align: center;
  border-bottom: 1px solid #efefef;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.header-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #FF8A1F;
  margin-bottom: 3px;
}
.header-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 0.3rem;
}
.header-logo {
  height: 48px;
  width: auto;
  flex-shrink: 0;
}
.header-main h1 {
  font-size: 24px;
  font-weight: 700;
  color: #1a2d3a;
  margin: 0;
  letter-spacing: -0.4px;
}
.header h1 {
  font-size: 24px;
  font-weight: 700;
  color: #1a2d3a;
  margin: 0 0 0.3rem 0;
  letter-spacing: -0.4px;
}
.header-sub { display: flex; align-items: center; justify-content: center; gap: 10px; }
.header-location { font-size: 12px; font-weight: 500; color: #888; letter-spacing: 0.3px; }
.header-dot { width: 3px; height: 3px; border-radius: 50%; background: #ccc; display: inline-block; }
.header-period { font-size: 12px; color: #aaa; }

/* ── Layout ──────────────────────────────────────────────────────── */
.main-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  min-height: calc(100vh - 100px);
  max-width: 100%;
  overflow: hidden; /* belt-and-suspenders */
}
/* Date range menu — sits INSIDE #techView, just below the tab nav.
   No background/border of its own; reads as a clean pill row on the
   page's gray bg with a proper gap before the stat cards below. */
.sidebar {
  padding: 0;
  margin: 0 0 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: transparent;
  border: none;
  overflow-y: visible;
}
.date-btn { display: inline-flex; width: auto; padding: 7px 13px; font-size: 13px; border: 1px solid #e8e8e8; background: white; color: #666; cursor: pointer; border-radius: 20px; white-space: nowrap; font-weight: 500; transition: all 0.15s; }
.date-btn:hover { background: #f0f0f0; border-color: #d0d0d0; }
.date-btn.active { background: #FF8A1F; color: white; font-weight: 600; border-color: #FF8A1F; }

/* min-width: 0 is critical — without it, a grid cell won't shrink
   below its content's intrinsic width, causing horizontal overflow */
.content { padding: 1.5rem; min-width: 0; overflow-x: hidden; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 1.5rem; }
.stat-card { background: white; padding: 1.1rem 1rem; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); text-align: center; }
.stat-label { font-size: 11px; color: #888; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 6px; }
.stat-value { font-size: 26px; font-weight: 700; color: #FF8A1F; }

.sort-section { display: flex; align-items: center; gap: 8px; margin-bottom: 1rem; flex-wrap: wrap; }
.sort-label { font-size: 12px; color: #888; text-transform: uppercase; font-weight: 600; }
.sort-btn { padding: 6px 14px; font-size: 13px; border: 1px solid #e0e0e0; border-radius: 20px; background: white; color: #555; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.sort-btn:hover { background: #f5f5f5; }
.sort-btn.active { background: #FF8A1F; color: white; border-color: #FF8A1F; font-weight: 600; }
#leaderboardBody { transition: opacity 0.15s ease; }
#leaderboardBody.sorting { opacity: 0.3; }

.table-wrapper { position: relative; background: white; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); overflow: hidden; }
/* Legacy spinner retired in favor of skeleton shimmer (see .skel below) */
.spinner { display: none; }

/* ── Skeleton loaders ──────────────────────────────────────────
   Two visual modes:
     • `.skel` (stat cards)        — light gradient "shimmer" sweep
     • `.skel-cipher` (table rows) — rolling monospace digits that
       cycle every ~85ms to read as "heavy computation"
   The whole `.table-wrapper.is-loading` breathes slowly (opacity
   pulse over 2.5s), so the visual tempo implies deep work instead
   of a hurried flash. */
.skel {
  display: inline-block;
  background: #eef1f5;
  background-image: linear-gradient(90deg, #eef1f5 0%, #f8fafc 50%, #eef1f5 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: skel-shimmer 1.3s linear infinite;
  border-radius: 6px;
  max-width: 100%;        /* never overflow its cell */
  vertical-align: middle;
}
/* Lines are block-level inside stat cards, but must stay inline-block
   inside flex containers (the table's .tech-cell) so pixel widths are
   honored instead of being stretched. */
.skel-line     { height: 12px; }
.stat-card .skel-line { display: block; }
.skel-line--sm { height: 10px; }
.skel-line--xl { height: 24px; border-radius: 8px; }
.skel-avatar   { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; }
.skel-row td   { border-bottom: 1px solid #f7f7f7; padding: 14px 16px; }
/* Prevent the name column's skeleton from forcing the table wider
   than the viewport on mobile */
.skel-row .tech-cell { max-width: 100%; min-width: 0; }
.skel-row .tech-cell .skel-line { flex: 0 1 auto; }

/* ── Decryption / rolling-cipher placeholders ─────────────────
   Muted monospace digits that visibly cycle while data is in flight.
   Font / opacity are deliberately tuned so the text reads as "the
   system is working" rather than as data the user should try to
   parse. */
.skel-cipher {
  font-family: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #cbd5e1;           /* pale slate — ambient, not authoritative */
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Name-reveal scramble: matches the final name typography AND color
   exactly so there's zero color shift at the moment of reveal. The
   typewriter cursor below is what communicates "still computing." */
.tech-name-label.is-revealing {
  /* Inherit font-family, size, weight, and letter-spacing from the
     base .tech-name-label rule (no overrides here) so the font stays
     identical before AND after the reveal completes. */
  color: inherit;  /* keeps the final .tech-name-label color — no fade-in shift */
  position: relative;
}
/* Typewriter caret: a short horizontal dash that sits right after the
   currently-typed character. Because revealName() overwrites textContent
   character-by-character and the label has its min-width locked, the
   ::after pseudo naturally flows at the end of the typed portion —
   effectively tracking the cursor as the name "types itself in". */
.tech-name-label.is-revealing::after {
  content: '';
  display: inline-block;
  width: 0.55em;
  height: 2px;
  margin-left: 3px;
  vertical-align: baseline;
  background: currentColor;
  opacity: 0.7;
  animation: tech-name-caret-blink 0.55s steps(2, jump-none) infinite;
}
@keyframes tech-name-caret-blink {
  50% { opacity: 0.25; }
}

/* Slow, deliberate "breathing" pulse on the whole table while
   the cipher is rolling. 2.5s cycle implies deep computation,
   not a stuck spinner. */
.table-wrapper.is-loading { animation: skel-breathe 2.5s ease-in-out infinite; }
@keyframes skel-breathe {
  0%   { opacity: 0.60; }
  50%  { opacity: 0.92; }
  100% { opacity: 0.60; }
}

/* Status phrase cycler above the table: small, flat, monospace.
   Brief fade-out before each phrase swap so the transition doesn't
   flash on the eye. */
.skel-status {
  font-family: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #94a3b8;
  margin: 6px 2px 10px;
  min-height: 18px;
  opacity: 1;
  transition: opacity 0.18s ease;
}
.skel-status.is-fading { opacity: 0; }
@keyframes skel-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ── Staggered entrance on first paint ─────────────────────────
   Each major row of the Technicians view fades + slides up in
   sequence, so the page resolves top-down instead of flashing in
   all at once. One-shot: keyframes run once per page load. */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);     }
}
body.anim-entrance .header,
body.anim-entrance .tab-nav,
body.anim-entrance #techView > .sidebar,
body.anim-entrance #techView > .stats,
body.anim-entrance #techView > .sort-section,
body.anim-entrance #techView > .table-wrapper {
  opacity: 0;
  animation: fadeSlideUp 0.5s cubic-bezier(0.2, 0.65, 0.3, 1) both;
}
body.anim-entrance .header                    { animation-delay: 0ms;   }
body.anim-entrance .tab-nav                   { animation-delay: 80ms;  }
body.anim-entrance #techView > .sidebar       { animation-delay: 160ms; }
body.anim-entrance #techView > .stats         { animation-delay: 240ms; }
body.anim-entrance #techView > .sort-section  { animation-delay: 320ms; }
body.anim-entrance #techView > .table-wrapper { animation-delay: 400ms; }

/* Tab re-entry cascade — scoped to the Technicians view's own children
   so re-clicking the Technicians tab replays the same staggered fade-up
   the user saw on first paint, without re-animating the shared header
   or tab-nav chrome. Toggled by replayTechAnimations() in app.js via
   an rAF pair. */
body.tech-mount-in #techView > .sidebar,
body.tech-mount-in #techView > .stats,
body.tech-mount-in #techView > .sort-section,
body.tech-mount-in #techView > .table-wrapper {
  opacity: 0;
  animation: fadeSlideUp 0.5s cubic-bezier(0.2, 0.65, 0.3, 1) both;
}
body.tech-mount-in #techView > .sidebar       { animation-delay: 0ms;   }
body.tech-mount-in #techView > .stats         { animation-delay: 80ms;  }
body.tech-mount-in #techView > .sort-section  { animation-delay: 160ms; }
body.tech-mount-in #techView > .table-wrapper { animation-delay: 240ms; }
/* Include the data-warning banner in the cascade so it doesn't pop in
   separately from the rest of the view. Same stagger slot as .stats so
   it rides in right after the date-range pills. */
body.anim-entrance #techView > .data-warning,
body.tech-mount-in #techView > .data-warning {
  opacity: 0;
  animation: fadeSlideUp 0.5s cubic-bezier(0.2, 0.65, 0.3, 1) both;
  animation-delay: 200ms;
}

/* ── Data-quality banner ────────────────────────────────────────
   Subtle amber chip at the top of the Technicians view warning that
   any data pulled from the Service Titan era (pre-2026-04-01 HCP
   migration) may be incomplete. Toggled by render() in technicians.js. */
.data-warning {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 14px;
  background: #FFF8E8;
  border: 1px solid #F1D48E;
  border-radius: 10px;
  color: #6B4E11;
  font-size: 13px;
  line-height: 1.35;
}
.data-warning[hidden] { display: none; }
.data-warning-ico {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #C9820A;
  color: #FFF8E8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  font-family: Georgia, 'Times New Roman', serif;
}
.data-warning-text { flex: 1; }
/* Orphans variant: same chip palette but a slightly louder red-tinted
   border, since the data inside is "you've got money on the table"
   rather than just a passive caveat. */
.data-warning--orphans {
  background: #FFF1E8;
  border-color: #E8A783;
  color: #6A2E0A;
}
.data-warning--orphans .data-warning-ico { background: #C9591F; color: #FFF1E8; }

/* Inline button to launch the orphans modal. Underlined for affordance,
   sized to match surrounding 13px copy, and bumps to 800-weight on
   hover/focus to feel tappable without changing layout. */
.data-warning-link {
  display: inline;
  padding: 0;
  margin: 0 0 0 4px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.data-warning-link:hover,
.data-warning-link:focus {
  font-weight: 800;
  outline: none;
}

/* ── Split-credit info icon (in per-job modal) ──────────────────
   A small circular ⓘ that sits inline after the "w/ <partner>"
   note and toggles an explanatory bubble when tapped or focused.
   The bubble is absolutely positioned so it doesn't shift the
   row's layout; a caret ties it visually to the icon. */
.split-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  border-radius: 50%;
  background: #E6E1D3;
  color: #6B5A35;
  font-size: 10px;
  font-weight: 700;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.split-info:hover,
.split-info:focus,
.split-info.is-open {
  background: #C9820A;
  color: #FFF8E8;
  outline: none;
}
.split-info-ico {
  display: block;
  transform: translateY(-0.5px); /* optical nudge for Georgia italic */
}
.split-info-bubble {
  /* Hidden by default; revealed when the icon has .is-open (tap) or
     :hover / :focus (desktop). Positioned above the icon so it can't
     get clipped by the modal-body's overflow. */
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  max-width: 70vw;
  padding: 10px 12px;
  background: #2A3540;
  color: #F5F5F0;
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  font-family: inherit;
  line-height: 1.4;
  text-align: left;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  z-index: 10;
  pointer-events: none;
  /* Small caret pointing down at the icon */
}
.split-info-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #2A3540;
}
.split-info:hover .split-info-bubble,
.split-info:focus .split-info-bubble,
.split-info.is-open .split-info-bubble {
  display: block;
}

/* Mobile: the modal-body can be narrow; keep the bubble from spilling
   off the viewport edge. Left/right-anchoring it near the icon is
   tricky without JS, so we just widen the bubble's max-width window
   and rely on max-width:70vw to keep it sane. */
@media (max-width: 480px) {
  .split-info-bubble {
    width: 220px;
  }
}

/* ── Unpaid column ──────────────────────────────────────────────
   Red ink when there's anything outstanding so it reads at a glance
   as "needs follow-up"; greyed out when zero so a fully-paid tech
   doesn't look like they're being flagged. */
tbody td.unpaid-cell .row-count,
tfoot td.unpaid-cell {
  color: #C0392B;
  font-weight: 600;
}
tbody td.unpaid-cell.unpaid-zero .row-count,
tfoot td.unpaid-cell.unpaid-zero {
  color: #B5B0A4;
  font-weight: 500;
}

/* Per-job "Unpaid: $X" note in the desktop modal table — sits below
   the job total in the same cell. Small red text so it reads as a
   follow-up flag without dominating the row. */
.job-unpaid-note {
  font-size: 11px;
  color: #C0392B;
  font-weight: 600;
  margin-top: 3px;
  letter-spacing: 0.2px;
}

/* Mobile job card: tiny red pill on the meta row when the job has
   outstanding balance. */
.job-card-unpaid {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: rgba(192, 57, 43, 0.10);
  color: #C0392B;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Clickable Unpaid cell — only applied when the cell has a non-zero
   value (technicians.js scopes the click handler accordingly). The
   underline-on-hover hints at drill-down without competing visually
   with the rest of the table. */
tbody td.unpaid-cell.is-clickable { cursor: pointer; }
tbody td.unpaid-cell.is-clickable .row-count {
  text-decoration: underline;
  text-decoration-color: rgba(192, 57, 43, 0.25);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease;
}
tbody td.unpaid-cell.is-clickable:hover .row-count {
  text-decoration-color: rgba(192, 57, 43, 0.85);
}

/* ── Modal disclaimer banner ────────────────────────────────────
   Amber chip rendered above the job list when openModal() is called
   in "unpaid" mode. Mirrors the styling of #techDataWarning so the
   visual language for "qualifier / heads-up" stays consistent across
   the dashboard. */
.modal-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 14px 10px;
  padding: 10px 14px;
  background: #FFF8E8;
  border: 1px solid #F1D48E;
  border-radius: 10px;
  color: #6B4E11;
  font-size: 13px;
  line-height: 1.4;
}
.modal-banner[hidden] { display: none; }
.modal-banner-ico {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: #C9820A;
  color: #FFF8E8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  font-family: Georgia, 'Times New Roman', serif;
}
.modal-banner-text { flex: 1; }
@media (max-width: 768px) {
  .modal-banner {
    margin: 10px 12px 8px;
    padding: 9px 12px;
    font-size: 12.5px;
  }
}

/* Micro-interaction: press-compress on tappable pills. A quick scale
   dip + spring-back confirms the tap before the API even starts. */
.tab-btn:active,
.sort-btn:active {
  transform: scale(0.96);
  transition: transform 0.08s ease-out;
}
.tab-btn  { transition: color 0.15s ease, transform 0.15s cubic-bezier(0.5,1.8,0.5,1); }
.sort-btn { transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s cubic-bezier(0.5,1.8,0.5,1); }

table { width: 100%; border-collapse: collapse; }
thead th { padding: 12px 16px; text-align: left; font-size: 12px; color: #888; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 1px solid #f0f0f0; }
thead th:not(:first-child) { text-align: right; }
tbody tr { border-bottom: 1px solid #f7f7f7; transition: background 0.1s; cursor: pointer; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: #fff8f0; }
tbody td { padding: 14px 16px; font-size: 14px; }
tbody td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.ticket-red { color: #E5484D; font-weight: 600; }
.ticket-amber { color: #C9820A; font-weight: 600; }
.ticket-green { color: #12A071; font-weight: 600; }
tfoot tr { border-top: 2px solid #f0f0f0; }
tfoot td { padding: 12px 16px; font-size: 13px; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: 0.3px; }
tfoot td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }

.tech-cell { display: flex; align-items: center; gap: 12px; }
.avatar { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: white; flex-shrink: 0; letter-spacing: 0.5px; }
.tech-name-label { font-size: 15px; font-weight: 600; color: #1a2d3a; letter-spacing: 0; }
/* Invisible placeholder that pre-reserves the final rendered name width
   at initial paint — prevents the revenue column from sliding right as
   each row's staggered name-reveal lands. visibility:hidden keeps the
   box in flow (unlike display:none) so the table column widths stabilize
   from paint 1. nowrap guarantees a single-line measurement. The span is
   overwritten by revealName() once the scramble animation starts. */
.tech-name-spacer { visibility: hidden; white-space: nowrap; pointer-events: none; }
.tech-name-short { display: none; } /* first-name-only span — shown on mobile */
.rank-num { font-size: 13px; font-weight: 700; color: #bbb; min-width: 18px; text-align: center; }

.modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 100; align-items: center; justify-content: center; overscroll-behavior: contain; }
.modal-backdrop.open { display: flex; }
.modal { background: white; border-radius: 12px; width: 90%; max-width: 660px; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.2); overscroll-behavior: contain; }
.modal-header { padding: 1.2rem 1.4rem; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.modal-title { font-size: 16px; font-weight: 700; color: #1a2d3a; }
.modal-close { background: none; border: none; font-size: 24px; color: #bbb; cursor: pointer; line-height: 1; padding: 0 2px; }
.modal-close:hover { color: #555; }
/* overscroll-behavior: contain — when the list hits its top/bottom,
   the scroll does NOT chain through to the page behind the modal.
   -webkit-overflow-scrolling: touch gives iOS the momentum feel the
   default hidden-overflow body would otherwise have had. */
.modal-body { overflow-y: auto; flex: 1; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.modal-table { width: 100%; border-collapse: collapse; }
.modal-table thead th { padding: 10px 16px; font-size: 11px; color: #888; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 1px solid #f0f0f0; text-align: left; position: sticky; top: 0; background: white; }
.modal-table thead th:nth-child(4), .modal-table thead th:nth-child(5) { text-align: right; }
.modal-table tbody td { padding: 11px 16px; font-size: 13px; border-bottom: 1px solid #f7f7f7; color: #444; }
.modal-table tbody tr:last-child td { border-bottom: none; }
.modal-table tbody td:nth-child(4), .modal-table tbody td:nth-child(5) { text-align: right; font-weight: 600; color: #333; font-variant-numeric: tabular-nums; }
.modal-footer { padding: 1rem 1.4rem; border-top: 2px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.modal-footer-left { font-size: 13px; color: #888; }
.modal-footer-right { font-size: 16px; font-weight: 700; color: #FF8A1F; }
.role-badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; margin-left: 6px; vertical-align: middle; letter-spacing: 0.3px; }
.role-sold-did { background: #FFF3E0; color: #E65100; }
.role-sold { background: #E8F5E9; color: #2E7D32; }
.role-did { background: #F3F4F6; color: #6B7280; }
.share-pct { font-size: 11px; color: #aaa; font-weight: 400; margin-left: 4px; }

/* ── Expense drill-down sheet ─────────────────────────────────
   Slides up from bottom on phone; centered sheet on desktop.     */
/* Body scroll-lock while the modal is open. Without this, swiping
   on the gray backdrop area (or on the sheet header / contents
   when they reach a scroll boundary) lets the gesture chain to
   the page underneath, which then scrolls the dashboard behind
   the modal. Mirrors the `pnl-cmp-lock` pattern used by the
   compare-month sheet. */
body.exp-modal-lock {
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
}
.exp-backdrop {
  display: none;   /* JS sets display:flex on open — never shown at page load */
  position: fixed; inset: 0; z-index: 200;
  align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,0);
  transition: background 0.25s;
  /* Absorb any swipe gesture that lands on the gray backdrop area
     so it can't bubble up to the body and cause a page scroll. */
  overscroll-behavior: contain;
}
@media (min-width: 600px) {
  .exp-backdrop { align-items: center; }
}
.exp-backdrop.exp-open { background: rgba(0,0,0,0.38); }
.exp-sheet {
  background: white;
  width: 100%; max-width: 480px;
  border-radius: 16px 16px 0 0;
  max-height: 85vh;
  display: flex; flex-direction: column;
  overflow: hidden;                       /* never scroll sideways */
  box-shadow: 0 -4px 24px rgba(0,0,0,0.14);
  transform: translateY(100%);
  transition: transform 0.26s cubic-bezier(0.32,0,0.14,1);
}
@media (min-width: 600px) {
  .exp-sheet { border-radius: 14px; transform: translateY(20px); max-height: 70vh; }
}
.exp-backdrop.exp-open .exp-sheet { transform: translateY(0); }

/* Unified drag zone (grabber + title + sub). On mobile users swipe
   anywhere on this strip to dismiss. On desktop the drag/grabber is
   hidden and a discoverable X close button takes over. */
.exp-sheet-drag {
  flex-shrink: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
}
/* Mobile: grabber + swipe-to-dismiss */
@media (max-width: 768px) {
  .exp-sheet-drag { cursor: grab; }
  .exp-sheet-drag:active { cursor: grabbing; }
}
.exp-sheet-grabber {
  display: none;                          /* desktop: hide grabber */
  width: 38px; height: 4px;
  background: #cbd5e1;
  border-radius: 2px;
  margin: 10px auto 2px;
  pointer-events: none;
}
@media (max-width: 768px) {
  .exp-sheet-grabber { display: block; }  /* mobile: show grabber */
}
.exp-sheet-header {
  padding: 18px 44px 16px 20px;           /* desktop: leave room for X */
}
@media (max-width: 768px) {
  .exp-sheet-header {
    padding: 8px 18px 14px;
    pointer-events: none;                 /* let events fall through to drag zone */
  }
}
.exp-sheet-title { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; }
.exp-sheet-sub   { font-size: 12px; color: #aaa; font-weight: 500; margin-top: 2px; }

/* Desktop X close button — top-right, visible only ≥769px */
.exp-sheet-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  z-index: 2;
}
.exp-sheet-close:hover { background: #f1f5f9; color: #1a2d3a; }
.exp-sheet-close:active { background: #e2e8f0; }
@media (max-width: 768px) {
  .exp-sheet-close { display: none; }     /* mobile uses grabber instead */
}

.exp-sheet-body {
  overflow-y: auto; overflow-x: hidden;   /* no sideways scroll */
  flex: 1;
  padding: 8px 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

.exp-row { padding: 10px 18px; }
.exp-row-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 5px;
}
.exp-row-name {
  font-size: 13px; color: #444; flex: 1; line-height: 1.3;
  min-width: 0;                          /* allow shrink in flex row */
  overflow-wrap: anywhere;               /* break long descriptions cleanly */
  word-break: break-word;
}
.exp-row-val  { font-size: 14px; font-weight: 700; color: #1a2d3a;
                font-variant-numeric: tabular-nums; white-space: nowrap; }
.exp-bar-track {
  height: 5px; background: #f0f0f0; border-radius: 3px; overflow: hidden;
}
.exp-bar-fill  {
  height: 100%; border-radius: 3px;
  transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
}
.exp-empty { padding: 24px 18px; font-size: 13px; color: #aaa; text-align: center; }
.exp-loading { padding: 32px 18px; text-align: center; }

/* ── Vendor summary at top of the expense modal ──────────────────
   A "Top vendors" summary card that sits above the transaction list.
   Scrolls with the rest of the sheet — not sticky — so the modal
   reads as one continuous document (glance for who got paid, then
   scroll for the receipts). */
.exp-summary {
  padding: 14px 18px 16px;
  border-bottom: 1px solid #f0f0f0;
}
.exp-section-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 8px;
}
/* "Details" label above the transaction list — same typographic
   treatment, but with its own padding since it's not wrapped in
   .exp-summary. Extra top margin separates it from the summary block. */
.exp-section-label--details {
  padding: 14px 18px 8px;
  margin-bottom: 0;
}
.exp-stacked-bar {
  display: flex;
  width: 100%;
  height: 14px;
  border-radius: 4px;
  overflow: hidden;
  background: #f0f0f0;
  margin-bottom: 12px;
}
.exp-stacked-seg {
  height: 100%;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 0;
}
.exp-vlegend {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}
.exp-vlegend-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 10px;
  font-size: 13px;
  line-height: 1.35;
}
.exp-vlegend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.exp-vlegend-name {
  color: #1a2d3a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.exp-vlegend-pct {
  color: #94a3b8;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.exp-vlegend-val {
  font-weight: 700;
  color: #1a2d3a;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Expandable "Other" row — click to reveal the residual vendor list.
   The caret rotates 90° on open. Tap-highlight is suppressed so the
   interaction feels native on iOS. */
.exp-vlegend-row--expandable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 4px;
  padding: 2px 4px;
  margin: -2px -4px;
  transition: background 0.15s;
}
.exp-vlegend-row--expandable:hover,
.exp-vlegend-row--expandable:focus-visible {
  background: rgba(148, 163, 184, 0.10);
  outline: none;
}
.exp-vlegend-caret {
  display: inline-block;
  font-size: 10px;
  margin-left: 5px;
  color: #94a3b8;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  vertical-align: middle;
  line-height: 1;
}
.exp-vlegend-row--open .exp-vlegend-caret {
  transform: rotate(90deg);
}
/* Indented sub-list of residual vendors (ranks 4+) revealed when
   "Other" is expanded. A thin left rail visually binds it to the
   parent row, and the typography drops a notch to read as a detail
   layer rather than a peer of the Top 3. */
.exp-other-sublist {
  display: grid;
  grid-auto-rows: min-content;
  gap: 6px;
  margin: 6px 0 2px 10px;
  padding: 6px 0 4px 14px;
  border-left: 2px solid #e5e7eb;
}
.exp-other-sublist[hidden] { display: none; }
.exp-vlegend-row--sub {
  grid-template-columns: minmax(0, 1fr) auto auto;
  font-size: 12px;
  color: #64748b;
}
.exp-vlegend-row--sub .exp-vlegend-name {
  color: inherit;
  font-size: 12px;
}
.exp-vlegend-row--sub .exp-vlegend-val {
  font-weight: 600;
  font-size: 12.5px;
  color: #1a2d3a;
}
.exp-vlegend-row--sub .exp-vlegend-pct { font-size: 11px; }

/* On narrow phones, tighten the legend typography so "Other (23)" +
   big $ values don't crowd past the right edge. The grid still holds
   the shape — just smaller numerics. */
@media (max-width: 380px) {
  .exp-vlegend-row { font-size: 12px; column-gap: 8px; }
  .exp-vlegend-val { font-size: 12.5px; }
  .exp-vlegend-pct { display: none; } /* drop the % on the narrowest devices */
  .exp-vlegend-row--sub .exp-vlegend-pct { display: none; }
}

/* Transaction row sub-elements */
.exp-txn-date {
  display: inline-block; font-size: 11px; font-weight: 600; color: #fff;
  background: #94a3b8; border-radius: 3px; padding: 1px 6px;
  margin-right: 7px; vertical-align: middle; letter-spacing: 0.02em;
  white-space: nowrap; line-height: 1.5;
}
.exp-txn-desc { vertical-align: middle; }
.exp-txn-memo {
  display: block; font-size: 11px; color: #999; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.exp-sheet-footer {
  padding: 12px 18px;
  /* Add iOS home-indicator clearance so "45 TRANSACTIONS" / "$40K"
     aren't cut off by the curved bottom corners of the phone. */
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid #f0f0f0;
  display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
  background: #fafafa;
  border-radius: 0;                        /* sheet has overflow:hidden, no need here */
}
.exp-foot-label { font-size: 12px; font-weight: 700; text-transform: uppercase;
                  letter-spacing: 0.6px; color: #aaa; }
.exp-foot-val   { font-size: 18px; font-weight: 800; color: #1a2d3a;
                  font-variant-numeric: tabular-nums; }

/* ── Drill indicator on overhead legend rows ── */
.mf-drill-ind {
  font-size: 17px; font-weight: 700; color: #bbb;
  margin-left: 4px; flex-shrink: 0;
  transition: color 0.12s, transform 0.12s;
}
.mf-zoom-drillable { cursor: pointer !important; }
.mf-zoom-drillable:hover .mf-drill-ind { color: #f97316; transform: translateX(2px); }

.footer { text-align: center; font-size: 11px; color: #aaa; padding: 1rem 1rem 1.4rem; }
.footer-levi { margin-top: 6px; font-size: 11px; color: #c8c8c8; letter-spacing: 0.2px; }
.error-msg { background: #fff3f3; color: #c62828; padding: 1.2rem 1.4rem; font-size: 14px; }

@media (max-width: 768px) {
  .main-wrapper { grid-template-columns: 1fr; }
  /* Horizontal-scroll pill row with iOS momentum + CSS scroll-snap for
     that tactile "click into place" feel as the user swipes. */
  .sidebar {
    border: none; background: transparent;
    overflow-x: auto; overflow-y: hidden;
    padding: 0 24px 4px 4px;  /* right padding = room for fade mask */
    margin: 0 0 1rem;
    border-radius: 0;
    display: flex; flex-wrap: nowrap; gap: 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-left: 4px;
    position: relative;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .date-btn {
    display: inline-flex; align-items: center; gap: 6px;
    width: auto; white-space: nowrap; flex-shrink: 0;
    margin-bottom: 0;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #374151;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    scroll-snap-align: start;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
  }
  .date-btn:active { transform: scale(0.97); }
  .date-btn.active {
    border-color: #FF8A1F;
    background: #FF8A1F;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(255, 138, 31, 0.28);
  }
  /* "More" pill — terminal element in the scroll row */
  .date-more-btn .date-more-icon { opacity: 0.7; transition: opacity 0.15s; }
  .date-more-btn.active .date-more-icon { opacity: 1; }

  /* Right-edge fade hints that there's more content to scroll to.
     Pinned to the pill-row area via absolute positioning on #techView
     so it stays put while the pills scroll underneath it.
       • right: -1.2rem extends the element THROUGH .content's 1.2rem
         right padding (see `.content` rule in the mobile @media block)
         so the solid-color portion of the gradient reaches the actual
         viewport edge — no "thread" of paper visible past the fade.
       • Gradient compressed to 0→1 opacity across only 40% of element
         width, so the visible fade band is tight (~14px). The
         remaining 60% holds solid paper color, which the -1.2rem
         offset uses to paint over the content padding cleanly.
       • Color matches --paper-bg (#F4F3EF) so there's no cool-gray
         seam against the warm paper canvas. */
  #techView { position: relative; }
  #techView::after {
    content: '';
    position: absolute;
    top: 0; right: -1.2rem;
    width: 36px; height: 46px;
    background: linear-gradient(to right,
      rgba(244, 243, 239, 0) 0%,
      rgba(244, 243, 239, 1) 40%);
    pointer-events: none;
    z-index: 2;
  }

  /* ── Bottom sheet for "More" date ranges ─────────────────── */
  .date-bs-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0);
    display: flex; align-items: flex-end;
    justify-content: center;
    z-index: 100;
    pointer-events: none;
    transition: background 0.22s ease;
  }
  .date-bs-backdrop.open {
    pointer-events: auto;
    background: rgba(15, 23, 42, 0.55);
  }
  .date-bs-sheet {
    width: 100%;
    background: #ffffff;
    border-radius: 20px 20px 0 0;
    padding: 10px 0 max(18px, env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0.24, 1);
    max-height: 82vh;
    display: flex; flex-direction: column;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
  }
  .date-bs-backdrop.open .date-bs-sheet { transform: translateY(0); }
  /* Unified drag zone covering both the handle indicator AND the
     "Select Date Range" title. A user thumbing the title accidentally
     now gets the exact same drag behavior as grabbing the tiny strip. */
  .date-bs-drag {
    cursor: grab;
    touch-action: none;         /* we handle vertical panning ourselves */
    flex-shrink: 0;
    padding: 10px 0 0;
    border-bottom: 1px solid #f1f5f9;
    user-select: none;
    -webkit-user-select: none;
  }
  .date-bs-drag:active { cursor: grabbing; }
  .date-bs-handle {
    width: 38px; height: 4px;
    background: #cbd5e1;
    border-radius: 2px;
    margin: 0 auto 8px;
    pointer-events: none;       /* let events fall through to the zone */
  }
  .date-bs-title {
    font-size: 16px; font-weight: 700;
    color: #0f172a;
    text-align: center;
    padding: 4px 20px 14px;
    pointer-events: none;       /* prevent text-selection stealing the drag */
  }
  .date-bs-list {
    display: flex; flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 0 4px;
  }
  .date-bs-item {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    padding: 14px 22px;
    font-size: 16px; font-weight: 500;
    color: #1e293b;
    background: transparent;
    border: none; border-bottom: 1px solid #f8fafc;
    cursor: pointer;
    text-align: left;
    min-height: 48px;
    transition: background 0.1s;
  }
  .date-bs-item:active { background: #f1f5f9; }
  .date-bs-item-check {
    font-size: 18px; font-weight: 700; color: #FF8A1F;
    opacity: 0;
    transition: opacity 0.12s;
  }
  .date-bs-item.active { background: #fff8ed; color: #FF8A1F; font-weight: 700; }
  .date-bs-item.active .date-bs-item-check { opacity: 1; }

  /* Lock background scroll while the sheet is open */
  body.date-bs-open { overflow: hidden; touch-action: none; }

/* Body-level scroll lock while the tech-jobs modal is open. iOS
   Safari ignores `overflow: hidden` on <body> for touch gestures —
   users can still scroll the page by swiping anywhere inside a modal,
   which is the bug here. The bulletproof fix is `position: fixed`
   with `width: 100%`, which genuinely removes the body from the
   scroll graph. The JS side captures `window.scrollY` BEFORE locking
   and restores it on close (via `top: -<y>px` while locked, then
   `window.scrollTo(0, y)` on unlock). touch-action: none on the body
   prevents iOS rubber-band scrolling on the page itself. */
  body.modal-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    touch-action: none;
  }
  .content { padding: 1.2rem; }  /* was 0.85rem - much tighter */
  .sort-section { gap: 8px; margin-bottom: 1.5rem; }
  .sort-label { display: none; }
  .sort-btn { padding: 6px 14px; font-size: 13px; }
  .stats { grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 1.8rem; }
  .stat-card { padding: 0.7rem 0.4rem; }
  .stat-label { font-size: 10px; }
  .stat-value { font-size: 18px; }
  .table-wrapper { border-radius: 8px; overflow-x: auto; }
  .avatar { display: none; } /* remove avatar chip on mobile */
  .tech-name-full { display: none; } /* hide full name */
  .tech-name-short { display: inline; } /* show first name only */
  thead th { padding: 10px 10px; font-size: 12px; }
  tbody td, tfoot td { padding: 13px 10px; font-size: 15px; }
  tbody td:first-child, thead th:first-child { padding-left: 12px; }
  tfoot td { font-size: 13px; }
  .tech-cell { gap: 6px; }
  .tech-name-label { font-size: 16px; font-weight: 600; letter-spacing: 0; }
  .rank-num { font-size: 14px; min-width: 16px; }
  /* Modal becomes a bottom sheet on mobile */
  .modal-backdrop { align-items: flex-end; }
  .modal { border-radius: 20px 20px 0 0; width: 100%; max-width: 100%; max-height: 88vh; }
  .modal-table { display: none; }
  .modal-cards { display: block; }
  .job-card { padding: 12px 16px; border-bottom: 1px solid #f3f3f3; }
  .job-card:last-child { border-bottom: none; }
  .job-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 3px; }
  .job-card-date { font-size: 12px; color: #aaa; }
  .job-card-right { text-align: right; }
  .job-card-credit { font-size: 15px; font-weight: 700; color: #333; }
  .job-card-credit-pct { font-size: 11px; color: #bbb; margin-left: 3px; }
  .job-card-total { font-size: 11px; color: #bbb; }
  .job-card-desc { font-size: 13px; color: #444; margin-bottom: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .job-card-meta { font-size: 12px; color: #aaa; display: flex; align-items: center; gap: 6px; }
}
@media (min-width: 769px) { .modal-cards { display: none; } }

/* Tab navigation — sliding pill segmented control */
.tab-nav {
  display: flex;
  background: #e8e8e8;
  border-radius: 13px;
  padding: 4px;
  margin-bottom: 1.2rem;
  position: relative;
  gap: 0;
}
/* The sliding orange pill — positioned by JS */
.tab-indicator {
  position: absolute;
  background: #FF8A1F;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(255,138,31,0.38);
  pointer-events: none;
  z-index: 0;
  /* No transition on first paint; JS adds 'tab-indicator-ready' to enable it */
}
.tab-indicator.tab-indicator-ready {
  transition: left 0.3s cubic-bezier(0.34,1.28,0.64,1),
              width 0.3s cubic-bezier(0.34,1.28,0.64,1),
              top 0.3s cubic-bezier(0.34,1.28,0.64,1),
              height 0.3s cubic-bezier(0.34,1.28,0.64,1);
}
.tab-btn {
  flex: 1;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  border: none;
  color: #999;
  cursor: pointer;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  transition: color 0.18s ease;
  white-space: nowrap;
  letter-spacing: 0.15px;
}
.tab-btn:hover:not(.active) { color: #555; }
.tab-btn.active { color: white; }

/* Panel entrance animation */
.view-panel { display: none; }
.view-panel.active {
  display: block;
  animation: panelFadeUp 0.22s ease-out;
}
@keyframes panelFadeUp {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Marketing view */
/* Projection summary cards */
.proj-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 1.2rem; }
@media (min-width: 600px) { .proj-cards { grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 1.5rem; } }
.proj-card { background: white; padding: 1rem; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); text-align: center; }
.proj-card-label { font-size: 11px; color: #888; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 6px; }
.proj-card-value { font-size: 30px; font-weight: 700; color: #FF8A1F; line-height: 1.1; }
@media (min-width: 600px) { .proj-card-value { font-size: 26px; } }
.proj-card-sub { font-size: 11px; color: #bbb; margin-top: 4px; }

/* Month progress bar */
.progress-wrap { background: white; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); padding: 1.1rem 1.2rem; margin-bottom: 1.5rem; }
.progress-label-row { display: flex; justify-content: space-between; font-size: 12px; color: #888; margin-bottom: 8px; font-weight: 500; }
.progress-bar-bg { background: #f0f0f0; border-radius: 8px; height: 10px; overflow: hidden; }
.progress-bar-fill { height: 100%; background: linear-gradient(90deg, #FF8A1F, #FF6B35); border-radius: 8px; transition: width 0.5s ease; }

/* Section label above chart / table */
.section-title { font-size: 12px; font-weight: 700; color: #aaa; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.5rem; }

/* Bar chart — self-contained white card, bars grow from an x-axis line */
.bar-chart-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  padding: 1rem 1rem 0.85rem;
  margin-bottom: 2.2rem;   /* breathing room before Monthly History */
  overflow: hidden;
}
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 150px;           /* bar(100) + val(~18) + label(19) + slack */
  position: relative;
}
/* Subtle x-axis baseline */
.bar-chart::after {
  content: '';
  position: absolute;
  bottom: 19px;            /* sits just above the month labels */
  left: 0; right: 0;
  height: 1px;
  background: #f0f0f0;
  pointer-events: none;
}
.bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; min-width: 0; }
.bar { width: 85%; background: #FF8A1F; border-radius: 4px 4px 0 0; min-height: 3px; }
.bar.is-current { background: #FF6B35; }
.bar-val { font-size: 9px; color: #555; font-weight: 600; margin-bottom: 2px; line-height: 1.1; text-align: center; }
.bar-lbl { font-size: 9px; color: #bbb; margin-top: 5px; text-align: center; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 14px; }

/* Monthly history table */
.mkt-table-card { background: white; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); overflow: hidden; margin-bottom: 1.5rem; }
.mkt-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mkt-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.mkt-table thead th { padding: 11px 14px; font-size: 11px; color: #888; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 1px solid #f0f0f0; text-align: left; white-space: nowrap; }
.mkt-table thead th:not(:first-child) { text-align: right; }
.mkt-table tbody td { padding: 13px 14px; font-size: 14px; border-bottom: 1px solid #f7f7f7; color: #444; }
.mkt-table tbody tr:last-child td { border-bottom: none; }
.mkt-table tbody td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.mkt-table tfoot td { padding: 11px 14px; font-size: 12px; font-weight: 700; color: #555; border-top: 2px solid #f0f0f0; text-align: right; }
.mkt-table tfoot td:first-child { text-align: left; }
/* Sticky month column while scrolling */
.mkt-table thead th:first-child,
.mkt-table tbody td:first-child,
.mkt-table tfoot td:first-child { position: sticky; left: 0; background: white; z-index: 2; }
.mkt-row-current td:first-child { background: #fffbf5; }

.delta { font-size: 11px; margin-left: 4px; }
.delta-up { color: #12A071; }
.delta-down { color: #E5484D; }
.mkt-row-current { background: #fffbf5; font-weight: 600; }

@media (max-width: 768px) {
  .tab-btn { padding: 8px 8px; font-size: 12px; }
  .bar-chart-card { padding: 0.85rem 0.75rem 0.7rem; margin-bottom: 1.8rem; }
  .bar-chart { height: 120px; gap: 3px; } /* bar(76) + val(~16) + label(17) + slack */
  .bar-chart::after { bottom: 17px; }
  .bar-val { font-size: 8px; }
  .bar-lbl { font-size: 8px; }
  .mkt-table tbody td { font-size: 13px; padding: 11px 10px; }
  .mkt-table thead th { font-size: 10px; padding: 9px 10px; }
  .mkt-table tfoot td { padding: 9px 10px; font-size: 11px; }
}

/* ── Financial / Owners Tab ─────────────────────────────────── */
.fin-connect-banner { background:#fff8f0;border:1px solid #FFE0B2;border-radius:10px;padding:20px 24px;text-align:center;margin:2rem 0; }
.fin-connect-banner p { font-size:14px;color:#888;margin-bottom:12px; }

/* ── Period header — reads as the page's primary title ──────────
   No chip background on desktop; the eyebrow ("Period") + large bold
   month combination gives it the weight of a page headline rather
   than a secondary pill control. */
.fin-month-header {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  margin-bottom: 1.2rem;
  user-select: none;
  -webkit-user-select: none;
  padding: 4px 6px;
  background: transparent;
  border-radius: 10px;
  transition: background 0.15s ease, transform 0.1s ease;
}
.fin-month-header-inner { display: flex; flex-direction: column; gap: 2px; }
.fin-month-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #94a3b8;
  line-height: 1;
}
.fin-month-header:hover  { background: rgba(0, 0, 0, 0.035); }
.fin-month-header:active { background: rgba(0, 0, 0, 0.06); transform: scale(0.985); }
.fin-month-header.is-open { background: rgba(0, 0, 0, 0.04); }
.fin-month-title {
  font-size: 28px;
  font-weight: 800;
  color: #1a2d3a;
  letter-spacing: -0.6px;
  line-height: 1.05;
}
.fin-month-chev {
  color: #1a2d3a;
  opacity: 0.45;
  flex-shrink: 0;
  transition: transform 0.22s ease, opacity 0.2s;
  margin-top: 10px;  /* aligns with the big title visually */
}
.fin-month-header.is-open .fin-month-chev {
  transform: rotate(180deg);
  opacity: 0.8;
}
.fin-month-header:hover .fin-month-chev { opacity: 0.7; }

/* ── Three-pill segmented tabs (Quick / Month / Quarter) ───────── */
.fin-period-tabs { display:flex; border-bottom:1px solid #eef0f3; }
.fin-period-tab  {
  flex: 1; padding: 12px 4px; font-size: 12px; font-weight: 700;
  color: #94a3b8; background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  cursor: pointer; transition: color 0.15s, border-color 0.15s;
  letter-spacing: 0.2px;
}
.fin-period-tab:hover { color: #64748b; }
.fin-period-tab.active { color: #1a2d3a; border-bottom-color: #FF8A1F; }

/* ── Dropdown popover (desktop) ────────────────────────────────── */
.fin-month-grabber  { display: none; }          /* shown only on mobile */
.fin-month-grab-zone{ display: none; }          /* shown only on mobile */
.fin-month-backdrop { display: none; }          /* shown only on mobile */
/* Preserve `hidden` attribute semantics even when CSS tries to display it */
.fin-month-picker[hidden],
.fin-month-backdrop[hidden] { display: none !important; }
.fin-month-picker {
  position: relative;
  background: white;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15,23,42,0.04);
  overflow: hidden;
  margin-bottom: 1.2rem;
  margin-top: -0.4rem;
  /* Entrance animation: fade + subtle slide-down from the trigger */
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
  pointer-events: none;
}
.fin-month-picker.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Hide the native select — we use a custom list */
.fin-month-sel-native { display: none; }

.fin-month-list {
  display: flex;
  flex-direction: column;
  max-height: 320px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Minimal custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.fin-month-list::-webkit-scrollbar { width: 6px; }
.fin-month-list::-webkit-scrollbar-track { background: transparent; }
.fin-month-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
.fin-month-list::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Flat row with left accent on active — premium, modern list aesthetic */
.fin-month-item {
  position: relative;
  padding: 13px 20px 13px 22px;
  font-size: 16px;
  font-weight: 500;
  color: #1a2d3a;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.12s ease;
}
.fin-month-item:last-child { border-bottom: none; }
.fin-month-item:hover,
.fin-month-item:focus-visible { background: #f3f4f6; outline: none; }
.fin-month-item:active { background: #e5e7eb; }
.fin-month-item.active {
  background: rgba(255, 138, 31, 0.08);   /* pale orange fill */
  color: #1a2d3a;                        /* keep text dark + bold */
  font-weight: 700;
}
.fin-month-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: #FF8A1F;
  border-radius: 0 2px 2px 0;
}
/* Preset items — label + muted sub-description */
.fin-month-item--preset { display: flex; flex-direction: column; gap: 3px; padding: 14px 20px 14px 22px; }
.fin-month-item-label { font-size: 16px; font-weight: 600; color: #1a2d3a; }
.fin-month-item-sub   { font-size: 11px; color: #94a3b8; letter-spacing: 0.2px; }

/* Legacy .fin-filter-label still used by compare selector */
.fin-filter-label {
  font-size: 10px;
  color: #c0c0c0;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.7px;
  padding-left: 4px;
}
.fin-select {
  -webkit-appearance: none;
  appearance: none;
  background-color: #f2f2f2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  border: none;
  border-radius: 10px;
  padding: 13px 38px 13px 14px;
  font-size: 16px;
  font-weight: 600;
  color: #1a2d3a;
  cursor: pointer;
  width: 100%;
  min-height: 50px;
  transition: background-color 0.15s;
}
.fin-select:focus { outline: none; background-color: #ebebeb; }
.fin-filter-vs { display: none; } /* shown on desktop */

/* $/% toggle (used inside P&L card) */
.fin-toggle { display:inline-flex;border:1px solid #e5e5e5;border-radius:6px;overflow:hidden;align-self:flex-start; }
.fin-toggle button { padding:8px 14px;min-height:36px;font-size:12px;font-weight:600;border:none;background:white;color:#888;cursor:pointer;transition:all 0.15s; }
.fin-toggle button.active { background:#1a2d3a;color:white; }

@media (min-width: 700px) {
  .fin-select {
    font-size: 14px;
    font-weight: 600;
    padding: 10px 32px 10px 13px;
    min-height: 42px;
    min-width: 160px;
    width: auto;
  }
}

/* P&L card head — title + $/% toggle */
.fin-pnl-head { display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; }
.fin-pnl-scroll { overflow-x:auto;-webkit-overflow-scrolling:touch; }
/* Sticky first column on P&L so names stay visible while scrolling months */
.pnl-grid th:first-child, .pnl-grid td:first-child { position:sticky;left:0;background:#fff;z-index:2; }
.pnl-grid tr.subtotal td:first-child { background:#fafafa; }
.pnl-grid tr.total td:first-child { background:#1a2d3a;color:#fff; }

/* ── Full Picture 2-column comparison layout (month mode) ────── */
.pnl-cmp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 2px 14px; flex-wrap: nowrap;
}
.pnl-cmp-lbl {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.7px; color: #64748b; white-space: nowrap; flex-shrink: 0;
}
/* Title block: eyebrow label + BIG selected-month headline. The month
   dominates so "which month am I looking at?" is never in doubt. */
.fin-pnl-title-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fin-pnl-overline {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: #94a3b8;
}
.fin-pnl-month {
  font-size: 22px;
  font-weight: 800;
  color: #1a2d3a;
  letter-spacing: -0.3px;
  line-height: 1.15;
}
/* Pinned "YoY" / "Prior" tag inside the first couple chips */
.pnl-cmp-chip-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-radius: 4px;
  background: #f1f5f9;
  color: #64748b;
  vertical-align: 1px;
}
.pnl-cmp-chip.act .pnl-cmp-chip-tag {
  background: rgba(255,255,255,0.22);
  color: #fff;
}
.pnl-cmp-chips {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pnl-cmp-chips::-webkit-scrollbar { display: none; }
.pnl-cmp-chip {
  flex-shrink: 0; padding: 5px 12px; border-radius: 20px;
  border: 1.5px solid #e2e8f0; background: white;
  font-size: 12px; font-weight: 600; color: #64748b;
  cursor: pointer; transition: all 0.14s; white-space: nowrap;
}
.pnl-cmp-chip:hover { border-color: #94a3b8; color: #1a2d3a; }
.pnl-cmp-chip.act   { background: #1a2d3a; color: white; border-color: #1a2d3a; }

/* Desktop: label column anchors left and absorbs remaining width, data
   columns pack tightly on the right so the eye tracks across a single
   row without losing its place in the horizontal gap. */
.pnl-grid--2col { width: 100%; border-collapse: collapse; table-layout: auto; }
.pnl-grid--2col th {
  padding: 10px 18px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px; color: #94a3b8;
  text-align: right; border-bottom: 2px solid #f0f0f0; white-space: nowrap;
}
.pnl-grid--2col td {
  padding: 9px 18px; border-bottom: 1px solid #f5f5f5;
  text-align: right; vertical-align: middle;
}
.pnl-grid--2col tr.indent td { padding-top: 6px; padding-bottom: 6px; }
/* Label cell fills the flexible middle space; data cells shrink to content. */
.pnl2-th-lbl, .pnl2-td-lbl { text-align: left !important; width: 100%; }
.pnl2-cell, .pnl-grid--2col th.pnl2-th-pri,
.pnl-grid--2col th.pnl2-th-cmp, .pnl-grid--2col th.pnl2-th-delta,
.pnl2-delta { width: 1%; white-space: nowrap; }
.pnl2-th-lbl { position: sticky; left: 0; background: #fff; z-index: 2; }
.pnl2-td-lbl {
  position: sticky; left: 0; background: #fff; z-index: 2;
  font-size: 14px; font-weight: 600; color: #1a2d3a;
}
.pnl-grid--2col tr.indent .pnl2-td-lbl {
  padding-left: 32px; color: #64748b; font-weight: 400; font-size: 13px;
}
/* Tabular numbers for perfect vertical digit alignment */
.pnl2-dollar, .pnl2-pct-sub, .pnl2-pill, .pnl2-pill-pct {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
/* Subtle zebra on indented (sub-item) rows for eye-tracking */
.pnl-grid--2col tr.indent:nth-of-type(even) td { background: #fafbfc; }
.pnl-grid--2col tr.indent:nth-of-type(even) .pnl2-td-lbl { background: #fafbfc; }
/* Main category rows — Revenue, COGS, Gross Profit, Op Expenses — get
   a subtle flat gray fill and heavier label weight to parent their
   sub-items below. */
.pnl-grid--2col tr.category td { background: #f6f8fb; }
.pnl-grid--2col tr.category .pnl2-td-lbl {
  background: #f6f8fb; font-weight: 700; font-size: 14.5px;
}
.pnl-grid--2col tr.subtotal td     { background: #eef2f7; }
.pnl-grid--2col tr.subtotal .pnl2-td-lbl { background: #eef2f7; font-weight: 700; }
.pnl-grid--2col tr.total    td     { background: #1a2d3a; color: white; font-weight: 700; }
.pnl-grid--2col tr.total    .pnl2-td-lbl { background: #1a2d3a; color: white; }
.pnl-grid--2col tr:hover:not(.total) td { background: #eef2f7; }
.pnl-grid--2col tr:hover:not(.total) .pnl2-td-lbl { background: #eef2f7; }
.pnl-grid--2col tr.subtotal:hover td,
.pnl-grid--2col tr.subtotal:hover .pnl2-td-lbl { background: #e4ebf3; }

.pnl2-th-pri { color: #1a2d3a !important; }
.pnl2-th-cmp { color: #3b82f6 !important; }
.pnl2-cmp-tag {
  display: inline-block; margin-left: 5px; font-size: 9px; padding: 1px 5px;
  background: #eff6ff; color: #3b82f6; border-radius: 3px;
  vertical-align: middle; text-transform: uppercase; letter-spacing: 0.4px;
}
.pnl2-th-delta { color: #64748b !important; }

/* Inline $ + % side-by-side inside each data cell */
.pnl2-cell { min-width: 120px; white-space: nowrap; }
.pnl2-dollar { display: inline; font-size: 15px; font-weight: 600; color: #1a2d3a; }
.pnl2-pct-sub { display: inline; font-size: 12px; color: #94a3b8; margin-left: 7px; }
.pnl-grid--2col tr.indent .pnl2-dollar  { font-size: 14px; font-weight: 500; }
.pnl-grid--2col tr.indent .pnl2-pct-sub { font-size: 11px; }
.pnl2-neg .pnl2-dollar { color: #E5484D; }
.pnl2-empty { color: #bbb; }

/* Total row overrides */
.pnl-grid--2col tr.total .pnl2-dollar  { color: white; }
.pnl-grid--2col tr.total .pnl2-pct-sub { color: rgba(255,255,255,0.55); }
.pnl-grid--2col tr.total .pnl2-delta   { color: white; }

/* Subtotal row overrides */
.pnl-grid--2col tr.subtotal .pnl2-dollar { color: #1a2d3a; font-weight: 700; }

/* Delta column — bold flat pill badges carrying both $ and % change */
.pnl2-delta { min-width: 100px; text-align: right; }
.pnl2-pill  {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 5px 11px; border-radius: 6px;
  font-size: 13px; font-weight: 700; background: #f1f5f9; color: #94a3b8;
}
.pnl2-pill-pct {
  font-size: 11px; font-weight: 600; opacity: 0.78;
}
.pnl2-good .pnl2-pill { background: #dcfce7; color: #15803d; }
.pnl2-bad  .pnl2-pill { background: #fee2e2; color: #b91c1c; }
/* Total row: pill reverts to plain white text */
.pnl-grid--2col tr.total .pnl2-pill { background: transparent; color: white; padding: 0; }

.fin-cards { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:1.4rem; }
@media(max-width:900px) { .fin-cards { grid-template-columns:repeat(2,1fr); } }
@media(max-width:500px) { .fin-cards { grid-template-columns:1fr; } }
.fin-card { background:white;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,0.08);padding:16px 18px;position:relative;overflow:hidden; }
.fin-card-label { font-size:11px;color:#888;text-transform:uppercase;font-weight:600;letter-spacing:0.4px;margin-bottom:4px; }
.fin-card-value { font-size:24px;font-weight:700;color:#1a2d3a;margin-bottom:2px; }
.fin-card-value.c-green { color:#12A071; }
.fin-card-value.c-yellow { color:#C9820A; }
.fin-card-value.c-red { color:#E5484D; }
.fin-card-sub { font-size:12px;color:#888;margin-bottom:8px; }
.fin-card-hint { font-size:11px;color:#9aa4ad;margin-top:8px;line-height:1.35;font-style:italic;border-top:1px dashed #eee;padding-top:6px; }
.fin-flow { background:white;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,0.08);padding:14px 18px;margin-bottom:1.2rem;font-size:13px;color:#555;line-height:1.5; }
.fin-flow strong { color:#1a2d3a; }
.fin-flow .eq { color:#aaa;margin:0 6px; }
.fin-row-title { font-size:11px;font-weight:700;color:#aaa;text-transform:uppercase;letter-spacing:1.2px;margin:0.6rem 0 0.5rem 2px; }
.fin-card-delta { font-size:12px;font-weight:600; }
.fin-card-delta.up { color:#12A071; }
.fin-card-delta.down { color:#E5484D; }
.fin-card-spark { position:absolute;bottom:0;right:0;opacity:0.6; }

/* ── Money-flow card — step layout ──────────────────────────── */
.mf-card {
  background: white;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  margin-bottom: 1.2rem;
  overflow: hidden;
}
.mf-header {
  padding: 16px 20px 14px;
  border-bottom: 1px solid #f0f0f0;
  display: flex; align-items: baseline;
  justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.mf-header-title { font-size:15px; font-weight:700; color:#1a2d3a; }
/* Sub-line under the header title — only rendered in range mode
   (e.g. "Apr 24 – Mar 26") so users see both the semantic label
   ("All Time") and the underlying window. */
.mf-header-sub   { font-size:11px; font-weight:500; color:#94a3b8; letter-spacing:0.02em; width:100%; margin-top:2px; }
.mf-header-stamp { font-size:11px; color:#bbb; }

/* ── Step rows: Revenue, = Gross Profit, = Operating Profit ── */
.mf-step { padding:18px 20px; }
.mf-step--gp  { background:#eff6ff; border-top:2px solid #bfdbfe; }
.mf-step--noi { background:#fafafa; border-top:2px solid #bbf7d0; }

.mf-step-label {
  font-size:13px; font-weight:700; letter-spacing:0.6px;
  text-transform:uppercase; color:#555;
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
}
.mf-step--gp  .mf-step-label { color:#2563eb; }
.mf-step--noi .mf-step-label { color:#059669; }


.mf-step-num {
  /* Fluid scaling from ~32px on narrow phones to 42px on desktop */
  font-size: clamp(32px, 6vw, 42px);
  font-weight:800; letter-spacing:-1.5px;
  color:#1a2d3a; line-height:1.05; margin:0 0 2px;
  font-variant-numeric:tabular-nums;
}
.mf-step--gp  .mf-step-num { color:#2563eb; }
.mf-step--noi .mf-step-num { color:#16a34a; }
.mf-step-eq { font-size:0.7em; font-weight:800; opacity:0.55; vertical-align:baseline; }

.mf-step-desc { font-size:13px; color:#999; margin:2px 0 8px; line-height:1.4; }

/* ── Finish-line target bar (GP + NOI scorecards) ─────────────
   Intentionally different from the split bars above:
   — taller track (20px vs 10px) = tactile, meaningful weight
   — target marker extends beyond track = "the finish line"
   — below target: magnetic tinted zone pulls fill toward goal
   — above target: bonus zone + glowing marker = visual reward  */

/* "of revenue" context line above the bar */
.mf-score-pct-line {
  font-size: 13px; color: #777; margin: 0 0 0; font-weight: 400; line-height: 1.4;
}

/* Outer wrapper — needs overflow:visible so the target marker label
   can escape above the track */
.mf-score-wrap {
  position: relative;
  margin: 14px 0 2px;
  padding-top: 24px;   /* headroom for the target label above the bar */
}

/* The actual bar — clips the fill segments to the rounded track shape */
.mf-score-track-inner {
  position: relative;
  height: 20px;
  background: #eef0f3;
  border-radius: 10px;
  overflow: hidden;
}

/* ── Fill segments ── */

/* Base fill — 0 to min(current, target). Square right edge faces target. */
.mf-score-fill {
  position: absolute;
  left: 0; top: 0; height: 100%;
  border-radius: 10px 0 0 10px;
  transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.mf-step--gp  .mf-score-fill { background: #3b82f6; }
.mf-step--noi .mf-score-fill { background: #22c55e; }

/* Bonus zone — from target to current when above goal. Deeper/richer. */
.mf-score-bonus {
  position: absolute;
  top: 0; height: 100%;
  transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.mf-step--gp  .mf-score-bonus {
  background: linear-gradient(90deg, #1d4ed8 0%, #1e40af 100%);
}
.mf-step--noi .mf-score-bonus {
  background: linear-gradient(90deg, #16a34a 0%, #15803d 100%);
}

/* Magnetic zone — the unfilled gap between fill and target. Barely visible
   but creates a sense of "this space wants to be filled." */
.mf-score-magnet {
  position: absolute;
  top: 0; height: 100%;
}
.mf-step--gp  .mf-score-magnet { background: rgba(59, 130, 246, 0.13); }
.mf-step--noi .mf-score-magnet { background: rgba(34, 197, 94, 0.13); }

/* ── Target marker — the finish line ── */
/* Lives on the outer wrapper (not inside the clip) so it can extend
   both above and below the track. This is the hero element. */
.mf-score-target {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  z-index: 4;
}

/* Label above the bar */
.mf-score-target-label {
  font-size: 10px;
  font-weight: 700;
  color: #d4a017;
  white-space: nowrap;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  height: 20px;            /* sits in the padding-top zone */
  display: flex;
  align-items: flex-end;
  padding-bottom: 3px;
}

/* The gold tick — taller than the bar, extending 4px above and below */
.mf-score-target-line {
  width: 2.5px;
  height: 28px;            /* 4px above + 20px bar + 4px below */
  background: #d4a017;
  border-radius: 1.5px;
  transition: box-shadow 0.4s ease, background 0.3s ease;
}

/* "Hit" state — pct >= target. Marker glows. Signals docking success. */
.mf-score-target.hit .mf-score-target-line {
  background: #c9820a;
  box-shadow:
    0 0 0 3px rgba(212, 160, 23, 0.18),
    0 0 10px rgba(212, 160, 23, 0.35);
}
.mf-score-target.hit .mf-score-target-label {
  color: #c9820a;
}

/* Scale — 0% on left, max% on right */
.mf-score-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 10px;
  color: #c4c9d0;
  letter-spacing: 0.2px;
}

/* Gap/status text — the "how far" line below the bar */
.mf-score-gap {
  font-size: 12px;
  font-weight: 700;
  margin-top: 4px;
  letter-spacing: 0.2px;
}
.mf-score-gap.below { color: #E5484D; }
.mf-score-gap.near  { color: #C9820A; }
.mf-score-gap.above { color: #16a34a; }

/* ── Operation rows: − Job Costs, − Overhead ── */
.mf-op {
  background:#f7f8f9;
  border-top:1px solid #efefef;
  border-bottom:1px solid #efefef;
  padding:14px 20px;
}
.mf-op-head { /* kept for legacy reference */
  display:flex; align-items:center;
  justify-content:space-between; gap:8px;
}
.mf-op-label {
  font-size:13px; font-weight:700; letter-spacing:0.6px;
  text-transform:uppercase; color:#555;
  display:flex; align-items:center; gap:6px;
}
.mf-op-sign { font-size:20px; color:#ef4444; font-weight:800; line-height:1; }
.mf-op-total {
  font-size:42px; font-weight:800; color:#ef4444; letter-spacing:-0.5px;
  margin:8px 0 0;
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.mf-op-total--orange { color:#f97316; }  /* overhead deduction */
.mf-op-total-sub { font-size:13px; font-weight:500; color:#bbb; margin-left:6px; }
/* Smaller, less-aggressive negative sign — balances the big numbers */
.mf-op-neg {
  font-size: 0.55em; font-weight: 700;
  vertical-align: 0.28em; margin-right: 2px;
  opacity: 0.72;
}
/* Inline % of revenue badge — sits after the big dollar, inherits section color */
.mf-op-pct {
  font-size: 16px;
  font-weight: 600;
  opacity: 0.58;
  margin-left: 10px;
  letter-spacing: 0;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

/* ── Clickable section header (replaces chevron-inside-bar) ──
   Title + total on the left, chevron top-right. Whole row is a tap
   target; subtle hover feedback telegraphs the interaction. */
.mf-op-head-click {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  padding: 4px 4px 2px;
  margin: 0 -4px;
  border-radius: 12px;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.mf-op-head-click:hover { background: rgba(0,0,0,0.025); }
.mf-op-head-click:active { background: rgba(0,0,0,0.045); }
.mf-op-head-text { flex: 1; min-width: 0; }

/* Pill-style chevron badge in the header corner */
.mf-op-head-chev {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #fef2f2;               /* pale red tint for COGS */
  display: flex; align-items: center; justify-content: center;
  color: #ef4444;
  transition: background 0.15s, transform 0.2s, color 0.15s;
  margin-top: 6px;
}
.mf-op-head-chev--orange {
  background: #fff7ed;
  color: #f97316;
}
.mf-op-head-chev .mf-op-chev {
  position: static;
  transform: none;
  top: auto; right: auto;
  color: inherit;
}
.mf-op-head-chev .mf-op-chev--open {
  transform: rotate(180deg);
}
.mf-op-head-click:hover .mf-op-head-chev { background: #fee2e2; }
.mf-op-head-click:hover .mf-op-head-chev--orange { background: #ffedd5; }
.mf-op-btn {
  font-size:11px; color:#aaa; background:none;
  border:1px solid #e5e7eb; border-radius:20px;
  cursor:pointer; padding:4px 10px;
  display:flex; align-items:center; gap:3px;
  white-space:nowrap; transition:all 0.15s;
}
.mf-op-btn:hover { color:#555; border-color:#ccc; }
.mf-op-chev { font-size:16px; font-weight:600; }

/* ── Zoom-in breakdown panel ───────────────────────────────── */

/* Accordion container: collapses via max-height + opacity + padding so
   the height change is fluid rather than snapping (hidden attribute).
   Chevron rotation + staggered row reveal are layered on top. */
.mf-zoom-detail {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    max-height 0.38s cubic-bezier(0.16, 1, 0.3, 1),
    opacity   0.28s ease-out,
    margin-top 0.3s ease;
}
.mf-zoom-detail.is-open {
  max-height: 4000px;           /* generous ceiling for long expense lists */
  opacity: 1;
  pointer-events: auto;
}
/* GP detail: no extra top gap — it's the first thing inside the card now */
.mf-step--gp .mf-zoom-detail { margin-top: 8px; }
/* Legend divider on the blue card */
.mf-step--gp .mf-zoom-legend { border-top-color: #bfdbfe; }
/* GP detail is always open — skip the stagger animation, show rows immediately */
.mf-gp-detail .mf-zoom-leg-row { opacity: 1; animation: none !important; }

/* Chevron rotation — 200ms ease-in-out so the flip feels intentional */
.mf-op-chev {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* GP "We kept X%" line inside the panel */
/* Tight gap above ($129K ↔ "We kept 47.1%"), larger gap below to
   clearly separate the header group from the bar + its label */
.mf-gp-pct-line { margin-top: 2px !important; margin-bottom: 22px !important; }

/* ── Shared target/goal marker (below the bar, subtle) ────────
   Chevron moved out of the bar, so the target can live cleanly
   below with just a thin dashed tick + small label.
   Used for both "Target 50%" (COGS bar) and "Profit Goal 15%"
   (Profit bar) — horizontal position driven by --tx CSS var. */
.mf-cogs-bar-wrap {
  position: relative;
  margin: 12px 0 4px;
}
/* Solid "needle" marker that pierces the bar — replaces the old dashed line.
   The tick climbs up with negative `top` so it overlaps the bar above, then
   extends a few pixels below. Pill badge label sits under the tick. */
.fin-target-mark {
  --tx: 50%;
  position: relative;
  height: 26px;
  margin-top: 2px;
  pointer-events: none;
  overflow: visible;
}
.fin-target-tick {
  position: absolute;
  top: -32px;                    /* 2px above the 26px bar */
  left: var(--tx);
  width: 2px;
  height: 34px;                  /* bar (26) + 2 above + 4 below */
  background: #9ca3af;
  transform: translateX(-50%);
  border-radius: 2px;
  z-index: 10;
}
/* Flat, subtle target pill — pale fill, dark text, no shadow.
   Anchors directly under the target tick so the user reads it as a
   caption for the line, not a competing badge. */
.fin-target-lbl {
  position: absolute;
  top: 4px;
  left: var(--tx);
  transform: translateX(-50%);
  padding: 2px 8px;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.7px; text-transform: uppercase;
  color: #475569;
  background: #f1f5f9;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 11;
  box-shadow: none;
}
/* Section-accent colors for the tick + pale-tint pill */
.fin-target-mark--red .fin-target-tick    { background: #ef4444; }
.fin-target-mark--red .fin-target-lbl     { background: #fee2e2; color: #991b1b; }
.fin-target-mark--green .fin-target-tick  { background: #16a34a; }
.fin-target-mark--green .fin-target-lbl   { background: #dcfce7; color: #14532d; }
.fin-target-mark--blue .fin-target-tick   { background: #2563eb; }
.fin-target-mark--blue .fin-target-lbl    { background: #dbeafe; color: #1e3a8a; }


/* ── GP reversed competition bar ───────────────────────────── */
.mf-gp-revbar-wrap { margin: 0 0 12px; }
.mf-gp-revbar-head {
  font-size: 11px; font-weight: 600; color: #888;
  text-transform: uppercase; letter-spacing: 0.8px;
  margin-bottom: 8px;
}
/* Outer: position:relative so the boundary pill can absolutely position
   above the bar. Top padding reserves headroom for that floating label. */
.mf-gp-revbar-outer { position: relative; padding-top: 22px; margin-bottom: 6px; }

/* Flat bar — radius matches the other split bars (7px) for visual cohesion */
.mf-gp-revbar {
  display: flex;
  height: 24px;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.mf-gp-revbar-cogs {
  background: #fecaca;
  flex-shrink: 0;
  border-right: 1px solid #fff;
}
.mf-gp-revbar-gp {
  flex: 1;
  background: #3b82f6;
}

/* Floating boundary label — sits above the seam where pink meets blue.
   `left` is set inline via JS to track the COGS % width. */
.mf-gp-boundary-lbl {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: #2563eb;
  border-radius: 10px;
  white-space: nowrap;
  letter-spacing: 0.3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  z-index: 5;
}
/* Tiny caret pointing down from the pill to the bar seam */
.mf-gp-boundary-lbl::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #2563eb;
  border-bottom: 0;
}

/* "Where that GP went:" section header */
.mf-gp-breakdown-head {
  font-size: 11px; font-weight: 600; color: #888;
  text-transform: uppercase; letter-spacing: 0.8px;
  margin: 14px 0 8px;
}

/* Flat, minimal connector: just a thin divider + tiny muted label.
   Replaces the old full-width gradient trapezoid "funnel" which ate
   too much vertical space and clashed with the flat aesthetic. */
.mf-zoom-connector-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 8px;
  pointer-events: none;                   /* never absorb clicks from rows below */
}
.mf-zoom-conn-divider {
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}
.mf-zoom-conn-label {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #9ca3af;
  white-space: nowrap;
}

/* Breakdown bar — shoots from segment width to full with expo-out easing */
.mf-zoom-bar-anim {
  width: var(--z-start, 60%);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  border-radius: 0;
}
.mf-zoom-bar-anim.mf-zoom-expanded { width: 100%; }

.mf-zoom-bar {
  display: flex;
  height: 24px;
  border-radius: 0;
  overflow: hidden;
  gap: 0;           /* no white lines between segments */
}
.mf-zoom-seg {
  height: 100%;
  min-width: 2px;
  flex-shrink: 0;
  cursor: pointer;
  overflow: hidden;                   /* clips % label in narrow segments */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.15s;
}
.mf-zoom-seg.mf-zoom-hl {
  filter: brightness(1.2) saturate(1.15);
  position: relative;
  z-index: 2;
}
/* Inline % label — only rendered for segments ≥ 8% (JS-side threshold).
   Lets the span shrink with the flex parent so nothing leaks into the
   neighbor segment. */
.mf-zoom-seg-pct {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  letter-spacing: 0.2px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
}

/* Staggered legend row fade-up — 40ms per row for a premium cascading feel */
@keyframes mfRowIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mf-zoom-legend {
  margin-top: 10px;
  border-top: 1px solid #f0f0f0;
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mf-zoom-leg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 9px;   /* extra left pad clears the border stripe */
  border-radius: 0 5px 5px 0; /* flat left (border takes that edge), rounded right */
  font-size: 13px;
  cursor: default;
  transition: filter 0.12s;
  opacity: 0; /* hidden until is-open triggers animation */
}
.mf-zoom-detail.is-open .mf-zoom-leg-row {
  animation: mfRowIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.18s + var(--i, 0) * 0.04s);
}
/* Hover: brighten the row's own tint */
.mf-zoom-leg-row.mf-zoom-hl { filter: brightness(0.93); }
.mf-zoom-leg-row.mf-zoom-hl .mf-zoom-leg-name { font-weight: 600; color: #1a2d3a; }

/* Click-selected state (persistent on touch) — stronger than hover */
.mf-zoom-leg-row.mf-zoom-sel { filter: brightness(0.86); }
.mf-zoom-leg-row.mf-zoom-sel .mf-zoom-leg-name { font-weight: 700; color: #1a2d3a; }
.mf-zoom-seg.mf-zoom-sel { filter: brightness(1.25) saturate(1.2); z-index: 2; position: relative; }

/* Touch target: make rows finger-friendly */
.mf-zoom-leg-row { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mf-zoom-seg     { -webkit-tap-highlight-color: transparent; }

.mf-zoom-leg-name { flex: 1; color: #444; }
.mf-zoom-leg-pct  { font-size: 12px; color: #888; min-width: 38px; text-align: right; font-weight: 600; }
.mf-zoom-leg-val  { font-size: 13px; font-weight: 700; color: #1a2d3a;
                    min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }

/* ── Revenue full bar ──────────────────────────────────────── */
.mf-rev-bar {
  height: 20px; background: #6366f1; border-radius: 5px;
  margin: 10px 0 6px;
}
.mf-rev-bar-leg {
  font-size: 11px; color: #888;
}

/* ── Cascading split bars (COGS 2-part, Overhead 3-part) ────
   Chevron has been moved to the section header, so the bar itself
   is purely data-visual. Both bars share identical geometry for
   perfect vertical alignment between rows. */
.mf-split-wrap { margin: 10px 0 4px; }

.mf-split-bar {
  display: flex; height: 26px;
  border-radius: 7px;
  overflow: hidden; gap: 0;
  /* Subtle outer shadow only — internal segments are flat */
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

/* Segments — flat solid HEX colors with 1px white dividers between them.
   The `:not(:last-child)` border creates a clean "cut" look without using
   gradients for faux depth. */
.mf-sb-prior {
  background: #fecaca;   /* light red: COGS reference */
  flex-shrink: 0; position: relative;
}
.mf-sb-cogs  {
  background: #f87171;   /* red: cost of goods sold */
  flex-shrink: 0; position: relative;
}
.mf-sb-gp    {
  background: #bfdbfe;   /* pale blue: gross profit */
  flex: 1; min-width: 2px; position: relative;
}
.mf-sb-ovhd  {
  background: #f97316;   /* orange: overhead */
  flex-shrink: 0; position: relative;
}
.mf-sb-pass  {
  background: #bbf7d0;   /* pale green: operating profit */
  flex: 1; min-width: 2px; position: relative;
}

/* ── Profit bar "ghost" segments ─────────────────────────────
   Reduced-intensity solid colors so the green Profit segment pops.
   Using diluted colors (not opacity) keeps hover/tap feedback clean. */
.mf-sb-ghost-cogs {
  background: #fbdede;   /* softer pale red */
  flex-shrink: 0; position: relative;
}
.mf-sb-ghost-ovhd {
  background: #ffe0cc;   /* softer pale orange */
  flex-shrink: 0; position: relative;
}
/* Active profit segment — vibrant, commands attention */
.mf-sb-profit {
  background: #22c55e;
  flex: 1; min-width: 2px; position: relative;
}

/* Clean 1px "cut" between every segment in every stacked bar */
.mf-split-bar > *:not(:last-child) {
  box-shadow: inset -1px 0 0 #ffffff;
}
/* Ghost-segment labels hidden by default; show on hover like mf-sb-prior/pass */
.mf-sb-ghost-cogs .mf-bar-label,
.mf-sb-ghost-ovhd .mf-bar-label { opacity: 0; transition: opacity 0.15s; }
.mf-sb-ghost-cogs:hover .mf-bar-label,
.mf-sb-ghost-ovhd:hover .mf-bar-label { opacity: 1; }
.mf-sb-ghost-cogs .mf-bar-label { color: #b91c1c; }
.mf-sb-ghost-ovhd .mf-bar-label { color: #9a3412; }

/* Green variant of the header chevron badge — matches Profit accent */
.mf-op-head-chev--green {
  background: #f0fdf4;
  color: #16a34a;
}
.mf-op-head-click:hover .mf-op-head-chev--green { background: #dcfce7; }

/* Labels inside bar segments */
.mf-bar-label {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.15s;
}
/* Hidden-until-hover: faint/passive segments */
.mf-seg-dim .mf-bar-label,
.mf-sb-prior .mf-bar-label,
.mf-sb-pass .mf-bar-label,
.mf-sb-gp .mf-bar-label { opacity: 0; }

.mf-seg-dim:hover .mf-bar-label,
.mf-sb-prior:hover .mf-bar-label,
.mf-sb-pass:hover .mf-bar-label,
.mf-sb-gp:hover .mf-bar-label { opacity: 1; }

/* Dark labels for pale-background segments */
.mf-sb-pass .mf-bar-label { color: #15803d; }
.mf-sb-gp   .mf-bar-label { color: #1e40af; }

/* Narrow-segment: hide label + chevron when there's not enough room */
.mf-label-too-narrow .mf-bar-label { display: none !important; }
.mf-label-too-narrow .mf-op-chev   { right: 4px; }

/* GP mirror bar margin */
.mf-gp-mirror-bar { margin: 10px 0 14px; }

/* NOI mirror bar: greyed COGS | greyed Overhead | blue NOI */
.mf-noi-bar-wrap {
  position: relative;
  margin: 22px 0 4px;   /* top room for the goal label */
}
.mf-noi-mirror-bar { margin: 0; }

/* Clickable blue NOI segment */
.mf-noi-profit-seg {
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: filter 0.15s;
}
.mf-noi-profit-seg { display: flex; align-items: center; justify-content: center; cursor: pointer; transition: filter 0.15s, box-shadow 0.15s; }
.mf-noi-profit-seg:hover { filter: brightness(0.9); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35); }

/* Green vertical target line on the mirror bar */
.mf-noi-target-line {
  position: absolute;
  bottom: 0;
  height: 24px;          /* matches bar height */
  width: 2px;
  background: #16a34a;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Green "Profit Goal 15%" label above the bar */
.mf-noi-goal-lbl {
  position: absolute;
  top: -20px;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #16a34a;
  white-space: nowrap;
  pointer-events: none;
}

.mf-sl-noi-cogs::before   { background: #fecaca; }
.mf-sl-noi-ovhd::before   { background: #fed7aa; }
.mf-sl-noi-profit::before { background: #22c55e; font-weight: 700; color: #15803d; }

/* ── NOI expandable detail ───────────────────────────────────── */
/* Container cohesion: green card connects flush with the parent row;
   top corners flatten, top border vanishes so it reads as one block. */
.mf-noi-detail { margin-top: 0; }
.mf-noi-explain {
  padding: 18px 20px 14px;
  background: #f0fdf4;
  border-radius: 0 0 12px 12px;
  border: 1px solid #d1fae5;
  border-top: none;
  margin-top: -2px;   /* overlap 2px with bar above for seamless join */
}
.mf-noi-explain-head {
  font-size: 15px; font-weight: 800; color: #14532d;
  margin-bottom: 8px;
  letter-spacing: -0.1px;
}
.mf-noi-explain-body {
  font-size: 13px; color: #374151; line-height: 1.65;
  margin-bottom: 18px;
}
/* ── Profit gauge bar ─────────────────────────────────────── */
/* Structure: [ now-label row (above) ] → [ track ] → [ scale row w/ goal below ]
   Vertical separation prevents "14.9%" and "15% goal" colliding when close. */
.mf-noi-gauge { margin-bottom: 18px; }
.mf-noi-gauge-top {
  position: relative;
  height: 18px;
  margin-bottom: 4px;
}
/* "Now" pill — sits ABOVE the needle; highest z-index so overlap is clean */
.mf-noi-gauge-now {
  position: absolute;
  transform: translateX(-50%);
  font-size: 12px; font-weight: 800;
  color: #1a2d3a;
  white-space: nowrap;
  padding: 2px 8px;
  background: white;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  z-index: 5;
}
/* Tiny caret pointing down from the "now" pill toward the needle */
.mf-noi-gauge-now::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: white;
  border-bottom: 0;
}
.mf-noi-gauge-track {
  height: 10px; background: #e2e8f0; border-radius: 5px;
  position: relative; overflow: visible; margin-bottom: 6px;
}
.mf-noi-gauge-fill {
  height: 100%; border-radius: 5px; position: absolute; left: 0; top: 0;
  transition: width 0.7s cubic-bezier(0.4,0,0.2,1);
}
/* Slim 2px goal line — sharp flat edges, no rounding, peeks just
   slightly above/below the 10px track for a precise anchor without bulk */
.mf-noi-gauge-pin {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: #b45309; transform: translateX(-50%);
  border-radius: 0;
  z-index: 2;  /* BELOW the needle/pill so the dot sits on top cleanly */
}
/* Needle dot — solid color matching the bar (inline var --needle-color
   set in JS), white halo ring acts as visual mask when it overlaps
   the goal line. Exact mathematical centering via translate(-50%). */
.mf-noi-gauge-needle {
  position: absolute;
  top: -3px;                    /* centers a 16px dot on a 10px track */
  width: 16px; height: 16px;
  background: var(--needle-color, #f59e0b);
  border: 3px solid #ffffff;    /* white halo = visual mask over pin */
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  z-index: 4;                   /* above pin (2), below pill (5) */
  transform: translate(-50%, 0);
}
.mf-noi-gauge-scale {
  position: relative; display: flex;
  justify-content: space-between;
  font-size: 10px; color: #94a3b8; height: 16px;
}
.mf-noi-gauge-edge { font-weight: 600; }
.mf-noi-gauge-goal-tag {
  position: absolute; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; color: #b45309;
  white-space: nowrap; top: 0;
  text-transform: uppercase; letter-spacing: 0.6px;
}
/* ── Three stat cards (responsive) ────────────────────────── */
.mf-noi-explain-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.mf-noi-explain-stat {
  background: white; border-radius: 10px;
  padding: 11px 13px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.mf-noi-explain-stat-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: #94a3b8; margin-bottom: 4px;
}
.mf-noi-explain-stat-val {
  font-size: 20px; font-weight: 700; color: #1a2d3a;
}
/* ── Delta badge next to the % value ─────────────────────── */
.mf-noi-delta {
  display: inline-block; font-size: 11px; font-weight: 700;
  margin-left: 5px; vertical-align: middle; opacity: 0.85;
}
.mf-noi-explain-tip {
  font-size: 12.5px; color: #4b5563; line-height: 1.65;
  border-top: 1px solid #d1fae5; padding-top: 12px;
}
.mf-noi-explain-tip strong { color: #1a2d3a; font-weight: 700; }
.mf-noi-tip-head { font-weight: 700; color: #14532d; }

/* ── Integrated status footer pill ─────────────────────────
   Replaces the old "floating" #mfNoiGap that hung outside the card. */
.mf-noi-status {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border-radius: 999px;
  line-height: 1.2;
}
.mf-noi-status--above { background: #dcfce7; color: #166534; }
.mf-noi-status--near  { background: #fef3c7; color: #92400e; }
.mf-noi-status--below { background: #fee2e2; color: #991b1b; }

/* Clickable bar segment — red/orange/green portions the user taps to expand */
.mf-seg-click {
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: filter 0.15s, box-shadow 0.15s;
  position: relative;
  overflow: hidden;
}
.mf-seg-click:hover {
  filter: brightness(0.9);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35);
}
/* SVG Chevron — pinned to right edge, perfectly centered via SVG geometry */
.mf-op-chev {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  color: rgba(255,255,255,0.75);
  pointer-events: none;
  transition: transform 0.2s, color 0.15s;
  flex-shrink: 0;
}
.mf-op-chev--open {
  transform: translateY(-50%) rotate(180deg);
}
.mf-seg-click:hover .mf-op-chev,
.mf-noi-profit-seg:hover .mf-op-chev {
  color: rgba(255,255,255,1);
}
/* GP segment (pale blue bg) — black arrow */
.mf-sb-gp .mf-op-chev { color: rgba(0,0,0,0.45); }
.mf-sb-gp:hover .mf-op-chev { color: rgba(0,0,0,0.85); }
/* Operating Profit: label centered, chevron right-pinned */
.mf-noi-profit-seg .mf-bar-label {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
}

.mf-split-leg {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 6px;
}
.mf-split-leg span,
.mf-split-leg .mf-sl-btn {
  font-size: 11px; color: #666;
  display: flex; align-items: center; gap: 4px;
}
.mf-split-leg span::before,
.mf-split-leg .mf-sl-btn::before {
  content: ''; display: inline-block;
  width: 8px; height: 8px; border-radius: 5px; flex-shrink: 0;
}

/* Clickable legend label (COGS / Overhead) */
.mf-sl-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  transition: color 0.12s;
}
.mf-sl-cogs.mf-sl-btn:hover    { color: #ef4444; }
.mf-sl-ovhd.mf-sl-btn:hover    { color: #ea580c; }
.mf-sl-gp-btn.mf-sl-btn:hover  { color: #2563eb; }
.mf-sl-prior::before    { background: #fecaca; }
.mf-sl-cogs::before     { background: #f87171; }
.mf-sl-ovhd::before     { background: #f97316; }
.mf-sl-gp-btn::before   { background: #3b82f6; }
.mf-sl-pass-gp::before  { background: #bfdbfe; }
.mf-sl-pass-noi::before { background: #bbf7d0; }

/* Compare delta + status pills */
.mf-delta { font-size:13px; font-weight:600; margin-top:8px; }
.mf-delta.up   { color:#22c55e; }
.mf-delta.down { color:#E5484D; }
.mf-cmp-lbl    { font-weight:400; color:#aaa; font-size:11px; }
.mf-pill { display:inline-block; font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px; letter-spacing:0.3px; text-transform:uppercase; vertical-align:middle; white-space:nowrap; }
.pill-green  { background:#dcfce7; color:#15803d; }
.pill-yellow { background:#fef9c3; color:#854d0e; }
.pill-red    { background:#fee2e2; color:#b91c1c; }

@media (max-width:768px) {
  .mf-step       { padding:16px 16px; }
  .mf-op         { padding:12px 16px; }
  .mf-step-label { font-size:12px; }
  /* .mf-step-num now uses clamp() for fluid scaling — no override needed */
  .mf-step-desc  { font-size:13px; }
  .mf-op-total   { font-size:38px; }
  .mf-op-item-label { font-size:14px; }
  .mf-op-item-val   { font-size:14px; }
  .mf-delta      { font-size:14px; }
  .mf-pill       { font-size:11px; }
  .mf-score-gap { font-size:13px; }
  .mf-score-pct-line { font-size:14px; }
}

/* Efficiency tiles */
.fin-pct-tiles { display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:1.4rem; }
@media (min-width: 700px) { .fin-pct-tiles { grid-template-columns:repeat(3,1fr); } }
.fin-pct-tile { background:white;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,0.08);padding:14px 16px; }
.fin-pct-tile-label { font-size:11px;color:#888;text-transform:uppercase;font-weight:600;letter-spacing:0.4px;margin-bottom:4px; }
.fin-pct-tile-value { font-size:28px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums; }
.fin-pct-tile-value.c-green { color:#12A071; }
.fin-pct-tile-value.c-yellow { color:#C9820A; }
.fin-pct-tile-value.c-red { color:#E5484D; }
.fin-pct-tile-sub { font-size:12px;color:#888;margin-top:2px; }
.fin-pct-tile-delta { font-size:12px;font-weight:600;margin-top:4px; }
.fin-pct-tile-hint { font-size:11px;color:#9aa4ad;margin-top:8px;line-height:1.35;font-style:italic;border-top:1px dashed #eee;padding-top:6px; }

.fin-row2 { display:grid;grid-template-columns:3fr 2fr;gap:14px;margin-bottom:1.4rem; }
@media(max-width:768px) { .fin-row2 { grid-template-columns:1fr; } }
/* Modernized card: 24px radius + soft-glow shadow for a premium feel */
.fin-chart-card { background:white;border-radius:24px;box-shadow:0 10px 30px rgba(0,0,0,0.05);padding:22px; }
.fin-chart-title { font-size:13px;font-weight:700;color:#1a2d3a;margin-bottom:14px;letter-spacing:0.1px; }
.fin-chart-title span { font-size:11px;font-weight:400;color:#aaa;margin-left:6px; }
.fin-chart-wrap { position:relative; }

/* ── Horizontal-scroll bar-chart wrapper ────────────────────────
   Used on Revenue / Cash Flow bars. Inner canvas is 150% wide so
   each bar has breathing room; viewport scrolls with iOS momentum.
   Both edges are bare hard-cuts — the card's own border-radius is
   the physical page edge on both sides. Bars bisected at either
   edge signal "swipe to see more" without any visual noise. */
.fin-chart-wrap--scroll { overflow: hidden; position: relative; }
.fin-chart-wrap--scroll .fin-chart-scroll {
  width: 100%; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* Hide scrollbar across engines: WebKit via pseudo, Firefox via
     scrollbar-width, legacy Edge/IE via -ms-overflow-style */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Contain overscroll so swiping past the last bar doesn't trigger
     browser back/forward or pull-to-refresh on mobile */
  overscroll-behavior-x: contain;
}
.fin-chart-wrap--scroll .fin-chart-scroll::-webkit-scrollbar { display: none; }
.fin-chart-wrap--scroll .fin-chart-inner-wide {
  width: 150%; height: 100%; min-width: 150%;
  position: relative;
}

/* ── Mobile-only horizontal-scroll modifier ────────────────────
   Used by the Key Ratios trend chart, which is readable on desktop
   but unreadable when 24 months are crammed into a 360px phone
   viewport. On desktop this modifier is a no-op — the inner scroll
   + wide divs both fill 100% of the wrap so Chart.js renders a
   normal-width canvas. On mobile (≤768px) the wrap becomes
   horizontally scrollable and the inner div expands to 400% so
   each month gets ~4× its default horizontal space. Initial
   scroll position is pinned to the right edge (most-recent months
   visible first) via wireChartScroll() in owners.js after render. */
.fin-chart-wrap--mobile-scroll .fin-chart-scroll,
.fin-chart-wrap--mobile-scroll .fin-chart-inner-wide-mobile {
  width: 100%;
  height: 100%;
  position: relative;
}
@media (max-width: 768px) {
  .fin-chart-wrap--mobile-scroll { overflow: hidden; }
  .fin-chart-wrap--mobile-scroll .fin-chart-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* Hide the scrollbar; swipe momentum + the partial-bisected
       leftmost month-label are the affordances. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Prevent the horizontal swipe from triggering iOS back/forward
       gestures when it hits the end of the scroll range. */
    overscroll-behavior-x: contain;
  }
  .fin-chart-wrap--mobile-scroll .fin-chart-scroll::-webkit-scrollbar { display: none; }
  .fin-chart-wrap--mobile-scroll .fin-chart-inner-wide-mobile {
    width: 400%;
    min-width: 400%;
  }
}

/* No edge decoration. Both left and right are hard-cuts against the
   card's own border-radius — partially bisected bars on either side
   signal "swipe to see more" without any line, shadow, or gradient. */

/* ── Summary Plate: contextual data header above scrollable charts ──
   Replaces the floating dark tooltip + in-bar labels. Updates live as
   the user hovers/scrubs across bars. Always visible, so the most
   important data (latest month) shows even before interaction. */
.fin-summary-plate {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  min-height: 44px;
}
.fin-summary-plate-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.fin-summary-plate-month {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #64748b;
  flex-shrink: 0;
}
.fin-summary-plate-value {
  font-size: 22px;
  font-weight: 800;
  color: #1a2d3a;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  line-height: 1;
}
.fin-summary-plate-delta {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.fin-summary-plate-delta:empty { display: none; }
.fin-summary-plate-delta.up   { background: #dcfce7; color: #166534; }
.fin-summary-plate-delta.down { background: #fee2e2; color: #991b1b; }

@media (max-width: 480px) {
  .fin-summary-plate { flex-wrap: wrap; gap: 6px 12px; padding: 9px 12px; }
  .fin-summary-plate-value { font-size: 20px; }
}

/* ── Trend-chart toggle row + overlay legend ─────────────────── */
.fin-trend-top-row { display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.fin-trend-toggles { display:flex; flex-wrap:wrap; gap:6px; flex:1; min-width:0; }

/* Pill toggle buttons — inactive: colored border/text, no fill */
.fin-trend-btn { font-size:11px; font-weight:600; padding:5px 11px; border-radius:20px; border:1.5px solid currentColor; background:transparent; cursor:pointer; line-height:1.3; transition:background 0.15s, color 0.15s; white-space:nowrap; }
/* Active: fill with brand color (stored in --c), text goes white */
.fin-trend-btn.on { background:var(--c); color:#fff !important; border-color:var(--c); }

/* Overlay legend — sits to the right of the toggles */
.tcl-overlay { display:flex; flex-direction:column; gap:4px; flex-shrink:0; font-size:12px; }
.tcl-item { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.tcl-swatch { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.tcl-swatch--target { background:#94a3b8; border:none; border-radius:1px; width:14px; height:2px; margin-top:1px; }
.tcl-label { color:#555; font-weight:500; }
.tcl-val { font-weight:700; margin-left:2px; }
.tcl-dir { font-size:10px; font-weight:600; padding:1px 6px; border-radius:10px; margin-left:4px; }
.tcl-dir--above { background:#dcfce7; color:#15803d; }
.tcl-dir--below { background:#fee2e2; color:#b91c1c; }

/* ── Neutral "Target ≤ 25%" pill (replaces the old red "stay below") */
.tcl-target-pill {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  padding: 2px 9px;
  border-radius: 10px;
  background: #f1f5f9;       /* pale slate — reads as info, not warning */
  color: #475569;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* ── Custom trend-chart tooltip card ──────────────────────────
   Floating white card with soft shadow and colored value.
   Positioned in JS above the data point so thumbs don't hide it. */
.fin-trend-tooltip {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
  padding: 8px 12px 10px;
  min-width: 140px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  font-family: inherit;
}
.fin-trend-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.fin-trend-tooltip-date {
  font-size: 11px; font-weight: 500;
  color: #94a3b8;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}
.fin-trend-tooltip-row {
  display: flex; align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.fin-trend-tooltip-swatch {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.fin-trend-tooltip-label {
  font-size: 11px; font-weight: 600;
  color: #64748b;
}
.fin-trend-tooltip-value {
  font-size: 20px; font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* ── Larger donut wrap + custom pill legend ───────────────── */
.fin-donut-wrap {
  position: relative;
  width: 100%;
  height: 340px;              /* bigger than the old 300px */
  margin: 0 auto;
  padding: 0;
}
.fin-donut-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}
.fin-donut-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 16px;
  padding: 4px 2px 0;
}
.fin-donut-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chip-c) 12%, #ffffff);
  color: #334155;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, transform 0.08s, opacity 0.15s;
  line-height: 1.2;
  white-space: nowrap;
}
.fin-donut-chip:hover  { background: color-mix(in srgb, var(--chip-c) 20%, #ffffff); }
.fin-donut-chip:active { transform: scale(0.95); }
.fin-donut-chip-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fin-donut-chip.is-off {
  background: #f1f5f9;
  opacity: 0.5;
}
.fin-donut-chip.is-off .fin-donut-chip-label { text-decoration: line-through; }
.fin-donut-chip.is-off .fin-donut-chip-dot   { background: #cbd5e1 !important; }

/* "Other" pill: visible for context, but not tappable since there's
   no underlying QBO account to drill into. */
.fin-donut-chip--static {
  cursor: default;
  opacity: 0.7;
}
.fin-donut-chip--static:hover { background: color-mix(in srgb, var(--chip-c) 12%, #ffffff); }
.fin-donut-chip--static:active { transform: none; }

@media (max-width: 768px) {
  .fin-donut-wrap { height: 320px; }
}
@media (max-width: 480px) {
  .fin-donut-wrap { height: 290px; }
  .fin-donut-chip { font-size: 11px; padding: 5px 10px; }
  .fin-donut-legend { gap: 6px; }
}

/* Cash cards */
.cash-row { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px; }
.cash-cell { background:#fafafa;border-radius:8px;padding:12px 14px; }
.cash-cell-lbl { font-size:10px;color:#999;text-transform:uppercase;font-weight:600;letter-spacing:0.3px;margin-bottom:4px; }
.cash-cell-val { font-size:20px;font-weight:700;color:#1a2d3a; }
.cash-cell-sub { font-size:11px;color:#888;margin-top:2px; }
.cash-cell.ratio .cash-cell-val.ok { color:#12A071; }
.cash-cell.ratio .cash-cell-val.warn { color:#C9820A; }
.cash-cell.ratio .cash-cell-val.bad { color:#E5484D; }
.cash-cell.total { grid-column:1/-1;background:#fff5ed;border:1px solid #ffe0c2; }
.cash-cell.total .cash-cell-val { color:#E5484D;font-size:22px; }

/* Cash/balance flow — reads like a mini subtraction table */
.cash-flow { display:flex;flex-direction:column;gap:0; }
.cash-flow-section { margin-bottom:14px; }
.cash-flow-head { font-size:11px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;padding:0 2px; }
.cash-flow-row { display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 4px;font-size:13px;color:#333;border-bottom:1px solid #f5f5f5; }
.cash-flow-row:last-child { border-bottom:none; }
.cash-flow-row .lbl { display:flex;flex-direction:column;line-height:1.25; }
.cash-flow-row .lbl-sub { font-size:11px;color:#9aa4ad;font-weight:400;margin-top:1px; }
.cash-flow-row .val { font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;color:#1a2d3a; }
.cash-flow-row .op { display:inline-block;width:14px;color:#bbb;font-weight:700; }
.cash-flow-row.subtotal { border-top:1px solid #ddd;background:#fafafa;font-weight:700;padding:9px 4px; }
.cash-flow-row.subtotal .val { color:#1a2d3a; }
.cash-flow-row.total { border-top:2px solid #1a2d3a;background:#fff5ed;padding:11px 6px;margin-top:4px;border-radius:6px; }
.cash-flow-row.total .val { font-size:18px;color:#E5484D; }
.cash-flow-row.total .lbl { font-weight:700;color:#1a2d3a; }
.cash-cushion { margin-top:12px;padding:12px 14px;background:#f3f8fb;border-radius:8px;display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap; }
.cash-cushion .lbl { display:flex;flex-direction:column; }
.cash-cushion .lbl-top { font-size:12px;font-weight:700;color:#1a2d3a; }
.cash-cushion .lbl-sub { font-size:11px;color:#888;margin-top:2px; }
.cash-cushion .val { font-size:20px;font-weight:700;font-variant-numeric:tabular-nums; }
.cash-cushion .val.ok { color:#12A071; }
.cash-cushion .val.warn { color:#C9820A; }
.cash-cushion .val.bad { color:#E5484D; }

/* ── Account sub-rows inside balance sheet card ─────────────── */
.cash-acct-list {
  padding: 4px 4px 8px 18px;
  border-bottom: 1px solid #f5f5f5;
}
.cash-acct-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 0;
  font-size: 12px;
  color: #666;
}
.cash-acct-name { flex: 1; }
.cash-acct-val  { font-weight: 600; color: #444; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* (cf-drivers section removed) */

.fin-alerts { margin-bottom:1.4rem; }
.fin-alerts-title { font-size:13px;font-weight:700;color:#1a2d3a;margin-bottom:10px; }
.fin-alert { display:flex;align-items:flex-start;gap:12px;background:white;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,0.07);padding:14px 16px;margin-bottom:8px;border-left:4px solid transparent; }
.fin-alert.red { border-left-color:#E5484D; }
.fin-alert.yellow { border-left-color:#C9820A; }
.fin-alert-dot { width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:3px; }
.fin-alert.red .fin-alert-dot { background:#E5484D; }
.fin-alert.yellow .fin-alert-dot { background:#C9820A; }
.fin-alert-body { flex:1; }
.fin-alert-msg { font-size:13px;color:#333;line-height:1.5; }
.fin-alert-range { font-size:11px;color:#aaa;margin-top:2px; }
.fin-no-alerts { background:white;border-radius:10px;padding:16px 18px;font-size:13px;color:#aaa;box-shadow:0 1px 3px rgba(0,0,0,0.07); }

/* ── Location Owners — MOBILE OPTIMIZATION (768px and below) ───────
   Comprehensive mobile-first improvements for touch, readability, spacing,
   and responsive layouts. Focus on 44px+ touch targets, 16px+ body text. */
@media (max-width: 768px) {

  /* ── TOUCH TARGETS: Ensure 44x44px minimum ──────────────────────── */
  .fin-month-header {
    padding: 12px 16px 12px 18px;    /* tappable button look, 44px+ touchable */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .fin-month-title { font-size: 22px; }  /* fits button padding on mobile */
  .fin-month-chev { width: 24px; height: 14px; }  /* was 18x11; now more visible */

  /* Profit stat cards: 2-up grid with third card spanning full width below.
     Keeps text spacious + scannable on narrow phones. */
  .mf-noi-explain-row {
    grid-template-columns: 1fr 1fr;
  }
  .mf-noi-explain-stat:nth-child(3) {
    grid-column: 1 / -1;
  }
  .mf-noi-explain-stat-val { font-size: 18px; }

  .fin-trend-btn {
    font-size: 13px;
    padding: 12px 16px;
    min-height: 44px;     /* was 38px; now meets WCAG minimum */
    line-height: 1.2;
  }

  .fin-toggle button {
    font-size: 13px;
    padding: 12px 16px;
    min-height: 44px;     /* was 40px; now meets WCAG minimum */
  }

  .fin-month-item {
    padding: 16px 20px;   /* was 13px; now more spacious */
    font-size: 16px;      /* was 16px; maintain readability */
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .pnl-cmp-chip {
    padding: 10px 16px;
    min-height: 40px;
    font-size: 13px;
  }

  /* ── MONTH PICKER: real bottom-sheet modal ─────────────────────────
     Slides up from the bottom edge, overlays a dimmed backdrop. Uses a
     snappy cubic-bezier for a tactile spring-like feel. */
  /* Body scroll-lock while the mobile bottom-sheet is open. Same pattern
     as exp-modal-lock + pnl-cmp-lock. Prevents swipes on the dark
     backdrop from chaining to window scroll, and prevents iOS Safari
     from retracting its URL bar (which shifts the visual viewport and
     creates a visible white strip at the top of the status bar zone). */
  body.fin-month-lock {
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: none;
  }
  .fin-month-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0);
    z-index: 998;
    pointer-events: none;
    transition: background 0.28s ease;
    /* Absorb scroll chaining at the backdrop so gestures don't bubble */
    overscroll-behavior: contain;
  }
  .fin-month-backdrop.is-open {
    background: rgba(15, 23, 42, 0.45);
    pointer-events: auto;
  }
  .fin-month-picker {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    top: auto;
    margin: 0;
    max-height: 78vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Sheet's own scroll container — internal scroll still works, but
       gestures past its boundaries don't chain to the body beneath. */
    overscroll-behavior: contain;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.18);
    z-index: 999;
    padding-bottom: env(safe-area-inset-bottom);
    /* Override desktop fade — mobile uses translateY slide-up */
    transform: translateY(100%);
    opacity: 1;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .fin-month-picker.is-open {
    transform: translateY(0);
  }
  /* Grab zone: padded touch target wrapping the grabber pill. Users
     can swipe down from anywhere in this strip (not just the 4px
     pill) to dismiss the sheet. touch-action: none claims the
     vertical gesture so the browser doesn't hijack it for a native
     page-scroll. Cursor grab/grabbing hints the affordance on desktop
     hybrid devices (e.g. iPad with trackpad). */
  .fin-month-grab-zone {
    display: block;
    padding: 10px 0 6px;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
    position: relative;
    flex-shrink: 0;
  }
  .fin-month-grab-zone:active { cursor: grabbing; }
  /* Grabber at the top of the sheet — visual affordance for drag */
  .fin-month-grabber {
    display: block;
    width: 40px;
    height: 4px;
    margin: 0 auto;
    background: #d1d5db;
    border-radius: 2px;
    pointer-events: none;   /* the zone itself owns the gesture */
  }
  /* Kill the sheet's slide transition during an active drag so it
     tracks the finger 1:1 instead of easing behind it. */
  .fin-month-picker.is-dragging {
    transition: none;
  }

  .fin-period-tabs {
    padding: 6px 0 0;
    border-bottom: 2px solid #eee;
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
  }

  .fin-period-tab {
    font-size: 14px;
    padding: 12px 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── RESPONSIVE CHART HEIGHTS & SCROLLING ──────────────────────────────── */
  .fin-chart-wrap { height: 240px !important; }  /* bar charts — increased from 180px for better label spacing */
  #finTrendCard  .fin-chart-wrap { height: 240px; }
  #finRevCard    .fin-chart-wrap { height: 240px; }
  #finCashFlowCard .fin-chart-wrap { height: 240px; }
  #finRow2       .fin-chart-wrap { height: 480px; }  /* donut chart — larger (was 280px) to accommodate legend and improve visibility */

  /* ── FONT SIZES: WCAG AA compliant (16px body, 14px labels, 12px small) */
  .fin-row-title { font-size: 13px; letter-spacing: 1px; }
  .fin-compare-line { font-size: 14px; }

  /* Summary cards - increase readability */
  .fin-card { padding: 18px 18px; }
  .fin-card-label { font-size: 12px; }
  .fin-card-sub { font-size: 16px; font-weight: 600; }  /* was 14px */
  .fin-card-hint { font-size: 13px; line-height: 1.5; }
  .fin-card-delta { font-size: 15px; }

  /* Efficiency tiles */
  .fin-pct-tile { padding: 18px; }
  .fin-pct-tile-label { font-size: 13px; }
  .fin-pct-tile-value { font-size: 36px; }  /* was 32px; larger on mobile */
  .fin-pct-tile-sub { font-size: 15px; }
  .fin-pct-tile-delta { font-size: 14px; }
  .fin-pct-tile-hint { font-size: 13px; line-height: 1.5; }

  /* Chart cards */
  .fin-chart-card { padding: 18px; }
  .fin-chart-title { font-size: 18px; margin-bottom: 12px; font-weight: 700; }  /* bumped from 16px */
  .fin-chart-title span { font-size: 15px; }  /* bumped from 14px */

  /* Chart descriptions - fix "Hover" references */
  .fin-chart-card > div:nth-child(2) {
    font-size: 14px;  /* bumped from 13px for better readability */
    color: #777;      /* slightly darker for better contrast */
    line-height: 1.5;
    margin-bottom: 14px;
  }

  /* ── SPACING & BREATHING ROOM ────────────────────────────────────── */
  .fin-cards {
    grid-template-columns: 1fr;  /* was 2 cols at 768px; now full-width */
    gap: 16px;
    margin-bottom: 2.4rem;
  }

  .fin-chart-card {
    margin-bottom: 2.4rem;  /* increased from 2rem */
    padding: 20px;          /* increased from 18px */
  }

  /* Extra space for donut chart legend on mobile */
  #finRow2 {
    margin-bottom: 3rem !important;  /* extra space for donut legend */
  }

  /* ── TREND CHART: Stack legend below toggles ──────────────────────── */
  .fin-trend-top-row {
    flex-wrap: wrap;
    gap: 12px;
  }

  .fin-trend-toggles {
    flex: 1 1 100%;  /* full width on mobile */
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .tcl-overlay {
    flex: 1 1 100%;  /* full width on mobile */
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
  }

  /* ── P&L GRID: Mobile stacked-row layout ─────────────────────────
     On mobile the 4-column grid is unreadable. Instead each row becomes
     a 3-area CSS grid:
       Label (left)  │  Primary$ + Compare$ stacked (center-right)  │  Delta pill (right)
     The "compare" line sits directly under the primary $ so the visual
     comparison is native to one tap zone. */
  .fin-pnl-scroll {
    overflow-x: visible;   /* no horizontal scroll needed with stacked rows */
    -webkit-overflow-scrolling: touch;
  }

  .pnl-grid--2col {
    min-width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    display: block;
  }
  .pnl-grid--2col thead, .pnl-grid--2col tbody { display: block; width: 100%; }

  /* Sticky header: stays pinned to the viewport top while user scrolls
     the expense list, so they never lose track of which month is "base". */
  .pnl-grid--2col thead tr {
    display: grid;
    grid-template-columns: 1fr auto auto;
    column-gap: 14px;
    padding: 10px 14px;
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15,23,42,0.06);
    border-bottom: 2px solid #e2e8f0;
  }
  .pnl-grid--2col th {
    font-size: 11px;
    padding: 0;
    text-align: right;
    border: none;
    white-space: nowrap;
    font-weight: 700;
    color: #94a3b8;
    background: transparent;
  }
  .pnl2-th-lbl {
    text-align: left !important;
    position: static;
    background: transparent;
  }
  /* Hide the redundant compare-column header — compare month appears
     inline under each primary number instead. */
  .pnl2-th-cmp { display: none; }

  /* Each data row is a 2-row CSS grid so primary $ and compare $ can
     stack vertically in the same middle column while the delta pill
     spans both rows on the right. */
  .pnl-grid--2col tr {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "label pri delta"
      "label cmp delta";
    column-gap: 14px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0f0;
  }
  .pnl-grid--2col td {
    padding: 0;
    border: none;
    text-align: right;
    vertical-align: middle;
    min-width: 0;
  }

  .pnl2-td-lbl {
    grid-area: label;
    text-align: left !important;
    position: static;
    font-size: 14px;
    font-weight: 600;
    color: #1a2d3a;
    min-width: 0;
    max-width: none;
    word-wrap: break-word;
    align-self: center;
    background: transparent;
  }
  .pnl-grid--2col tr.indent .pnl2-td-lbl {
    padding-left: 14px;
    font-size: 13px;
    color: #64748b;
    font-weight: 400;
  }

  /* Primary (selected month) — bold + dark */
  .pnl2-cell--pri {
    grid-area: pri;
    align-self: end;
  }
  .pnl2-cell--pri .pnl2-dollar { font-size: 15px; font-weight: 700; color: #1a2d3a; }
  .pnl2-cell--pri .pnl2-pct-sub { font-size: 11px; margin-left: 5px; color: #94a3b8; }

  /* Compare month — smaller, muted, with "vs" context */
  .pnl2-cell--cmp {
    grid-area: cmp;
    align-self: start;
    opacity: 0.85;
  }
  .pnl2-cell--cmp::before {
    content: 'vs ';
    font-size: 10px;
    color: #94a3b8;
    margin-right: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
  }
  .pnl2-cell--cmp .pnl2-dollar { font-size: 12px; font-weight: 500; color: #94a3b8; }
  .pnl2-cell--cmp .pnl2-pct-sub { font-size: 10px; margin-left: 4px; color: #b8c0cc; }

  /* Delta pill spans both rows on the right */
  .pnl2-delta {
    grid-area: delta;
    align-self: center;
    min-width: 0;
    text-align: right;
  }
  .pnl2-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
  }
  .pnl2-pill-pct { font-size: 10px; font-weight: 600; }

  /* Category / subtotal rows keep their background, total row keeps dark */
  .pnl-grid--2col tr.category,
  .pnl-grid--2col tr.category .pnl2-td-lbl { background: #f6f8fb; }
  .pnl-grid--2col tr.subtotal,
  .pnl-grid--2col tr.subtotal .pnl2-td-lbl { background: #eef2f7; }
  .pnl-grid--2col tr.total,
  .pnl-grid--2col tr.total .pnl2-td-lbl {
    background: #1a2d3a;
    color: white;
    border-radius: 8px;
    margin-top: 4px;
  }
  .pnl-grid--2col tr.total .pnl2-cell--pri .pnl2-dollar,
  .pnl-grid--2col tr.total .pnl2-cell--cmp .pnl2-dollar { color: white; }
  .pnl-grid--2col tr.total .pnl2-cell--cmp .pnl2-dollar { color: rgba(255,255,255,0.7); }
  .pnl-grid--2col tr.total .pnl2-cell--cmp::before { color: rgba(255,255,255,0.5); }

  /* Hover highlight using grid-aware selectors */
  .pnl-grid--2col tr:hover:not(.total),
  .pnl-grid--2col tr:hover:not(.total) .pnl2-td-lbl { background: #eef2f7; }

  /* ── INTERACTIVE FEEDBACK ────────────────────────────────────────── */
  /* Add active/focus states for touch feedback */
  .fin-month-item:active,
  .fin-trend-btn:active,
  .fin-toggle button:active,
  .pnl-cmp-chip:active {
    background: rgba(0,0,0,0.05);
    transition: background 0.1s;
  }

  button:focus-visible {
    outline: 2px solid #FF8A1F;
    outline-offset: 2px;
  }

  /* ── P&L GRID: Old table styles ──────────────────────────────────── */
  .pnl-grid-scroll { overflow-x: auto; }
  .pnl-grid { font-size: 14px; }
  .pnl-grid th { font-size: 12px; padding: 10px 10px; }
  .pnl-grid td { font-size: 14px; padding: 13px 10px; }

  /* ── VARIANCE / CASH FLOW MOBILE ─────────────────────────────────── */
  .var-row-amt { color: #aaa; font-size: 14px; }
  .var-flow-row { font-size: 15px; padding: 12px 4px; }
  .var-flow-row.noi .var-noi-lbl { font-size: 13px; }
  .var-flow-row.noi .var-noi-vs { font-size: 14px; }
  .var-flow-row.noi .var-noi-change { font-size: 17px; }

  .cash-cell { padding: 14px 16px; }
  .cash-cell-lbl { font-size: 12px; }
  .cash-cell-val { font-size: 22px; }
  .cash-cell-sub { font-size: 13px; }
  .cash-flow-head { font-size: 13px; }
  .cash-flow-row { font-size: 15px; padding: 11px 4px; line-height: 1.4; }
  .cash-flow-row .lbl-sub { font-size: 13px; }

  .cash-cushion { padding: 14px 16px; }
  .cash-cushion .lbl-top { font-size: 15px; }
  .cash-cushion .lbl-sub { font-size: 13px; }
  .cash-cushion .val { font-size: 24px; }

  .cf-drivers-title { font-size: 12px; }
  .cf-drv-label { font-size: 14px; }
  .cf-drv-val { font-size: 14px; }
  .cf-drv-chg { font-size: 14px; }

  .be-stat-label { font-size: 12px; }
  .be-stat-value { font-size: 16px; }
  .be-headline { font-size: 20px; }

  .fin-alert { padding: 16px; }
  .fin-alert-msg { font-size: 15px; }
  .fin-alert-range { font-size: 13px; }
  .fin-no-alerts { font-size: 15px; }

  /* ── MODAL BOTTOM SHEET: Improve styling ─────────────────────────── */
  .modal {
    border-radius: 20px 20px 0 0;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-header { padding: 16px; font-size: 16px; font-weight: 700; }
  .modal-title { font-size: 16px; }
  .modal-body { padding: 12px 16px; }
  .modal-table { font-size: 13px; }
  .modal-table th { font-size: 11px; padding: 10px 8px; }
  .modal-table td { font-size: 13px; padding: 10px 8px; }

  /* ── EXPENSE DETAIL SHEET: Mobile improvements ──────────────────────
     (Sheet-level overflow is set at the base rule now — `overflow:
     hidden` on the sheet so children scroll independently.) */
  .exp-sheet-header { padding: 8px 18px 16px; }
  .exp-sheet-title { font-size: 16px; font-weight: 700; }
  .exp-sheet-sub { font-size: 13px; color: #888; }
  .exp-sheet-body { padding: 16px 18px; }
  .exp-sheet-footer { font-size: 13px; }

  .exp-txn-row { padding: 12px; border-radius: 8px; margin-bottom: 10px; }
  .exp-txn-date { font-size: 12px; }
  .exp-txn-desc { white-space: normal; overflow: visible; text-overflow: clip; font-size: 14px; }
  .exp-txn-amt { font-size: 15px; }

}

/* ── EXTRA SMALL PHONES (< 414px): Further optimization ──────────────────── */
@media (max-width: 413px) {

  .fin-month-title { font-size: 22px; }
  .fin-card-sub { font-size: 15px; }
  .fin-pct-tile-value { font-size: 32px; }
  .fin-chart-title { font-size: 17px; }

  /* Chart heights - donut still large, others more compact on ultra-small phones */
  .fin-chart-wrap { height: 220px !important; }  /* bar charts at 220px on ultra-small for space efficiency */
  #finTrendCard .fin-chart-wrap { height: 220px; }
  #finRevCard .fin-chart-wrap { height: 220px; }
  #finCashFlowCard .fin-chart-wrap { height: 220px; }
  #finRow2 .fin-chart-wrap { height: 400px; }  /* donut at 400px on ultra-small (from 350px) but still large for visibility */

  /* Reduce padding on very small screens */
  .fin-card { padding: 16px; }
  .fin-chart-card { padding: 14px; }
  .fin-pct-tile { padding: 14px; }

  /* Tighter P&L grid rows on the very smallest screens */
  .pnl-grid--2col tr { padding: 9px 10px; column-gap: 10px; }
  .pnl-grid--2col thead tr { padding: 9px 10px; }
  .pnl2-cell--pri .pnl2-dollar { font-size: 14px; }
  .pnl2-cell--cmp .pnl2-dollar { font-size: 11px; }

}