/* Shared theme for the standalone audit pages. The header, sign-in and keys dialog are in moz-shell.css. */
:root {
  --bg: #101511;
  --bg-panel: #161c17;
  --bg-panel-2: #131914;
  --bg-card: #181f19;
  --bg-input: #121713;
  --border: #29322a;
  --border-soft: #202821;
  --text: #e6ebe4;
  --text-2: #c4ccc2;       /* brightened one notch for legibility */
  --text-muted: #919d92;   /* brightened one notch */
  --accent: #8fc49d;       /* reserved: primary action, active tab, winners, success */
  --accent-dim: #1f3326;
  --teal: #2dd4bf;
  --warn: #e0a23b;         /* muted amber — caution / poor metrics */
  --b1: #34d399;  /* 1-10 */
  --b2: #2dd4bf;  /* 11-20 */
  --b3: #5b8def;  /* 21-30 */
  --b4: #a78bfa;  /* 31-40 */
  --b5: #4b5563;  /* 41-50 */
  --border-hover: #3a463b;
  --on-accent: #0f1f15;    /* text on accent buttons and marks */
  --danger: #fca5a5;
  --danger-bg: rgba(248,113,113,.1);
  --danger-border: rgba(248,113,113,.35);
  --danger-strong: #f87171;
  --accent-border: rgba(143,196,157,.4);
  --accent-wash: rgba(143,196,157,.06);
  --row-hover: rgba(255,255,255,.015);
  --scroll-thumb: #2f3a30;
  --scroll-thumb-hover: #3d4a3e;
  --backdrop: rgba(4, 7, 5, .6);
  --border-control: #677568;
  --accent-hover: #a8d5b4;
  --warn-bg: rgba(224,162,59,.1);
  --warn-border: rgba(224,162,59,.35);
  --shadow-pop: 0 8px 24px rgba(0,0,0,.4);
  color-scheme: dark;
  /* Shape: panels and cards, controls, tags. */
  --radius: 8px;      /* panels */
  --radius-md: 6px;   /* buttons, inputs, selects */
  --radius-sm: 4px;   /* tags and swatches */
  --radius-lg: 10px;  /* dialogs */
  --shell-top: 56px;  /* height of the sticky workspace header (moz-shell.css) */
  /* Inter and JetBrains Mono are self-hosted (@font-face in moz-shell.css). Mono is only for full URLs,
     code and JSON; typed input, domains and numbers are Inter (tabular figures in tables). */
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Code", monospace;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* Light theme: same components, light tokens. Chosen with the header toggle (moz-theme). */
:root[data-theme="light"] {
  /* Calm, warm-neutral workspace with one forest-green accent. Text and control colours
     are measured for WCAG AA on every light surface (ratios against #fff unless noted). */
  --bg: #f8faf7;
  --bg-panel: #ffffff;
  --bg-panel-2: #f1f4ef;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --border: #dde3d9;          /* decorative dividers and panel edges */
  --border-soft: #e9ede6;     /* table row rules */
  --border-hover: #aeb8ab;
  --border-control: #8a9489;  /* input and select outlines, 3.1:1 */
  --text: #202820;            /* 15.2:1 */
  --text-2: #3f4a41;          /* 9.4:1 */
  --text-muted: #5c685e;      /* 5.9:1, 5.3:1 on --bg-panel-2 */
  --accent: #2f543b;          /* 8.6:1; brand interaction and the selected subject */
  --accent-hover: #254530;
  --accent-dim: #e7eee3;      /* selected fill; accent text on it is 7.2:1 */
  --teal: #0f766e;
  --warn: #805b18;            /* 6.1:1; 5.6:1 on --warn-bg */
  --warn-bg: #faf4e8;
  --warn-border: #eadfc8;
  --on-accent: #ffffff;
  --danger: #b23b35;          /* 5.9:1; 5.2:1 on --danger-bg */
  --danger-bg: #fbefec;
  --danger-border: #ecc5bf;
  --danger-strong: #c8453e;
  --accent-border: rgba(47,84,59,.4);
  --accent-wash: rgba(47,84,59,.05);
  --row-hover: rgba(32,40,32,.025);
  --scroll-thumb: #c9d1c5;
  --scroll-thumb-hover: #aeb8ab;
  --backdrop: rgba(32,40,32,.3);
  --shadow-pop: 0 8px 24px rgba(32,40,32,.12);
  color-scheme: light;
}
* { box-sizing: border-box; }
b, strong { font-weight: 600; }
html, body { margin: 0; padding: 0; }
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 21px;
  font-feature-settings: "cv11";
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.main { min-width: 0; padding: 28px 32px 64px; max-width: var(--page-max, 1440px); margin: 0 auto; }
@media (max-width: 767px) { .main { padding: 20px 16px 48px; } }

/* ---- mode tabs ---- */
.mode-tabs { display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
.mode-tab { text-decoration: none; color: var(--text-muted); font-size: 13px; font-weight: 500;
  padding: 10px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s; }
.mode-tab:hover { color: var(--text-2); }
.mode-tab.active { color: var(--text); border-bottom-color: var(--accent); }

/* ---- header ---- */
.pg-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 24px; margin-bottom: 24px; }
/* The title block takes the room; the actions wrap under it when the content area is narrow. */
.pg-head > div:first-child { flex: 1 1 420px; min-width: 0; }
.pg-head h1 { font-size: 28px; line-height: 34px; font-weight: 600; margin: 0 0 4px; letter-spacing: -.01em; }
.pg-head p { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 21px; max-width: 75ch; }
@media (max-width: 767px) { .pg-head h1 { font-size: 24px; line-height: 30px; } .pg-head > div:first-child { flex-basis: 100%; } }
.head-right { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.head-right .last-run { margin-right: 8px; }
@media (max-width: 1199px) { .head-right { justify-content: flex-start; } }
.last-run { color: var(--text-muted); font-size: 12px; display: flex; align-items: center; gap: 7px; }
.last-run svg { width: 15px; height: 15px; opacity: .8; }

.btn {
  font-family: var(--sans); font-size: 13px; font-weight: 500; line-height: 18px; border-radius: var(--radius-md);
  min-height: 36px; padding: 8px 14px; cursor: pointer; border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: background-color .14s, border-color .14s, color .14s;
}
.btn:hover { border-color: var(--border-hover); background: var(--bg-panel-2); }
:root[data-theme="light"] .btn { border-color: #cbd3c7; }
:root[data-theme="light"] .btn:hover { border-color: var(--border-hover); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; }
.btn-accent, :root[data-theme="light"] .btn-accent { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-accent:hover, :root[data-theme="light"] .btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
:root:not([data-theme="light"]) .btn-accent:hover { filter: brightness(1.08); }
.btn-sm { min-height: 30px; padding: 5px 10px; font-size: 13px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation-duration: .01ms !important; } }

/* ---- panels ---- */
.panel { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.panel-lbl { font-size: 13px; line-height: 20px; font-weight: 500; letter-spacing: 0; color: var(--text-2); margin-bottom: 6px; }

/* ---- inputs row ---- */
.inputs-grid { display: grid; grid-template-columns: minmax(220px, 280px) 1fr auto; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .inputs-grid { grid-template-columns: 1fr; } }

.field {
  display: flex; align-items: center; gap: 9px; background: var(--bg-input);
  border: 1px solid var(--border-control, var(--border)); border-radius: var(--radius-md); padding: 7px 12px; min-height: 36px;
}
.field:focus-within { border-color: var(--accent); }
.field .gl { color: var(--text-muted); display: flex; }
.field .gl svg { width: 16px; height: 16px; }
.field input { background: none; border: none; outline: none; color: var(--text); font-family: var(--sans); font-size: 13px; line-height: 20px; width: 100%; }
.field input::placeholder { color: var(--text-muted); }
.field .ok { color: var(--accent); display: none; }
.field.valid .ok { display: flex; }
.field .ok svg { width: 16px; height: 16px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 6px 10px 6px 8px; font-family: var(--sans); font-size: 12px;
}
.chip .fav { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; }
.chip .x { color: var(--text-muted); cursor: pointer; line-height: 1; font-size: 15px; padding: 0 2px; }
.chip .x:hover { color: var(--danger-strong); }
.chip-add { background: var(--bg-input); border: 1px dashed var(--border); }
.chip-add input { background: none; border: none; outline: none; color: var(--text); font-family: var(--sans); font-size: 12px; width: 150px; }
.chip-add input::placeholder { color: var(--text-muted); }

.controls-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 14px; }
.sel-wrap { display: flex; align-items: center; gap: 7px; }
.sel-wrap label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
select {
  background: var(--bg-input); color: var(--text); border: 1px solid var(--border-control, var(--border)); border-radius: var(--radius-md);
  padding: 6px 10px; font-family: var(--sans); font-size: 13px; line-height: 18px; outline: none; cursor: pointer;
}
select:focus { border-color: var(--accent); }

.err { background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger);
  border-radius: var(--radius-md); padding: 10px 14px; font-size: 13px; margin-bottom: 16px; display: none; }

/* ---- analyzed strip ---- */
.analyzed { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.analyzed .count { font-size: 15px; font-weight: 600; margin-right: 6px; }
.dom-pill { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-family: var(--sans); font-size: 12px; }
.dom-pill .fav { width: 18px; height: 18px; border-radius: 4px; }
.dom-pill .you { font-family: var(--sans); font-size: 10px; font-weight: 600; color: var(--accent);
  background: var(--accent-dim); border-radius: 4px; padding: 1px 6px; letter-spacing: .02em; }

/* ---- winner cards ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 18px; }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }
.card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; position: relative; }
/* subtle: neutral border for all cards; teal reserved for the trophy + winning value */
.card.lead { border-color: var(--border); }
.card .ctop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.card .clbl { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--text-muted); }
.card .trophy { color: var(--text-muted); }
.card.lead .trophy { color: var(--accent); }
.card .trophy svg { width: 15px; height: 15px; }
.card .winner { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.card .winner .fav { width: 18px; height: 18px; border-radius: 4px; }
.card .winner .name { font-family: var(--sans); font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .val { font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 28px; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.card.lead .val { color: var(--accent); }
.card .cap { font-size: 12px; line-height: 18px; color: var(--text-muted); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Summary strip: KPIs in one bordered row with dividers instead of separate cards. */
.cards.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; margin-bottom: 20px;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cards.strip > .card { border: 0; border-radius: 0; padding: 14px 20px; background: transparent; box-shadow: none; }
.cards.strip > .card + .card { border-left: 1px solid var(--border); }
.cards.strip .ctop { margin-bottom: 2px; }
@media (max-width: 760px) { .cards.strip > .card + .card { border-left: 0; border-top: 1px solid var(--border); } }

/* Setup summary: what a tool ran, in one row, once its inputs fold away (shell/setup-summary.js). */
.setup-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin: 0 0 20px; padding: 12px 16px;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); }
.setup-sum-items { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; flex: 1 1 360px; min-width: 0; }
.setup-sum-item { display: grid; gap: 0; min-width: 0; max-width: 100%; }
.setup-sum-item dt { font-size: 12px; line-height: 18px; color: var(--text-muted); }
.setup-sum-item dd { margin: 0; font-size: 14px; line-height: 21px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.setup-sum-edit { margin-left: auto; }
form.setup-open, .panel.setup-open { margin-top: -8px; }

/* Segmented control: one choice of a few, e.g. which metric a chart compares. */
.seg { display: inline-flex; flex-wrap: wrap; padding: 2px; background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.seg button { min-height: 30px; padding: 0 12px; border: 0; border-radius: 4px; background: transparent; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--text-muted); cursor: pointer; }
.seg button:hover { color: var(--text); }
.seg button.on, .seg button[aria-pressed="true"] { background: var(--bg-panel); color: var(--text); box-shadow: 0 0 0 1px var(--border); }

/* Section heading row: title, a short note, and controls pushed right. */
.sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 28px 0 12px; }
.sec-head h2 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.sec-head .sec-note { font-size: 12px; line-height: 18px; color: var(--text-muted); }
.sec-head .sec-end { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.you-tag { font-size: 11px; line-height: 16px; font-weight: 600; color: var(--accent); background: var(--accent-dim); border-radius: 4px; padding: 0 5px; }

/* ---- comparison table ---- */
.tbl-wrap { overflow-x: auto; }
table.cmp { width: 100%; border-collapse: collapse; font-size: 13px; }
.cmp th { text-align: right; height: 36px; padding: 8px 12px; color: var(--text-muted); font-weight: 500; font-size: 12px; line-height: 18px;
  background: var(--bg-panel-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.cmp th.l, .cmp td.l { text-align: left; }
.cmp td { text-align: right; padding: 12px 12px; line-height: 20px; border-bottom: 1px solid var(--border-soft); font-variant-numeric: tabular-nums; }
.cmp th:first-child, .cmp td:first-child { padding-left: 16px; }
.cmp th:last-child, .cmp td:last-child { padding-right: 16px; }
.cmp tr:last-child td { border-bottom: none; }
.cmp tr:hover td { background: var(--row-hover); }
/* A table cell, not flex, so the row's bottom border runs the full width. */
.cmp td.dom { font-family: var(--sans); white-space: nowrap; }
.cmp td.dom .fav { width: 18px; height: 18px; border-radius: 4px; vertical-align: middle; margin-right: 10px; }
.cmp td.dom > * { vertical-align: middle; }
.cmp .best { color: var(--accent); font-weight: 600; }
.cmp .best::before { content: "●"; font-size: 8px; vertical-align: middle; margin-right: 6px; }
.cmp .warn { color: var(--warn); }
.cmp .na { color: var(--text-muted); }

.info-i { display: inline-flex; width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--text-muted);
  color: var(--text-muted); font-size: 10px; align-items: center; justify-content: center; margin-left: 5px; cursor: help; vertical-align: middle; }

/* ---- keyword rankings ---- */
.kw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.kw-head .desc { color: var(--text-muted); font-size: 12px; max-width: 260px; margin-top: 8px; }
.legend { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.legend .item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); }
.legend .sw { width: 11px; height: 11px; border-radius: 3px; }
.kw-row { display: grid; grid-template-columns: 168px 1fr 84px; gap: 16px; align-items: center; padding: 7px 0; }
.kw-row + .kw-row { border-top: 1px solid var(--border-soft); }
.kw-row .knm { font-family: var(--sans); font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-bar { display: flex; height: 24px; border-radius: 6px; overflow: hidden; background: var(--bg-input); }
.kw-seg { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;
  color: rgba(0,0,0,.72); min-width: 0; overflow: hidden; white-space: nowrap; transition: width .5s ease; }
.kw-seg.b5 { color: rgba(255,255,255,.85); }
.kw-total { text-align: right; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- top keywords ---- */
.tk-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tk-tab { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 5px 10px; font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--text-2); cursor: pointer; transition: .15s; }
.tk-tab:hover { border-color: var(--border-hover); }
.tk-tab.active { border-color: var(--accent); background: var(--accent-dim); color: var(--text); }
.tk-tab .fav { width: 16px; height: 16px; border-radius: 4px; }
.tk-tab .cnt { color: var(--text-muted); font-size: 11px; }

/* View tabs: a tool's report views as one bordered button group (like Ahrefs' Mentions / Citations switch),
   so they read as the main way around the report. Counts sit in a small pill. */
.view-tabs { display: flex; flex-wrap: nowrap; gap: 0; width: max-content; max-width: 100%; margin: 0 0 20px; padding: 0;
  border: 1px solid var(--border-control); border-radius: var(--radius-md); background: var(--bg-panel); overflow-x: auto; scrollbar-width: none; }
.view-tabs::-webkit-scrollbar { display: none; }
.view-tabs > .tk-tab, .view-tabs > button, .view-tabs > a { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; margin: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--text-2);
  font-family: var(--sans); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color .14s, color .14s; }
.view-tabs > * + * { border-left: 1px solid var(--border) !important; }
.view-tabs > .tk-tab:hover, .view-tabs > button:hover, .view-tabs > a:hover { color: var(--text); background: var(--bg-panel-2); }
.view-tabs > .active, .view-tabs > [aria-current="page"], .view-tabs > [aria-current="true"], .view-tabs > [aria-selected="true"] { color: var(--accent); font-weight: 600; background: var(--accent-dim); box-shadow: inset 0 -2px 0 var(--accent); }
.view-tabs > .active:hover, .view-tabs > [aria-current="true"]:hover { background: var(--accent-dim); }
.view-tabs .cnt, .view-tabs .av-tab-n { font-size: 12px; font-weight: 600; line-height: 18px; color: var(--text-muted); background: var(--bg-panel-2); border-radius: 999px; padding: 0 7px; margin: 0; }
.view-tabs > .active .cnt, .view-tabs > .active .av-tab-n, .view-tabs > [aria-selected="true"] .av-tab-n { color: var(--accent); background: var(--bg-panel); }
@media (max-width: 767px) { .view-tabs { width: 100%; } .view-tabs > .tk-tab, .view-tabs > button, .view-tabs > a { padding: 0 12px; } }

.tk-table td.kwd { font-family: var(--sans); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-table td.page { font-family: var(--mono); font-size: 12px; max-width: 360px; }
.tk-table td.page a { color: var(--text-muted); text-decoration: none; }
.tk-table td.page a:hover { color: var(--accent); }
.tk-rank { display: inline-block; min-width: 24px; text-align: center; border-radius: var(--radius-sm); padding: 0 7px; font-size: 12px; font-weight: 600;
  background: var(--accent-dim); color: var(--accent); }

.empty { color: var(--text-muted); font-size: 13px; text-align: center; padding: 26px 0; }
.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor;
  border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
[hidden] { display: none !important; }

/* ---- small shared helpers ---- */
.muted { color: var(--text-muted); font-size: 13px; margin: 0 0 12px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.row.end { justify-content: flex-end; }
.link { background: none; border: none; color: var(--text-muted); text-decoration: underline; cursor: pointer; font-size: 12px; padding: 0; font-family: var(--sans); }
.link:hover { color: var(--accent); }

/* domain/page audit: where the Moz key comes from */
.key-source { margin: 0; color: var(--text-2); font-size: 13px; align-self: center; }
.field[hidden] { display: none; }

/* Search intent identity colours, one set for every tool: informational green, navigational blue,
   commercial yellow, transactional purple. Spaced in lightness (yellow lightest, purple darkest; the
   blue sits well above the purple) so the set stays apart for colour-blind readers. They are marks only
   (dots, tinted fills, bar segments) and always sit beside their label; never a text colour, so they
   don't read as accent or warn. */
:root {
  --intent-informational: #5cb83e;
  --intent-commercial: #f7d154;
  --intent-transactional: #7f63e6;
  --intent-navigational: #74c4f7;
}
:root[data-theme="light"] {
  --intent-informational: #3f9a2e;
  --intent-commercial: #f2c230;
  --intent-transactional: #4c2db0;
  --intent-navigational: #3a9be6;
}
.intent-pill {
  --ip: var(--text-muted);
  display: inline-flex; align-items: center; gap: 6px; padding: 0 8px 0 6px; border-radius: 999px; font-size: 12px; line-height: 18px; font-weight: 500; white-space: nowrap;
  color: var(--text); background: color-mix(in srgb, var(--ip) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ip) 40%, transparent);
}
.intent-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ip); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ip) 70%, var(--text)); }
.intent-pill.informational { --ip: var(--intent-informational); }
.intent-pill.commercial { --ip: var(--intent-commercial); }
.intent-pill.transactional { --ip: var(--intent-transactional); }
.intent-pill.navigational { --ip: var(--intent-navigational); }

/* Domain and Page Audit: a lead sentence, then the Comparison / Top keywords views. */
.da-lead { margin: 0 0 16px; max-width: 90ch; font-size: 14px; line-height: 22px; color: var(--text-2); }
.da-lead b { color: var(--text); font-weight: 600; }
[data-da-panel] > .sec-head:first-child { margin-top: 4px; }
.da-tk-seg { margin: 0 0 12px; }
.da-tk-seg .tk-tab { border: 0; border-radius: 4px; background: transparent; box-shadow: none; min-height: 30px; padding: 0 12px; font-size: 13px; color: var(--text-muted); }
.da-tk-seg .tk-tab.on { background: var(--bg-panel); color: var(--text); box-shadow: 0 0 0 1px var(--border); }
.sec-head .legend { gap: 6px 14px; }