/* Generated by scripts/explore/build.mjs. Do not edit: change the sources named below. */

/* From src/insights/insights.css */
/* Insights pictures: one colour per job (colour refresh, 1 October 2026; record colours, owner decision same day).
   Counted records take the colour of their record type from the card they sit in (Objectives magenta, Initiatives teal,
   KPIs cyan, …), so blue stays for actions and selection only. A Business area colour marks that area's own series, pink
   marks "waits on it" and change, RAG marks status (gaps included), and "not assessed" is always dashed. */
:root {
  --insight-mark: var(--entity-initiative);
  --insight-mark-ink: #ffffff;
  --insight-waits: #db2777;
  --insight-change: #db2777;
  --insight-gap: #7d8596;
  --insight-gap-ink: #5b6b80;
  --insight-track: #eef2f6;
  --insight-own: color-mix(in srgb, var(--stravx-ink) 5%, var(--stravx-surface));
  /* Counts (more is darker) use Initiative teal, not blue and not RAG, because more is neither good nor bad. */
  --insight-seq-1: #ccfbf1;
  --insight-seq-2: #5eead4;
  --insight-seq-3: #0f766e;
  --insight-seq-4: #134e4a;
  --insight-seq-ink-light: #182438;
  --insight-seq-ink-dark: #ffffff;
}

/* Inside a record card or group, counted marks take that record type's colour. */
[data-entity-type] { --insight-mark: var(--entity-accent, var(--entity-initiative)); }

:root[data-appearance="dark"] {
  --insight-mark: var(--entity-initiative);
  --insight-mark-ink: #0a1220;
  --insight-waits: #f472b6;
  --insight-change: #f472b6;
  --insight-gap: #7d8ba0;
  --insight-gap-ink: #a3b3c7;
  --insight-track: #1e2b40;
  --insight-own: color-mix(in srgb, white 6%, var(--stravx-surface));
  --insight-seq-1: #134e4a;
  --insight-seq-2: #0f766e;
  --insight-seq-3: #2dd4bf;
  --insight-seq-4: #99f6e4;
  --insight-seq-ink-light: #e8edf4;
  --insight-seq-ink-dark: #0a1220;
}

/* Home's answer cards are one fixed set of peers, so they share one size (owner decision, 1 October 2026): every row is
   as tall as the tallest card and each legend sits at the card's foot. A single narrow column keeps natural heights. */
.insight-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 20px; align-items: stretch; list-style: none; margin: 0; padding: 0; }
@media (max-width: 1099px) { .insight-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .insight-cards { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } }
.insight-card-legend { margin-top: auto; }
.insight-card-note { font-size: 12px; color: var(--stravx-text-muted); }

/* Answer cards are Monopoly record cards (cards.css); the title link covers the card so the whole card opens the question. */
/* Tooltips on marks may extend past the card edge. */
.insight-card { position: relative; overflow: visible; }
.insight-card-body { gap: 14px; padding: 16px 20px 20px; }
.insight-card-link { color: var(--record-text); }
.insight-card-link:hover { text-decoration-thickness: 2px; }
.insight-card-figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.insight-card-figure .insight-warning { align-self: center; }
.insight-figure { font-size: 32px; font-weight: var(--stravx-weight-label); line-height: 1; font-variant-numeric: tabular-nums; }
.insight-caption { font-size: 13px; color: var(--stravx-ink-muted); }
.insight-card-picture { display: flex; flex-direction: column; gap: 8px; }
/* One tab stop for the picture and its chips (D4); keeps the card body's spacing between them. */
.insight-card-marks { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.insight-pending { font-size: 12px; color: var(--stravx-text-muted); }
.insight-more, .insight-note { font-size: 12px; color: var(--stravx-text-muted); }
.insight-warning { width: 22px; height: 22px; color: var(--rag-amber); flex: none; }
/* A timing conflict is red everywhere: the Home conflict count, conflict notes and the overlap between dates. */
.insight-warning.is-conflict, .insight-card-figure .insight-warning { color: var(--rag-red); }

.insight-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--stravx-text-muted); }
.insight-legend li { display: inline-flex; align-items: center; gap: 6px; }
.insight-key { display: inline-block; width: 12px; height: 10px; border-radius: 2px; box-sizing: border-box; }
.insight-key-filled { background: var(--insight-mark); }
/* The sequential teal of the coverage grid, so its key matches its cells (owner page review, 3 October 2026). */
.insight-key-seq { background: var(--insight-seq-3); }
.insight-key-area { background: var(--insight-area, var(--insight-mark)); }
.insight-key-gap { border: 1.5px dashed var(--insight-gap); }
/* Status keys carry their glyph, as every status does: ✓ green, ! amber. */
.insight-key-green, .insight-key-amber { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 4px; color: var(--record-surface); font-size: 10px; line-height: 1; font-weight: var(--stravx-weight-title); }
.insight-key-green { background: var(--rag-green); }
.insight-key-green::before { content: "✓"; }
.insight-key-amber { background: var(--rag-amber); }
.insight-key-amber::before { content: "!"; }
.insight-key-hatched { border-right: 2px solid var(--insight-gap-ink); background: repeating-linear-gradient(135deg, var(--insight-gap) 0 2px, transparent 2px 5px); }
.insight-key-waits { background: var(--insight-waits); }
.insight-key-ring { width: 10px; height: 10px; border: 2px solid var(--insight-mark); border-radius: 50%; box-sizing: border-box; }
.insight-key-start { width: 8px; height: 8px; border-radius: 50%; background: var(--insight-mark); }

/* Row names show in full and wrap between words (no clipped words); answer cards grow together to fit. */
.insight-row-label { flex: none; width: 150px; font-size: 12px; line-height: 16px; color: var(--stravx-text-muted); overflow-wrap: break-word; }
.insight-objective-rows { display: flex; flex-direction: column; gap: 8px; }
.insight-objective-row { display: flex; align-items: flex-end; gap: 12px; }
.insight-mini-columns { display: flex; align-items: flex-end; gap: 6px; height: 34px; flex: 1; }
.insight-mini-column { display: block; flex: 1; max-width: 26px; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--insight-mark); }
.insight-mini-column.is-gap { height: 10px; border: 1.5px dashed var(--insight-gap); border-radius: 3px; background: transparent; box-sizing: border-box; }

/* Squares fill the width available and wrap, so a narrow card never overflows. */
.insight-squares { display: grid; grid-template-columns: repeat(auto-fill, 11px); gap: 3px; }
.insight-squares.is-large { grid-template-columns: repeat(auto-fill, 22px); gap: 5px; }
.insight-square { display: block; aspect-ratio: 1; border-radius: 2px; background: var(--insight-mark); }
.insight-squares.is-large .insight-square { border-radius: 4px; }
.insight-square.is-gap { background: var(--rag-amber); }
/* RW-1: Run work is neither linked nor a gap; a neutral grey square and key. */
.insight-square.is-run, .insight-key-run, .insight-proportion-run { background: var(--insight-gap); }

.insight-proportion { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; background: var(--insight-track); }
.insight-proportion-fill { background: var(--insight-mark); }
.insight-proportion-gap { background: var(--rag-amber); border-radius: 0 4px 4px 0; }

.insight-bars { display: flex; flex-direction: column; gap: 9px; }
.insight-bar-row { display: flex; align-items: center; gap: 10px; }
.insight-bar-track { position: relative; flex: 1; height: 12px; border-radius: 3px; background: var(--insight-track); }
.insight-bar { position: absolute; inset: 0 auto 0 0; border-radius: 0 4px 4px 0; background: var(--insight-mark); }
.insight-bar.is-area { background: var(--insight-area); }
.insight-bar.is-run { background: var(--insight-gap); }
.insight-bar.is-gap { background: transparent; border: 1.5px dashed var(--insight-gap); box-sizing: border-box; }
.insight-bar-value { flex: none; width: 28px; text-align: right; font-size: 12px; color: var(--stravx-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A figure such as "276 / 282" stays on one line; one fixed width keeps every bar in the card the same length. */
.insight-bar-value.is-wide { width: 66px; }

.insight-months { display: flex; flex-direction: column; gap: 5px; }
.insight-month-plot { display: flex; align-items: flex-end; gap: 4px; height: 70px; border-bottom: 1px solid var(--stravx-slate-300); }
.insight-months.is-tall .insight-month-plot { height: 240px; gap: 10px; }
.insight-month { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; flex: 1; height: 100%; }
.insight-month-bar { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--insight-area, var(--insight-mark)); }
.insight-month-peak { font-size: 12px; font-weight: var(--stravx-weight-label); color: var(--stravx-ink); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.insight-month-axis { display: flex; gap: 4px; font-size: 12px; color: var(--stravx-text-muted); }
.insight-months.is-tall .insight-month-axis { gap: 10px; }
.insight-month-axis > span { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; white-space: nowrap; }
@media (max-width: 699px) { .insight-months.is-tall .insight-month-axis { gap: 4px; font-size: 10px; } .insight-months.is-tall .insight-month-plot { gap: 4px; } }
.insight-start-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--insight-mark); }
.insight-start-dot.is-empty { background: transparent; }

.insight-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
/* Capability chips keep the family identity: a Function-coloured strip, with the assessment state in the body. */
.insight-chip { padding: 6px 10px; border-radius: 6px; font-size: 12px; color: var(--stravx-ink); box-sizing: border-box; }
.insight-chips .insight-chip { border-left: 6px solid var(--entity-capability) !important; }
.insight-chip.is-not-assessed { border: 1.5px dashed var(--insight-gap); }
.insight-chip.is-gap { border: 1.5px solid var(--rag-amber); background: var(--rag-amber-soft); color: var(--rag-amber-ink); }
.insight-chip.is-no-gap { border: 1.5px solid var(--rag-green); background: var(--rag-green-soft); color: var(--rag-green-ink); }

.insight-gap-rows { display: flex; flex-direction: column; gap: 9px; }
.insight-gap-row { display: flex; align-items: center; gap: 10px; }
.insight-gap-track { position: relative; display: block; flex: 1; height: 12px; border-radius: 3px; overflow: hidden; background: var(--rag-green); }
.insight-gap-fill { position: absolute; inset: 0 auto 0 0; background: var(--rag-amber); }

/* A record type's icon in its own soft chip (colour refresh): Insights views and question tabs wear Home's card types. */
.insight-type-icon { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--entity-chip); color: var(--entity-ink); }

/* Question pages */
/*
 * A place's sub-menu (owner page review, 2 October 2026: the underlined tabs were easy to miss): a tab bar on its own
 * surface, in the place's colour, with the open tab filled.
 */
