/*
 * Contentstack Canoe site: animated product mock and static report panels.
 * Owner: MOCK. Pairs with /assets/js/mock.js (API documented there).
 * Uses the site tokens from site.css when present and carries fallbacks so it
 * also works on its own. Everything inside is fictional and illustrative.
 */
/* ---------- tokens (dark first, light overrides) ---------- */
.cm-mock, .cm-panel {
  --cm-frame: #212121;
  --cm-side: #1e1e1d;
  --cm-main: #1a1919;
  --cm-card: #242423;
  --cm-card-2: #2c2c2b;
  --cm-line: #393838;
  --cm-line-soft: #2f2e2d;
  --cm-ink: var(--ink, #f5f5f4);
  --cm-ink-2: var(--ink-2, #c9c8c6);
  --cm-muted: var(--muted, #9a9998);
  --cm-faint: var(--faint, #797777);
  --cm-accent: #ac75ff;
  --cm-accent-soft: rgba(172, 117, 255, 0.15);
  /* trend lines follow the engine marks: ChatGPT neutral, Gemini blue, Perplexity teal, Claude orange */
  --cm-e1: #c9c8c6;
  --cm-e2: #899cfa;
  --cm-e3: #1fb8cd;
  --cm-e4: #d97757;
  --cm-comp: #899cfa;
  --cm-comp-soft: rgba(137, 156, 250, 0.16);
  --cm-third: #5c5b5a;
  --cm-good: #b0f7ba;
  --cm-good-soft: rgba(176, 247, 186, 0.12);
  --cm-bad: #ff8a8a;
  --cm-bad-soft: rgba(255, 138, 138, 0.13);
  --cm-aw: #899cfa;
  --cm-co: #89e6d4;
  --cm-de: #b0f7ba;
  --cm-grid: rgba(255, 255, 255, 0.06);
  --cm-tip: #f5f5f4;
  --cm-tip-ink: #1a1919;
  --cm-tip-good: #1f7a43;
  --cm-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --cm-card-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
  color: var(--cm-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 12.5px;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:root[data-theme='light'] :is(.cm-mock, .cm-panel) {
  --cm-frame: #fbfbfa;
  --cm-side: #f7f7f6;
  --cm-main: #f3f3f2;
  --cm-card: #fff;
  --cm-card-2: #f5f5f4;
  --cm-line: #e1e0e0;
  --cm-line-soft: #ebebea;
  --cm-ink: var(--ink, #1a1919);
  --cm-ink-2: var(--ink-2, #393838);
  --cm-muted: var(--muted, #626160);
  --cm-faint: var(--faint, #797777);
  --cm-accent: #8a38f5;
  --cm-accent-soft: rgba(138, 56, 245, 0.09);
  --cm-e1: #626160;
  --cm-e2: #5b6fe0;
  --cm-e3: #138395;
  --cm-e4: #c4663f;
  --cm-comp: #5b6fe0;
  --cm-comp-soft: rgba(91, 111, 224, 0.12);
  --cm-third: #d4d4d3;
  --cm-good: #23824a;
  --cm-good-soft: #e6f4e8;
  --cm-bad: #c2413b;
  --cm-bad-soft: #fbeaea;
  --cm-aw: #4f63d6;
  --cm-co: #1f8a78;
  --cm-de: #2f8f52;
  --cm-grid: rgba(26, 25, 25, 0.07);
  --cm-tip: #1a1919;
  --cm-tip-ink: #f5f5f4;
  --cm-tip-good: #b0f7ba;
  --cm-shadow: 0 1px 2px rgba(26, 25, 25, 0.05), 0 30px 70px -28px rgba(26, 25, 25, 0.28);
  --cm-card-shadow: 0 1px 2px rgba(26, 25, 25, 0.05), 0 16px 36px -18px rgba(26, 25, 25, 0.25);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) :is(.cm-mock, .cm-panel) {
    --cm-frame: #fbfbfa;
    --cm-side: #f7f7f6;
    --cm-main: #f3f3f2;
    --cm-card: #fff;
    --cm-card-2: #f5f5f4;
    --cm-line: #e1e0e0;
    --cm-line-soft: #ebebea;
    --cm-ink: #1a1919;
    --cm-ink-2: #393838;
    --cm-muted: #626160;
    --cm-faint: #797777;
    --cm-accent: #8a38f5;
    --cm-accent-soft: rgba(138, 56, 245, 0.09);
    --cm-e1: #626160;
    --cm-e2: #5b6fe0;
    --cm-e3: #138395;
    --cm-e4: #c4663f;
    --cm-comp: #5b6fe0;
    --cm-comp-soft: rgba(91, 111, 224, 0.12);
    --cm-third: #d4d4d3;
    --cm-good: #23824a;
    --cm-good-soft: #e6f4e8;
    --cm-bad: #c2413b;
    --cm-bad-soft: #fbeaea;
    --cm-aw: #4f63d6;
    --cm-co: #1f8a78;
    --cm-de: #2f8f52;
    --cm-grid: rgba(26, 25, 25, 0.07);
    --cm-tip: #1a1919;
    --cm-tip-ink: #f5f5f4;
    --cm-tip-good: #b0f7ba;
    --cm-shadow: 0 1px 2px rgba(26, 25, 25, 0.05), 0 30px 70px -28px rgba(26, 25, 25, 0.28);
    --cm-card-shadow: 0 1px 2px rgba(26, 25, 25, 0.05), 0 16px 36px -18px rgba(26, 25, 25, 0.25);
  }
}
/* ---------- base ---------- */
:where(.cm-mock, .cm-panel) * { box-sizing: border-box }
:where(.cm-mock, .cm-panel) :where(p, ul, ol, li, b, i, em, q, mark) { margin: 0; padding: 0; font-style: normal }
:where(.cm-mock, .cm-panel) :where(ul, ol) { list-style: none }
:where(.cm-mock, .cm-panel) svg { display: block; flex: none }
.cm-n { font-variant-numeric: tabular-nums }
.cm-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
:where(.cm-mock, .cm-panel) .e1 { --c: var(--cm-e1) }
:where(.cm-mock, .cm-panel) .e2 { --c: var(--cm-e2) }
:where(.cm-mock, .cm-panel) .e3 { --c: var(--cm-e3) }
:where(.cm-mock, .cm-panel) .e4 { --c: var(--cm-e4) }
:where(.cm-mock, .cm-panel) .ea { --c: var(--cm-accent) }
.cm-ic { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter }
/* ---------- hero container, height reserved per width tier ---------- */
.cm-mock { container: cm / inline-size; position: relative; display: block; width: 100% }
.cm-mock:not(.is-ready)::before { content: ''; display: block; height: 404px }
.cm-mock[data-caption]:not(.is-ready)::before { border-bottom: 30px solid transparent }
.cm-mock.is-ready[data-caption] { padding-bottom: 30px }
.cm-stage { position: relative; height: 356px }
@container cm (min-width: 560px) {
  .cm-mock:not(.is-ready)::before, .cm-stage { height: 684px }
}
@container cm (min-width: 560px) and (max-width: 719px) {
  .cm-mock:not(.is-ready)::before, .cm-stage { height: 704px }
}
@container cm (min-width: 880px) {
  .cm-mock:not(.is-ready)::before, .cm-stage { height: 660px }
}
@container cm (min-width: 1100px) {
  .cm-mock:not(.is-ready)::before, .cm-stage { height: 720px }
}
.cm-mock:not(.is-run) *, .cm-mock:not(.is-run) *::before, .cm-mock:not(.is-run) *::after { animation-play-state: paused !important }
.cm-cap { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; display: flex; align-items: flex-end; font-size: 12px; color: var(--cm-faint) }
/* pause / play and card dots */
.cm-ctl { position: absolute; top: 6px; right: 8px; z-index: 5; display: flex; align-items: center; gap: 8px }
.cm-tg, .cm-pg button { position: relative; display: grid; place-items: center; margin: 0; padding: 0; border: 0; font: inherit; color: inherit; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent }
.cm-tg { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--cm-line); background: var(--cm-card); color: var(--cm-ink-2) }
.cm-tg::after, .cm-pg button::after { content: ''; position: absolute; inset: -8px }
.cm-tg i { width: 10px; height: 11px; border-inline: 3px solid currentColor }
.cm-tg.is-off i { margin-left: 2px; border: 0; background: currentColor; clip-path: polygon(8% 0, 100% 50%, 8% 100%) }
.cm-tg:focus-visible, .cm-pg button:focus-visible { outline: 2px solid var(--cm-accent); outline-offset: 2px }
@media (hover: hover) {
  .cm-tg:hover { color: var(--cm-ink); border-color: var(--cm-muted) }
}
.cm-pg { display: flex; gap: 4px }
.cm-ctl [hidden] { display: none !important }
.cm-pg button { width: 28px; height: 28px }
.cm-pg button i { display: block; width: 6px; height: 6px; border-radius: 3px; background: var(--cm-line); transition: width 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.25s }
.cm-pg button[aria-current='true'] i { width: 18px; background: var(--cm-accent) }
.cm-mock[data-variant='mobile'] .cm-ctl { position: static; justify-content: flex-end; height: 48px; padding-top: 4px }
.cm-mock[data-variant='mobile'] .cm-tg { width: 36px; height: 36px; margin-left: 4px }
.cm-mock[data-variant='mobile'] .cm-tg::after { inset: -4px }
.cm-mock[data-variant='mobile'][data-caption] .cm-cap { bottom: 30px; height: 48px; align-items: center; right: 140px }
.cm-mock[data-variant='mobile'][data-caption].is-ready { padding-bottom: 0 }
.cm-mock[data-variant='mobile'][data-caption] .cm-cap { bottom: 0 }
/* ---------- app frame (desktop and tablet) ---------- */
.cm-frame { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--cm-line); border-radius: 14px; background: var(--cm-frame); box-shadow: var(--cm-shadow) }
.cm-top { flex: 0 0 40px; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 0 48px 0 14px; border-bottom: 1px solid var(--cm-line-soft) }
.cm-dots { display: flex; gap: 6px }
.cm-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--cm-line) }
.cm-crumb { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: var(--cm-faint) }
.cm-crumb b { font-weight: 500; color: var(--cm-ink-2) }
.cm-status { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px 0 9px; border: 1px solid var(--cm-line-soft); border-radius: 999px; font-size: 11.5px; color: var(--cm-ink-2); white-space: nowrap }
.cm-sw { display: grid }
.cm-sw > span { grid-area: 1 / 1; opacity: 0; transition: opacity 0.3s }
.cm-status[data-s='0'] .cm-sw > span:nth-child(1), .cm-status[data-s='1'] .cm-sw > span:nth-child(2), .cm-status[data-s='2'] .cm-sw > span:nth-child(3), .cm-status[data-s='3'] .cm-sw > span:nth-child(4) { opacity: 1 }
.cm-led { position: relative; width: 10px; height: 10px }
.cm-led::before, .cm-led::after { content: ''; position: absolute; inset: 0; border-radius: 50%; transition: opacity 0.3s }
.cm-led::before { inset: 2px; background: var(--cm-good) }
.cm-led::after { border: 1.5px solid var(--cm-line); border-top-color: var(--cm-accent); opacity: 0; animation: cm-rot 0.9s linear infinite }
.cm-status[data-s='0'] .cm-led::before, .cm-status[data-s='2'] .cm-led::before, .cm-rr[data-s='1'] .cm-led::before { opacity: 0 }
.cm-status[data-s='0'] .cm-led::after, .cm-status[data-s='2'] .cm-led::after, .cm-rr[data-s='1'] .cm-led::after { opacity: 1 }
.cm-rr[data-s='0'] .cm-led::before { background: var(--cm-faint) }
.cm-body { flex: 1; display: grid; grid-template-columns: 176px minmax(0, 1fr); min-height: 0 }
.cm-mock[data-variant='tablet'] .cm-body { grid-template-columns: minmax(0, 1fr) }
.cm-mock[data-variant='tablet'] .cm-side { display: none }
@container cm (min-width: 1100px) {
  .cm-body { grid-template-columns: 184px minmax(0, 1fr) }
}
/* sidebar */
.cm-side { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 12px 10px; background: var(--cm-side); border-right: 1px solid var(--cm-line-soft) }
.cm-brand { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 2px 6px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--cm-line-soft) }
.cm-logo { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--cm-accent-soft); color: var(--cm-accent); font-size: 13px; font-weight: 600 }
.cm-brand span { min-width: 0 }
.cm-brand b, .cm-brand small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.cm-brand b { font-size: 12.5px; font-weight: 600 }
.cm-brand small { font-size: 11px; color: var(--cm-faint) }
.cm-grp { padding: 11px 8px 4px; font-size: 11px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--cm-faint) }
.cm-nav { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 7px 0 8px; border-radius: 7px; font-size: 12px; color: var(--cm-muted); white-space: nowrap }
.cm-nav svg { width: 15px; height: 15px }
.cm-nav em { margin-left: auto; font-size: 11px; color: var(--cm-faint); font-variant-numeric: tabular-nums }
.cm-nav.is-on { background: var(--cm-accent-soft); color: var(--cm-ink) }
.cm-nav.is-on svg { color: var(--cm-accent) }
.cm-sfoot { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 7px; height: 30px; border: 1px solid var(--cm-line); border-radius: 8px; font-size: 12px; color: var(--cm-ink-2) }
.cm-sfoot svg { width: 14px; height: 14px }
/* main canvas */
.cm-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; overflow: hidden; padding: 14px 16px 16px; background: var(--cm-main) }
.cm-hd { display: flex; align-items: center; gap: 12px; min-width: 0 }
.cm-h { min-width: 0 }
.cm-h b, .cm-h small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.cm-h b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em }
.cm-h small { font-size: 11.5px; color: var(--cm-muted) }
.cm-engs { display: flex; gap: 6px; margin-left: auto }
.cm-eng { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 7px; border: 1px solid var(--cm-line-soft); border-radius: 999px; background: var(--cm-card); font-size: 11.5px; color: var(--cm-ink-2); white-space: nowrap }
/* engine logos from /assets/img/engines.svg; only the ChatGPT mark follows currentColor */
.cm-mo { flex: none; width: 14px; height: 14px; color: var(--cm-ink) }
.cm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px }
.cm-ra, .cm-rb { flex: 1 1 0; display: grid; gap: 10px; min-height: 0 }
.cm-ra { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) }
.cm-mock[data-variant='tablet'] .cm-ra { flex-grow: 1.16 }
.cm-mock[data-variant='tablet'] .cm-rb { flex-grow: 1 }
.cm-mock[data-variant='tablet'] .cm-rec { padding: 6px 10px 7px }
.cm-mock[data-variant='tablet'] .cm-rt { margin-top: 4px }
@container cm (max-width: 719px) {
  .cm-mock[data-variant='tablet'] .cm-ra { flex-grow: 1 }
  .cm-mock[data-variant='tablet'] .cm-rb { flex-grow: 1.22 }
}
.cm-rb { flex-grow: 1.08; grid-template-columns: repeat(3, minmax(0, 1fr)) }
.cm-ra > .cm-fun { display: none }
.cm-main .cm-at { padding-bottom: 8px }
.cm-main .cm-rl, .cm-main .cm-at { -webkit-mask-image: linear-gradient(#000 calc(100% - 14px), transparent); mask-image: linear-gradient(#000 calc(100% - 14px), transparent) }
@container cm (min-width: 880px) and (max-width: 1099px) {
  .cm-ra { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .cm-ans .cm-src { display: none }
}
@container cm (min-width: 1100px) {
  .cm-ra { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr) }
  .cm-ra > .cm-fun { display: flex }
}
.cm-mock[data-variant='tablet'] .cm-main { padding: 12px 14px 14px }
.cm-mock[data-variant='tablet'] .cm-ra { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.cm-mock[data-variant='tablet'] .cm-rb { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.cm-mock[data-variant='tablet'] .cm-rb > .cm-cit { display: none }
.cm-mock[data-variant='tablet'] .cm-kpi { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; align-items: center; gap: 4px 8px }
.cm-mock[data-variant='tablet'] .cm-kl { grid-column: 1 / -1 }
.cm-mock[data-variant='tablet'] .cm-kn { display: none }
@container cm (max-width: 719px) {
  /* engine names stay visible next to their logos; the subtitle makes room for them */
  .cm-mock[data-variant='tablet'] .cm-h small, .cm-mock[data-variant='tablet'] .cm-ans .cm-src, .cm-mock[data-variant='tablet'] .cm-ans .cm-r { display: none }
  .cm-mock[data-variant='tablet'] .cm-engs { gap: 4px }
  .cm-mock[data-variant='tablet'] .cm-eng { padding: 0 8px 0 6px; gap: 5px }
}
@container cm (max-width: 639px) {
  .cm-mock[data-variant='tablet'] .cm-at { line-height: 1.5 }
  .cm-mock[data-variant='tablet'] .cm-kv { font-size: 22px }
  .cm-mock[data-variant='tablet'] .cm-kd { display: none }
}
/* ---------- panels ---------- */
.cm-p { container: cmp / inline-size; position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--cm-line-soft); border-radius: 10px; background: var(--cm-card) }
.cm-ph { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 11px 12px 0 }
.cm-pt { flex: none; font-size: 12.5px; font-weight: 600; white-space: nowrap }
.cm-ps { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; color: var(--cm-faint) }
.cm-ph .cm-r { margin-left: auto; flex: none }
/* KPI tiles */
.cm-kpi { gap: 3px; padding: 11px 12px 10px }
.cm-kl { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cm-muted) }
.cm-kb { position: relative }
.cm-kv { display: flex; align-items: baseline; gap: 4px; font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; white-space: nowrap }
.cm-kv small { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--cm-faint) }
.cm-kv .cm-pos { font-size: 0.72em; letter-spacing: -0.015em; color: var(--cm-good) }
.cm-kv .cm-sc { align-self: center; padding: 1px 6px; border-radius: 5px; background: var(--cm-good-soft); color: var(--cm-good); font-size: 12px; font-weight: 600; letter-spacing: 0 }
.cm-kd { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 11px; color: var(--cm-faint) }
.cm-sk { position: absolute; left: 0; top: 7px; width: 64%; height: 16px; border-radius: 5px; background: var(--cm-card-2) }
.cm-dl { flex: none; display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px 0 4px; border-radius: 5px; background: var(--cm-good-soft); color: var(--cm-good); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; transition: box-shadow 0.4s }
.cm-dl svg { width: 10px; height: 10px }
.cm-dl.is-flash { box-shadow: 0 0 0 1.5px var(--cm-good) }
@container cmp (max-width: 124px) {
  .cm-kv { font-size: 21px }
  .cm-kd .cm-kn { display: none }
}
/* answer card */
.cm-ans { transition: border-color 0.5s, box-shadow 0.5s }
.cm-ans.is-focus { border-color: color-mix(in srgb, var(--cm-accent) 55%, transparent); box-shadow: 0 0 0 3px var(--cm-accent-soft) }
.cm-q { margin: 8px 12px 0; padding: 6px 10px; border: 1px solid var(--cm-line-soft); border-radius: 8px; background: var(--cm-card-2); font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--cm-ink) }
.cm-qr { visibility: hidden }
.cm-caret { display: inline-block; width: 1.5px; height: 1.05em; margin: 0 1px 0 0; vertical-align: -0.17em; background: var(--cm-accent); animation: cm-blink 1s steps(1) infinite }
.cm-q.is-done .cm-caret { visibility: hidden }
.cm-tabs { display: flex; gap: 4px; padding: 7px 12px 0; overflow: hidden }
.cm-tab { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 7px 0 5px; border: 1px solid transparent; border-radius: 7px; font-size: 11.5px; color: var(--cm-faint); white-space: nowrap; transition: color 0.3s, background-color 0.3s, border-color 0.3s }
.cm-tab .cm-mo { opacity: 0.4; transition: opacity 0.3s }
.cm-tab[data-s='1'] .cm-mo { animation: cm-pulse 0.9s ease-in-out infinite }
.cm-tab:is([data-s='1'], [data-s='2'], [data-s='3']) { color: var(--cm-ink-2) }
.cm-tab:is([data-s='1'], [data-s='2'], [data-s='3']) .cm-mo { opacity: 1 }
.cm-tab.is-sel:is([data-s='2'], [data-s='3']) { border-color: var(--cm-line-soft); background: var(--cm-card-2); color: var(--cm-ink) }
.cm-res { position: relative; width: 12px; height: 12px }
.cm-res svg { position: absolute; inset: 0; width: 12px; height: 12px; opacity: 0; transform: scale(0.6); transition: opacity 0.25s, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) }
.cm-res .ok { color: var(--cm-good); stroke-width: 2 }
.cm-res .no { color: var(--cm-faint) }
.cm-tab[data-s='2'] .ok, .cm-tab[data-s='3'] .no { opacity: 1; transform: none }
@container cmp (max-width: 400px) {
  .cm-tab:not(.is-sel) .cm-tn { display: none }
  .cm-tab:not(.is-sel) { padding-right: 5px }
}
@container cmp (max-width: 400px) {
  .cm-panel .cm-tabs { flex-wrap: wrap; row-gap: 6px }
  .cm-panel .cm-tab:not(.is-sel) .cm-tn { display: inline }
  .cm-panel .cm-tab:not(.is-sel) { padding-right: 7px }
}
.cm-at { flex: 1; min-height: 0; overflow: hidden; padding: 7px 12px 0; font-size: 12.5px; line-height: 1.6; color: var(--cm-ink-2) }
.cm-at mark { box-shadow: none; white-space: nowrap; padding: 1px 4px; margin: 0 -1px; border-radius: 4px; font-weight: 600; color: var(--cm-ink); background: var(--cm-comp-soft); -webkit-box-decoration-break: clone; box-decoration-break: clone }
.cm-at mark.y { color: var(--cm-accent); background: var(--cm-accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cm-accent) 40%, transparent) }
.cm-src { flex: none; display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; margin-top: 6px; padding: 7px 12px 8px; border-top: 1px solid var(--cm-line-soft); font-size: 11px; color: var(--cm-faint); white-space: nowrap }
.cm-dom { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 5px; background: var(--cm-card-2); color: var(--cm-ink-2) }
@container cmp (max-width: 440px) {
  .cm-dom:nth-of-type(3) { display: none }
}
.cm-dom i, .cm-own i, .cm-doms i { flex: none; width: 7px; height: 7px; border-radius: 50% }
.o-y { background: var(--cm-accent) }
.o-c { background: var(--cm-comp) }
.o-t { background: var(--cm-third) }
/* trend chart */
.cm-lg { display: flex; flex-wrap: wrap; gap: 2px 11px; padding: 7px 12px 0; font-size: 11px; color: var(--cm-muted) }
.cm-lg span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap }
.cm-lg i { width: 10px; height: 2px; border-radius: 2px; background: var(--c) }
.cm-lg .cm-mo { width: 12px; height: 12px; margin-left: -1px }
.cm-lg span:first-child { color: var(--cm-ink-2) }
.cm-lg span:first-child i { height: 3px }
.cm-ch { flex: 1; display: grid; grid-template-columns: 20px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; min-height: 0; padding: 10px 14px 10px 8px }
.cm-yl { display: flex; flex-direction: column; justify-content: space-between; margin: -1px 0 -3px; padding-right: 6px; font-size: 11px; line-height: 1; text-align: right; color: var(--cm-faint); font-variant-numeric: tabular-nums }
.cm-plot { position: relative; min-width: 0; min-height: 0 }
.cm-plot > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
.cm-xl { grid-column: 2; display: flex; justify-content: space-between; padding-top: 6px; font-size: 11px; color: var(--cm-faint) }
.cm-xn { display: grid; text-align: right }
.cm-xn > span { grid-area: 1 / 1 }
.cm-s1 { stop-color: var(--cm-accent); stop-opacity: 0.26 }
.cm-s2 { stop-color: var(--cm-accent); stop-opacity: 0 }
.cm-gl { stroke: var(--cm-grid); stroke-width: 1 }
.cm-nx { stroke: var(--cm-line); stroke-width: 1; stroke-dasharray: 3 3 }
.cm-ln { fill: none; stroke: var(--c); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; opacity: 0.9 }
.cm-ln.ea { stroke: var(--cm-accent); stroke-width: 2.5; opacity: 1 }
.cm-dot { fill: var(--cm-accent); stroke: var(--cm-card); stroke-width: 2 }
.cm-halo { fill: var(--cm-accent); opacity: 0.22; transform-box: fill-box; transform-origin: center; animation: cm-halo 2.4s ease-out infinite }
.cm-tipw { position: absolute; z-index: 2; width: 0; height: 0 }
.cm-tip { position: absolute; right: -10px; bottom: 10px; display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 8px; border-radius: 7px; background: var(--cm-tip); color: var(--cm-tip-ink); font-size: 11px; white-space: nowrap; box-shadow: var(--cm-card-shadow) }
.cm-tip b { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums }
.cm-tip .cm-dl { height: 16px; color: var(--cm-tip-good); background: color-mix(in srgb, var(--cm-tip-good) 14%, transparent) }
/* ranking / share of voice */
.cm-lbh, .cm-row { display: grid; grid-template-columns: minmax(0, 1fr) 34% 34px; gap: 8px; align-items: center }
.cm-lbh { padding: 8px 12px 3px 36px; font-size: 11px; color: var(--cm-faint) }
.cm-lbh span:nth-child(2) { grid-column: span 2 }
.cm-lbh span:nth-child(3) { text-align: right }
.cm-panel .cm-lbh, .cm-panel .cm-row { grid-template-columns: minmax(0, 1fr) 32% 38px 64px }
.cm-lbw { --rh: 26px; position: relative; height: calc(var(--rh) * 6); margin: 0 6px }
.cm-p .cm-rk { position: absolute; z-index: 2; left: 0; top: 0; width: 30px; display: grid; grid-auto-rows: var(--rh); align-items: center; font-size: 11.5px; text-align: center; color: var(--cm-faint); font-variant-numeric: tabular-nums; pointer-events: none }
.cm-row { position: absolute; left: 0; right: 0; top: 0; height: var(--rh); padding: 0 6px 0 30px; border-radius: 7px; font-size: 12px; color: var(--cm-ink-2) }
.cm-bn { display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap }
.cm-bn > span { overflow: hidden; text-overflow: ellipsis }
.cm-bm { flex: none; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 5px; background: var(--cm-card-2); color: var(--cm-muted); font-size: 11px; font-weight: 600 }
.cm-row.is-you { z-index: 1; background: color-mix(in srgb, var(--cm-accent) 15%, var(--cm-card)); color: var(--cm-ink); font-weight: 600 }
.cm-row.is-you .cm-bm { background: var(--cm-accent); color: var(--cm-tip-ink); color: #1a1919 }
:root[data-theme='light'] .cm-row.is-you .cm-bm { color: #fff }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .cm-row.is-you .cm-bm { color: #fff }
}
.cm-you { flex: none; padding: 0 5px; border-radius: 4px; background: var(--cm-accent); color: #1a1919; font-size: 11px; font-weight: 600; line-height: 16px; letter-spacing: 0.02em }
:root[data-theme='light'] .cm-you { color: #fff }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .cm-you { color: #fff }
}
.cm-bar { height: 6px; overflow: hidden; border-radius: 3px; background: var(--cm-card-2) }
.cm-bar i { display: block; width: 100%; height: 100%; border-radius: 3px; background: var(--cm-comp); opacity: 0.8; transform-origin: 0 50% }
.cm-row.is-you .cm-bar i { background: var(--cm-accent); opacity: 1 }
.cm-row > b, .cm-row > em { text-align: right; font-weight: inherit; font-variant-numeric: tabular-nums }
.cm-row > em { color: var(--cm-muted) }
@container cmp (max-width: 300px) {
  .cm-lbh, .cm-row { grid-template-columns: minmax(0, 1fr) 26% 32px }
  .cm-bm { display: none }
}
@container cmp (max-width: 340px) {
  .cm-ph > .cm-ps:not(:has(.cm-st)):not(.cm-r) { display: none }
}
@container cmp (max-width: 360px) {
  .cm-panel .cm-lbh, .cm-panel .cm-row { grid-template-columns: minmax(0, 1fr) 26% 36px }
  .cm-lbh span:nth-child(3), .cm-row > em { display: none }
}
/* citations */
.cm-stk { display: flex; gap: 2px; height: 10px; margin: 11px 12px 0; overflow: hidden; border-radius: 5px; background: var(--cm-card-2) }
.cm-stk i { display: block; flex: 12 1 0; height: 100%; transform-origin: 0 50% }
.cm-stk .o-c { flex-grow: 23 }
.cm-stk .o-t { flex-grow: 65 }
.cm-own { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 9px 12px 0; font-size: 11px; color: var(--cm-muted) }
.cm-own > span { display: flex; flex-direction: column; gap: 1px; min-width: 0 }
.cm-own > span > span { display: flex; align-items: center; gap: 5px; white-space: nowrap }
.cm-own b { display: flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--cm-ink); font-variant-numeric: tabular-nums }
.cm-p .cm-doms { padding: 8px 12px 8px }
.cm-p .cm-doms li { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; gap: 8px; align-items: center; height: 25px; border-top: 1px solid var(--cm-line-soft); font-size: 12px; color: var(--cm-ink-2) }
.cm-doms li span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.cm-doms li em { font-size: 11px; color: var(--cm-faint) }
.cm-doms li b { min-width: 22px; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums }
.cm-doms li > span + em { display: none }
/* funnel rings */
.cm-rings { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 6px; padding: 10px 10px 12px }
.cm-ring { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; font-size: 11px; color: var(--cm-muted); text-align: center }
.cm-rw { position: relative; width: 100%; max-width: 76px }
.cm-rw svg { width: 100%; height: auto; transform: rotate(-90deg) }
.cm-rw b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--cm-ink); font-variant-numeric: tabular-nums }
.cm-rbg, .cm-rfg { fill: none; stroke-width: 6 }
.cm-rbg { stroke: var(--cm-card-2) }
.cm-rfg { stroke: var(--c); stroke-linecap: round }
/* stage pills */
.cm-st { flex: none; display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; font-size: 11px; font-weight: 500; white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent) }
:where(.cm-mock, .cm-panel) .aw { --c: var(--cm-aw) }
:where(.cm-mock, .cm-panel) .co { --c: var(--cm-co) }
:where(.cm-mock, .cm-panel) .de { --c: var(--cm-de) }
/* recommendations */
.cm-rl { position: relative; flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 0; padding: 9px 10px 10px }
.cm-rec { position: relative; z-index: 1; padding: 7px 10px 8px; border: 1px solid var(--cm-line-soft); border-radius: 8px; background: color-mix(in srgb, var(--cm-card-2) 55%, var(--cm-card)) }
.cm-rh { display: flex; align-items: center; gap: 6px }
.cm-chip { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; font-size: 11px; font-weight: 500; white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent) }
.cm-chip.b { --c: var(--cm-comp) }
.cm-chip.a { --c: var(--cm-accent) }
.cm-chip.t { --c: var(--cm-e1) }
.cm-new { margin-left: auto; font-size: 11px; color: var(--cm-good) }
.cm-rt { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--cm-ink) }
.cm-rwy { margin-top: 3px; font-size: 11.5px; line-height: 1.45; color: var(--cm-muted) }
.cm-p .cm-how { display: grid; gap: 4px; margin-top: 8px; padding: 8px 10px; border-radius: 7px; background: var(--cm-card-2); font-size: 11.5px; line-height: 1.45; color: var(--cm-ink-2) }
.cm-p .cm-how li { display: grid; grid-template-columns: 14px minmax(0, 1fr) }
.cm-p .cm-how li::before { content: ''; width: 5px; height: 5px; margin-top: 6px; border-radius: 1px; background: var(--cm-accent) }
.cm-rsk { position: absolute; inset: 9px 10px 10px; display: grid; grid-auto-rows: 1fr; gap: 6px }
.cm-rsk i { border: 1px dashed var(--cm-line); border-radius: 8px }
.cm-main .cm-rwy, .cm-main .cm-new { display: none }
@container cm (min-width: 1100px) {
  .cm-main .cm-rec:first-child .cm-rwy { display: block; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden }
  .cm-main .cm-rt { font-size: 12.5px }
}
/* prompts table */
.cm-pr { padding: 6px 0 4px }
.cm-prh, .cm-prr { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 54px) minmax(0, 0.55fr); gap: 6px; align-items: center; padding: 0 12px }
.cm-prh { min-height: 30px; padding-block: 4px 6px; font-size: 11px; color: var(--cm-faint) }
.cm-pe { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; color: var(--cm-muted); font-size: 11px; line-height: 1.2; text-align: center; white-space: nowrap }
.cm-prr { min-height: 46px; padding-block: 7px; border-top: 1px solid var(--cm-line-soft); font-size: 12px; color: var(--cm-ink-2) }
.cm-prq { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0 }
.cm-prq > span { color: var(--cm-ink); line-height: 1.35 }
.cm-ck { justify-self: center; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50% }
.cm-ck svg { width: 12px; height: 12px }
.cm-ck.ok { background: var(--cm-good-soft); color: var(--cm-good) }
.cm-ck.ok svg { stroke-width: 2 }
.cm-ck.no { background: var(--cm-card-2); color: var(--cm-faint) }
.cm-cs { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0 }
.cm-cs span { padding: 1px 6px; border-radius: 5px; background: var(--cm-card-2); font-size: 11px; color: var(--cm-muted); white-space: nowrap }
.cm-cs em { font-size: 11px; color: var(--cm-faint) }
@container cmp (max-width: 480px) {
  /* narrow: the question takes its own line, the four engine checks sit under it */
  .cm-prh, .cm-prr { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 4px }
  .cm-prh > :first-child, .cm-prh > :last-child, .cm-cs { display: none }
  .cm-prq { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 8px }
}
/* sentiment */
.cm-so { display: flex; align-items: center; gap: 12px; padding: 10px 12px 2px }
.cm-so b { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--cm-good) }
.cm-so em { padding: 1px 7px; border-radius: 5px; background: var(--cm-good-soft); color: var(--cm-good); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums }
.cm-so small { margin-left: auto; max-width: 50%; font-size: 11px; line-height: 1.4; color: var(--cm-faint); text-align: right }
.cm-se { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 10px 12px 0 }
.cm-se > span { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 8px 9px; border: 1px solid var(--cm-line-soft); border-radius: 8px; font-size: 11px; color: var(--cm-muted) }
.cm-se > span > span { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap }
.cm-se b { font-size: 12px; font-weight: 600; color: var(--cm-ink) }
.cm-se b.neu { color: var(--cm-muted) }
.cm-se .cm-bar i { background: var(--cm-good); opacity: 1 }
.cm-se .cm-bar.neu i { background: var(--cm-faint) }
.cm-p .cm-tp { padding: 10px 12px 12px }
.cm-p .cm-tp li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--cm-line-soft); font-size: 12px }
.cm-tp li > span:first-child { font-weight: 500; color: var(--cm-ink) }
.cm-tp q { grid-column: 1 / -1; padding-left: 9px; border-left: 2px solid var(--cm-line); font-size: 11.5px; font-style: italic; color: var(--cm-muted) }
.cm-lab { font-size: 11px; font-weight: 500; padding: 1px 6px; border-radius: 5px }
.cm-lab.pos { background: var(--cm-good-soft); color: var(--cm-good) }
.cm-lab.neg { background: var(--cm-bad-soft); color: var(--cm-bad) }
.cm-lab.neu { background: var(--cm-card-2); color: var(--cm-muted) }
@container cmp (max-width: 420px) {
  .cm-se { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .cm-so small { display: none }
}
/* ---------- mobile card stack ---------- */
.cm-deck { position: absolute; inset: 0 }
.cm-card { position: absolute; left: 0; right: 0; top: 0; height: calc(100% - 20px); display: flex; flex-direction: column; padding: 16px 16px 14px; border: 1px solid var(--cm-line); border-radius: 16px; background: var(--cm-card); box-shadow: var(--cm-card-shadow); transform-origin: 50% 100%; will-change: transform, opacity; overflow: hidden }
.cm-ch2 { display: flex; align-items: center; gap: 8px; min-width: 0 }
.cm-ch2 .cm-kl { flex: 1 }
.cm-ch2 .cm-r { flex: none; font-size: 11px; color: var(--cm-faint) }
.cm-card .cm-q { margin: 12px 0 0; padding: 10px 12px; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35 }
.cm-card .cm-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 12px 0 0 }
.cm-card .cm-tab { height: 32px; padding: 0 10px 0 6px; border-color: var(--cm-line-soft); font-size: 12.5px }
.cm-card .cm-tab .cm-res { margin-left: auto }
.cm-card .cm-tab em { margin-left: auto; font-size: 11px; color: var(--cm-faint); opacity: 0; transition: opacity 0.3s }
.cm-card .cm-tab[data-s='2'] em, .cm-card .cm-tab[data-s='3'] em { opacity: 1 }
.cm-card .cm-tab em + .cm-res { margin-left: 0 }
.cm-card .cm-at { padding: 12px 0 0; font-size: 13px; line-height: 1.6 }
.cm-card .cm-at::before { content: attr(data-l); display: block; margin-bottom: 3px; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cm-faint) }
.cm-big { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; font-size: 54px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums }
.cm-big small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--cm-faint) }
.cm-big .cm-dl { align-self: center; margin-left: 6px; height: 22px; font-size: 12px; letter-spacing: 0 }
.cm-mplot { position: relative; flex: 1; min-height: 0; margin: 14px 0 12px }
.cm-mplot > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
.cm-mk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px }
.cm-mk > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 10px; border: 1px solid var(--cm-line-soft); border-radius: 10px; font-size: 11px; color: var(--cm-muted) }
.cm-mk b { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--cm-ink); font-variant-numeric: tabular-nums; white-space: nowrap }
.cm-mk > span:last-child b { color: var(--cm-good) }
.cm-card .cm-rl { padding: 12px 0 0; gap: 8px }
.cm-card .cm-rec { padding: 10px 12px }
.cm-card .cm-rec:first-child .cm-rt { font-size: 15px; letter-spacing: -0.01em }
.cm-card .cm-rt { font-size: 13px }
.cm-card .cm-rwy { font-size: 12px }
.cm-rr { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--cm-line-soft); font-size: 12px; color: var(--cm-muted) }
.cm-rr .cm-sw { flex: 1 }
.cm-rr[data-s='0'] .cm-sw > span:nth-child(1), .cm-rr[data-s='1'] .cm-sw > span:nth-child(2), .cm-rr[data-s='2'] .cm-sw > span:nth-child(3) { opacity: 1 }
.cm-rr b { color: var(--cm-ink); font-weight: 600; font-variant-numeric: tabular-nums }
@container cm (max-width: 359px) {
  .cm-card .cm-rwy, .cm-card .cm-new { display: none }
  .cm-card .cm-rl { gap: 6px; padding-top: 10px }
  .cm-card .cm-rec { padding: 8px 10px }
  .cm-card .cm-rec:first-child .cm-rt { font-size: 14px }
  .cm-card .cm-rt { font-size: 12.5px }
  .cm-rr { padding-top: 10px }
  .cm-mock[data-variant='mobile'][data-caption] .cm-cap { right: 132px; font-size: 11px; line-height: 1.3 }
  .cm-card { padding: 14px 14px 12px }
  .cm-card .cm-q { font-size: 14.5px }
  .cm-card .cm-at { font-size: 12.5px }
  .cm-card .cm-tab { font-size: 12px; padding-right: 8px }
  .cm-big { font-size: 46px }
  .cm-mk b { font-size: 15px }
}
/* ---------- static panels ---------- */
.cm-panel { container: cmx / inline-size; display: block; width: 100% }
.cm-panel > .cm-p { border-color: var(--cm-line); border-radius: 14px; box-shadow: var(--cm-card-shadow) }
.cm-panel .cm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.cm-panel .cm-kpis .cm-p { border-color: var(--cm-line); border-radius: 12px }
@container cmx (min-width: 620px) {
  .cm-panel .cm-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)) }
}
.cm-panel .cm-kpi { padding: 14px 14px 12px }
.cm-panel .cm-kv { font-size: 28px }
.cm-panel .cm-ph { padding: 14px 16px 0 }
.cm-panel .cm-pt { font-size: 13.5px }
.cm-panel .cm-ps { font-size: 12px }
.cm-panel .cm-trend .cm-ch { height: 220px; flex: none; padding: 12px 16px 12px 10px }
.cm-panel .cm-trend .cm-lg { padding: 8px 16px 0 }
.cm-panel .cm-lbw { --rh: 32px; margin: 0 8px 10px }
.cm-panel .cm-lbh { padding: 10px 14px 4px 38px }
.cm-panel .cm-row { font-size: 12.5px }
.cm-panel .cm-stk { height: 12px; margin: 14px 16px 0 }
.cm-panel .cm-own { padding: 12px 16px 0 }
.cm-panel .cm-own b { font-size: 18px }
.cm-panel .cm-doms { padding: 10px 16px 10px }
.cm-panel .cm-doms li { height: 32px }
.cm-panel .cm-doms li { grid-template-columns: 7px minmax(0, 1fr) auto 28px }
.cm-panel .cm-doms li > span + em { display: inline }
.cm-panel .cm-rl { padding: 12px 14px 14px; gap: 8px }
.cm-panel .cm-rec { padding: 12px 14px }
.cm-panel .cm-rt { font-size: 13.5px }
.cm-panel .cm-rwy { font-size: 12px }
.cm-panel .cm-ans .cm-q { margin: 12px 16px 0; font-size: 14px; padding: 9px 12px }
.cm-panel .cm-tabs { padding: 10px 16px 0 }
.cm-panel .cm-at { padding: 12px 16px 0; font-size: 13px }
.cm-panel .cm-src { margin-top: 12px; padding: 10px 16px 12px }
.cm-panel .cm-rings { padding: 16px 16px 16px; gap: 12px }
.cm-panel .cm-rw { max-width: 96px }
.cm-panel .cm-rw b { font-size: 17px }
.cm-panel .cm-ring { font-size: 12px }
.cm-panel .cm-prh, .cm-panel .cm-prr { padding-inline: 16px }
.cm-panel .cm-so, .cm-panel .cm-se, .cm-panel .cm-tp { padding-inline: 16px }
.cm-panel .cm-foot { padding: 0 16px 14px; font-size: 11px; color: var(--cm-faint) }
.cm-panel:empty { min-height: 240px }
.cm-panel[data-mock-panel='kpis']:empty { min-height: 212px }
@container cmx (min-width: 620px) {
  .cm-panel[data-mock-panel='kpis']:empty { min-height: 102px }
}
.cm-panel[data-mock-panel='trend']:empty { min-height: 300px }
.cm-panel[data-mock-panel='leaderboard']:empty { min-height: 262px }
.cm-panel[data-mock-panel='recommendations']:empty { min-height: 420px }
.cm-panel[data-mock-panel='prompts']:empty { min-height: 330px }
.cm-panel[data-mock-panel='sentiment']:empty { min-height: 330px }
.cm-panel[data-mock-panel='funnel']:empty { min-height: 170px }
/* ---------- motion ---------- */
@keyframes cm-rot {
  to { transform: rotate(360deg) }
}
@keyframes cm-blink {
  50% { opacity: 0 }
}
@keyframes cm-pulse {
  50% { opacity: 0.35 }
}
@keyframes cm-halo {
  0% { transform: scale(0.6); opacity: 0.35 }
  70%, 100% { transform: scale(1.8); opacity: 0 }
}
@media (prefers-reduced-motion: reduce) {
  .cm-mock *, .cm-mock *::before, .cm-mock *::after, .cm-panel *, .cm-panel *::before, .cm-panel *::after { animation: none !important; transition: none !important }
}