/* Themes. Dark is the default everywhere. The viewer's switch sets data-mr-theme on <html>,
   and the light tokens key off that attribute only, so neither the device setting
   (prefers-color-scheme) nor a host-stamped data-theme decides the theme.
   Both blocks define the same tokens; keep them in step. */
:root {
  color-scheme: dark;
  --page: #0d0d0d;
  --surface: #1a1a19;
  --surface-2: #232321;
  --ink: #ffffff;
  --ink-2: #c3c2b7;
  --muted: #95938c;
  --grid: #2c2c2a;
  --axis: #383835;
  --border: rgba(255, 255, 255, 0.10);
  --link: #6aa6ee;
  --you: #3987e5;
  --you-strong: #2a6fc4;
  --you-wash: rgba(57, 135, 229, 0.14);
  --others: #77756f;
  --range: #383835;
  --good: #0ca30c;
  --good-text: #0ca30c;
  --warning: #fab219;
  --warning-edge: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --critical-text: #e66767;
  --action: #ffad42;
  --action-hi: #ffc06b;
  --action-lo: #e8931e;
  --action-ink: #0b1130;
  --action-edge: #ffad42;
  --logo-light: #ffad42;
  --logo-ring: .5;
  --logo-beam: .22;
  --radius: 10px;
  --shadow: none;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
:root[data-mr-theme="light"] {
  color-scheme: light;
  --page: #f7f6f2;
  --surface: #fdfdfc;
  --surface-2: #f1f0eb;
  --ink: #0b0b0b;
  --ink-2: #4d4c49;
  --muted: #6b6964;
  --grid: #e3e2db;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --link: #1c5cab;
  --you: #2a78d6;
  --you-strong: #1f63b8;
  --you-wash: rgba(42, 120, 214, 0.10);
  --others: #8b8983;
  --range: #e3e2db;
  --good: #0ca30c;
  --good-text: #006300;
  --warning: #fab219;
  --warning-edge: #9a6a00;
  --serious: #ec835a;
  --critical: #d03b3b;
  --critical-text: #b42f2f;
  --action: #ffad42;
  --action-hi: #ffc06b;
  --action-lo: #e8931e;
  --action-ink: #0b1130;
  --action-edge: #9a6a00;
  --logo-light: #c77700;
  --logo-ring: .6;
  --logo-beam: .4;
  --shadow: 0 1px 2px rgba(11, 11, 11, 0.05);
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}
a { color: var(--link); text-underline-offset: 2px; }
h1, h2, h3 { line-height: 1.25; margin: 0; }
h2 { font-size: 18px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }
p { margin: 0; }
ul { margin: 0; padding-left: 18px; }
li + li { margin-top: 4px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
main { --mr-clear: calc(env(safe-area-inset-top, 0px) + 73px); }
main section, main a, main summary, main input, main [tabindex], main button { scroll-margin-top: var(--mr-clear); }

/* ---- top bar ---- */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  background: color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar .wrap { display: flex; align-items: center; gap: 12px; height: 56px; }
@font-face { font-family: "Archivo"; src: url("/static/fonts/archivo-v2.woff2") format("woff2"); font-weight: 600 800; font-stretch: 100% 125%; font-display: swap; unicode-range: U+0020-007E,U+00A0-00FF,U+2010-2027,U+2030-203A,U+2212,U+20AC,U+2122,U+2191,U+2193; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); font-weight: 600 800; size-adjust: 120.7%; ascent-override: 72.9%; descent-override: 17.4%; line-gap-override: 0%; }
.site-logo {
  display: flex; align-items: center; gap: 10px; flex: none; width: fit-content;
  min-height: 44px; padding: 0 4px; margin: 0 -4px; border-radius: 999px;
  color: var(--ink); text-decoration: none;
}
.site-logo__mark { display: block; flex: none; }
.site-logo__ring { stroke-opacity: var(--logo-ring); }
.site-logo__beam { fill: var(--logo-light); fill-opacity: var(--logo-beam); }
.site-logo__dot { fill: var(--logo-light); stroke: var(--page); }
.site-logo__word {
  font: 700 18px/1 "Archivo", "Archivo Fallback", Arial, sans-serif;
  font-stretch: 118%; letter-spacing: -0.01em; white-space: nowrap;
}
@media (forced-colors: active) {
  .site-logo__beam, .site-logo__dot { fill: currentColor; }
  .site-logo__dot { stroke: Canvas; }
}
.topbar .spacer { flex: 1; }
.topbar label { color: var(--ink-2); font-size: 13px; }
select, button {
  font: inherit; font-size: 14px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; cursor: pointer;
}
button.icon { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; flex: none; }
/* The switch shows the theme it switches to: a sun while dark, a moon while light. */
#theme-toggle .to-dark { display: none; }
:root[data-mr-theme="light"] #theme-toggle .to-light { display: none; }
:root[data-mr-theme="light"] #theme-toggle .to-dark { display: block; }
#issue-select { min-width: 0; max-width: 190px; }
@media (max-width: 480px) { .topbar label { display: none; } }
/* The city filter of the Google searches card: the bar's last item, set off by a rule. Shown only while
   the card shows figures (app.js); its visible label shows from 421px up. */
.city-filter { display: flex; align-items: center; gap: 8px; flex: none; height: 34px; padding-left: 12px; border-left: 1px solid var(--border); }
.city-filter[hidden] { display: none; }
#city-select { min-width: 0; max-width: 100%; }
@media (max-width: 480px) { .topbar .city-filter label { display: inline; } }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
select:focus-visible, button:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 2px solid var(--you); outline-offset: 2px;
}

/* ---- header ---- */
.hero { padding: 28px 0 8px; }
.eyebrow { color: var(--ink-2); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.hero h1 { font-size: clamp(22px, 3.2vw, 30px); letter-spacing: -0.015em; margin-top: 6px; max-width: 32ch; }
.hero .headline { margin-top: 10px; font-size: 17px; color: var(--ink-2); max-width: 70ch; }

/* ---- layout ---- */
.grid { display: grid; gap: 16px; margin-top: 16px; }
.kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.two { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two, .half { grid-template-columns: minmax(0, 1fr); }
}

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow); min-width: 0;
}
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head .sub { color: var(--ink-2); font-size: 13px; }
.section-title { margin: 36px 0 0; display: flex; align-items: baseline; gap: 10px; }
.section-title .sub { color: var(--ink-2); font-size: 13px; }

