/* ==========================================================================
   crm-mock.css
   The "after" pane of the Before / After slider: a static depiction of a
   modernised CRM built on top of an existing FileMaker solution.

   The palette here is deliberately NOT the FMHyper brand. It belongs to the
   customer's product, not to ours — a deep slate-navy shell with one cobalt
   accent, so the pane reads as a screenshot of somebody else's software.

   Everything is scoped under .cmp-pane.after. No tokens leak into the page.
   No animation, no focusable elements, no JS.

   Sizing note: the depiction is drawn against a 1216 x 684 canvas (the natural
   size of .compare on a 1280px layout) and every dimension is a multiple of
   --px, which tracks the pane width. The composition therefore scales as one
   piece and can never reflow, overflow, or scroll. Padding is expressed in em
   against each element's own type size so it scales with the same rhythm.
   ========================================================================== */

.cmp-pane.after {
  --px: 1px;

  /* surfaces */
  --c-app:    #0a0d13;   /* rails, top bar   */
  --c-canvas: #0e1218;   /* work area        */
  --c-card:   #151a23;   /* cards            */
  --c-elev:   #1b212c;   /* chips, segments  */
  --c-sel:    #1c2942;   /* selected row     */
  --c-row:    #161c26;   /* zebra            */

  /* hairlines */
  --c-line:   #2b3444;
  --c-line-2: #3a4457;
  --c-line-3: #39445a;

  /* text */
  --c-t1: #edf0f5;
  --c-t2: #b7c0ce;
  --c-t3: #8a94a6;

  /* one accent; two steps — 500 for data marks, 600 under white text */
  --c-acc:       #3e6ff3;
  --c-acc-solid: #2f5ae0;
  --c-acc-on:    #f3f7ff;
  --c-acc-t:     #8fb0ff;
  --c-acc-bg:    #16233f;

  /* semantics — used only where the data demands it */
  --c-pos:     #57d69b;
  --c-pos-bg:  #122a22;
  --c-warn:    #f0be5a;
  --c-warn-bg: #2a2213;
  --c-neg:     #f58179;
  --c-mute-bar:#59677f;

  /* radii — one scale */
  --r1: calc(3 * var(--px));
  --r2: calc(5 * var(--px));
  --r3: calc(8 * var(--px));

  /* spacing — 4px rhythm, 2px sub-step */
  --sp2:  calc(2 * var(--px));
  --sp4:  calc(4 * var(--px));
  --sp6:  calc(6 * var(--px));
  --sp8:  calc(8 * var(--px));
  --sp10: calc(10 * var(--px));
  --sp12: calc(12 * var(--px));

  /* type — one scale */
  --f-xs:  calc(9 * var(--px));
  --f-sm:  calc(10 * var(--px));
  --f-md:  calc(11 * var(--px));
  --f-lg:  calc(12.5 * var(--px));
  --f-xl:  calc(15 * var(--px));
  --f-2xl: calc(19 * var(--px));
  --f-3xl: calc(24 * var(--px));

  --plot-h: calc(90 * var(--px));
  --hair: 1px;
}

@supports (container-type: inline-size) {
  .cmp-pane.after { container-type: inline-size; --px: 0.0822368cqw; }
}

/* ---------- root ---------- */
.mock-crm {
  background: var(--c-canvas);
  color: var(--c-t1);
  overflow: hidden;
}
.crm {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: calc(180 * var(--px)) minmax(0, 1fr);
  font-family: var(--sans);
  font-size: var(--f-md);
  line-height: 1.3;
  letter-spacing: -0.004em;
  font-weight: 500;
  /* The pane is parallaxed by the slider; damp it back to a hint so the right
     edge of the composition is never clipped while it is being revealed. */
  transform: none;
}
.reduced .cmp-pane.after .crm { transform: none; }

