/* KeywordIntent — dense analyst layout.
   Filters live in a permanent rail; the table gets the width.
   Readable in BOTH themes. No ad slots, no content wall. */

/* Palette: KISS Internet Marketing site colours — navy + white + orange accent.
   Shared design system with Traffic Thief / NicheBlasta (Stephanie's spec, 2026-08-05).
   Variable names kept; only values re-mapped. */
:root {
  --bg: #F4F6F9;
  --surface: #FFFFFF;
  --surface-2: #F8FAFC;
  --border: #E5E8EE;
  --text: #0E1A2F;
  --text-dim: #4B5872;
  --accent: #DC5F17;
  --accent-soft: #FDF1E8;
  --accent-text: #DC5F17;
  --accent-fg: #FFFFFF;
  --jump-bg: #FDF1E8;
  --warm: #B45309;
  --good: #0E7C5A;
  --good-soft: #E7F5EF;
  --good-line: #BFE3D5;
  --bad: #B42318;
  --bad-soft: #FDECEA;
  --bad-line: #F3C6C1;
  --shadow: 0 1px 2px rgba(14, 26, 47, .05), 0 8px 24px -16px rgba(14, 26, 47, .18);
  --radius: 10px;
}

:root[data-theme="dark"] {
  --bg: #0A111E;
  --surface: #111B2C;
  --surface-2: #162236;
  --border: #233149;
  --text: #E9EEF8;
  --text-dim: #A5B2CA;
  --accent: #F2753A;
  --accent-soft: rgba(242, 117, 58, .14);
  --accent-text: #F2753A;
  --accent-fg: #121A26;
  --jump-bg: rgba(242, 117, 58, .14);
  --warm: #E0A63C;
  --good: #3DD39A;
  --good-soft: rgba(61, 211, 154, .13);
  --good-line: rgba(61, 211, 154, .3);
  --bad: #F27A6E;
  --bad-soft: rgba(242, 122, 110, .13);
  --bad-line: rgba(242, 122, 110, .3);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* The `hidden` attribute must beat any class that sets a display value.
   The browser's own rule is only `[hidden] { display: none }`, which loses to a
   class like `.selbar { display: flex }` — so several controls the JavaScript
   had correctly marked hidden were still on screen, most visibly the selection
   bar sitting there reading "0 selected". One rule fixes every case, and stops
   the next `display:`-setting class quietly reintroducing it. */
[hidden] { display: none !important; }

code, .s-item b, .splitstrip .n, .mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.muted { color: var(--text-dim); }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand-mark {
  width: 20px; height: 20px; border-radius: 6px;
  background: linear-gradient(135deg, #0E1A2F, #152340);
  box-shadow: inset 0 0 0 3px var(--surface);
}
.brand-name { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.brand-wrap { display: flex; align-items: center; gap: 10px; }
.free-pill { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--good); background: var(--good-soft); border: 1px solid var(--good-line); padding: 4px 8px; border-radius: 999px; }

/* ---------- buttons ---------- */
.primary-btn {
  background: var(--accent); color: var(--accent-fg); border: 0;
  padding: 0 22px; height: 46px; border-radius: var(--radius);
  font-size: 15px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px; transition: filter .15s;
}
.primary-btn:hover:not(:disabled) { filter: brightness(1.08); }
.primary-btn:disabled { opacity: .65; cursor: progress; }

.ghost-btn {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
}
.ghost-btn:hover { background: var(--surface-2); border-color: var(--accent); }
.theme-icon {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--text); box-shadow: inset -4px -3px 0 0 var(--surface);
}
.spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- hero ---------- */
main { max-width: 1560px; margin: 0 auto; padding: 0 22px 56px; }
.hero { padding: 64px 0 28px; max-width: 1000px; }
.hero h1 { font-size: clamp(34px, 5.2vw, 52px); font-weight: 800; line-height: 1.05; letter-spacing: -.045em; margin: 0 0 14px; max-width: 22ch; text-wrap: balance; }

/* Centered, SaaS-style landing — pre-search only. Once a search runs the hero
   compacts and the working app view stays left-aligned. */
.hero:not(.compact) { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; padding-top: 76px; }
.hero:not(.compact) h1 { max-width: none; }
.hero:not(.compact) .lede { margin-left: auto; margin-right: auto; }
.hero:not(.compact) .searchbar { justify-content: center; }
.hero:not(.compact) .examples { justify-content: center; }
.hero:not(.compact) .advanced-line { justify-content: center; }
.hero h1 em { color: var(--accent-text); font-style: normal; }
.lede { font-size: 16.5px; line-height: 1.6; color: var(--text-dim); margin: 0 0 28px; max-width: 60ch; }
.lede strong { color: var(--text); font-weight: 600; }

/* Quiet secondary paths (list / query builder), one calm line under the search. */
.advanced-line { margin: 20px 0 0; font-size: 13.5px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.advanced-line .sep { color: var(--text-dim); }
/* A single light wildcard tip instead of three big cards. */
.wildcard-hint { margin: 12px 0 0; font-size: 12.5px; }
.wildcard-hint code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; font-size: 12px; color: var(--text); }
.examples-label { font-weight: 600; color: var(--text); margin-right: 4px; }
/* once results are on screen the hero stops shouting */
.hero.compact h1, .hero.compact .lede, .hero.compact .wildcard-hint, .hero.compact .examples { display: none; }
.hero.compact { padding: 18px 0 12px; max-width: none; }

.searchbar { display: flex; gap: 10px; flex-wrap: wrap; }
.searchbar input[type="text"] {
  flex: 1 1 340px; height: 46px; padding: 0 15px; font-size: 15px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.searchbar select {
  height: 46px; padding: 0 12px; font-size: 14px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
input:focus, select:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.examples { margin: 26px 0 0; font-size: 13px; color: var(--text-dim); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.example {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 999px; padding: 4px 11px; margin: 0 4px 4px 0; font-size: 12px; cursor: pointer;
}
.example:hover { color: var(--text); border-color: var(--accent); }
.recent { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.recent-label { font-size: 12px; }
.recent-chip {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 999px; padding: 3px 11px; font-size: 12px; cursor: pointer;
}
.recent-chip:hover { border-color: var(--accent); color: var(--accent-text); }
.recent-clear { background: none; border: 0; color: var(--text-dim); font-size: 11px; cursor: pointer; text-decoration: underline; }

.wildcard-help { font-size: 12.5px; margin: 9px 0 0; }
.wildcard-help code, .jump-examples code {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px; font-size: 12px; color: var(--text);
}

/* ---------- wildcard syntax cards (Discover) ---------- */
.wildcard-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.wc { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 17px; box-shadow: var(--shadow); }
.wc code { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; padding: 5px 9px; font-size: 12.5px; color: var(--text); }
.wc span { font-size: 12.5px; line-height: 1.55; color: var(--text-dim); }
.wc-foot { font-size: 12px; margin: 12px 0 0; }
.wc-foot code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; font-size: 12px; color: var(--text); }
@media (max-width: 760px) { .wildcard-cards { grid-template-columns: 1fr; } }

/* ---------- status ---------- */
.status { padding: 14px 16px; border-radius: var(--radius); margin-bottom: 16px; font-size: 14px; }
.status.error { background: #fde9e7; color: #8c2318; border: 1px solid #f5c6c0; }
:root[data-theme="dark"] .status.error { background: #3a1a17; color: #ffb3aa; border-color: #5c2a24; }
.status.info { background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); }

/* ---------- compact summary (replaces four big tiles) ---------- */
.summary {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 10px;
}
.summary .s-seed { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.summary .s-item { font-size: 13px; color: var(--text-dim); white-space: nowrap; }
.summary .s-item b { color: var(--text); font-weight: 600; font-size: 14px; }
.summary .s-spark { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.summary .s-spark svg { width: 150px; height: 34px; display: block; }

/* ---------- the split strip: the argument in 60px ---------- */
.splitstrip { display: flex; gap: 10px; margin-bottom: 14px; }
.splitstrip button {
  flex: 1; text-align: left; cursor: pointer; font: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 11px 15px;
  display: flex; align-items: baseline; gap: 10px;
}
.splitstrip button:hover { border-color: var(--accent); }
.splitstrip .n { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.splitstrip .t { font-size: 13px; color: var(--text-dim); }
.splitstrip .jumps { background: var(--jump-bg); border-color: var(--accent); flex: 1.6; }
.splitstrip .jumps .n { color: var(--accent-text); }
.splitstrip button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent); }

.domain-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.domain-tools .muted { font-size: 12.5px; max-width: 640px; }

/* ---------- dashboard promo banner ---------- */
.promo {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--jump-bg); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 14px 18px; margin: 0 0 22px;
}
.promo.is-off { opacity: .55; border-style: dashed; }
.promo-text { flex: 1; min-width: 240px; font-size: 14px; line-height: 1.55; }
.promo-text strong { display: block; font-size: 16px; margin-bottom: 2px; }
.promo-text span { color: var(--text-dim); }
.promo .primary-btn { text-decoration: none; white-space: nowrap; }

.promo-editor {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px; margin: 0 0 22px;
}
.promo-editor h3 { margin: 0 0 4px; font-size: 16px; }
.promo-note { font-size: 12.5px; margin: 0 0 14px; }
.promo-row { display: flex; gap: 12px; flex-wrap: wrap; }
.promo-row .auth-field { flex: 1 1 220px; }
.promo-actions { display: flex; align-items: center; gap: 9px; margin-top: 12px; }

/* ---------- copy options ---------- */
.rail-actions { position: relative; }
.copy-menu {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  margin-top: 4px; padding: 10px;
  background: var(--surface); border: 1px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 6px;
}
.copy-opt { font-size: 12.5px; align-items: flex-start; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.copy-opt em { font-style: normal; color: var(--text-dim); }
.copy-choice {
  display: flex; flex-direction: column; gap: 1px; text-align: left;
  background: none; border: 1px solid transparent; border-radius: 7px;
  padding: 7px 9px; font: inherit; cursor: pointer; color: var(--text);
}
.copy-choice:hover { background: var(--surface-2); border-color: var(--accent); }
.copy-choice b { font-size: 13px; }
.copy-choice span { font-size: 11.5px; color: var(--text-dim); line-height: 1.4; }

/* ---------- shortlists ---------- */
.results-toolbar { justify-content: space-between; align-items: center; }
.shortlist-wrap { position: relative; }
.shortlist-menu {
  position: absolute; left: 0; top: 100%; z-index: 30; width: 320px; max-width: 86vw;
  margin-top: 5px; padding: 8px;
  background: var(--surface); border: 1px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 3px;
}
.shortlist-choice {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  background: none; border: 1px solid transparent; border-radius: 8px;
  padding: 9px 11px; font: inherit; cursor: pointer; color: var(--text);
}
.shortlist-choice:hover { background: var(--surface-2); border-color: var(--accent); }
.shortlist-choice b { font-size: 13.5px; }
.shortlist-choice span { font-size: 11.5px; color: var(--text-dim); line-height: 1.4; }

.shortlist {
  background: var(--surface); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px;
}
.shortlist-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.shortlist-head strong { font-size: 16px; }
.shortlist-head p { font-size: 12.5px; line-height: 1.5; margin: 3px 0 0; max-width: 66ch; }
.shortlist-list {
  margin: 14px 0 0; padding-left: 26px;
  max-height: 340px; overflow-y: auto;
}
.shortlist-list li { padding: 5px 0 5px 3px; border-bottom: 1px solid var(--line-soft, var(--border)); }
.shortlist-list li:last-child { border-bottom: 0; }
.shortlist-list li::marker { font-size: 11px; color: var(--text-dim); }
.sl-main { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.sl-kw { font-size: 14px; font-weight: 600; }
.sl-vol { font-size: 12px; font-variant-numeric: tabular-nums; }
.sl-cluster {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent-text); background: var(--jump-bg);
  border: 1px solid var(--accent); border-radius: 999px; padding: 1px 7px;
}
.sl-why { font-size: 11.5px; margin-top: 1px; }
.shortlist-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* ---------- what a spawn produced ----------
   One block per thing, its phrasings stacked underneath cheapest-to-read
   first: the one with the searches, then the also-rans, then a count of the
   ones nobody types. The whole point is to make the choice obvious without
   scrolling a 200-row table. */
.family-list { list-style: none; margin: 14px 0 0; padding: 0; max-height: 460px; overflow-y: auto; }
.family {
  padding: 10px 12px; margin-bottom: 8px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px;
}
.family.is-dead { opacity: .62; }
.family-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding-bottom: 7px; margin-bottom: 6px; border-bottom: 1px solid var(--border);
}
.family-head b { font-size: 14px; }
.family-head .muted { font-size: 11.5px; margin-left: auto; white-space: nowrap; }
.variant { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; padding: 3px 0; }
.variant .v-kw { color: var(--text-dim); }
.variant.is-best .v-kw { color: var(--text); font-weight: 600; }
.variant .v-num { margin-left: auto; font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.build-pill {
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--good); background: var(--good-soft); border: 1px solid var(--good-line);
  border-radius: 4px; padding: 1px 5px; white-space: nowrap;
}
.family-tail { font-size: 11.5px; color: var(--text-dim); padding-top: 4px; font-style: italic; }

/* ---------- clear results ---------- */
.results-toolbar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
#clearResults { color: var(--text-dim); }
#clearResults:hover { color: var(--bad); border-color: var(--bad); }

/* ---------- what to do after a page-1 check ---------- */
.verdict {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  background: var(--good-soft); border: 1px solid var(--good-line);
  border-radius: var(--radius); padding: 13px 16px; margin-bottom: 12px;
}
.verdict-main { flex: 1; min-width: 260px; font-size: 13.5px; line-height: 1.55; }
.verdict-main strong { display: block; font-size: 15.5px; color: var(--good); margin-bottom: 2px; }
.verdict-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.verdict-actions .primary-btn { white-space: nowrap; }
.verdict-done { font-size: 13px; }

/* ---------- research trail (breadcrumbs) ---------- */
.trail {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 10px; font-size: 13px;
}
.trail-step {
  background: none; border: 0; padding: 2px 0; margin: 0; font: inherit;
  color: var(--accent-text); cursor: pointer;
  border-bottom: 1px solid transparent;
}
.trail-step:hover, .trail-step:focus-visible { border-bottom-color: var(--accent); }
.trail-sep { color: var(--text-dim); }
.trail-here { color: var(--text-dim); }

/* ---------- dashboard ---------- */
.dash-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.dash-head h2 { margin: 0; }
.dash-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px;
  align-items: center; padding: 13px 15px; margin-bottom: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.dash-main { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0; }
.dash-seed { font-size: 15px; font-weight: 600; color: var(--text); text-decoration: none; }
.dash-seed:hover { color: var(--accent-text); text-decoration: underline; }
.dash-mode {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-dim); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px;
}
.dash-mode.is-domain { color: var(--accent-text); background: var(--jump-bg); border-color: var(--accent); }
.dash-country { font-size: 12px; }
.dash-meta { grid-column: 1; font-size: 12.5px; }
.dash-side { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 10px; }
.dash-when { font-size: 12px; white-space: nowrap; }

@media (max-width: 560px) {
  .dash-row { grid-template-columns: minmax(0, 1fr); }
  .dash-side { grid-column: 1; grid-row: auto; justify-content: space-between; margin-top: 6px; }
}

.dash-sprint { list-style: none; margin: 0; padding: 0; }
.dash-sprint li {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 13px; margin-bottom: 6px; font-size: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}
.dash-sprint a { color: var(--text); text-decoration: none; font-weight: 600; }
.dash-sprint a:hover { color: var(--accent-text); text-decoration: underline; }
.dash-sprint .muted { font-size: 12.5px; margin-left: auto; white-space: nowrap; }

/* ---------- what moved while you were away ----------
   Same row shape as the sprint list, plus a direction chip. Deliberately not
   colour-only: the chip says "climbing +40%" in words, so it still reads for
   anyone who can't tell the green from the red. */
.dash-moves { list-style: none; margin: 0 0 10px; padding: 0; }
.dash-moves li {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 13px; margin-bottom: 6px; font-size: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}
.dash-moves a { color: var(--text); text-decoration: none; font-weight: 600; }
.dash-moves a:hover { color: var(--accent-text); text-decoration: underline; }
.dash-moves .muted { font-size: 12.5px; margin-left: auto; text-align: right; }
.move-chip {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 4px; padding: 2px 6px; white-space: nowrap;
  color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border);
}
.move-chip.up { color: var(--good); background: var(--good-soft); border-color: var(--good-line); }
.move-chip.down { color: var(--bad); background: var(--bad-soft); border-color: var(--bad-line); }
.watch-meta { font-size: 12.5px; margin: 0; }

/* ---------- header navigation ----------
   Four identical ghost buttons in a row gave the header no hierarchy, so the
   sign-in control was as easy to miss as the theme toggle. Three weights now:
   primary (the one action worth taking), quiet (secondary), icon (utility). */
.nav-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 13px; font-weight: 500;
  padding: 8px 14px; border-radius: 8px; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; background: none; color: var(--text);
  transition: background .12s, border-color .12s, color .12s;
}
/* Anchors styled as buttons should not carry a link underline. */
a.nav-btn, a.nav-btn:hover { text-decoration: none; }

.nav-btn.is-primary {
  background: var(--accent); color: var(--accent-fg);
  border-color: var(--accent); font-weight: 600;
  box-shadow: 0 1px 2px rgba(220, 95, 23, .25);
}
.nav-btn.is-primary:hover { filter: brightness(1.06); }

.nav-btn.is-quiet { color: var(--text-dim); border-color: var(--border); background: var(--surface); }
.nav-btn.is-quiet:hover { color: var(--text); border-color: var(--accent); }

.nav-btn.is-icon { color: var(--text-dim); padding: 8px 11px; }
.nav-btn.is-icon:hover { color: var(--text); background: var(--surface-2); }

.nav-divider { width: 1px; height: 22px; background: var(--border); margin: 0 2px; flex: none; }

/* ---------- accounts ---------- */
.account-area { display: flex; align-items: center; }
.account-signed { display: flex; align-items: center; gap: 8px; }
.account-email {
  font-size: 12.5px; color: var(--text-dim); max-width: 190px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.auth-modal { max-width: 440px; }
.auth-lede { font-size: 13.5px; line-height: 1.6; margin: 0 0 16px; }
.auth-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.auth-field > span { font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.auth-field input {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; font: inherit; font-size: 14.5px; width: 100%;
}
.auth-field input:focus { outline: none; border-color: var(--accent); }
.auth-hint { font-size: 11.5px; color: var(--text-dim); font-style: normal; }

.auth-newsletter {
  margin: 4px 0 14px; padding: 12px 13px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
}
.auth-newsletter .chk { align-items: flex-start; font-size: 14px; }
.auth-newsletter-copy { font-size: 12px; line-height: 1.55; margin: 7px 0 0 26px; }

.auth-error {
  margin: 0 0 12px; padding: 9px 12px; font-size: 13px; border-radius: 7px;
  color: var(--bad); background: color-mix(in srgb, var(--bad) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent);
}
.auth-switch { font-size: 12.5px; margin: 14px 0 0; text-align: center; }

/* ---------- the workflow guide (/guide) ---------- */
.topbar-right { display: flex; align-items: center; gap: 8px; }

.guide { max-width: 860px; margin: 0 auto; padding: 0 20px 60px; }
.guide-hero { padding: 40px 0 26px; }
.guide-hero h1 { font-size: 40px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 14px; }
.guide-hero .lede { font-size: 17px; line-height: 1.65; color: var(--text-dim); max-width: 660px; margin: 0; }
.guide-hero .lede em { color: var(--text); font-style: italic; }

.guide-section { padding: 26px 0; border-top: 1px solid var(--border); }
.guide-section h2 { font-size: 24px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 12px; }
.guide-intro { font-size: 15px; line-height: 1.65; color: var(--text-dim); margin: 0 0 18px; max-width: 680px; }

.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 13px; }
.steps li { font-size: 14.5px; line-height: 1.65; padding-left: 4px; }
.steps li::marker { color: var(--accent); font-weight: 700; }
.steps code, .glossary code, .guide-note code {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px;
  padding: 1px 6px; font-size: 13px;
}

.outcome {
  margin: 18px 0 0; padding: 11px 14px; font-size: 14px; line-height: 1.6;
  background: var(--good-soft); border: 1px solid var(--good-line);
  border-left-width: 3px; border-radius: 7px;
}
.guide-note {
  margin: 18px 0 0; padding: 11px 14px; font-size: 13.5px; line-height: 1.6;
  color: var(--text-dim); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 7px;
}

.route-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.route-grid a {
  display: flex; flex-direction: column; gap: 3px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 15px; transition: border-color .12s, transform .12s;
}
.route-grid a:hover { border-color: var(--accent); transform: translateY(-1px); }
.route-grid b { font-size: 14.5px; color: var(--text); }
.route-grid span { font-size: 12.5px; color: var(--text-dim); }

.workflow { scroll-margin-top: 16px; }

.glossary { margin: 0; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px 20px; }
.glossary dt { font-weight: 700; font-size: 14px; }
.glossary dd { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-dim); }

.plain-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 11px; }
.plain-list li { font-size: 14.5px; line-height: 1.65; color: var(--text-dim); }
.plain-list b { color: var(--text); }

.guide-cta { text-align: center; padding: 40px 0 10px; border-top: 1px solid var(--border); }
.guide-cta h2 { font-size: 22px; margin: 0 0 6px; }
.guide-cta p { color: var(--text-dim); font-size: 14.5px; margin: 0 0 18px; }
.guide-cta .primary-btn { text-decoration: none; display: inline-flex; }

@media (max-width: 640px) {
  .guide-hero h1 { font-size: 30px; }
  .glossary { grid-template-columns: 1fr; gap: 4px 0; }
  .glossary dd { margin-bottom: 10px; }
}

/* ---------- sprint list (the execution set) ---------- */
.star {
  background: none; border: 0; padding: 0; margin: 0; flex: none;
  font-size: 15px; line-height: 1; cursor: pointer;
  color: var(--text-dim); opacity: .45; transition: opacity .12s, color .12s;
}
.star:hover { opacity: 1; color: var(--accent); }
.star.is-on { opacity: 1; color: var(--accent); }
.starcol { width: 28px; }

.tab-count {
  display: inline-block; margin-left: 5px; min-width: 18px; padding: 1px 5px;
  font-size: 11px; font-weight: 700; line-height: 1.5;
  color: var(--accent-fg); background: var(--accent); border-radius: 999px;
}

.sprint-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 8px;
}
.sprint-stats { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 13.5px; }
.sprint-stats .fruit-count { color: var(--good); }
.sprint-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.sprint-advice { font-size: 13px; margin: 0 0 12px; }
.sprint-advice.is-good { color: var(--good); }
.sprint-advice.is-over, .sprint-advice.is-full { color: var(--warm); }