/* ---- stat tiles ---- */
.tile .label { color: var(--ink-2); font-size: 13px; text-wrap: balance; }
.tile .value { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; margin-top: 4px; }
.tile .value small { font-size: 15px; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.tile .delta { font-size: 13px; margin-top: 2px; color: var(--ink-2); }

.status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.status svg { flex: none; }

/* ---- takeaways ---- */
.takeaways { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.takeaways li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; margin: 0; }
.takeaways .n {
  width: 22px; height: 22px; border-radius: 50%; background: var(--you-wash); color: var(--you);
  font-size: 12px; font-weight: 700; display: grid; place-items: center; margin-top: 1px;
}

/* ---- price strips ---- */
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.key-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.key-tick { width: 2px; height: 12px; background: var(--ink-2); display: inline-block; }
.strip-row { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) 92px; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--grid); }
.strip-row:first-of-type { border-top: 0; }
.strip-row .svc { font-weight: 500; }
.strip-row .svc small { display: block; color: var(--ink-2); font-weight: 400; font-size: 13px; }
.strip-row .vs { text-align: right; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.strip-row .vs b { display: block; font-size: 15px; color: var(--ink); font-weight: 600; }
.strip { width: 100%; height: 44px; display: block; overflow: visible; }
.strip .hit { fill: transparent; cursor: default; }
@media (max-width: 640px) {
  .strip-row { grid-template-columns: 1fr auto; }
  .strip-row .strip-cell { grid-column: 1 / -1; grid-row: 2; }
}

/* ---- tooltip ---- */
.tooltip {
  position: fixed; z-index: 20; pointer-events: none; opacity: 0; transition: opacity 80ms;
  background: var(--ink); color: var(--page); font-size: 13px; line-height: 1.4;
  padding: 7px 10px; border-radius: 8px; max-width: 260px;
  border: 1px solid transparent;  /* an edge in forced colours */
}
.tooltip.on { opacity: 1; }
.tooltip b { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .tooltip { transition: none; } }

/* ---- explanations ----
   The "i" mark of an item, and the tooltip that explains the item. The mark is a button: a thin
   ring in the colour of the text beside it, filled while its explanation is shown. In a tile and a
   highlight card it sits in the bottom right corner, and in a heading's row at the right end; in a
   chip and beside "vs median", "Note" and "Not refreshed this week" it sits in the text, where its
   negative block margin keeps an 18px ring from making its line taller. The explanation has the
   tooltip's look, is anchored to its mark by app.js, and takes the pointer while shown. Only
   existing tokens. */
.explain {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 18px; height: 18px; margin: -4px 0 -4px 6px; padding: 0; vertical-align: middle;
  border: 1px solid currentColor; border-radius: 50%; background: transparent; color: var(--ink-2);
  font: 700 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0; text-transform: none; cursor: help;
}
.explain:hover { color: var(--ink); }
.explain.is-on { background: var(--ink); color: var(--page); border-color: var(--ink); }
/* The pointer target: 24px, and 44px on a coarse pointer. It is not drawn and moves no layout. */
.explain::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
@media (pointer: coarse) {
  .explain::after { inset: -14px; }
  .chips .explain::after { inset: -10px -14px; }  /* chip rows are 36px apart */
}
/* A tile, a highlight card and a heading's row with a mark (.explain-row) hold their mark as the last
   child. It is out of the flow, placed against its host, and takes no room. The room is kept by the
   host, on screen only: 16px at the end of the last text line, 30px at the right end of a row. */
.tile, .award, .explain-row { position: relative; }
.tile > .explain { position: absolute; right: 10px; bottom: 10px; margin: 0; }
.award > .explain { position: absolute; right: 6px; bottom: 6px; margin: 0; }
.explain-row > .explain { position: absolute; right: 0; margin: 0; }
.section-title > .explain { top: 8px; }
.card-head > .explain { top: 0; }
@media screen {
  .tile .delta::after, .award .why:last-child::after, .award .tie::after { content: ""; display: inline-block; width: 16px; }
  .explain-row { padding-right: 30px; }
}
.chips .chip { padding-right: 7px; }
.chips .explain { margin-left: 0; }  /* the chip's own 6px gap */
.stale .explain { margin-left: 2px; }  /* with the line's 4px gap */
.strip-row .vs .explain { margin-left: 0; margin-right: 6px; }
.tooltip--explain {
  max-width: min(300px, calc(100vw - 16px)); padding: 10px 12px; line-height: 1.45; text-align: left;
}
.tooltip--explain.on { pointer-events: auto; }

/* ---- suggestions ---- */
.suggestions { display: grid; gap: 12px; }
.suggestion { border: 1px solid var(--border); border-radius: 8px; padding: 14px; background: var(--surface); }
.suggestion .top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.suggestion .move { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.suggestion .move .arrow { color: var(--muted); font-weight: 400; margin: 0 4px; }
.suggestion p { color: var(--ink-2); margin-top: 6px; }
.pill {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2);
}

/* ---- actions ---- */
.actions { list-style: none; padding: 0; margin: 0; }
.actions li { margin: 0; border-top: 1px solid var(--grid); }
.actions li:first-child { border-top: 0; }
.actions label { display: grid; grid-template-columns: 20px 1fr; gap: 10px; padding: 10px 0; cursor: pointer; }
.actions input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--you); }
.actions input:checked + span { color: var(--muted); text-decoration: line-through; }
.actions input:focus-visible { outline: 2px solid var(--you); outline-offset: 2px; }
.actions label > span { overflow-wrap: anywhere; }
/* Tracked checks: a returned action's tag, the line under a row, a fixed box, and the card's two notes. */
.action-tag {
  display: block; width: fit-content; margin-bottom: 4px; padding: 3px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--tint-sun); color: var(--ink-sun);
}
.actions li.has-line label { padding-bottom: 4px; }
.action-line { margin: 0 0 10px 30px; font-size: 13px; color: var(--ink-2); }
.actions label.fixed { cursor: default; }
.actions label.fixed input { accent-color: var(--muted); }
.actions-fixed { margin-bottom: 10px; font-size: 13px; color: var(--ink-2); }
.actions-unsaved:not(:empty) {
  display: flex; align-items: flex-start; gap: 6px; padding-top: 10px; border-top: 1px solid var(--grid);
  font-size: 13px; color: var(--ink-2);
}
.actions-unsaved svg { flex: none; margin-top: 4px; }