.insight-tabs {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--stravx-border);
  border-radius: 12px;
  background: var(--stravx-surface);
  box-shadow: var(--stravx-shadow-surface);
}
.insight-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: var(--stravx-weight-label);
  color: var(--stravx-ink);
  text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}
.insight-tabs a:hover { background: color-mix(in srgb, var(--place-accent) 10%, var(--stravx-surface)); color: color-mix(in srgb, var(--place-accent) 70%, var(--stravx-ink)); }
.insight-tabs a[aria-current="page"] {
  background: var(--place-accent);
  color: var(--place-on);
  box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--place-accent) 80%, transparent);
}
.insight-tabs a[aria-current="page"] .insight-type-icon { background: color-mix(in srgb, var(--place-on) 22%, transparent); color: var(--place-on); }
@media (forced-colors: active) { .insight-tabs a[aria-current="page"] { outline: 2px solid CanvasText; } }
.insight-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.insight-controls .insight-spacer { flex: 1; }
.insight-views { display: inline-flex; flex-wrap: wrap; padding: 3px; border: 1px solid var(--stravx-border); border-radius: 8px; background: var(--stravx-paper); }
.insight-views > * { min-height: 32px; padding: 5px 12px; border: 0; border-radius: 5px; background: transparent; color: var(--stravx-text-muted); font-size: 13px; font-weight: var(--stravx-weight-label); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.insight-views > [aria-current="page"] { background: var(--stravx-surface); color: var(--stravx-ink); box-shadow: var(--stravx-shadow-surface); }
.insight-views svg { width: 14px; height: 14px; }

.insight-band { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 0; padding: 16px 24px; border: 1px solid var(--stravx-border); border-radius: 8px; background: var(--stravx-surface); box-shadow: var(--stravx-shadow-surface); }
/* The answer band carries its question's record-type edge, as Home's card does. */
.insight-band[data-entity-type] { border-top: 3px solid var(--entity-edge); }
.insight-band-figure { display: flex; align-items: center; gap: 12px; padding: 0 28px; border-right: 1px solid var(--stravx-border); }
.insight-band-figure:first-child { padding-left: 0; }
.insight-band-figure:last-of-type { border-right: 0; }
.insight-band-figure .insight-figure { font-size: 30px; }
/* A word in the band (a priority, a plan state): smaller than a count, never clipped (owner page review, 2 October 2026). */
.insight-band-figure .insight-figure.is-word { font-size: 20px; white-space: nowrap; }
.insight-figure.is-word[data-choice="must"] { color: var(--rag-red-ink); }
.insight-figure.is-word[data-choice="should"] { color: var(--rag-amber-ink); }
.insight-figure.is-word[data-choice="could"] { color: var(--rag-green-ink); }
.insight-figure.is-word[data-choice="wont"] { color: var(--stravx-ink-muted); }
.insight-figure.is-word[data-score="4"], .insight-figure.is-word[data-score="3"] { color: var(--rag-green-ink); }
.insight-figure.is-word[data-score="2"] { color: var(--rag-amber-ink); }
.insight-figure.is-word[data-score="1"], .insight-figure.is-word[data-score="0"] { color: var(--rag-red-ink); }
.insight-figure.is-word[data-unset] { color: var(--stravx-ink-muted); font-weight: var(--stravx-weight-body, 400); }
.insight-band-label { font-size: 14px; color: var(--stravx-ink-muted); line-height: 1.25; max-width: 16ch; }
.insight-band-scope { margin-left: auto; font-size: 13px; color: var(--stravx-text-muted); text-align: right; }
a.insight-band-figure, .insight-band-scope a { color: inherit; text-decoration: none; border-radius: 6px; }
a.insight-band-figure .insight-band-label, .insight-band-scope a { text-decoration: underline; text-decoration-color: var(--stravx-border); text-underline-offset: 3px; }
a.insight-band-figure:hover .insight-band-label, .insight-band-scope a:hover { text-decoration-color: currentColor; }
@media (max-width: 699px) { .insight-band-figure { padding: 0 16px 0 0; border-right: 0; } .insight-band-scope { margin-left: 0; text-align: left; } }

/* Summary panels are Monopoly groups (cards.css): the coloured header is the top edge; only the body is laid out here. */
.insight-panel { min-width: 0; }
.insight-panel-body { display: flex; flex-direction: column; gap: 16px; }
.insight-panel-caption { margin: 0; font-size: 13px; color: var(--record-muted); }
.insight-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; align-items: start; }
.insight-split.is-even { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
@media (max-width: 1099px) { .insight-split, .insight-split.is-even { grid-template-columns: minmax(0, 1fr); } }

/* Positioned so visually hidden cell text is clipped by the scroll box instead of widening the page. */
.insight-matrix-wrap { position: relative; overflow-x: auto; max-width: 100%; }
.insight-matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.insight-matrix th, .insight-matrix td { padding: 6px 10px; text-align: center; border-top: 1px solid var(--insight-track); }
.insight-matrix thead th { font-size: 13px; font-weight: 500; color: var(--stravx-text-muted); border-top: 0; white-space: nowrap; }
.insight-matrix tbody th[scope="row"] { text-align: left; font-weight: 400; color: var(--stravx-ink); padding-left: 12px; min-width: 240px; }
@media (max-width: 699px) { .insight-matrix tbody th[scope="row"] { min-width: 150px; } .insight-matrix th, .insight-matrix td { padding: 6px; } }
.insight-matrix-group th { text-align: left; font-size: 12px; font-weight: var(--stravx-weight-label); color: var(--stravx-text-muted); padding-top: 12px; }
.insight-matrix .is-own { background: var(--insight-own); }
.insight-matrix thead th.is-own { color: var(--stravx-ink); font-weight: var(--stravx-weight-label); border-radius: 6px 6px 0 0; }
.insight-own-tag { font-weight: 400; color: var(--stravx-text-muted); }
.insight-cell { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 28px; padding: 0 6px; border-radius: 14px; font-size: 12px; font-weight: var(--stravx-weight-label); font-variant-numeric: tabular-nums; box-sizing: border-box; }
.insight-seq-1 { background: var(--insight-seq-1); color: var(--insight-seq-ink-light); }
.insight-seq-2 { background: var(--insight-seq-2); color: var(--insight-seq-ink-light); }
.insight-seq-3 { background: var(--insight-seq-3); color: var(--insight-seq-ink-dark); }
.insight-seq-4 { background: var(--insight-seq-4); color: var(--insight-seq-ink-dark); }
.insight-cell-gap { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1.5px dashed var(--insight-gap); box-sizing: border-box; vertical-align: middle; }
.insight-cell-unknown { font-size: 12px; color: var(--stravx-text-muted); }
.insight-flag { display: inline-block; margin-left: 8px; padding: 0 6px; border: 1.5px dashed var(--insight-gap); border-radius: 4px; font-size: 11px; color: var(--insight-gap-ink); white-space: nowrap; }


.insight-axis { position: relative; height: 18px; font-size: 12px; color: var(--stravx-text-muted); border-bottom: 1px solid var(--stravx-border); }
.insight-axis span { position: absolute; top: 0; }
.insight-record-list { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }
.insight-record-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; align-items: start; list-style: none; margin: 0; padding: 0; }
.insight-conflict .record-body { gap: 6px; }
.insight-conflict-axis { padding-inline: 13px; }
.insight-conflict-sub { font-size: 12px; color: var(--stravx-text-muted); }
.insight-conflict-track { position: relative; height: 22px; }
.insight-span { position: absolute; height: 8px; border-radius: 4px; }
.insight-span.is-first { top: 0; background: var(--insight-mark); }
.insight-span.is-waits { top: 12px; background: var(--insight-waits); }
.insight-needed-by { position: absolute; top: 11px; width: 10px; height: 10px; margin-left: -5px; border: 2px solid var(--insight-mark); border-radius: 50%; box-sizing: border-box; background: var(--record-surface, var(--stravx-surface)); }
.insight-overlap { position: absolute; top: -2px; bottom: -2px; border-left: 1px dashed var(--rag-red); border-right: 1px dashed var(--rag-red); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--rag-red) 22%, transparent) 0 2px, transparent 2px 6px); }
.insight-conflict-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--rag-red-ink); }
.insight-conflict-note .insight-warning { width: 14px; height: 14px; color: var(--rag-red); }

.insight-gap-list { display: flex; flex-direction: column; }
.insight-gap-item { display: grid; grid-template-columns: 240px minmax(0, 1fr) 80px; gap: 8px 24px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--insight-track); }
.insight-gap-item .insight-gap-track { height: 18px; }
.insight-gap-item-name { display: flex; flex-direction: column; gap: 2px; }
.insight-gap-item-name strong { font-size: 15px; }
.insight-gap-item-name span { font-size: 12px; color: var(--stravx-text-muted); }
.insight-gap-count { font-size: 20px; font-weight: var(--stravx-weight-label); font-variant-numeric: tabular-nums; }
.insight-gap-detail { grid-column: 2 / 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.insight-gap-detail a.insight-chip { text-decoration: none; }
.insight-gap-detail > .insight-record-grid { flex: 1 1 100%; }
@media (max-width: 699px) { .insight-gap-item { grid-template-columns: minmax(0, 1fr) 60px; } .insight-gap-item .insight-gap-track { grid-column: 1 / 3; } .insight-gap-detail { grid-column: 1 / 3; } }

.insight-area-row { display: grid; grid-template-columns: 200px repeat(var(--insight-columns, 3), minmax(0, 1fr)); gap: 12px 24px; align-items: center; padding: 10px 12px; border-radius: 8px; }
.insight-area-row.is-own { background: var(--insight-own); }
.insight-area-row.is-head { font-size: 13px; color: var(--stravx-text-muted); padding-top: 0; padding-bottom: 0; }
.insight-area-name { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: var(--stravx-weight-title); }
.insight-swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--insight-area); flex: none; }
@media (max-width: 899px) { .insight-area-row { grid-template-columns: minmax(0, 1fr); } .insight-area-row.is-head { display: none; } }

.insight-group { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; padding: 12px; border-radius: 8px; }
.insight-group.is-own { background: var(--insight-own); }
.insight-group-name { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 699px) { .insight-group { grid-template-columns: minmax(0, 1fr); } }