.sprint-empty { text-align: center; padding: 46px 20px; }
.sprint-empty h3 { margin: 0 0 8px; font-size: 17px; }
.sprint-empty p { margin: 0 auto; max-width: 460px; font-size: 13.5px; line-height: 1.6; }

/* ---------- effective volume (SERP-feature haircut) ---------- */
.eff-col { width: 96px; }
.eff-vol { display: inline-flex; align-items: baseline; gap: 6px; justify-content: flex-end; cursor: help; font-variant-numeric: tabular-nums; }
.eff-cut { font-size: 10.5px; font-weight: 700; color: var(--bad); }
.feature-line {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin: 0 0 10px; font-size: 13px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 7px; padding: 8px 11px;
}
.feat-pill {
  font-size: 11px; font-weight: 600; color: var(--warm);
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
:root[data-theme="dark"] .feat-pill { color: var(--accent-text); }

/* ---------- local query generator ---------- */
.localmode {
  max-width: 760px; margin: 0 auto 6px; text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
}
.local-fields { display: flex; gap: 12px; flex-wrap: wrap; }
.local-field { flex: 1 1 240px; display: flex; flex-direction: column; gap: 5px; }
.local-field > span { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.local-field > span em { font-style: normal; font-weight: 400; opacity: .75; }
.local-field input {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 11px; font: inherit; font-size: 14px; width: 100%;
}
.local-field input:focus { outline: none; border-color: var(--accent); }
.local-switch { margin: 12px 0 4px; }

.local-preview { margin: 10px 0 12px; }
.local-count { font-size: 12px; margin: 0 0 6px; }
.local-empty { font-size: 13px; margin: 0; }
.local-list {
  list-style: none; margin: 0; padding: 10px 12px; max-height: 180px; overflow-y: auto;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; line-height: 1.85;
}
.local-actions { display: flex; gap: 8px; align-items: center; }
.local-actions .primary-btn:disabled,
.local-actions .ghost-btn:disabled { opacity: .5; cursor: not-allowed; }
.src-badge.local-badge { color: var(--accent-text); background: var(--jump-bg); border-color: var(--accent); }

/* ---------- Search Console: low-hanging fruit ---------- */
.gsc-strip {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px;
}
.gsc-strip.is-loaded { border-color: var(--good-line); background: var(--good-soft); }
.gsc-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gsc-icon { color: var(--accent); font-size: 15px; line-height: 1; }
.gsc-strip.is-loaded .gsc-icon { color: var(--good); }
.gsc-text { font-size: 13px; color: var(--text-dim); flex: 1; min-width: 260px; }
.gsc-text strong { color: var(--text); font-weight: 600; }
.gsc-text .fruit-count { color: var(--good); font-weight: 600; }
.ghost-btn.small { padding: 5px 10px; font-size: 12.5px; }

.gsc-panel { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.gsc-how { font-size: 12.5px; margin: 0 0 10px; line-height: 1.5; }
.gsc-how code {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px; font-size: 12px;
}
.gsc-inputs { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 9px; }
.gsc-file input { position: absolute; opacity: 0; width: 0; height: 0; }
.gsc-file span {
  display: inline-flex; align-items: center; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.gsc-file span:hover { border-color: var(--accent); background: var(--surface-2); }
.gsc-or { font-size: 12.5px; }
#gscPaste {
  width: 100%; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 11px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; line-height: 1.5; resize: vertical;
}
#gscPaste:focus { outline: none; border-color: var(--accent); }
.gsc-actions { display: flex; gap: 8px; margin-top: 9px; }
.gsc-msg { margin: 9px 0 0; font-size: 12.5px; }
.gsc-msg.is-ok { color: var(--good); }
.gsc-msg.is-error { color: var(--bad); }

.gsc-col { width: 80px; }
.fruit-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; cursor: help;
  color: var(--good); background: var(--good-soft); border: 1px solid var(--good-line);
  border-radius: 4px; padding: 1px 5px; white-space: nowrap;
}

/* ---------- tabs ---------- */
.tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.tab {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 9px 14px; margin-bottom: -1px; font: inherit; font-size: 14px;
  color: var(--text-dim); cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.tab-hint { margin-left: auto; font-size: 12.5px; padding-right: 4px; }

/* ---------- content map ---------- */
.map-intro {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.map-intro p { margin: 0; font-size: 13.5px; max-width: 720px; }
.map-intro-text { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 9px; }
.map-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.map-jumps { white-space: nowrap; }
.cluster-theme { font-size: 12px; margin: 3px 0 0; }

/* Phase 7: ad-group export panel */
.adgroups {
  margin: 0 0 16px; padding: 16px 18px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface-2);
}
.adgroups-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.adgroups-head strong { font-size: 15px; }
.adgroups-head .muted { font-size: 12.5px; line-height: 1.5; max-width: 720px; }
.adgroups-controls { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-start; }
.ag-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.ag-field > span:first-child { font-weight: 600; color: var(--text-dim); }
.ag-radios, .ag-checks { display: flex; gap: 14px; flex-wrap: wrap; }
.ag-radios label, .ag-checks label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.ag-field input[type="text"] {
  min-width: 220px; height: 32px; padding: 0 9px; font-size: 13px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 7px;
}
.ag-field input[type="text"]:focus { outline: none; border-color: var(--accent); }
.adgroups-stats { margin: 12px 0; font-size: 13px; }
.adgroups-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ag-feedback { color: var(--good, #157a4a); font-weight: 600; }

/* min(340px, 100%) rather than a bare 340px: on a narrow phone the container is
   under 340px wide, and a hard minimum would push the cards past the edge. */
.clusters { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 14px; align-items: start; }
.cluster {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 15px 16px; box-shadow: var(--shadow);
}
.cluster.is-open { grid-column: 1 / -1; border-color: var(--accent); }
.cluster-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.cluster-title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cluster-title h3 { margin: 0; font-size: 15.5px; letter-spacing: -.01em; }
.format-pill {
  font-size: 11px; border-radius: 999px; padding: 2px 9px; cursor: help;
  border: 1px solid var(--accent); color: var(--accent-text); background: var(--jump-bg); white-space: nowrap;
}
/* competitor gap + organic competitors (Phase 9) */
.gapmode:not([hidden]) { display: flex; flex-direction: column; gap: .75rem; margin-top: .5rem; text-align: left; }
.gap-fields { display: flex; flex-wrap: wrap; gap: 14px; }
.gap-fields .local-field { flex: 1; min-width: 240px; }
.gap-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.gap-competitors { margin-top: 4px; }
.gap-comp-head { font-size: 13.5px; margin: 0 0 6px; }
.gap-comp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gap-comp-list li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.gap-comp-pick {
  background: var(--surface-2); border: 1px solid var(--accent); border-radius: 999px;
  padding: 2px 10px; font: inherit; font-size: 13px; color: var(--accent-text); cursor: pointer; white-space: nowrap;
}
.gap-comp-pick:hover { background: var(--accent); color: #fff; }

/* intent-depth tiers (Phase 8) */
.tier-pill {
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em; border-radius: 999px;
  padding: 2px 9px; cursor: help; white-space: nowrap; border: 1px solid var(--border);
}
.tier-pill.tier-pillar { background: #16223a; color: #fff; border-color: #16223a; }
.tier-pill.tier-cluster { background: var(--jump-bg); color: var(--accent-text); border-color: var(--accent); }
.tier-pill.tier-supporting { background: var(--surface-2); color: var(--text-dim); }
#tabHint .tier-pill { font-size: 10px; padding: 1px 7px; margin-left: 2px; cursor: default; }
.cluster-stats {
  display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px;
  color: var(--text-dim); padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 10px;
}
.cluster-stats b { color: var(--text); font-weight: 600; }
.cluster-jumps b { color: var(--accent-text); }

.cluster-keywords { list-style: none; margin: 0 0 12px; padding: 0; }
.cluster-keywords li { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13.5px; }
.cluster-keywords li .muted { margin-left: auto; font-variant-numeric: tabular-nums; }
.cluster-keywords .more-note { justify-content: flex-start; font-size: 12.5px; }
.cluster.is-open .cluster-keywords { columns: 2; column-gap: 26px; }
.cluster.is-open .cluster-keywords li { break-inside: avoid; }
.cluster-actions { display: flex; gap: 7px; }

/* ---------- workspace: rail + table ---------- */
.workspace { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 14px; align-items: start; }
.rail {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 4px 14px 14px;
  position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto;
}
.rail-block { padding: 12px 0; border-bottom: 1px solid var(--border); }
.rail-block:last-child { border-bottom: 0; }
.rail-block h4 {
  margin: 0 0 8px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-dim); font-weight: 600;
}
.rail .mini-input { width: 100%; margin-bottom: 6px; }
.rail .mini-input:last-child { margin-bottom: 0; }
.mini-input {
  height: 32px; padding: 0 9px; font-size: 13px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 7px;
}
.chk { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; cursor: pointer; }
.chk input { accent-color: var(--accent); }
.chk.is-empty { color: var(--text-dim); opacity: .55; cursor: default; }
.rail-actions { display: flex; flex-direction: column; gap: 6px; }
.rail-note { font-size: 11.5px; line-height: 1.4; margin: 0 0 8px; }
.kd-btn { width: 100%; justify-content: center; }
.spinner.dark { border-color: var(--border); border-top-color: var(--accent); }
.rail-actions .ghost-btn { justify-content: center; }

.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  width: 38px; height: 22px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); position: relative; flex: none; transition: background .18s;
}
.switch-thumb {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-dim); transition: transform .18s, background .18s;
}
.switch input:checked + .switch-track { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(16px); background: #fff; }
.switch-text { font-size: 13.5px; }
.whatis {
  background: none; border: 0; padding: 8px 0 0; margin: 0; font: inherit; font-size: 12px;
  color: var(--accent-text); text-decoration: underline; cursor: pointer; display: block;
}

/* ---------- explainer ---------- */
.explainer {
  background: var(--jump-bg); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 15px 17px; margin-bottom: 12px;
}
.explainer h3 { margin: 0 0 7px; font-size: 15px; }
.explainer p { margin: 0 0 9px; font-size: 14px; }
.jump-examples { list-style: none; margin: 0 0 9px; padding: 0; display: flex; flex-wrap: wrap; gap: 7px 20px; font-size: 14px; }

/* ---------- table ---------- */
.rowcount { font-size: 12.5px; margin: 0 0 8px; }
.finding { color: var(--accent-text); }
.finding::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 5px; border-radius: 50%; border: 2px solid var(--accent); border-top-color: transparent; animation: spin .7s linear infinite; vertical-align: -1px; }
.table-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow-x: auto; box-shadow: var(--shadow);
}
/* Once the optional columns (Eff. vol, Open?, Weakest) are shown the results
   table outgrows the viewport sideways. With page-level scroll the horizontal
   scrollbar ends up at the bottom of all 100 rows, far below the fold and
   effectively unreachable. So give the results table its own viewport-tall
   scroll box, mirroring the filter rail beside it: the left-right scrollbar
   then sits at the bottom of what you can see. The sticky thead still pins. */
.workspace .table-wrap {
  position: sticky; top: 12px;
  max-height: calc(100vh - 24px);
  overflow: auto;
}
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-dim); font-weight: 600; padding: 10px 12px;
  border-bottom: 1px solid var(--border); background: var(--surface-2);
  white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
th.num, td.num { text-align: right; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
th[aria-sort="descending"]::after { content: " ↓"; color: var(--accent); }
th[aria-sort="ascending"]::after { content: " ↑"; color: var(--accent); }
/* A visible cue that a column header carries an explanation on hover. Shown on
   any titled header that isn't the one currently sorted (that shows the arrow). */
#resultsTable thead th[title]:not([aria-sort])::after {
  content: "\00a0ⓘ"; font-size: 9.5px; font-weight: 400; color: var(--text-dim);
  vertical-align: super; cursor: help;
}
tbody td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
.kw-row { cursor: pointer; }
.kw-row:hover { background: var(--surface-2); }
.kw-row.is-open { background: var(--surface-2); }

.kw { display: flex; align-items: center; gap: 8px; }
.kw-drill {
  background: none; border: 0; padding: 0; margin: 0; font: inherit;
  color: var(--text); text-align: left; cursor: pointer; border-bottom: 1px dashed transparent;
}
.kw-drill:hover { color: var(--accent-text); border-bottom-color: var(--accent); }
.jump-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; cursor: help;
  color: var(--accent-text); background: var(--jump-bg); border: 1px solid var(--accent);
  border-radius: 4px; padding: 1px 5px; white-space: nowrap;
}