.crm svg { display: block; }
.crm .i    { width: calc(14 * var(--px)); height: calc(14 * var(--px)); flex: none; }
.crm .i-sm { width: calc(12 * var(--px)); height: calc(12 * var(--px)); flex: none; }
.crm .i-xs { width: calc(10 * var(--px)); height: calc(10 * var(--px)); flex: none; }
.crm .num  { font-variant-numeric: tabular-nums; }

/* ---------- shared atoms ---------- */
.crm-eyebrow {
  font-size: var(--f-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-t3);
  font-weight: 600;
}
.crm-av {
  width: calc(20 * var(--px));
  height: calc(20 * var(--px));
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: var(--f-xs);
  font-weight: 700;
  letter-spacing: 0.01em;
  flex: none;
}
.crm-av.sm { width: calc(17 * var(--px)); height: calc(17 * var(--px)); font-size: calc(8 * var(--px)); }
.crm-av.a1 { background: #2f4a7a; color: #dce6f8; }
.crm-av.a2 { background: #3a4a5c; color: #e3eaf2; }
.crm-av.a3 { background: #1f5148; color: #d5f0e6; }
.crm-av.a4 { background: #5a4326; color: #f6e4cc; }
.crm-av.a5 { background: #54303a; color: #f7dde2; }
.crm-av.a6 { background: #384a2e; color: #e0efd2; }
.crm-av.more { background: var(--c-elev); color: var(--c-t2); font-weight: 600; }

.crm-logo {
  width: calc(19 * var(--px));
  height: calc(19 * var(--px));
  border-radius: var(--r1);
  display: grid;
  place-items: center;
  font-size: calc(8.5 * var(--px));
  font-weight: 700;
  flex: none;
}
.crm-logo.l1 { background: #2f4a7a; color: #dce6f8; }
.crm-logo.l2 { background: #54303a; color: #f7dde2; }
.crm-logo.l3 { background: #1f5148; color: #d5f0e6; }
.crm-logo.l4 { background: #3a4a5c; color: #e3eaf2; }
.crm-logo.l5 { background: #5a4326; color: #f6e4cc; }
.crm-logo.l6 { background: #384a2e; color: #e0efd2; }

.crm-chip {
  display: flex;
  align-items: center;
  gap: var(--sp6);
  font-size: var(--f-sm);
  padding: 0.65em 0.8em;
  border: var(--hair) solid var(--c-line-2);
  border-radius: var(--r2);
  background: var(--c-elev);
  color: var(--c-t2);
  font-weight: 500;
  white-space: nowrap;
}
.crm-chip .i-sm, .crm-chip .i-xs { color: var(--c-t3); }
.crm-kbd {
  font-size: calc(8.5 * var(--px));
  padding: 0.12em 0.47em;
  border: var(--hair) solid var(--c-line-2);
  border-radius: var(--r1);
  color: var(--c-t3);
  font-weight: 600;
  line-height: 1.35;
}
.crm-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp6);
  font-size: var(--f-xs);
  padding: 0.4em 0.89em;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.crm-pill i { width: calc(5 * var(--px)); height: calc(5 * var(--px)); border-radius: 999px; background: currentColor; flex: none; }
.crm-pill.s-acc  { background: var(--c-acc-bg);  color: var(--c-acc-t); }
.crm-pill.s-pos  { background: var(--c-pos-bg);  color: var(--c-pos); }
.crm-pill.s-warn { background: var(--c-warn-bg); color: var(--c-warn); }
.crm-pill.s-neu  { background: var(--c-elev);    color: var(--c-t2); }
.crm-pill.s-mute { background: transparent; color: var(--c-t3); border: var(--hair) solid var(--c-line-2); }

.crm-delta { display: inline-flex; align-items: center; gap: calc(1 * var(--px)); font-size: var(--f-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.crm-delta.pos { color: var(--c-pos); }
.crm-delta.neg { color: var(--c-neg); }

/* ==========================================================================
   Left rail
   ========================================================================== */
.crm-rail {
  background: var(--c-app);
  border-right: var(--hair) solid var(--c-line);
  font-size: var(--f-md);
  padding: 1.091em 0.909em;
  display: flex;
  flex-direction: column;
  gap: var(--sp10);
  min-height: 0;
  overflow: hidden;
}
.crm-ws {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp8);
  font-size: var(--f-md);
  padding: 0.364em 0.364em 0.909em;
  border-bottom: var(--hair) solid var(--c-line);
}
.crm-ws-tile {
  width: calc(24 * var(--px));
  height: calc(24 * var(--px));
  border-radius: var(--r2);
  background: var(--c-acc-solid);
  color: var(--c-acc-on);
  display: grid;
  place-items: center;
  font-size: var(--f-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.crm-ws-txt { display: grid; gap: calc(1 * var(--px)); min-width: 0; }
.crm-ws-name { font-size: var(--f-md); font-weight: 600; color: var(--c-t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-ws-sub { font-size: var(--f-xs); color: var(--c-t3); }
.crm-ws > svg { color: var(--c-t3); }

.crm-qs {
  display: flex;
  align-items: center;
  gap: var(--sp6);
  font-size: var(--f-sm);
  padding: 0.7em 0.8em;
  border: var(--hair) solid var(--c-line);
  border-radius: var(--r2);
  background: var(--c-canvas);
  color: var(--c-t3);
}
.crm-qs .crm-kbd { margin-left: auto; }

.crm-navgroup { display: grid; gap: var(--sp2); }
.crm-navlabel {
  font-size: var(--f-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-t3);
  font-weight: 600;
  padding: 0.444em 0.889em;
}
.crm-nav {
  display: flex;
  align-items: center;
  gap: var(--sp8);
  font-size: var(--f-md);
  padding: 0.455em 0.727em;
  border-radius: var(--r2);
  color: var(--c-t2);
  font-weight: 500;
}
.crm-nav > svg { color: var(--c-t3); }
.crm-nav.is-on { background: var(--c-elev); color: var(--c-t1); font-weight: 600; }
.crm-nav.is-on > svg { color: var(--c-acc-t); }
.crm-nav-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-count {
  margin-left: auto;
  font-size: var(--f-xs);
  font-weight: 600;
  color: var(--c-t3);
  font-variant-numeric: tabular-nums;
}
.crm-count.hot { color: var(--c-warn); }
.crm-vdot { width: calc(7 * var(--px)); height: calc(7 * var(--px)); border-radius: calc(2 * var(--px)); flex: none; margin: 0 calc(3.5 * var(--px)); }
.crm-vdot.v1 { background: #5b8def; }
.crm-vdot.v2 { background: #57d69b; }
.crm-vdot.v3 { background: #d98a3f; }

.crm-rail-sp { flex: 1 1 auto; min-height: var(--sp8); }

.crm-sync {
  display: flex;
  align-items: center;
  gap: var(--sp6);
  font-size: var(--f-xs);
  padding: 0.667em 0.889em;
  color: var(--c-t3);
  border-top: var(--hair) solid var(--c-line);
}
.crm-sync-dot { width: calc(6 * var(--px)); height: calc(6 * var(--px)); border-radius: 999px; background: var(--c-pos); flex: none; }
.crm-sync-n { margin-left: auto; font-variant-numeric: tabular-nums; }

.crm-me {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp8);
  font-size: var(--f-md);
  padding: 0.364em;
}
.crm-me-txt { display: grid; gap: calc(1 * var(--px)); min-width: 0; }
.crm-me-name { font-size: var(--f-sm); font-weight: 600; color: var(--c-t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-me-role { font-size: var(--f-xs); color: var(--c-t3); }
.crm-me > svg { color: var(--c-t3); }

/* ==========================================================================
   Body shell
   ========================================================================== */
.crm-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(252 * var(--px));
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "top top" "main side";
  min-width: 0;
  min-height: 0;
}

/* ---------- top bar ---------- */
.crm-top {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: var(--sp10);
  font-size: var(--f-md);
  padding: 0.818em 1.273em;
  background: var(--c-app);
  border-bottom: var(--hair) solid var(--c-line);
  min-width: 0;
}
.crm-crumb { display: flex; align-items: center; gap: var(--sp6); font-size: var(--f-md); color: var(--c-t3); white-space: nowrap; }
.crm-crumb svg { color: var(--c-line-3); }
.crm-crumb .on { color: var(--c-t1); font-weight: 600; }
.crm-search {
  display: flex;
  align-items: center;
  gap: var(--sp8);
  width: calc(256 * var(--px));
  font-size: var(--f-sm);
  padding: 0.65em 0.8em;
  border: var(--hair) solid var(--c-line-2);
  border-radius: var(--r2);
  background: var(--c-canvas);
  color: var(--c-t3);
  white-space: nowrap;
  overflow: hidden;
  flex: none;
}
.crm-search .crm-kbd { margin-left: auto; }
.crm-top-sp { flex: 1 1 auto; min-width: var(--sp8); }
.crm-div { width: var(--hair); height: calc(20 * var(--px)); background: var(--c-line-2); flex: none; }
.crm-avstack { display: flex; align-items: center; flex: none; }
.crm-avstack > * { margin-left: calc(-6 * var(--px)); box-shadow: 0 0 0 calc(1.5 * var(--px)) var(--c-app); }
.crm-avstack > *:first-child { margin-left: 0; }
.crm-icobtn {
  position: relative;
  width: calc(28 * var(--px));
  height: calc(28 * var(--px));
  border-radius: var(--r2);
  border: var(--hair) solid var(--c-line-2);
  background: var(--c-elev);
  color: var(--c-t2);
  display: grid;
  place-items: center;
  flex: none;
}
.crm-icobtn.plain { border-color: transparent; background: transparent; color: var(--c-t3); }
.crm-badge {
  position: absolute;
  top: calc(5 * var(--px));
  right: calc(5.5 * var(--px));
  width: calc(5 * var(--px));
  height: calc(5 * var(--px));
  border-radius: 999px;
  background: var(--c-neg);
}
.crm-cta {
  display: flex;
  align-items: center;
  gap: var(--sp6);
  font-size: var(--f-sm);
  padding: 0.65em 1em;
  border-radius: var(--r2);
  background: var(--c-acc-solid);
  color: var(--c-acc-on);
  font-weight: 600;
  white-space: nowrap;
  flex: none;
}

/* ==========================================================================
   Main column
   ========================================================================== */
.crm-main {
  grid-area: main;
  min-width: 0;
  min-height: 0;
  font-size: var(--f-md);
  padding: 1.273em;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: var(--sp10);
  overflow: hidden;
}

/* page head */
.crm-head { display: flex; align-items: center; gap: var(--sp10); min-width: 0; }
.crm-title { font-size: var(--f-xl); font-weight: 700; letter-spacing: -0.018em; color: var(--c-t1); }
.crm-sub { font-size: var(--f-sm); color: var(--c-t3); margin-top: calc(1 * var(--px)); white-space: nowrap; }
.crm-head-sp { flex: 1 1 auto; min-width: var(--sp8); }
.crm-seg {
  display: flex;
  align-items: center;
  gap: var(--sp2);
  font-size: var(--f-md);
  padding: 0.227em;
  border: var(--hair) solid var(--c-line-2);
  border-radius: var(--r2);
  background: var(--c-app);
  flex: none;
}
.crm-seg > span {
  font-size: var(--f-sm);
  padding: 0.4em 1em;
  border-radius: var(--r1);
  font-weight: 500;
  color: var(--c-t3);
}
.crm-seg > span.on { background: var(--c-elev); color: var(--c-t1); font-weight: 600; }

/* KPI row */
.crm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp10); }
.crm-kpi {
  background: var(--c-card);
  border: var(--hair) solid var(--c-line);
  border-radius: var(--r3);
  font-size: var(--f-md);
  padding: 0.909em 1.091em;
  min-width: 0;
}
.crm-kpi-top { display: flex; align-items: center; gap: var(--sp6); }
.crm-kpi-top .crm-eyebrow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-kpi-top .crm-delta { margin-left: auto; }
.crm-kpi-bot { display: flex; align-items: flex-end; gap: var(--sp4); margin-top: var(--sp6); }
.crm-kpi-val {
  font-size: var(--f-2xl);
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--c-t1);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.crm-kpi-unit { font-size: var(--f-sm); font-weight: 600; color: var(--c-t3); padding-bottom: calc(2 * var(--px)); }
.crm-spark { margin-left: auto; width: calc(54 * var(--px)); height: calc(20 * var(--px)); }

/* chart */
.crm-card {
  background: var(--c-card);
  border: var(--hair) solid var(--c-line);
  border-radius: var(--r3);
  font-size: var(--f-md);
  padding: 1.091em;
  min-width: 0;
}
.crm-card-head { display: flex; align-items: flex-start; gap: var(--sp10); }
.crm-card-title { font-size: var(--f-lg); font-weight: 600; color: var(--c-t1); letter-spacing: -0.01em; }
.crm-card-sub { font-size: var(--f-xs); color: var(--c-t3); margin-top: calc(2 * var(--px)); }
.crm-legend { display: flex; align-items: center; gap: var(--sp12); margin-left: auto; font-size: var(--f-xs); color: var(--c-t2); }
.crm-legend > span { display: inline-flex; align-items: center; gap: var(--sp6); white-space: nowrap; }
.crm-legend i { width: var(--sp8); height: var(--sp8); border-radius: calc(2 * var(--px)); flex: none; }
.crm-legend i.a { background: var(--c-acc); }
.crm-legend i.b { background: var(--c-mute-bar); }
.crm-legend i.c { height: 0; width: calc(12 * var(--px)); border-radius: 0; border-top: calc(1.5 * var(--px)) dashed var(--c-warn); }

.crm-plot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp6) var(--sp8);
  margin-top: var(--sp10);
}
/* label boxes are one line tall, so the column overhangs the plot by half a
   line at each end — that puts every label's optical centre on its gridline */
.crm-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  height: calc(var(--plot-h) + 9 * var(--px));
  margin: calc(-4.5 * var(--px)) 0;
  font-size: var(--f-xs);
  color: var(--c-t3);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.crm-parea { min-width: 0; }
.crm-bars { width: 100%; height: var(--plot-h); }
.crm-xaxis {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  font-size: var(--f-xs);
  color: var(--c-t3);
  text-align: center;
}
.crm-xaxis > span.now { color: var(--c-t2); font-weight: 600; }

/* ==========================================================================
   Table — full-bleed, hairline separated. No card chrome around it.
   ========================================================================== */
.crm-table {
  min-width: 0;
  min-height: 0;
  font-size: var(--f-md);
  margin: 0 -1.273em -1.273em;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-top: var(--hair) solid var(--c-line);
  overflow: hidden;
}
.crm-tr {
  display: grid;
  grid-template-columns:
    calc(16 * var(--px))
    minmax(0, 1.7fr)
    calc(98 * var(--px))
    calc(80 * var(--px))
    calc(42 * var(--px))
    minmax(0, 1.1fr)
    minmax(0, 1.25fr)
    calc(56 * var(--px));
  align-items: center;
  gap: var(--sp10);
  font-size: var(--f-md);
  padding: 0.636em 1.273em;
  border-bottom: var(--hair) solid var(--c-line);
  min-width: 0;
}
.crm-tr.head {
  font-size: var(--f-xs);
  padding: 0.889em 1.556em;
  background: var(--c-app);
  color: var(--c-t3);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.crm-tr.head .s { display: inline-flex; align-items: center; gap: var(--sp4); }
.crm-tr.head .s.on { color: var(--c-t2); }
.crm-tr.head .s.on svg { color: var(--c-acc-t); }
.crm-tbody { min-height: 0; overflow: hidden; display: grid; grid-template-rows: repeat(8, minmax(0, 1fr)); }
.crm-tbody .crm-tr:last-child { border-bottom: 0; }
.crm-tr.row { color: var(--c-t2); overflow: hidden; }
.crm-tr.row.alt { background: var(--c-row); }
.crm-tr.row.sel { background: var(--c-sel); }
.crm-tr .r { text-align: right; justify-self: end; font-variant-numeric: tabular-nums; }
.crm-cbox {
  width: calc(12 * var(--px));
  height: calc(12 * var(--px));
  border-radius: var(--r1);
  border: var(--hair) solid var(--c-line-3);
  display: grid;
  place-items: center;
  color: transparent;
  flex: none;
}
.crm-cbox.on { background: var(--c-acc-solid); border-color: var(--c-acc-solid); color: var(--c-acc-on); }
.crm-co { display: flex; align-items: center; gap: var(--sp8); min-width: 0; }
.crm-co-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-t1); font-weight: 600; }
.crm-val { color: var(--c-t1); font-weight: 600; }
.crm-owner { display: flex; align-items: center; gap: var(--sp6); min-width: 0; }
.crm-owner span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-next { display: flex; align-items: center; gap: var(--sp6); min-width: 0; color: var(--c-t2); }
.crm-next svg { color: var(--c-t3); }
.crm-next span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-when { color: var(--c-t3); font-size: var(--f-sm); }

.crm-tfoot {
  display: flex;
  align-items: center;
  gap: var(--sp8);
  font-size: var(--f-sm);
  padding: 0.8em 1.4em;
  background: var(--c-app);
  border-top: var(--hair) solid var(--c-line);
  color: var(--c-t3);
}
.crm-tfoot-sp { flex: 1 1 auto; }
.crm-pg { display: flex; align-items: center; gap: var(--sp2); }
.crm-pg > span {
  min-width: calc(19 * var(--px));
  height: calc(19 * var(--px));
  font-size: var(--f-xs);
  padding: 0.28em 0.556em;
  border-radius: var(--r1);
  display: grid;
  place-items: center;
  font-weight: 600;
  color: var(--c-t3);
  font-variant-numeric: tabular-nums;
}
.crm-pg > span.on { background: var(--c-elev); color: var(--c-t1); }

/* ==========================================================================
   Right panel — sections divided by hairlines, no nested card chrome
   ========================================================================== */
.crm-side {
  grid-area: side;
  background: var(--c-app);
  border-left: var(--hair) solid var(--c-line);
  font-size: var(--f-md);
  padding: 1.091em 1.273em;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.crm-sec { padding-bottom: 0.909em; min-width: 0; font-size: var(--f-md); }
.crm-sec:last-child { padding-bottom: 0; }
.crm-sec + .crm-sec { border-top: var(--hair) solid var(--c-line); padding-top: 0.909em; }
.crm-sec.grow { display: flex; flex-direction: column; min-height: 0; }
.crm-sec-head { display: flex; align-items: center; gap: var(--sp8); margin-bottom: var(--sp8); }
.crm-sec-head .crm-eyebrow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-sec-head .crm-fc-of { margin-left: auto; }
.crm-more { margin-left: auto; color: var(--c-t3); }

/* stage bars */
.crm-stage { display: grid; gap: var(--sp4); margin-bottom: var(--sp6); }
.crm-stage:last-child { margin-bottom: 0; }
.crm-stage-l { display: flex; align-items: baseline; gap: var(--sp6); font-size: var(--f-sm); }
.crm-stage-n { color: var(--c-t2); font-weight: 500; }
.crm-stage-c { color: var(--c-t3); font-size: var(--f-xs); font-variant-numeric: tabular-nums; }
.crm-stage-v { margin-left: auto; color: var(--c-t1); font-weight: 600; font-variant-numeric: tabular-nums; }
.crm-bar { height: calc(4 * var(--px)); border-radius: 999px; background: var(--c-elev); overflow: hidden; }
.crm-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--c-acc); }
.crm-bar > i.pos { background: var(--c-pos); }

/* forecast */
.crm-fc-top { display: flex; align-items: baseline; gap: var(--sp8); }
.crm-fc-val { font-size: var(--f-3xl); font-weight: 700; letter-spacing: -0.03em; color: var(--c-t1); line-height: 1; font-variant-numeric: tabular-nums; }
.crm-fc-of { font-size: var(--f-sm); color: var(--c-t3); }
.crm-fc-pc { margin-left: auto; font-size: var(--f-sm); font-weight: 700; color: var(--c-pos); }
.crm-fc-bar { margin: var(--sp8) 0; }
.crm-fc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp8); }
.crm-fc-k { font-size: var(--f-xs); color: var(--c-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-fc-v { font-size: var(--f-md); font-weight: 600; color: var(--c-t1); margin-top: calc(2 * var(--px)); font-variant-numeric: tabular-nums; }
.crm-fc-v.warnv { color: var(--c-warn); }

/* activity */
.crm-acts { display: grid; align-content: space-between; gap: var(--sp10); min-height: 0; flex: 1 1 auto; overflow: hidden; }
.crm-act { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp8); }
.crm-act-b { min-width: 0; }
.crm-act-t { font-size: var(--f-sm); color: var(--c-t2); line-height: 1.35; }
.crm-act-t b { color: var(--c-t1); font-weight: 600; }
.crm-act-m { font-size: var(--f-xs); color: var(--c-t3); margin-top: calc(2 * var(--px)); }

/* tasks */
.crm-task { display: flex; align-items: center; gap: var(--sp8); margin-bottom: var(--sp6); }
.crm-task:last-child { margin-bottom: 0; }
.crm-task-t { font-size: var(--f-sm); color: var(--c-t2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-task-w { margin-left: auto; font-size: var(--f-xs); color: var(--c-t3); font-variant-numeric: tabular-nums; }
.crm-task.done .crm-task-t { color: var(--c-t3); text-decoration: line-through; }


/* ---------- Phone: crop to a legible slice instead of scaling to a smear ---------- */
@media (max-width: 760px) {
  .crm      { grid-template-columns: minmax(0, 1fr); }
  .crm-rail, .crm-side, .crm-card { display: none; }
  .crm-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
  .crm-main { grid-template-rows: auto auto minmax(0, 1fr); }
  .crm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-tbody { grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .crm-tbody .crm-tr:nth-child(n+5) { display: none; }
}
/* The container-query base (0.0822368cqw) is tuned for a full-width desktop pane.
   Below that the pane keeps shrinking but the reader does not, so step the unit up.
   These live here, not in styles.css: this file loads second and equal-specificity
   rules are decided by order, so anything in styles.css would never apply. */
@supports (container-type: inline-size) {
  @media (max-width: 1280px) { .cmp-pane.after { --px: 0.098cqw; } }
  @media (max-width: 1000px) { .cmp-pane.after { --px: 0.115cqw; } }
  @media (max-width: 900px)  { .cmp-pane.after { --px: 0.30cqw;  } }
  @media (max-width: 760px)  { .cmp-pane.after { --px: 0.34cqw;  } }
}


/* The top bar is a nowrap flex row of eight fixed items. At 375px it wants
   456px in a 335px pane and .mock-crm clips the last 121px, which is exactly
   the half a visitor sees at the default seam position. */
@media (max-width: 760px) {
  .crm-chip, .crm-icobtn { display: none; }
  .crm-crumb > *:not(:last-child) { display: none; }
  .crm-crumb { min-width: 0; }
}