/* "Next" links are small action pills, not blue link text (owner page review, 3 October 2026). */
.insight-next { display: inline-flex; align-items: center; gap: 4px; width: fit-content; min-height: 32px; padding: 4px 12px; border: 1px solid var(--stravx-border); border-radius: 999px; background: var(--stravx-surface); color: var(--stravx-ink); font-size: 13px; font-weight: var(--stravx-weight-label); text-decoration: none; }
.insight-next:hover { border-color: color-mix(in srgb, var(--place-accent, var(--stravx-ink)) 45%, var(--stravx-border)); background: color-mix(in srgb, var(--place-accent, var(--stravx-ink)) 8%, var(--stravx-surface)); }

/* Home: Needs you and My work */
.needs-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.needs-badge { padding: 2px 10px; border-radius: 999px; background: var(--stravx-muted-surface); color: var(--stravx-ink); font-size: 13px; font-weight: var(--stravx-weight-label); }
.needs-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.needs-refresh { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--stravx-border); border-radius: 8px; background: var(--stravx-surface); color: var(--stravx-ink-muted); }
.needs-refresh svg { width: 16px; height: 16px; }
.needs-empty { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--stravx-ink-muted); }
.needs-briefing { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.needs-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 699px) { .needs-figures { grid-template-columns: minmax(0, 1fr); } }
.needs-figure { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--stravx-border); border-radius: 8px; background: var(--stravx-surface); box-shadow: var(--stravx-shadow-surface); color: var(--stravx-ink); text-decoration: none; }
.needs-figure:hover { border-color: var(--stravx-link); }
.needs-figure .insight-figure { font-size: 26px; }
.needs-figure-icon { width: 22px; height: 22px; color: var(--stravx-link); flex: none; }
.needs-figure-label { flex: 1; font-size: 14px; color: var(--stravx-ink-muted); }
.needs-figure-chevron { width: 18px; height: 18px; color: var(--stravx-text-muted); flex: none; }
.needs-caption { font-size: 12px; color: var(--stravx-text-muted); display: inline-flex; align-items: center; gap: 6px; }
.needs-item .record-body { gap: 12px; }
.needs-eyebrow { font-size: 12px; color: var(--stravx-text-muted); }
/* Small actions inside cards and dialogs (owner page review, 2 October 2026: no blue link text): a neutral chip. */
.needs-link { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 4px 12px; border: 1px solid var(--stravx-border); border-radius: 999px; background: var(--stravx-surface); color: var(--stravx-ink); font-size: 13px; font-weight: var(--stravx-weight-label); text-decoration: none; cursor: pointer; }
.needs-link:hover { border-color: color-mix(in srgb, var(--place-accent, var(--stravx-ink)) 45%, var(--stravx-border)); background: color-mix(in srgb, var(--place-accent, var(--stravx-ink)) 8%, var(--stravx-surface)); }
.needs-item-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.needs-history { margin-left: auto; font-size: 13px; }
.needs-history summary { cursor: pointer; color: var(--stravx-ink); text-decoration: underline; text-underline-offset: 3px; }
.needs-history ul { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: var(--stravx-text-muted); }

.review-timeline-grid { display: grid; grid-template-columns: minmax(180px, 300px) minmax(0, 1fr); gap: 0 20px; align-items: center; }
.review-row-label { display: flex; flex-direction: column; gap: 2px; min-height: 58px; justify-content: center; }
.review-row-label strong { font-size: 13px; font-weight: var(--stravx-weight-label); }
.review-row-label > span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--stravx-text-muted); }
.review-track { position: relative; height: 58px; }
.review-overlap { position: absolute; top: 4px; height: 108px; border-left: 1px dashed var(--rag-red); border-right: 1px dashed var(--rag-red); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--rag-red) 20%, transparent) 0 2px, transparent 2px 6px); z-index: 0; }
.review-move { position: absolute; top: 21px; border-top: 2px dashed var(--insight-row, var(--insight-mark)); z-index: 1; }
.review-was, .review-now { position: absolute; top: 15px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; box-sizing: border-box; z-index: 2; }
.review-was { border: 2px dashed var(--insight-row, var(--insight-mark)); background: var(--stravx-surface); }
.review-now { background: var(--insight-row, var(--insight-mark)); }
.review-was > span, .review-now > span { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; }
.review-was > span { color: var(--stravx-text-muted); }
.review-now > span { color: var(--stravx-ink); font-weight: var(--stravx-weight-label); }
.review-track.is-waits { --insight-row: var(--insight-waits); }
@media (max-width: 699px) { .review-timeline-grid { grid-template-columns: minmax(0, 1fr); } .review-timeline-grid > span:first-child { display: none; } .review-overlap { height: 50px; } }

.mywork-grid { list-style: none; margin: 0; padding: 0; gap: 16px; }
.mywork-grid .record-body { gap: 6px; }
.mywork-context, .mywork-when, .mywork-dates { font-size: 12px; color: var(--record-muted); }
.mywork-bar { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--insight-track); }
.mywork-bar-fill { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--entity-initiative); }
.mywork-bar-today { position: absolute; top: -3px; bottom: -3px; border-left: 2px solid var(--stravx-ink); }
.home-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.home-section-head h2 { margin: 0; font-size: 18px; font-weight: var(--stravx-weight-title); }
.home-section-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--stravx-text-muted); }

.insight-band-gap { width: 18px; height: 18px; border-radius: 4px; }
.insight-band-key { width: 16px; height: 9px; }

/* Inside Needs you the To do list sits directly under the heading; each item is its own card. */
.home-page .home-todo-panel { border: 0; padding: 0; background: transparent; box-shadow: none; }

/* Needs you as actions (owner decision, 1 October 2026): a list of cards, each with its status at the top right,
   plain-English lines and one verb-named action. Your Initiatives and measures reuse the head row. */
.needs-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.needs-item-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 12px; }
.needs-item-head > .record-title { flex: 1 1 260px; min-width: 0; margin: 0; }
/* Needs you lines use the card's full width (owner direction, 1 October 2026). */
.needs-item-lines { display: flex; flex-direction: column; gap: 4px; }
.needs-item-lines > p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--record-text); }
.needs-item-lines > p:last-child { font-weight: var(--stravx-weight-label); }
.your-work-grid { gap: 12px; }
.your-work-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 0; font-size: 13px; color: var(--record-muted); }

/* Interactive marks (FE-19): every mark shows its value on hover or focus and opens the narrowed view. */
.insight-mark { position: relative; color: inherit; text-decoration: none; cursor: pointer; }
a.insight-row-label.insight-mark:hover, a.insight-gap-row:hover .insight-row-label, a.insight-bar-row:hover .insight-row-label { text-decoration: underline; text-underline-offset: 3px; }
a.insight-mini-column:hover, a.insight-month:hover .insight-month-bar, a.insight-bar-row:hover .insight-bar { filter: brightness(0.88); }
a.insight-chip:hover { box-shadow: inset 0 0 0 1.5px currentColor; }
.insight-mark:is(:hover, :focus-visible) { z-index: 30; }
/* A mark's words show in the application's hover card (components/hoverCard), not a drawn tooltip. */
.insight-squares-link { display: block; width: 100%; }
.insight-card-chips { display: block; }
.insight-rag-chips { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 0; list-style: none; }
.insight-rag-chips .rag-badge { text-decoration: none; }
.insight-rag-chips .rag-badge:hover { box-shadow: inset 0 0 0 1.5px currentColor; }
.insight-filter-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: var(--stravx-primary-soft); font-size: 14px; color: var(--record-text); }
.insight-kr-groups { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.insight-kr-group { border-top: 1px solid var(--insight-track); padding-top: 6px; }
.insight-kr-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; width: 100%; min-height: 40px; padding: 4px 0; border: 0; background: none; color: var(--record-text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.insight-kr-group-head small { flex: 1 1 200px; font-size: 12px; color: var(--record-muted); }
.insight-kr-group-head svg { flex: none; margin-left: auto; }
.insight-kr-list { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 8px; padding: 0; list-style: none; }
.insight-kr-row { display: block; }
.insight-kr-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.insight-kr-name small { font-size: 12px; color: var(--record-muted); }
@media (max-width: 599px) { .insight-kr-row { grid-template-columns: minmax(0, 1fr); } }
a.insight-row-label { overflow: visible; }
.insight-row-text { display: block; overflow-wrap: break-word; }

/* Key Result progress in Needs you: the bar is progress, the tick is what was expected by today. */
.needs-progress { display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.needs-progress-track { position: relative; height: 12px; border-radius: 6px; background: var(--insight-track); }
.needs-progress-fill { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--rag-none); }
.needs-progress-fill.is-green { background: var(--rag-green); }
.needs-progress-fill.is-amber { background: var(--rag-amber); }
.needs-progress-fill.is-red { background: var(--rag-red); }
.needs-progress-expected { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--record-text); }
.needs-progress-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--record-muted); }
.needs-progress-legend strong { color: var(--record-text); font-weight: var(--stravx-weight-label); }

/* Objectives card (owner redesign, 1 October 2026): labelled columns, one square per Objective, a count per row. */
.insight-objective-table { display: grid; grid-template-columns: minmax(0, 1fr) max-content max-content; column-gap: 12px; row-gap: 10px; align-items: center; }
.insight-objective-head, .insight-objective-line { display: contents; }
.insight-objective-head > span { font-size: 11px; font-weight: var(--stravx-weight-label); color: var(--record-muted); }
.insight-objective-table .insight-row-label { width: auto; min-width: 0; font-size: 13px; color: var(--record-text); }
.insight-objective-squares { display: flex; flex-wrap: wrap; gap: 4px; max-width: 128px; }
.insight-objective-square { display: block; width: 16px; height: 16px; border-radius: 4px; background: var(--insight-mark); box-sizing: border-box; }
.insight-objective-square.is-gap { background: transparent; border: 1.5px dashed var(--insight-gap); }
.insight-objective-square.is-unknown { background: transparent; border: 1.5px dotted var(--insight-gap); opacity: 0.7; }
a.insight-objective-square:hover { filter: brightness(0.88); }
.insight-objective-count { font-size: 13px; font-weight: var(--stravx-weight-label); font-variant-numeric: tabular-nums; color: var(--record-text); white-space: nowrap; }

/* Initiatives column on the Objectives card (merged from the effort card), and Function squares by assessment. */
.insight-objective-table.has-initiatives { grid-template-columns: minmax(0, 1fr) max-content max-content max-content; }
/* "Objectives with work" heads both the squares and their count. */
.insight-objective-head > span:nth-child(2) { grid-column: span 2; }
.insight-objective-initiatives { min-width: 28px; font-size: 13px; font-weight: var(--stravx-weight-label); font-variant-numeric: tabular-nums; text-align: right; color: var(--record-text); }
/* Plan to improve (owner rule, 1 October 2026): RAG for the rule's states, data blue for "no gap recorded" (a fact,
   not a status) and dashed for not assessed. Squares and chips share the mapping. */
