/* glen-design: v1 */
/* ============================================================================
   Customers: the segment instrument (share of revenue as width, kept after a
   year as fill), then satisfaction, reviews, complaints, who is drifting and
   top accounts. Tokens only; both appearances come from the tokens. Prefix cu-.
   ========================================================================== */

.cu{ --cu-tile: 120px; }
.cu{ position: relative; min-width: 0; }
.cu-head > div:first-child{ flex: 1 1 480px; min-width: 0; }
.cu-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.cu-actions .btn--tint .ic{ color: var(--accent); }

/* --- mosaic hero ---------------------------------------------------------- */
.cu-hero{ padding: var(--s5); margin-bottom: var(--s4); }
.cu-hero-h{ display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s4); }
.cu-hero-h h2{ font-size: var(--fs-lg); letter-spacing: -.015em; }
.cu-hero-h .meta{ margin: var(--s1) 0 0; max-width: 72ch; }

.cu-legend{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--fs-sm); color: var(--ink-dim); }
.cu-legend li{ display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; }
.cu-legend .k{ width: 20px; height: 12px; flex: none; border-radius: 4px; }
.k-share{ background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 40%, var(--surface-1)), var(--accent)); }
.k-kept{ background: color-mix(in oklab, var(--accent) 35%, var(--surface-1)); box-shadow: inset 0 0 0 1px var(--accent); }
.k-line{ background: linear-gradient(var(--accent), var(--accent)) center / 100% 3px no-repeat; }

.cu-mosaic{
  display: flex; align-items: stretch; gap: var(--s3); min-height: 280px;
}
.cu-seg{
  --w: .2; --kept: 0;
  position: relative; overflow: hidden; flex: var(--w) 1 var(--cu-tile); min-width: 0; min-height: var(--h-touch);
  display: grid; align-content: end; padding: var(--s4);
  border: 0; border-radius: var(--r); cursor: pointer;
  background: var(--surface-2); color: inherit; font: inherit; text-align: left;
  box-shadow: inset 0 0 0 1px var(--line);
}
.cu-seg-fill{
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%; pointer-events: none;
  background: color-mix(in oklab, var(--accent) 28%, var(--surface-1));
  transform-origin: center bottom; transform: scaleY(0);
}
.cu-seg-share{ display: none; }
.cu-seg-body{ position: relative; display: grid; gap: var(--s1); z-index: 1; min-width: 0; }
.cu-seg-body small{ font-size: var(--fs-sm); font-weight: 600; color: var(--ink-dim); }
.cu-seg-body .fig{ font-size: var(--fs-2xl); margin: var(--s1) 0; }
.cu-seg-size{ font-size: var(--fs-sm); color: var(--ink-dim); }
.cu-seg-kept{ font-style: normal; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-dim); }
.cu-seg-kept.ok{ color: var(--ok); } .cu-seg-kept.warn{ color: var(--warn); } .cu-seg-kept.bad{ color: var(--bad); }
.cu-seg[aria-pressed="true"]{ box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 24px var(--glow); background: var(--surface-1); }
.cu-seg.is-unknown .cu-seg-fill{ opacity: 0; }

.cu-read-line{ margin: var(--s4) 0 0; min-height: 1.5em; font-size: var(--fs-sm); color: var(--ink-dim); max-width: none; }
.cu-read-line b{ color: var(--ink); }
.cu-read-line .num{ color: var(--ink); }
.cu-read-line i{ font-style: normal; color: var(--ink-faint); margin: 0 var(--s1); }

