/* Marlow design system — tokens and mw- components.
   Source of truth: the "Marlow" design system artifact (https://claude.ai/artifact/G8xMuyuJ8TZefNospQGe1Y).
   Built on the app's own colour variables in styles.css (--bg, --panel, --text, --muted, --blue, --brand, --accent…);
   this file only ADDS the tokens the components need. Pilot page: Pain-language-fit (2026-10-09, localhost). */
:root {
  --brand-text: #a78bfa; --brand-soft: rgba(124,58,237,.18); --link: #22d3ee;
  --good-text: #86efac; --good-soft: rgba(34,197,94,.12);
  --warn-text: #fcd34d; --warn-soft: rgba(245,158,11,.12);
  --bad-text: #fca5a5;  --bad-soft: rgba(239,68,68,.12);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 28px; --space-7: 40px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 16px; --radius-full: 999px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --shadow-overlay: 0 18px 60px rgba(0,0,0,.55);
}
body.light-mode {
  --brand-text: #6d28d9; --link: #0e7490;
  --good-text: #15803d; --warn-text: #b45309; --bad-text: #b91c1c;
  --shadow-overlay: 0 18px 60px rgba(17,24,39,.18);
}
.mw-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ── Button ─────────────────────────────────────────────── */
.mw-btn { display: inline-flex; align-items: center; gap: var(--space-2); height: 38px; padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid transparent; font: 600 14px/20px var(--font-sans); cursor: pointer; white-space: nowrap; }
.mw-btn svg { width: 16px; height: 16px; }
.mw-btn--primary { background: var(--blue); color: #ffffff; }
.mw-btn--primary:hover { filter: brightness(1.1); }
.mw-btn--secondary { background: var(--panel-2); color: var(--text); border-color: var(--border-2); }
.mw-btn--secondary:hover { border-color: var(--muted-2); }
.mw-btn--quiet { background: transparent; color: var(--muted); padding: 0 var(--space-2); }
.mw-btn--quiet:hover { background: var(--panel-2); color: var(--text); }
.mw-btn--sm { height: 30px; padding: 0 var(--space-3); font-size: 12.5px; }
.mw-btn:focus-visible, .mw-tab:focus-visible, .mw-input:focus-visible, .mw-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.mw-btn[disabled] { opacity: .5; cursor: default; }

/* ── Tabs ───────────────────────────────────────────────── */
.mw-tabs { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--border); overflow-x: auto; }
.mw-tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: var(--space-3) 0; font: 500 14px/20px var(--font-sans); color: var(--muted); cursor: pointer; white-space: nowrap; }
.mw-tab:hover { color: var(--text); }
.mw-tab[aria-selected="true"] { color: var(--brand-text); border-bottom-color: var(--brand); font-weight: 600; }

/* ── Card ───────────────────────────────────────────────── */
.mw-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.mw-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.mw-card__title { margin: 0; font: 700 17px/24px var(--font-sans); color: var(--text); text-wrap: balance; }
.mw-card__note { margin: var(--space-1) 0 0; font-size: 12.5px; line-height: 18px; color: var(--muted); max-width: 72ch; }
.mw-card__foot { display: flex; align-items: center; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }
@media (max-width: 600px) { .mw-card { padding: var(--space-4); } }

/* ── Badge ──────────────────────────────────────────────── */
.mw-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-sm); font: 600 11.5px/16px var(--font-sans); background: var(--panel-2); color: var(--muted); white-space: nowrap; }
.mw-badge--good { background: var(--good-soft); color: var(--good-text); }
.mw-badge--bad { background: var(--bad-soft); color: var(--bad-text); }
.mw-badge--warn { background: var(--warn-soft); color: var(--warn-text); }
.mw-badge--brand { background: var(--brand-soft); color: var(--brand-text); }

/* ── Stat ───────────────────────────────────────────────── */
.mw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-5); }
.mw-stat { display: flex; flex-direction: column; gap: 2px; }
.mw-stat__value { font: 700 24px/30px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--text); }
.mw-stat__label { font: 600 11.5px/16px var(--font-sans); color: var(--muted); }
.mw-stat__delta { font-size: 12.5px; line-height: 18px; color: var(--muted); }
.mw-stat__delta--up { color: var(--good-text); }
.mw-stat__delta--down { color: var(--bad-text); }