.insight-objective-square.is-plan-every-gap { background: var(--rag-green); }
.insight-objective-square.is-plan-part { background: var(--rag-amber); }
.insight-objective-square.is-plan-none { background: var(--rag-red); }
.insight-objective-square.is-plan-no-gap { background: var(--insight-mark); }
.insight-objective-square.is-plan-not-assessed { background: transparent; border: 1.5px dashed var(--insight-gap); }
.insight-objective-square.is-plan-not-visible, .insight-chip.is-plan-not-visible { background: transparent; border: 1.5px dotted var(--insight-gap); opacity: 0.7; }
.insight-key-unknown { border: 1.5px dotted var(--insight-gap); opacity: 0.7; }
.insight-objective-count.is-muted { font-weight: var(--stravx-weight-body); color: var(--record-muted); }
.insight-chip.is-plan-every-gap { border: 1.5px solid var(--rag-green); background: var(--rag-green-soft); color: var(--rag-green-ink); }
.insight-chip.is-plan-part { border: 1.5px solid var(--rag-amber); background: var(--rag-amber-soft); color: var(--rag-amber-ink); }
.insight-chip.is-plan-none { border: 1.5px solid var(--rag-red); background: var(--rag-red-soft); color: var(--rag-red-ink); }
.insight-chip:is(.is-plan-every-gap, .is-plan-part, .is-plan-none)::before { margin-right: 5px; font-weight: var(--stravx-weight-title); }
.insight-chip.is-plan-every-gap::before { content: "✓"; }
.insight-chip.is-plan-part::before { content: "!"; }
.insight-chip.is-plan-none::before { content: "×"; }
.insight-chip.is-plan-no-gap { border: 1.5px solid var(--insight-mark); background: var(--insight-own); }
.insight-chip.is-plan-not-assessed { border: 1.5px dashed var(--insight-gap); }

/* Gaps with their level move and the Initiatives planned to close them. */
.insight-plan-functions { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.insight-plan-functions > li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--insight-track); font-size: 14px; }
.insight-plan-functions > li:first-child { border-top: 0; padding-top: 0; }
.insight-plan-gaps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.insight-plan-gaps > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 3px 0; font-size: 13px; color: var(--record-muted); }
.insight-plan-gaps.is-detail > li { grid-template-columns: max-content minmax(0, 1fr) auto; padding: 9px 0; border-top: 1px solid var(--insight-track); font-size: 14px; color: var(--record-text); }
.insight-plan-gaps.is-detail > li:first-child { border-top: 0; }
.insight-plan-initiatives { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.insight-level { font-variant-numeric: tabular-nums; font-weight: var(--stravx-weight-label); color: var(--record-text); white-space: nowrap; }
@media (max-width: 599px) { .insight-plan-gaps > li, .insight-plan-gaps.is-detail > li { grid-template-columns: minmax(0, 1fr) auto; } }

/* Needs you as compact cards that open one dialog with the detail and the fix (owner, 1 October 2026). */
/* Needs you cards share one size (owner, 1 October 2026); Home shows at most five, then "See all" (owner, 2 October
   2026). auto-fill keeps every possible column, so cards keep the same width at any count. */
.needs-grid { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); grid-auto-rows: 1fr; align-items: stretch; }
.needs-card { position: relative; }
.needs-card-open { min-height: 24px; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; }
.needs-card-open::after { content: ""; position: absolute; inset: 0; }
.needs-card:hover { box-shadow: 0 0 0 1px var(--stravx-primary) inset, var(--stravx-shadow-surface); }
.needs-card-summary { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--record-muted); }
.needs-card .rag-badge { position: relative; z-index: 1; }
.needs-dialog { display: flex; flex-direction: column; gap: 14px; }
.needs-dialog-choices { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid var(--record-border); border-radius: 8px; }
.needs-dialog-choices legend { padding: 0 4px; font-size: 13px; font-weight: var(--stravx-weight-label); }
.needs-dialog-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 14px; }
.needs-dialog-choice input[type="date"] { width: auto; }
.needs-dialog-result { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.needs-dialog-error { margin: 0; color: var(--stravx-danger); font-size: 14px; }
.needs-dialog-more { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.needs-dialog-dismiss { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.needs-dialog-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.needs-dialog-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: var(--stravx-weight-label); }
.needs-dialog-note { grid-column: 1 / -1; }
/* Counts in a Needs you dialog (adoption batch 3b): each number large, its label beneath. */
.needs-figures { margin: 0; }
.needs-figures figcaption { margin: 0 0 6px; font-size: 13px; font-weight: var(--stravx-weight-label); color: var(--record-muted); }
.needs-figures dl { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }
.needs-figures dl > div { display: flex; flex-direction: column-reverse; min-width: 0; }
.needs-figures dt { font-size: 13px; color: var(--record-muted); overflow-wrap: anywhere; }
.needs-figures dd { margin: 0; font-size: 28px; line-height: 1.1; font-weight: var(--stravx-weight-title); color: var(--record-text); font-variant-numeric: tabular-nums; }
@media (max-width: 599px) { .needs-dialog-fields { grid-template-columns: minmax(0, 1fr); } }

/* Where reporting has stopped (FR-2): filled reported in 90 days, dashed gone quiet, hatched never measured. */
.insight-quiet-table { grid-template-columns: minmax(0, 1fr) max-content max-content max-content; }
.insight-quiet-area { display: contents; }
.insight-quiet-area-name { grid-column: 1 / -1; margin-top: 6px; font-size: 13px; font-weight: var(--stravx-weight-label); color: var(--record-text); }
.insight-quiet-table .insight-quiet-name { padding-left: 18px; }
/* Names wrap rather than clip. */
.insight-quiet-table .insight-quiet-name, .insight-quiet-table .insight-quiet-name .insight-row-text { white-space: normal; overflow: visible; text-overflow: clip; }
.insight-quiet-squares { max-width: 168px; }
.insight-quiet-age { font-size: 12px; color: var(--record-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.insight-objective-square.is-report-updated { background: var(--insight-mark); }
.insight-objective-square.is-report-quiet { background: transparent; border: 1.5px dashed var(--insight-gap); }
.insight-objective-square.is-report-never { background: repeating-linear-gradient(135deg, var(--insight-gap) 0 2px, transparent 2px 5px); border: 1px solid var(--insight-gap); }
/* KPIs (13 months) and overdue Initiatives sit under the Key Results, each in its own record colour. */
.insight-quiet-extra { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--record-border); }
.insight-quiet-extra-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0; font-size: 13px; font-weight: var(--stravx-weight-label); color: var(--record-text); }
.insight-quiet-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.insight-quiet-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.insight-quiet-list li > a, .insight-quiet-list li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .insight-quiet-table { grid-template-columns: minmax(0, 1fr) max-content; }
  .insight-quiet-table .insight-objective-head > span:nth-child(n+3), .insight-quiet-table .insight-quiet-age { display: none; }
  .insight-quiet-table .insight-objective-head > span:nth-child(2) { grid-column: auto; }
  .insight-quiet-table .insight-objective-count { grid-column: 1 / -1; margin-top: -6px; padding-left: 18px; }
}

/* A page's headline figures: big numbers with short captions; a dashed ring marks a gap. */
.page-figures { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; margin: 0; padding: 0 4px; list-style: none; color: var(--stravx-text-muted); }
.page-figures > li { display: flex; align-items: baseline; gap: 8px; }
.page-figures strong { font-size: 30px; font-weight: var(--stravx-weight-label); line-height: 1; font-variant-numeric: tabular-nums; color: var(--stravx-ink); }
/* A figure that opens what it counts: underlined label, like the figures bands elsewhere. */
.page-figure-link { display: inline-flex; align-items: baseline; gap: 8px; color: inherit; text-decoration: underline; text-decoration-color: var(--stravx-border); text-underline-offset: 3px; border-radius: 6px; }
.page-figure-link:hover { text-decoration-color: currentColor; }
#transit-not-on-map { scroll-margin-top: 96px; }
.page-gap-key { display: inline-block; width: 12px; height: 12px; margin-right: 4px; border: 1.5px dashed var(--insight-gap); border-radius: 4px; vertical-align: -1px; }
/* A band figure the page is narrowed to (a slicer, as on Work · Dependencies): filled in the place's colour. */
a.insight-band-figure:hover { background: color-mix(in srgb, var(--place-accent) 8%, transparent); }
a.insight-band-figure.is-current { margin-block: -6px; padding-block: 6px; background: color-mix(in srgb, var(--place-accent) 14%, var(--stravx-surface)); box-shadow: inset 0 -3px 0 var(--place-accent); }
a.insight-band-figure.is-current .insight-band-label { text-decoration: none; font-weight: var(--stravx-weight-label); }

/* From src/insights/explorer/explorer.css */
/* Insights explorer, in Home's colour refresh (1 October 2026): every view wears its record type's colour as a soft
   icon chip, blue only marks the selected view and controls, status takes its RAG colour with a glyph and a word, a
   Business area keeps its own colour, data marks are blue, and every gap or "not recorded" is a dashed outline. */

.explorer-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
/* On narrow screens the picture comes first and the views list follows it. */
@media (max-width: 1023px) { .explorer-layout { grid-template-columns: minmax(0, 1fr); } .explorer-layout > .explorer-rail { order: 2; } }
.explorer-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.explorer-rail { display: flex; flex-direction: column; gap: 4px; padding: 14px; }
.explorer-rail h2 { margin: 8px 0 2px; font-size: 12px; font-weight: var(--stravx-weight-title); letter-spacing: 0.04em; text-transform: uppercase; color: var(--stravx-text-muted); }
.explorer-rail h2:first-child { margin-top: 0; }
.explorer-rail ul { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.explorer-rail li { display: flex; align-items: center; gap: 4px; }
.explorer-view { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; padding: 6px 8px; border: 0; border-radius: var(--stravx-radius-control); background: transparent; color: var(--stravx-ink); text-align: left; font-size: 14px; line-height: 1.3; cursor: pointer; }
a.explorer-view { text-decoration: none; }
.explorer-view[aria-current="true"] .insight-type-icon { background: var(--record-surface); }
.explorer-view:hover { background: var(--stravx-muted-surface); }
.explorer-view[aria-current="true"] { background: var(--stravx-primary-soft); color: var(--stravx-primary); font-weight: var(--stravx-weight-label); }
.explorer-view-delete { padding: 4px 6px; border: 0; border-radius: 4px; background: transparent; color: var(--stravx-text-muted); cursor: pointer; }
.explorer-view-delete:hover { color: var(--stravx-danger); }
.explorer-hint { margin: 0; font-size: 12px; color: var(--stravx-text-muted); }

.explorer-query { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; }
.explorer-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 15px; color: var(--stravx-text-muted); }
/* Pickers are soft filled pills, as in the colour refresh mock-up; the border appears on hover and focus. */
.explorer-select { height: 36px; max-width: 100%; padding: 0 10px; border: 1px solid transparent; border-radius: 9px; background: var(--stravx-muted-surface); color: var(--stravx-ink); font-size: 14px; font-weight: var(--stravx-weight-label); cursor: pointer; }
.explorer-select:hover { border-color: var(--stravx-border); }
.explorer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.explorer-row-spacer { flex: 1; }
.explorer-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border: 1px solid var(--stravx-border); border-radius: 999px; background: var(--stravx-muted-surface); font-size: 13px; color: var(--stravx-ink); }
.explorer-chip button { padding: 0 6px; border: 0; border-radius: 999px; background: transparent; color: var(--stravx-text-muted); cursor: pointer; }
.explorer-chip button:hover { color: var(--stravx-danger); }
.explorer-chip-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: currentColor; }
.explorer-save { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.explorer-save input { width: 240px; max-width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--stravx-border); border-radius: var(--stravx-radius-control); background: var(--record-surface); color: var(--stravx-ink); }
.explorer-error { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--stravx-danger); }