/* --- figures -------------------------------------------------------------- */
.cu-figs{
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s3); margin-bottom: var(--s4);
}
.cu-fig{ display: grid; gap: var(--s1); align-content: start; padding: var(--s4); min-width: 0; }
.cu-fig small{ font-size: var(--fs-sm); font-weight: 600; color: var(--ink-dim); }
.cu-fig .fig{ font-size: var(--fs-xl); color: var(--ink); margin: var(--s1) 0; white-space: nowrap; }
.cu-fig:first-child .fig{ font-size: var(--fs-2xl); }
.cu-dir{ display: flex; align-items: center; gap: var(--s1); margin: 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; color: var(--ink-dim); max-width: none; }
.cu-dir .ic{ width: 14px; height: 14px; flex: none; }
.cu-dir.down .ic{ transform: rotate(180deg); }
.cu-dir.ok{ color: var(--ok); } .cu-dir.warn{ color: var(--warn); } .cu-dir.bad{ color: var(--bad); } .cu-dir.flat{ color: var(--ink-dim); }
.cu-quiet{ margin: 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-dim); max-width: none; }
.cu-spark{ height: 28px; margin-top: var(--s2); }
.cu-spark svg{ width: 100%; height: 100%; }

/* --- plots ---------------------------------------------------------------- */
.cu-plot{ position: relative; min-height: 160px; border-radius: var(--r-sm); touch-action: pan-y; cursor: crosshair; outline-offset: 4px; }
.cu-plot > svg{ position: absolute; left: 0; top: 0; display: block; overflow: visible; }
.cu-plot .g{ stroke: var(--line); stroke-width: 1; }
.cu-plot .s-line{ fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.cu-plot .s-area{ stroke: none; }
.cu-plot .st0{ stop-color: var(--accent); stop-opacity: .22; }
.cu-plot .st1{ stop-color: var(--accent); stop-opacity: 0; }
.cu-xticks{ position: absolute; left: 0; right: 0; bottom: 0; height: 18px; pointer-events: none; }
.cu-xticks span{ position: absolute; transform: translateX(-50%); font: 400 var(--fs-micro)/1 var(--font-mono); color: var(--ink-faint); }
.cu-cross{ position: absolute; left: 0; width: 1px; pointer-events: none; background: var(--line-2); transform: translateX(var(--x, 0)); opacity: 0; }
.cu-pin{
  position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: var(--accent); box-shadow: 0 0 0 3px var(--surface-1), 0 0 12px var(--glow);
  transform: translate(calc(var(--x, 0px) - 5px), calc(var(--y, 0px) - 5px)) scale(.4);
}
.cu-plot.scrubbing .cu-cross{ opacity: 1; }
.cu-plot.scrubbing .cu-pin{ opacity: 1; transform: translate(calc(var(--x, 0px) - 5px), calc(var(--y, 0px) - 5px)) scale(1); }
.cu-plot.scrubbing .cu-pin[hidden]{ display: none; }
.cu-plot:focus-visible{ outline: 2px solid var(--accent); }

/* --- bento ---------------------------------------------------------------- */
.cu-grid{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s4); }
.cu-plotcard, .cu-revs, .cu-drifts, .cu-tops{ grid-column: span 6; min-width: 0; }
.cu-card-h{ display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-bottom: var(--s4); }
.cu-card-h h3{ font: 600 var(--fs-lg)/1.25 var(--font-body); letter-spacing: -.01em; }
.cu-card-h .meta{ font-size: var(--fs-sm); }
.cu-plotcard{ display: flex; flex-direction: column; }
.cu-plotcard .cu-legend{ margin-bottom: var(--s2); }

.cu-nps-w{ margin: 0 0 var(--s4); font: 300 var(--fs-xl)/1.35 var(--font-display); letter-spacing: -.02em; color: var(--ink); max-width: 36ch; }
.cu-nps-w.ok{ color: var(--ok); } .cu-nps-w.warn{ color: var(--warn); } .cu-nps-w.bad{ color: var(--bad); }
.cu-nps-w b{ font-weight: 600; color: var(--ink); }

