/* Same file the marketing site vendors (public/site/vendor/fonts) - CSP 'self' matches
   any path on this origin, so there is no reason to duplicate the binary here too. */
@font-face {
  font-family: 'Mulish';
  src: url('/vendor/fonts/Mulish-Variable-Latin-Normal.woff2') format('woff2-variations');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('/vendor/fonts/Mulish-Variable-Latin-Italic.woff2') format('woff2-variations');
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Brand palette — identical to public/site/site.css. */
  --purple: #7C3AED;
  --purple-dark: #5B21B6;
  --blue: #15B8D6;
  --green: #36D6A4;
  --mint-white: #DFFFF5;
  --ink: #24143F;
  --ink-soft: #4B4459;      /* secondary text; >= 4.5:1 on white and on --surface */
  --surface: #F4F0FF;
  --surface-line: #E1D6FA;
  --white: #FFFFFF;
  --shadow: 0 1px 2px rgba(36, 20, 63, .06), 0 8px 24px rgba(36, 20, 63, .07);

  /* Semantic roles the dashboard is written against. */
  --bg: var(--white);
  --panel: var(--white);           /* cards */
  --panel-soft: var(--surface);    /* inset surfaces: inputs, tiles, tracks, accordion shells */
  --line: var(--surface-line);
  --line-strong: #C4B5F0;          /* hover borders, quieter dividers */
  --hover: #F8F5FF;
  --selected: #EDE6FD;
  --text: var(--ink);
  --muted: var(--ink-soft);
  /* --accent is text, links, and focus rings: purple-dark carries ~8.6:1 on white.
     --accent-strong is the button fill with white text (~5.7:1). */
  --accent: var(--purple-dark);
  --accent-strong: var(--purple);
  --accent-strong-hover: var(--purple-dark);
  --on-accent: var(--white);
  --accent-soft: rgba(124, 58, 237, .12);
  --brand-blue: var(--blue);
  --brand-green: var(--green);
  --brand-mint-white: var(--mint-white);

  /* Status colours serve as both text and fills, so each clears 4.5:1 on white. */
  --danger: #B3261E;
  --ok: #136F4E;
  --warn: #8A5A00;
  --danger-soft: #FBEAE9;
  --ok-soft: #E6F5EF;
  --warn-soft: #FFF6E5;

  /* Chart palette: every fill clears 3:1 against white and against its neighbours. */
  --chart-1: #5B21B6;
  --chart-2: #136F4E;
  --chart-3: #B45309;
  --chart-4: #BE185D;
  --chart-5: #0E7490;
  --chart-6: #7C3AED;
  --chart-7: #C2410C;
  --chart-8: #1D4ED8;
  --chart-neutral: #8B83A0;
}

* { box-sizing: border-box; letter-spacing: 0; }

html { font-size: 100%; }

body {
  margin: 0;
  padding: 2rem 1.5rem 4rem;
  background: var(--bg);
  color: var(--text);
  font: 1.125rem/1.6 'Mulish', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

#app { max-width: 1280px; margin: 0 auto; }

h1 { font-size: 2rem; margin: 0 0 .5rem; }
h2 { font-size: 1.375rem; margin: 0 0 1rem; color: var(--text); }
h3 { font-size: 1.25rem; margin: 1.5rem 0 .65rem; }
h4 { font-size: 1.125rem; margin: 1.25rem 0 .5rem; color: var(--text); }

.product-brand { display: inline-flex; align-items: center; gap: .65rem; }
.brand-link { display: inline-flex; align-items: center; gap: .65rem; color: inherit; text-decoration: none; border-radius: 8px; }
.brand-link:hover .brand-mark { border-color: var(--accent); }
.brand-mark {
  width: 1.75rem; height: 1.75rem; border-radius: 6px; flex: none;
  background:
    linear-gradient(var(--purple-dark), var(--purple-dark)) 18% 78% / 20% 42% no-repeat,
    linear-gradient(var(--accent-strong), var(--accent-strong)) 50% 64% / 20% 70% no-repeat,
    linear-gradient(var(--brand-blue), var(--brand-blue)) 82% 71% / 20% 56% no-repeat,
    var(--white);
  border: 1px solid var(--line);
}
.skip-link { position: fixed; left: -9999px; top: 0; z-index: 100; padding: .75rem 1rem; background: var(--ink); color: var(--white); }
.skip-link:focus { left: 0; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 1.125rem; margin: .5rem 0 0; }
.error { color: var(--danger); margin: 1rem 0 0; }
.notice { color: var(--ok); margin: 1rem 0 0; }
.ok { color: var(--ok); }
.warn { color: var(--warn); }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 1.75rem 2rem; box-shadow: var(--shadow); }
.tab-panel > * + *, #site-detail > * + *, #insights-body > * + * { margin-top: 1.25rem; }
#insights-body > div:empty, #site-detail > div:empty { display: none; }
.narrow { max-width: 420px; margin: 8vh auto; }
.narrow-form { max-width: 520px; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line);
}
.tabs { display: flex; align-items: center; gap: .4rem; }

label { display: block; margin: 1rem 0 .4rem; font-size: 1.125rem; color: var(--muted); }

input {
  width: 100%; padding: .6rem .7rem; background: var(--panel-soft);
  border: 1px solid var(--line); border-radius: 7px; color: var(--text); font: inherit;
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

button {
  margin-top: 1.1rem; padding: .55rem .9rem; background: var(--accent-strong); color: var(--on-accent);
  border: 0; border-radius: 7px; font: inherit; font-weight: 600; cursor: pointer;
  transition: filter .12s ease, background-color .12s ease, border-color .12s ease, transform .06s ease;
}
button, .button-link, input, select, summary { min-height: 44px; }
button:hover:not(:disabled) { background: var(--accent-strong-hover); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .55; cursor: default; }
button.busy { opacity: .85; cursor: progress; }
button.busy::before {
  content: ''; display: inline-block; width: .8em; height: .8em; margin-right: .5em; vertical-align: -.1em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: obp-spin .7s linear infinite;
}
@keyframes obp-spin { to { transform: rotate(360deg); } }

#loading-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 50; overflow: hidden; background: transparent;
}
#loading-bar::after {
  content: ''; position: absolute; top: 0; left: -40%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: obp-sweep 1.1s ease-in-out infinite;
}
@keyframes obp-sweep { to { left: 100%; } }
button.ghost { margin-top: 0; background: transparent; color: var(--muted); border: 1px solid var(--line); font-weight: 500; }
/* Outlined controls invert on hover: brand fill, white text (8.98:1). Same rule on the site. */
button.ghost:hover:not(:disabled), button.tab:hover:not(:disabled), button.subtab:hover:not(:disabled),
.button-link:hover, button.analysis-lens:hover:not(:disabled), button.citation:hover:not(:disabled) {
  background: var(--purple-dark); color: var(--white); border-color: var(--purple-dark);
}
button.ghost:hover:not(:disabled) .muted, button.tab:hover:not(:disabled) .count, button.subtab:hover:not(:disabled) .count { color: var(--white); }
button.danger { background: var(--danger); color: var(--on-accent); }
button.link { margin: 0; padding: 0; background: none; color: var(--accent); font-weight: 500; text-decoration: underline; }
button.tab { margin-top: 0; background: transparent; color: var(--muted); border: 1px solid transparent; font-weight: 500; }
button.tab.active { color: var(--text); border-color: var(--line); background: var(--panel); }
button.small { margin-top: 0; padding: .5rem .75rem; font-size: 1.125rem; }
.button-link { display: inline-flex; align-items: center; text-decoration: none; padding: .5rem .75rem; font-size: 1.125rem; border-radius: 7px; border: 1px solid var(--line); color: var(--muted); font-weight: 500; }

