/* A5 CRM — reports.css (screen «Отчёты», #/reports). Owned by screens/reports.js (G7)
   Stripe Dashboard analytics language (DESIGN-STRIPE.md §6.7, §5.29): overview controls row with a hairline divider,
   a hairline KPI strip, a default banner for the computed insights, bordered r8 chart cards on a 12-column grid (gap 24),
   Stripe tables / legends inside cards, a white chart tooltip. Every colour is a token of base.css (light + dark), the
   charts use only the --chart-* tokens. Motion is kept: cards stagger in (240 ms), bars grow from 0 then morph between
   values (420 ms), numbers tween (JS), the delta badge pops, the tooltip fades. Reduced motion = values appear in place. */

.rp{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;background:var(--bg)}

/* ── controls row (§6.7): picker · period chips · «в сравнении с» · range … manager pill · refresh; divider 16 px below ── */
.rp-tb{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:0 var(--gutter-x) 16px}
.rp-tb::after{content:"";position:absolute;left:var(--gutter-x);right:var(--gutter-x);bottom:0;height:1px;background:var(--border);pointer-events:none}
.rp-tb .r{margin-left:auto;display:flex;align-items:center;gap:8px}
.rp-dash > .ic:first-child{display:none}                       /* Stripe pickers: label + up-down chevron, no leading icon */

/* period = Stripe range chips (G1 .seg); the old sliding underline is not used */
.rp-ind{display:none}

/* «11–17 окт» as plain 14/20 --text (S a9: the static range is text, not a dead secondary button; owner OK), then
   «в сравнении с» 8 px each side, then the previous range in --text-3. 16 px from the period chips (8 margin + 8 row gap)
   so the static range does not read as a fourth period option (S a9: the range sits apart from the range chips) */
.rp-range{display:inline-flex;align-items:center;min-width:0;margin-left:8px;font:var(--t-body);white-space:nowrap;font-variant-numeric:tabular-nums}
.rp-rc{height:auto;padding:0;background:none;box-shadow:none;font:var(--t-body);color:var(--text);cursor:auto}
.rp-vs{margin:0 8px;color:var(--text)}
.rp-rp{color:var(--text-3)}

/* manager filter = filter pill (§5.11): idle dashed «Все менеджеры», set solid with an avatar, the name in --text-strong (G1 .fpill .v) and a trailing × */
.rp-own-slot{display:contents}
.rp-ownchip{gap:4px}
.rp-ownchip > .rp-own{width:auto;height:100%;display:inline-flex;align-items:center;gap:6px;padding:0;border-radius:var(--radius-pill);background:none;color:inherit;font:inherit}
.rp-ownchip > .rp-own:hover{background:none}
/* keyboard focus = the pill's own 1 px edge turns accent, nothing nested inside it (S sort-popover-focus); the × shows its hover
   fill as well, so it is clear which of the two buttons holds the focus */
.rp-ownchip > :is(.rp-own,.rp-own-x):focus-visible{box-shadow:none}
.rp-ownchip > .rp-own-x:focus-visible{background:var(--surface-hover)}
.rp-ownchip:has(> :focus-visible){border-color:var(--focus-color)}
.rp-ownchip > .rp-own .av{width:16px;height:16px;font-size:8px}
.rp-own .ic{color:var(--icon)}

/* icon-only secondary buttons (refresh in the row, «…» in #page-actions): 28 × 28, 16 px icon (§5.2) */
.rp-ib{width:28px;padding:0}
.rp-ib .ic{width:16px;height:16px;stroke-width:2}
@keyframes rp-spin{to{transform:rotate(360deg)}}
.rp-ib.spin .ic{animation:rp-spin 600ms var(--ease-move)}

/* ── scroll area (§4.5): full width, content inside the gutter ── */
.rp-scroll{overflow:auto;padding:0 var(--gutter-x) 48px;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content;gap:24px;align-content:start;scroll-behavior:smooth}

/* ── KPI strip: 5 hairline cells, framed top and bottom, no outer side borders (S Billing grid + revenue-recovery KPIs) ── */
.rp-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--border)}   /* top frame = the controls-row divider (Stripe a6: the rule under the controls is the grid's top edge) */
/* every cell has the same rhythm: label / value + delta (one line, never wraps) / comparison / sub. A grid, not a wrapping
   flex row: the value keeps its width, the badge takes what is left and ellipsises instead of dropping to its own line */
.rp-kpi{position:relative;display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;align-content:start;column-gap:8px;row-gap:4px;min-width:0;padding:16px;
  text-align:left;background:transparent;cursor:pointer;transition:background var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}