/* --- reviews -------------------------------------------------------------- */
.cu-rev-list{ display: grid; gap: var(--s2); }
.cu-rev{
  display: grid; gap: var(--s2); width: 100%; min-height: var(--h-touch); padding: var(--s3) var(--s4);
  border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: var(--surface-2); color: inherit; font: inherit; text-align: left;
  box-shadow: inset 0 0 0 1px var(--line);
}
.cu-rev-h{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.cu-rev-h b{ font-size: var(--fs-base); font-weight: 600; }
.cu-rev-score{ display: flex; align-items: baseline; gap: var(--s2); }
.cu-rev-score strong{ font-size: var(--fs-lg); font-weight: 500; }
.cu-rev-score small{ font-size: var(--fs-sm); color: var(--ink-dim); }
.cu-rev-score.ok{ color: var(--ok); } .cu-rev-score.warn{ color: var(--warn); }
.cu-rev-bar{ display: block; height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.cu-rev-bar i{
  display: block; height: 100%; width: 100%; border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 50%, var(--surface-1)), var(--accent));
  transform-origin: left center; transform: scaleX(0);
}

/* --- drifting ------------------------------------------------------------- */
.cu-drift-list{ display: grid; gap: var(--s3); }
.cu-drift{
  display: grid; gap: var(--s2); padding: var(--s4); border-radius: var(--r-sm);
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
}
.cu-drift-h{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.cu-drift-h b{ font-size: var(--fs-base); font-weight: 600; }
.cu-drift-figs{ display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: 0; font-size: var(--fs-sm); color: var(--ink-dim); }
.cu-drift-figs b{ color: var(--ink); font-weight: 500; }
.cu-drift-acts{ display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.cu-drift-acts .btn{ min-height: var(--h-touch); }
.cu-drift-acts .btn--tint .ic{ color: var(--accent); }

/* --- top accounts --------------------------------------------------------- */
.cu-top-list{ display: grid; gap: var(--s1); }
.cu-top{
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--s3);
  width: 100%; min-height: var(--h-touch); padding: var(--s2) var(--s3); border: 0; border-radius: var(--r-sm);
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.cu-top-n b{ font-size: var(--fs-base); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-top-f{ display: grid; justify-items: end; }
.cu-top-f small{ font-size: var(--fs-sm); color: var(--ink-dim); }
.cu-top-f b{ font-size: var(--fs-base); font-weight: 500; }

.cu-spot{ box-shadow: var(--shadow-2), 0 0 0 2px var(--accent), 0 0 32px var(--glow); }

/* --- hover and press ------------------------------------------------------ */
@media (hover: hover) and (pointer: fine){
  .cu-seg:hover{ transform: translateY(-4px); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line-2); }
  .cu-mosaic.is-hot .cu-seg:not([aria-pressed="true"]):not(:hover){ opacity: .55; }
  .cu-rev:hover{ transform: translateY(-3px); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line-2); }
  .cu-rev:hover .cu-rev-bar i{ filter: brightness(1.08); }
  .cu-top:hover{ transform: translateY(-2px); background: var(--surface-2); }
  .cu-drift:hover{ transform: translateY(-2px); }
  .cu-fig:hover .cu-dir:not(.flat):not(.down) .ic{ transform: translateY(-2px); }
  .cu-fig:hover .cu-dir.down .ic{ transform: rotate(180deg) translateY(-2px); }
  .cu-fig:hover .cu-dir.flat .ic{ transform: translateX(2px); }
  .cu-drift-acts .btn:hover{ transform: translateY(-2px); }
}
.cu-seg:active, .cu-rev:active, .cu-top:active, .cu-drift-acts .btn:active{ transform: scale(.97); }

/* --- motion (additive) ---------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  .cu-seg, .cu-rev, .cu-top, .cu-drift{
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
  }
  .cu-seg-fill{
    transition: transform var(--dur-reveal) var(--ease-out) calc(var(--i, 0) * var(--stagger));
  }
  .cu-mosaic.in .cu-seg-fill{ transform: scaleY(var(--kept, 0)); }
  .cu-mosaic.done .cu-seg-fill{ transition: transform var(--dur-base) var(--ease-out); }
  .cu-rev-bar i, .cu-seg-share i{
    transition: transform var(--dur-reveal) var(--ease-out) calc(var(--i, 0) * var(--stagger)), filter var(--dur-base) ease;
  }
  .cu-rev-list.in .cu-rev-bar i, [data-draw].in .cu-rev-bar i{ transform: scaleX(var(--p, 0)); }
  .cu-series{ clip-path: inset(-12px 100% -12px -12px); transition: clip-path var(--dur-reveal) var(--ease-out) var(--dur-base); }
  .cu-plot.in .cu-series{ clip-path: inset(-12px -12px -12px -12px); }
  .cu-cross, .cu-pin{ transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
  .cu-dir .ic{ transition: transform var(--dur-base) var(--ease-out); }
  .cu-spot{ transition: box-shadow var(--dur-slow) var(--ease-out); }
  .settled .cu-seg-fill{ transform: scaleY(var(--kept, 0)); transition: none; }
  .settled .cu-rev-bar i{ transform: scaleX(var(--p, 0)); }
  .settled .cu-series{ clip-path: none; transition: none; }
}
.cu-mosaic.in .cu-seg-fill, .cu-mosaic.done .cu-seg-fill{ transform: scaleY(var(--kept, 0)); }
.cu-rev-list.in .cu-rev-bar i, .cu-rev-list.done .cu-rev-bar i, [data-draw].in .cu-rev-bar i{ transform: scaleX(var(--p, 0)); }

@media (prefers-reduced-motion: reduce){
  .cu-seg-fill{ transform: scaleY(var(--kept, 0)); }
  .cu-rev-bar i, .cu-seg-share i{ transform: scaleX(var(--p, 0)); }
}

/* --- breakpoints ---------------------------------------------------------- */
@media (max-width: 1280px){
  .cu-figs{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cu-seg-body .fig{ font-size: var(--fs-xl); }
}
@media (max-width: 1100px){
  .cu-plotcard, .cu-revs, .cu-drifts, .cu-tops{ grid-column: 1 / -1; }
  .cu-mosaic{ flex-wrap: wrap; min-height: 0; }
  .cu-seg{ flex: var(--w) 1 160px; min-height: 176px; }
}
@media (max-width: 760px){
  .cu-actions{ width: 100%; }
  #cuAsk{ flex: 1 1 100%; min-height: var(--h-touch); }
  .cu-figs{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  .cu-fig{ padding: var(--s3); }
  .cu-fig:first-child{ grid-column: 1 / -1; }
  .cu-fig .fig, .cu-fig:first-child .fig{ font-size: var(--fs-xl); }
  .cu-hero{ padding: var(--s4); }
  .cu-mosaic{ flex-direction: column; min-height: 0; }
  .cu-seg{ flex: none; min-height: 0; align-content: start; padding: var(--s4); }
  .cu-seg-fill{ display: none; }
  .cu-seg-share{
    display: block; position: relative; height: 8px; border-radius: var(--r-pill);
    background: var(--surface-3); overflow: hidden; margin-bottom: var(--s2);
  }
  .cu-seg-share i{
    display: block; height: 100%; width: 100%; border-radius: inherit;
    background: var(--accent); transform-origin: left center; transform: scaleX(0);
  }
  .cu-seg-body .fig{ font-size: var(--fs-xl); }
  .cu-nps-w{ font-size: var(--fs-lg); }
  .cu-plot{ min-height: 140px; }
  .cu-top{ grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .cu-top-f{ justify-items: start; display: flex; gap: var(--s2); align-items: baseline; }
  .cu-drift-acts .btn{ flex: 1 1 140px; }
}

@media (prefers-reduced-motion: no-preference){
  .cu-mosaic.in .cu-seg-share i, .cu-mosaic.done .cu-seg-share i{ transform: scaleX(var(--w, 0)); }
}
@media (prefers-reduced-motion: reduce){
  .cu-seg-share i{ transform: scaleX(var(--w, 0)); }
}
.settled .cu-seg-share i{ transform: scaleX(var(--w, 0)); }