/* scene-specific styles: intel group (radar, benchmarks, buyer, pipeline-value).
   Prefixed dm-intel-; core classes do the rest. The radar and benchmarks
   scenes size themselves to their own width (container queries), since they
   mount in hero, split and paired columns as well as full stages. */

/* shared toolbar row: a label, a toggle or chips on the left; a count on the right */
.dm-intel-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.dm-intel-topl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.dm-intel-lbl { color: var(--faint); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; white-space: nowrap; }
.dm-intel-top .dm-chip { opacity: 1; padding: 3px 11px; font-size: 0.68rem; color: var(--muted); white-space: nowrap; }
.dm-intel-count { color: var(--muted); font-size: 0.76rem; white-space: nowrap; margin-inline-start: 6px; }
.dm-intel-count b { color: var(--ink); font-family: var(--font-display); font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- radar ----------------------------------------------------------------- */
[data-demo="radar"] { container-type: inline-size; }
.dm-intel-radar .dm-thead u { text-align: left; }
[dir="rtl"] .dm-intel-radar .dm-thead u { text-align: right; }
.dm-intel-th-ends, .dm-intel-ends { width: 112px; flex: none; }
[dir="rtl"] .dm-intel-th-ends, [dir="rtl"] .dm-intel-ends { width: 150px; }
.dm-intel-th-meter, .dm-intel-meter { width: 170px; flex: none; }
.dm-intel-th-act { width: 92px; flex: none; }
.dm-intel-radar { padding: 14px 18px 12px; }
.dm-intel-radar .dm-intel-top { margin-bottom: 8px; }
.dm-intel-rrow { padding: 5px 10px; margin-bottom: 3px; gap: 12px; line-height: 1.3; }
.dm-intel-rmain { flex: 1; min-width: 0; }
.dm-intel-rmain b { display: block; }
.dm-intel-ends { color: var(--muted); font-size: 0.72rem; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; }
.dm-intel-meter { display: flex; align-items: center; gap: 8px; }
.dm-intel-meter .dm-meter { flex: 1; height: 6px; }
.dm-intel-meter .dm-meter i { transition: none; }
.dm-intel-meter b { color: var(--ink); font-size: 0.74rem; font-weight: 650; font-variant-numeric: tabular-nums; width: 40px; flex: none; text-align: right; }
[dir="rtl"] .dm-intel-meter b { text-align: left; width: 54px; }
.dm-intel-rrow .dm-btn { width: 92px; flex: none; padding: 5px 8px; font-size: 0.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-intel-rrow.hl .dm-btn { border-color: rgba(61, 220, 151, 0.4); color: var(--good); }
/* the toast has its own slot under the rows (the toast keeps its box while hidden, so nothing shifts) */
.dm-intel-toastwrap { display: flex; justify-content: flex-end; margin-top: 8px; }
.dm-intel-toastwrap .dm-toast { justify-self: auto; }
/* a split, hero or paired column: the dates and the empty action header go, the toolbar stays on one line */
@container (max-width: 640px) {
  .dm-intel-th-ends, .dm-intel-ends, .dm-intel-th-act, [dir="rtl"] .dm-intel-th-ends, [dir="rtl"] .dm-intel-ends { display: none; }
  .dm-intel-th-meter, .dm-intel-meter { width: 132px; }
  .dm-intel-rrow .dm-btn { width: auto; }
  .dm-intel-radar .dm-intel-top .dm-chip { display: none; }
}
/* narrower still: the toggle speaks for itself, so its label goes and the toolbar keeps one line */
@container (max-width: 440px) {
  .dm-intel-radar .dm-intel-lbl { display: none; }
}
/* a phone: each row wraps its meter under the title */
@container (max-width: 400px) {
  .dm-intel-rrow { flex-wrap: wrap; row-gap: 6px; }
  .dm-intel-rmain { flex: 1 1 100%; }
  .dm-intel-meter { flex: 1; width: auto; }
  .dm-intel-radar .dm-thead { display: none; }
}

/* --- benchmarks ------------------------------------------------------------ */
[data-demo="benchmarks"] { container-type: inline-size; }
.dm-intel-bench .dm-kpis { margin-bottom: 12px; }
.dm-intel-bench .dm-kpis.k3 { grid-template-columns: repeat(3, 1fr); }
/* a signed number keeps its sign in front in both directions */
.dm-intel-bench .dm-kpi b, .dm-intel-pk .dm-kpi b { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .dm-intel-bench .dm-kpi b, [dir="rtl"] .dm-intel-pk .dm-kpi b { text-align: right; }
.dm-intel-g2 { display: grid; grid-template-columns: 1.05fr 1.25fr; gap: 12px; align-items: stretch; }
.dm-intel-g2 .dm-ph > span { white-space: nowrap; }
.dm-intel-bench .dm-kpi { padding: 10px 12px; }
.dm-intel-hrow { line-height: 1.3; padding: 3px 8px; margin-bottom: 2px; gap: 10px; background: none; }
.dm-intel-hl { color: var(--muted); font-size: 0.72rem; width: 54px; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-intel-hrow .dm-hbar { flex: 1; height: 8px; margin: 0; }
.dm-intel-hrow .dm-hbar i { background: linear-gradient(90deg, #079FBF, #00829C); }
.dm-intel-hrow:first-of-type .dm-hbar i { background: linear-gradient(90deg, #3ddc97, #079FBF); }
.dm-intel-hrow .num { min-width: 34px; color: var(--ink); font-weight: 600; font-size: 0.72rem; }
.dm-intel-ruler { position: relative; height: 84px; margin: 18px 10px 0; }
.dm-intel-track { position: absolute; left: 0; right: 0; top: 40px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.dm-intel-track i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(7, 159, 191, 0.35), rgba(7, 159, 191, 0.9)); }
[dir="rtl"] .dm-intel-track i { margin-inline-start: auto; }
.dm-intel-bracket { position: absolute; top: 4px; height: 22px; border: 1px solid rgba(255, 255, 255, 0.22); border-bottom: 0; border-radius: 6px 6px 0 0; opacity: 0; transition: opacity 0.45s ease; }
.dm-intel-bracket.in { opacity: 1; }
.dm-intel-bracket span { position: absolute; left: 50%; top: -9px; transform: translateX(-50%); background: #0d1c21; padding: 0 6px; color: var(--faint); font-size: 0.6rem; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.dm-intel-p { position: absolute; top: 28px; width: 0; display: flex; flex-direction: column; align-items: center; opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.4s var(--ease-spring); }
.dm-intel-p.in { opacity: 1; transform: none; }
.dm-intel-p span { color: var(--faint); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.04em; margin-bottom: 4px; white-space: nowrap; }
.dm-intel-p i { width: 12px; height: 12px; border-radius: 50%; background: #079FBF; border: 2px solid #0d1c21; box-shadow: 0 0 0 1px rgba(7, 159, 191, 0.5); flex: none; }
.dm-intel-p.hl i { background: #3ddc97; box-shadow: 0 0 0 2px rgba(61, 220, 151, 0.45), 0 0 14px rgba(61, 220, 151, 0.35); width: 14px; height: 14px; margin-top: -1px; }
.dm-intel-p b { color: var(--ink); font-size: 0.68rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 6px; white-space: nowrap; }
.dm-intel-p.hl b { font-weight: 700; }
.dm-intel-bench .dm-note { margin-top: 4px; }
/* narrow frames (a split or hero column): tile labels wrap, the ruler keeps room for its end labels */
@container (max-width: 640px) {
  .dm-intel-bench .dm-kpis.k3 { gap: 8px; }
  .dm-intel-bench .dm-kpi { padding: 10px; }
  .dm-intel-bench .dm-kpi span { white-space: normal; line-height: 1.25; min-height: 2.5em; }
  .dm-intel-bench .dm-kpi b { font-size: 1.1rem; }
  .dm-intel-bench .dm-kpi u { white-space: normal; }
  .dm-intel-g2 .dm-ph > span { font-size: 0.64rem; letter-spacing: 0.05em; }
  .dm-intel-g2 .dm-ph .dm-faint { display: none; }
  .dm-intel-ruler { margin: 18px 16px 0; }
}
/* a phone: everything stacks, the tiles become rows */
@container (max-width: 400px) {
  .dm-intel-g2 { grid-template-columns: 1fr; }
  .dm-intel-bench .dm-kpis.k3 { grid-template-columns: 1fr; gap: 6px; }
  .dm-intel-bench .dm-kpi { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 12px; }
  .dm-intel-bench .dm-kpi span { min-height: 0; margin: 0; white-space: nowrap; }
  .dm-intel-bench .dm-kpi b { font-size: 1.05rem; white-space: nowrap; }
  .dm-intel-bench .dm-kpi u { display: none; }
  .dm-intel-ruler { margin: 18px 22px 0; }
}

/* --- buyer ----------------------------------------------------------------- */
.dm-intel-buyer { padding: 14px 18px; }
.dm-intel-buyer .dm-panel { padding: 10px 14px; }
.dm-intel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; min-width: 0; }
.dm-intel-head .dm-mark { width: 34px; height: 34px; border-radius: 9px; font-size: 0.78rem; }
.dm-intel-headtxt { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; }
.dm-intel-headtxt b { color: var(--ink); font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dm-intel-headtxt .dm-badge { justify-self: start; }
.dm-intel-headtxt span { grid-column: 1 / -1; color: var(--faint); font-size: 0.7rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-intel-headbtn { flex: none; white-space: nowrap; }
.dm-intel-bgrid { grid-template-columns: 1.25fr 1fr; gap: 10px; align-items: stretch; }
.dm-intel-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dm-intel-buyer .dm-row { line-height: 1.3; }
.dm-intel-col:first-child .dm-row { padding: 5px 9px; margin-bottom: 2px; }
.dm-intel-col > .dm-panel { flex: 1; }
.dm-intel-buyer .dm-kpis.k3 { gap: 8px; }
.dm-intel-buyer .dm-kpi { padding: 7px 12px; }
.dm-intel-buyer .dm-kpi span { font-size: 0.6rem; margin-bottom: 3px; }
.dm-intel-buyer .dm-kpi b { font-size: 1.1rem; line-height: 1.05; }
.dm-intel-buyer .dm-kpi u { margin-top: 2px; font-size: 0.6rem; }
.dm-intel-days.soon { color: var(--warn); font-weight: 650; }
.dm-intel-buyer .dm-mbars { height: 72px; }
.dm-intel-srow { gap: 10px; padding: 5px 9px; margin-bottom: 2px; }
.dm-intel-smain { flex: 1; min-width: 0; }
.dm-intel-smain b { display: block; }
.dm-intel-smain .dm-hbar { height: 5px; margin: 5px 0 2px; }
.dm-intel-srow .num { color: var(--ink); font-weight: 650; min-width: 40px; }

/* --- pipeline-value --------------------------------------------------------- */
[data-demo="pipeline-value"], [data-demo="pipeline-value"].demo { min-height: 0; }
.dm-intel-pipe { padding: 12px 18px; }
.dm-intel-pgrid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
.dm-intel-funnel { min-width: 0; }
.dm-intel-funnel .dm-thead { padding-bottom: 2px; }
.dm-intel-th-n, .dm-intel-th-v { width: 66px; text-align: right; }
.dm-intel-th-v { width: 84px; }
[dir="rtl"] .dm-intel-th-n, [dir="rtl"] .dm-intel-th-v { text-align: left; }
.dm-intel-frow { line-height: 1.3; padding: 6px 9px; margin-bottom: 0; gap: 10px; }
.dm-intel-fl { color: var(--ink); font-size: 0.76rem; font-weight: 550; width: 84px; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-intel-fbar { flex: 1; min-width: 0; }
.dm-intel-fbar .dm-hbar { height: 10px; margin: 0; border-radius: 5px; }
.dm-intel-fbar .dm-hbar i { background: linear-gradient(90deg, #079FBF, #00829C); border-radius: 5px; }
.dm-intel-fbar .dm-hbar i.won { background: linear-gradient(90deg, #3ddc97, #079FBF); }
.dm-intel-frow .num { color: var(--ink); font-weight: 650; }
.dm-intel-fv { width: 84px; flex: none; text-align: right; color: var(--muted); font-size: 0.72rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
[dir="rtl"] .dm-intel-fv { text-align: left; }
.dm-intel-rate { display: flex; align-items: center; gap: 8px; padding: 1px 9px 1px 46px; opacity: 0; transition: opacity 0.4s ease; }
[dir="rtl"] .dm-intel-rate { padding: 2px 46px 2px 9px; }
.dm-intel-rate.in { opacity: 1; }
.dm-intel-rate i { width: 2px; height: 10px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); flex: none; }
.dm-intel-rate span { color: var(--faint); font-size: 0.64rem; }
.dm-intel-pk { grid-template-columns: 1fr; gap: 10px; }
.dm-intel-pk .dm-kpi { padding: 8px 14px; }
.dm-intel-pk .dm-kpi b { font-size: 1.4rem; }

/* --- narrow: a split column (560px) and a phone (375px) ---------------------- */
@media (max-width: 620px) {
  .dm-intel-bgrid { grid-template-columns: 1fr; }
  .dm-intel-headbtn { display: none; }
  .dm-intel-pgrid { grid-template-columns: 1fr; }
  .dm-intel-pk { grid-template-columns: 1fr 1fr; }
  .dm-intel-fl { width: 74px; }
  .dm-intel-fv { display: none; }
  .dm-intel-th-v { display: none; }
}
@media (max-width: 460px) {
  .dm-intel-buyer .dm-kpis.k3 { grid-template-columns: repeat(2, 1fr); }
  .dm-intel-buyer .dm-kpi u { display: none; }
  .dm-intel-headtxt b { white-space: normal; font-size: 0.92rem; line-height: 1.2; }
  .dm-intel-col:first-child .dm-row .dm-tag { display: none; }
  .dm-intel-col:first-child .dm-row .num { min-width: 36px; }
  .dm-intel-pk { grid-template-columns: 1fr; }
}
/* the same stacking inside a split column on wide viewports; phones use the rules above */
@media (min-width: 621px) {
:is(.split-visual, .flow-step) .dm-intel-bgrid { grid-template-columns: 1fr; }
:is(.split-visual, .flow-step) .dm-intel-buyer .dm-kpis.k3 { grid-template-columns: repeat(3, 1fr); }
:is(.split-visual, .flow-step) .dm-intel-headbtn { display: none; }
:is(.split-visual, .flow-step) .dm-intel-pgrid { grid-template-columns: 1fr; }
:is(.split-visual, .flow-step) .dm-intel-pk { grid-template-columns: 1fr 1fr; }
:is(.split-visual, .flow-step) .dm-intel-fv, :is(.split-visual, .flow-step) .dm-intel-th-v { display: none; }
}

/* reduced motion: nothing stays invisible */
@media (prefers-reduced-motion: reduce) {
  .dm-intel-p, .dm-intel-bracket, .dm-intel-rate { opacity: 1; transform: none; transition: none; }
  .dm-intel-toastwrap .dm-toast { transition: none; }
}

/* Half-width columns: the dossier keeps its counters and the awards chart; the
   benchmarks keep the histogram. Everything stacked ran both past 740px. */
:is(.split-visual, .flow-step) .dm-intel-buyer .dm-intel-col:first-child > :not(.dm-kpis) { display: none; }
:is(.split-visual, .flow-step) .dm-intel-buyer .dm-intel-col:last-child > :nth-child(n+2) { display: none; }
:is(.split-visual, .flow-step) .dm-intel-bench .dm-intel-g2 { grid-template-columns: 1fr; }
:is(.split-visual, .flow-step) .dm-intel-bench .dm-intel-g2 > :nth-child(n+2) { display: none; }