.switch { margin-top: 1.25rem; font-size: 1.125rem; color: var(--muted); }
.auth-secondary { width: 100%; margin-top: 1rem; padding: .7rem 1rem; }
.auth-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.auth-actions button { margin-top: 1.1rem; }
.intake-status { margin: 1rem 0 0; padding: .85rem 1rem; border-left: 3px solid var(--accent); background: var(--panel-soft); }
.intake-status.ok { border-left-color: var(--ok); }
.intake-status.warn { border-left-color: var(--warn); }

.row { display: flex; gap: .6rem; align-items: center; }
.row input { flex: 1; }
.row button { margin-top: 0; white-space: nowrap; }

.inline-form { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }

table { width: 100%; border-collapse: collapse; font-size: 1.125rem; }
th { text-align: left; font-weight: 600; color: var(--muted); font-size: 1.125rem; }
th, td { padding: .65rem .75rem .65rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.selectable { cursor: pointer; }
tbody tr.selectable:hover td { background: var(--hover); }
tbody tr.selected td { background: var(--selected); }

dl { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1.5rem; margin: 0; font-size: 1.125rem; }
dt { color: var(--muted); }
dd { margin: 0; word-break: break-word; }

code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1em; }
pre {
  background: var(--panel-soft); border: 1px solid var(--line); border-radius: 7px;
  padding: .9rem; font-size: 1.125rem; margin: .5rem 0 0;
  /* A verification token that runs off the edge cannot be copied by the people this
     product is for, so it wraps instead of scrolling. */
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.copyable { display: flex; gap: .5rem; align-items: flex-start; margin-top: .5rem; }
.copyable pre { flex: 1; margin: 0; }
.copyable button { margin-top: 0; }
.field-label { font-size: 1.125rem; color: var(--muted); margin: .7rem 0 0; }

.badge {
  font-size: 1.125rem;
  border: 1px solid var(--line); border-radius: 999px; padding: .15rem .55rem; color: var(--muted);
}
.badge.ok { color: var(--ok); border-color: currentColor; }
.badge.warn { color: var(--warn); border-color: currentColor; }

.section { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.danger-zone { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--line); }

/* ─── Sites ────────────────────────────────────────────────────────────────────────── */

.site-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem; }
.site-tile {
  margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  background: var(--panel-soft); display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: center;
}
.site-tile:hover { border-color: var(--line-strong); }
.site-tile.selected { border-color: var(--accent); background: var(--selected); }
.site-tile-open {
  min-width: 0; margin: 0; padding: .9rem 1rem; border: 0; background: transparent; color: var(--text);
  text-align: left; font: inherit; font-weight: 500; display: flex; flex-direction: column; gap: .35rem;
}
.site-tile-open:hover:not(:disabled) { background: var(--hover); }
.site-tile .domain { font-weight: 600; font-size: 1.125rem; }
.site-tile .meta { display: flex; gap: .4rem; flex-wrap: wrap; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .6rem; margin-top: .5rem; }
.step { border: 1px solid var(--line); border-radius: 8px; padding: .75rem .9rem; display: flex; gap: .6rem; align-items: flex-start; }
.step .dot { width: 10px; height: 10px; border-radius: 50%; margin-top: .4rem; flex: none; background: var(--line); }
.step.done .dot { background: var(--ok); }
.step.todo .dot { background: var(--warn); }
.step .label { font-size: 1.125rem; color: var(--muted); }
.step .value { font-weight: 600; }

.brand-view-header {
  display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; gap: 1.25rem;
  padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
}

/* Ask about your site: the fourth row of the brand card. The transcript is a fixed-height
   scroll region so a conversation never pushes the report down the page. */
