/* Presentation-only layer. The text, data, chart geometry and formulas remain
   owned by the analytics modules; effects never rewrite a numeric counter. */
:root {
  --motion-blue: #2477e8;
  --motion-purple: #9366dd;
  --motion-teal: #20a790;
  --motion-surface: rgba(255,255,255,.88);
  --motion-line: rgba(80,105,150,.13);
  --motion-glint: rgba(255,255,255,.88);
  --motion-ease: cubic-bezier(.22,.8,.25,1);
}
:root[data-appearance=dark] {
  --motion-surface: rgba(30,44,66,.94);
  --motion-line: rgba(177,199,238,.18);
  --motion-glint: rgba(255,255,255,.2);
}

/* Layered translucent symbols: a quiet tint behind a crisp, readable glyph. */
.workspace .nav-item .nav-icon,
.motion-metric-icon {
  --motion-tint: #2477e8;
  position:relative;isolation:isolate;overflow:visible;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  color:var(--motion-tint);
  background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(235,244,255,.42));
  border:1px solid var(--motion-glint);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 -1px 1px rgba(62,103,158,.1),0 4px 10px -5px rgba(32,70,130,.3);
  -webkit-backdrop-filter:blur(9px) saturate(1.4);backdrop-filter:blur(9px) saturate(1.4);
  transition:transform 360ms var(--motion-ease),box-shadow 280ms ease;
}
.workspace .nav-item .nav-icon {width:30px;height:30px;border-radius:10px}
.workspace .nav-icon::before,.motion-metric-icon::before {
  content:"";position:absolute;inset:6px 4px 3px 7px;border-radius:6px;
  background:var(--motion-tint);opacity:.14;transform:translate(2px,2px) rotate(-9deg);z-index:-1;
  transition:transform 360ms var(--motion-ease),opacity 280ms ease;pointer-events:none;
}
.workspace .nav-icon::after,.motion-metric-icon::after {
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.6),transparent 46%,rgba(255,255,255,.13));
}
.workspace .nav-icon .icon,.workspace .nav-item.active .nav-icon .icon {
  color:var(--motion-tint);width:18px;height:18px;stroke-width:1.8;position:relative;z-index:1;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.4));
}
.workspace .nav-item[data-view=creators] .nav-icon {--motion-tint:#2585a9}
.workspace .nav-item[data-view=posts] .nav-icon {--motion-tint:#9255c7}
.workspace .nav-item[data-view=tasks] .nav-icon {--motion-tint:#c4771d}
.workspace .nav-item[data-view=barter] .nav-icon {--motion-tint:#c74d86}
.workspace .nav-item[data-view=sales] .nav-icon {--motion-tint:#158a78}
.workspace .nav-item[data-view=economy] .nav-icon {--motion-tint:#278743}
.workspace .nav-item[data-view=organization] .nav-icon {--motion-tint:#7761cb}
.workspace .nav-item[data-view=users] .nav-icon {--motion-tint:#51799e}
.workspace .nav-item[data-view=sources] .nav-icon {--motion-tint:#627386}
.workspace .nav-item.active {background:linear-gradient(110deg,var(--mac-accent-soft),var(--mac-glass-strong))}
.workspace .nav-item:hover .nav-icon,.workspace .nav-item:focus-visible .nav-icon {transform:translateY(-2px) rotate(-4deg);box-shadow:inset 0 1px 1px var(--motion-glint),0 6px 13px -5px rgba(32,70,130,.32)}
.workspace .nav-item:hover .nav-icon::before {transform:translate(3px,3px) rotate(-16deg);opacity:.21}
.motion-icon {transition:transform 320ms var(--motion-ease);transform-origin:50% 50%}
.button:hover .motion-icon:not(.spinning),.icon-button:hover .motion-icon:not(.spinning) {transform:translateY(-1px) rotate(-4deg)}
.button:active .motion-icon,.icon-button:active .motion-icon {transform:scale(.94)}

/* Neutral, calm data surfaces. Colour identifies a measure without washing out
   the complete card or lowering contrast of the actual figures. */
.metric.motion-metric {position:relative;background:var(--motion-surface);border-color:var(--motion-line);box-shadow:0 2px 4px rgba(35,59,100,.025),0 12px 30px -22px rgba(35,59,100,.28);overflow:visible}
.executive-metrics .metric.motion-metric:first-child {background:linear-gradient(130deg,var(--motion-surface) 57%,var(--mac-accent-soft));border-color:var(--motion-line)}
.metric.motion-metric>.metric-label {display:block;padding-right:43px;min-height:18px}
.metric.motion-metric>strong {display:block;margin-top:13px;position:relative;font-variant-numeric:tabular-nums;line-height:1.2}
.motion-metric-icon {position:absolute;top:17px;right:18px;width:34px;height:34px;border-radius:11px;pointer-events:none}
.motion-metric-icon svg {width:19px;height:19px;position:relative;z-index:1;stroke-width:1.8}
.motion-metric-icon[data-icon=eye],.motion-metric-icon[data-icon=play] {--motion-tint:#8760cb}
.motion-metric-icon[data-icon=wallet],.motion-metric-icon[data-icon=coins] {--motion-tint:#1b8a69}
.motion-metric-icon[data-icon=layers] {--motion-tint:#527797}
.metric.motion-metric.accent-coral>strong {color:var(--mac-purple)}
.metric.motion-metric.accent-lime>strong {color:var(--mac-accent)}
.cp-company-pulse {background:var(--motion-surface);border-color:var(--motion-line)}
.cp-cohorts article {background:var(--mac-well);border-color:var(--motion-line);box-shadow:inset 0 1px 0 var(--mac-rim)}
.cp-cohorts article[data-cohort=staff] h3::before,.cp-cohorts article[data-cohort=barter] h3::before,.cp-cohorts article[data-cohort=corporate] h3::before {content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--motion-blue);margin-right:7px;vertical-align:1px}
.cp-cohorts article[data-cohort=barter] h3::before {background:var(--motion-purple)}
.cp-cohorts article[data-cohort=corporate] h3::before {background:var(--motion-teal)}
.cp-rates>div {border:1px solid var(--motion-line);background:var(--mac-well)}
.cp-rates strong,.cp-search-summary strong,.cp-product-counts strong {font-variant-numeric:tabular-nums;letter-spacing:-.7px}
.cp-bars i {background:linear-gradient(90deg,#4a9bf1,#7e64d9);box-shadow:inset 0 1px 0 rgba(255,255,255,.45);transform-origin:left center}
.cp-bars b {font-variant-numeric:tabular-nums}

/* The funnel remains schematic; the donut alone uses confirmed quantitative
   proportions. Their separate labels explain that distinction. */
.motion-chart-layout {display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:28px;align-items:center;margin:24px 0 14px;min-width:0}
.motion-chart-layout>.graphic-funnel.cp-four {width:100%;max-width:820px;margin:0 auto}
.motion-chart-layout .cp-four .funnel-level {min-height:86px;gap:5px 15px}
.motion-chart-layout .funnel-level {box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.graphic-funnel .funnel-level::after {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,.14),transparent 42%)}
.motion-contribution {position:relative;padding:23px 21px;border-radius:22px;border:1px solid var(--motion-line);background:linear-gradient(150deg,var(--mac-input),var(--mac-well));box-shadow:inset 0 1px 0 var(--mac-rim);min-width:0}
.motion-contribution h3 {font-size:15px;letter-spacing:-.3px;margin:0 0 8px;font-weight:650}
.motion-contribution>.motion-caption {margin:0;font-size:11px;color:var(--mac-secondary);line-height:1.55}
.motion-donut {position:relative;display:grid;place-items:center;width:190px;height:190px;max-width:100%;margin:18px auto 19px;isolation:isolate}
.motion-donut>svg {display:block;width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}
.motion-donut-track {fill:none;stroke:var(--mac-border);stroke-width:12}
.motion-donut-arc {fill:none;stroke-width:12;stroke-linecap:butt;transform-origin:center;filter:drop-shadow(0 2px 2px rgba(47,72,128,.1))}
.motion-donut-total {position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;pointer-events:none}
.motion-donut-total strong {font-size:38px;font-weight:650;color:var(--mac-ink);letter-spacing:-1.3px;line-height:1.15;font-variant-numeric:tabular-nums}
.motion-donut-total small {font-size:11px;color:var(--mac-secondary);line-height:1.4;max-width:110px}
.motion-legend {list-style:none;display:grid;gap:11px;margin:0;padding:0;font-size:11px;color:var(--mac-secondary)}
.motion-legend li {display:grid;grid-template-columns:9px minmax(0,1fr) auto;gap:3px 7px;align-items:center;min-width:0}
.motion-key {display:block;width:7px;height:7px;border-radius:50%;background:var(--motion-key,var(--motion-blue))}
.motion-legend-label {min-width:0;line-height:1.5;color:var(--mac-ink)}
.motion-legend-label>small {display:block;font-size:10px;color:var(--mac-secondary);line-height:1.5}
.motion-legend li>b {font-weight:650;color:var(--mac-ink);font-variant-numeric:tabular-nums}
.motion-legend li>small {grid-column:2/4;font-size:10px;color:var(--mac-secondary);line-height:1.4}

/* No concealed content or perpetual dashboard movement. IntersectionObserver
   starts a short, one-time emphasis; values are never counted up from zero. */
.motion-reveal {opacity:1}
.motion-reveal.motion-visible {animation:motion-surface-enter 520ms var(--motion-ease) both;animation-delay:var(--motion-delay,0ms)}
.graphic-funnel.motion-visible .funnel-level {animation:motion-level-enter 620ms var(--motion-ease) both}
.graphic-funnel.motion-visible .funnel-level:nth-child(2) {animation-delay:60ms}
.graphic-funnel.motion-visible .funnel-level:nth-child(3) {animation-delay:120ms}
.graphic-funnel.motion-visible .funnel-level:nth-child(4) {animation-delay:180ms}
.cp-bars.motion-visible i {animation:motion-bar-enter 650ms var(--motion-ease) both}
.motion-contribution.motion-visible .motion-donut>svg {animation:motion-donut-enter 650ms var(--motion-ease) both}
@keyframes motion-surface-enter {from{opacity:.72;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes motion-level-enter {from{opacity:.7;transform:translateY(4px) scaleX(.965)}to{opacity:1;transform:translateY(0) scaleX(1)}}
@keyframes motion-bar-enter {from{transform:scaleX(.02)}to{transform:scaleX(1)}}
@keyframes motion-donut-enter {from{opacity:.65;transform:rotate(-98deg) scale(.96)}to{opacity:1;transform:rotate(-90deg) scale(1)}}

:root[data-appearance=dark] .workspace .nav-item .nav-icon,
:root[data-appearance=dark] .motion-metric-icon {background:linear-gradient(145deg,rgba(160,190,235,.17),rgba(75,105,152,.08));box-shadow:inset 0 1px 0 rgba(235,245,255,.22),0 3px 9px rgba(0,0,0,.16)}
:root[data-appearance=dark] .workspace .nav-icon::before,
:root[data-appearance=dark] .motion-metric-icon::before {opacity:.32}
:root[data-appearance=dark] .workspace .nav-icon .icon,
:root[data-appearance=dark] .workspace .nav-item.active .nav-icon .icon,
:root[data-appearance=dark] .motion-metric-icon svg {color:#b2d2ff;filter:none}
:root[data-appearance=dark] .workspace .nav-icon::after,
:root[data-appearance=dark] .motion-metric-icon::after {background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 50%)}

@media(max-width:1250px) {
  .motion-chart-layout {grid-template-columns:minmax(0,1fr) 265px;gap:18px}
  .motion-contribution {padding:20px 17px}
  .motion-donut {width:166px;height:166px}
  .motion-chart-layout .cp-four .funnel-level {grid-template-columns:1fr;gap:4px;padding:12px 10%;min-height:92px}
  .motion-chart-layout .cp-four .funnel-level small {grid-column:1}
  .motion-chart-layout .cp-four .funnel-level>strong {font-size:25px}
  .motion-chart-layout .cp-four .funnel-level-label {max-width:none;font-size:12px}
}
@media(max-width:1100px) {
  .motion-chart-layout {grid-template-columns:1fr;gap:20px}
  .motion-contribution {display:grid;grid-template-columns:190px minmax(0,1fr);column-gap:24px;align-items:center;padding:22px}
  .motion-contribution h3,.motion-contribution>.motion-caption {grid-column:2}
  .motion-contribution h3 {align-self:end;margin-bottom:7px}
  .motion-contribution>.motion-caption {align-self:start;margin-bottom:14px}
  .motion-donut {grid-column:1;grid-row:1/4;width:180px;height:180px;margin:0}
  .motion-legend {grid-column:2;align-self:start}
  .motion-chart-layout .cp-four .funnel-level {grid-template-columns:max-content max-content;min-height:84px}
  .motion-chart-layout .cp-four .funnel-level small {grid-column:1/3}
}
@media(max-width:600px) {
  .motion-metric-icon {width:30px;height:30px;top:13px;right:13px;border-radius:10px}
  .metric.motion-metric>.metric-label {padding-right:33px;font-size:11px}
  .motion-metric-icon svg {width:17px;height:17px}
  .metric.motion-metric>strong {margin-top:13px}
  .motion-chart-layout {margin-top:18px;gap:16px}
  .motion-chart-layout .cp-four .funnel-level {grid-template-columns:1fr;min-height:96px;padding:13px 12px;border-radius:14px}
  .motion-chart-layout .cp-four .funnel-level small {grid-column:1;font-size:10px}
  .motion-contribution {grid-template-columns:132px minmax(0,1fr);gap:10px 15px;padding:18px 14px}
  .motion-donut {width:132px;height:132px}
  .motion-donut-total strong {font-size:30px}
  .motion-donut-total small {font-size:10px;max-width:85px}
  .motion-contribution h3 {font-size:13px;margin-bottom:0}
  .motion-contribution>.motion-caption {font-size:10px;margin-bottom:2px}
  .motion-legend {gap:8px;font-size:10px}
  .motion-legend li {grid-template-columns:7px minmax(0,1fr) auto;column-gap:5px}
  .motion-legend li>small {font-size:9px}
}
@media(max-width:390px) {
  .motion-contribution {display:flex;flex-direction:column;align-items:stretch;text-align:left}
  .motion-contribution h3,.motion-contribution>.motion-caption {align-self:auto}
  .motion-donut {align-self:center;width:154px;height:154px;margin:8px 0}
}
@supports not ((backdrop-filter:blur(9px)) or (-webkit-backdrop-filter:blur(9px))) {
  .workspace .nav-item .nav-icon,.motion-metric-icon {background:var(--mac-input)!important}
}
@media(prefers-reduced-transparency:reduce) {
  :root {--motion-surface:#fff}
  :root[data-appearance=dark] {--motion-surface:#202c3f}
  .workspace .nav-item .nav-icon,.motion-metric-icon {background:var(--mac-input)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
  .workspace .nav-icon::before,.workspace .nav-icon::after,.motion-metric-icon::before,.motion-metric-icon::after {display:none}
}
@media(prefers-reduced-motion:reduce) {
  .motion-reveal,.motion-reveal.motion-visible,.graphic-funnel.motion-visible .funnel-level,.cp-bars.motion-visible i,.motion-contribution.motion-visible .motion-donut>svg {animation:none!important;opacity:1;transform:none}
  .motion-contribution .motion-donut>svg {transform:rotate(-90deg)!important}
  .workspace .nav-item:hover .nav-icon,.workspace .nav-item:focus-visible .nav-icon,.button:hover .motion-icon,.icon-button:hover .motion-icon {transform:none}
}
@media(forced-colors:active) {
  .workspace .nav-item .nav-icon,.motion-metric-icon,.metric.motion-metric,.motion-contribution {background:Canvas!important;color:CanvasText;border:1px solid CanvasText;box-shadow:none}
  .workspace .nav-icon .icon,.workspace .nav-item.active .nav-icon .icon,.motion-metric-icon svg {color:CanvasText!important;filter:none}
  .workspace .nav-icon::before,.workspace .nav-icon::after,.motion-metric-icon::before,.motion-metric-icon::after,.graphic-funnel .funnel-level::after {display:none}
  .motion-key {background:CanvasText;forced-color-adjust:none}
  .motion-donut {display:none}
  .motion-contribution {display:block}
  .motion-legend {margin-top:12px}
  .motion-reveal.motion-visible,.graphic-funnel.motion-visible .funnel-level,.cp-bars.motion-visible i {animation:none!important;transform:none}
}
@media print {
  .motion-reveal.motion-visible,.graphic-funnel.motion-visible .funnel-level,.cp-bars.motion-visible i,.motion-contribution.motion-visible .motion-donut>svg {animation:none!important}
  .motion-metric-icon,.graphic-funnel .funnel-level::after {display:none}
  .metric.motion-metric>.metric-label {padding-right:0}
  .metric.motion-metric,.motion-contribution {background:#fff;border:1px solid #bbb;box-shadow:none;color:#111}
  .motion-chart-layout {grid-template-columns:minmax(0,1fr) 260px;gap:18px;break-inside:avoid}
  .motion-contribution {display:block;padding:16px}
  .motion-donut {width:150px;height:150px;margin:12px auto}
  .motion-contribution .motion-donut>svg {transform:rotate(-90deg)}
}