/* AI Overview at-a-glance badge (checked keywords that trigger an AIO) */
.aio-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; cursor: help;
  color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--muted, #7e8496);
  border-radius: 4px; padding: 1px 5px; white-space: nowrap;
}
.aio-badge.citeable { color: var(--accent-text); background: var(--jump-bg); border-color: var(--accent); }

/* content coverage: a keyword you already have a page for */
.onsite-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; cursor: help;
  color: #157a4a; background: var(--surface-2); border: 1px solid #2e9e57;
  border-radius: 4px; padding: 1px 5px; white-space: nowrap;
}
:root[data-theme="dark"] .onsite-badge { color: #4ade80; }
#coverageUrl { width: 100%; margin-bottom: 6px; }
.coverage-reset { font-size: 12px; margin-top: 6px; display: inline-block; }

/* customizable opportunity weights */
.weights-toggle { display: inline-block; margin-top: 8px; font-size: 12px; }
.opp-weights { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.wt { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 12px; align-items: baseline; }
.wt > span { grid-column: 1; grid-row: 1; }
.wt > span em { font-style: normal; color: var(--text-dim); font-size: 11px; }
.wt > .wt-val { grid-column: 2; grid-row: 1; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-text); }
.wt > input[type="range"] { grid-column: 1 / -1; grid-row: 2; width: 100%; accent-color: var(--accent); margin: 3px 0 0; cursor: pointer; }
.opp-weights .rail-note { margin: 0; }

/* same-page: keywords that share a page-1 SERP belong on one page (Phase 6) */
.samepage-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; cursor: help;
  color: var(--head, #16223a); background: var(--surface-2); border: 1px dashed var(--muted, #7e8496);
  border-radius: 4px; padding: 1px 5px; white-space: nowrap;
}
.verdict-samepage { display: block; margin-top: 4px; font-size: 13px; color: var(--text-dim); }
.serp-samepage {
  margin: 8px 0; padding: 8px 10px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; line-height: 1.6;
}
.serp-samepage strong { margin-right: 6px; }
.samepage-kw {
  display: inline-block; margin: 2px 4px 2px 0; padding: 1px 8px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 12px;
}

/* PAA coverage checklist + related searches (Phase 8b) */
.serp-questions { margin: 8px 0; display: flex; flex-direction: column; gap: 8px; }
.paa-block {
  padding: 8px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border);
}
.paa-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.paa-list { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; }
.paa-list li { margin: 1px 0; }
.related-block { font-size: 12.5px; line-height: 1.9; }
.related-chip {
  display: inline-block; margin: 2px 4px 2px 0; padding: 1px 8px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 12px;
}