/* ---- tables ---- */
.table-wrap { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 500; color: var(--ink-2); font-size: 13px; padding: 8px 10px; border-bottom: 1px solid var(--axis); white-space: nowrap; }
td { padding: 10px; border-bottom: 1px solid var(--grid); vertical-align: top; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.you td { background: var(--you-wash); }
.rating { display: inline-flex; align-items: center; gap: 8px; }
.rating .bar { width: 64px; height: 6px; border-radius: 3px; background: var(--range); position: relative; overflow: hidden; }
.rating .bar i { position: absolute; inset: 0 auto 0 0; background: var(--ink-2); border-radius: 3px; }
.stale { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 12px; color: var(--ink-2); }

details.biz { border-top: 1px solid var(--grid); }
details.biz:first-of-type { border-top: 0; }
details.biz summary {
  list-style: none; cursor: pointer; display: grid;
  grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 12px 0; align-items: center;
}
details.biz summary::-webkit-details-marker { display: none; }
details.biz summary .name { font-weight: 600; }
details.biz summary .name::before { content: "›"; display: inline-block; width: 14px; color: var(--muted); transition: transform 120ms; }
details.biz[open] summary .name::before { transform: rotate(90deg); }
details.biz summary .pos { color: var(--ink-2); font-size: 13px; grid-column: 1; padding-left: 14px; }
details.biz summary .meta { grid-row: 1 / span 2; grid-column: 2; text-align: right; font-size: 13px; color: var(--ink-2); }
.biz-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; padding: 4px 0 16px 14px; font-size: 14px; }
#ai-answers h4, .biz-body h4, #visibility h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 4px; font-weight: 600; }
.biz-body .wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .biz-body { grid-template-columns: 1fr; } }

/* ---- AI answers ----
   One card per question: the subscriber's own count beside a list of the other businesses. A count is
   words, "N of M answers", at every width; no bar, no percentage, nothing that reads as a score. The
   list is not a table: each value keeps its label as a term, hidden where the header row shows it and
   visible on a phone. Nothing scrolls sideways. Only existing tokens. The change words and the hidden
   text of the link use .sv-chg and .sv-sr of the next section. */
.aa-note { font-size: 14px; color: var(--ink-2); max-width: 80ch; margin-top: 8px; }
.section-title + .aa-note { margin-top: 12px; }
.aa-grid { grid-template-columns: minmax(0, 1fr); }
.aa-card h3, .aa-card p, .aa-card li, .aa-card dd, .aa-head span { overflow-wrap: anywhere; }
.aa-card .aa-2 { color: var(--ink-2); }
.aa-panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 28px; margin-top: 16px; }
@media (max-width: 900px) { .aa-panels { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
.aa-panels > div { min-width: 0; }
.aa-count { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.aa-first { font-size: 14px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.aa-chg { color: var(--ink-2); margin-top: 4px; }
.aa-you .aa-chg .sv-chg { color: inherit; }
.aa-plain, .aa-you ul, .aa-src { font-size: 14px; font-variant-numeric: tabular-nums; }
#ai-answers h4.aa-sub { margin-top: 16px; }
.aa-src + p { margin-top: 8px; }
.aa-head, .aa-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 12px; }
.aa-head { font-size: 13px; font-weight: 500; color: var(--ink-2); padding: 8px 0; border-bottom: 1px solid var(--axis); align-items: end; }
.aa-rows { list-style: none; padding: 0; }
.aa-row { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--grid); font-size: 14px; }
.aa-name { overflow-wrap: anywhere; }
.aa-name .pill { margin-left: 6px; }
.aa-row dl { grid-column: 2 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 12px; margin: 0; }
.aa-row dl > div { min-width: 0; }
.aa-row dt { font-size: 13px; color: var(--ink-2); }
.aa-row dd { margin: 0; font-variant-numeric: tabular-nums; }
.aa-row dd.aa-f { color: var(--ink-2); }
@media (min-width: 641px) {
  .aa-row dt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
}
@media (max-width: 640px) {
  .aa-head { display: none; }
  .aa-rows { border-top: 1px solid var(--axis); }
  .aa-row, .aa-row dl { display: block; }
  .aa-row dl > div { display: grid; grid-template-columns: 45% minmax(0, 1fr); gap: 8px; margin-top: 4px; }
}
.aa-under { margin-top: 10px; display: grid; gap: 4px; }
.aa-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--grid); }
.aa-foot a { font-size: 14px; }
@media (max-width: 639px) { .aa-foot a { display: inline-flex; align-items: center; min-height: 44px; } }

/* ---- search visibility ----
   One card per search; each result list is a "you" strip over one table. Nothing scrolls sideways:
   text wraps. Only existing tokens; no colour carries meaning without its words. */