.ask-panel { grid-column: 1 / -1; display: grid; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.ask-head h3 { margin: 0 0 .25rem; font-size: 1.125rem; }
.ask-head p { margin: 0; max-width: 60rem; }
.ask-transcript {
  max-height: 16rem; overflow-y: auto; padding: .9rem 1rem; display: grid; gap: 1rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
}
.ask-transcript[hidden] { display: none; }
.ask-turn { display: grid; gap: .5rem; }
.ask-q, .ask-a { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .75rem; align-items: start; }
.ask-role { color: var(--muted); font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding-top: .2rem; }
.ask-q p { margin: 0; font-weight: 600; }
.ask-a p { margin: 0; }
.ask-a p + p { margin-top: .5rem; }
.ask-a .badge { justify-self: start; margin-bottom: .35rem; }
.ask-body { display: grid; gap: .5rem; min-width: 0; }
.ask-body .badge { justify-self: start; }
.ask-turn.pending .ask-a p { font-style: italic; }
.ask-compose { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: .75rem; align-items: start; }
.ask-compose textarea {
  width: 100%; min-height: calc(3 * 1.6em + 1.2rem); padding: .6rem .7rem; resize: vertical;
  background: var(--panel); border: 1px solid var(--line); border-radius: 7px; color: var(--text); font: inherit; line-height: 1.6;
}
.ask-compose textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.ask-side { display: grid; gap: .35rem; justify-items: end; }
.ask-side button { margin: 0; min-width: 6rem; }
.ask-count { font-size: .875rem; }
.ask-count.warn { color: var(--warn); }
button.citation-filter { color: var(--ink); border-color: var(--accent); }
.brand-back { color: var(--accent); }
.brand-view-title h2 { margin: 0; font-size: 1.5rem; overflow-wrap: anywhere; }
.brand-view-header .subnav { justify-content: flex-end; margin: 0; }
.download-report { margin: 0 0 0 .35rem; padding: .7rem 1.1rem; background: var(--accent-strong); color: var(--on-accent); font-weight: 800; }
.download-report:hover:not(:disabled) { background: var(--accent-strong-hover); color: var(--on-accent); }

dialog {
  width: min(34rem, calc(100vw - 2rem)); padding: 0; color: var(--text); background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 1.5rem 5rem rgba(36, 20, 63, .25);
}
dialog::backdrop { background: rgba(36, 20, 63, .45); }
#pdf-form { padding: 1.5rem; }
.dialog-head, .dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dialog-head h2 { margin: .2rem 0 0; }
.dialog-close { width: 2.75rem; padding: 0; font-size: 1.5rem; }
.pdf-options { border-top: 1px solid var(--line); }
.pdf-option { display: flex; align-items: center; gap: .75rem; margin: 0; padding: .8rem 0; color: var(--text); cursor: pointer; }
.pdf-option input { width: 1rem; flex: none; margin: 0; }
.pdf-select-all { margin-top: 1rem; font-weight: 700; }
.dialog-actions { justify-content: flex-end; margin-top: 1.25rem; }
.dialog-actions button { margin: 0; }

.status-accordion { margin-top: 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.enhanced-callout {
  display: flex; align-items: center; gap: .9rem;
  margin-top: 1rem; padding: .9rem 1.25rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink);
}
.enhanced-callout-icon { width: 1.5rem; height: 1.5rem; flex: none; fill: var(--accent); }
.enhanced-callout p { margin: 0; flex: 1; }
.enhanced-callout button { flex: none; margin: 0; }
.google-reconnect-notice {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--warn); border-radius: 8px; background: var(--panel);
}
.google-reconnect-notice strong { color: var(--warn); }
.google-reconnect-notice p { margin: .2rem 0 0; color: var(--text); }
.google-reconnect-notice button { flex: none; margin: 0; }
.status-accordion > summary {
  display: flex; align-items: center; gap: .65rem; min-height: 3.25rem; padding: .65rem 1rem;
  list-style: none; cursor: pointer; background: var(--surface); border-radius: 8px;
}
.status-accordion[open] > summary { border-radius: 8px 8px 0 0; }
.status-accordion > summary::-webkit-details-marker { display: none; }
.status-accordion > summary::before { content: '\25B8'; flex: none; width: 1rem; color: var(--accent); font-size: 1.125rem; line-height: 1; transition: transform .15s ease; }
.status-accordion[open] > summary::before { transform: rotate(90deg); }
.status-title { font-weight: 700; }
.status-summary { font-size: .95rem; }
.status-dot { width: .65rem; height: .65rem; border-radius: 50%; flex: none; background: var(--muted); }
.status-dot.green { background: var(--ok); }
.status-dot.yellow { background: var(--warn); }
.status-dot.red { background: var(--danger); }
.status-dot.grey { background: var(--chart-neutral); }
/* Findings interrupted: the accordion turns red and carries a large exclamation mark. */
.status-accordion.interrupted { border-color: var(--danger); border-width: 2px; }
.status-alarm {
  flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--danger); color: var(--white); font-weight: 800; font-size: 1.5rem; line-height: 1;
}
.status-accordion.interrupted .status-summary { color: var(--danger); font-weight: 700; }
.findings-interrupted { margin-bottom: 1rem; }
.findings-interrupted a { color: inherit; font-weight: 700; }
.status-body { padding: 0 1rem 1rem; border-top: 1px solid var(--line); }
.status-list { margin-top: 1rem; border-top: 1px solid var(--line); }
.status-row {
  display: grid; grid-template-columns: 1rem minmax(0, 1fr); align-items: center; gap: .75rem;
  padding: .8rem 0; border-bottom: 1px solid var(--line);
}
.status-row:last-child { border-bottom: 0; }
.status-copy { display: flex; align-items: baseline; gap: .65rem; min-width: 0; flex-wrap: wrap; }
.status-copy .muted { overflow-wrap: anywhere; }
.status-cta { margin-top: 1rem; }
.status-cta button { margin: 0; }

/* Setup: three numbered steps; the third is a projection of the onboarding workflow. */
.setup-step {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem;
  padding: 1.25rem 0; border-top: 1px solid var(--line);
}
.setup-step:first-of-type { border-top: 0; }
.setup-step h3 { margin: 0 0 .6rem; }
.step-index {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--line); font-weight: 700; color: var(--muted); flex: none;
}
.setup-step.done .step-index { border-color: var(--ok); color: var(--ok); }
.setup-fact { margin: 0; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.connect-row { margin-top: 1rem; flex-wrap: wrap; }
.connect-button { margin: 0; padding: .8rem 1.6rem; font-size: 1.25rem; min-height: 3.25rem; }
.connect-button.ghost { font-size: 1.125rem; }
.progress-list { margin-top: 1.25rem; border-top: 1px solid var(--line); }
.progress-row {
  display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .75rem; align-items: start;
  padding: .8rem 0; border-bottom: 1px solid var(--line);
}
.progress-row:last-child { border-bottom: 0; }
.progress-copy { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.progress-copy span { color: var(--muted); overflow-wrap: anywhere; }
.progress-glyph {
  width: 1.1rem; height: 1.1rem; margin-top: .35rem; border-radius: 50%; border: 2px solid var(--line); box-sizing: border-box;
}
.progress-glyph.ok { border-color: var(--ok); background: var(--ok); }
.progress-glyph.warn { border-color: var(--warn); background: var(--warn); }
.progress-glyph.fail { border-color: var(--danger); background: var(--danger); }
.progress-glyph.wait { border-color: var(--warn); border-style: dashed; }
.progress-glyph.run { border-color: var(--accent); border-right-color: transparent; animation: obp-spin .8s linear infinite; }
.progress-row.fail strong { color: var(--danger); }
.progress-row.warn strong { color: var(--warn); }
.setup-remove { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.setup-enhanced-hint { margin-top: 1.25rem; }

.enhanced > * + * { margin-top: 1.1rem; }
.enhanced-what ul { margin: .6rem 0 0; padding-left: 1.2rem; }
.enhanced-what li + li { margin-top: .3rem; }
.install-check:empty { display: none; }
.install-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.install-findings .finding { display: flex; gap: .6rem; align-items: baseline; }
.install-findings .finding.fail { color: var(--danger); }
.ownership-alternatives { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ownership-alternatives h4 { margin: 0 0 .3rem; }
.ownership-alternatives pre { white-space: pre-wrap; word-break: break-all; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); font-size: 1rem; }

/* ─── Measurement Audit ─────────────────────────────────────────────────────── */
.audit > * + * { margin-top: 1.25rem; }
.audit-group-title { margin: 0 0 .4rem; }
.audit-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin-top: .75rem; font-size: 1rem; color: var(--muted); }
.audit-legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.audit-list { display: grid; gap: .6rem; margin-top: .75rem; }
.audit-row {
  display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) max-content; gap: 1rem; align-items: start;
  padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft);
}
.audit-row.needs_attention { border-color: var(--danger); }
.audit-row.available { border-color: var(--accent); }
.audit-status { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; padding-top: .15rem; }
.audit-copy strong { display: block; }
.audit-copy p { margin: .2rem 0 0; color: var(--muted); }
.audit-evidence { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: .4rem; font-size: 1rem; }
.audit-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.audit-instructions { margin-top: .6rem; }
.audit-instructions summary { cursor: pointer; color: var(--accent); font-weight: 500; min-height: 0; }
.audit-instructions ol { margin: .4rem 0 0; padding-left: 1.3rem; }
.audit-instructions li + li { margin-top: .25rem; }
.audit-path { margin: .4rem 0 0; font-size: 1rem; }
.audit-dismissed { margin-top: .5rem; }
@media (max-width: 720px) {
  .audit-row { grid-template-columns: 1fr; }
  .audit-actions { flex-direction: row; align-items: center; }
}

