/* ====================================================================================
   The Intelligence page (/club/intelligence) — docs/INTELLIGENCE_PLATFORM.md.
   Every colour, radius, type and motion value is a token from tokens.css (the house law:
   tokens are the API — no literal here), so the dark scheme is the same rules. Depth is
   tone, not lines: page → white panes → tonal tiles; hairlines only inside the list.
   The segmented control (.tip-seg) already lives in app.css (shared with the user menu);
   the other primitives (.tip-chip, .tip-pill-btn, .tip-icon-btn, .tip-txt-btn, .tip-pill,
   the tone/bar classes) are defined here first and move to app.css once a second page uses them.
   ==================================================================================== */

/* ---- primitives ---------------------------------------------------------------- */
/* .tip-seg (the segmented control) and .tip-seg-mini live in app.css — shared with the user menu. */

.tip-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tip-chip {
    appearance: none; -webkit-appearance: none; height: 28px; padding: 0 12px; border-radius: var(--m3-radius-full);
    border: 1px solid var(--m3-outline-variant); background: transparent; color: var(--m3-on-surface);
    font: var(--m3-type-label-l) var(--m3-font); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap;
    transition: background-color var(--m3-dur-short3) var(--m3-ease-standard), border-color var(--m3-dur-short3) var(--m3-ease-standard);
}
.tip-chip:hover { background: var(--m3-surface-card-tonal); }
.tip-chip b { font-weight: 600; color: var(--m3-on-surface-variant); }
.tip-chip.is-on { background: var(--m3-secondary-container); border-color: transparent; color: var(--m3-on-secondary-container); }
.tip-chip.is-on b { color: inherit; }
.tip-chip:focus-visible { outline: 2px solid var(--m3-primary); outline-offset: 1px; }

.tip-pill-btn {
    appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px 0 8px;
    border: 1px solid var(--m3-outline-variant); border-radius: var(--m3-radius-full); background: var(--m3-surface-card);
    color: var(--m3-primary); font: var(--m3-type-label-l) var(--m3-font); text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color var(--m3-dur-short3) var(--m3-ease-standard), border-color var(--m3-dur-short3) var(--m3-ease-standard);
}
.tip-pill-btn .mud-icon-root { width: 18px; height: 18px; }
.tip-pill-btn:hover { background: var(--m3-primary-container); border-color: transparent; color: var(--m3-on-primary-container); }
.tip-pill-btn.is-on { background: var(--m3-primary-container); border-color: transparent; color: var(--m3-on-primary-container); }
.tip-pill-btn:focus-visible { outline: 2px solid var(--m3-primary); outline-offset: 1px; }
.tip-pill-btn .tip-pill-x { margin-left: 2px; width: 16px; height: 16px; }

.tip-icon-btn {
    appearance: none; -webkit-appearance: none; width: 30px; height: 30px; border: 0; border-radius: var(--m3-radius-full);
    background: transparent; color: var(--m3-on-surface-variant); display: inline-grid; place-items: center; cursor: pointer; padding: 0;
}
.tip-icon-btn .mud-icon-root { width: 20px; height: 20px; }
.tip-icon-btn:hover { background: var(--m3-surface-container-high); color: var(--m3-on-surface); }
.tip-icon-btn.is-on { background: var(--m3-primary-container); color: var(--m3-on-primary-container); }
.tip-icon-btn:disabled { opacity: .38; cursor: default; }
.tip-icon-btn:focus-visible { outline: 2px solid var(--m3-primary); outline-offset: 1px; }

.tip-txt-btn {
    appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px; border: 0;
    border-radius: var(--m3-radius-full); background: transparent; color: var(--m3-primary); font: var(--m3-type-label-l) var(--m3-font); cursor: pointer;
}
.tip-txt-btn .mud-icon-root { width: 18px; height: 18px; }
.tip-txt-btn:hover { background: var(--m3-surface-card-tonal); }
.tip-txt-btn:focus-visible { outline: 2px solid var(--m3-primary); outline-offset: 1px; }