/* ── Table ──────────────────────────────────────────────── */
.mw-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); }
.mw-table { width: 100%; border-collapse: collapse; font-size: 12.5px; line-height: 18px; }
.mw-table th { text-align: left; font: 600 11.5px/16px var(--font-sans); color: var(--muted); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); white-space: nowrap; }
.mw-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); color: var(--text); }
.mw-table tr:last-child td { border-bottom: 0; }
.mw-table td:first-child { font-weight: 600; }
.mw-table .mw-n { text-align: right; font-variant-numeric: tabular-nums; }
.mw-table tr.is-own td:first-child { color: var(--brand-text); }
.mw-table tbody tr:hover td { background: var(--panel-2); }
.mw-heat { display: inline-block; min-width: 52px; padding: 2px var(--space-2); border-radius: var(--radius-sm); text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }

/* ── Quote ──────────────────────────────────────────────── */
.mw-quotes { display: flex; flex-direction: column; }
.mw-quote { margin: 0; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.mw-quote:last-child { border-bottom: 0; }
.mw-quote__text { margin: 0; font-size: 14px; line-height: 21px; color: var(--text); max-width: 72ch; }
.mw-quote__source { display: flex; gap: var(--space-2); margin-top: var(--space-1); font-size: 11.5px; line-height: 16px; color: var(--muted); }
.mw-link { color: var(--link); text-decoration: none; }
.mw-link:hover { text-decoration: underline; }

/* ── Field ──────────────────────────────────────────────── */
.mw-field { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.mw-field__label { font: 600 11.5px/16px var(--font-sans); color: var(--muted); }
.mw-input { height: 40px; padding: 0 var(--space-3); border: 1px solid var(--border-2); border-radius: var(--radius-md); background: var(--panel-2); color: var(--text); font: 400 14px/20px var(--font-sans); }
.mw-input::placeholder { color: var(--muted-2); }
.mw-input:focus { outline: none; border-color: var(--brand); }
.mw-field__help { font-size: 11.5px; line-height: 16px; color: var(--muted); }
.mw-field--error .mw-input { border-color: var(--bad); }
.mw-field--error .mw-field__help { color: var(--bad-text); }

/* ── Empty state ────────────────────────────────────────── */
.mw-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-6) var(--space-5); border: 1px dashed var(--border-2); border-radius: var(--radius-lg); background: var(--panel); }
.mw-empty__title { margin: 0; font: 700 17px/24px var(--font-sans); color: var(--text); }
.mw-empty__text { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--muted); max-width: 60ch; }
.mw-empty .mw-btn { margin-top: var(--space-2); }

/* ── Dialog ─────────────────────────────────────────────── */
.mw-dialog { background: var(--panel); border: 1px solid var(--border-2); border-radius: var(--radius-xl); box-shadow: var(--shadow-overlay); width: min(560px, 100%); display: flex; flex-direction: column; }
.mw-dialog__head { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-3); border-bottom: 1px solid var(--border); }
.mw-dialog__body { padding: var(--space-4) var(--space-5) var(--space-5); }

/* ── Segmented filter (a row of mw-btn--sm with aria-pressed) ── */
.mw-seg { display: inline-flex; gap: var(--space-1); padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel); }
.mw-seg .mw-btn { height: 28px; border: 0; background: transparent; color: var(--muted); font-weight: 600; }
.mw-seg .mw-btn[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-text); }
.mw-seg .mw-btn:hover { color: var(--text); }
.mw-label { font: 600 11.5px/16px var(--font-sans); color: var(--muted); margin: 0 0 var(--space-2); }
.mw-well { background: var(--panel-2); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }

/* Pain-language-fit pilot: a pain card's head row and its three surface verdicts */
.lf-ds-row { display: flex; gap: var(--space-5); align-items: flex-start; flex-wrap: wrap; }
.lf-ds-cells { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: var(--space-3); flex: 1; min-width: 380px; }
.lf-ds-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); }
@media (max-width: 720px) { .lf-ds-cells { min-width: 0; grid-template-columns: 1fr; } }