.snippet { border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.1rem; background: var(--panel-soft); }
.snippet + .snippet { margin-top: .9rem; }
.snippet .snippet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.snippet .snippet-head h4 { margin: 0; }
.snippet pre { background: var(--panel); margin-top: .6rem; }
.snippet-options { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .9rem; }
.snippet-actions { justify-content: flex-end; margin-top: .6rem; flex-wrap: wrap; }
.snippet-actions .hint { margin: 0; margin-right: auto; }
.ack { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .75rem; align-items: start; margin: .75rem 0 0; font-size: 1rem; line-height: 1.5; cursor: pointer; }
.ack input { width: 1.25rem; height: 1.25rem; min-height: 0; margin: .15rem 0 0; accent-color: var(--accent-strong); cursor: pointer; }
.ack input:disabled { cursor: default; }
.callout { border-left: 3px solid var(--warn); padding: .75rem 1rem; background: var(--warn-soft); border-radius: 0 8px 8px 0; color: var(--text); font-size: 1.125rem; }
.callout.info { border-left-color: var(--accent); background: var(--panel-soft); color: var(--text); }
.callout.important { border-left-color: var(--danger); background: var(--danger-soft); color: var(--text); padding: 1rem 1.25rem; }
.callout.important p { margin: 0; }
.callout.important .important-lead { font-size: 1.2rem; }
.callout.important .important-foot { margin-top: .85rem; color: var(--muted); }
.important-mark { color: var(--danger); letter-spacing: .02em; margin-right: .35rem; }
.important-options { margin: .75rem 0 0; padding-left: 1.25rem; display: grid; gap: .5rem; }
.cmp-prompt { margin-top: .5rem; font-size: 1rem; }
.cmp-prompt summary { cursor: pointer; color: var(--accent); }
.cmp-prompt pre { white-space: pre-wrap; font-size: .9rem; line-height: 1.45; background: var(--panel-soft); color: var(--text); padding: .9rem 1rem; border-radius: 8px; margin: .5rem 0 0; }

.findings { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .4rem; }
.findings li { display: flex; gap: .6rem; align-items: flex-start; font-size: 1.125rem; }
.findings .mark { font-weight: 700; flex: none; width: 1.2rem; }
.findings .ok .mark { color: var(--ok); }
.findings .warn .mark { color: var(--warn); }
.findings .fail .mark { color: var(--danger); }

/* ─── Charts ───────────────────────────────────────────────────────────────────────── */

.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; }
.chart { border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.1rem; min-height: 200px; }
.chart.wide { grid-column: 1 / -1; min-height: 0; }
.chart h4 { margin: 0 0 .75rem; }
.chart .empty { color: var(--muted); font-size: 1.125rem; }

.timechart { width: 100%; height: auto; display: block; }
.timechart .grid { stroke: var(--line); stroke-width: 1; }
.timechart .tick { fill: var(--muted); font-size: 13px; text-anchor: end; }
.timechart .area { fill: var(--accent-soft); }
.timechart .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.timechart .line.engaged { stroke: var(--ok); stroke-width: 1.5; stroke-dasharray: 4 3; }
.timechart .line.clicks { stroke: var(--warn); stroke-width: 1.5; }
.timechart .dot { fill: var(--accent); }

/* ─── Folds ─────────────────────────────────────────────────────────────────────────── */

details.fold { padding: 0; }
details.fold > summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem 1.75rem; user-select: none; background: var(--surface); border-radius: 8px;
}
details.fold[open] > summary { border-radius: 8px 8px 0 0; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: '\25B8'; color: var(--muted); font-size: 1.125rem; width: 1rem; display: inline-block; transition: transform .15s ease; }
details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold > summary:hover .fold-title { color: var(--accent); }
.fold-title { font-size: 1.125rem; color: var(--muted); font-weight: 600; }
.fold-summary { font-size: 1.125rem; }
details.fold > .fold-body { padding: 0 1.75rem 1.5rem; }
.unwrapped > .panel-head h3, .unwrapped > h3, .unwrapped > .card-head > h2 { display: none; }
.unwrapped > .panel-head, .unwrapped > .card-head { justify-content: flex-end; }

/* Folds nested inside a card (billing, add-a-domain) are flat, not cards. */
details.inline-fold, .card > details.fold { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; margin-top: 1.25rem; }
details.inline-fold > summary, .card > details.fold > summary { padding: 1rem 0 .25rem; background: transparent; border-radius: 0; }
details.inline-fold > .fold-body, .card > details.fold > .fold-body { padding: .5rem 0 0; }
.card > details.fold + details.fold { margin-top: .5rem; }

.subnav { display: flex; gap: .4rem; margin: 1.25rem 0 0; }
.subnav .subtab { padding: .6rem 1rem; font-size: 1.125rem; }
.subnav .subtab.active { background: var(--panel); color: var(--text); }
.journey-panel > * + * { margin-top: 1.25rem; }
#site-journey > .journey-panel { margin-top: 1.25rem; }

.hbars { display: grid; gap: .55rem; }
.hbar { display: grid; grid-template-columns: minmax(90px, 32%) 1fr max-content; gap: .6rem; align-items: center; font-size: 1.125rem; }
.hbar .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .track { height: 12px; background: var(--panel-soft); border-radius: 6px; overflow: hidden; }
.hbar .fill { height: 100%; border-radius: 6px; background: var(--accent); }
.hbar .fill.c1 { background: var(--chart-8); } .hbar .fill.c2 { background: var(--chart-2); } .hbar .fill.c3 { background: var(--chart-3); }
.hbar .fill.c4 { background: var(--chart-4); } .hbar .fill.c5 { background: var(--chart-6); } .hbar .fill.c6 { background: var(--chart-5); }
.hbar .val { color: var(--muted); font-variant-numeric: tabular-nums; }
button.hbar { width: 100%; text-align: left; margin: 0; padding: .1rem 0; background: transparent; border: 0; color: var(--text); font: inherit; cursor: pointer; }
button.hbar:hover .lbl { color: var(--accent); }