/* opportunity — the number the table sorts by */
.opp { display: inline-flex; align-items: center; gap: 7px; justify-content: flex-end; font-variant-numeric: tabular-nums; }
.opp-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.opp-n { font-weight: 700; }

.type-pill {
  font-size: 11px; border-radius: 999px; padding: 2px 8px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); white-space: nowrap;
}
.type-pill.product { border-color: var(--accent); color: var(--accent-text); background: var(--jump-bg); }
.type-pill.commercial { border-color: var(--warm); color: var(--warm); }

.comp-bar { width: 40px; height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; display: inline-block; }
.comp-fill { display: block; height: 100%; border-radius: 3px; }

.trendcol { width: 118px; }
.trend-cell { display: flex; align-items: center; gap: 7px; }
.spark { width: 54px; height: 20px; display: block; flex: none; }
.tdir { font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tdir.rising { color: var(--good); }
.tdir.falling { color: var(--bad); }
.tdir.stable { color: var(--text-dim); }
.seasonal-flag { font-size: 11px; color: var(--warm); }

/* expanded detail */
.detail-row td { padding: 0; background: var(--surface-2); }
.detail { padding: 14px 16px; border-bottom: 2px solid var(--accent); }
.detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 11px; }
.detail-actions { display: flex; gap: 7px; }
.months { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 5px; }
.month { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 6px 7px; text-align: center; }
.m-label { display: block; font-size: 10.5px; color: var(--text-dim); }
.m-val { display: block; font-size: 12.5px; font-weight: 600; }