/* ═══ APP-WIDE LAYER (2026-10-09, localhost) — the design system applied to every screen ═══
   Generated from styles.css where marked; edit the rules there over time and delete overrides here. */

/* Readable text in light mode: the app's cyan and light purple were 1.8:1 and 2.7:1 on white.
   Same hues, darker shade — only in light mode. */
body.light-mode { --accent: #0e7490; --brand-2: #6d28d9; }

/* Rule 5 — plain labels: no uppercase anywhere (generated: every uppercase rule in styles.css) */
.adm-h4,
.adm-tbl th,
.aga-segs > p,
.aga-whose p,
.ai-tag,
.aiv-eng,
.aiv-you,
.as-div span,
.assist-ctx,
.await-pill,
.bks-tab,
.bm-dd-label,
.cl-col-h,
.cl-compare-l,
.cl-h-tag,
.cl-hist th,
.cl-rc-w,
.cl-row-z,
.cl-shot-k,
.cl-tab,
.cmp-badge,
.cmp-thumb-text-badge,
.coming,
.da-soon,
.ddb-label,
.donut-center .lbl,
.gap-donut-sub,
.gap-matrix-group td,
.gap-tab,
.gap-you,
.lf-surf,
.ma-attr span,
.ma-f-l,
.ma-p-k,
.ma-tab,
.matrix .col-head,
.matrix .row-head,
.nav-new,
.pa-attr-h,
.pa-ev-tag,
.pc-next-head,
.pc-pill,
.pc-step-badge,
.pd-label,
.sidebar-project-label,
.so-sub,
.so-tbl th,
.soc-chan-h,
.step-item,
.venn-col-h,
th { text-transform: none; letter-spacing: normal; }
[style*="text-transform:uppercase"], [style*="text-transform: uppercase"] { text-transform: none !important; letter-spacing: normal !important; }

/* Six sizes: nothing under 11.5px for words (generated: every rule below 11px in styles.css) */
.aga-end,
.agap-me,
.agap-unsure,
.agx-ref,
.aiv-cell small,
.aiv-eng small,
.aiv-you,
.as-div span,
.as-scope,
.as-web,
.as-web-info,
.assist-ctx,
.await-pill,
.bks-stack span,
.bm-dd-label,
.cl-compare-l,
.cl-h-tag,
.cl-rc-w,
.cl-row-z,
.cl-shot-k,
.cmp-badge,
.cmp-thumb-text-badge,
.coming,
.ddb-label,
.donut-center .lbl,
.exp-stage-lbl,
.gap-donut-sub,
.gap-hist-items,
.gap-matrix-group td,
.gap-pos,
.gap-you,
.kwc-label,
.lf-surf,
.lfp-group,
.ma-attr span,
.ma-f-count,
.ma-match,
.ma-p-k,
.ma-req,
.mkt-en,
.nav-new,
.pa-attr-h,
.pa-ev-src,
.pa-ev-tag,
.pa-evbox-h span,
.pa-meta,
.pain-lbl,
.pc-demo-btn,
.pc-demo-tag,
.pc-pill,
.pc-step-badge,
.poe-hist-counts,
.poe-hist-val,
.serp-chip,
.sidebar-brand-sub,
.sidebar-project-label,
.sm-hist-lbl,
.soc-badge,
.soc-chan-h,
.soc-chan-h span,
.soc-chan-vol,
.sup-shot button,
.topic-src,
.venn-col-h { font-size: 11.5px; }
[style*="font-size:8.5px"], [style*="font-size: 8.5px"],
[style*="font-size:9px"], [style*="font-size: 9px"],
[style*="font-size:9.5px"], [style*="font-size: 9.5px"],
[style*="font-size:10px"], [style*="font-size: 10px"],
[style*="font-size:10.5px"], [style*="font-size: 10.5px"],
[style*="font-size:11px"], [style*="font-size: 11px"] { font-size: 11.5px !important; }

/* Tabs: sentence case, an underline for the selected one — not filled uppercase pills (all module tab rows) */
.ma-tabs { gap: var(--space-5); margin: 2px 0 var(--space-5); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ma-tab, .bks-tab, .gap-tab, .cl-tab, .step-item {
  font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: normal;
  padding: 10px 2px; border-radius: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ma-tab:hover, .bks-tab:hover, .gap-tab:hover, .cl-tab:hover, .step-item:hover { background: none; color: var(--text); }
.ma-tab.on, .bks-tab.on, .gap-tab.active, .cl-tab.on, .step-item.active { background: none; color: var(--brand-text); border-bottom-color: var(--brand); font-weight: 600; }
.steps-bar { gap: var(--space-5); }
.tab.active { color: var(--brand-text); border-bottom-color: var(--brand); }

/* Sidebar: the selected item is purple-soft (selected), not a blue block (blue = primary action only) */
.nav-item.active, body.light-mode .nav-item.active { background: var(--brand-soft); color: var(--brand-text); }
.nav-item.active svg { color: var(--brand-text); }
.nav-new { font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: normal; border: 0; border-radius: var(--radius-sm); padding: 1px 6px; background: var(--brand-soft); color: var(--brand-text); }
.nav-item.active .nav-new { background: var(--panel); color: var(--brand-text); border: 0; }
.nav-assist, .nav-assist:hover { background: var(--panel-2); border: 1px solid var(--border-2); }
.nav-assist.assist-active { background: var(--brand-soft); border-color: var(--brand); box-shadow: none; }

/* Badges and chips: small rounded rectangles, not pills; tags you can remove stay pills */
.chip { border-radius: var(--radius-sm); font-size: 11.5px; padding: 2px 8px; }

/* No decorative gradients: flat fills from the palette (logo, loaders, platform placeholders and fades excluded) */
.sidebar-project-logo { background: var(--brand); }
.user-avatar { background: var(--blue); color: #fff; }
.bar-fill { background: var(--brand); }
.pain .meter i { background: var(--bad); }
.ai-card .ai-badge, .ai-tag { background: var(--brand); }
.kwc-bar { background: var(--blue); }
.kwc-col:hover .kwc-bar, .kwc-col.sel .kwc-bar { background: var(--brand); box-shadow: none; }
.assist-logo, .assist-send, .assist-fab { background: var(--brand); }
.cmp-thumb-text { background: var(--panel-2); }
.onb-reminder { background-color: var(--panel); background-image: linear-gradient(var(--brand-soft), var(--brand-soft)); }   /* a solid tint: it is sticky, content scrolls under it */
.ma-merge-btn { background: var(--blue); }
.lf-mcp, .lf-mcp.is-on { background: var(--panel); }
.lf-load-fill { background: var(--brand); }

/* No coloured stripes on the edge of cards (generated list of border-left stripes in styles.css + inline ones) */
.bm-item, .aga-card, .aga-pick, .aga-seg.ok, .aga-seg.bad { border-left: 1px solid var(--border); }
.aiv-quote { border-left-color: var(--border-2); }
[style*="border-left:3px solid"], [style*="border-left: 3px solid"], [style*="border-left:4px solid"], [style*="border-left: 4px solid"] {
  border-left: 1px solid var(--border) !important;
}

/* Cards stay flat; only things that float get a shadow */
.project-card.is-active { box-shadow: none; border-color: var(--brand); }
.aiv-cell:hover { transform: none; }

/* Section headings and notices in the system's sizes */
.section-h { font-size: 17px; font-weight: 700; }
.notice { font-size: 12.5px; }
.notice.ok { background: var(--good-soft); color: var(--good-text); }
.notice.err { background: var(--bad-soft); color: var(--bad-text); }
.notice.warn { background: var(--warn-soft); color: var(--warn-text); }
.notice:not(.ok):not(.err):not(.warn) { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }

/* Tab rows that are not .ma-tabs: same spacing and underline row (Audience Gap, Keyword Explorer) */
.gap-tabs, .bks-tabs { gap: var(--space-5); border-bottom: 1px solid var(--border); margin-bottom: var(--space-5); }
/* Audience Gap: its tabs and cards sat flush against the sidebar, 40px left of the title */
#gap-out { padding: 0 var(--space-7) 60px; }
/* light mode had its own filled-box rule for the selected tab (styles.css): same underline as dark */
body.light-mode .ma-tab.on, body.light-mode .bks-tab.on, body.light-mode .gap-tab.active, body.light-mode .cl-tab.on, body.light-mode .step-item.active { background: none; color: var(--brand-text); border-bottom-color: var(--brand); }
body.light-mode .ma-tab:hover, body.light-mode .bks-tab:hover, body.light-mode .gap-tab:hover, body.light-mode .cl-tab:hover, body.light-mode .step-item:hover { background: none; }
/* the same page margin under every module title (these four sat flush against the sidebar) */
#cl-out, #aiv-out, #ma-out, #admin-out { padding: 0 var(--space-7) 60px; }
/* the selected sidebar item's tag: light mode forced white text onto it (styles.css) */
body.light-mode .nav-item.active .nav-new { background: var(--panel); color: var(--brand-text); }
/* segmented choices look the same everywhere: soft purple for the selected one (Competitor Language "Compare") */
.cl-chip.on, body.light-mode .cl-chip.on { background: var(--brand-soft); color: var(--brand-text); border-color: transparent; }
/* tags: readable in both themes, sentence-case look */
.pc-demo-tag { background: var(--brand-soft); color: var(--brand-text); border: 0; font-weight: 600; letter-spacing: normal; border-radius: var(--radius-sm); }
.cvs-tag { text-transform: none; letter-spacing: normal; font-weight: 600; border-radius: var(--radius-sm); }
/* the banner's emoji is decoration */
.onb-reminder-brain { display: none; }

/* line icons (ico() in app.js): sit on the text line, take its colour */
.ico { display: inline-block; vertical-align: -3px; flex-shrink: 0; }
.oc-emoji .ico, .cc-ic .ico, .ddb-ico .ico, .lf-mcp-ic .ico, .ma-ag-ic .ico { color: var(--brand-text); vertical-align: middle; }
.bks-info .ico { color: var(--brand-text); margin-right: 2px; }

/* "How it's measured": the folded part of a long explanation */
.ds-how { display: inline; }
.ds-how > summary { display: inline; cursor: pointer; color: var(--link); font-weight: 500; list-style: none; }
.ds-how > summary::-webkit-details-marker { display: none; }
.ds-how[open] > summary { display: block; margin-bottom: 4px; }
.ds-how > div { color: var(--muted); }

/* Brand Mentions (density pass, 2026-10-10): a still feed, quiet rows, bars instead of pies */
.bm-ds-feed { display: flex; flex-direction: column; }
.bm-ds-item { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; }
.bm-ds-item:last-child { border-bottom: 0; }
.bm-ds-item:hover .bm-ds-title { color: var(--link); }
.bm-ds-item .bm-thumb { width: 28px; height: 28px; border-radius: var(--radius-sm); flex-shrink: 0; object-fit: cover; }
.bm-ds-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.bm-ds-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.bm-ds-title { font-size: 14px; font-weight: 600; line-height: 20px; color: var(--text); }
.bm-ds-meta { font-size: 11.5px; color: var(--muted); }
.bm-ds-snippet { font-size: 12.5px; line-height: 18px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bm-bars { display: flex; flex-direction: column; gap: 6px; }
.bm-bar { display: grid; grid-template-columns: minmax(0, 1fr) 90px 44px; align-items: center; gap: var(--space-2); background: none; border: 0; padding: 4px 6px; margin: 0 -6px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text); font: 500 12.5px/18px var(--font-sans); text-align: left; }
.bm-bar:hover { background: var(--panel-2); }
.bm-bar-n { display: inline-flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bm-bar-n .ico { color: var(--muted); }
.bm-bar-t { height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.bm-bar-t i { display: block; height: 100%; background: var(--brand); border-radius: 3px; }
.bm-bar b { text-align: right; font-variant-numeric: tabular-nums; }
.bm-stack { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; margin-bottom: var(--space-3); }
.bm-stack i { display: block; cursor: pointer; }

/* Archetype Gap (density, minimal): citation numbers quiet and grey, still clickable */
.agx-ref { background: none; color: var(--muted); font-size: 11px; font-weight: 500; padding: 0 2px; margin-left: 1px; vertical-align: super; line-height: 1; }
.agx-ref:hover { color: var(--link); text-decoration: underline; }