/* The figures sit in a band like the question pages', with the counted record type's thin edge. */
.explorer-figures { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; margin: 0; padding: 14px 22px; list-style: none; border: 1px solid var(--stravx-border); border-top: 3px solid var(--entity-edge); border-radius: var(--record-radius, 8px); background: var(--stravx-surface); box-shadow: var(--stravx-shadow-surface); }
/* A figure wraps its label under a long total (for example pounds) rather than overflowing at narrow widths. */
.explorer-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; max-width: 100%; color: var(--stravx-text-muted); }
.explorer-figure strong { min-width: 0; overflow-wrap: anywhere; font-size: 30px; font-weight: var(--stravx-weight-label); line-height: 1; font-variant-numeric: tabular-nums; color: var(--stravx-ink); }
.explorer-figure-open { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 0; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; text-align: left; text-decoration: underline; text-decoration-color: var(--stravx-border); text-underline-offset: 3px; cursor: pointer; }
.explorer-figure-open:hover { text-decoration-color: currentColor; }
.explorer-gap-key { display: inline-block; width: 12px; height: 12px; border: 1.5px dashed var(--insight-gap); border-radius: 4px; vertical-align: -1px; margin-right: 4px; }

.explorer-picture-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.explorer-picture-head h2 { margin: 0; font-size: 16px; font-weight: var(--stravx-weight-title); text-wrap: balance; }
.explorer-picture-caption { margin: 2px 0 0; font-size: 13px; color: var(--stravx-text-muted); }
.explorer-segmented { display: inline-flex; flex-wrap: wrap; padding: 3px; border: 1px solid var(--stravx-border); border-radius: 8px; background: var(--record-surface); }
.explorer-segmented button { padding: 4px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--stravx-text-muted); font-size: 13px; cursor: pointer; }
.explorer-segmented button[aria-pressed="true"] { background: var(--stravx-primary-soft); color: var(--stravx-primary); font-weight: var(--stravx-weight-label); }

.explorer-bars { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.explorer-bar-row { display: grid; grid-template-columns: minmax(120px, 240px) minmax(0, 1fr) 52px; align-items: center; gap: 12px; width: 100%; padding: 5px 6px; border: 0; border-radius: 6px; background: transparent; text-align: left; color: var(--stravx-ink); cursor: pointer; }
.explorer-bar-row:hover, .explorer-bar-row.is-selected, .explorer-column:hover, .explorer-column.is-selected { background: var(--stravx-muted-surface); }
/* Labels show in full and wrap between words (no clipped words). */
.explorer-bar-label { min-width: 0; overflow-wrap: break-word; font-size: 14px; line-height: 18px; }
.explorer-bar-value { text-align: right; font-weight: var(--stravx-weight-label); font-variant-numeric: tabular-nums; }
/* Pounds need a wider value column than counts, so an amount such as £1,250,000 is never cut. */
.explorer-bars.is-money .explorer-bar-row { grid-template-columns: minmax(96px, 240px) minmax(0, 1fr) minmax(88px, max-content); }
.explorer-track { display: flex; height: 20px; overflow: hidden; border-radius: 4px; background: var(--insight-track); }
.explorer-track.is-empty { background: transparent; }
.explorer-fill { height: 100%; }
.explorer-fill.is-gap { box-sizing: border-box; border: 1.5px dashed var(--insight-gap); border-radius: 4px; background: transparent !important; }
.explorer-zero { display: inline-block; width: 14px; height: 14px; margin: 3px; border: 1.5px dashed var(--insight-gap); border-radius: 4px; box-sizing: border-box; }

.explorer-columns-wrap, .explorer-grid-wrap { position: relative; max-width: 100%; overflow-x: auto; }
/* Every column shares a fixed bar row, so the bars stand on one baseline; each label wraps underneath at its own height. */
.explorer-columns { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 18px 0 0; list-style: none; }
.explorer-column-item { display: grid; grid-template-rows: 214px auto; row-gap: 4px; flex: 1 0 var(--explorer-column-width, 40px); min-width: var(--explorer-column-width, 40px); }
.explorer-column { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; padding: 0 2px; border: 0; border-radius: 6px; background: transparent; color: var(--stravx-ink); cursor: pointer; }
.explorer-stack { display: flex; flex-direction: column-reverse; width: 100%; overflow: hidden; border-radius: 4px 4px 0 0; }
.explorer-stack .explorer-fill { width: 100%; }
.explorer-column-value { font-size: 12px; font-weight: var(--stravx-weight-label); font-variant-numeric: tabular-nums; }
.explorer-column-label { font-size: 11px; line-height: 1.2; color: var(--stravx-text-muted); text-align: center; overflow-wrap: break-word; }

.explorer-grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.explorer-grid th, .explorer-grid td { padding: 6px 8px; border-top: 1px solid var(--insight-track); text-align: center; }
.explorer-grid thead th, .explorer-grid thead td { border-top: 0; vertical-align: bottom; min-width: 64px; font-size: 12px; font-weight: 500; color: var(--stravx-text-muted); }
.explorer-grid tbody th { min-width: 170px; max-width: 280px; text-align: left; font-weight: 400; color: var(--stravx-ink); }
.explorer-grid-total { color: var(--stravx-text-muted); font-variant-numeric: tabular-nums; }
.explorer-cell { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 28px; padding: 0 6px; border: 0; border-radius: 14px; font-size: 12px; font-weight: var(--stravx-weight-label); font-variant-numeric: tabular-nums; cursor: pointer; }
.explorer-cell.is-zero { min-width: 0; padding: 0; background: transparent; }
.explorer-cell.is-tone-green { background: var(--rag-green-soft); color: var(--rag-green-ink); box-shadow: inset 0 0 0 1.5px var(--rag-green); }
.explorer-cell.is-tone-amber { background: var(--rag-amber-soft); color: var(--rag-amber-ink); box-shadow: inset 0 0 0 1.5px var(--rag-amber); }
.explorer-cell.is-tone-red { background: var(--rag-red-soft); color: var(--rag-red-ink); box-shadow: inset 0 0 0 1.5px var(--rag-red); }
.explorer-cell.is-tone-gap { background: transparent; color: var(--stravx-ink); box-shadow: none; outline: 1.5px dashed var(--insight-gap); outline-offset: -1.5px; }
.explorer-cell.is-tone-gap.is-selected { outline: 2px solid var(--stravx-ink); outline-offset: 2px; }
.explorer-bucket-name { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.explorer-swatch { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; }
.explorer-cell.is-selected { outline: 2px solid var(--stravx-ink); outline-offset: 2px; }

.explorer-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.explorer-table th, .explorer-table td { padding: 8px; border-top: 1px solid var(--stravx-border); text-align: left; }
.explorer-table thead th { border-top: 0; font-size: 12px; font-weight: 500; color: var(--stravx-text-muted); }
.explorer-table .is-number { text-align: right; font-variant-numeric: tabular-nums; }
.explorer-link { padding: 0; border: 0; background: transparent; color: var(--stravx-primary); text-decoration: underline; cursor: pointer; }

.explorer-time { display: block; font-family: inherit; }
.explorer-time-grid { stroke: var(--insight-track); }
.explorer-time-base { stroke: var(--stravx-border); }
.explorer-time-bar { fill: var(--insight-mark); }
.explorer-time-bar.is-gap { fill: none; stroke: var(--insight-gap); stroke-dasharray: 3 2; }
.explorer-time-zero { fill: none; stroke: var(--insight-gap); stroke-dasharray: 2 2; }
.explorer-time-value, .explorer-time-label { font-size: 11px; fill: var(--stravx-text-muted); }
.explorer-time-label.is-year { fill: var(--stravx-ink); font-weight: var(--stravx-weight-label); }
.explorer-time-scale { font-size: 11px; font-weight: var(--stravx-weight-label); fill: currentColor; }
.explorer-time-strip { font-size: 12px; font-weight: 500; fill: var(--stravx-ink); }
.explorer-time-line { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; }
.explorer-time-dot { fill: var(--record-surface); stroke: currentColor; stroke-width: 2.5; }
.explorer-time-none { fill: var(--insight-gap); }
.explorer-hit { cursor: pointer; outline: none; }
.explorer-hit-bg { fill: transparent; }
.explorer-hit:hover .explorer-hit-bg, .explorer-hit:focus-visible .explorer-hit-bg, .explorer-hit.is-selected .explorer-hit-bg { fill: var(--stravx-muted-surface); }
.explorer-hit:focus-visible .explorer-time-bar, .explorer-hit.is-selected .explorer-time-bar { stroke: var(--stravx-ink); stroke-width: 2; }
.explorer-hit.is-dot:hover circle, .explorer-hit.is-dot:focus-visible circle, .explorer-hit.is-dot.is-selected circle { r: 7; }

.explorer-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--stravx-text-muted); }
.explorer-legend li { display: inline-flex; align-items: center; gap: 6px; }
.explorer-legend .is-overlay { flex-basis: 100%; }
.explorer-legend strong { font-weight: var(--stravx-weight-label); color: var(--stravx-ink); }
.explorer-key { display: inline-block; width: 12px; height: 10px; border-radius: 2px; background: currentColor; }
.explorer-key.is-line { width: 16px; height: 3px; }
.explorer-key.is-marker { width: 8px; height: 8px; transform: rotate(45deg); }
.explorer-key.is-gap { box-sizing: border-box; border: 1.5px dashed var(--insight-gap); background: transparent; }