/* ---------- selection + page-1 check ---------- */
.selcol { width: 30px; }
.selcol input { accent-color: var(--accent); cursor: pointer; }
.selbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--jump-bg); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 9px 14px; margin-bottom: 10px; font-size: 13.5px;
}
.selbar #selCount { font-weight: 600; }
.selnote { font-size: 12px; }
.primary-btn.small { height: 34px; padding: 0 14px; font-size: 13px; border-radius: 8px; }
.src-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; cursor: help;
  color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px; white-space: nowrap;
}

.pos-col { width: 74px; }
.rank-line {
  margin: 8px 0 4px; font-size: 13.5px;
  background: var(--jump-bg); border: 1px solid var(--accent);
  border-radius: 7px; padding: 8px 11px;
}
.rank-line a { color: var(--accent-text); }

.serp-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.serp-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; font-size: 13.5px; }
.ai-block {
  background: var(--surface); border: 1px solid var(--border); border-radius: 7px;
  padding: 8px 11px; margin-bottom: 10px; font-size: 13px;
}
.ai-win { color: var(--accent-text); font-weight: 600; }
.ai-head { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.ai-answer { margin: 8px 0; font-size: 12.5px; line-height: 1.6; color: var(--text-dim); font-style: italic; border-left: 3px solid var(--border); padding-left: 10px; }
.ai-sources { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; font-size: 12px; }
.ai-sources-label { font-weight: 600; color: var(--text-dim); }
.ai-source {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2); text-decoration: none; color: var(--text);
}
.ai-source:hover { border-color: var(--accent); }
.ai-source.is-parasite { border-color: var(--accent); }
.ai-note { margin: 6px 0 0; font-size: 11.5px; font-style: italic; }
.serp-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.serp-list li { display: flex; align-items: center; gap: 9px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.serp-list li:last-child { border-bottom: 0; }
.serp-list li.is-parasite { background: var(--jump-bg); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 4px; }
.serp-list .pos { width: 22px; text-align: right; color: var(--text-dim); font-variant-numeric: tabular-nums; flex: none; }
.serp-list a { color: var(--text); text-decoration: none; border-bottom: 1px dashed var(--border); }
.serp-list a:hover { color: var(--accent-text); border-bottom-color: var(--accent); }
.plat-badge {
  font-size: 10px; font-weight: 700; color: var(--accent-text);
  background: var(--surface); border: 1px solid var(--accent);
  border-radius: 4px; padding: 1px 6px; white-space: nowrap; flex: none;
}
.serp-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }

/* Analysis v2 — competitor domain strength (Pro). Transparent chips with
   coloured text/border read correctly in both light and dark themes. */
.dr-chip {
  font-size: 11px; font-weight: 700; line-height: 16px; padding: 0 6px;
  border-radius: 10px; border: 1px solid var(--border); color: var(--text-dim);
  font-variant-numeric: tabular-nums; flex: none;
}
.dr-chip.weak { color: #2e9e57; border-color: #2e9e57; }
.dr-chip.mid { color: #c47b1a; border-color: #c47b1a; }
.dr-chip.strong { color: #d9564e; border-color: #d9564e; }

/* page weakness chip (Phase 10). High score = beatable = green, like dr-chip. */
.page-chip {
  font-size: 11px; font-weight: 700; line-height: 16px; padding: 0 6px; cursor: help;
  border-radius: 10px; border: 1px solid var(--border); color: var(--text-dim);
  font-variant-numeric: tabular-nums; flex: none;
}
.page-chip.weak { color: #2e9e57; border-color: #2e9e57; }
.page-chip.mid { color: #c47b1a; border-color: #c47b1a; }
.page-chip.strong { color: #d9564e; border-color: #d9564e; }
.page-chip.broken { color: var(--muted, #7e8496); border-style: dashed; }
.page-analyze {
  margin: 8px 0; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.6;
  background: var(--surface-2); border: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center;
}
.page-analyze-note { flex-basis: 100%; font-style: italic; }
.detail-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; justify-content: center; }

/* Similar-intent seed expansion panel */
.expand-panel {
  margin: 0 0 14px; padding: 12px 16px; border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--jump-bg);
}
.expand-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-bottom: 10px; }
.expand-head strong { font-size: 14px; }
.expand-head .muted { font-size: 12.5px; flex: 1; min-width: 200px; }
.expand-panel .describe-seeds { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Plain-language action plan modal */
.modal.is-wide { max-width: 720px; width: min(720px, 92vw); }
#planHeadline { font-size: 14.5px; line-height: 1.55; margin: 0 0 6px; color: var(--text); }
.plan-body { max-height: 62vh; overflow-y: auto; margin: 8px 0; }
.plan-section { padding: 10px 0; border-top: 1px solid var(--border); }
.plan-section:first-child { border-top: 0; }
.plan-section h4 { margin: 0 0 6px; font-size: 13.5px; color: var(--accent-text); }
.plan-section ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.65; }
.plan-section li { margin: 2px 0; }
.plan-note { margin: 6px 0 0; font-size: 12px; font-style: italic; }
.pro-tag {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .03em;
  line-height: 15px; padding: 0 5px; border-radius: 6px;
  background: var(--accent); color: #fff; vertical-align: middle;
}
.preset-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }

/* Dashboard: plan badge + BYOK */
.dash-head { display: flex; align-items: center; gap: 10px; }
.plan-badge { font-size: 12px; font-weight: 800; letter-spacing: .03em; padding: 2px 8px; border-radius: 8px; }
.plan-badge.is-pro { background: var(--accent); color: #fff; }
.plan-badge.is-free { background: var(--surface); color: var(--text-dim); border: 1px solid var(--border); }
.dash-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* ---------- cost preview modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10, 18, 25, .55);
  /* base is display:none so the HTML `hidden` attribute is respected —
     a class rule of `display:flex` would otherwise override [hidden]. */
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-backdrop:not([hidden]) { display: flex; }
.modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 12px 48px rgba(0,0,0,.35);
  width: 100%; max-width: 400px; padding: 20px 22px;
}
.modal h3 { margin: 0 0 14px; font-size: 17px; }
.cost-line {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 7px 0; font-size: 14px; border-bottom: 1px solid var(--border);
}
.cost-line b { font-variant-numeric: tabular-nums; }
.cost-line.free b { color: var(--good); }
.cost-line.bill b { color: var(--accent-text); }
.cost-line.warn { color: var(--warm); }
.cost-line.muted { color: var(--text-dim); }
.cost-line.total { border-bottom: 0; margin-top: 4px; padding-top: 11px; border-top: 2px solid var(--border); font-weight: 600; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.modal-actions .primary-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Collections (Phase 5) */
.dash-seedsub { display: block; font-size: 12px; margin-top: 1px; }
.collect-list { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; margin: 12px 0; }
.collect-pick {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  text-align: left; padding: 9px 12px; font: inherit; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text);
}
.collect-pick:hover { border-color: var(--accent); }
.collect-new { display: flex; gap: 8px; margin-top: 4px; }
#collectNewName {
  flex: 1; height: 34px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}
#collectNewName:focus { outline: none; border-color: var(--accent); }

.more-wrap { text-align: center; padding: 16px 0; }
/* Stacked, centered footer: disclaimer on its own line, buttons centered below. */
.foot { border-top: 1px solid var(--border); padding: 22px; font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.foot-disclaimer { max-width: 900px; margin: 0; }
.foot-links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.foot-links a, .foot-cta {
  font-weight: 600; text-decoration: none; border-radius: 8px; padding: 6px 13px; font-size: 12px;
  transition: border-color .15s, color .15s, background .15s;
}
.foot-links a { color: var(--accent-text); border: 1px solid var(--border); background: var(--surface); }
.foot-links a:hover { color: #fff; border-color: var(--accent); background: var(--accent); }
.foot-cta { background: var(--accent); color: #fff; border: 1px solid var(--accent); cursor: pointer; font-weight: 700; }
.foot-cta:hover { filter: brightness(.95); }

/* The two secondary paths as small pill buttons instead of plain underlined links. */
.advanced-line .linklike {
  text-decoration: none; border: 1px solid var(--border); border-radius: 7px;
  padding: 3px 10px; color: var(--accent-text); font-weight: 600; background: var(--surface);
  transition: border-color .15s, background .15s, color .15s;
}
.advanced-line .linklike:hover { border-color: var(--accent); background: var(--accent); color: #fff; }

/* ================= Announcement strip ================= */
.announce { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap;
  background: var(--surface-2); border-bottom: 1px solid var(--border); padding: 8px 16px; font-size: 13px; }
.announce[hidden] { display: none; }
.announce-tag { font-size: 10px; font-weight: 800; letter-spacing: .05em; background: var(--accent); color: #fff; border-radius: 5px; padding: 2px 7px; }
.announce-text { color: var(--text-dim); }
.announce-link { color: var(--accent-text); font-weight: 700; text-decoration: none; white-space: nowrap; }
.announce-link:hover { text-decoration: underline; }
.announce-x { background: none; border: 0; color: var(--text-dim); cursor: pointer; font-size: 14px; line-height: 1; padding: 4px; margin-left: 4px; }
.announce-x:hover { color: var(--text); }

/* ================= Marketing layer (landing only) ================= */
#hero.compact ~ #marketing { display: none; }
.marketing { max-width: 1040px; margin: 0 auto; padding: 8px 22px 40px; }
.mk-block { padding: 42px 0; border-top: 1px solid var(--border); }
.mk-h2 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; letter-spacing: -.03em; text-align: center; margin: 0 0 8px; }
.mk-sub { text-align: center; color: var(--text-dim); margin: 0 auto 28px; max-width: 60ch; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px; box-shadow: var(--shadow); }
.feature-card h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.feature-card p { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.6; }
@media (max-width: 820px) { .feature-grid { grid-template-columns: 1fr; } }

.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 2px 18px; }
.faq summary { cursor: pointer; font-weight: 700; padding: 13px 0; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--accent-text); font-weight: 800; }
.faq[open] summary::after { content: "–"; }
.faq p { margin: 0 0 14px; color: var(--text-dim); font-size: 14px; line-height: 1.6; }

.mk-cta { text-align: center; padding: 42px 0 10px; border-top: 1px solid var(--border); }
.mk-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }

/* ================= Pricing page ================= */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 980px; margin: 8px auto 0; }
.price-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 26px 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.price-card.is-featured { border-color: var(--accent); box-shadow: 0 8px 30px rgba(0,0,0,.09); }
.price-badge { position: absolute; top: 14px; right: 14px; font-size: 10px; font-weight: 800; letter-spacing: .04em; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 6px; padding: 2px 7px; }
.price-name { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.price-tag { margin: 0 0 4px; }
.price-amount { font-size: 40px; font-weight: 800; letter-spacing: -.03em; }
.price-per { color: var(--text-dim); font-size: 15px; }
.price-note { color: var(--text-dim); font-size: 13px; margin: 0 0 16px; }
.price-cta { width: 100%; text-align: center; margin-bottom: 18px; }
.price-cta.is-soon { cursor: default; opacity: .7; }
.price-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.price-list li { font-size: 13.5px; color: var(--text); padding-left: 22px; position: relative; line-height: 1.5; }
.price-list li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-text); font-weight: 800; }
@media (max-width: 820px) { .pricing-grid { grid-template-columns: 1fr; } }

.byok-banner { max-width: 900px; margin: 28px auto 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 26px 28px; text-align: center; }
.byok-banner h2 { margin: 0 0 8px; font-size: 22px; font-weight: 800; }
.byok-banner p { margin: 0 auto; color: var(--text-dim); font-size: 14.5px; line-height: 1.65; max-width: 68ch; }

@media (max-width: 1000px) {
  /* minmax(0, 1fr), NOT 1fr. A bare 1fr means minmax(auto, 1fr), and that auto
     minimum refuses to shrink below the table's min-content width — which blew
     the whole column out to ~580px on a phone and dragged the rail with it,
     scrolling the entire page sideways. The desktop rule above already uses
     minmax(0, 1fr) for exactly this reason. */
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; max-height: none; }
  /* Single column now, so don't pin the table; keep it bounded so the
     left-right scrollbar stays reachable instead of sitting below every row. */
  .workspace .table-wrap { position: static; max-height: 72vh; }
  .summary .s-spark { margin-left: 0; }
}

