/* Solution pages motion (/reporting/, /ai-search/, /solutions/). Loaded only there.
   Bars grow with transform (cheap); without JS (no .sm-js) everything shows fully. */

/* ---------- tabs ---------- */
.sm-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-tab { font: 600 14px/1 var(--font-body); color: #D5DEEA; background: transparent; border: 1px solid var(--navy-line-2); border-radius: 999px; padding: 9px 14px; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.sm-tab:hover { border-color: var(--on-navy); color: var(--white); }
.sm-tab[aria-selected="true"] { background: var(--white); color: var(--navy); border-color: var(--white); }

/* ---------- entrance: columns grow up, bars grow right, staggered ---------- */
.sm-js .sm-pane .sm-col { transform: scaleY(0); transform-origin: bottom; transition: transform .7s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 45ms); }
.sm-js .sm-pane.is-on .sm-col { transform: none; }
.sm-js .sm-pane .sm-bar { transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 90ms); }
.sm-js .sm-pane.is-on .sm-bar { transform: none; }
.sm-js .sm-pane .kpi { opacity: 0; transform: translateY(6px); transition: opacity .45s ease calc(var(--i, 0) * 60ms), transform .45s ease calc(var(--i, 0) * 60ms); }
.sm-js .sm-pane.is-on .kpi { opacity: 1; transform: none; }
.kpi strong { font-variant-numeric: tabular-nums; }

/* reporting views */
.dash-pane { display: flex; flex-direction: column; gap: 18px; }
.dash-pane[hidden] { display: none; }
.dash-caption { font-size: 13px; color: var(--on-navy-2); margin: 0; }
.dash-rows { display: flex; flex-direction: column; gap: 14px; }
.dash-row { display: grid; grid-template-columns: 150px 1fr 110px; gap: 16px; align-items: center; font-size: 15px; }
.dash-row .bar { height: 12px; }
.dash-row .bar i { height: 100%; display: block; }
.dash-row b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.columns-chart .sm-col.alt { background: var(--on-navy-2); }
.columns-chart .sm-col.ok { background: #2FA56B; }

/* AI answer share panes */
.share-pane[hidden] { display: none; }
.share-pane { display: flex; flex-direction: column; gap: 14px; }
.engines.sm-tabs { margin-top: 4px; }
.engines .sm-tab { border: 0; background: var(--navy-3); color: var(--on-navy); padding: 12px 10px; flex: 1 1 0; text-align: center; border-radius: 12px; }
.engines .sm-tab[aria-selected="true"] { background: var(--white); color: var(--navy); }

/* ---------- live AI answer ---------- */
.ai-live__topic { display: inline-flex; align-self: flex-start; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--crimson); background: var(--rose-wash); border-radius: 999px; padding: 5px 10px; }
.ai-live .ai-mock__q { min-height: 52px; }
.ai-live .ai-mock__a { min-height: 168px; }
.ai-live__a-text { display: block; }
.ai-live__chips { min-height: 34px; }
.ai-live__chip { animation: sm-pop .35s ease-out both; }
@keyframes sm-pop { from { opacity: 0; transform: translateY(6px) scale(.96); } }
.ai-live__dots { display: inline-flex; gap: 5px; padding: 6px 2px; }
.ai-live__dots[hidden] { display: none; }
.ai-live__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); animation: sm-dot 1s ease-in-out infinite; }
.ai-live__dots i:nth-child(2) { animation-delay: .15s; }
.ai-live__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes sm-dot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.ai-live mark { transition: background-color .3s; }
.ai-live--mini { padding: 22px; gap: 14px; }
.ai-live--mini .ai-mock__q, .ai-live--mini .ai-mock__a { font-size: 15px; }
.ai-live--mini .ai-mock__a { min-height: 150px; }

/* ---------- Solutions page: scene + compact list ---------- */
.solution__visual { align-self: center; }
.solution__visual .em-vis { min-height: 320px; }
.solution .check-list.solution__compact { font-size: 16px; gap: 10px; margin: 4px 0 0; }

@media (max-width: 760px) {
  .dash-row { grid-template-columns: 1fr 64px; }
  .dash-row .bar { grid-column: 1 / -1; grid-row: 2; }
  .engines .sm-tab { flex: 1 1 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .sm-js .sm-pane .sm-col, .sm-js .sm-pane .sm-bar, .sm-js .sm-pane .kpi { transition: none; }
  .ai-live__dots i { animation: none; opacity: .6; }
}