.explorer-records ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.explorer-record-meta { font-size: 12px; color: var(--stravx-text-muted); }
.explorer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

@media (prefers-reduced-motion: no-preference) { .explorer-fill { transition: width .2s ease, height .2s ease; } }

/* From scripts/explore/explore.css */
/* /explore (MARKETING-EXPLORE V2). The product's Insights and explorer styles come first in the generated explore.css;
   these rules lay out the example around them. Colour has a job: a Business area colour marks that area's work, RAG
   with a glyph and a word marks timing, a dashed outline marks a gap, and blue marks only what you can act on. */

.xp-page { background: var(--stravx-paper); padding-block: 20px 48px; }
.xp { max-width: 1320px; }

/* Compact context: the question, the example label and the tools, with no band above the picture. */
.xp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 14px; }
.xp-title { flex: 1 1 560px; min-width: 0; }
.xp-context { margin: 0 0 4px; font-size: 13px; color: var(--stravx-text-muted); }
/* A working page: the question takes the width it needs on one line where it fits, not the marketing heading measure. */
.xp-head h1 { max-width: 40ch; margin: 0; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; letter-spacing: -.02em; font-weight: 600; text-wrap: balance; }
.xp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.xp-version { display: inline-flex; padding: 3px; border: 1px solid var(--stravx-border); border-radius: 10px; background: var(--stravx-surface); }
.xp-version button { min-height: 34px; padding: 4px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--stravx-ink-muted); font-size: 13px; cursor: pointer; }
.xp-version button[aria-pressed="true"] { background: var(--stravx-primary-soft); color: var(--stravx-primary); font-weight: 500; }

.xp-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--stravx-border); border-radius: 10px; background: var(--stravx-surface); color: var(--stravx-link); font-size: 14px; font-weight: 500; cursor: pointer; text-align: center; }
.xp-button:hover { background: var(--stravx-primary-soft); }
.xp-button:disabled { color: var(--stravx-text-muted); background: var(--stravx-surface); cursor: not-allowed; box-shadow: none; }
.xp-button.xp-primary { border-color: var(--stravx-primary); background: var(--stravx-primary); color: var(--stravx-on-primary); }
.xp-button.xp-primary:hover { background: var(--stravx-primary-hover); }
.xp-button.xp-primary:disabled { border-color: var(--stravx-border); background: var(--stravx-muted-surface); color: var(--stravx-text-muted); }
.xp-muted-on { font-weight: 400; opacity: .85; }
.xp-link-button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 2px 0; border: 0; background: none; color: var(--stravx-ink); font-size: 14px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }

/* The three jobs: a plain tab row, with the selected tab the only one marked. */
.xp-jobs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--stravx-border); }
.xp-jobs [role="tab"] { min-height: 44px; padding: 10px 16px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--stravx-ink-muted); font-size: 15px; font-weight: 500; cursor: pointer; }
.xp-jobs [role="tab"][aria-selected="true"] { color: var(--stravx-ink); border-bottom-color: var(--stravx-primary); }
.xp-jobs [role="tab"]:hover { color: var(--stravx-ink); }
.xp-tab-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 10px; border: 1px dashed var(--entity-initiative); font-size: 12px; color: var(--stravx-ink); }

/* One line of guidance from the visitor's actual state, with one next step. */
.xp-guide { margin: 14px 0 16px; }
.xp-guide p { margin: 0; max-width: none; font-size: 15px; color: var(--stravx-ink); }
.xp-guide strong { font-weight: 600; }
.xp-guide-action { margin-left: 6px; padding: 4px 0; min-height: 32px; border: 0; background: none; color: var(--stravx-ink); font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; }
.xp-job:focus { outline: none; }
.xp-job:focus-visible { outline: 2px solid var(--stravx-focus); outline-offset: 4px; }

/* Findings: count chips in the product's grammar. */
.xp-findings { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.xp-finding { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 10px; border: 1px solid var(--stravx-border); border-radius: 999px; background: var(--stravx-surface); color: var(--stravx-ink); font-size: 14px; cursor: pointer; }
.xp-finding strong { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.xp-finding:hover { border-color: var(--stravx-ink-muted); }
.xp-finding[aria-pressed="true"] { border-color: var(--stravx-ink); box-shadow: inset 0 0 0 1px var(--stravx-ink); }
.xp-finding.is-none { color: var(--stravx-ink-muted); }
.xp-key-glyph { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; color: #fff; font-size: 12px; font-weight: 600; }
.xp-key-glyph.is-red { background: var(--rag-red); }
.xp-key-glyph.is-green { background: var(--rag-green); }
.xp-key-gap { display: inline-block; width: 16px; height: 12px; border: 1.5px dashed var(--insight-gap); border-radius: 4px; }
.xp-key-line { display: inline-block; width: 20px; height: 0; border-top: 2.5px solid var(--rag-red); }
.xp-key-ghost { display: inline-block; width: 22px; height: 10px; border: 1.5px dashed var(--stravx-ink-muted); border-radius: 5px; }
.xp-swatch { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; }
.xp-gap-chip { display: inline-flex; flex: none; align-items: center; white-space: nowrap; padding: 1px 8px; border: 1.5px dashed var(--insight-gap); border-radius: 999px; color: var(--stravx-ink); font-size: 12px; font-weight: 500; }

/* Layouts: the picture first, the closer look beside it. */
.xp-find-layout, .xp-slice-layout, .xp-decide-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.xp-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 1px solid var(--stravx-border); border-radius: 12px; background: var(--stravx-surface); box-shadow: var(--stravx-shadow-surface); }
.xp-side p { margin: 0; font-size: 14px; }
.xp-result-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.xp-side-kicker { margin: 0; font-size: 13px !important; line-height: 1.4; font-weight: 500; color: var(--stravx-text-muted); }
.xp-side-kicker:focus { outline: none; }
.xp-side-kicker:focus-visible { outline: 2px solid var(--stravx-focus); outline-offset: 3px; }
/* The way back to the picture is needed only when the result sits below it. */
.xp-return { display: none; min-height: 40px; padding: 4px 12px; border: 1px solid var(--stravx-border); border-radius: 999px; background: var(--stravx-surface); color: var(--stravx-ink); font-size: 13px; font-weight: 500; cursor: pointer; }
.xp-return:hover { border-color: var(--stravx-ink-muted); }
@media (max-width: 1100px) { .xp-return { display: inline-flex; align-items: center; } .xp-side { scroll-margin-top: 12px; } .xp-result-head { scroll-margin-top: 12px; } }

/* Compact record references: the product's type icon beside a name inside a picture. */
.xp-type-icon { display: inline-flex; flex: none; align-items: center; color: var(--entity-ink); }
.xp-type-icon svg { width: 14px; height: 14px; }
.xp-bar-label .xp-type-icon svg { width: 12px; height: 12px; }
.xp-side-head { margin: 0; font-size: 17px; line-height: 1.35; }
.xp-side-title { margin: 6px 0 0; font-size: 14px; font-weight: 600; }
.xp-side-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 4px; }
.xp-concern { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--rag-red); border-radius: 10px; background: var(--rag-red-soft); }
.xp-concern p { color: var(--rag-red-ink); }
.xp-payoff { font-size: 15px !important; color: var(--stravx-ink); }
.xp-muted { color: var(--stravx-text-muted); font-size: 13px; }
.xp-card-list, .xp-mini-list, .xp-dep-list, .xp-scope { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.xp-mini-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.xp-dep { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--stravx-border); border-radius: 10px; }
.xp-dep.is-conflict { border-color: var(--rag-red); }
.xp-dep p { font-size: 13px !important; color: var(--stravx-ink-muted); }
.xp-scope { display: flex; flex-wrap: wrap; gap: 6px; }
.xp-scope li { padding: 2px 10px; border-radius: 999px; background: var(--stravx-muted-surface); font-size: 12px; }
.xp-record .record-body { gap: 2px; }
.xp-record-title { padding: 0; border: 0; background: none; color: var(--record-text); font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; text-decoration: none; }
.xp-record-line { margin: 0; font-size: 13px !important; color: var(--record-muted); }

/* The plan map: aims in rows under their priorities, work as bars on one timeline. */
.xp-map-frame { margin: 0; min-width: 0; padding: 14px 16px 12px; border: 1px solid var(--stravx-border); border-radius: 12px; background: var(--stravx-surface); box-shadow: var(--stravx-shadow-surface); }
.xp-map { --xp-label: 230px; overflow-x: auto; }
.xp-map-head, .xp-row, .xp-d-head, .xp-d-row { display: grid; grid-template-columns: var(--xp-label) minmax(0, 1fr); }
.xp-map-head, .xp-map-body, .xp-d-head, .xp-d-body { min-width: 720px; }
.xp-map-corner { align-self: end; padding-bottom: 6px; font-size: 12px; color: var(--stravx-text-muted); }
.xp-months { display: grid; grid-template-columns: repeat(var(--xp-months, 12), minmax(0, 1fr)); font-size: 11px; color: var(--stravx-text-muted); }
/* Month on the first line, year on its own line under January and the first month, so neither crowds its neighbour. */
.xp-month { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; min-height: 34px; padding: 0 0 6px 4px; border-left: 1px solid var(--insight-track); line-height: 14px; white-space: nowrap; }
.xp-month b { order: 2; font-weight: 500; color: var(--stravx-ink); }
.xp-map-body, .xp-d-body { position: relative; }
.xp-group { padding: 10px 0 4px; border-top: 1px solid var(--stravx-border); }
.xp-group:first-child { border-top: 0; }
.xp-group-chip { display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px; border-radius: 999px; background: var(--entity-chip); color: var(--entity-ink); font-size: 12px; font-weight: 500; }
.xp-group.is-gap .xp-group-chip { background: transparent; border: 1.5px dashed var(--insight-gap); color: var(--stravx-ink); }
.xp-row { align-items: stretch; border-radius: 8px; }
.xp-row.is-selected { background: var(--stravx-muted-surface); }
.xp-aim { display: flex; align-items: flex-start; gap: 8px; padding: 6px 12px 6px 0; min-width: 0; }
.xp-aim-button .xp-type-icon { margin-right: 6px; vertical-align: -2px; }
.xp-aim-button { display: inline; padding: 3px 0; border: 0; background: none; color: var(--stravx-ink); font-size: 14px; font-weight: 500; line-height: 1.35; text-align: left; cursor: pointer; }
/* The selected aim is a tinted chip, not an underline (links and link-like controls are never underlined). */
.xp-aim-button[aria-pressed="true"] { border-radius: 4px; background: var(--stravx-primary-soft); box-shadow: 0 0 0 4px var(--stravx-primary-soft); }
.xp-aim-id { margin-right: 6px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; color: var(--stravx-text-muted); }
.xp-aim-name { font-size: 14px; font-weight: 500; color: var(--stravx-ink); }
.xp-aim-note { display: block; font-size: 12px; font-weight: 400; color: var(--stravx-text-muted); }
.xp-aim-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; margin-left: auto; padding: 0 6px; border-radius: 999px; background: var(--entity-objective-soft, var(--stravx-muted-surface)); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.xp-aim .xp-gap-chip { margin-left: auto; }
.xp-track { position: relative; padding: 4px 0; background-image: linear-gradient(90deg, var(--insight-track) 1px, transparent 1px); background-size: calc(100% / var(--xp-months, 12)) 100%; }
.xp-lane { position: relative; height: 36px; }
.xp-gap-lane { position: absolute; inset: 6px 0; display: flex; align-items: center; padding-left: 12px; border: 1.5px dashed var(--insight-gap); border-radius: 8px; font-size: 12px; color: var(--stravx-ink-muted); }

