/* Button dashboard. One stylesheet, no build step.
   Tokens first; the rest is layout for the six pages. */
:root {
  --ink: #14181F;
  --ink-2: #4A5361;
  --line: #D9DCE1;
  --line-soft: #ECEEF1;
  --line-strong: #8C95A3;
  --rule: #C5CAD3;
  --page: #F3F4F6;
  --surface: #FFFFFF;
  --surface-2: #F7F8FA;
  --accent: #1D4ED8;
  --accent-ink: #1639A6;
  --on-tint: #EEF2FD;
  --info-bg: #E8ECF7;
  --info-ink: #1E2F6B;
  --warn-bg: #FFF4E0;
  --warn-ink: #6B3A00;
  --warn-line: #C98A2B;
  --add-bg: #E6F0FF;
  --del-bg: #FFF1DC;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.45; }
a { color: var(--accent); }
a:hover { color: var(--accent-ink); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 28px; font-weight: 600; }
h2 { font-size: 20px; font-weight: 600; }
h3 { font-size: 17px; font-weight: 600; }
.h-section { font-size: 24px; }
.h-chart { font-size: 18px; }
strong, .strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mono { font-family: var(--mono); }
.muted { color: var(--ink-2); }
.muted strong { color: var(--ink); }
.small { font-size: 13px; }
.small-plus { font-size: 14px; }
.r { text-align: right; }
.wrap { overflow-wrap: anywhere; }
.grow { flex: 1 1 360px; }
.grow-1 { flex: 1 1 260px; }
.grow-3 { flex: 3 1 480px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --- header ----------------------------------------------------------- */
.top { background: var(--ink); color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 8px 24px; }
.brand { font-weight: 600; font-size: 17px; }
.views { display: flex; flex-wrap: wrap; gap: 4px; }
.views a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 6px; color: #E5E7EB; text-decoration: none; font-weight: 500; }
.views a:hover { color: #fff; background: #222938; }
.views a[aria-current="page"] { color: #fff; background: #2B3342; }
.views a:focus-visible, .top :focus-visible { outline-color: #fff; }
.context { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 13px; color: #D1D5DB; }

.tag { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.tag-info { background: var(--info-bg); color: var(--info-ink); }
.tag-warn { background: var(--warn-bg); color: var(--warn-ink); font-weight: 500; padding: 2px 8px; font-size: 13px; }

/* --- page layout ------------------------------------------------------ */
.page { max-width: 1200px; margin: 0 auto; padding: 24px; display: flex; flex-direction: column; gap: 28px; }
.head { display: flex; flex-direction: column; gap: 4px; }
.head-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.stack-lg { display: flex; flex-direction: column; gap: 18px; }
.stack-xl { display: flex; flex-direction: column; gap: 28px; }
.section-rule { border-top: 1px solid var(--rule); padding-top: 24px; }
.divided { border-top: 1px solid var(--line-soft); padding-top: 16px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 20px; }
.card-flush { padding: 0; }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.card-head > h2, .card-head > h3 { flex: 1 1 360px; }
/* Findings in priority order (inference/priority.py): a heading opens each kind, cards title in h4. */
.card-head > h4 { flex: 1 1 360px; margin: 0; font-size: 17px; font-weight: 600; }
.tier-head { margin-top: 8px; }
.tier-tag { border: 1px solid var(--line-strong); white-space: nowrap; }
.tier-act { background: var(--warn-bg); color: var(--warn-ink); border-color: transparent; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.cols > div, .finding-body > div { display: flex; flex-direction: column; gap: 4px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.links { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; }
.links > *, .action-link, .record-links a { display: inline-flex; align-items: center; min-height: 44px; }
.action-link { padding: 0 8px; font-size: 14px; }
.record-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }

/* --- tiles ------------------------------------------------------------ */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.tile-label, .tile-note { color: var(--ink-2); font-size: 13px; }
.tile-value { font-size: 30px; font-weight: 600; font-family: var(--mono); }
.tile-value-sm { font-size: 26px; }
.tile-link { border-width: 2px; padding: 14px 16px; color: inherit; text-decoration: none; }
.tile-link:hover { color: inherit; border-color: var(--line-strong); }
.tile-on, .tile-on:hover { border-color: var(--ink); }

/* --- buttons and forms ------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { color: var(--ink); border-color: var(--ink); }
.btn-primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.btn-primary:hover { border-color: var(--accent-ink); background: var(--accent-ink); color: #fff; }
.btn-on, .btn-on:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.btn-small { padding: 0 12px; }
.btn-mono { font-family: var(--mono); font-size: 13px; font-weight: 400; padding: 0 12px; }
.chips, .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lookup, .filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.filters .lookup { flex: 1 1 340px; flex-wrap: nowrap; }
.filters .field { flex: 1 1 auto; min-width: 0; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 13px; color: var(--ink-2); }
input[type="text"] { min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 6px; font: inherit; background: var(--surface); color: var(--ink); }
input.mono { font-family: var(--mono); }
input.cpc { width: 80px; }
.decided { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: var(--page); border-radius: 6px; padding: 8px 12px; }
.notice { background: var(--warn-bg); color: #4A2800; border: 1px solid var(--warn-line); border-radius: 8px; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.notice > span { flex: 1 1 420px; }

/* --- facts ------------------------------------------------------------ */
.facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 24px; }
.facts > div { display: flex; flex-direction: column; gap: 2px; }
.facts dt { color: var(--ink-2); font-size: 13px; }
.facts dd { margin: 0; font-family: var(--mono); overflow-wrap: anywhere; }
.facts dd.strong { font-weight: 500; }

/* --- tables ----------------------------------------------------------- */
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; position: relative; }
/* position: relative above and on .diff: the screen-reader-only labels inside a
   wide table are placed absolutely, and without it they escape the scrolling
   box and let a phone swipe the whole page sideways into blank space. */
.table-inner { border-radius: 6px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 12px 8px; text-align: left; vertical-align: top; }
th:first-child, td:first-child { padding-left: 16px; }
th:last-child, td:last-child { padding-right: 16px; }
thead th { color: var(--ink-2); font-size: 13px; font-weight: 500; border-bottom: 1px solid var(--line); white-space: nowrap; }
tbody tr { border-bottom: 1px solid var(--line-soft); }
tbody tr:last-child { border-bottom: none; }
tfoot th, tfoot td { border-top: 1px solid var(--line); font-weight: 600; }
tfoot td.muted { font-weight: 400; }
th.r, td.r { text-align: right; }
td.mono, tr.mono td { font-family: var(--mono); }
.row-on { background: var(--on-tint); }
.row-actions { display: flex; gap: 8px; justify-content: flex-end; }
table.history td { padding-top: 8px; padding-bottom: 8px; }

table.waste { min-width: 860px; }
table.waste td { vertical-align: middle; }
table.waste th:nth-child(4) { width: 30%; }
/* Measured: the no-intent bar takes half the old width, and intent gets a column per strength. */
table.waste-measured { min-width: 980px; }
table.waste-measured thead tr:first-child th:nth-child(4) { width: 15%; }
table.waste-measured thead th { vertical-align: bottom; }
table.waste-measured .intent-head { border-bottom: 1px solid var(--line); text-align: center; }
table.waste-measured td a:not([class^="i-"]) { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
table.waste-measured td a:hover, table.waste-measured td a:focus-visible { color: var(--accent); text-decoration-color: currentColor; }
table.waste-measured a.quiet-link { text-decoration: none; }
table.waste-measured td a[class^="i-"] { text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
table.ruleset { min-width: 980px; }
table.ruleset th:nth-child(2) { width: 36%; }
table.history { min-width: 1040px; }
table.history td { vertical-align: middle; }
table.reads { min-width: 520px; table-layout: fixed; }
table.reads td { overflow-wrap: anywhere; }
table.timeline { min-width: 760px; }
table.ips { min-width: 940px; }
table.ips td { vertical-align: middle; }
/* Proof's measured exclusion list: the opt-in types, the caveat and the Flagged hover note. */
.exclusion-caveat { border-left: 3px solid var(--ov-untrusted); }
.exclusion-types { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; }
.exclusion-types fieldset { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; border: 0; }
.exclusion-types legend { margin-bottom: 6px; font-weight: 600; }
.exclusion-types .check { display: inline-flex; align-items: center; gap: 6px; }
table.ips tr.is-listed td:first-child { box-shadow: inset 3px 0 var(--accent); }
.flag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ov-untrusted) 22%, transparent); color: var(--ink); font-size: 12px; cursor: help; }
.flag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.flag-tip { position: fixed; z-index: 50; width: 300px; max-width: calc(100vw - 32px); padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 12px; line-height: 1.45; box-shadow: 0 6px 20px rgb(0 0 0 / 12%); visibility: hidden; opacity: 0; transition: opacity 0.12s; }
.flag:hover + .flag-tip, .flag:focus + .flag-tip { visibility: visible; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .flag-tip { transition: none; } }
table.sensors, table.alerts { min-width: 680px; }
table.crawled { min-width: 820px; }
table.crawlers { min-width: 760px; }
table.crawlers td, table.ai-pages td { vertical-align: middle; }
table.crawlers th:nth-child(3) { width: 38%; }
table.ai-pages, table.referrals { min-width: 620px; }
table.ai-pages { table-layout: fixed; }
table.impostors { min-width: 560px; table-layout: fixed; }

/* --- bars ------------------------------------------------------------- */
.meter-cell, .day-bar { display: flex; align-items: center; gap: 8px; }
.meter { flex: 1; min-width: 40px; height: 10px; border-radius: 4px; display: block; }
.meter-track { fill: var(--line-soft); }
.meter-fill { fill: var(--accent); }
.meter-n { min-width: 52px; text-align: right; }
.day-bars { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.day-bar { gap: 12px; }
.day-name { width: 56px; }

.hourly { display: block; width: 100%; border-bottom: 1px solid var(--line-strong); }
.hourly-clicks { height: 170px; }
.hourly-goal { height: 110px; }
.hourly .col { fill: transparent; }
.hourly .col-on { fill: #E3E7EE; }
.hourly .col-bar { fill: var(--accent); }
.hourly .col-bar-on { fill: var(--ink); }
.hourly a:hover .col { fill: var(--line-soft); }
.hourly a:focus-visible .col { fill: var(--on-tint); stroke: var(--accent); stroke-width: 0.1; }
.hourly a:focus-visible { outline: none; }
.ticks { display: flex; font-size: 12px; color: var(--ink-2); }
.ticks span { flex: 1 1 0; min-width: 0; border-left: 1px solid var(--rule); padding-left: 4px; overflow: hidden; white-space: nowrap; }

/* --- findings --------------------------------------------------------- */
.finding { padding: 0; }
.finding > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 60px; padding: 12px 20px; cursor: pointer; list-style: none; border-radius: 8px; }
.finding > summary::-webkit-details-marker, .journey > summary::-webkit-details-marker { display: none; }
.finding-title { flex: 1 1 420px; font-size: 17px; font-weight: 600; }
.status { border: 1px solid var(--line-strong); border-radius: 4px; padding: 2px 8px; }
.toggle::after { content: "Show"; }
details[open] > summary .toggle::after { content: "Hide"; }
.finding-body { border-top: 1px solid var(--line-soft); padding: 20px; display: flex; flex-direction: column; gap: 18px; }

/* --- rules: diff ------------------------------------------------------ */
.diff-title { padding: 12px 16px; border-bottom: 1px solid var(--line); font-weight: 600; }
.diff { overflow-x: auto; font-family: var(--mono); font-size: 13px; padding: 8px 0; position: relative; }
.diff-line { display: flex; gap: 12px; padding: 2px 16px; white-space: pre; min-width: max-content; }
.diff-sign { width: 12px; font-weight: 500; flex: none; }
.diff-add { background: var(--add-bg); }
.diff-del { background: var(--del-bg); }
.diff-gap, .diff-note { color: var(--ink-2); }
.diff-head { font-family: var(--sans); font-weight: 600; padding-top: 10px; padding-bottom: 4px; }
.diff-head:first-child { padding-top: 2px; }
.diff-note { font-family: var(--sans); padding-top: 8px; }

/* --- traffic ---------------------------------------------------------- */
.pattern { padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.pattern > span { flex: 1 1 480px; }
.journeys { min-width: 1040px; font-size: 14px; }
.jrow { display: grid; grid-template-columns: 72px 140px 60px 70px 50px 1.5fr 1.3fr 1fr; gap: 16px; align-items: center; padding: 6px 16px; }
.jhead { padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 13px; font-weight: 500; }
.journey { border-bottom: 1px solid var(--line-soft); }
.journey:last-child { border-bottom: none; }
.journey > summary { cursor: pointer; list-style: none; }
.journey > summary:hover { background: var(--surface-2); }
.jbody { background: var(--surface-2); padding: 8px 16px 12px 104px; }
table.jpages { width: auto; font-size: 13px; }
table.jpages td { padding: 4px 16px 4px 0; }
table.jpages td:first-child { padding-left: 0; }
table.jpages tbody tr { border: none; }
.jbody .action-link { padding: 0; }
.empty { padding: 20px 16px; }
/* A section with nothing measured for the site (_macros.html, `empty`): a box of its own,
   as a section with data would have. */
p.empty { margin: 0; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: 8px; }
.table-wrap > p.empty { border: 0; }

@media (max-width: 640px) {
  .page { padding: 16px; gap: 24px; }
  .filters .lookup { flex-wrap: wrap; }
  .filters .lookup .field { flex-basis: 100%; }
  .filters .lookup input { width: 100%; }
  .page p .mono { overflow-wrap: anywhere; }
  .top { padding: 8px 16px; }
  .context { margin-left: 0; }
  .jbody { padding-left: 16px; }
}

/* Content-based view switch: keep links legible against the dark header. */
.top .mode-switch { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.top .mode-switch a, .top .mode-switch span { padding: 8px 10px; border-radius: 5px; font-size: 13px; }
.top .mode-switch a { color: #D5E3FF; text-decoration: none; }
.top .mode-switch a:hover { color: #FFFFFF; background: #2C3342; }
.top .mode-switch [aria-current="page"] { color: #FFFFFF; background: #2C3342; }

/* Operations uses the same visual language as Traffic workspace. */
:root {
  --ink: #0b1b3b; --ink-2: #475569;
  --page: #f7f5ef; --surface: #fff; --surface-2: #f7f5ef;
  --line: #eae7dd; --line-soft: #f0ede5; --line-strong: #7f8998;
  --accent: #2563eb; --accent-ink: #1d4ed8;
  --sans: Arial, sans-serif;
}
body { font-size: 14px; line-height: 1.5; }
h1, h2 { font-family: Georgia, serif; font-weight: 400; }
h1 { font-size: 34px; line-height: 1.2; }
h2 { font-size: 24px; }
.top { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); padding: 14px 20px; }
.brand { font: 26px Georgia, serif; letter-spacing: -1px; }
.brand-caret { color: var(--brand-caret, #ff7849); }
.context { color: var(--ink-2); }
.views a { color: var(--ink-2); font-weight: 400; border-radius: 0; }
.views a:hover { color: var(--ink); background: var(--page); }
.views a[aria-current="page"] { color: var(--ink); background: var(--page); box-shadow: inset 0 -2px var(--accent); }
.views a:focus-visible, .top :focus-visible { outline-color: var(--accent); }
.top .mode-switch a { color: var(--accent); }
.top .mode-switch a:hover { color: var(--accent-ink); background: var(--page); }
.top .mode-switch [aria-current="page"] { color: var(--ink); background: var(--page); box-shadow: inset 0 -2px var(--accent); }
.card, .tile { border-radius: 10px; }
.tile-value { font: 30px Georgia, serif; font-variant-numeric: tabular-nums; }
.btn-primary { background: var(--ink); border-color: var(--ink); }
.btn-primary:hover { background: #203353; border-color: #203353; }
@media (max-width: 640px) { h1 { font-size: 28px; } .top { padding: 12px; } }

/* Fixed Operations rail mirrors the Traffic workspace shell. */
.operations-shell {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh; height: 100dvh; overflow: hidden;
}
.operations-shell > .top { grid-column: 1 / -1; grid-row: 1; }
.operations-nav {
  grid-column: 1; grid-row: 2; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; flex-wrap: nowrap; gap: 8px;
  align-items: stretch; padding: 24px 10px; border-right: 1px solid var(--line);
}
.operations-nav small { font-size: 12px; color: var(--ink-2); padding: 0 2px; }
.operations-nav a { padding: 9px 6px; min-height: 40px; border-radius: 5px; font-size: 12px; color: var(--ink); }
.operations-nav a[aria-current="page"] { color: var(--accent); background: var(--surface); box-shadow: none; }
/* position: the page area is the containing block of what is positioned
   inside it, such as the visually hidden .sr labels. Without it they are
   placed against the window, which then scrolls under this fixed shell and
   cuts the bottom of the page off. */
.operations-shell > .page {
  position: relative;
  grid-column: 2; grid-row: 2; min-width: 0; min-height: 0;
  width: 100%; max-width: none; margin: 0; padding: 24px 18px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.operations-shell > .page > * { flex-shrink: 0; }
@media (max-width: 760px) { .operations-shell { grid-template-columns: 105px minmax(0, 1fr); } }
@media (max-width: 560px) {
  .operations-shell { grid-template-columns: 76px minmax(0, 1fr); }
  .operations-nav { padding: 12px 4px; gap: 6px; }
  .operations-nav a { font-size: 11px; }
  .operations-nav small { font-size: 10px; }
  .operations-shell > .page { padding: 12px 8px; }
}

/* Proof's fingerprint inspector: Explorer's workspace, a snapshot beside its Similar counts. */
.inspector-dialog { width: min(1100px, calc(100vw - 32px)); height: calc(100vh - 32px); max-height: calc(100vh - 32px); padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
.inspector-dialog::backdrop { background: rgba(20, 24, 31, 0.55); }
.inspector-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.inspector-bar h3 { margin: 0; }
.inspector-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(240px, 2fr); gap: 16px; align-items: start; }
.inspector-code { max-height: calc(100vh - 160px); overflow: auto; }
.inspector-right { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.similar-title { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.workspace-tabs { display: flex; gap: 6px; }
.workspace-tabs button { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.workspace-tabs button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #fff; }
.trend-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 140px; align-items: end; }
.trend-col { display: grid; grid-template-rows: auto 1fr auto; height: 100%; justify-items: center; gap: 4px; font-size: 11px; }
.trend-bar { align-self: end; width: 70%; border-radius: 4px 4px 0 0; background: var(--accent); }
.trend-n { font-family: var(--mono); }
.trend-day { color: var(--ink-2); }
.table-filter { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.filter-input { flex: 1 1 280px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 6px; font: 13px var(--mono); }
.filter-input[hidden] { display: none; }
@media (max-width: 760px) { .inspector-split { grid-template-columns: 1fr; } .inspector-right { position: static; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- palette (palette.css) ---------------------------------------------
   Colour carries meaning: trust groups, intent strengths and what a figure counts.
   The interactive accent is Overview's trusted blue. */
:root {
  --accent: #1e5eac;
  --accent-ink: #00438b;
  --on-tint: #e8f0fa;
}
.btn-primary { background: var(--accent); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn-on, .btn-on:hover { border-color: var(--accent); background: var(--accent); color: #fff; }
/* The current view: a thin bar in a lighter shade of the accent, no fill. */
.operations-nav a[aria-current="page"] { color: var(--accent-ink); background: none; border-radius: 0; box-shadow: inset 2px 0 #3b79ca; font-weight: 500; }

/* A tile's top edge is the colour of what it counts. */
.tile[class*="tone-"] { border-top: 4px solid var(--tone); }
.tone-clicks { --tone: var(--ov-c1); }
.tone-strong { --tone: var(--intent-strong); }
.tone-rule { --tone: var(--ov-untrusted); }
.tone-withheld { --tone: var(--ov-strict); }
.tone-peak { --tone: var(--ov-c5); }
.tone-events { --tone: var(--ov-c1); }
.tone-crawl { --tone: var(--ov-partial); }
.tone-version { --tone: var(--ov-c4); }

/* Charts: ad clicks in the first chart colour, conversions in the strong-intent green,
   waste in the second (orange-red) chart colour. */
.meter-fill { fill: var(--ov-c1); }
.waste .meter-fill { fill: var(--ov-c2); }
.hourly .col-bar { fill: var(--ov-c1); }
.hourly-goal .col-bar { fill: var(--intent-strong); }
.hourly .col-bar-on { fill: var(--ink); }
.trend-bar { background: var(--ov-c1); }

/* Trust and intent in tables read as chips; keep them on one line. */
td .chip { vertical-align: middle; }
.facts dd .chip { font-family: var(--sans); }

/* Inspect: a quiet button that opens a load's deep look. */
.inspect-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 999px; background: var(--surface); color: var(--accent-ink); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.inspect-btn:hover { border-color: var(--accent); background: var(--on-tint); color: var(--accent-ink); }
.inspect-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.inspect-icon { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* Related values in the inspector: ranked, each with its overlap as a bar. */
.related-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.related-row { display: flex; flex-direction: column; gap: 5px; }
.related-head { font-size: 13px; overflow-wrap: anywhere; }
.related-field { color: var(--ink-2); }
.related-value { color: var(--ink); font-weight: 600; }
.related-meter { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 12%, transparent); overflow: hidden; }
.related-fill { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.related-facts { margin: 0; color: var(--ink-2); font-size: 12px; }
.related-facts strong { color: var(--ink); }

/* Journey types on Traffic: one row per type, its share as a bar in its trust colour. */
.types { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.type-row { display: grid; grid-template-columns: minmax(220px, 3fr) minmax(120px, 3fr) 80px 110px; gap: 16px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); text-decoration: none; }
.type-row:hover { border-color: var(--accent); }
.type-row.is-on { border-color: var(--accent); box-shadow: inset 3px 0 #3b79ca; }
.type-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.type-name { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.type-bar { display: block; width: 100%; height: 8px; }
.type-track { fill: color-mix(in srgb, var(--ink) 7%, transparent); }
.type-fill.fill-trusted { fill: var(--state-trusted); }
.type-fill.fill-unresolved { fill: var(--state-unresolved); }
.type-fill.fill-untrusted { fill: var(--state-untrusted); }
.type-count { text-align: right; font-variant-numeric: tabular-nums; }
.type-pattern { flex-basis: 100%; font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
.type-mix { display: block; width: 100%; height: 8px; border-radius: 2px; }
.mix-strong { fill: var(--intent-strong); }
.mix-completed { fill: var(--intent-completed); }
.mix-payment { fill: var(--intent-payment); }
.mix-checkout { fill: var(--intent-checkout); }
/* Traffic's intent and page-category filters: collapsed until one is used. */
.intent-filters { margin: 4px 0 8px; }
.intent-filters summary { cursor: pointer; font-size: 14px; }
.intent-filters .chips { margin: 8px 0; }
.mix-medium { fill: var(--intent-medium); }
.mix-low { fill: var(--intent-low); }
.mix-none { fill: var(--intent-none); }
.type-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
@media (max-width: 760px) { .type-row { grid-template-columns: 1fr 80px auto; } .type-bar { grid-column: 1 / -1; grid-row: 2; } }

/* How these journeys were made: one row per step, each bar to scale. */
.lineage { display: flex; flex-direction: column; margin: 0; padding: 6px 20px; list-style: none; }
.lin-step { display: grid; grid-template-columns: 26px minmax(170px, 1fr) minmax(0, 3fr) 190px; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
.lin-step:first-child { border-top: 0; }
.lin-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--on-tint); color: var(--accent-ink); font-size: 12px; font-weight: 700; }
.lin-label { display: flex; flex-direction: column; gap: 2px; }
.lin-chart { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.lin-bar { display: block; width: 100%; height: 20px; border-radius: 4px; }
.lin-bar rect { stroke: #fff; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.lin-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--ink-2); font-size: 12px; }
.lin-key { display: inline-flex; align-items: center; gap: 5px; }
.lin-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.lin-rule { flex-basis: 100%; }
.lin-links { display: flex; flex-direction: column; gap: 4px; font-size: 13px; padding-top: 2px; }
.lin-track { fill: color-mix(in srgb, var(--ink) 5%, transparent); stroke: none !important; }
.lin-kept { fill: var(--ov-c1); background: var(--ov-c1); }
.lin-out { fill: #d4d1ca; background: #d4d1ca; }
.lin-out-2 { fill: #b5b2ab; background: #b5b2ab; }
.lin-trusted { fill: var(--state-trusted); background: var(--state-trusted); }
.lin-unresolved { fill: var(--state-unresolved); background: var(--state-unresolved); }
.lin-untrusted { fill: var(--state-untrusted); background: var(--state-untrusted); }
.lin-other { fill: #e3e0d9; background: #e3e0d9; }
@media (max-width: 760px) { .lin-step { grid-template-columns: 26px 1fr; } .lin-chart, .lin-links { grid-column: 2; } }
.automation-hit { color: var(--ink-untrusted, #8d5403); }
/* Unusual ad clicks (Proof's outlier page and the Findings card): the inspector's flag marks, darker on the light page. */
.outlier-card { margin: 16px 0; }
.outlier-card h2 { margin-top: 0; }
.outlier-table .json-flag-unique { --flag: #8a2fb0; }
.outlier-table .json-flag-rare { --flag: #8a5a00; }
.outlier-field { display: inline-block; margin: 2px 4px 2px 0; cursor: default; overflow-wrap: anywhere; }
.outlier-divider th { padding-top: 16px; text-align: left; color: var(--ink-2, #5b6472); font-weight: 600; }
.journey-row > td { padding-top: 0; border-top: 0; }
.journey-open > summary { cursor: pointer; color: var(--blue, #2f6fd6); font-size: 13px; }
.journey-open[open] { padding: 4px 0 12px; }
.journey-loads { font-size: 13px; }
.rare-path { margin: 8px 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.rare-path > summary { cursor: pointer; }
.rare-value { margin: 12px 0 4px; }
.rare-path .json-flag-unique { --flag: #8a2fb0; }
.rare-path .json-flag-rare { --flag: #8a5a00; }
.flag-more > summary { cursor: pointer; width: max-content; margin-top: 2px; color: var(--blue, #2f6fd6); font-size: 12px; }
.flag-more[open] > summary { margin-bottom: 2px; }
.outlier-table td { vertical-align: top; }

/* Findings: compact overview with detail and proof inspection on demand. */
.findings-table { min-width: 850px; }
.findings-table th[scope="row"] { min-width: 180px; font-weight: 600; }
/* Scoped to the findings table's own cells, so nested journey tables keep Traffic's look. */
.findings-table > tbody > tr > td:nth-child(2) { max-width: 560px; }
.findings-table .finding-detail { width: 100%; max-width: none; }
.findings-table .finding-detail > summary { cursor: pointer; white-space: nowrap; }
.findings-table .finding-detail > div { width: 100%; padding: 12px 0; }
.findings-table .finding-detail > div > p { margin: 4px 0 12px; }

.findings-table .finding-evidence > td { background: var(--surface); padding: 0 16px 8px; }
.findings-table .finding-evidence table:not(.jpages) { width: 100%; }

/* Study example journeys: Traffic's journey rows (.journeys, .jrow) with seven columns. */
.journeys-study { min-width: 760px; }
.journeys-study .jrow { grid-template-columns: 72px 140px 60px 70px 50px 1fr 1.3fr; }

/* Journal: a sticky side panel (search, calendar, archive) beside one month of weeks. */
.journal { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; }
.journal-side {
  position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px; padding: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}
.journal-search { display: flex; gap: 6px; }
.journal-search .input { min-height: 36px; font-size: 13px; min-width: 0; }
.journal-search .btn { min-height: 36px; }
.journal-cal { display: flex; flex-direction: column; gap: 2px; }
.journal-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.journal-cal-head strong { font-size: 14px; }
.journal-cal-head a, .journal-cal-off { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; font-size: 18px; line-height: 1; text-decoration: none; }
.journal-cal-head a:hover { background: var(--on-tint); }
.journal-cal-off { color: var(--line); }
.journal-cal-row { display: grid; grid-template-columns: repeat(7, 1fr); border-radius: 6px; font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; }
.journal-cal-row span { padding: 5px 0; }
.journal-cal-dow { color: var(--ink-2); font-weight: 600; font-size: 11px; }
.journal-cal-out { color: #a6adb8; }
.journal-cal-week { background: var(--on-tint); color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.journal-cal-week:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-ink); }
.journal-cal-other { background: var(--surface-2); color: var(--accent); font-weight: 500; }
.journal-cal-week .journal-cal-out { color: color-mix(in srgb, var(--accent-ink) 55%, transparent); }
.journal-side-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.journal-side-note { font-size: 12px; color: var(--ink-2); margin-top: 6px; }
.journal-archive details > summary { cursor: pointer; padding: 4px 0; font-size: 14px; font-weight: 600; }
.journal-archive ul { list-style: none; margin: 2px 0 6px; padding: 0 0 0 12px; }
.journal-archive li a { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: 5px; font-size: 13px; color: var(--ink); text-decoration: none; }
.journal-archive li a:hover { background: var(--surface-2); }
.journal-archive li a[aria-current="page"] { background: var(--on-tint); color: var(--accent-ink); font-weight: 600; }
.journal-archive small { color: var(--ink-2); font-weight: 400; }
.journal-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; max-width: 860px; }
.journal-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.journal-head h1 { font: 400 30px/1.2 var(--serif, Georgia, serif); }
.journal-month-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.journal-month-head h2 { font: 400 24px/1.25 var(--serif, Georgia, serif); }
.journal-group { margin-top: 10px; font-size: 15px; }
.journal-entry { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 16px; }
.journal-entry:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--on-tint); }
.journal-entry-title { font-size: 16px; }
.journal-entry-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: 13px; color: var(--ink-2); }
.journal-table-wrap { overflow-x: auto; }
.journal-table { width: 100%; max-width: 520px; border-collapse: collapse; }
.journal-table th, .journal-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; font-weight: normal; }
.journal-table thead th, .journal-table tfoot th, .journal-table tfoot td { font-weight: 600; }
.journal-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.journal-findings { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 8px; background: var(--surface-2); font-size: 14px; }
.journal-findings .journal-side-label { margin-bottom: 0; }
.journal-findings > div { display: flex; flex-direction: column; gap: 6px; }
.journal-findings-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.journal-findings-link { font-size: 13px; }
.journal-later { margin: 0; font-size: 13px; font-weight: 600; }
@media (max-width: 900px) {
  .journal { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .journal-side { position: static; max-height: none; }
}