.sv-caveat { font-size: 14px; color: var(--ink-2); max-width: 80ch; margin-top: 12px; }
.sv-card h3, .sv-ads { overflow-wrap: anywhere; }
.sv-card .sv-help { color: var(--ink-2); }
.sv-card > h4 { margin-top: 16px; }
.sv-ads { font-size: 14px; display: grid; gap: 4px; }
.sv-you { margin: 14px 0; }
.sv-you .label { color: var(--ink-2); font-size: 13px; }
.sv-you .rank { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.sv-you .state { font-size: 15px; font-weight: 600; color: var(--ink); }
.sv-you .chg { color: var(--ink-2); }
.sv-table thead th { white-space: normal; vertical-align: bottom; }
.sv-table tbody th {
  width: 44%; font-weight: 400; font-size: 14px; color: var(--ink); padding: 10px; white-space: normal;
  border-bottom: 1px solid var(--grid); vertical-align: top; overflow-wrap: anywhere;
}
.sv-table thead th:first-child { width: 44%; }
.sv-table tr.you th { background: var(--you-wash); }
.sv-table .sv-state { color: var(--ink-2); overflow-wrap: anywhere; }
.sv-one .sv-table { max-width: 560px; }
@media (max-width: 640px) {
  .sv-table th, .sv-table td { padding: 10px 6px; }
  .sv-table th:first-child { padding-left: 0; }
  .sv-table tr > :last-child { padding-right: 0; }
}
.sv-chg { font-size: 13px; color: var(--ink); }
.sv-chg svg { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; }
.sv-chg.up svg { color: var(--good-text); }
.sv-chg.down svg { color: var(--critical-text); }
.sv-chg.same { color: var(--ink-2); }
.sv-chg.none { color: var(--muted); }
.sv-you .chg .sv-chg { color: inherit; }
.sv-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---- themes ---- */
.themes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.theme { border: 1px solid var(--border); border-radius: 8px; padding: 14px; }
.theme h3 { margin: 8px 0 6px; }
.theme p { color: var(--ink-2); font-size: 14px; }
.theme .opp { color: var(--ink); margin-top: 8px; font-size: 14px; }
.theme .opp b { font-weight: 600; }
.theme .who { color: var(--muted); font-size: 12px; margin-top: 8px; }

/* ---- season chart ---- */
.chart { width: 100%; height: 220px; display: block; }
.chart text { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.events { list-style: none; padding: 0; margin: 0; }
.events li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--grid); margin: 0; font-size: 14px; }
.events li:first-child { border-top: 0; }
.events .when { color: var(--ink-2); font-weight: 600; }
.events .impact { color: var(--ink-2); display: block; }

/* ---- Google searches, in "Season and demand" ---- */
.ds-grid { grid-template-columns: minmax(0, 1fr); }
.ds-card .card-head { margin-bottom: 8px; }
.ds-note { font-size: 14px; color: var(--ink-2); max-width: 80ch; }
.ds-note + .ds-note { margin-top: 4px; }
.ds-terms { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); column-gap: 32px; margin-top: 14px; }
.ds-term { border-top: 1px solid var(--grid); padding: 12px 0 14px; min-width: 0; }
.ds-term h4 { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 6px; overflow-wrap: anywhere; }
.ds-lines { list-style: none; padding: 0; }
.ds-lines li { padding: 6px 0; }
.ds-lines li + li { margin-top: 0; }
.ds-fig { font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-wrap: pretty; }
.ds-fig .ds-place { color: var(--ink-2); }
.ds-fig b { font-weight: 600; }
.ds-fig .sv-chg { font-size: 14px; }
.ds-fig.ds-none { color: var(--ink-2); }
.ds-bid { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; margin-top: 1px; text-wrap: pretty; }
.ds-bid.ds-none, .ds-gap { font-size: 13px; color: var(--muted); }
.ds-source { margin-top: 4px; }
.ds-card .table-wrap table { min-width: 620px; }
.ds-card .table-wrap table.ds-one-city { min-width: 520px; }
.ds-card .ds-col-place[hidden] { display: none; }

/* ---- lists ---- */
.plain { list-style: none; padding: 0; }
.plain li { padding-left: 18px; position: relative; }
.plain li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.praise li::before { background: var(--good); }
.complain li::before { background: var(--critical); }
.gap li::before { background: var(--warning); box-shadow: inset 0 0 0 1px var(--warning-edge); }
.news { display: grid; gap: 14px; }
.news h3 { font-size: 15px; }
.news p { color: var(--ink-2); font-size: 14px; margin-top: 2px; }
.sources { columns: 2 280px; font-size: 13px; }
.sources li { break-inside: avoid; }
.caveats { color: var(--ink-2); font-size: 14px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.empty { color: var(--muted); font-size: 14px; }
details.table-view { margin-top: 12px; font-size: 14px; }
details.table-view summary {
  cursor: pointer; color: var(--ink); font-size: 14px; font-weight: 600; width: fit-content;
  padding: 10px 14px; border: 1px solid var(--axis); border-radius: 8px; background: var(--surface-2);
}
details.table-view summary:hover { border-color: var(--ink-2); }
details.table-view[open] summary { margin-bottom: 10px; }

footer { margin: 48px 0 32px; color: var(--muted); font-size: 13px; }

/* public sample MRs at /demo/<slug>/ */
.demo-banner { background: var(--tint-sun); color: var(--ink-sun); font-size: 14px; padding-block: 10px; }
/* The banner's two links on their own line: the order link first and heavier, the picker smaller. */
.demo-banner__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin-top: 2px; }
.demo-banner__links a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 700; }
.demo-banner__links span { font-size: 13px; }
.demo-banner__links span a { font-weight: 400; }
@media (max-width: 639px) { .demo-banner__links a { min-height: 44px; } }
@media (min-width: 640px) { .demo-banner__picker { margin-left: auto } }

/* ---- Single Market Review: the bar above the report (prospect, trial) ----
   One bar, one Subscribe link. Without a Subscribe control it is a plain line of text. With one
   (.review-bar--pin) it is a grid whose last rows, the closing date and Subscribe, stay under the
   top bar while the page scrolls: the bar is sticky with a negative top, measured by app.js from
   the top of the closing line. Below 720px the closing line and the priced Subscribe button each
   take a row of their own, so the pinned strip is two rows there. */
.review-bar { background: var(--surface); border-bottom: 1px solid var(--border); }
.review-bar__grid { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding-block: 14px; }
.review-bar__pitch { grid-area: pitch; }
.review-bar__label { grid-area: label; justify-self: start; }
.review-bar__contact { grid-area: contact; font-size: 13px; color: var(--ink-2); }
.review-bar__price { grid-area: price; font-size: 13px; color: var(--ink-2); }
.review-bar__when { grid-area: when; font-weight: 600; }
.review-bar__when [data-mr-closes-line="today"] { display: none; }
html[data-mr-closes-today] .review-bar__when [data-mr-closes-line="date"] { display: none; }
html[data-mr-closes-today] .review-bar__when [data-mr-closes-line="today"] { display: inline; }
.review-bar .btn-action { grid-area: cta; }
.review-bar--pin .review-bar__grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 12px; align-items: center;
  grid-template-areas: "label" "pitch" "contact" "price" "when" "cta";
  padding-block: 14px 6px;
}
.review-bar--pin.review-bar--undated .review-bar__grid {
  grid-template-areas: "pitch" "contact" "price" "when" "cta";
}
.review-bar--pin .review-bar__when { display: flex; align-items: center; }
@media (min-width: 720px) {
  .review-bar--pin .review-bar__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label label" "pitch pitch" "contact contact" "price price" "when cta";
  }
  .review-bar--pin.review-bar--undated .review-bar__grid {
    grid-template-areas: "pitch pitch" "contact contact" "price price" "when cta";
  }
  /* The closing line fills its row, so its top edge is the last row's top edge whichever item is tallest. */
  .review-bar--pin .review-bar__when { align-self: stretch; }
}
@media (min-width: 900px) {
  .review-bar--pin .review-bar__grid {
    grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 24px;
    grid-template-areas: "label pitch contact" "when price cta";
  }
  .review-bar--pin.review-bar--undated .review-bar__grid {
    grid-template-areas: "pitch pitch contact" "when price cta";
  }
}
/* Pinning. 57px is the top bar (a 56px row and its 1px border); 73px is that plus 16px. The two
   lengths have no fallback on purpose: until app.js has measured them the bar is not sticky at all. */