.xp-bar { position: absolute; top: 0; height: 36px; min-width: 8px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.xp-bar-label { position: absolute; left: 0; top: 1px; display: inline-flex; align-items: center; gap: 4px; max-width: 280px; font-size: 12px; line-height: 15px; font-weight: 500; color: var(--stravx-ink); white-space: nowrap; }
.xp-bar.is-end .xp-bar-label { left: auto; right: 0; }
.xp-bar-fill { position: absolute; left: 0; right: 0; bottom: 5px; height: 12px; border-radius: 6px; }
.xp-bar-dates { display: none; }
.xp-bar-flag { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 4px; background: var(--rag-red); color: #fff; font-size: 10px; }
.xp-bar:hover .xp-bar-fill, .xp-bar:focus-visible .xp-bar-fill { box-shadow: 0 0 0 2px var(--stravx-surface), 0 0 0 3.5px var(--stravx-ink-muted); }
.xp-bar.is-selected .xp-bar-fill { box-shadow: 0 0 0 2px var(--stravx-surface), 0 0 0 4px var(--stravx-ink); }
.xp-bar.is-changed .xp-bar-fill { outline: 1.5px dashed var(--stravx-ink); outline-offset: 2px; }
.xp-bar.is-undated { left: 0; width: auto; min-width: 200px; }
.xp-bar.is-undated .xp-bar-label { top: 8px; padding: 2px 10px; border: 1.5px dashed var(--insight-gap); border-radius: 999px; }
.xp-bar.is-undated.is-selected .xp-bar-label { border-style: solid; border-color: var(--stravx-ink); }
.xp-bar.is-undated:is(:hover, :focus-visible) .xp-bar-label { border-color: var(--stravx-ink-muted); }
.xp-ghost { position: absolute; bottom: 2px; height: 18px; border: 1.5px dashed var(--stravx-ink-muted); border-radius: 8px; pointer-events: none; }
.xp-map-body.has-focus .xp-row.is-dim, .xp-map-body.has-focus .xp-bar.is-dim { opacity: .3; }
.xp-row.is-gap .xp-aim-button { color: var(--stravx-ink); }

/* Dependency links: a conflict is red, no margin amber, in order green; selected links draw in. */
.xp-links, .xp-d-links { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.xp-link .xp-link-path { fill: none; stroke-width: 2; }
.xp-link circle { fill: var(--stravx-surface); stroke-width: 2; }
.xp-link.is-conflict .xp-link-path, .xp-link.is-conflict circle { stroke: var(--rag-red); stroke-width: 2.5; }
.xp-link.is-conflict .xp-link-head { fill: var(--rag-red); }
.xp-link.is-attention .xp-link-path, .xp-link.is-attention circle { stroke: var(--rag-amber); stroke-dasharray: 6 4; }
.xp-link.is-attention .xp-link-head { fill: var(--rag-amber); }
.xp-link.is-aligned .xp-link-path, .xp-link.is-aligned circle { stroke: var(--rag-green); }
.xp-link.is-aligned .xp-link-head { fill: var(--rag-green); }
.xp-link.is-unknown .xp-link-path { stroke: var(--insight-gap); stroke-dasharray: 3 3; }
.xp-link.is-unknown .xp-link-head { fill: var(--insight-gap); }
/* A clash: the part of the waiting bar that overlaps the work it needs (/explore review, 16 October 2026). */
.xp-link-overlap { fill: color-mix(in srgb, var(--rag-red) 22%, transparent); stroke: var(--rag-red); stroke-width: 1.5; stroke-dasharray: 4 3; }
.xp-link.is-attention .xp-link-overlap { fill: color-mix(in srgb, var(--rag-amber) 22%, transparent); stroke: var(--rag-amber); }
.xp-link-mark rect { stroke: var(--stravx-surface); stroke-width: 2; }
.xp-link-mark text { fill: #fff; font-size: 12px; font-weight: 600; }
.xp-link-mark.is-green rect { fill: var(--rag-green); }
.xp-link-mark.is-amber rect { fill: var(--rag-amber); }
.xp-link-mark.is-red rect { fill: var(--rag-red); }
.xp-link-mark.is-none rect { fill: var(--insight-gap); }
.xp-legend { margin-top: 10px; }
.xp-legend .xp-swatch { width: 12px; height: 10px; }
.xp-legend-note { margin-left: auto; }
/* The legend names the priority chip and the count bubble on the map (/explore review, 16 October 2026). */
.xp-key-priority { display: inline-grid; place-items: center; width: 22px; height: 16px; border-radius: 999px; background: var(--entity-chip); color: var(--entity-ink); }
.xp-key-priority svg { width: 11px; height: 11px; }
.xp-legend .xp-key-count { margin-left: 0; min-width: 18px; height: 16px; font-size: 11px; }

/* Slicing: presets as questions, the product's query sentence and pictures. */
.xp-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.xp-more-presets { align-items: center; }
.xp-preset { min-height: 38px; padding: 6px 14px; border: 1px solid var(--stravx-border); border-radius: 999px; background: var(--stravx-surface); color: var(--stravx-ink); font-size: 14px; cursor: pointer; }
.xp-preset:hover { border-color: var(--stravx-ink-muted); }
.xp-preset[aria-pressed="true"] { border-color: var(--stravx-primary); background: var(--stravx-primary-soft); color: var(--stravx-primary); font-weight: 500; }
.xp-slice-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.xp-query { border: 1px solid var(--stravx-border); border-radius: 12px; background: var(--stravx-surface); }
/* The question comes first; building your own is optional detail under the picture. */
.xp-custom { border-top: 1px solid var(--stravx-border); padding-top: 10px; }
.xp-custom > summary { min-height: 36px; display: flex; align-items: center; color: var(--stravx-ink); font-size: 14px; font-weight: 500; cursor: pointer; }
.xp-custom[open] > summary { margin-bottom: 10px; }
.xp-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.xp-filters[hidden] { display: none; }
.xp-pick { display: inline-flex; }
.xp-picture { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 18px; border: 1px solid var(--stravx-border); border-radius: 12px; background: var(--stravx-surface); box-shadow: var(--stravx-shadow-surface); }
.xp-picture-title { margin: 0; font-size: 17px; }
.xp-note-line { margin: 0; padding: 6px 10px; border-left: 3px solid var(--insight-gap); background: var(--stravx-muted-surface); font-size: 13px; color: var(--stravx-ink); }
.xp-picture .explorer-bar-row, .xp-picture .explorer-column, .xp-picture .explorer-cell { transition: none; }
.xp-picture .explorer-bar-row.is-selected, .xp-picture .explorer-column.is-selected { box-shadow: inset 0 0 0 2px var(--stravx-ink); }

/* Try a decision: the Initiative, the work it needs and the work waiting on it, on one timeline. */
.xp-decide-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.xp-decision { --xp-label: 210px; overflow-x: auto; padding: 14px 16px 12px; border: 1px solid var(--stravx-border); border-radius: 12px; background: var(--stravx-surface); box-shadow: var(--stravx-shadow-surface); }
.xp-d-group { margin: 10px 0 2px; font-size: 12px; font-weight: 500; color: var(--stravx-text-muted); }
.xp-d-none { margin: 0 0 6px; font-size: 13px; color: var(--stravx-text-muted); }
.xp-d-row { align-items: center; min-height: 44px; }
.xp-d-row.is-focus { min-height: 64px; margin: 6px 0; border-radius: 10px; background: var(--stravx-muted-surface); }
.xp-d-label { display: flex; flex-direction: column; gap: 1px; padding: 4px 12px 4px 8px; min-width: 0; }
.xp-d-name { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: var(--stravx-ink); font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; }
.xp-d-row.is-focus .xp-d-name { font-size: 15px; font-weight: 600; cursor: default; }
.xp-d-dates { padding-left: 17px; font-size: 12px; color: var(--stravx-ink-muted); }
.xp-d-track { position: relative; height: 44px; background-image: linear-gradient(90deg, var(--insight-track) 1px, transparent 1px); background-size: calc(100% / var(--xp-months, 12)) 100%; }
.xp-d-row.is-focus .xp-d-track { height: 64px; }
.xp-d-bar { position: absolute; top: 14px; height: 16px; }
.xp-d-fill { position: absolute; inset: 0; border-radius: 8px; }
.xp-d-bar.is-focus { top: 14px; height: 36px; }
.xp-d-bar.is-focus .xp-d-fill { border-radius: 10px; }
.xp-d-grip { position: absolute; inset: 0 12px; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 0; background: transparent; color: #fff; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; cursor: grab; touch-action: none; }
.xp-handle { position: absolute; top: -4px; bottom: -4px; width: 14px; border-radius: 7px; background: var(--stravx-surface); border: 2px solid var(--stravx-ink); cursor: ew-resize; touch-action: none; }
.xp-handle.is-start { left: -7px; }
.xp-handle.is-finish { right: -7px; }
.xp-handle:hover, .xp-handle:focus-visible { background: var(--stravx-primary-soft); }
.xp-decision.is-dragging, .xp-decision.is-dragging .xp-d-grip { cursor: grabbing; user-select: none; }
.xp-d-row .xp-ghost { top: 10px; bottom: auto; height: 24px; }
.xp-d-row.is-focus .xp-ghost { top: 10px; height: 44px; border-radius: 12px; }
.xp-d-nodates { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); padding: 2px 10px; border: 1.5px dashed var(--insight-gap); border-radius: 999px; font-size: 12px; color: var(--stravx-ink-muted); white-space: nowrap; }

.xp-outcome { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 1px solid var(--stravx-border); border-radius: 12px; background: var(--stravx-surface); }
.xp-outcome-title { margin: 0; font-size: 16px; }
.xp-shift { margin: 0; font-size: 15px; }
.xp-shift strong { font-weight: 600; }
/* After a finding: its limits, the real handoff and the next steps, in one quiet block. */
.xp-finding-next { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--stravx-border); }
.xp-finding-next p { margin: 0; font-size: 14px; }
.xp-limits { color: var(--stravx-ink); }
.xp-handoff { color: var(--stravx-ink-muted); }
.xp-task { display: grid; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--stravx-border); }
.xp-task p { margin: 0; }
.xp-changes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.xp-change { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--stravx-border); border-radius: 10px; font-size: 14px; }
.xp-change.is-changed { border-color: var(--stravx-ink); box-shadow: inset 0 0 0 1px var(--stravx-ink); }
.xp-change p { margin: 0; }
.xp-change-rest { display: flex; align-items: center; padding: 10px 12px; border: 1px dashed var(--stravx-border); border-radius: 10px; color: var(--stravx-text-muted); font-size: 14px; }
.xp-change-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.xp-arrow { color: var(--stravx-text-muted); }
.xp-controls h2 { margin: 0; }
.xp-controls-title { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.xp-field { display: grid; gap: 4px; font-size: 13px; color: var(--stravx-text-muted); }
.xp-field select { width: 100%; }
.xp-facts { display: grid; gap: 4px; margin: 0; font-size: 13px; }
.xp-facts div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; }
.xp-facts dt { color: var(--stravx-text-muted); }
.xp-facts dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.xp-changed-chip { padding: 0 6px; border: 1px dashed var(--stravx-ink); border-radius: 6px; font-size: 12px; }
.xp-nudge { display: flex; flex-wrap: wrap; gap: 8px; }
.xp-nudge .xp-button { flex: 1 1 120px; }
.xp-dates { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: center; margin: 0; padding: 10px 12px; border: 1px solid var(--stravx-border); border-radius: 10px; }
.xp-dates legend { padding: 0 4px; font-size: 13px; font-weight: 500; }
.xp-dates label { font-size: 13px; font-weight: 500; }
.xp-dates input { min-height: 44px; min-width: 0; padding: 6px 10px; border: 1px solid var(--stravx-border); border-radius: 8px; background: var(--stravx-surface); color: var(--stravx-ink); font-size: 14px; }
.xp-problem { min-height: 0; color: var(--rag-red-ink); font-size: 13px !important; }
.xp-problem:empty { display: none; }
.xp-table-view { margin-top: 16px; }
.xp-table-view summary { min-height: 44px; display: flex; align-items: center; color: var(--stravx-ink); font-size: 14px; font-weight: 500; cursor: pointer; }
.xp-table-view h3 { margin: 16px 0 8px; font-size: 15px; }
.xp-scroll { overflow-x: auto; }
.xp-table-view td p { margin: 4px 0 0; font-size: 13px; }

/* The product's hover card, placed beside a mark; the pointer can move into it. */
.xp-tip.mm-hover { width: max-content; max-width: min(300px, calc(100vw - 16px)); pointer-events: auto; }
.xp-tip .hover-card-plain { display: grid; gap: 3px; }
.xp-tip p { margin: 0; font-size: 12px; line-height: 17px; }
.xp-tip .hover-card-title { font-size: 13px; }

.record-dialog { width: min(540px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; background: transparent; overflow: visible; }
.record-dialog::backdrop { background: rgb(16 27 42 / .45); }
.record-dialog-card { max-height: calc(100vh - 48px); overflow: auto; background: var(--stravx-surface); }
.record-dialog-card .record-body { gap: 6px; padding: 14px 20px 4px; }
.record-dialog h2 { margin: 0; font-size: 20px; }
.record-dialog h2:focus { outline: none; }
.record-dialog h3 { margin: 10px 0 2px; font-size: 13px; font-weight: 500; color: var(--stravx-text-muted); }
.record-dialog p { margin: 0; font-size: 14px; }
.record-dialog-actions { display: flex; justify-content: flex-end; padding: 12px 20px 16px; }

.xp-next { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--stravx-border); }
.xp-next p { margin: 0; font-size: 14px; color: var(--stravx-ink-muted); }
.xp-next-link { font-size: 15px; font-weight: 500; text-decoration: none; }
.xp-next .text-link { color: var(--stravx-ink); }
.xp-next-text { display: grid; gap: 4px; flex: 1 1 420px; }
.xp-next .xp-next-lead { font-size: 16px; font-weight: 500; color: var(--stravx-ink); }
.xp-next-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.xp-noscript { padding: 16px; border: 1px dashed var(--stravx-border); border-radius: 12px; }

@supports (corner-shape: squircle) {
  :root :is(.xp-map-frame, .xp-side, .xp-picture, .xp-query, .xp-decision, .xp-outcome) { corner-shape: squircle; border-radius: 22px; }
  :root :is(.xp-button, .xp-dep, .xp-change, .xp-concern) { corner-shape: squircle; border-radius: 14px; }
}

/* Motion: 150 to 200ms of feedback, and none at all for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .xp-row, .xp-bar, .xp-finding, .xp-preset, .xp-change { transition: opacity 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
  .xp-bar { transition: left 180ms ease, width 180ms ease, opacity 160ms ease; }
  .xp-decision:not(.is-dragging) .xp-d-bar { transition: left 180ms ease, width 180ms ease; }
  .xp-link.is-lit .xp-link-path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: xp-draw 200ms ease-out forwards; }
  .xp-link.is-lit.is-attention .xp-link-path, .xp-link.is-lit.is-unknown .xp-link-path { stroke-dasharray: none; animation: none; }
  .xp-decision.is-dragging .xp-link .xp-link-path { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
}
@keyframes xp-draw { to { stroke-dashoffset: 0; } }

@media (max-width: 1100px) {
  .xp-find-layout, .xp-slice-layout, .xp-decide-layout { grid-template-columns: minmax(0, 1fr); }
  .xp-side { position: static; }
  /* One column: Look closer comes before the map, not after the whole list (/explore review, 16 October 2026). */
  .xp-find-layout > .xp-side { order: -1; }
  .xp-find-layout > .xp-side .xp-task { display: none; }
  .xp-decide-layout .xp-controls { order: -1; }
}

