/* Charts + small UI bits of round 2 (2026-10-24): the FunnelChart, Sankey, rounded donut, date-range calendar,
   AlertBadge, AvatarCircles, the "Messaging as" picker, team photos, and the Main funnel / Skool / Instagram pages.
   Light + dark through the CRM tokens (css/shadcn.css); motion respects prefers-reduced-motion. */

/* ---------------------------------------------------------------- team photos */
.avatar--photo { padding: 0; overflow: hidden; background: var(--paper-2); }
.avatar--photo picture, .avatar--photo img { display: block; width: 100%; height: 100%; }
.avatar--photo img { object-fit: cover; border-radius: 50%; }
.avatar--xs { width: 18px; height: 18px; font-size: 8.5px; border-width: 1px; }
.avatar--empty { background: var(--paper-2); color: var(--muted); }
.me-av { display: inline-flex; }
.pick { display: flex; align-items: center; gap: 8px; }
.pick .select { flex: 1; min-width: 0; }
.pick-av { display: inline-flex; }
.acts__by { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.timeline__meta .avatar--xs { display: inline-grid; vertical-align: -4px; margin-right: 3px; }

/* ---------------------------------------------------------------- tooltip (shared) */
.ctip[hidden] { display: none; }
.ctip { position: absolute; z-index: 30; pointer-events: none; display: grid; gap: 2px; min-width: 150px; max-width: 260px; padding: 10px 12px;
  border-radius: 12px; background: var(--glass); color: var(--ink); box-shadow: var(--frame-shadow); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  font: 500 12.5px/1.35 var(--f-body); }
.ctip b { font-weight: 650; font-size: 12.5px; }
.ctip__big { font: 600 20px/1.2 var(--f-mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ctip small { color: var(--muted); font-size: 11.5px; margin-top: 3px; }
:root[data-theme="light"] .ctip { background: rgba(255, 255, 255, 0.86); }

/* ---------------------------------------------------------------- FunnelChart */
.fc { position: relative; }
.fc__caption { margin: 2px 0 0; font: 500 12px var(--f-body); color: var(--muted); text-align: right; }
.fc__svg { display: block; width: 100%; height: auto; overflow: visible; }
.fc__svg--v { display: none; max-width: 460px; margin: 0 auto; }
@media (max-width: 700px) { .fc__svg--h { display: none; } .fc__svg--v { display: block; } }
.fc__band { fill: var(--hover); opacity: 0.55; }
.fc__div { stroke: var(--line); stroke-dasharray: 3 5; }
.fc__hit { fill: transparent; }
.fc__seg { outline: none; cursor: default; transition: opacity 0.25s var(--ease); }
.fc__layer { transform-box: fill-box; transform-origin: center; transition: transform 0.3s var(--ease); }
.fc__layer--0 { opacity: 0.2; }
.fc__layer--1 { opacity: 0.42; }
.fc__layer--2 { opacity: 1; }
.fc__seg.is-missing .fc__layer { stroke: var(--dash); stroke-width: 1.5; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.fc.is-hover .fc__seg:not(.is-on) { opacity: 0.4; }
.fc__seg.is-on .fc__layer--0 { transform: scale(1, 1.06); }
.fc__seg.is-on .fc__layer--1 { transform: scale(1, 1.04); }
.fc__seg:focus-visible .fc__hit { stroke: var(--ring); stroke-width: 2; }
.fc__value { font: 650 26px var(--f-mono); letter-spacing: -0.03em; fill: var(--ink); font-variant-numeric: tabular-nums; }
.fc__svg--v .fc__value { font-size: 24px; }
.fc__name { font: 550 13.5px var(--f-body); fill: var(--muted); }
.fc__svg--v .fc__name { font-size: 14px; fill: var(--ink-2); }
.fc__tag { font: 500 11px var(--f-body); fill: var(--muted); }
.fc__pill rect { fill: var(--paper); stroke: var(--line-strong); }
.fc__pill text { font: 650 12.5px var(--f-mono); fill: var(--ink); font-variant-numeric: tabular-nums; }
.fc__pill--first rect { fill: var(--ink); stroke: none; }
.fc__pill--first text { fill: var(--on-ink); }
@keyframes fc-grow { from { transform: scale(0.15, 0.05); opacity: 0; } }
@keyframes fc-fade { from { opacity: 0; transform: translateY(6px); } }
.fc__layers { transform-box: fill-box; transform-origin: left center; animation: fc-grow 0.7s var(--ease) both; animation-delay: calc(var(--i) * 85ms); }
.fc__svg--v .fc__layers { transform-origin: center top; }
@keyframes fc-op { from { opacity: 0; } }
.fc__seg text { animation: fc-fade 0.5s var(--ease) both; animation-delay: calc(var(--i) * 85ms + 200ms); }
.fc__pill { animation: fc-op 0.5s var(--ease) both; animation-delay: calc(var(--i) * 85ms + 200ms); } /* opacity only: the pill keeps its SVG translate */
.fc__pill text { animation: none; }
.is-redraw .fc__layers, .is-redraw .fc__seg text, .is-redraw .fc__pill, .fc.is-still .fc__layers, .fc.is-still .fc__seg text, .fc.is-still .fc__pill { animation: none; }

/* ---------------------------------------------------------------- Sankey */
.sk { position: relative; }
.sk__svg { display: block; width: 100%; height: auto; }
.sk__link { opacity: 0.5; transition: opacity 0.2s var(--ease); outline: none; }
.sk__link.is-muted { opacity: 0.18; }
.sk.is-hover .sk__link { opacity: 0.12; }
.sk.is-hover .sk__link.is-on { opacity: 0.85; }
.sk__node rect { stroke: rgba(0, 0, 0, 0.12); }
.sk__node.is-muted rect { fill: var(--paper-2); stroke: var(--line-strong); stroke-dasharray: 4 4; }
.sk__node { outline: none; }
.sk__node:focus-visible rect { stroke: var(--ring); stroke-width: 3; }
.sk__label { font: 600 11.5px var(--f-body); fill: #fff; }
.sk__val { font: 700 14px var(--f-mono); fill: #fff; }
.sk__label.is-dark, .sk__val.is-dark { fill: #17130a; }
.sk__node.is-muted .sk__label, .sk__node.is-muted .sk__val { fill: var(--muted); stroke: none; }
@keyframes sk-in { from { opacity: 0; } }
.sk__node, .sk__links { animation: sk-in 0.6s var(--ease) both; }
@media (max-width: 700px) { .sk { overflow-x: auto; -webkit-overflow-scrolling: touch; } .sk__svg { min-width: 560px; } }
.flow-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.flow-stats div { display: grid; gap: 2px; }
.flow-stats span { font-size: 12px; color: var(--muted); }
.flow-stats b { font-size: 22px; letter-spacing: -0.03em; }
.flow-stats small { font-size: 11.5px; color: var(--muted); }

/* ---------------------------------------------------------------- rounded donut */
.dn { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: center; }
.dn__legend { width: 100%; }
.dn__chart { max-width: 220px; width: 100%; }
.dn__svg { display: block; width: 100%; height: auto; overflow: visible; }
.dn__slice { outline: none; transition: opacity 0.2s var(--ease), transform 0.25s var(--ease); transform-box: fill-box; transform-origin: center; }
.dn.is-hover .dn__slice:not(.is-on) { opacity: 0.38; }
.dn__slice.is-on { transform: scale(1.03); }
.dn__slice:focus-visible path { stroke: var(--ring); stroke-width: 3; }
.dn__val { font: 650 12px var(--f-mono); pointer-events: none; }
.dn__total { font: 650 30px var(--f-mono); letter-spacing: -0.04em; fill: var(--ink); }
.dn__cap { font: 500 12px var(--f-body); fill: var(--muted); }
.dn__empty { fill: none; stroke: var(--track); }
.dn__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dn__item { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 44px; gap: 8px; align-items: center; font-size: 13px; padding: 3px 6px; border-radius: 6px; }
.dn__item.is-on { background: var(--hover); }
.dn__item.is-muted { color: var(--muted); }
.dn__dot { width: 10px; height: 10px; border-radius: 3px; }
.dn__dot--hollow { border: 1.5px dashed var(--dash); }
.dn__lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn__n { font: 600 13px var(--f-mono); text-align: right; }
.dn__n--note { grid-column: span 2; font: italic 500 12px var(--f-body); }
.dn__pct { font: 500 12px var(--f-mono); color: var(--muted); text-align: right; }
@keyframes dn-in { from { opacity: 0; transform: scale(0.85); } }
.dn__slice { animation: dn-in 0.6s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
@media (max-width: 520px) { .dn { grid-template-columns: minmax(0, 1fr); justify-items: center; } .dn__legend { width: 100%; } }

/* ---------------------------------------------------------------- trend badge */
.trend { display: inline-flex; align-items: center; gap: 1px; margin-left: 8px; padding: 2px 8px; border-radius: 99px; font: 650 11.5px var(--f-mono); background: var(--pill-mid-bg); color: var(--pill-mid-fg); vertical-align: 2px; }
.trend--up { background: var(--lime-soft); color: var(--lime-ink); }
.trend--down { background: var(--red-soft); color: var(--red-ink); }
.trend__sfx { font-family: var(--f-body); font-weight: 500; }

/* ---------------------------------------------------------------- date-range calendar */
.rp { display: inline-flex; }
.rp__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink-2); font: 500 13px var(--f-body); cursor: pointer; }
.rp__btn .icon { width: 15px; height: 15px; }
.rp__btn.is-on { border-color: var(--ink); color: var(--ink); }
.rp__btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.rp__pop { position: absolute; z-index: 80; width: 296px; padding: 12px; border-radius: 16px; background: var(--paper); box-shadow: var(--frame-shadow); }
.rp__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rp__title { font: 650 14px var(--f-body); }
.rp__nav { font-size: 20px; line-height: 1; }
.rp__week, .rp__row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.rp__week span { text-align: center; font: 500 11px var(--f-body); color: var(--muted); padding: 4px 0; }
.rp__grid { display: grid; gap: 2px; }
.rp__day { position: relative; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: 500 13px var(--f-mono); cursor: pointer; font-variant-numeric: tabular-nums; }
.rp__day:hover { background: var(--hover); }
.rp__day:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.rp__day.is-out { color: var(--muted); opacity: 0.55; }
.rp__day.is-future { color: var(--muted); }
.rp__day.is-in { background: var(--red-soft); border-radius: 4px; color: var(--ink); }
.rp__day.is-start, .rp__day.is-end { background: var(--red-btn); color: #fff; }
.rp__day.is-today::after { content: ''; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--red); }
.rp__day.is-start.is-today::after, .rp__day.is-end.is-today::after { background: #fff; }
.rp__hint { margin: 8px 2px 0; font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- AlertBadge */
.ab-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.view-actions .ab-row { margin: 0; }
.ab { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 4px 6px 4px 11px; border-radius: 99px; font: 600 12.5px var(--f-body); color: #fff; max-width: 100%; }
.ab--error { background: #dc2626; }
.ab--success { background: #15803d; }
.ab--info { background: #2563eb; }
.ab__ico { width: 15px; height: 15px; flex: none; }
.ab__lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab__sep { width: 1px; align-self: stretch; margin: 3px 0; background: rgba(255, 255, 255, 0.4); }
.ab__act { display: inline-flex; align-items: center; padding: 3px 9px 3px 4px; border: 0; border-radius: 99px; background: transparent; color: #fff; font: 600 12.5px var(--f-body); text-decoration: none; cursor: pointer; white-space: nowrap; }
.ab__act:hover { background: rgba(255, 255, 255, 0.16); }
.ab__act:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* ---------------------------------------------------------------- AvatarCircles */
.avc { display: inline-flex; align-items: center; }
.avc__a { width: 30px; height: 30px; margin-left: -9px; border: 2px solid var(--paper); box-shadow: none; font-size: 11px; position: relative; }
.avc__a:first-child { margin-left: 0; }
.avc__more { background: var(--ink); color: var(--on-ink); font: 650 10.5px var(--f-mono); }
.avc--sm .avc__a { width: 24px; height: 24px; margin-left: -7px; font-size: 9.5px; }

/* ---------------------------------------------------------------- "Messaging as" picker */
.mp { position: relative; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mp__prefix { font: 500 12.5px var(--f-body); color: var(--muted); }
.mp__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 10px 4px 5px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); font: 600 13.5px var(--f-body); cursor: pointer; }
.mp__btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.mp__btn .avatar { width: 28px; height: 28px; }
.mp__roles { font: 500 11.5px var(--f-body); color: var(--muted); }
.mp__caret { color: var(--muted); font-size: 11px; }
.mp__list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 250px; margin: 0; padding: 6px; list-style: none; border-radius: 14px; background: var(--paper); box-shadow: var(--frame-shadow); }
.mp__list:focus { outline: none; }
.mp__prefix + .mp__btn + .mp__list { left: auto; }
.mp__opt { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 10px; cursor: pointer; font-size: 13.5px; }
.mp__opt.is-active { background: var(--hover); }
.mp__opt .mp__name { font-weight: 600; }
.mp__opt .mp__roles { margin-left: auto; }
.mp__tick { color: var(--lime-ink); font-weight: 700; }

/* ---------------------------------------------------------------- Main funnel page + dashboard card */
.mf-view > * + * { margin-top: 14px; }
.mf-note { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: var(--radius); background: var(--paper-2); color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.mf-note .icon { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.mf-card { padding-bottom: 14px; }
.mf-title { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.mf-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--ink); color: var(--on-ink); font: 700 12px var(--f-mono); }
.mf-kind { font: 500 12px var(--f-body); color: var(--muted); }
.mf-foot { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin-top: 6px; font-size: 13px; }
.mf-foot b { font-family: var(--f-mono); }
.mf-ig, .mf-members, .mf-links { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mf-links { margin-left: auto; gap: 16px; }
.mf-bridge { display: flex; align-items: center; gap: 10px; margin: 6px 0 !important; color: var(--muted); font-size: 12.5px; }
.mf-bridge__line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong)); }
.mf-bridge__arrow { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--paper); box-shadow: var(--card-shadow); color: var(--ink); font-weight: 700; }
.mf-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; }
.mf-grid > .card { margin-top: 0; }
@media (max-width: 1100px) { .mf-grid { grid-template-columns: minmax(0, 1fr); } }
.mf-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 8px; vertical-align: 0; }
table.mf-src th:nth-child(5) { display: table-cell; }
tr.is-muted td { color: var(--muted); }
.mf-notyet { text-align: center; font-style: italic; color: var(--muted); }
.subs { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.subs b { color: var(--ink); font-size: 14px; }
.subs .trend { margin-left: 2px; }
.subs__spark { width: 64px; height: 18px; }
.subs__spark path { fill: none; stroke: var(--red); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.mf-dash { margin-bottom: 16px; }
.mf-dash__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mf-dash__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px; }
.mf-dash__grid > .card { margin-top: 0; }
.mf-dash .fc__value { font-size: 24px; }
.mf-dash .fc__name { font-size: 12.5px; }
.mf-dash__grid > .mf-card { display: flex; flex-direction: column; }
.mf-dash__grid .fc { margin-top: auto; }
@media (max-width: 1200px) { .mf-dash__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- Skool + Instagram DM work */
.dm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 14px 0; }
.dm-bar__dest { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dm-bar__hint { flex: 1 1 320px; margin: 0; font-size: 12.5px; }
.dm-bar__edit { margin-left: auto; }
.dm-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 12px; color: var(--muted); }
.dm-steps--none { font-style: italic; }
.dm-steps__who { color: var(--ink-2); }
.dm-step { display: inline-flex; align-items: center; gap: 4px; }
.dm-step .icon { width: 12px; height: 12px; }
.dm-step.is-on { color: var(--lime-ink); font-weight: 600; }
.dm-step__dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--dash); }
.dm-steps__lead { margin-left: auto; font-size: 12px; }
.sk-card--done { box-shadow: inset 3px 0 0 var(--lime), var(--card-shadow); }
.sk-card__msg { display: grid; gap: 8px; }
.sk-card__tpl { width: 100%; }
.sk-card__acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.sk-card__url { font: 500 11.5px var(--f-mono); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.more-row { display: flex; justify-content: center; margin: 4px 0 18px; }
.ig-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 14px; }
.ig-add__label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; flex-basis: 100%; }
.ig-add .filter { flex: 1 1 180px; }
.ig-card.is-off { opacity: 0.6; }
.avatar--ig { background: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af); color: #fff; border: 0; }
.booked-today { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius); background: var(--paper); box-shadow: var(--card-shadow); font-size: 13px; }
.booked-today__grp { display: inline-flex; align-items: center; gap: 10px; }

@media (prefers-reduced-motion: reduce) {
  .fc__layers, .fc__seg text, .fc__pill, .sk__node, .sk__links, .dn__slice { animation: none !important; }
  .fc__layer, .fc__seg, .sk__link, .dn__slice { transition: none !important; }
}
@media (max-width: 640px) {
  .dm-bar { gap: 10px; }
  .dm-bar__edit { margin-left: 0; }
  .mf-links { margin-left: 0; }
  .flow-stats b { font-size: 18px; }
}
.ig-add .filter .select { width: 100%; }