/* ImageLauncher - insight-skin.css (port of company-os prototype-v3 il/insight-skin.css)
 * Skin for the shared insight: maps `ins-*` to IL role tokens (--r-*) and IL components (.btn, .seg, .badge, .panel).
 * TOKENS AND COMPONENTS ONLY. Nothing structural: all geometry is in insight-layout.css.
 * IL differences from AL that live here: pill badges without a border, violet action colour, brand gradient primary button,
 * 12px panels with the --sh shadow, light-grey wells. */
.ins-scope {
  font-family: var(--font-sans, Manrope, ui-sans-serif, system-ui, sans-serif);
  --ins-font: var(--font-sans, Manrope, ui-sans-serif, system-ui, sans-serif); --ins-font-mono: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  --ins-bg: var(--r-canvas); --ins-surface: var(--r-panel); --ins-well: var(--r-well);
  --ins-ink: var(--r-ink); --ins-ink-2: var(--r-ink-2); --ins-ink-3: var(--r-ink-3);
  --ins-line: var(--r-line); --ins-line-strong: var(--r-line-2);
  --ins-accent: var(--r-act); --ins-accent-ink: var(--r-act-ink); --ins-accent-soft: var(--r-act-soft); --ins-accent-line: var(--r-act-line); --ins-accent-text: var(--accent-foreground);
  --ins-ok: var(--ok); --ins-ok-soft: var(--ok-soft); --ins-ok-line: var(--ok-line);
  --ins-warn: var(--warn); --ins-warn-soft: var(--warn-soft); --ins-warn-line: var(--warn-line);
  --ins-bad: var(--bad); --ins-bad-soft: var(--bad-soft); --ins-bad-line: var(--bad-line);
  --ins-chart: var(--r-act); --ins-skel: var(--r-well);
  --ins-r-card: var(--r-lg, 12px); --ins-r-ctl: var(--r-md, 8px); --ins-r-chip: 99px; --ins-r-pill: 99px;
  --ins-shadow: var(--sh); --ins-shadow-lg: var(--sh-md);
  --ins-scrim: rgb(0 0 0 / 0.32); --ins-focus: var(--ring-brand);
  --ins-btn-primary-bg: var(--brand-btn); --ins-btn-primary-ink: #fff;
  color: var(--ins-ink);
}
.dark .ins-scope { --ins-scrim: rgb(0 0 0 / 0.6); --ins-btn-primary-ink: #fff; }

/* mount shell */
.ins-pane { background: var(--ins-bg); color: var(--ins-ink); }
.ins-stage[data-variant="B"] > .ins-pane { border-left: 1px solid var(--ins-line); box-shadow: var(--ins-shadow-lg); }
.ins-stage[data-variant="C"] > .ins-pane { border-left: 1px solid var(--ins-line); }
.ins-scrim { background: var(--ins-scrim); }
.ins-rowlink { color: var(--r-link); text-decoration: none; font-weight: 600; }
.ins-rowlink:hover { text-decoration: underline; }
.ins-cell-act { display: inline-flex; align-items: center; gap: 8px; }

/* surfaces */
.ins-root { color: var(--ins-ink); }
.ins-sec { background: var(--ins-surface); border-color: var(--ins-line); border-radius: var(--ins-r-card); box-shadow: var(--ins-shadow); }
.ins-lab, .ins-faint, .ins-ids, .ins-kpi-asof, .ins-kpis-foot, .ins-trend-foot, .ins-chart-axis, .ins-fat-limit, .ins-step-state, .ins-kpi-label, .ins-evid dt, .ins-field dt, .ins-para-tag, .ins-kv dt, .ins-receipt dt { color: var(--ins-ink-2); }
.ins-kpi, .ins-chart, .ins-evid, .ins-receipt { background: var(--ins-well); border-color: var(--ins-line); border-radius: var(--r-well-r, 8px); }
.ins-fig { background: var(--ins-well); border-color: var(--ins-line); border-radius: var(--r-well-r, 8px); }
.ins-fat-row { border-top-color: var(--ins-line); }
.ins-note { background: var(--ins-well); border-color: var(--ins-line); border-radius: var(--r-well-r, 8px); color: var(--ins-ink); }
.ins-note--warn { background: var(--ins-warn-soft); border-color: var(--ins-warn-line); color: var(--ins-warn); }

/* chips = IL .badge: pill, no visible border */
.ins-chip { border-radius: var(--ins-r-chip); background: var(--ins-well); border-color: transparent; color: var(--ins-ink-2); }
.ins-chip--info { background: var(--ins-accent-soft); color: var(--ins-accent-text); }
.ins-chip--ok { background: var(--ins-ok-soft); color: var(--ins-ok); }
.ins-chip--warn { background: var(--ins-warn-soft); color: var(--ins-warn); }
.ins-chip--bad { background: var(--ins-bad-soft); color: var(--ins-bad); }

/* buttons = IL .btn ; segmented = IL .seg */
.ins-btn { border-radius: var(--ins-r-ctl); background: var(--ins-surface); border-color: var(--ins-line-strong); color: var(--ins-ink); transition: scale 120ms ease; }
.ins-btn:hover { background: var(--r-hover); }
.ins-btn:active:not([disabled]) { scale: .97; }
.ins-btn--primary { background: var(--ins-btn-primary-bg); border-color: transparent; color: var(--ins-btn-primary-ink); }
.ins-btn--primary:hover { filter: brightness(.93); background: var(--ins-btn-primary-bg); }
.ins-btn[disabled] { opacity: .45; }
.ins-seg { border-radius: var(--ins-r-ctl); background: var(--ins-well); border-color: var(--ins-line); }
.ins-seg button { border-radius: 6px; background: transparent; color: var(--ins-ink-2); }
.ins-seg button:hover:not([disabled]) { color: var(--ins-ink); }
.ins-seg button[aria-pressed=true] { background: var(--ins-surface); color: var(--ins-ink); box-shadow: var(--ins-shadow); }
.ins-seg button[disabled] { opacity: .45; }
.ins-btn:focus-visible, .ins-seg button:focus-visible, .ins-root a:focus-visible, .ins-root [tabindex]:focus-visible { outline: 2px solid var(--ins-focus); outline-offset: 2px; }
.ins-root [tabindex="-1"]:focus { outline: none; }

/* KPI deltas */
.ins-delta--good { color: var(--ins-ok); }
.ins-delta--bad { color: var(--ins-bad); }
.ins-delta--flat { color: var(--ins-ink-2); }
.ins-delta-ref { color: var(--ins-ink-2); }

/* chart: IL charts use the violet action colour */
.ins-plot .ins-line { stroke: var(--ins-chart); }
.ins-plot .ins-dot { stroke-width: 5; }
.ins-plot .ins-area { fill: var(--ins-chart); fill-opacity: 0.1; }
.ins-plot .ins-d7line { stroke: var(--ins-ink-2); }
.ins-d7tag { background: var(--ins-accent); color: var(--ins-accent-ink); border-radius: 4px; }

/* lineage + states */
.ins-step-mark { background: var(--ins-well); border-color: var(--ins-line-strong); border-radius: var(--ins-r-pill); color: var(--ins-ink-2); }
.ins-step[data-state=done] .ins-step-mark { background: var(--ins-ok-soft); border-color: var(--ins-ok-line); color: var(--ins-ok); }
.ins-step[data-state=unknown] .ins-step-mark { background: var(--ins-warn-soft); border-color: var(--ins-warn-line); color: var(--ins-warn); }
.ins-step[data-state=unknown] .ins-step-state { color: var(--ins-warn); }
.ins-state-ic { background: var(--ins-well); border-color: var(--ins-line-strong); border-radius: var(--ins-r-pill); color: var(--ins-ink); }
.ins-state[data-kind=error] .ins-state-ic { background: var(--ins-bad-soft); border-color: var(--ins-bad-line); color: var(--ins-bad); }

/* loading mask */
.ins-loading [data-v] { background: var(--ins-skel); animation: ins-pulse 1.2s ease-in-out infinite; }
@keyframes ins-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .ins-loading [data-v] { animation: none; } .ins-btn { transition: none; } }

