/* Eclipse analytics dashboard — V2.2 design system (mockup-approved
   2026-06-11). Single stylesheet, mobile-first. */
:root {
  --ink:#1f2430; --muted:#676e7e; --line:#e6e9f0; --bg:#f6f7fb;
  --card:#ffffff; --brand1:#5b5bd6; --brand2:#7c5cff;
  --net:#1d4ed8; --gross:#d97706; --good:#0ca678;
  --amber-bg:#fff3cd; --amber-ink:#8a5d00; --radius:14px;
  --shadow:0 1px 2px rgba(31,36,48,.06),0 8px 24px rgba(31,36,48,.07);
  --shadow-hover:0 2px 4px rgba(31,36,48,.08),
                 0 14px 36px rgba(31,36,48,.13);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Helvetica, Arial, sans-serif; }
header.site { position: fixed; top: 0; left: 0; z-index: 20;
  width: 210px; height: 100vh; overflow-y: auto;
  background: #fff; border-right: 1px solid var(--line);
  padding: .9rem .8rem; display: flex; flex-direction: column;
  transition: transform .2s ease; }
.brand { font-weight: 800; letter-spacing: .01em; font-size: 1.05rem;
  background: linear-gradient(90deg, var(--brand1), var(--brand2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; }
nav { display: flex; flex-direction: column; gap: .12rem; flex: 1 1 auto; overflow-y: auto; margin-top: .35rem; }
nav a { display: block; padding: .5rem .7rem; border-radius: 8px;
  text-decoration: none; color: var(--muted); white-space: nowrap;
  font-size: .92rem; border-left: 3px solid transparent;
  transition: background .15s, color .15s, border-color .15s; }
nav a:hover { background: #eef0fb; color: var(--ink); }
nav a.on { background: #eef0fb; color: var(--ink); font-weight: 700; border-left-color: var(--brand1); }
nav a.exec { border: 1px solid var(--brand1); color: var(--brand1);
  font-weight: 600; margin-top: .4rem; }
nav a.exec:hover, nav a.exec.on { background: var(--brand1);
  color: #fff; }
.asof { margin-top: .4rem; font-size: .8rem; color: var(--muted); }
.asof.amber { background: var(--amber-bg); color: var(--amber-ink);
  padding: .25rem .5rem; border-radius: .4rem;
  display: inline-block; }
main { padding: 1rem; max-width: 68rem; margin: 0 auto; }
.hero { background: linear-gradient(120deg, var(--brand1),
  var(--brand2)); border-radius: var(--radius); color: #fff;
  padding: 1.1rem 1.3rem; margin-bottom: 1rem;
  box-shadow: var(--shadow); }
.hero h1 { margin: 0; font-size: 1.35rem; }
.hero .sub { color: #eef0ff; font-size: .85rem; margin-top: .15rem;
  text-shadow: 0 1px 2px rgba(31, 36, 48, .25); }
/* pilot-gated "View my commissions" deep-link button (sits on the hero) */
.hero-cta { display: inline-block; margin-top: .7rem;
  background: rgba(255, 255, 255, .16); color: #fff; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px;
  padding: .35rem .9rem; font-size: .85rem; font-weight: 600;
  transition: all .15s; }
.hero-cta:hover { background: #fff; color: var(--brand1);
  border-color: #fff; }
.cards { display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }
.card { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.1rem;
  box-shadow: var(--shadow); min-width: 0;   /* let grid cards shrink (else min-width:auto overflows on long $ values) */
  transition: transform .18s, box-shadow .18s; }
.card:hover { transform: translateY(-3px);
  box-shadow: var(--shadow-hover); }
/* DASH V5.6 rev-2: the Lost callout card — prominent (Lost holds the
   large majority of all job value; flagged so it isn't read as pipeline). */
.card.callout { border-color: var(--amber-ink, #92400e);
  border-width: 2px; background: var(--amber-bg, #fffbeb); }
.kpi-label, .card-label { font-size: .74rem;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); font-weight: 700; }
.kpi-big { font-size: clamp(1.5rem, 1rem + 2.4vw, 2.1rem); font-weight: 800;
  color: var(--net); margin: .1rem 0 0; font-variant-numeric: tabular-nums;
  line-height: 1.1; overflow-wrap: anywhere; }
/* DASH Phase 2.4 — My Metrics scorecard: up to 6 cards per row makes each
   card narrow, so a 6-figure $ (e.g. Ike's $1.78M) would overflow at the
   global clamp. Scoped tighter clamp keeps EXACT $ (no abbreviation) and
   scales down to fit; nowrap keeps the figure on one line. */
.scorecard .kpi-big { font-size: clamp(1rem, .55rem + 1.9vw, 1.55rem);
  white-space: nowrap; overflow-wrap: normal; }
.kpi-side { font-size: 1.05rem; font-weight: 700;
  color: var(--gross); font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: .76rem; color: var(--muted); }
.bignum { font-size: 2rem; font-weight: 800; color: var(--ink);
  margin: .1rem 0 0; font-variant-numeric: tabular-nums; }
.panel { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem 1.2rem;
  margin-top: 1rem; box-shadow: var(--shadow);
  transition: box-shadow .18s; }
.panel:hover { box-shadow: var(--shadow-hover); }
.panel h2 { margin: 0 0 .2rem; font-size: 1.08rem; display: flex;
  align-items: center; gap: .5rem; flex-wrap: wrap; }
.dot { width: .65rem; height: .65rem; border-radius: 50%;
  display: inline-block; flex: none; }
.src, .sub { font-size: .78rem; color: var(--muted);
  margin: 0 0 .7rem; }
.tag { font-size: .72rem; font-weight: 600; color: var(--brand1);
  border: 1px solid #d8d9f8; background: #f3f3fe;
  border-radius: .45rem; padding: .12rem .45rem;
  vertical-align: middle; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap;
  margin: .2rem 0 .9rem; align-items: center; }
.chip { border: 1px solid var(--line); background: #fff;
  border-radius: 999px; padding: .3rem .8rem; font-size: .85rem;
  color: var(--muted); text-decoration: none; cursor: pointer;
  transition: all .15s; }
.chip:hover { border-color: var(--brand1); color: var(--brand1); }
.chip.on { background: var(--brand1); border-color: var(--brand1);
  color: #fff; }
.rangeform { display: inline-flex; gap: .3rem; align-items: center;
  font-size: .8rem; color: var(--muted); }
.rangeform input { border: 1px dashed var(--line);
  border-radius: .5rem; padding: .25rem .4rem; font-size: .8rem; }
.rangeform button { border: 1px solid var(--brand1);
  background: #fff; color: var(--brand1); border-radius: 999px;
  padding: .25rem .7rem; font-size: .8rem; cursor: pointer; }
.picker select { font-size: .95rem; padding: .3rem .5rem;
  border-radius: .45rem; border: 1px solid var(--line); }
.chart-wrap { position: relative; height: 17rem; }
.chart-wrap.tall { height: 23rem; }
/* DASH V5.6: the whole-board pipeline chart is a horizontal bar per
   stage (up to ~27) — it needs the vertical room to stay legible. */
.chart-wrap.pipe { height: 46rem; }
.range-wrap { position: relative; height: 7rem; margin-top: .4rem; }
table { width: 100%; border-collapse: collapse; font-size: .88rem;
  margin-top: .8rem; }
th, td { text-align: right; padding: .45rem .55rem;
  border-bottom: 1px solid var(--line); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
thead th { font-size: .73rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--brand1); }
th.sortable::after { content: " ↕"; opacity: .35; }
th.sortable[data-dir="asc"]::after { content: " ↑"; opacity: 1;
  color: var(--brand1); }
th.sortable[data-dir="desc"]::after { content: " ↓"; opacity: 1;
  color: var(--brand1); }
tbody tr { transition: background .12s; }
tbody tr:hover { background: #f6f7ff; }
tr.future td { color: var(--muted); }
tr.total td { font-weight: 700; border-top: 2px solid var(--line); }
.note { font-size: .78rem; color: var(--muted); margin: .7rem 0 0; }
.scroll-x { overflow-x: auto; }
/* DASH V5.1 / ladderfix — Zoho profit-ladder legibility. Headline
   (full-width, 7 cols): wrap the HEADERS so they don't force the table
   wide, but keep numeric VALUES on one line. Per-rep / per-location
   sub-tables (squeezed in the two-up .cols): never break a number or
   header mid-token — nowrap + tabular-nums, each in its own .scroll-x
   so it scrolls (and stacks at phone width) instead of wrapping. No
   figures change. */
.ladder-table, .ladder-sub { font-size: .82rem; }
.ladder-table th { white-space: normal; word-break: break-word;
  line-height: 1.15; vertical-align: bottom; }
.ladder-table td,
.ladder-sub th, .ladder-sub td { white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.heat .cell { background: rgba(91, 91, 214,
  calc(var(--w, 0) * 0.55)); }
.heat .cell.empty { color: var(--line); }
.heat .cell .n { display: block; font-size: .7rem;
  color: var(--muted); }
.heat .rowhead { font-weight: 600; }
.heat .rowtot, .heat .coltot { font-weight: 700; }
.cols { display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.sect { font-size: .78rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); margin-top: 1.1rem;
  font-weight: 700; }
.forecast-list { list-style: none; margin: .5rem 0 0; padding: 0; }
.forecast-list li { position: relative;
  padding: .45rem 0 .45rem 1.4rem; font-size: .95rem; }
.forecast-list li::before { content: "\25CF"; position: absolute;
  left: .2rem; }
.forecast-list li.flat::before { color: var(--net); }
.forecast-list li.seasonal::before { color: var(--gross); }
.forecast-list .why { display: block; font-size: .78rem;
  color: var(--muted); margin-top: .1rem; }
.amberbox { background: var(--amber-bg); color: var(--amber-ink);
  border-radius: 10px; padding: .6rem .8rem; font-size: .88rem;
  margin-top: .7rem; }
.okbox { background: #e6f7f1; color: #086648; border-radius: 10px;
  padding: .6rem .8rem; font-size: .88rem; margin-top: .7rem; }
details { margin-top: .8rem; }
details summary { cursor: pointer; font-size: .9rem;
  color: var(--brand1); font-weight: 600; }
.linklist { display: flex; flex-wrap: wrap; gap: .4rem;
  margin-top: .5rem; }
.linklist a { border: 1px solid var(--line); border-radius: 999px;
  padding: .25rem .7rem; font-size: .84rem; text-decoration: none;
  color: var(--ink); transition: all .15s; }
.linklist a:hover { border-color: var(--brand1);
  color: var(--brand1); }
.center { text-align: center; }
.crumb { font-size: .85rem; margin-bottom: .4rem; }
.crumb a { color: var(--brand1); text-decoration: none; }
/* DASH V5.2 — hygiene "see all N" drill links */
.drilllink { color: var(--brand1); font-weight: 700;
  text-decoration: none; }
.drilllink:hover { text-decoration: underline; }
footer { text-align: center; font-size: .75rem; color: var(--muted);
  padding: 1.4rem 1rem 2rem; }
@media (max-width: 480px) {
  /* .kpi-big sizing handled by its clamp() — no fixed override here */
  .chart-wrap { height: 13rem; }
  .chart-wrap.tall { height: 17rem; }
  .chart-wrap.pipe { height: 40rem; }
}

/* DASH V5.5 projection totals (single-month daily view) */
.proj-totals { display: flex; gap: .9rem; margin-top: .7rem; flex-wrap: wrap; }
.proj-card { flex: 1 1 12rem; border: 1px solid var(--line, #e5e7eb);
  border-radius: var(--radius); padding: .6rem .8rem; background: #fafafe; }
.proj-method { font-size: .78rem; font-weight: 600; color: var(--muted);
  display: flex; align-items: center; gap: .4rem; }
.proj-swatch { width: .7rem; height: .7rem; border-radius: 2px; display: inline-block; }
.proj-amt { font-size: 1.5rem; font-weight: 800; color: var(--net); }
.proj-why { font-size: .74rem; color: var(--muted); }

/* Standalone login page (replaces Caddy basic_auth popup). */
.login-body { display: flex; min-height: 100vh; margin: 0; }
.login-wrap { margin: auto; padding: 1.5rem; width: 100%; max-width: 22rem;
  text-align: center; }
.login-card { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.6rem 1.4rem; text-align: left; }
.login-brand { font-size: 1.4rem; }
.login-sub { color: var(--muted); font-size: .9rem; margin: .3rem 0 1.1rem; }
.login-error { background: var(--amber-bg); color: var(--amber-ink);
  border-radius: .5rem; padding: .5rem .7rem; font-size: .85rem;
  margin: 0 0 .9rem; }
.login-label { display: block; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  margin-bottom: .35rem; }
.login-input { width: 100%; padding: .65rem .8rem; font-size: 1rem;
  border: 1px solid var(--line); border-radius: .6rem;
  background: var(--bg); color: var(--ink); }
.login-input:focus { outline: 2px solid var(--brand1); outline-offset: 1px; }
.login-btn { width: 100%; margin-top: 1rem; padding: .7rem 1rem;
  font-size: 1rem; font-weight: 700; color: #fff; cursor: pointer;
  border: 0; border-radius: .6rem;
  background: linear-gradient(90deg, var(--brand1), var(--brand2)); }
.login-google { display:block; width:100%; box-sizing:border-box; margin-bottom:.4rem;
  padding:.7rem 1rem; font-size:1rem; font-weight:700; text-align:center;
  color: var(--ink); background: var(--card); border:1px solid var(--line);
  border-radius:.6rem; text-decoration:none; }
.login-google:hover { background:#eef0fb; }
.login-or { text-align:center; color: var(--muted); font-size:.78rem; margin:.5rem 0; }
.nav-email { display:block; padding:.4rem .7rem; color: var(--muted); font-size:.72rem;
  overflow:hidden; text-overflow:ellipsis; }
.login-foot { color: var(--muted); font-size: .75rem; margin-top: 1rem; }
/* pilot-gated commission deep-link, pinned to the bottom just ABOVE Log out
   (it carries margin-top:auto so logout's own auto-margin becomes a no-op and
   the two sit flush at the bottom; brand color + ↗ mark it as an out-link) */
nav a.commission-link { margin-top: auto; color: var(--brand1); font-weight: 600; }
nav a.commission-link + a.logout { margin-top: 0; }
nav a.logout { margin-top: auto; color: var(--muted); }

/* DASH V5.8 Goals tab — per-entity goal cards (CSS/inline-SVG bars only,
   no per-card Chart.js). Reuses the shared tokens above. */
.gl-secthead { display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem; flex-wrap:wrap; margin:1.4rem 0 .6rem; }
.gl-secthead h2 { margin:0; }
.gl-aggr { font-size:.82rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.gl-aggr strong { color:var(--ink); }
.gl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:.7rem; }
.gl-card { border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg); padding:.6rem .7rem; min-width:0;
  display:flex; flex-direction:column; gap:.4rem; }
.gl-card.unset { border-style:dashed; }
.gl-top { display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.gl-name { font-weight:700; font-size:.92rem; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.gl-chip { font-size:.7rem; font-weight:700; padding:.12rem .45rem; border-radius:999px;
  white-space:nowrap; }
.gl-chip.good { background:color-mix(in srgb,var(--good) 18%,transparent); color:var(--good); }
.gl-chip.warn { background:var(--amber-bg); color:var(--amber-ink); }
.gl-amount { font-size:1.05rem; font-weight:700; font-variant-numeric:tabular-nums; }
.gl-amount .gl-of { font-size:.8rem; font-weight:500; color:var(--muted); }
.gl-amount .gl-pct { font-size:.78rem; font-weight:600; color:var(--muted); margin-left:.25rem; }
.gl-bar { position:relative; height:12px; border-radius:6px; background:var(--line);
  overflow:hidden; }
.gl-fill { position:absolute; left:0; top:0; bottom:0; border-radius:6px; }
.gl-fill.net { background:var(--net); }
.gl-fill.good { background:var(--good); }
.gl-fill.warn { background:var(--gross); }
.gl-fb { position:absolute; top:0; bottom:0; background:repeating-linear-gradient(
  45deg, color-mix(in srgb,var(--gross) 55%,transparent),
  color-mix(in srgb,var(--gross) 55%,transparent) 4px,
  transparent 4px, transparent 8px); border-radius:0 6px 6px 0; }
.gl-marker { position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--ink);
  opacity:.65; }
.gl-fbnote { font-size:.68rem; color:var(--muted); }
.gl-need { display:flex; gap:.8rem; font-size:.72rem; color:var(--muted);
  font-variant-numeric:tabular-nums; flex-wrap:wrap; }
.gl-need b { color:var(--ink); font-weight:700; }
.gl-set { display:flex; gap:.4rem; margin-top:.1rem; }
.gl-set input { flex:1 1 80px; min-width:0; padding:.32rem .45rem; font-size:.85rem;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--bg);
  color:var(--ink); font-variant-numeric:tabular-nums; }
.gl-set button { padding:.32rem .6rem; font-size:.8rem; font-weight:700; color:#fff;
  border:0; border-radius:var(--radius); background:var(--brand1); cursor:pointer; }
.gl-residual { font-size:.75rem; color:var(--muted); margin:.5rem 0 0;
  font-variant-numeric:tabular-nums; }
.gl-note { font-size:.78rem; color:var(--muted); margin:.3rem 0 .8rem; }
@media(max-width:520px){ .gl-grid{ grid-template-columns:1fr; } }

/* Weekly-goals sprint (2026-07-13) — the compact "This week" block that
   sits ABOVE the monthly block on rep goal cards (email, /me, /exec/goals,
   manager view). Same shared tokens; a slimmer bar so the weekly row reads
   as the companion of the monthly block, plus the auto/custom tag and the
   exec override control. */
.gl-wk-head { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.gl-wk-label { font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted); }
.gl-tag { font-size:.64rem; font-weight:600; padding:.08rem .4rem;
  border-radius:999px; background:var(--line); color:var(--muted);
  white-space:nowrap; }
.gl-tag.custom { background:color-mix(in srgb,var(--brand1) 16%,transparent);
  color:var(--brand1); }
.gl-bar.wk { height:8px; border-radius:4px; }
.gl-amount.wk { font-size:.92rem; }
.gl-divider { height:1px; background:var(--line); margin:.15rem 0; }
.gl-wkset { align-items:center; }
.gl-wkreset { font-size:.7rem; color:var(--muted); background:none; border:0;
  cursor:pointer; text-decoration:underline; padding:.1rem .2rem;
  white-space:nowrap; font-weight:500; }
.gl-wkreset:hover { color:var(--ink); }

/* DASH V5.8 tweak — hide/show control + hidden-row styling */
.gl-hide { margin-left:auto; }
.gl-hide button { background:none; border:0; color:var(--muted); cursor:pointer;
  font-size:.9rem; line-height:1; padding:.1rem .25rem; border-radius:4px; }
.gl-hide button:hover { color:var(--ink); background:var(--line); }
.gl-card.hiddenrow { opacity:.72; border-style:dashed; }


/* DASH sidebar conversion (2026-06-18) — pairs with header.site above.
   Content offset + mobile hamburger. body.app marks pages rendering the
   shared sidebar; login/snapshot views do NOT get the class, so their
   layout is untouched. Presentation only — routes/auth/realm unchanged. */
body.app { padding-left: 210px; }
.navsep { display: block; height: 1px; background: var(--line);
  margin: .5rem .35rem; font-size: 0; line-height: 0; color: transparent; }
.navtoggle { display: none; }
.navback { display: none; }
@media (max-width: 767px) {
  body.app { padding-left: 0; }
  body.app main { padding-top: 3.4rem; }
  header.site { transform: translateX(-100%); box-shadow: var(--shadow-hover); }
  body.navopen header.site { transform: translateX(0); }
  .navtoggle { display: flex; align-items: center; justify-content: center;
    position: fixed; top: .6rem; left: .6rem; z-index: 30;
    width: 2.4rem; height: 2.4rem; font-size: 1.3rem; line-height: 1;
    border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
    background: #fff; color: var(--ink); box-shadow: var(--shadow); }
  body.navopen .navback { display: block; position: fixed; inset: 0;
    z-index: 15; background: rgba(31,36,48,.45); }
  header.site .brand { padding-left: 2.6rem; }
}

/* --- SalesRabbit Canvass Activity: summary emphasis + per-state cards ---
   Quiet-premium: hierarchy via a faint brand-tinted sub-panel, a top-accent +
   light wash on the always-live "Today" cards, and a gently pulsing green
   "Live" pill (amber, motionless, "delayed" when the as-of is >1 day stale).
   "This Week" cards stay plain/quiet. Reuses --brand1 / --good / --radius. */
.sr-summary { background: linear-gradient(180deg, #fafaff, var(--card));
  border: 1px solid #e7e7fb; border-radius: var(--radius);
  padding: .85rem .9rem 1rem; margin: 0 0 .2rem; }
.card.sr-today { border-top: 3px solid var(--brand1);
  background: linear-gradient(180deg, #fbfbff, var(--card)); }
.sr-live { display: inline-flex; align-items: center; gap: .25rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--good);
  border: 1px solid #c3ece0; background: #effaf5; border-radius: 999px;
  padding: .02rem .42rem; vertical-align: middle;
  animation: sr-live-pulse 2.4s ease-in-out infinite; }
@keyframes sr-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .58; } }
.sr-live-stale { color: var(--amber-ink); border-color: #f0dca8;
  background: var(--amber-bg); animation: none; }
@media (prefers-reduced-motion: reduce) { .sr-live { animation: none; } }
.sr-state-head { margin: .95rem 0 .4rem; font-size: .82rem; font-weight: 700;
  color: var(--ink); display: flex; align-items: center; gap: .45rem; }
.sr-state-group { margin: 0 0 .55rem; }
.sr-state-label { font-size: .76rem; font-weight: 700; color: var(--brand1);
  letter-spacing: .01em; margin: .25rem 0 .3rem; }


/* ===== UX Sprint C+D (2026-07-17) — presentation-only ===== */
/* C-3 grouped nav headers */
.navgroup { font-size:.62rem; letter-spacing:.09em; text-transform:uppercase;
  font-weight:700; color:var(--muted); opacity:.7; margin:.6rem .2rem .1rem .2rem; }
.navgroup:first-of-type { margin-top:.1rem; }
/* C-1.2 divergent-window emphasis */
.tag.winmismatch { background: var(--amber-bg); color: var(--amber-ink); }
/* D-10 sidebar footer: nav scrolls internally so the as-of chip never overlaps nav */
header.site nav { min-height: 0; }
.asof { flex: 0 0 auto; }
/* D-2 big stat numbers never wrap mid-number (font already clamps to shrink) */
.kpi-big, .bignum { white-space: nowrap; }
/* D-3 matrix: sticky first column (lead source) + sticky header row */
.heat thead th { position: sticky; top: 0; z-index: 3; background: var(--card); }
.heat th:first-child, .heat td:first-child { position: sticky; left: 0; z-index: 2;
  background: var(--card); }
.heat thead th:first-child { z-index: 4; }
/* D-7 goal-card rep names wrap in full instead of truncating; labeled inputs */
.gl-name { white-space: normal; overflow: visible; text-overflow: clip; }
.gl-inlabel { font-size:.68rem; color:var(--muted); font-weight:600;
  margin-right:.25rem; align-self:center; white-space:nowrap; }
/* D-6c recipient-group chips + recipient textarea match the app controls */
.rpt-groups label { display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .5rem; margin:.15rem .3rem .15rem 0; border:1px solid var(--line);
  border-radius:8px; font-size:.85rem; background:var(--bg); cursor:pointer; }
.rpt-send textarea, .sch-edit textarea { border:1px solid var(--line);
  border-radius:8px; padding:.5rem .6rem; font:inherit; box-sizing:border-box; }
/* ===== end UX Sprint C+D ===== */