html[data-mr-pin-ready] main { --mr-clear: calc(env(safe-area-inset-top, 0px) + 73px + var(--mr-bar-strip)); }
html[data-mr-pin-ready] .review-bar--pin {
  position: sticky; z-index: 4; top: calc(env(safe-area-inset-top, 0px) + 57px - var(--mr-bar-tuck));
}
/* While the email link has keyboard focus the whole bar shows, so the focused link is never under the top bar. */
html[data-mr-pin-ready] .review-bar--pin:has(.review-bar__contact a:focus-visible) {
  top: calc(env(safe-area-inset-top, 0px) + 57px);
}
@media (max-height: 420px) {
  html[data-mr-pin-ready] main { --mr-clear: calc(env(safe-area-inset-top, 0px) + 73px); }
  html[data-mr-pin-ready] .review-bar--pin { position: static; }
}
/* A closed review: the inline script at the top of the page sets data-mr-closed before first paint. */
html[data-mr-closed] .review-bar, html[data-mr-closed] #issue-label, html[data-mr-closed] #issue-select { display: none; }
/* Under 720px, while the city filter shows (data-mr-city), the top bar has two rows: the logo and the
   theme button, then the issue select and the city filter. It is then 101px tall (with its border), so
   the clearance is 117px and the pinned review bar sits 101px down. */
@media screen and (max-width: 719px) {
  html[data-mr-city] .topbar .wrap {
    display: grid; height: auto; column-gap: 6px; row-gap: 0;
    grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: 56px 44px;
    grid-template-areas: "logo logo theme" "ilabel isel city"; reading-flow: grid-rows;
  }
  html[data-mr-city] .topbar .site-logo { grid-area: logo; justify-self: start; }
  html[data-mr-city] .topbar .spacer { display: none; }
  html[data-mr-city] #theme-toggle { grid-area: theme; justify-self: end; }
  html[data-mr-city] #issue-label { grid-area: ilabel; display: inline; align-self: start; line-height: 34px; }
  html[data-mr-city] #issue-select { grid-area: isel; align-self: start; }
  html[data-mr-city] .topbar .city-filter { grid-area: city; justify-self: end; align-self: start; padding-left: 0; border-left: 0; }
  html[data-mr-city] main { --mr-clear: calc(env(safe-area-inset-top, 0px) + 117px); }
  html[data-mr-city][data-mr-pin-ready] main { --mr-clear: calc(env(safe-area-inset-top, 0px) + 117px + var(--mr-bar-strip)); }
  html[data-mr-city][data-mr-pin-ready] .review-bar--pin { top: calc(env(safe-area-inset-top, 0px) + 101px - var(--mr-bar-tuck)); }
  html[data-mr-city][data-mr-pin-ready] .review-bar--pin:has(.review-bar__contact a:focus-visible) {
    top: calc(env(safe-area-inset-top, 0px) + 101px);
  }
}
@media screen and (max-width: 719px) and (max-height: 420px) {
  html[data-mr-city][data-mr-pin-ready] main { --mr-clear: calc(env(safe-area-inset-top, 0px) + 117px); }
}
@media screen and (max-width: 420px) {
  html[data-mr-city] .topbar .city-filter label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}