/* Grid and flex children default to min-width:auto, so anything holding a wide
   table has to be told it may shrink. Without this the overflow-x on
   .table-wrap never gets the chance to do its job. */
.main-col, .workspace > * { min-width: 0; }

@media (max-width: 640px) {
  .hero { padding: 28px 0 18px; }
  .splitstrip { flex-direction: column; }
  .trendcol, .spark { display: none; }

  /* The search bar is a row on desktop; stacked it stops squeezing the input
     down to nothing. */
  .searchbar { flex-direction: column; align-items: stretch; }
  .searchbar > * { width: 100%; }

  /* Long single-word keywords (URLs, run-on brand terms) are the one thing that
     can still force a table wider than the phone. */
  #resultsTable td, #sprintTable td { overflow-wrap: anywhere; }

  /* Action rows wrap instead of overflowing. */
  .selbar, .sprint-head, .sprint-actions, .domain-tools, .gsc-line { flex-wrap: wrap; }
  .tabs { overflow-x: auto; }

  /* The header carries brand + Free pill + guide link + theme toggle, which is
     a few pixels too many at 360px (a very common Android width). Let it wrap
     and tighten the side padding rather than clipping anything. */
  .topbar { flex-wrap: wrap; row-gap: 8px; padding: 10px 14px; }
  .topbar-right { flex-wrap: wrap; }
}