/* a status pill: text tone on a tint — never white on a fill (DESIGN_SYSTEM.md §4) */
.tip-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--m3-radius-full); font: var(--m3-type-label-l) var(--m3-font); white-space: nowrap; }
.pill-bad { background: var(--m3-error-container); color: var(--m3-on-error-container); }
.pill-warn { background: color-mix(in srgb, var(--tip-warn-fill) 22%, transparent); color: var(--tip-warn-text); }
.pill-mild { background: color-mix(in srgb, var(--tip-mild-fill) 24%, transparent); color: var(--tip-mild-text); }
.pill-ok { background: color-mix(in srgb, var(--tip-ok-fill) 22%, transparent); color: var(--tip-ok-text); }
.pill-above { background: color-mix(in srgb, var(--tip-above-fill) 20%, transparent); color: var(--tip-above-text); }
.pill-mute, .pill-nodata { background: var(--m3-surface-container-high); color: var(--m3-on-surface-variant); }
.pill-medium { background: color-mix(in srgb, var(--tip-medium-fill) 22%, transparent); color: var(--tip-medium-text); }
.pill-minor { background: color-mix(in srgb, var(--tip-minor-fill) 24%, transparent); color: var(--tip-minor-text); }

/* tones (text) and bars (fills) — the vocabulary IntelStatus.Tone hands out */
.tone-bad { color: var(--tip-bad-text); } .tone-warn { color: var(--tip-warn-text); } .tone-mild { color: var(--tip-mild-text); }
.tone-ok { color: var(--tip-ok-text); } .tone-above { color: var(--tip-above-text); } .tone-mute, .tone-nodata { color: var(--tip-mute-text); }
.tone-medium { color: var(--tip-medium-text); } .tone-minor { color: var(--tip-minor-text); }
.bar-bad { background: var(--tip-bad-fill); } .bar-warn { background: var(--tip-warn-fill); } .bar-mild { background: var(--tip-mild-fill); }
.bar-ok { background: var(--tip-ok-fill); } .bar-above { background: var(--tip-above-fill); } .bar-mute { background: var(--tip-mute-fill); }
.bar-nodata { background: var(--tip-nodata); } .bar-medium { background: var(--tip-medium-fill); } .bar-minor { background: var(--tip-minor-fill); }

.tip-mono { font-family: var(--m3-font-mono); font-size: 12px; }
.tip-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tip-intel .is-hidden { display: none !important; }

/* ---- the page ------------------------------------------------------------------ */
/* the page fills the console panel (its padding is 24 px top and bottom) and the panes row takes
   what the head and the strip leave: the list is never shorter than the screen (Ivan, 25.10) */
.tip-intel { display: flex; flex-direction: column; gap: 14px; min-height: calc(100vh - var(--mud-appbar-height, 48px) - 48px); font-family: var(--m3-font); color: var(--m3-on-surface); }
.tip-intel-loading { display: grid; place-items: center; min-height: 240px; }
.tip-intel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tip-intel-title { margin: 0; font: var(--m3-type-headline-s) var(--m3-font); letter-spacing: var(--m3-tracking-display); }
.tip-intel-sub { font: var(--m3-type-body-s) var(--m3-font); color: var(--m3-on-surface-variant); margin-top: 2px; }
.tip-intel-head .tip-intel-search { flex: 0 0 280px; width: 280px; max-width: 100%; margin: 0 0 0 auto; }
.tip-intel-search .mud-input-outlined .mud-input-outlined-border { border-radius: var(--m3-radius-full); }
.tip-intel-lbl { font: var(--m3-type-label-m) var(--m3-font); color: var(--m3-on-surface-variant); }
.tip-intel-spacer { flex: 1; }
.tip-intel-empty { padding: 10px 8px; font: var(--m3-type-body-s) var(--m3-font); color: var(--m3-on-surface-variant); }
.tip-intel-empty-pane { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 64px 16px; text-align: center; }
.tip-intel-empty-pane .mud-icon-root { width: 32px; height: 32px; color: var(--m3-outline); }
.tip-intel-delta { margin-left: 6px; font: var(--m3-type-label-m) var(--m3-font); color: var(--m3-on-surface-variant); font-variant-numeric: tabular-nums; }
.tip-intel-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.tip-intel-link { appearance: none; border: 0; background: transparent; padding: 0 2px; color: var(--m3-primary); font: inherit; font-weight: 500; cursor: pointer; }
.tip-intel-link:hover { text-decoration: underline; }
.tip-intel-ai { display: inline-block; margin-right: 6px; padding: 2px 7px; border-radius: var(--m3-radius-xs); background: var(--m3-tertiary); color: var(--m3-on-tertiary); font: var(--m3-type-label-s) var(--m3-font); letter-spacing: var(--m3-tracking-label); text-transform: uppercase; vertical-align: 1px; }