/* The one sodium control in the MR: Subscribe, in the review bar and on the ended page. */
.btn-action {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px;
  border-radius: 999px; background: var(--action); color: var(--action-ink); border: 1px solid var(--action-edge);
  font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.btn-action:hover { background: var(--action-hi); }
.btn-action:active { background: var(--action-lo); }
/* The priced Subscribe: one line from 720px, a full-width two-line button below it. */
.btn-action--priced { column-gap: .3em; }
@media (max-width: 719px) {
  .btn-action--priced {
    flex-direction: column; width: 100%; min-height: 56px; padding: 8px 20px; gap: 2px; border-radius: 16px;
    white-space: normal; text-align: center; line-height: 1.25;
  }
  .btn-action__verb { font-size: 15px; font-weight: 700; }
  .btn-action__price { font-size: 13px; font-weight: 600; }
}

/* ---- test-mode notice: by a Stripe control made from a test link (build --stripe-test) ---- */
.test-note {
  display: inline-block; max-width: 100%; padding: 2px 8px; border: 1px dashed var(--ink-2); border-radius: 8px;
  color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.35;
}
.demo-banner__links .test-note { align-self: center; margin-block: 4px; color: inherit; border-color: currentColor; }
/* The bar's new last row, under Subscribe; it pins with it. */
.review-bar__grid .test-note { grid-column: 1 / -1; justify-self: end; }
.ended .test-note { margin-top: -8px; }

/* ---- member: the manage line at the foot of the report (active, paused) ---- */
.manage-line { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin-bottom: 12px; }

/* ---- ended page: the report's cover card with nothing behind it ---- */
.hero-card.ended { max-width: 640px; margin-top: 48px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hero-card.ended h1 { margin-top: 0; }
.ended__body { font-size: 17px; max-width: 52ch; }
.ended__terms { margin-top: -8px; font-size: 13px; color: var(--ink-2); }
.ended__contact { margin-top: 8px; }
.ended__contact, .ended__home { font-size: 14px; color: var(--ink-2); }
.ended__home { margin-top: -8px; }
@media (max-width: 520px) {
  .hero-card.ended { margin-top: 24px; }
  .ended .btn-action { align-self: stretch; }
}

/* The line each printed page carries: the business and the review's date. Paper only; see the print sheet at the end. */
.print-line { display: none; }

/* =====================================================================
   Playful layer: friendly display type, icon tiles, soft colour accents.
   Decoration only - data marks keep the neutral chart tokens above.
   ===================================================================== */
:root {
  --display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 16px;
  --logo-tile: #ffffff;   /* logos are drawn for light backgrounds, so the tile stays white in both themes */
  /* White-artwork logos (logo.json "tile": "dark") sit on a charcoal tile instead. In the dark
     theme it is lifted off the card and gets a light ring; in the light theme it is near-black. */
  --logo-tile-dark: #2c2d33;
  --logo-tile-dark-ring: rgba(255, 255, 255, 0.22);
  --tint-blue: #16263b;   --ink-blue: #86b6ef;
  --tint-peach: #36201a;  --ink-peach: #f3a07c;
  --tint-mint: #13291f;   --ink-mint: #5fd1a2;
  --tint-sun: #302612;    --ink-sun: #f2c35b;
  --tint-rose: #331c26;   --ink-rose: #f09bbd;
  --tint-violet: #221f38; --ink-violet: #b3aaf2;
}
:root[data-mr-theme="light"] {
  --logo-tile-dark: #1b1c20;
  --logo-tile-dark-ring: rgba(11, 11, 11, 0.10);
  --tint-blue: #e6f0fc;   --ink-blue: #1c5cab;
  --tint-peach: #fdebe3;  --ink-peach: #a8441a;
  --tint-mint: #e0f5ec;   --ink-mint: #13744f;
  --tint-sun: #fdf2d6;    --ink-sun: #825700;
  --tint-rose: #fbe6ee;   --ink-rose: #a83a63;
  --tint-violet: #ebe8f8; --ink-violet: #4a3aa7;
}

h1, h2, .tile .value, .suggestion .move, .display { font-family: var(--display); }
h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.card { border-radius: var(--radius); }

.icon-tile {
  width: 34px; height: 34px; border-radius: 11px; flex: none;
  display: inline-grid; place-items: center;
}
.icon-tile svg { width: 18px; height: 18px; }
.t-blue { background: var(--tint-blue); color: var(--ink-blue); }
.t-peach { background: var(--tint-peach); color: var(--ink-peach); }
.t-mint { background: var(--tint-mint); color: var(--ink-mint); }
.t-sun { background: var(--tint-sun); color: var(--ink-sun); }
.t-rose { background: var(--tint-rose); color: var(--ink-rose); }
.t-violet { background: var(--tint-violet); color: var(--ink-violet); }

.section-title { align-items: center; gap: 12px; flex-wrap: wrap; }
.section-title .sub { flex-basis: 100%; margin: -6px 0 0 46px; }
@media (min-width: 700px) { .section-title .sub { flex-basis: auto; margin: 0; } }
.card-head h2 { display: flex; align-items: center; gap: 10px; }

/* hero */
.hero-card {
  position: relative; overflow: hidden; margin-top: 24px;
  border-radius: 24px; padding: 28px 28px 26px;
  background: var(--surface); border: 1px solid var(--border);
}
.hero-card::before, .hero-card::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.hero-card::before { width: 280px; height: 280px; right: -80px; top: -120px; background: var(--tint-blue); }
.hero-card::after { width: 180px; height: 180px; right: 150px; bottom: -120px; background: var(--tint-peach); }
.hero-card::before, .hero-card::after { z-index: 0; }
.hero-card > * { position: relative; z-index: 1; }
@media (max-width: 520px) {
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .hero-card { padding: 22px 18px; }
  .hero-card::after { right: -60px; bottom: -140px; }
}
@media (max-width: 420px) {
  .topbar .site-logo { width: 44px; justify-content: center; padding: 0; margin: 0 0 0 -8px; }
  .topbar .site-logo__word { display: none; }
}
.hero-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hero-head > div:first-child { min-width: 0; }
.hero-logo {
  flex: none; display: grid; place-items: center;
  width: 88px; height: 88px; padding: 10px; border-radius: 20px;
  background: var(--logo-tile); box-shadow: 0 0 0 1px var(--border), 0 2px 6px rgba(11, 11, 11, 0.12);
  transform: rotate(4deg);
}
.hero-logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
/* The dark tile keeps the square tile's height but widens for wordmarks: the image takes the
   full inner height and the tile grows with it, up to a cap, so a wide script logo isn't shrunk
   to a sliver. Square and tall marks still get the 88px square. */
.hero-logo--dark {
  width: auto; min-width: 88px; padding: 10px 14px;
  background: var(--logo-tile-dark);
  box-shadow: 0 0 0 1px var(--logo-tile-dark-ring), 0 2px 6px rgba(11, 11, 11, 0.18);
  transform: rotate(3deg);
}
.hero-logo--dark img { height: 68px; width: auto; max-width: 150px; max-height: none; }
@media (max-width: 520px) {
  .hero-logo { width: 60px; height: 60px; padding: 7px; border-radius: 14px; }
  .hero-logo--dark { width: auto; min-width: 60px; padding: 7px 10px; }
  .hero-logo--dark img { height: 46px; max-width: 96px; }
}
.hero-card .hello { font-family: var(--display); font-weight: 600; color: var(--ink-2); font-size: 16px; }
.hero-card h1 { font-size: clamp(28px, 4.4vw, 42px); font-weight: 800; letter-spacing: -0.025em; margin-top: 4px; max-width: none; }
.hero-card .headline { margin-top: 12px; font-size: 17px; color: var(--ink); max-width: 62ch; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2);
}
.chip svg { width: 14px; height: 14px; }

/* tiles */
.tile { display: flex; flex-direction: column; }
.tile .tile-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* Four tiles in a row: from 901px to 1151px two labels take two lines, so every top row is two lines
   high and the four figures share one top edge. */
@media screen and (min-width: 901px) { .tile .tile-top { min-height: 39px; } }
.tile .value { font-size: 32px; font-weight: 700; margin-top: 10px; }
.tile .quip { margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--ink-2); }
.weather { display: inline-flex; align-items: center; gap: 8px; }
.weather svg { width: 30px; height: 30px; }