.rp-kpi:first-child{padding-left:0}
.rp-kpi + .rp-kpi{box-shadow:inset 1px 0 0 var(--border)}
.rp-kpi:hover{background:var(--surface-hover)}
/* a row-start cell has no left padding (§6.7), so its hover fill bleeds 16 px to the left: the text never touches the fill edge */
.rp-kpi:first-child:hover{box-shadow:-16px 0 0 var(--surface-hover)}
.rp-kpi:focus-visible{outline:var(--focus-outline);outline-offset:-1px;box-shadow:none}
.rp-kpi + .rp-kpi:focus-visible{box-shadow:inset 1px 0 0 var(--border)}
.rp-kpi .lbl{grid-column:1/-1;min-width:0;margin-right:-8px;font:var(--t-body);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-kpi .lbl .inf{display:inline-block;width:12px;height:12px;margin-left:4px;vertical-align:-1px;color:var(--icon)}
.rp-kpi .v{grid-column:1;display:flex;align-items:baseline;min-width:0;font:var(--t-metric);color:var(--text-strong);font-variant-numeric:tabular-nums;white-space:nowrap}
.rp-kpi .v b{font-weight:400}
.rp-kpi .v small{margin-left:2px;font:var(--t-body);color:var(--text-3)}       /* the unit hugs its number: «2ч 44мин», «25%» */
.rp-kpi .v .cur{margin-right:6px;font:var(--t-body);color:var(--text-3)}
.rp-kpi .d{display:contents}                                    /* the delta badge sits 8 px after the value, the comparison below */
.rp-kpi .rp-delta{grid-column:2;justify-self:start;display:block;max-width:100%;min-width:0;line-height:20px;overflow:hidden;text-overflow:ellipsis}
.rp-kpi .cmp{all:unset;grid-column:1/-1;display:block;min-width:0;margin-right:-8px;font:var(--t-caption);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the sub is the last line, so it may take a second line (never more) instead of cutting a name: the rows above stay aligned */
.rp-kpi > span.s{grid-column:1/-1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-width:0;margin-right:-8px;font:var(--t-caption);color:var(--text-3);overflow:hidden;overflow-wrap:anywhere;text-wrap:balance}
.rp-kpi .go{position:absolute;top:50px;right:4px;width:12px;height:12px;color:var(--icon);opacity:0;transform:translateX(-4px);
  transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.rp-kpi:hover .go,.rp-kpi:focus-visible .go{opacity:1;transform:none}
/* calm (DESIGN-CALM §4 G7): the alert number stays neutral; the status lives in an 8 px dot before the label
   (over the 1 h goal = red, waiting = orange). The unit keeps --text-3 like every other KPI */
.rp-kpi.alert .v{color:var(--text-strong)}
.rp-kpi.alert .lbl::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;vertical-align:1px;background:var(--dot-red)}
.rp-kpi.alert[data-kpi="wait"] .lbl::before{background:var(--dot-orange)}

/* delta = status badge (§5.10): good success · bad danger · flat neutral; pops in after the number */
@keyframes rp-pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.rp-delta{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:var(--radius-xs);font:var(--t-caption-strong);font-variant-numeric:tabular-nums;white-space:nowrap;
  background:var(--badge-neutral-bg);color:var(--badge-neutral-text);box-shadow:inset 0 0 0 1px var(--badge-neutral-border);animation:rp-pop 200ms var(--ease-out) 380ms both}
.rp-delta.good{background:var(--badge-success-bg);color:var(--badge-success-text);box-shadow:inset 0 0 0 1px var(--badge-success-border)}
.rp-delta.bad{background:var(--badge-danger-bg);color:var(--badge-danger-text);box-shadow:inset 0 0 0 1px var(--badge-danger-border)}

/* ── computed insights «Выводы» = default banner (§5.14): 12 px spark in --ai-text, items split by --border-soft ── */
/* «Выводы» is a label column (--ins-h wide); items wrap into the column after it (hanging indent), so every line starts at
   the same x. Every item opens with a 6 px dot hung in the 16 px gap before it (outside its box): neutral, red for a «bad»
   finding (calm: neutral words, the colour only in the dot). The dot takes no width, so the text of every line starts at one
   x and the banner wraps exactly as without dots; the dots also replace the old dividers between items. */
.rp-ins{--ins-h:76px;position:relative;display:flex;align-items:flex-start;flex-wrap:wrap;gap:8px 16px;padding:12px 16px 12px calc(32px + var(--ins-h));
  border:1px solid var(--border);border-radius:var(--radius-s);background:var(--surface);font:var(--t-body);color:var(--text)}
.rp-ins-h{position:relative;z-index:2;flex:none;display:inline-flex;align-items:center;gap:6px;min-width:var(--ins-h);min-height:20px;margin-left:calc(-16px - var(--ins-h));
  font:var(--t-body-strong);color:var(--text-strong);white-space:nowrap}
.rp-ins-h .ic{width:12px;height:12px;stroke-width:2.4;color:var(--ai-text)}
.rp-ins-h .lbl{font:inherit;color:inherit}
/* one inline sentence (not a flex row): «Замер: проходит 60%» keeps normal word spacing around the bold value */
.rp-insi{position:relative;display:block;max-width:100%;border-radius:var(--radius-xs);color:var(--text);text-align:left;font:var(--t-body);transition:color var(--dur-1) var(--ease-out)}
.rp-insi b{font-weight:600;color:var(--text-strong)}
.rp-insi.bad b{color:var(--text-strong)}
.rp-insi:not(.none)::before{content:"";position:absolute;top:7px;left:-10px;width:6px;height:6px;border-radius:50%;background:var(--dot-neutral);pointer-events:none}
.rp-insi.bad::before{background:var(--dot-red)}
.rp-insi .ic{display:inline-block;width:12px;height:12px;margin-left:6px;vertical-align:-1px;color:var(--icon);opacity:0;transform:translateX(-4px);transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.rp-insi:hover{color:var(--text-strong)}
.rp-insi:hover .ic,.rp-insi:focus-visible .ic{opacity:1;transform:none}
.rp-insi.none{color:var(--text-3);cursor:default}

/* ── card grid: 12 columns, gap 24; bordered card r8, padding 24 (§5.14) ── */
.rp-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:stretch}
.rp-card{grid-column:span var(--span,6);min-width:0;display:grid;grid-template-rows:auto minmax(0,1fr);row-gap:16px;padding:24px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);
  transition:opacity var(--dur-3) var(--ease-in),transform var(--dur-3) var(--ease-in)}
.rp-card.out{opacity:0;transform:scale(.98)}
@keyframes rp-flash{0%,35%{border-color:var(--accent)}100%{border-color:var(--border)}}   /* calm: the 1 px border alone turns accent, no extra ring */
.rp-card.flash{animation:rp-flash 1400ms var(--ease-out)}

.rp-ch{position:relative;display:flex;align-items:flex-start;gap:8px;min-width:0}
.rp-ch .tt{min-width:0;flex:1}
.rp-ch h3{display:flex;align-items:center;gap:8px;margin:0;font:var(--t-heading-s);color:var(--text-strong)}
.rp-ch h3 > .ic{display:none}                                   /* Stripe widget titles carry no leading icon */
.rp-ch .meta{font:var(--t-body);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-ch .acts{position:absolute;top:0;right:0;display:flex;align-items:center;gap:4px}   /* over the title line only: the meta line keeps the full card width */
.rp-plan-slot{order:2}                                          /* the persistent «План» button sits flush right at rest; the hover icons appear to its left */
.rp-cbtn{width:24px;height:24px;display:grid;place-items:center;border-radius:var(--radius-xs);color:var(--icon);opacity:0;transform:translateX(4px);
  transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),color var(--dur-1),background var(--dur-1)}
.rp-cbtn .ic{width:16px;height:16px;stroke-width:2}
.rp-card:hover .rp-cbtn,.rp-card:focus-within .rp-cbtn{opacity:1;transform:none}
.rp-cbtn:hover,.rp-cbtn[aria-expanded="true"]{background:var(--surface-hover);color:var(--icon-strong)}
@media (hover:none){.rp-cbtn{opacity:1;transform:none}}
.rp-planb .ic{color:var(--icon)}
.rp-cb{min-width:0}

/* summary line inside cards */
.rp-fsum,.rp-lsum,.rp-rsum{display:block;margin:0 0 16px;font:var(--t-body);color:var(--text-2)}
.rp-fsum b,.rp-lsum b,.rp-rsum b{font-weight:600;color:var(--text-strong);font-variant-numeric:tabular-nums}
.rp-sep{display:inline-block;width:1px;height:12px;margin:0 12px;background:var(--border);vertical-align:-1px}

/* ── pseudo-table headers (funnel, sources, response) = the §5.12 header, the same as .rp-tbl thead: 36 px, 12/16 600
   --text-strong, a --border top rule and a --border-soft bottom rule. They bleed 8 px like the rows under them, so every
   rule in a card shares one edge ── */
.rp-fhead,.rp-srch,.rp-mh{width:calc(100% + 16px);height:var(--row-h);margin-left:-8px;margin-right:-8px;padding:0 8px;box-shadow:inset 0 1px 0 var(--border),inset 0 -1px 0 var(--border-soft)}
.rp-fhead.lbl,.rp-srch.lbl,.rp-mh .lbl:not(.tl){font:var(--t-caption-strong);color:var(--text-strong)}

/* ── funnel: HTML bars 20 px, --chart-1, square ── */
.rp-fhead,.rp-frow{display:grid;grid-template-columns:128px minmax(0,1fr) 112px 112px;gap:12px;align-items:center}
.rp-fhead span:nth-child(3),.rp-fhead span:nth-child(4){text-align:right}
.rp-fhead span:nth-child(4){padding-right:16px}                 /* the row's hover arrow (12 px + 4 gap) trails «N в работе»: header and values share one right edge (§5.12) */
.rp-frow{position:relative;width:calc(100% + 16px);height:var(--row-h);margin:0 -8px;padding:0 8px;text-align:left;transition:background var(--dur-1) var(--ease-out)}
.rp-frow:hover{background:var(--surface-hover)}
/* the badge line (.rp-cv, z 1) overlaps 4 px of the rows around it, so the 1 px focus keyline is drawn on a z 2 layer above
   it; the row itself stays unstacked, so its hover fill still sits under the badges */
.rp-frow:focus-visible{outline:none;box-shadow:none}
.rp-frow:focus-visible::after{content:"";position:absolute;inset:0;z-index:2;outline:var(--focus-outline);outline-offset:-1px;pointer-events:none}
.rp-frow .nm{font:var(--t-body);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-frow:hover .nm{color:var(--text-strong)}
.rp-frow .trk{display:flex;align-items:center;gap:8px;min-width:0}
.rp-frow .rp-bar{display:block;flex:none;height:20px;width:calc(var(--v,0) * (100% - 44px));min-width:2px;background:var(--chart-1);transition:width 420ms var(--ease-out) var(--d,0ms)}
.rp-frow .rp-bar[data-v="0.0000"]{min-width:0}
.rp-frow .n{font:var(--t-body-strong);color:var(--text-strong);font-variant-numeric:tabular-nums}
.rp-frow .sm{text-align:right;font:var(--t-body);color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.rp-frow .now{display:flex;align-items:center;justify-content:flex-end;gap:4px;font:var(--t-body);color:var(--text-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.rp-frow .now .ic{width:12px;height:12px;color:var(--icon);opacity:0;transform:translateX(-4px);transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.rp-frow:hover .now .ic,.rp-frow:focus-visible .now .ic{opacity:1;transform:none}
.rp-frow:hover .now{color:var(--text)}

/* stage-to-stage conversion = neutral badges; the worst step and «Самый большой провал» = danger badges; < 3 deals = dashed */
@keyframes rp-fade{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
/* the badge line sits between two 36 px rows and overlaps 4 px of each (their bars are 8 px clear of the row edges), so a
   stage with a conversion adds 12 px, not 24; stages without one keep the plain 36 px rhythm (the empty spacer is hidden) */
.rp-cv{position:relative;z-index:1;display:flex;align-items:center;gap:8px;height:20px;margin:-4px 0;padding-left:140px;pointer-events:none;
  opacity:0;animation:rp-fade 300ms var(--ease-out) forwards;animation-delay:calc(var(--cd,0ms) + 160ms)}
.rp-cv > *{pointer-events:auto}
.rp-cv span,.rp-cv em{display:inline-flex;align-items:center;gap:2px;height:20px;padding:0 6px 0 4px;border-radius:var(--radius-xs);font:var(--t-caption-strong);font-style:normal;font-variant-numeric:tabular-nums;white-space:nowrap;
  background:var(--badge-neutral-bg);color:var(--badge-neutral-text);box-shadow:inset 0 0 0 1px var(--badge-neutral-border)}
.rp-cv span .ic{width:12px;height:12px;stroke-width:2.4}
.rp-cv em{padding:0 6px}
.rp-cv.bad span,.rp-cv em{background:var(--badge-danger-bg);color:var(--badge-danger-text);box-shadow:inset 0 0 0 1px var(--badge-danger-border)}
.rp-cv.bad span .ic{color:var(--danger)}
.rp-cv.low span{background:transparent;box-shadow:none;border:1px dashed var(--border)}
.rp-cv.none{display:none}

/* ── lost reasons: 4 px track --border-soft, fill --chart-1; the top reason = danger count ── */
.rp-lr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;width:calc(100% + 16px);margin:0 -8px;padding:10px 8px;text-align:left;border-top:1px solid var(--border-soft);transition:background var(--dur-1) var(--ease-out)}
.rp-lsum + .rp-lr{border-top:0}
.rp-lr:hover{background:var(--surface-hover)}
.rp-lr:focus-visible{outline:var(--focus-outline);outline-offset:-1px;box-shadow:none}
.rp-lr .nm{font:var(--t-body);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-lr:hover .nm{color:var(--text-strong)}
.rp-lr .n{justify-self:end;font:var(--t-body-strong);color:var(--text-strong);font-variant-numeric:tabular-nums;text-align:right}
.rp-lr .trk{height:4px;background:var(--border-soft)}
.rp-lr:hover .trk{background:var(--border)}
.rp-lr .rp-bar{display:block;height:4px;width:calc(var(--v,0) * 100%);background:var(--chart-1);transition:width 420ms var(--ease-out) var(--d,0ms)}
.rp-lr .sm{font:var(--t-body);color:var(--text-3);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.rp-lr.is-top .n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;font:var(--t-caption-strong);
  background:var(--badge-danger-bg);color:var(--badge-danger-text);box-shadow:inset 0 0 0 1px var(--badge-danger-border)}

/* ── revenue by month (inline SVG): grid, baseline, bars --chart-1, the period's months --chart-accent-bar, dashed plan ── */
.rp-plot{position:relative;width:100%;height:220px;min-width:0}
.rp-plot svg{display:block;overflow:visible}
.rp-plot .grid line{stroke:var(--chart-grid);stroke-width:1;shape-rendering:crispEdges}
.rp-plot .grid line.base{stroke:var(--chart-axis)}
.rp-plot text{font-family:var(--font-sans);font-size:12px;font-weight:400;fill:var(--chart-label)}
.rp-plot .yl{font-variant-numeric:tabular-nums}
.rp-plot .xl.hl{fill:var(--text-strong);font-weight:600}
.rp-plot .hit{fill:transparent}
.rp-plot .rp-col{cursor:pointer}
.rp-plot .rp-bar{fill:var(--chart-1);transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(var(--v,0));
  transition:transform 420ms var(--ease-out) var(--d,0ms),opacity var(--dur-2) var(--ease-out) 0ms}
.rp-plot .rp-bar.hl{fill:var(--chart-accent-bar)}
.rp-plot:has(.rp-col:hover) .rp-bar{opacity:.38}
.rp-plot .rp-col:hover .rp-bar{opacity:1}
.rp-plot .rp-col:hover .xl{fill:var(--text-strong)}
.rp-plot .plan{pointer-events:none}
.rp-plot .plan line{stroke:var(--chart-plan);stroke-width:1;stroke-dasharray:4 3;shape-rendering:crispEdges}
.rp-plot .plan text{fill:var(--text-3);paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}

/* ── sources: stacked 16 px bar (r4, 1 px gaps) + Stripe breakdown legend (pitch 40) ── */
.rp-stk{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;margin-bottom:8px}
.rp-bar2{display:flex;gap:1px;height:16px;min-width:0;border-radius:var(--radius-xs);overflow:hidden}
.rp-bar2 .none{font:var(--t-caption);line-height:16px;color:var(--text-3)}
.rp-sg{display:block;cursor:pointer;height:100%;flex:0 1 auto;width:calc(var(--v,0) * 100%);transition:width 420ms var(--ease-out) var(--d,0ms),opacity var(--dur-2) var(--ease-out) 0ms}
.rp-sg[data-v="0.0000"]{display:none}
.rp-s-site{background:var(--chart-1)}
.rp-s-wa{background:var(--chart-2)}
.rp-s-partner{background:var(--chart-3)}
.rp-s-repeat{background:var(--chart-4)}
.rp-s-other{background:var(--chart-neutral)}
.rp-card[data-hl] .rp-sg{opacity:.22}
.rp-card[data-hl="site"] .rp-s-site,.rp-card[data-hl="wa"] .rp-s-wa,.rp-card[data-hl="partner"] .rp-s-partner,
.rp-card[data-hl="repeat"] .rp-s-repeat,.rp-card[data-hl="other"] .rp-s-other{opacity:1}
.rp-srch,.rp-src{display:grid;grid-template-columns:minmax(0,1fr) 56px 40px 92px;gap:6px;align-items:center}
.rp-srch{margin-top:16px}
.rp-srch + .rp-src{border-top:0}                               /* the header's bottom rule is the first divider */
.rp-srch span:not(:first-child){text-align:right}
.rp-src{width:calc(100% + 16px);height:40px;margin:0 -8px;padding:0 8px;text-align:left;border-top:1px solid var(--border-soft);transition:background var(--dur-1) var(--ease-out)}
.rp-src:last-child{border-bottom:1px solid var(--border-soft)}
.rp-src:hover{background:var(--surface-hover)}
.rp-src:focus-visible{outline:var(--focus-outline);outline-offset:-1px;box-shadow:none}
.rp-src .nm{display:block;min-width:0;font:var(--t-body);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-src .sw{display:inline-block;width:12px;height:12px;margin-right:8px;vertical-align:-1px;border-radius:3px}
.rp-src .c{text-align:right;font:var(--t-body);color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.rp-src .c:last-child{font-weight:600;color:var(--text-strong)}                /* the amount column, as in a Stripe breakdown */
.rp-src .c small{margin-left:4px;font:var(--t-caption);color:var(--text-3)}

/* ── response time by manager: 14 px bars --chart-1 (over the goal --dot-red), dashed goal --chart-plan ── */
.rp-resp{--c1:220px;--c3:96px;--c4:112px;display:grid}
.rp-mh,.rp-mrow,.rp-scale{display:grid;grid-template-columns:var(--c1) minmax(0,1fr) var(--c3) var(--c4);gap:16px;align-items:center}
.rp-mh .r,.rp-scale .r{text-align:right}
.rp-mh .trk{position:relative;align-self:stretch}
.rp-mh .tl{position:absolute;left:calc(var(--t) * 100%);top:10px;z-index:1;transform:translateX(-50%);padding:0 4px;white-space:nowrap;background:var(--surface);font:var(--t-caption);color:var(--text-3)}
.rp-mh .tgt{position:absolute;left:calc(var(--t) * 100%);top:26px;bottom:0;border-left:1px dashed var(--chart-plan)}
.rp-mrow{width:calc(100% + 16px);margin:0 -8px;padding:8px;text-align:left;transition:background var(--dur-1) var(--ease-out)}
.rp-mrow:hover{background:var(--surface-hover)}
.rp-mrow.sel,.rp-mrow.sel:hover{background:var(--row-selected)}             /* calm §1.2: the filtered manager = the grey selected fill, one step above hover */
.rp-mrow:focus-visible{outline:var(--focus-outline);outline-offset:-1px;box-shadow:none}
.rp-mrow.team{border-bottom:1px solid var(--border-soft)}
/* a manager filter dims the other rows with token colours, not row opacity: the name --text-2, the rest --text-3 (both
   ≥ 4.5:1 on the card), only the bar, the avatar and the clock fade. Hover / keyboard focus show the row in full */
.rp-mrow :is(.nm b,.nm small,.val,.wt){transition:color var(--dur-3) var(--ease-out)}
.rp-mrow :is(.av,.wt .ic){transition:opacity var(--dur-3) var(--ease-out)}
.rp-mrow.dim:not(:hover,:focus-visible) .nm b{color:var(--text-2)}
.rp-mrow.dim:not(:hover,:focus-visible) :is(.nm small,.val,.wt){color:var(--text-3)}
.rp-mrow.dim:not(:hover,:focus-visible) :is(.rp-bar,.av,.wt .ic){opacity:.45}
.rp-mrow .who{display:flex;align-items:center;gap:12px;min-width:0}
.rp-mrow .nm{min-width:0}
.rp-mrow .nm b{display:block;font:var(--t-body-strong);color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-mrow .nm small{display:block;font:var(--t-caption);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-mrow .av .ic{width:16px;height:16px;stroke-width:2}
.rp-mrow .trk{position:relative;align-self:stretch;display:flex;align-items:center}
.rp-mrow .rp-bar{display:block;height:14px;width:calc(var(--v,0) * 100%);background:var(--chart-1);transition:width 420ms var(--ease-out) var(--d,0ms),opacity var(--dur-3) var(--ease-out)}
.rp-mrow.over .rp-bar{background:var(--dot-red)}
.rp-mrow.team .rp-bar{height:8px;background:var(--chart-neutral)}
.rp-mrow.team.over .rp-bar{background:var(--dot-red)}
.rp-mrow .tgt{position:absolute;left:calc(var(--t) * 100%);top:-8px;bottom:-8px;border-left:1px dashed var(--chart-plan);pointer-events:none}
.rp-mrow .val{text-align:right;font:var(--t-body-strong);color:var(--text-strong);font-variant-numeric:tabular-nums;white-space:nowrap}   /* over the goal too: the red bar is the one signal */
.rp-mrow .wt{display:flex;align-items:center;justify-content:flex-end;gap:4px;font:var(--t-body);color:var(--text-3);white-space:nowrap}
.rp-mrow .wt .ic{width:12px;height:12px;stroke-width:2.4}
.rp-mrow .wt.on{color:var(--text)}                               /* «ждут N» repeats on every manager row = status mark (calm §3.7): neutral text, the clock in --warning */
.rp-mrow .wt.on .ic{color:var(--warning)}
.rp-scale{padding:8px 0 0;font:var(--t-caption);color:var(--chart-label)}
.rp-scale .sc{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums}

/* ── WhatsApp vs Email: split bar --chart-2 / --chart-neutral + a small Stripe table. One colour per entity on the page:
   WhatsApp is --chart-2 here as in «Источники лидов» (.rp-s-wa); Email has no series colour elsewhere, so it takes the neutral ── */
.rp-chtop{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;font:var(--t-body);color:var(--text)}
.rp-chtop span{display:inline-flex;align-items:center;gap:6px}
.rp-chtop b{font-weight:600;color:var(--text-strong);font-variant-numeric:tabular-nums}
.rp-chtop .wa .ic{color:var(--wa)}
.rp-chtop .em .ic{color:var(--icon)}
.rp-split{display:flex;gap:1px;height:16px;border-radius:var(--radius-xs);overflow:hidden}
.rp-split .wa{background:var(--chart-2)}
.rp-split .em{background:var(--chart-neutral)}
/* single-line 36 px rows (§5.12). Each row is its own grid: label (takes the rest) · WhatsApp (as wide as this row's value) ·
   Email (at least 112). The value columns still share their right edges, and a row with short values («20%», «33%») lends
   its label the room, so «Конверсия в договор» stays on one line in the 4-column card; a label that still does not fit ellipsises.
   The rules are cell borders with no gaps, so they run unbroken; bleeds 8 px like the other cards' rows */
.rp-tbl{display:block;width:calc(100% + 16px);margin:16px -8px 0;font:var(--t-body)}
.rp-tbl :is(thead,tbody){display:block}
.rp-tbl tr{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(max-content,112px)}
.rp-tbl :is(th,td){display:block;min-width:0;height:var(--row-h);line-height:calc(var(--row-h) - 1px);white-space:nowrap}
.rp-tbl thead th{padding:0 0 0 12px;text-align:right;font:var(--t-caption-strong);line-height:var(--row-h);color:var(--text-strong);
  box-shadow:inset 0 1px 0 var(--border),inset 0 -1px 0 var(--border-soft)}
.rp-tbl thead th:first-child{padding-left:8px}
.rp-tbl tr > :last-child{padding-right:8px}
.rp-tbl tbody th{padding:0 0 0 8px;text-align:left;font-weight:400;color:var(--text);overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid var(--border-soft)}
.rp-tbl td{padding:0 0 0 12px;text-align:right;color:var(--text-2);font-variant-numeric:tabular-nums;border-bottom:1px solid var(--border-soft)}
.rp-tbl tbody tr:last-child > *{border-bottom-color:var(--border)}
.rp-tbl td.best{font-weight:600;color:var(--text-strong)}
/* status cells read as on the KPI strip and the manager rows: a neutral number, the colour only in a small mark —
   «Ждут ответа» a 12 px clock in --warning (calm §3.7 status mark), a first response over the 1 h goal a 6 px --dot-red */
.rp-tbl td.wt{color:var(--text-strong)}
.rp-tbl td.wt .ic{display:inline-block;width:12px;height:12px;margin-right:4px;vertical-align:-1px;stroke-width:2.4;color:var(--warning)}
.rp-tbl td.over{color:var(--text-strong)}
.rp-tbl td.over::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;vertical-align:1px;background:var(--dot-red)}

/* ── in-card empty (§5.24 #3): dashed box, centred, no tile ── */
.rp-empty{display:grid;justify-items:center;align-content:center;align-self:start;min-height:160px;padding:16px;text-align:center;border:1px dashed var(--border);border-radius:var(--radius-m);font:var(--t-caption);color:var(--text-3)}
.rp-empty .ic{width:20px;height:20px;margin-bottom:8px;color:var(--text-3);stroke-width:1.6}
.rp-empty b{font:var(--t-body-strong);color:var(--text-strong)}
.rp-empty span{max-width:300px;margin-top:2px}

/* ── footnote ── */
.rp-foot{display:flex;align-items:flex-start;gap:8px;margin:0;font:var(--t-caption);color:var(--text-3)}
.rp-foot .ic{flex:none;width:12px;height:12px;margin-top:2px;color:var(--icon)}
.rp-foot .lnk{flex:none;margin-left:auto;font:var(--t-caption-strong)}

/* ── chart tooltip (§5.18): white card r6, header strip, follows the cursor (no caret); lives in <body> ── */
.rp-tip{position:fixed;left:0;top:0;z-index:70;min-width:160px;max-width:290px;padding:0 0 8px;overflow:hidden;border-radius:var(--radius-s);
  background:var(--surface-raised);color:var(--text);font:var(--t-caption);box-shadow:var(--shadow-3);pointer-events:none;opacity:0;transition:opacity var(--dur-1) var(--ease-out)}
.rp-tip.is-open{opacity:1}
.rp-tip .lbl{display:flex;align-items:center;min-height:24px;padding:4px 8px;background:var(--surface-offset);box-shadow:inset 0 -1px 0 var(--border-soft);font:var(--t-caption-strong);color:var(--text-strong)}
.rp-tip > b{display:block;margin-bottom:4px;padding:8px 8px 0;font:var(--t-heading-s);color:var(--text-strong);font-variant-numeric:tabular-nums}
.rp-tip .lbl + .rp-tr{margin-top:8px}
.rp-tip .rp-tr{display:flex;justify-content:space-between;gap:16px;padding:0 8px;font:var(--t-caption);color:var(--text)}
.rp-tip .rp-tr span:last-child{font-weight:600;color:var(--text-strong);font-variant-numeric:tabular-nums;white-space:nowrap}
.rp-tip .hint{margin-top:6px;padding:6px 8px 0;font:var(--t-caption);color:var(--text-3);box-shadow:inset 0 1px 0 var(--border-soft)}

/* ── drawer content (drawers render in #overlay, outside .rp; raised surface) ── */
.rp-dsum{margin:0 0 8px;font:var(--t-body);color:var(--text-3)}
.rp-dsum b{font-weight:600;color:var(--text-strong);font-variant-numeric:tabular-nums}
.rp-dnote{margin:0 0 16px;font:var(--t-body);color:var(--text)}
.lbl.rp-dh{display:block;margin:24px 0 8px;font:var(--t-body-strong);color:var(--text-strong)}
/* deal lists = Stripe table rows (two-line, 56 px), --border rule above the first and below the last row. The rules run on the
   drawer content edge like .rp-mstat / .rp-def (no bleed); the 8 px is inner cell padding */
.rp-li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 12px;align-items:center;min-height:var(--row-h-2);margin:0;padding:8px;
  border-bottom:1px solid var(--border-soft);color:var(--text);text-decoration:none;transition:background var(--dur-1) var(--ease-out)}
:is(.rp-dsum,.rp-dh,.rp-mstat) + .rp-li{border-top:1px solid var(--border)}
.rp-li:not(:has(+ .rp-li)){border-bottom-color:var(--border)}
a.rp-li:hover{background:var(--surface-hover-raised);color:var(--text)}
a.rp-li:focus-visible{outline:var(--focus-outline);outline-offset:-1px;box-shadow:none}
.rp-li b{display:flex;align-items:center;gap:8px;min-width:0;font:var(--t-body-strong);color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-li small{grid-column:1;font:var(--t-caption);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-li .v{grid-column:2;grid-row:1/3;font:var(--t-body-strong);color:var(--text-strong);font-variant-numeric:tabular-nums;white-space:nowrap}
.rp-li .v .ic{display:inline-block;width:12px;height:12px;margin-right:4px;vertical-align:-1px;stroke-width:2.4;color:var(--warning)}   /* «ждут» list: status mark */
.rp-li .v.over::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;vertical-align:1px;background:var(--dot-red)}   /* first answer over the 1 h goal */
.rp-li.arch b{font-weight:500;color:var(--text-2)}
.rp-li .rp-tag{flex:none;display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:var(--radius-xs);font:var(--t-caption-strong);
  background:var(--badge-neutral-bg);color:var(--badge-neutral-text);box-shadow:inset 0 0 0 1px var(--badge-neutral-border)}
.rp-more{margin:0;padding:8px 0;font:var(--t-body);color:var(--text)}
.rp-dact{display:flex;justify-content:flex-start;margin-top:24px}
/* manager stats = 4-cell hairline grid (as the KPI strip): neutral numbers, an alert = an 8 px dot before the label
   (median over the 1 h goal red, «Ждут сейчас» > 0 orange) */
.rp-mstat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.rp-mstat > div{display:grid;gap:4px;min-width:0;padding:16px}
.rp-mstat > div:first-child{padding-left:0}
.rp-mstat > div + div{box-shadow:inset 1px 0 0 var(--border)}
.rp-mstat .lbl{font:var(--t-body);color:var(--text)}
.rp-mstat b{font:var(--t-metric-s);color:var(--text-strong);font-variant-numeric:tabular-nums;white-space:nowrap}
.rp-mstat > .alert .lbl::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;vertical-align:1px;background:var(--dot-red)}
.rp-mstat > .alert.wait .lbl::before{background:var(--dot-orange)}
/* the dot makes «● Ждут сейчас» 2 px wider than an equal quarter of the 572 px drawer: a label never wraps there, a column
   just takes the room its content needs and the rest share what is left (the drawer is narrower only on a phone) */
@media (min-width:572px){
  .rp-mstat{grid-template-columns:repeat(4,minmax(max-content,1fr))}
  .rp-mstat .lbl{white-space:nowrap}
}

/* «Как считается» definitions: 14/20 text, code in an offset r6 block, mono 12/16 */
.rp-def{padding:16px 0;border-bottom:1px solid var(--border-soft);scroll-margin-top:8px;transition:background var(--dur-2) var(--ease-out)}
.rp-def h4{margin:0 0 4px;font:var(--t-heading-s);color:var(--text-strong)}
.rp-def p{margin:0 0 8px;font:var(--t-body);color:var(--text)}
.rp-def code{display:block;margin:8px 0;padding:8px 12px;border-radius:var(--radius-s);background:var(--surface-offset);box-shadow:inset 0 0 0 1px var(--border-soft);
  font:var(--t-mono);color:var(--text);white-space:pre-wrap;word-break:break-word}
.rp-def .be{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:baseline;margin:0;font:var(--t-body);color:var(--text-3)}
.rp-def .be .lbl{color:var(--text-2)}
.rp-def.on{margin:0 -12px;padding:16px 12px;border-radius:var(--radius-s);border-bottom-color:transparent;background:var(--surface-hover-raised)}

/* ── enter choreography (first render only; .enter is removed after ~1 s) ── */
@keyframes rp-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rp.enter .rp-kpi{animation:rp-in var(--dur-4) var(--ease-out) both;animation-delay:calc(var(--i,0) * 30ms)}
.rp.enter .rp-ins,.rp.enter .rp-card{animation:rp-in var(--dur-4) var(--ease-out) both;animation-delay:calc(60ms + var(--i,0) * 40ms)}

/* ── pressed state for every clickable row ── */
.rp-frow:active,.rp-lr:active,.rp-src:active,.rp-mrow:active,.rp-kpi:active{background:var(--surface-pressed)}
.rp-kpi:first-child:active{box-shadow:-16px 0 0 var(--surface-pressed)}
.rp-insi:active,.rp-cbtn:active{opacity:.7}

/* ── responsive: container queries on #view (§4.6; old viewport 1180 / 980 / 640 − 56 rail, rounded down to 20) ── */
@container view (max-width:1120px){
  .rp-card{grid-column:1/-1}
  /* 5 cells no longer fit (labels, value + delta, subs would be cut): 3 + 2 on a 6-column hairline grid */
  .rp-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}
  .rp-kpi{grid-column:span 2}
  .rp-kpi:nth-child(n+4){grid-column:span 3;border-top:1px solid var(--border)}
  .rp-kpi:nth-child(4),.rp-kpi:nth-child(4):focus-visible{padding-left:0;box-shadow:none}
  .rp-kpi:nth-child(4):hover{box-shadow:-16px 0 0 var(--surface-hover)}
  .rp-kpi:nth-child(4):active{box-shadow:-16px 0 0 var(--surface-pressed)}
}
@container view (max-width:920px){
  .rp-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rp-kpi:nth-child(n){grid-column:auto}
  .rp-kpi:nth-child(odd){padding-left:0;box-shadow:none}
  .rp-kpi:nth-child(even),.rp-kpi:nth-child(even):is(:hover,:active,:focus-visible){padding-left:16px;box-shadow:inset 1px 0 0 var(--border)}
  .rp-kpi:nth-child(odd):hover{box-shadow:-16px 0 0 var(--surface-hover)}
  .rp-kpi:nth-child(odd):active{box-shadow:-16px 0 0 var(--surface-pressed)}
  .rp-kpi:nth-child(odd):focus-visible{box-shadow:none}
  .rp-kpi:nth-child(n+3){border-top:1px solid var(--border)}
  .rp-kpi:last-child{grid-column:1/-1}
  .rp-tb .r{margin-left:0;width:100%}
  .rp-resp{--c1:170px;--c4:92px}
  .rp-fhead,.rp-frow{grid-template-columns:108px minmax(0,1fr) 104px}
  .rp-fhead span:nth-child(4),.rp-frow .now{display:none}
  .rp-cv{padding-left:120px}
}
@container view (max-width:580px){
  .rp-range{width:100%;margin-left:0}
  .rp-mh,.rp-mrow,.rp-scale{grid-template-columns:minmax(0,1fr) 72px}
  .rp-mh .trk,.rp-mrow .trk,.rp-scale .sc,.rp-mh .lbl:last-child,.rp-mrow .wt,.rp-scale span:last-child{display:none}
}

/* ── reduced motion: no transforms, no growth; values appear in place ── */
@media (prefers-reduced-motion:reduce){
  .rp-frow .rp-bar,.rp-lr .rp-bar,.rp-mrow .rp-bar,.rp-sg,.rp-plot .rp-bar{transition:none!important}
  .rp.enter .rp-kpi,.rp.enter .rp-ins,.rp.enter .rp-card{animation:none}
  .rp-cv,.rp-delta{animation:none;opacity:1}
  .rp-card.flash{animation:none;border-color:var(--accent)}
  .rp-kpi .go,.rp-insi .ic,.rp-cbtn,.rp-frow .now .ic{transform:none!important}
  .rp-card.out{transform:none}
  .rp-ib.spin .ic{animation:none}
  .rp-scroll{scroll-behavior:auto}
}