/* Phone: the same detail and actions, one column, the time pictures scroll inside their own frame. */
@media (max-width: 640px) {
  .xp.wrap { width: calc(100% - 32px); }
  .xp-head { align-items: flex-start; }
  .xp-tools { width: 100%; justify-content: space-between; }
  .xp-jobs [role="tab"] { flex: 1 1 auto; padding-inline: 8px; font-size: 14px; }
  .xp-decision { --xp-label: 150px; }
  .xp-d-head, .xp-d-body { min-width: 640px; }
  /* The plan map becomes a list on a phone: each aim with its work as Business-area-edged rows, dates written out and
     conflicts flagged, instead of a desktop timeline squeezed down. */
  .xp-map-head, .xp-links { display: none; }
  .xp-map-body { min-width: 0; }
  .xp-row { grid-template-columns: minmax(0, 1fr); }
  .xp-aim { padding: 8px 0 4px; }
  .xp-track { padding: 0 0 8px; background: none; }
  .xp-lane { height: auto; }
  .xp-lane + .xp-lane { margin-top: 6px; }
  .xp-ghost { display: none; }
  .xp-bar, .xp-bar.is-undated { position: relative; left: auto !important; width: 100% !important; height: auto; min-height: 44px; padding: 6px 10px 6px 14px; border: 1px solid var(--stravx-border); border-radius: 10px; background: var(--stravx-surface); }
  .xp-bar:hover, .xp-bar:focus-visible { border-color: var(--stravx-ink-muted); }
  .xp-bar-fill { left: 0; right: auto; top: 6px; bottom: 6px; width: 4px; height: auto; border-radius: 2px; }
  .xp-bar-label, .xp-bar.is-end .xp-bar-label, .xp-bar.is-undated .xp-bar-label { position: static; display: flex; flex-wrap: wrap; max-width: none; white-space: normal; padding: 0; border: 0; font-size: 14px; line-height: 20px; }
  .xp-bar-dates { display: block; flex-basis: 100%; font-weight: 400; font-size: 12px; color: var(--stravx-ink-muted); }
  .xp-bar.is-undated { border-style: dashed; border-color: var(--insight-gap); }
  .xp-bar.is-selected { border-color: var(--stravx-ink); box-shadow: inset 0 0 0 1px var(--stravx-ink); }
  .xp-bar.is-selected .xp-bar-fill, .xp-bar:hover .xp-bar-fill, .xp-bar:focus-visible .xp-bar-fill { box-shadow: none; }
  .xp-bar.is-changed .xp-bar-fill { outline: 0; }
  .xp-bar.is-changed { border-style: dashed; border-color: var(--stravx-ink); }
  .xp-gap-lane { position: static; min-height: 40px; }
  .xp-map-frame, .xp-decision { padding-inline: 10px; }
  .xp-facts div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .xp-finding { flex: 1 1 calc(50% - 8px); }
  .xp-legend-note { margin-left: 0; }
}

@media (forced-colors: active) {
  .xp-bar-fill, .xp-d-fill { background: Highlight !important; }
  .xp-bar.is-selected .xp-bar-fill, .xp-finding[aria-pressed="true"], .xp-preset[aria-pressed="true"] { outline: 2px solid CanvasText; }
}

/* Links and link-like controls (owner direction, 16 October 2026): never blue and never underlined. They are dark
   text at label weight; pointer hover turns them the site's accent. The product's Insights rules above underline
   their figure labels and scope links; on this public example those are plain too. */
:is(.xp-link-button, .xp-guide-action, .xp-record-title, .xp-aim-button, .xp-custom > summary, .xp-table-view summary, .xp-next-link, .xp-next .text-link, .insight-card-link, .insight-band-scope a) { transition: color 150ms ease; }
:is(.xp-link-button, .xp-guide-action, .xp-record-title, .xp-aim-button, .xp-custom > summary, .xp-table-view summary, .xp-next-link, .xp-next .text-link, .insight-card-link, .insight-band-scope a):hover { color: #a14d46; }
a.insight-band-figure .insight-band-label, .insight-band-scope a, .insight-card-link, .insight-card-link:hover { text-decoration: none; }
.insight-band-scope a { font-weight: 500; }