.donut-wrap { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.donut { width: 150px; height: 150px; flex: none; }
.donut .ring { fill: none; stroke: var(--panel-soft); stroke-width: 22; }
.donut .seg { fill: none; stroke-width: 22; }
.donut .center { fill: var(--text); font-size: 20px; font-weight: 700; text-anchor: middle; }
.donut .center-sub { fill: var(--muted); font-size: 12px; text-anchor: middle; }
.legend { display: grid; gap: .35rem; font-size: 1.125rem; }
.legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .5rem; vertical-align: middle; }
.legend .val { color: var(--muted); margin-left: .35rem; font-variant-numeric: tabular-nums; }

.gauge-wrap { margin: 0; display: grid; justify-items: center; gap: .25rem; max-width: 220px; }
.gauge-wrap figcaption { font-size: 1.125rem; text-align: center; line-height: 1.3; }
.gauge { width: 100%; }
.gauge .arc-bg { fill: none; stroke: var(--panel-soft); stroke-width: 14; stroke-linecap: round; }
.gauge .arc { fill: none; stroke: var(--ok); stroke-width: 14; stroke-linecap: round; }
.gauge .num { fill: var(--text); font-size: 26px; font-weight: 700; text-anchor: middle; }

.coverage { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--panel-soft); margin-top: .6rem; }
.coverage span { display: block; height: 100%; }

/* ─── Recommendations ──────────────────────────────────────────────────────────────── */