/* IL list additions (Packs row, Boards card): per-ad D7 chip + View insight */
.ins-il-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 99px; font-size: 11px; font-weight: 600; background: var(--r-well); color: var(--r-ink-2); white-space: nowrap; }
.ins-il-chip.ok { background: var(--ok-soft); color: var(--ok); }
.ins-il-chip.warn { background: var(--warn-soft); color: var(--warn); }
.ins-il-chip.bad { background: var(--bad-soft); color: var(--bad); }

/* ===== AA-OVERRIDES START =====
 * IL tokens that miss WCAG AA (4.5:1 text) when composited on the surfaces the insight uses.
 * Owner decision: fund an IL token fix as a separate ticket; these overrides stay here so the prototype is AA-clean now.
 * Every line is listed in 02-DESIGN.md section "AA overrides". Measured with and without this block (v3-tools/contrast.js). */
.ins-scope {
  --ins-ink-3: #5c5c5c;
}
html:not(.dark) .ins-scope {
  --ins-ok: #0b6a64; --ins-warn: #7a5200; --ins-bad: #b32d23;
}
/* ===== AA-OVERRIDES END ===== */

/* Host chrome: while the insight pane is a full-width pane (<760px) the IL bottom tab bar sits behind it; hide it so it never bleeds through. */
@media (max-width: 759px) {
  body:has(.ins-stage[data-open="1"]) .mnav { display: none; }
}

/* IL list additions, real host: disabled "View insight" shows its reason as visible text (FR-14) */
.ins-cell-act--off { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 220px; }
.ins-why { font-size: 11px; line-height: 14px; color: var(--r-ink-2); white-space: normal; }
td .btn[data-ins-open], .ft .btn[data-ins-open] { white-space: nowrap; }
.ins-btn--off { opacity: .6; cursor: not-allowed; }