/* ---- status strip -------------------------------------------------------------- */
.tip-intel-strip { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.tip-intel-tile {
    position: relative; flex: 1 1 120px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 10px 12px 10px 16px; border: 0; border-radius: var(--m3-radius-lg); background: var(--m3-surface-card-tonal);
    color: var(--m3-on-surface); font-family: var(--m3-font); text-align: left; cursor: pointer;
    transition: background-color var(--m3-dur-short3) var(--m3-ease-standard);
}
.tip-intel-tile:hover { background: var(--m3-surface-container-high); }
.tip-intel-tile b { font: var(--m3-type-title-l) var(--m3-font); font-weight: 600; letter-spacing: var(--m3-tracking-title); font-variant-numeric: tabular-nums; }
.tip-intel-tile span { font: var(--m3-type-label-m) var(--m3-font); color: var(--m3-on-surface-variant); }
.tip-intel-tile-bar { position: absolute; left: 6px; top: 12px; bottom: 12px; width: 4px; border-radius: 2px; }
.tip-intel-tile.is-on { background: var(--m3-primary-container); color: var(--m3-on-primary-container); }
.tip-intel-tile.is-on span, .tip-intel-tile.is-on b { color: var(--m3-on-primary-container); }
.tip-intel-tile:focus-visible { outline: 2px solid var(--m3-primary); outline-offset: 2px; }
.tip-intel-score { flex: 0 0 250px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px; border-radius: var(--m3-radius-lg); background: var(--m3-surface-card); box-shadow: var(--m3-elev-1); white-space: nowrap; }
.tip-intel-score-v { font: var(--m3-type-title-l) var(--m3-font); font-weight: 600; letter-spacing: var(--m3-tracking-title); font-variant-numeric: tabular-nums; }
.tip-intel-score-v small { font: var(--m3-type-label-m) var(--m3-font); color: var(--m3-on-surface-variant); margin-left: 2px; }
.tip-intel-score-l { font: var(--m3-type-label-m) var(--m3-font); color: var(--m3-on-surface-variant); }
.tip-intel-score svg { flex: 0 0 auto; }

/* ---- panes --------------------------------------------------------------------- */
.tip-intel-panes { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; align-items: stretch; flex: 1; }
.tip-intel-pane { background: var(--m3-surface-card); border-radius: var(--m3-radius-xl); box-shadow: var(--m3-elev-1); min-width: 0; }
/* the list's height is the detail's: the inner column is taken out of flow, so the row is as
   tall as the charts and the list scrolls within it (min 480 so a short detail still shows rows) */
.tip-intel-left { position: relative; min-height: 480px; }
.tip-intel-left-inner { position: absolute; inset: 0; display: flex; flex-direction: column; }
.tip-intel-tools { display: flex; align-items: center; gap: 10px; padding: 12px 12px 0 12px; flex-wrap: wrap; }
.tip-intel-tools .tip-pill-btn { margin-left: auto; }
.tip-intel-tools-2 { padding-top: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--m3-outline-variant); }
.tip-intel-tools-2 .tip-icon-btn { margin-left: auto; }
.tip-intel-pane-title { font: var(--m3-type-title-s) var(--m3-font); padding-left: 4px; }
.tip-intel-pane-count { font: var(--m3-type-label-l) var(--m3-font); color: var(--m3-on-surface-variant); margin-left: 4px; font-variant-numeric: tabular-nums; }
.tip-intel-listview { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.tip-intel-list { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.tip-intel-map-legend { display: flex; align-items: center; gap: 10px; font: var(--m3-type-label-m) var(--m3-font); color: var(--m3-on-surface-variant); font-variant-numeric: tabular-nums; }
.tip-intel-map-key { display: inline-flex; align-items: center; gap: 4px; }
.tip-intel-map-key i { width: 8px; height: 8px; border-radius: var(--m3-radius-full); display: inline-block; }
.tip-intel-map-hint { margin-left: auto; }

/* rows */
.tip-intel-rows { overflow-y: auto; padding: 4px 8px 8px; flex: 1; min-height: 0; }
/* Order without boxes (DESIGN_SYSTEM.md §4, M3 lists): a tonal band for each section header, an
   inset hairline between consecutive rows (from the hole badge to the edge) — never a border
   around a row. The sticky header keeps its band while the rows scroll under it. */
.tip-intel-grp { display: flex; align-items: baseline; gap: 6px; padding: 6px 10px; margin: 6px 0 2px; border-radius: var(--m3-radius-sm); position: sticky; top: 0; z-index: 1; background: var(--m3-surface-card-tonal); font: var(--m3-type-label-m) var(--m3-font); color: var(--m3-on-surface-variant); box-shadow: 0 0 0 4px var(--m3-surface-card); }
.tip-intel-grp-name { letter-spacing: var(--m3-tracking-label); text-transform: uppercase; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tip-intel-grp-meta { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tip-intel-grp .tip-icon-btn { width: 26px; height: 26px; align-self: center; }
.tip-intel-row {
    appearance: none; -webkit-appearance: none; width: 100%; display: grid; grid-template-columns: 4px auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
    position: relative; min-height: 52px; padding: 6px 10px 6px 0; border: 0; border-radius: var(--m3-radius-sm); background: transparent; color: var(--m3-on-surface);
    text-align: left; font-family: var(--m3-font); cursor: pointer;
    transition: background-color var(--m3-dur-short2) var(--m3-ease-standard);
}
.tip-intel-row:has(+ .tip-intel-row)::after { content: ""; position: absolute; left: 52px; right: 8px; bottom: 0; height: 1px; background: color-mix(in srgb, var(--m3-outline-variant) 60%, transparent); }
.tip-intel-row.is-selected::after, .tip-intel-row.is-member::after { opacity: 0; }
.tip-intel-row:hover { background: var(--m3-surface-card-tonal); }
.tip-intel-row:focus-visible { outline: 2px solid var(--m3-primary); outline-offset: -2px; }
.tip-intel-row.is-selected { background: var(--m3-primary-container); color: var(--m3-on-primary-container); }
.tip-intel-row.is-member { background: var(--m3-surface-card-tonal); }
.tip-intel-row-bar { width: 4px; align-self: stretch; border-radius: 2px; }
/* the hole badge — a number at rest, a + when hovered (add to the comparison), a check when in */
.tip-intel-row-hole { position: relative; width: 30px; height: 30px; border-radius: var(--m3-radius-sm); display: grid; place-items: center; background: var(--m3-surface-card-tonal); color: var(--m3-on-surface-variant); font: var(--m3-type-label-l) var(--m3-font); font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--m3-dur-short2) var(--m3-ease-standard), color var(--m3-dur-short2) var(--m3-ease-standard); }
.tip-intel-row-hole .mud-icon-root { width: 18px; height: 18px; }
.tip-intel-row-hole .tip-intel-row-plus { display: none; }
.tip-intel-row-hole:hover { background: var(--m3-primary-container); color: var(--m3-on-primary-container); }
.tip-intel-row-hole:hover .tip-intel-row-n { display: none; }
.tip-intel-row-hole:hover .tip-intel-row-plus { display: block; }
.tip-intel-row-hole.is-member { background: var(--m3-primary); color: var(--m3-on-primary); }
.tip-intel-row-hole.is-member:hover { background: var(--m3-primary-hover); color: var(--m3-on-primary); }
.tip-intel-row.is-selected .tip-intel-row-hole { background: var(--m3-surface-card); color: var(--m3-primary); }
.tip-intel-row.is-selected .tip-intel-row-hole:hover { background: var(--m3-primary-container); color: var(--m3-on-primary-container); }
.tip-intel-row-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tip-intel-row-name { font: var(--m3-type-body-m) var(--m3-font); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tip-intel-row-meta { font: var(--m3-type-label-m) var(--m3-font); color: var(--m3-on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tip-intel-row.is-selected .tip-intel-row-meta { color: var(--m3-on-primary-container); opacity: .8; }
.tip-intel-row-vals { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; justify-self: end; }
.tip-intel-row-val { display: inline-flex; align-items: baseline; gap: 1px; font: var(--m3-type-title-m) var(--m3-font); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: var(--m3-tracking-title); }
.tip-intel-row-val small { font: var(--m3-type-label-m) var(--m3-font); opacity: .8; }
.tip-intel-row-extra { font: var(--m3-type-label-m) var(--m3-font); font-weight: 600; white-space: nowrap; }

/* ---- right pane ---------------------------------------------------------------- */
.tip-intel-right { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.tip-intel-det-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tip-intel-hole { width: 44px; height: 44px; border-radius: var(--m3-radius-md); display: grid; place-items: center; background: var(--m3-primary-container); color: var(--m3-on-primary-container); font: var(--m3-type-title-l) var(--m3-font); font-weight: 600; flex: 0 0 auto; }
.tip-intel-hole-cmp { background: var(--m3-tertiary-container); color: var(--m3-on-tertiary-container); }
.tip-intel-det-title { min-width: 0; flex: 1; }
.tip-intel-det-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: var(--m3-type-headline-s) var(--m3-font); font-size: 20px; line-height: 26px; letter-spacing: var(--m3-tracking-title); }
.tip-intel-det-sub { font: var(--m3-type-body-m) var(--m3-font); color: var(--m3-on-surface-variant); letter-spacing: 0; }
.tip-intel-det-meta { font: var(--m3-type-body-s) var(--m3-font); color: var(--m3-on-surface-variant); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline; }
.tip-intel-det-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.tip-intel-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.tip-intel-kpi { padding: 10px 12px; border-radius: var(--m3-radius-md); background: var(--m3-surface-card-tonal); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tip-intel-kpi-v { font: var(--m3-type-title-l) var(--m3-font); font-weight: 600; letter-spacing: var(--m3-tracking-title); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tip-intel-kpi-v small { font: var(--m3-type-label-m) var(--m3-font); color: var(--m3-on-surface-variant); margin-left: 3px; }
.tip-intel-kpi-l { font: var(--m3-type-label-m) var(--m3-font); color: var(--m3-on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tip-intel-advice { margin: 0; padding: 10px 14px; border-left: 3px solid var(--m3-tertiary); border-radius: 0 var(--m3-radius-md) var(--m3-radius-md) 0; background: var(--m3-tertiary-container); color: var(--m3-on-tertiary-container); font: var(--m3-type-body-m) var(--m3-font); }
.tip-intel-advice .tip-intel-link { color: inherit; font-weight: 600; }

.tip-intel-tabbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--m3-outline-variant); flex-wrap: wrap; }
.tip-intel-tabs { display: flex; gap: 4px; }
.tip-intel-tab { appearance: none; -webkit-appearance: none; border: 0; background: transparent; height: 40px; padding: 0 14px; font: var(--m3-type-title-s) var(--m3-font); color: var(--m3-on-surface-variant); cursor: pointer; position: relative; display: inline-flex; align-items: center; gap: 6px; }
.tip-intel-tab:hover { color: var(--m3-on-surface); }
.tip-intel-tab.is-on { color: var(--m3-primary); }
.tip-intel-tab.is-on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--m3-primary); }
.tip-intel-tab:focus-visible { outline: 2px solid var(--m3-primary); outline-offset: -2px; }
.tip-intel-tab-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--m3-radius-full); background: var(--m3-tertiary); color: var(--m3-on-tertiary); font: var(--m3-type-label-m) var(--m3-font); font-weight: 600; }
.tip-intel-tab-actions { display: flex; gap: 4px; }

.tip-intel-trends { display: flex; flex-direction: column; gap: 12px; }
.tip-intel-trend-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tip-seg-period button { padding: 0 11px; }
.tip-intel-trend-period { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tip-chip-yoy .mud-icon-root { width: 16px; height: 16px; }
.tip-intel-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.tip-intel-dash { width: 18px; height: 0; border-top: 2px dashed var(--m3-on-surface-variant); display: inline-block; }
.tip-intel-lg-yoy { color: var(--m3-on-surface-variant); }
/* the year-ago line under a figure (KPI tile, compare cell) */
.tip-intel-kpi-ya, .tip-intel-ya { display: block; font: var(--m3-type-label-m) var(--m3-font); color: var(--m3-on-surface-variant); font-variant-numeric: tabular-nums; }
.tip-intel-kpi-ya b, .tip-intel-ya b { font-weight: 600; color: var(--m3-on-surface); }
.tip-intel-ya { margin-top: 2px; }
.tip-intel-lg { display: inline-flex; align-items: center; gap: 6px; font: var(--m3-type-label-l) var(--m3-font); }
.tip-intel-trend-grid { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 14px; align-items: start; }
/* ONE card for the stack; each metric a section under a hairline — the synced charts read as
   one instrument, not four widgets (Ivan, 25.10: "feels not solid") */
.tip-intel-charts { display: flex; flex-direction: column; gap: 0; min-width: 0; border-radius: var(--m3-radius-lg); background: var(--m3-surface-card-tonal); padding: 4px 12px 6px; }
.tip-intel-charts > .tip-intel-empty { padding: 12px 4px; }
.tip-intel-chart-card { padding: 8px 0 0; }
.tip-intel-chart-card + .tip-intel-chart-card { border-top: 1px solid color-mix(in srgb, var(--m3-outline-variant) 55%, transparent); margin-top: 2px; }
.tip-intel-card-title small { margin-left: 6px; font: var(--m3-type-label-m) var(--m3-font); color: var(--m3-on-surface-variant); }
.tip-intel-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 2px; flex-wrap: wrap; }
.tip-intel-card-title { font: var(--m3-type-title-s) var(--m3-font); color: var(--m3-on-surface); }
.tip-intel-chart-stats { font: var(--m3-type-label-m) var(--m3-font); color: var(--m3-on-surface-variant); font-variant-numeric: tabular-nums; }
.tip-intel-chart-stats b { font: var(--m3-type-label-l) var(--m3-font); font-weight: 600; }
.tip-intel-chart-stats abbr { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
.tip-intel-chart { min-height: 40px; }

/* pinned while the stack scrolls, so the picture the cursor drives is always in view */
.tip-intel-heat { position: sticky; top: 12px; border-radius: var(--m3-radius-lg); background: var(--m3-surface-card-tonal); padding: 10px 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.tip-intel-spatial-body { display: flex; flex-direction: column; gap: 8px; }
.tip-intel-heat-canvas { position: relative; height: 236px; border-radius: var(--m3-radius-md); overflow: hidden; }
.tip-intel-heat-canvas svg { display: block; }
/* the moment on display, stamped on the picture like a weather map's time */
.tip-intel-heat-stamp { position: absolute; top: 8px; right: 8px; padding: 3px 9px; border-radius: var(--m3-radius-full); background: color-mix(in srgb, var(--m3-surface-card) 82%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--m3-on-surface); font: var(--m3-type-label-m) var(--m3-font); font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: var(--m3-elev-1); pointer-events: none; }
/* the course map in the same slot */
.tip-intel-map { display: flex; flex-direction: column; gap: 8px; }
.tip-intel-map-canvas { height: 236px; border-radius: var(--m3-radius-md); overflow: hidden; background: var(--m3-surface-card-tonal); }
.tip-intel-heat-tools { display: flex; align-items: center; gap: 4px; }
.tip-intel-heat-legend { display: flex; align-items: center; gap: 3px; font: var(--m3-type-label-s) var(--m3-font); color: var(--m3-on-surface-variant); }
.tip-intel-heat-legend i { width: 14px; height: 8px; border-radius: 2px; display: inline-block; margin: 0 3px 0 6px; }
.tip-intel-heat-legend i:first-child { margin-left: 0; }
.tip-intel-heat-hint { font: var(--m3-type-label-m) var(--m3-font); color: var(--m3-on-surface-variant); }

/* compare table */
.tip-intel-cmp-wrap { overflow-x: auto; }
/* the moment the figures show — live, or the chart cursor's (then in the intelligence accent) */
.tip-intel-stamp { display: flex; align-items: center; gap: 6px; padding: 0 10px 6px; font: var(--m3-type-label-m) var(--m3-font); color: var(--m3-on-surface-variant); font-variant-numeric: tabular-nums; }
.tip-intel-stamp .mud-icon-root { width: 16px; height: 16px; }
.tip-intel-stamp.is-scrub { color: var(--m3-tertiary); }
.tip-intel-stamp b { font-weight: 600; }
.tip-intel-kpis.is-scrub .tip-intel-delta { color: var(--m3-tertiary); font-weight: 600; }
.tip-intel-cmp { width: 100%; border-collapse: collapse; font: var(--m3-type-body-s) var(--m3-font); font-variant-numeric: tabular-nums; }
.tip-intel-cmp th, .tip-intel-cmp td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--m3-outline-variant); vertical-align: middle; }
.tip-intel-cmp thead th { font: var(--m3-type-title-s) var(--m3-font); color: var(--m3-on-surface); white-space: nowrap; }
.tip-intel-cmp thead th .tip-intel-dot { margin-right: 8px; vertical-align: -1px; }
.tip-intel-cmp-x { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: var(--m3-on-surface-variant); margin-left: 6px; padding: 0; vertical-align: middle; cursor: pointer; border-radius: var(--m3-radius-full); }
.tip-intel-cmp-x .mud-icon-root { width: 16px; height: 16px; }
.tip-intel-cmp-x:hover { color: var(--m3-on-surface); }
.tip-intel-cmp tbody th { font: var(--m3-type-label-m) var(--m3-font); color: var(--m3-on-surface-variant); width: 110px; }
.tip-intel-cmp td b { font: var(--m3-type-body-m) var(--m3-font); font-weight: 600; }

/* passport */
.tip-intel-passports { display: flex; flex-direction: column; gap: 14px; }
.tip-intel-passport { border-radius: var(--m3-radius-lg); background: var(--m3-surface-card-tonal); padding: 12px 14px; }
.tip-intel-passport-name { margin: 0 0 8px; font: var(--m3-type-title-m) var(--m3-font); }
.tip-intel-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }
.tip-intel-fact dt { font: var(--m3-type-label-m) var(--m3-font); color: var(--m3-on-surface-variant); }
.tip-intel-fact dd { margin: 0; font: var(--m3-type-body-m) var(--m3-font); }
.tip-intel-note { margin: 8px 0 0; font: var(--m3-type-body-s) var(--m3-font); }

/* summary */
.tip-intel-summary { display: flex; flex-direction: column; gap: 6px; }
.tip-intel-summary-head { margin: 0 0 6px; font: var(--m3-type-body-m) var(--m3-font); }
.tip-intel-summary-meta { color: var(--m3-on-surface-variant); }
.tip-intel-summary-title { margin: 10px 0 2px; font: var(--m3-type-label-m) var(--m3-font); letter-spacing: var(--m3-tracking-label); text-transform: uppercase; color: var(--m3-on-surface-variant); }
.tip-intel-finding { display: flex; align-items: flex-start; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--m3-outline-variant); }
.tip-intel-finding:last-child { border-bottom: 0; }
.tip-intel-finding .tip-intel-dot { margin-top: 5px; border-radius: var(--m3-radius-full); }
.tip-intel-finding-text { font: var(--m3-type-body-s) var(--m3-font); }
.tip-intel-finding-at { margin-left: 6px; font: var(--m3-type-label-m) var(--m3-font); color: var(--m3-on-surface-variant); font-variant-numeric: tabular-nums; }

/* ---- the fold ------------------------------------------------------------------ */
@media (max-width: 1100px) {
    .tip-intel-panes { grid-template-columns: 1fr; flex: none; }
    .tip-intel { min-height: 0; }
    .tip-intel-left { min-height: 0; }
    .tip-intel-left-inner { position: static; max-height: 420px; }
    .tip-intel-trend-grid { grid-template-columns: 1fr; }
    .tip-intel-heat-canvas, .tip-intel-map-canvas { height: 300px; }
    .tip-intel-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .tip-intel-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tip-intel-score { flex: 1 1 100%; }
    .tip-intel-search { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .tip-intel *, .tip-seg button, .tip-chip, .tip-pill-btn { transition: none !important; }
}