.recs { display: grid; gap: .75rem; margin-top: .75rem; }
.rec { display: grid; grid-template-columns: 6px 1fr max-content; gap: 1rem; align-items: start; padding: .9rem 1rem .9rem 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); overflow: hidden; }
.rec .rail { align-self: stretch; background: var(--line); }
.rec.p1 .rail { background: var(--danger); }
.rec.p2 .rail { background: var(--warn); }
.rec.p3 .rail { background: var(--accent); }
.rec .title { font-weight: 600; }
.rec .body { color: var(--muted); font-size: 1.125rem; margin-top: .2rem; }
.rec .kind { font-size: 1.125rem; color: var(--muted); margin-bottom: .2rem; }
.rec .actions { align-self: center; display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.finding-evidence { margin-top: .45rem; padding-top: .45rem; border-top: 1px dashed var(--line); }

.eyebrow { color: var(--accent); font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.view-intro { max-width: 52rem; margin: -.4rem 0 .8rem; color: var(--text); }
.findings-workspace-shell { margin-top: .25rem; }
.findings-editorial-head { display: grid; grid-template-columns: minmax(20rem, 1fr) minmax(28rem, 1.15fr); gap: 3rem; align-items: end; padding: .5rem 0 2rem; }
.findings-editorial-head h2 { max-width: 36rem; margin: .35rem 0 .65rem; font-size: 2rem; line-height: 1.2; }
.findings-editorial-head p { max-width: 42rem; margin: 0; color: var(--muted); font-size: 1.05rem; }
.finding-brief-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.finding-chapters { border-top: 1px solid var(--line); }
.finding-chapter { display: grid; grid-template-columns: minmax(11rem, .3fr) minmax(0, 1fr); gap: 2.5rem; padding: 2.25rem 0; border-bottom: 1px solid var(--line); }
.finding-chapter-index { align-self: start; }
.finding-chapter-index h3 { margin: .4rem 0 .75rem; font-size: 1.15rem; line-height: 1.35; }
.finding-chapter.p1 .finding-chapter-index .eyebrow { color: var(--danger); }
.finding-chapter.p2 .finding-chapter-index .eyebrow { color: var(--warn); }
.finding-chapter-body { min-width: 0; }
.finding-lead { max-width: 58rem; margin: 0 0 1.25rem; font-size: 1.3rem; line-height: 1.5; }
.finding-observation { padding: 1rem 1.15rem; border-left: 3px solid var(--accent); background: var(--panel); }
.finding-observation p { margin: .35rem 0 0; }
.finding-meta { display: flex; flex-wrap: wrap; gap: .4rem .8rem; color: var(--muted); font-size: .95rem; text-transform: capitalize; }
.finding-comparison { margin-top: 1.25rem; padding: 1.25rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.finding-comparison .section-heading h2 { margin: 0; font-size: 1.1rem; }
.finding-comparison-layout { display: grid; grid-template-columns: minmax(26rem, 1.5fr) minmax(18rem, .5fr); gap: 2rem; align-items: start; margin-top: 1rem; }
.finding-comparison-chart { min-width: 0; padding: 1rem; background: var(--panel); }
.finding-validation-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.finding-response-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin-top: 1.5rem; }
.finding-response { padding-top: 1rem; border-top: 2px solid var(--line); }
.finding-response h3 { margin: 0 0 .6rem; color: var(--muted); font-size: .85rem; text-transform: uppercase; }
.finding-response p { margin: 0; }
.finding-statistical-proof .finding-evidence { margin: 0; padding: 0; border-top: 0; }
.finding-chapter-footer { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.finding-sources { min-width: 0; }
.finding-actions { flex: 0 0 auto; justify-content: flex-end; }

.lens-shell { display: grid; gap: 1.25rem; }

/* At-a-glance: the first fold on every site's report. */
.glance .stats { margin-top: .25rem; margin-bottom: 1.25rem; }
.glance .charts { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.glance .chart.wide { grid-column: auto; }
@media (max-width: 900px) { .glance .charts { grid-template-columns: 1fr; } }
.glance-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
.glance-tables table { font-size: 1rem; }
.glance-tables td, .glance-tables th { padding: .4rem .5rem; }
#analysis-summary > p { margin: 0 0 1rem; }
.primary-report-section, .lens-shell { margin-top: 1.25rem; }
.lens-shell > .report-accordion { margin-top: 0; }
.report-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: 1.25rem 1.5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.report-section-heading strong { font-size: 1.15rem; }
.analysis-lens-tabs {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel-soft);
}
button.analysis-lens {
  min-height: 3.5rem; margin: 0; padding: .65rem .8rem; border: 0; border-right: 1px solid var(--line);
  border-radius: 0; background: transparent; color: var(--muted); font-size: .95rem; font-weight: 600;
}
button.analysis-lens:last-child { border-right: 0; }
button.analysis-lens.active { background: var(--ink); color: var(--white); }
.lens-brief {
  padding: 2rem 0 1.5rem; border-top: 3px solid var(--accent); border-bottom: 1px solid var(--line);
}
.lens-brief > h2 { max-width: 56rem; margin: .35rem 0 1rem; font-size: 2rem; line-height: 1.25; }
.brief-lead { max-width: 64rem; margin-top: 2rem; }
.brief-lead h2 { max-width: 56rem; margin: .4rem 0 .9rem; font-size: 2.2rem; line-height: 1.2; }
.lens-empty h2 { margin: .35rem 0 .5rem; }
.method-strip { display: grid; grid-template-columns: minmax(12rem, .35fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.method-strip strong { display: block; margin-top: .2rem; font-size: 1.15rem; }
.charter-frame { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0 0 1.5rem; }
.charter-frame > div { padding: .9rem 1rem; border-left: 3px solid var(--accent); background: var(--panel); }
.charter-frame p { margin: .3rem 0 0; }
.executive-synthesis { max-width: 64rem; margin-top: 1.5rem; }
.executive-synthesis .lens-statement { padding-left: 1rem; border-left: 2px solid var(--accent); font-size: 1.08rem; }
.lens-evidence-panel { margin-top: 2rem; padding: 1.5rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lens-evidence-panel .section-heading h2 { margin: .2rem 0 0; font-size: 1.25rem; }
.lens-evidence-layout { display: grid; grid-template-columns: minmax(16rem, .8fr) minmax(22rem, 1.2fr); gap: 2rem; margin-top: 1rem; }
.lens-data-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 1px; background: var(--line); }
.lens-data-point { min-width: 0; padding: .85rem 1rem; background: var(--panel); }
.lens-data-point > span, .lens-data-point > small { display: block; color: var(--muted); }
.lens-data-point > span { font-size: .82rem; font-weight: 700; text-transform: uppercase; }
.lens-data-point > strong { display: block; margin: .25rem 0; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.lens-data-point > small { line-height: 1.35; }
.lens-inline-chart { min-width: 0; }
.lens-inline-chart h3 { margin: 0 0 .8rem; font-size: 1rem; }
.discipline-scorecard, .discipline-report, .discipline-decisions { margin-top: 2rem; }
.lens-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; margin-top: .8rem; }
.brief-takeaways { margin-top: 2.25rem; }
.brief-takeaways .lens-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.brief-takeaways .lens-metric { border-top-width: 4px; background: var(--panel); }
.lens-metric { min-width: 0; padding: 1rem; border-top: 3px solid var(--line); background: var(--panel); }
.lens-metric.positive { border-color: var(--ok); }
.lens-metric.negative { border-color: var(--danger); }
.lens-metric.mixed { border-color: var(--warn); }
.lens-metric-label { color: var(--muted); font-size: .82rem; font-weight: 700; text-transform: uppercase; }
.lens-metric > strong { display: block; margin: .35rem 0 .65rem; font-size: 1.35rem; }
.lens-metric .lens-statement { color: var(--muted); font-size: .92rem; }
.discipline-section { display: grid; grid-template-columns: minmax(12rem, .35fr) minmax(0, 1fr); gap: .75rem 2rem; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.discipline-section h3 { grid-row: 1 / span 4; margin: 0; font-size: 1.2rem; }
.discipline-section .lead { font-size: 1.08rem; }
.report-breakout { padding: 1.5rem 0; border-top: 1px solid var(--line); }
.report-breakout-head { margin-bottom: .9rem; }
.report-breakout-head h3 { max-width: 56rem; margin: .25rem 0 0; font-size: 1.25rem; }
.brief-story-section { display: grid; grid-template-columns: minmax(11rem, .28fr) minmax(0, 1fr); gap: 2.5rem; padding: 2.5rem 0; border-top: 1px solid var(--line); }
.brief-story-heading h3 { max-width: 18rem; margin: .35rem 0 0; font-size: 1.25rem; line-height: 1.35; }
.brief-story-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(16rem, .85fr); gap: 1.25rem 2rem; min-width: 0; }
.story-conclusion { grid-column: 1 / -1; max-width: 60rem; font-size: 1.12rem; }
.story-evidence { display: grid; align-content: start; gap: .75rem; padding: 1.15rem; background: var(--panel); }
.story-implication { align-self: start; padding: 1.15rem; border-left: 3px solid var(--accent); }
.story-implication .lens-statement { margin-top: .45rem; }
.validated-proof-strip { grid-column: 1 / -1; margin: 0; }
.story-layout-2 .brief-story-body { grid-template-columns: minmax(16rem, .8fr) minmax(0, 1.2fr); }
.story-layout-2 .story-evidence { grid-column: 1; grid-row: 1 / span 2; }
.story-layout-2 .story-conclusion, .story-layout-2 .story-implication { grid-column: 2; }
.story-layout-2 .validated-proof-strip { grid-column: 1 / -1; grid-row: 3; }
.story-layout-3 .story-evidence { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.story-layout-3 .story-evidence > .eyebrow { grid-column: 1 / -1; }
.inference-story .story-implication { border-left-color: var(--muted); }
.exploratory-comparison { border-color: var(--line-strong); }
.exploratory-caveat { padding: 1.15rem; border-left: 3px solid var(--muted); background: var(--panel); }
.exploratory-caveat strong { display: block; margin: .4rem 0; text-transform: capitalize; }
.exploratory-caveat p { margin: 0; }
.inference-evidence { display: grid; gap: .65rem; padding: 1rem; background: var(--panel); }
.brief-supporting-evidence { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.inference-sources { margin-top: .9rem; }
.inference-sources .citations { margin-top: .35rem; }
.section-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: .35rem 0; background: var(--line); }
.section-kpi { min-width: 0; padding: .75rem; background: var(--panel); }
.section-kpi span, .section-kpi small { display: block; color: var(--muted); }
.section-kpi span { font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.section-kpi strong { display: block; margin: .2rem 0; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.section-kpi small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.discipline-implication { padding-top: .75rem; border-top: 1px solid var(--line-strong); }
.discipline-implication { color: var(--text); }
.decision-row { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.decision-row > span { color: var(--accent); font-size: 1.15rem; font-weight: 700; }
.brief-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; margin-top: 1.5rem; }
.brief-column { padding-top: .8rem; border-top: 1px solid var(--line); }
.brief-column h3 { margin: 0 0 .6rem; font-size: 1rem; color: var(--muted); text-transform: uppercase; }
.lens-statement + .lens-statement { margin-top: .8rem; }
.lens-statement p { margin: 0; }
.brief-opportunity { margin-top: 1.5rem; padding: 1.25rem; border-left: 4px solid var(--ok); background: var(--ok-soft); }
.citations { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
button.citation { min-height: 0; margin: 0; padding: .2rem .5rem; background: transparent; border: 1px solid var(--line); color: var(--accent); font-size: .8rem; }
.citation-overflow { flex-basis: 100%; }
.citation-overflow > summary { width: fit-content; color: var(--muted); cursor: pointer; font-size: .8rem; }
.citation-overflow-list { margin-top: .35rem; }
.citation-cohort { margin-top: .1rem; }
.citation.citation-micro { opacity: .85; font-size: .78rem; }
/* Supporting pages state their own order per cited finding. */
.citation-group-caption { flex-basis: 100%; font-size: .78rem; margin-top: .35rem; }
.citation-group-caption:first-child { margin-top: 0; }
/* A bridge joins two observational systems on one segment: its finding pills are linked by ↔. */
.citation-connective { align-self: center; color: var(--muted); font-size: .9rem; }
.bridge-chain { margin-top: .35rem; font-size: .8rem; letter-spacing: .02em; }
.consolidated-metrics { padding-top: .75rem; }
.consolidated-metrics > #insights-controls { margin-bottom: 1.25rem; }
.metric-focus, .citation-focus { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--hover); }
.metric-back-row > td { padding: .75rem 0 .35rem; border-bottom: 0; }
.page-citation-back { margin-bottom: .75rem; }
button.back-to-brief { margin: 0; border-color: var(--accent); color: var(--accent); }
.metric-detail-row > td { padding: 0 0 .65rem; }
.metric-extraction { border-bottom: 1px solid var(--line); }
.metric-extraction > summary { min-height: 0; padding: .35rem .75rem; color: var(--accent); font-size: .85rem; cursor: pointer; }
.metric-extraction-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; padding: .5rem 0; background: var(--line); }
.metric-extraction-grid .lens-data-point { background: var(--panel); }
.report-accordion { margin-top: 1.25rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.report-accordion > summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.25rem 1.5rem; cursor: pointer; background: var(--surface); border-radius: 8px; list-style: none; }
.report-accordion > summary::-webkit-details-marker, .evidence-appendix > summary::-webkit-details-marker { display: none; }
.report-accordion > summary::before, .evidence-appendix > summary::before {
  content: '\25B8'; flex: none; width: 1rem; color: var(--accent); font-size: 1.125rem; line-height: 1;
  transition: transform .15s ease;
}
.report-accordion[open] > summary::before, .evidence-appendix[open] > summary::before { transform: rotate(90deg); }
.report-accordion > summary strong, .evidence-appendix > summary strong { margin-right: auto; }
.report-accordion[open] > summary { border-radius: 8px 8px 0 0; }
.report-accordion > summary strong { display: block; margin-top: .2rem; font-size: 1.15rem; }
.report-accordion-body { display: grid; gap: 1.5rem; padding: 0 1.5rem 1.5rem; }
.inference-accordion { border-color: var(--line-strong); }
.inference-accordion > summary strong, .inference-accordion .eyebrow { color: var(--muted); }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.section-heading h2 { margin: 0; }
.raw-report-heading { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.raw-report-heading h2 { margin: .25rem 0; }
.evidence-appendix { margin-top: 2rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.evidence-appendix > summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.25rem 1.5rem; cursor: pointer; background: var(--surface); border-radius: 8px; list-style: none; }
.evidence-appendix[open] > summary { border-radius: 8px 8px 0 0; }
.evidence-appendix > summary strong { display: block; margin-top: .2rem; font-size: 1.15rem; }
.evidence-appendix-body { padding: 0 1.5rem 1.5rem; }
#report-workspace > * + * { margin-top: 1.25rem; }
.report-block { position: relative; }
.report-block.dragging { opacity: .45; }
.report-block-controls {
  display: flex; align-items: center; gap: .5rem; min-height: 2rem; margin-bottom: .35rem;
  color: var(--muted); font-size: .875rem;
}
.drag-handle { cursor: grab; color: var(--muted); font-size: 1.2rem; line-height: 1; }
.report-block-name { margin-right: auto; }
.report-move { display: flex; gap: .25rem; }
.report-move button { width: 2rem; min-height: 2rem; padding: 0; font-size: 1rem; }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; margin-top: .75rem; }
.plan { border: 1px solid var(--line); border-radius: 8px; padding: .9rem; }
.plan h4 { margin: 0 0 .25rem; font-size: 1.125rem; }
.plan .price { color: var(--muted); font-size: 1.125rem; }
.plan button { width: 100%; }

/* ─── Insights ─────────────────────────────────────────────────────────────── */

select {
  width: 100%; padding: .6rem .7rem; background: var(--panel-soft);
  border: 1px solid var(--line); border-radius: 7px; color: var(--text); font: inherit;
}
select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.toolbar > div { min-width: 150px; }
.toolbar > .grow { flex: 1 1 320px; }
.toolbar label { margin-top: 0; }
.toolbar-actions { display: flex; gap: .5rem; align-items: flex-end; padding-bottom: .1rem; }
.toolbar-actions button { margin-top: 0; }
.toolbar input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.125rem; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.chips:empty { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: 1.125rem; padding: .35rem .7rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text); background: var(--panel-soft);
  margin: 0; font-weight: 500; cursor: default;
}
button.chip { cursor: pointer; }
button.chip:hover { background: var(--purple-dark); border-color: var(--purple-dark); color: var(--white); }
button.chip:hover .x, button.chip:hover .dim { color: var(--white); }
.chip.active { border-color: var(--accent); color: var(--accent); }
.chip .x { color: var(--muted); }
.chip .count { color: var(--muted); font-weight: 400; }
button.chip:hover .count { color: var(--white); }
.chip.dim { color: var(--muted); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .9rem; margin-top: 1.25rem; }
.stat { border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.1rem; background: var(--panel); }
.stat .label { font-size: 1.125rem; color: var(--muted); }
.stat .value { font-size: 1.7rem; font-weight: 650; line-height: 1.15; margin-top: .2rem; }
.stat .sub { font-size: 1.125rem; color: var(--muted); margin-top: .15rem; }

.subtabs { display: flex; flex-wrap: wrap; gap: .3rem; margin: .75rem 0 .5rem; }
button.subtab { margin-top: 0; padding: .5rem .75rem; font-size: 1.125rem; background: transparent; color: var(--muted); border: 1px solid var(--line); font-weight: 500; }
button.subtab.active { color: var(--text); border-color: var(--accent); }
button.subtab .count { color: var(--muted); font-weight: 400; margin-left: .3rem; }

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.wrap { max-width: 28rem; }
.cell-sub { display: block; color: var(--muted); font-size: 1.125rem; margin-top: .1rem; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--hover); }

.bar-track { height: 4px; background: var(--panel-soft); border-radius: 2px; overflow: hidden; margin-top: .35rem; }
.bar-fill { height: 100%; background: var(--accent); }

.two-up { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.25rem; align-items: start; }
.card .two-up > .card { margin-top: 0; }

.star { color: var(--warn); }
.role-outcome { color: var(--ok); }
.role-intent { color: var(--accent); }
.role-engagement { color: var(--muted); }
.role-none { color: var(--muted); }

.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.panel-head h3 { margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.actions button { margin-top: 0; }
.confidence { font-variant-numeric: tabular-nums; }

th.check, td.check { width: 2rem; padding-right: .25rem; }
input[type="checkbox"] { width: 16px; height: 16px; margin: .15rem 0 0; accent-color: var(--accent); cursor: pointer; }
.bulk-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .6rem .8rem; margin: .6rem 0 .75rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft);
}
.bulk-bar > .muted { font-size: 1.125rem; }

@media (max-width: 700px) {
  .google-reconnect-notice, .enhanced-callout { align-items: flex-start; flex-direction: column; }
  body { padding: 1rem .75rem 2rem; }
  .card { padding: 1.25rem; }
  .bar, .tabs, .subnav { align-items: stretch; }
  .tabs, .subnav { width: 100%; flex-wrap: wrap; }
  .brand-view-header { grid-template-columns: 1fr max-content; }
  .brand-view-title { grid-column: 1 / -1; grid-row: 1; }
  .brand-back { grid-column: 1; grid-row: 2; justify-self: start; }
  .brand-view-header .subnav { grid-column: 2; grid-row: 2; width: auto; justify-content: flex-end; }
  .status-row { grid-template-columns: 1rem 1fr; }
  .status-copy { align-items: flex-start; flex-direction: column; gap: 0; }
  .status-actions { grid-column: 2; justify-content: flex-start; }
  .row { align-items: stretch; flex-direction: column; }
  .row button { width: 100%; }
  table { display: block; overflow-x: auto; }
  dl { grid-template-columns: 1fr; }
  .two-up { grid-template-columns: 1fr; }
  .analysis-lens-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  button.analysis-lens { border-bottom: 1px solid var(--line); }
  .brief-grid, .method-strip, .charter-frame, .discipline-section, .lens-evidence-layout, .inference-columns, .findings-editorial-head, .finding-chapter, .finding-response-grid, .brief-story-section, .brief-story-body, .story-layout-2 .brief-story-body { grid-template-columns: 1fr; }
  .finding-brief-kpis { grid-template-columns: 1fr; }
  .brief-takeaways .lens-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .discipline-section h3 { grid-row: auto; }
  .section-kpis { grid-template-columns: 1fr; }
  .story-layout-2 .story-evidence, .story-layout-2 .story-conclusion, .story-layout-2 .story-implication, .story-layout-2 .validated-proof-strip, .story-layout-3 .story-evidence, .story-layout-3 .story-evidence > .eyebrow { grid-column: auto; grid-row: auto; }
  .story-layout-3 .story-evidence { grid-template-columns: 1fr; }
  .metric-extraction-grid { grid-template-columns: 1fr; }
  .evidence-appendix > summary { align-items: flex-start; flex-direction: column; gap: .35rem; }
  .lens-brief > h2 { font-size: 1.6rem; }
  .finding-comparison-layout { grid-template-columns: 1fr; }
  .finding-chapter-footer { align-items: start; flex-direction: column; }
  .finding-actions { justify-content: flex-start; }
}

@media (max-width: 620px) {
  .brief-takeaways .lens-metrics { grid-template-columns: 1fr; }
  .brief-lead h2 { font-size: 1.7rem; }
}

@media print {
  @page { margin: 14mm; }
  body { padding: 0; background: #fff; color: #111; font-size: 10pt; }
  #app, #pdf-dialog { display: none !important; }
  #pdf-export { display: block !important; }
  .pdf-report-header { padding-bottom: 8mm; border-bottom: 2px solid #111; }
  .pdf-report-header h1 { margin: 1mm 0; font-size: 22pt; }
  .pdf-report-header p { margin: 0; color: #555; }
  .pdf-brief { break-after: page; }
  .pdf-brief:last-child { break-after: auto; }
  .pdf-brief .lens-brief + .lens-brief { break-before: page; }
  .pdf-consolidated-data { break-before: page; color: #111; }
  .pdf-source-header { padding-bottom: 6mm; border-bottom: 2px solid #111; }
  .pdf-source-header h1 { margin: 1mm 0; font-size: 20pt; }
  .pdf-source-header p { margin: 0; color: #555; }
  .pdf-data-section { margin-top: 8mm; }
  .pdf-data-section h2 { margin-bottom: 3mm; color: #111; font-size: 13pt; break-after: avoid; }
  .pdf-data-table { display: table; width: 100%; font-size: 7.5pt; line-height: 1.25; }
  .pdf-data-table thead { display: table-header-group; }
  .pdf-data-table tr { break-inside: avoid; }
  .pdf-data-table th, .pdf-data-table td { padding: 1.5mm 1.5mm 1.5mm 0; border-color: #bbb; color: #111; }
  .pdf-brief .lens-brief { padding: 0; background: #fff; color: #111; border: 0; }
  .pdf-brief .lens-brief * { color: inherit; }
  .pdf-brief .lens-brief .muted, .pdf-brief .lens-data-point > span, .pdf-brief .lens-data-point > small,
  .pdf-brief .section-kpi span, .pdf-brief .section-kpi small { color: #555; }
  .pdf-brief .lens-data-points, .pdf-brief .section-kpis, .pdf-brief .finding-brief-kpis, .pdf-brief .finding-validation-summary { background: #bbb; }
  .pdf-brief .lens-data-point, .pdf-brief .section-kpi, .pdf-brief .lens-metric, .pdf-brief .finding-observation, .pdf-brief .finding-comparison-chart { background: #fff; }
  .pdf-brief button.citation { color: #333; border-color: #aaa; }
  .pdf-brief .discipline-section, .pdf-brief .decision-row, .pdf-brief .brief-column, .pdf-brief .finding-chapters, .pdf-brief .finding-chapter, .pdf-brief .finding-response, .pdf-brief .finding-chapter-footer { border-color: #bbb; }
  .pdf-brief .finding-actions { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Pills never break across lines; long values truncate inside the pill instead. */
.badge, .chip, button.citation, .eyebrow, .ask-role, .status-summary, .lens-metric-label, .lens-data-point > span, .section-kpi span {
  white-space: nowrap;
}
.badge, .chip, button.citation { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chip, button.citation { display: inline-flex; align-items: center; }
.stat .value, .lens-metric > strong, .lens-data-point > strong, .section-kpi strong { overflow-wrap: anywhere; }

/* ─── Settings: cards in parallel ─────────────────────────────────────────────────── */
.settings-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.settings-head h2 { margin: .25rem 0 0; }
.settings-head p { margin: 0; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; align-items: start; }
.settings-card h3 { margin: 0 0 .5rem; }
.settings-card label:first-of-type { margin-top: .5rem; }
.settings-card input[readonly] { color: var(--muted); background: var(--panel-soft); }
.settings-card button { margin-top: 1rem; }
.settings-danger { border-color: var(--danger); background: var(--danger-soft); }
.settings-danger h3 { color: var(--danger); }
.settings-danger p { margin: 0 0 .75rem; }
.settings-danger input { background: var(--panel); }
#signup-slug-preview { font-size: 1rem; overflow-wrap: anywhere; }
.auth-actions .link { margin: 0; }

/* A fold that needs the customer's attention: exclamation badge centred on the top border. */
.report-accordion.needs-attention { position: relative; margin-top: 1.75rem; border-style: dashed; border-color: var(--accent-strong); overflow: visible; }
.attention-mark {
  position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%);
  width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-strong); color: var(--white); font-weight: 800; font-size: 1rem; line-height: 1;
  box-shadow: 0 0 0 4px var(--white);
}