/* superlatives */
.superlatives { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.award {
  border-radius: 14px; padding: 12px 14px; border: 1px solid var(--border); background: var(--surface);
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start;
  flex: 1 1 180px; min-width: 0;
}
.award--lowest { flex: 2 1 240px; }
.award > div { min-width: 0; overflow-wrap: anywhere; }
.award .what { font-size: 11px; color: var(--ink-2); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; text-wrap: balance; }
.award .who { font-family: var(--display); font-weight: 700; font-size: 15px; line-height: 1.2; }
.award .why, .award .tie { font-size: 12px; color: var(--muted); line-height: 1.4; }
.award .tie { margin-top: 2px; }
.award.you { border-color: var(--you); box-shadow: inset 0 0 0 1px var(--you); }
.you-badge {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; padding: 1px 6px;
  border-radius: 6px; background: var(--you-strong); color: #fff; margin-left: 6px; vertical-align: 2px;
  font-family: system-ui, sans-serif;
}

/* takeaways + actions */
.takeaways .n { background: var(--tint-blue); color: var(--ink-blue); font-family: var(--display); }
.progress { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.progress .track { width: 90px; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.progress .fill { height: 100%; background: var(--good); border-radius: 4px; transition: width 200ms ease; }

/* suggestions */
.suggestion { border-radius: 14px; }
.suggestion .move { font-size: 24px; font-weight: 700; }
.verb { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; }
.verb.raise { background: var(--tint-mint); color: var(--ink-mint); }
.verb.lower { background: var(--tint-peach); color: var(--ink-peach); }
.verb.hold { background: var(--tint-blue); color: var(--ink-blue); }
.verb.publish { background: var(--tint-violet); color: var(--ink-violet); }

/* competitor avatars */
.avatar {
  width: 32px; height: 32px; border-radius: 10px; display: inline-grid; place-items: center; flex: none;
  font-family: var(--display); font-weight: 800; font-size: 13px;
}
details.biz summary { grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 12px; }
details.biz summary .avatar { grid-row: 1 / span 2; }
details.biz summary .name::before { display: none; }
details.biz summary .name::after { content: " ›"; color: var(--muted); display: inline-block; transition: transform 120ms; margin-left: 4px; }
details.biz[open] summary .name::after { transform: rotate(90deg); }
details.biz summary .pos { grid-column: 2; padding-left: 0; }
details.biz summary .meta { grid-column: 3; }
/* measured review line: its own row under the positioning, full width of the text columns */
details.biz summary .review-signals {
  grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 2px;
  font-size: 12px; line-height: 1.4; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.review-signals .sig { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
.review-signals .sig svg { width: 12px; height: 12px; flex: none; color: var(--muted); align-self: center; }
.biz-body { padding-left: 44px; }
@media (max-width: 640px) {
  .biz-body { padding-left: 0; }
  details.biz summary { grid-template-columns: 32px minmax(0, 1fr); }
  details.biz summary .meta { grid-column: 2; grid-row: auto; text-align: left; }
}

/* themes */
.theme { border-radius: 14px; background: var(--surface); }
.theme h3 { font-family: var(--display); font-size: 17px; font-weight: 700; }
.theme .opp { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; }

/* ---- admin: the owner's list of private Market Reviews at /admin/ ----
   Every rule is scoped to .admin or an admin- class, so no Market Review page changes. Only
   existing tokens; no motion. Above 900px the list is a table; at 900px and narrower each row is
   a block of label and value lines, with the table roles kept in the markup. */
.admin [hidden] { display: none !important; }
.admin-head { padding: 28px 0 18px; }
.admin-head h1 { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3.6vw, 34px); letter-spacing: -0.02em; }
.admin-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 36px; margin-top: 8px; }
.admin-count { font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.admin-noscript { margin-bottom: 16px; font-size: 14px; color: var(--ink-2); }
.admin-clear {
  min-height: 36px; padding: 0 14px; border: 1px solid var(--muted); border-radius: 999px;
  background: transparent; color: var(--ink); font-size: 14px; font-weight: 600;
}
.admin-clear:hover { border-color: var(--ink-2); }
.admin-clear:active { background: var(--surface-2); }
@media (pointer: coarse) { .admin-clear { min-height: 44px; } }
.admin-filters { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 12px 16px; margin-bottom: 16px; }
.admin-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.admin-field label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.admin-field input, .admin-field select {
  width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--muted); border-radius: 8px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 16px;
}
.admin-field input::placeholder { color: var(--muted); opacity: 1; }
.admin-field input:hover, .admin-field select:hover { border-color: var(--ink-2); }
.admin-field input:focus-visible, .admin .table-wrap[tabindex]:focus-visible { outline: 2px solid var(--you); outline-offset: 2px; }
.admin-list caption { caption-side: top; text-align: left; padding-bottom: 10px; font-size: 14px; color: var(--ink-2); }
.admin-list tbody th {
  min-width: 200px; padding: 10px; border-bottom: 1px solid var(--grid); vertical-align: top;
  white-space: normal; overflow-wrap: anywhere; font-size: 14px; font-weight: 600; color: var(--ink);
}
.admin-list td { white-space: nowrap; }
.admin-list tbody tr:hover > * { background: var(--surface-2); }
.admin-label { display: none; }
.admin-none { color: var(--muted); }
.admin-why { color: var(--ink-2); }
.admin-open { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; font-weight: 600; text-decoration: underline; }
.admin-open svg { flex: none; }
.admin-list td:nth-child(5), .admin-list td:nth-child(6) { font-variant-numeric: tabular-nums; }
.admin-stage--prospect { background: var(--tint-violet); color: var(--ink-violet); }
.admin-stage--trial { background: var(--tint-sun); color: var(--ink-sun); }
.admin-stage--active { background: var(--tint-mint); color: var(--ink-mint); }
.admin-stage--paused { background: var(--tint-blue); color: var(--ink-blue); }
.admin-nomatch { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.admin-nomatch:has(> p:not(:empty)) { padding: 16px 0 2px; }
.admin-nomatch p { font-size: 15px; color: var(--ink); }
.admin-empty { max-width: 640px; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px 12px; align-items: center; }
.admin-empty p { grid-column: 2; color: var(--ink-2); }
@media (max-width: 900px) {
  .admin-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-field--search { grid-column: 1 / -1; }
  .admin-list table, .admin-list caption, .admin-list tbody, .admin-list tr, .admin-list th, .admin-list td { display: block; }
  .admin-list thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .admin-list tbody { border-top: 1px solid var(--axis); }
  .admin-list tbody tr { padding: 12px 0; border-bottom: 1px solid var(--grid); }
  .admin-list tbody tr:hover > * { background: none; }
  .admin-list tbody th { min-width: 0; padding: 0 0 3px; border: 0; font-size: 15px; }
  .admin-list td {
    display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 8px; padding: 3px 0; border: 0;
    white-space: normal; overflow-wrap: anywhere;
  }
  .admin-list td:last-child { margin-top: 6px; }
  .admin-label { display: block; font-size: 13px; color: var(--ink-2); }
  .admin-empty { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .admin-empty p { grid-column: 1; }
}
@media (max-width: 520px) {
  .admin-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
   Print sheet: paper and PDF from the browser's Print command. It comes last so it wins over
   everything above, and it serves every page that loads this file.
   ===================================================================== */
/* No paper margin: the browser prints its own header and footer there, and they hold the page's
   address, which for a private review holds the access key. The page is padded instead. No paper
   size is set, so US Letter and A4 both work. */
@page { margin: 0; }
@media print {
  /* Always light paper and dark text, whichever theme the screen shows. These are the light tokens,
     with white paper, stronger card edges, and "you" darker than the other prices so the two still
     differ in black and white. Colours are printed as set, so the charts and marks keep their fills.
     The logo's three tokens are set only in the two theme blocks at the top, so the logo's light
     prints in the screen theme's amber; both read on white. */
  :root, :root[data-mr-theme] {
    color-scheme: light;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    --page: #ffffff;
    --surface: #ffffff;
    --surface-2: #f1f0eb;
    --ink: #0b0b0b;
    --ink-2: #4d4c49;
    --muted: #6b6964;
    --grid: #e3e2db;
    --axis: #c3c2b7;
    --border: rgba(11, 11, 11, 0.22);
    --link: #1c5cab;
    --you: #1f63b8;
    --you-strong: #1f63b8;
    --you-wash: rgba(42, 120, 214, 0.10);
    --others: #a3a19a;
    --range: #e3e2db;
    --good-text: #006300;
    --warning-edge: #9a6a00;
    --critical-text: #b42f2f;
    --action-edge: #9a6a00;
    --shadow: none;
    --logo-tile-dark: #1b1c20;
    --logo-tile-dark-ring: rgba(11, 11, 11, 0.10);
    --tint-blue: #e6f0fc;   --ink-blue: #1c5cab;
    --tint-peach: #fdebe3;  --ink-peach: #a8441a;
    --tint-mint: #e0f5ec;   --ink-mint: #13744f;
    --tint-sun: #fdf2d6;    --ink-sun: #825700;
    --tint-rose: #fbe6ee;   --ink-rose: #a83a63;
    --tint-violet: #ebe8f8; --ink-violet: #4a3aa7;
  }

  /* The padding that stands in for the paper margin, and the sheet's own line. Where the browser can
     repeat the padding on every page, the line is fixed, so it prints at the top of each page. Where
     it cannot, the line prints once, at the top of the report. */
  body { padding: 12mm 9mm; }
  .wrap { max-width: none; }
  .print-line { display: block; font-size: 9pt; line-height: 1.3; color: var(--ink-2); }
  @supports (box-decoration-break: clone) {
    body { padding-top: 16mm; box-decoration-break: clone; }
    .print-line {
      position: fixed; top: 0; left: 0; right: 0; padding: 7mm calc(9mm + 16px) 0;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
  }

  /* Left out on paper: every control, and the notes that only speak about using them. */
  .review-bar, .manage-line, .demo-banner__links, .btn-action, #issue-label, #issue-select,
  #theme-toggle, .tooltip, .explain, .actions-fixed, .actions-unsaved:not(:empty), .screen-hint, .aa-foot { display: none; }
  .topbar { position: static; background: none; backdrop-filter: none; }  /* A link prints as plain text. No rule here or above prints a link's address. */
  a { color: inherit; text-decoration: none; }

  /* A closed section prints open, whatever its state on screen: the script opens it for printing and
     closes it again after, and the first rule does the same where a browser has no such events. Nothing
     of the expanding UI is printed: no marker, and no "›" by a competitor's name. A section's label
     stays as a plain heading over its content. */
  details::details-content { content-visibility: visible; }
  summary { list-style: none; cursor: auto; }
  summary::-webkit-details-marker { display: none; }
  details.biz summary .name::before, details.biz summary .name::after { display: none; }
  details.table-view summary { color: var(--ink); font-weight: 600; margin-bottom: 6px; padding: 0; border: 0; background: none; }

  /* Pages. One column, in plain blocks. A card may split between its rows, so a page fills; a row, a
     chart, a tile or a list item is not split, and a heading stays with what follows it. No section
     starts a page. */
  .two, .half { display: block; }
  .two > * + *, .half > * + * { margin-top: 16px; }
  /* A competitor's profile too: as a grid, its line is left at the foot of a page with the profile on the next. */
  .biz-body { display: block; }
  .biz-body > div + div { margin-top: 14px; }
  .table-wrap { overflow: visible; }
  .card { box-shadow: none; }
  .tile, .hero-card, .demo-banner, .award, .suggestion, .theme, .strip-row, .strip, .chart, .sv-you, .sv-ads,
  .news > div, details.biz summary, .biz-body > div, .aa-you, tr, li { break-inside: avoid; }
  .section-title, .card-head, .sv-caveat, .aa-note, .aa-head, h2, h3, h4, summary, thead { break-after: avoid; }

  /* Google searches: no filter on paper, and every place's lines and rows, whatever the screen shows. */
  .city-filter { display: none; }
  .ds-card li[data-place][hidden] { display: list-item; }
  .ds-card tr[data-place][hidden] { display: table-row; }
  .ds-card .ds-col-place[hidden] { display: table-cell; }
  .ds-card .table-wrap table.ds-one-city { min-width: 620px; }
  .ds-term { break-inside: avoid; }
}