/* RankByMe brand: primary #6544E9, secondary #8B6CF6, light #EFEAFF, dark #172033, gray #6B7280, background #F7F8FC. */
:root {
  --bg: #f7f8fc;
  --panel: #ffffff;
  --panel-2: #f2f3f9;
  --text: #172033;
  --muted: #6b7280;
  --border: #e6e8f0;
  --brand: #6544e9;
  --brand-2: #8b6cf6;
  --brand-soft: #efeaff;
  --on-brand: #ffffff;
  --good: #16a34a;
  --good-soft: #dcfce7;
  --ok: #d97706;
  --ok-soft: #fef3c7;
  --bad: #dc2626;
  --bad-soft: #fee2e2;
  --info: #2563eb;
  --info-soft: #dbeafe;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 24px rgba(15, 23, 42, 0.06);
  --radius: 14px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); }
h1, h2, h3, h4 { line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
button, input { font: inherit; color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* Header */
.topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.topbar .wrap { display: flex; align-items: center; gap: 12px; height: 62px; }
.logo { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 18px; color: var(--text); text-decoration: none; margin-right: auto; }
/* Logo: the official horizontal logo (the app is always light). */
.logo-full { height: 38px; width: auto; display: block; }
.logo-img, .logo .wm { display: none; }
.logo-img { width: 34px; height: 34px; border-radius: 8px; }
.side-logo .logo-full { height: 34px; }
footer .logo-full { height: 28px; }
.wm { font-weight: 800; font-size: 21px; letter-spacing: -0.02em; color: var(--text); }
.wm b { color: var(--brand); font-weight: 800; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--border); background: var(--panel); border-radius: 10px; padding: 9px 16px; font-weight: 600; cursor: pointer; text-decoration: none; color: var(--text); white-space: nowrap; }
.btn:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: var(--on-brand); border-color: transparent; box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 30%, transparent); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 9px; }
.btn-lg { padding: 14px 24px; font-size: 16px; border-radius: 12px; }
.btn:disabled { opacity: 0.55; cursor: default; }
/* A button marked hidden is hidden (.btn's display used to win, so "hidden" buttons showed; every page benefits). */
.btn[hidden] { display: none; }

/* Landing */
.hero { padding: 72px 0 40px; text-align: center; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-weight: 600; font-size: 13px; }
.hero h1 { font-size: clamp(32px, 5vw, 54px); font-weight: 800; margin: 18px auto 14px; max-width: 820px; letter-spacing: -0.02em; }
.grad { background: linear-gradient(135deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { font-size: 18px; color: var(--muted); max-width: 640px; margin: 0 auto 28px; }
.scan-form { display: flex; gap: 10px; max-width: 620px; margin: 0 auto; background: var(--panel); padding: 8px; border-radius: 16px; border: 1px solid var(--border); box-shadow: var(--shadow); }
.scan-form input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 10px 12px; font-size: 16px; outline: none; }
.scan-note { margin-top: 12px; font-size: 13px; color: var(--muted); }
.form-error { color: var(--bad); margin-top: 10px; min-height: 1.2em; font-weight: 500; }
.section { padding: 48px 0; }
.section h2 { font-size: 30px; text-align: center; margin-bottom: 10px; }
.section > .wrap > p.sub { text-align: center; color: var(--muted); margin: 0 auto 32px; max-width: 620px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step, .feature { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.step .num { width: 32px; height: 32px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-weight: 800; margin-bottom: 12px; }
.step h3, .feature h3 { font-size: 17px; margin-bottom: 6px; }
.step p, .feature p { margin: 0; color: var(--muted); font-size: 14px; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature .ico { font-size: 22px; margin-bottom: 8px; }
/* Affected pages / images under a problem */
.item-list { margin: 8px 0 6px; padding-left: 18px; font-size: 13.5px; display: flex; flex-direction: column; gap: 4px; }
.item-list a { word-break: break-all; }
.item-imgs { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 3px 0 2px; font-size: 12.5px; }
.item-imgs a { text-decoration: none; color: var(--text); }
.item-imgs a:hover { color: var(--brand); }

/* Terms / Privacy */
.legal { max-width: 780px; line-height: 1.7; }
.legal h1 { font-size: 32px; margin-bottom: 4px; }
.legal h2 { font-size: 19px; margin: 28px 0 8px; }
.legal li { margin-bottom: 6px; }

/* ---------- Doc pages: Terms, Social media, Data deletion (design pass 2026-10-22) ----------
   One column for header, text and footer; on a computer the text sits in the app's white block at a reading measure
   (about 72 characters a line). 44px targets and the violet focus ring. /privacy keeps the plain .legal look while
   Google reviews it: add class="doc-page" to its <body> when the review is done. */
.doc-page { --doc-w: 720px; }
.doc-page .topbar .wrap, .doc-page footer .wrap { max-width: calc(var(--doc-w) + 40px); }
.doc-page .logo { min-height: 44px; }
.doc-page .land-nav { margin-right: 0; }
.doc-page .land-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.doc-page .land-nav a[aria-current="page"] { color: var(--brand); font-weight: 600; }
.doc-page a { text-underline-offset: 3px; }
.doc-page a:hover { color: #4a2fc9; }
.doc-page a:focus-visible { border-radius: 4px; } /* the ring itself is the global one */
.doc-page main.legal { max-width: calc(var(--doc-w) + 40px); padding-bottom: 28px; font-size: 16px; line-height: 1.7; overflow-wrap: break-word; }
.doc-page .legal h1 { font-size: clamp(28px, 2.2vw + 18px, 36px); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; margin-bottom: 10px; }
.doc-page .legal h1 + .muted { font-size: 13px; font-weight: 600; margin: 0 0 24px; }
.doc-page .legal h2 { font-size: 20px; margin: 40px 0 10px; scroll-margin-top: 84px; text-wrap: balance; }
.doc-page .legal h2 + :is(p, ul, ol) { margin-top: 0; }
.doc-page .legal :is(ul, ol) { padding-left: 1.3em; margin: 12px 0 18px; }
.doc-page .legal li { margin-bottom: 8px; padding-left: 4px; }
.doc-page .legal li::marker { color: var(--muted); }
.doc-page footer { margin-top: 40px; }
.doc-page .foot { flex-direction: column; justify-content: center; gap: 8px; }
.doc-page .foot nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.doc-page .foot nav a[aria-current="page"] { color: var(--text); font-weight: 600; text-decoration: none; }
/* Phones: the five footer links wrap as whole words in two even rows, without a "·" left hanging at a line end. */
@media (max-width: 520px) {
  .doc-page .foot nav { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 10px; max-width: 290px; margin: 0 auto; font-size: 0; }
  .doc-page .foot nav a { font-size: 13px; }
}
@media (min-width: 768px) {
  .doc-page main.legal { width: calc(100% - 40px); max-width: var(--doc-w); margin: 32px auto 0; padding: 48px 56px 44px; font-size: 17px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
  .doc-page .legal h2 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  .doc-page main.legal { width: auto; max-width: 75ch; margin: 0; padding: 0; border: 0; box-shadow: none; font-size: 12px; }
  .doc-page .legal h1 { font-size: 22px; }
  .doc-page .legal h2 { font-size: 15px; }
  .doc-page .land-nav, .doc-page .foot nav { display: none; }
  .doc-page .legal h2 { break-after: avoid; }
  .doc-page .legal :is(p, li) { orphans: 3; widows: 3; }
}
/* Social media: the opening line reads as the lead, not as body text. */
.doc-page .legal .lead { font-size: 1.125em; line-height: 1.6; color: #3a3658; margin: 12px 0 8px; }
/* Data deletion: the steps use the app's numbered circles, and the email in step 1 is the page's one action
   (a 44px tap area without moving the line). */
.doc-page .legal ol.doc-steps { list-style: none; counter-reset: doc-step; padding-left: 0; }
.doc-page .legal ol.doc-steps > li { counter-increment: doc-step; position: relative; padding-left: 44px; margin-bottom: 14px; }
.doc-page .legal ol.doc-steps > li::before { content: counter(doc-step); position: absolute; left: 0; top: -1px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 14px; font-weight: 800; line-height: 1; }
.doc-page .legal a.doc-action { position: relative; display: inline-block; padding: 0 8px; border-radius: 8px; background: var(--brand-soft); font-weight: 600; text-decoration: none; }
.doc-page .legal a.doc-action:hover { text-decoration: underline; }
.doc-page .legal a.doc-action:focus-visible { outline-offset: 1px; }
.doc-page .legal a.doc-action::after { content: ""; position: absolute; inset: -9px -4px; }
@media print { .doc-page .legal a.doc-action { background: none; padding: 0; } }

/* Landing nav and footer (the nav is shared with the public doc pages: terms, social media, data deletion) */
.land-nav { display: flex; gap: 22px; margin-right: 12px; }
.land-nav a { color: var(--text); text-decoration: none; font-weight: 500; font-size: 15px; }
.land-nav a:hover { color: var(--brand); }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.foot .logo { margin: 0; }
@media (max-width: 900px) { .land-nav { display: none; } }
/* Footer links on touch phones: 44px tall to tap (every public page with this footer benefits). */
@media (max-width: 560px) and (pointer: coarse) { footer .foot a:not(.logo) { display: inline-block; padding: 12px 2px; } }

/* ---------- Landing page (design pass 2026-10-22, docs/design-pass/landing.md) ---------- */
/* One violet action, "Check my website": the header's Sign up is white on this page (and on the report page, whose
   own cards have the main action). A "Check my website" button
   (computer: in the header; phone: a bar at the bottom) shows only while neither check form is on screen. */
.landing { --land-muted: #5b6170; }
:is(.landing, .rp-page, .cn-page) #navUser .btn-primary { background: var(--panel); color: var(--text); border-color: var(--border); box-shadow: none; }
.land-cta-top, .land-bar { display: none; }
@media (min-width: 761px) { .landing.cta-on .land-cta-top { display: inline-flex; } }
@media (max-width: 760px) {
  .land-bar { position: fixed; left: 16px; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30; min-height: 52px; font-size: 16px; }
  .landing.cta-on .land-bar { display: flex; }
}
.land-hero { padding: 64px 0 56px; background: radial-gradient(900px 420px at 85% 10%, var(--brand-soft), transparent 70%); }
.land-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; }
.land-hero h1 { font-size: clamp(38px, 5.4vw, 62px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; margin-bottom: 18px; }
.land-hero .lead { font-size: 19px; line-height: 1.5; color: var(--land-muted); max-width: 540px; margin: 0 0 26px; }
html:has(body.landing) { scroll-padding-top: 76px; } /* anchors and focused fields never land under the sticky header */
.landing .scan-form { margin: 0; max-width: 560px; }
/* Typing in the address field: the whole field gets the one violet ring (the button inside keeps its own). */
.landing .scan-form:has(input:focus) { border-color: var(--brand); outline: 2px solid var(--brand); outline-offset: 2px; }
.landing .scan-form input { caret-color: var(--brand); }
.landing .scan-form input[aria-invalid="true"] { color: #b42318; }
.landing .form-error { min-height: 0; margin: 10px 0 0; max-width: 560px; font-size: 14px; color: #b42318; }
.landing .form-error:empty { margin: 0; }
.landing .scan-note { margin: 12px 0 0; font-size: 13px; color: var(--land-muted); }
.scan-last { margin: 14px 0 0; font-size: 14px; color: var(--land-muted); }
.scan-last a { font-weight: 600; margin-left: 4px; }
/* The example report beside the headline: the app's own score ring and step rows, quieter than the real button. */
.land-demo { display: flex; justify-content: center; }
.ld-card { width: 100%; max-width: 440px; background: var(--panel); border: 1px solid var(--border); border-radius: 22px; padding: 20px 20px 16px; box-shadow: 0 12px 30px rgba(23, 20, 58, 0.06); }
.ld-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.ld-ring { flex: none; }
.ld-ring text { font: 800 17px Inter, system-ui, sans-serif; fill: var(--text); }
.ld-site { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ld-site b { font-size: 16px; overflow-wrap: anywhere; }
.ld-site span { font-size: 13px; color: var(--land-muted); }
.ld-tag { align-self: flex-start; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--panel-2); color: var(--land-muted); }
.ld-rows { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ld-rows li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--panel-2); }
.ld-n { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--border); font-weight: 800; font-size: 13px; }
.ld-done .ld-n { background: #e3f4ec; color: #12663f; border-color: transparent; }
.ld-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ld-t b { font-size: 14px; font-weight: 600; line-height: 1.3; }
.ld-t span { font-size: 13px; color: var(--land-muted); margin-top: 2px; }
.ld-done .ld-t span { color: #12663f; }
.ld-btn { flex: none; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 9px; background: var(--brand-soft); color: #4a2fc9; }
.ld-btn-plain { background: var(--panel); color: var(--text); border: 1px solid var(--border); }
.ld-undo { flex: none; font-size: 13px; font-weight: 700; color: #4a2fc9; padding: 0 4px; }
.ld-foot { margin: 12px 2px 0; font-size: 13px; color: var(--land-muted); }
/* Sections: a heading and one gray line, then the content. */
.landing .section h2 { font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -0.03em; }
.landing .section > .wrap > p.sub { color: var(--land-muted); margin-bottom: 36px; }
/* How it works: three steps on one line (a connecting line between them), stacked on a phone. */
.land-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 1000px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.land-steps li { position: relative; }
.land-steps li:not(:last-child)::after { content: ''; position: absolute; top: 20px; left: 56px; right: -20px; height: 2px; background: var(--border); }
.land-steps .num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 17px; background: var(--brand-soft); color: #4a2fc9; margin-bottom: 14px; }
.land-steps h3 { font-size: 19px; margin-bottom: 6px; }
.land-steps p { margin: 0; color: var(--land-muted); }
/* Everything in one place: the app's own area boxes (icon tile + header wash), one per area. */
.la-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.la-box { background: var(--panel); border: 1px solid var(--border); border-radius: 22px; overflow: hidden; box-shadow: 0 12px 30px rgba(23, 20, 58, 0.06); }
.la-head { display: flex; align-items: center; gap: 14px; padding: 20px 22px 16px; }
.la-head.web { background: linear-gradient(135deg, #f3efff 0%, #fff 75%); }
.la-head.maps { background: linear-gradient(135deg, #eaf2ff 0%, #fff 75%); }
.la-head.biz { background: linear-gradient(135deg, #fff6e5 0%, #fff 60%); }
.la-head h3 { font-size: 20px; letter-spacing: -0.02em; }
.la-box ul { list-style: none; margin: 0; padding: 4px 22px 22px; display: flex; flex-direction: column; gap: 10px; }
.la-box li { display: flex; gap: 10px; }
.la-box li::before { content: ''; flex: none; width: 18px; height: 18px; margin-top: 3px; background: #12663f; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Pricing: the free check leads with its number; what you may pay for is a plain list. */
.lp-card { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); background: var(--panel); border: 1px solid var(--border); border-radius: 22px; overflow: hidden; box-shadow: 0 12px 30px rgba(23, 20, 58, 0.06); }
.lp-free { padding: 28px; background: linear-gradient(135deg, #f3efff 0%, #fff 80%); }
.lp-free .lp-num { margin: 0; font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.lp-free h3 { font-size: 20px; margin: 10px 0 8px; }
.lp-free p:not(.lp-num) { margin: 0; color: var(--land-muted); }
.lp-paid { list-style: none; margin: 0; padding: 10px 28px; display: flex; flex-direction: column; }
.lp-paid li { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.lp-paid li:last-child { border-bottom: 0; }
.lp-paid b { font-size: 16px; }
.lp-paid span { color: var(--land-muted); font-size: 14px; }
/* Questions owners ask: whole-row folds. */
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-list details { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; }
.faq-list summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 18px; font-weight: 600; font-size: 16px; border-radius: 14px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ''; flex: none; width: 9px; height: 9px; margin: -4px 4px 0 0; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(45deg); transition: transform 0.15s; }
.faq-list details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq-list summary:focus-visible { outline-offset: -2px; }
.faq-list details p { margin: 0; padding: 0 18px 16px; color: var(--land-muted); }
/* The ask again, at the end. */
.land-end { padding: 16px 0 64px; }
.land-end-box { max-width: 760px; margin: 0 auto; text-align: center; padding: 40px 28px; border-radius: 22px; background: linear-gradient(135deg, var(--brand-soft), #f8f6ff 60%, var(--panel)); border: 1px solid #e3dcff; }
.land-end-box h2 { font-size: clamp(24px, 3vw, 30px); letter-spacing: -0.02em; margin-bottom: 8px; }
.land-end-box > p { margin: 0 0 20px; color: var(--land-muted); }
.land-end-box .scan-form { margin: 0 auto; }
.land-end-box .form-error { margin: 10px auto 0; text-align: left; }
@media (max-width: 900px) {
  .land-hero-grid { grid-template-columns: 1fr; }
  .la-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 760px) {
  .land-hero { padding: 28px 0 40px; }
  .land-hero .lead { font-size: 17px; }
  .landing .section { padding: 40px 0; }
  .land-steps { grid-template-columns: 1fr; gap: 24px; }
  .land-steps li { padding-left: 56px; min-height: 40px; }
  .land-steps .num { position: absolute; left: 0; top: 0; margin: 0; }
  .land-steps li:not(:last-child)::after { left: 19px; top: 48px; bottom: -20px; right: auto; width: 2px; height: auto; }
  .lp-card { grid-template-columns: 1fr; }
  .lp-free, .lp-paid { padding-left: 20px; padding-right: 20px; }
  .land-end-box { padding: 28px 16px; }
  .ld-card { padding: 16px 14px 14px; }
  .ld-rows li { padding: 10px; gap: 10px; }
}
@media (max-width: 560px) and (pointer: coarse) { .scan-last a { display: inline-block; padding: 12px 0; } }

footer { padding: 30px 0 50px; color: var(--muted); font-size: 13px; text-align: center; border-top: 1px solid var(--border); margin-top: 30px; }

/* Report */
.report { padding: 28px 0 60px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.summary { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(260px, 380px); gap: 28px; align-items: center; padding: 26px; }
.summary h1 { font-size: 26px; overflow-wrap: anywhere; }
.summary .meta { color: var(--muted); font-size: 13px; margin-top: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--panel-2); }
/* Status chips: deep text on its wash (DESIGN.md pairs), ≥4.5:1 (the bright text on the wash was 2.9–4.2:1). */
.chip.error { background: #fde8e8; color: #b42318; }
.chip.warning { background: #fff2db; color: #8a4f00; }
.chip.notice { background: var(--info-soft); color: #1d4ed8; }
.chip.good { background: #e3f4ec; color: #12663f; }
.fixall { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; border-radius: 14px; padding: 18px 20px; min-width: 260px; }
.fixall .big { font-size: 26px; font-weight: 800; }
.fixall p { margin: 2px 0 12px; opacity: 0.9; font-size: 13px; }
.fixall .btn { background: #fff; color: var(--brand); border: 0; width: 100%; }

.ring { position: relative; width: 132px; height: 132px; flex: none; }
.ring svg { transform: rotate(-90deg); }
.ring .val { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring .val b { font-size: 38px; font-weight: 800; line-height: 1; }
.ring .val span { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 4px; }
.ring.sm { width: 54px; height: 54px; }
.ring.sm .val b { font-size: 17px; }

.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; margin: 16px 0 24px; }
.cat { padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; cursor: pointer; text-decoration: none; color: var(--text); transition: transform 0.12s, border-color 0.12s; }
.cat:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.cat .label { font-weight: 700; font-size: 13px; }
.cat .sub { font-size: 12px; color: var(--muted); }

.block { margin-bottom: 22px; }
.block-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.block-head h2 { font-size: 19px; }
.block-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.block-head .grow { flex: 1; }
.block-body { padding: 10px 20px 18px; }
/* The website's backup, one line before a change (UI review S09). */
.backup-line { font-size: 13px; margin: 10px 20px 0; }
.block-body .backup-line { margin: 0 0 10px; }

.finding { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.finding:last-child { border-bottom: 0; }
.f-title { display: flex; align-items: flex-start; gap: 9px; font-weight: 700; font-size: 15px; }
.f-title .dot { margin-top: 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot.error { background: var(--bad); }
.dot.warning { background: var(--ok); }
.dot.notice { background: var(--info); }
.f-count { font-weight: 500; color: var(--muted); font-size: 13px; }
.f-why { margin: 5px 0 0 19px; color: var(--muted); font-size: 14px; }
.f-more { margin: 8px 0 0 19px; }
.f-more summary { cursor: pointer; color: var(--brand); font-size: 13px; font-weight: 600; }
.f-more + .f-more { margin-top: 4px; }
.f-more ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; max-height: 240px; overflow: auto; }
.f-more li { margin-bottom: 3px; word-break: break-all; }
.f-more .how { font-size: 13px; background: var(--panel-2); padding: 10px 12px; border-radius: 10px; margin-top: 8px; }
.fix { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 170px; }
.fix .price { font-size: 12px; color: var(--muted); text-align: right; }

.good-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 18px; margin-top: 10px; }
.good-item { display: flex; gap: 8px; font-size: 14px; }
.good-item::before { content: '✓'; color: var(--good); font-weight: 800; }
.good-wrap { margin-top: 6px; padding-top: 10px; }
.good-wrap summary { cursor: pointer; color: var(--good); font-size: 13px; font-weight: 600; }
.empty-good { color: var(--good); font-weight: 600; padding: 12px 0; }

.speed-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 10px 0; }
.speed-box { background: var(--panel-2); border-radius: 12px; padding: 14px; display: flex; gap: 14px; align-items: center; }
.speed-box .metrics { font-size: 13px; color: var(--muted); }
.speed-box .metrics b { color: var(--text); }

.top-list { display: flex; flex-direction: column; gap: 8px; }
.top-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); }
.top-item .t { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 8px; color: var(--text); text-decoration: none; }
.top-item .t b { display: block; font-weight: 600; font-size: 14px; }
.top-item .t .dot { margin-top: 5px; }
.top-item .eff { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.top-item .btn { flex: none; }
.top-item .n { width: 26px; height: 26px; border-radius: 8px; background: var(--panel); display: grid; place-items: center; font-weight: 800; font-size: 13px; }

/* Progress */
.progress-card { max-width: 620px; margin: 60px auto; padding: 34px; text-align: center; }
.progress-card h1 { font-size: 24px; margin: 10px 0 4px; overflow-wrap: anywhere; }
/* A small secondary section at the bottom of a result card (the speed fix's "Check for missing photos"). */
.fix-sub { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); text-align: left; }
.fix-sub h3 { margin: 0 0 4px; font-size: 15px; }
.fix-sub p { margin: 0 0 10px; font-size: 13.5px; }
.fix-sub #repairOut:not(:empty) { margin-top: 10px; }
/* What a fix leaves, each with "Ask Mate to fix it" and its one line. */
.fix-left { text-align: left; margin: 16px 0; }
.fix-left h3 { font-size: 15px; margin: 0 0 6px; }
.fix-left li { padding: 10px 0; }
.ask-mate { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.ask-mate .muted { font-size: 12.5px; flex: 1 1 220px; }
.fix-left .ask-line { font-size: 13px; margin: 0 0 4px; }
@media (max-width: 560px) { .progress-card { padding: 22px 16px; margin: 24px auto; } }
.bar { height: 10px; background: var(--panel-2); border-radius: 999px; overflow: hidden; margin: 22px 0 14px; }
.bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 999px; transition: width 0.6s; }
.phases { text-align: left; display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.phase { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 14px; }
.phase.done { color: var(--text); }
.phase.done::before { content: '✓'; color: var(--good); font-weight: 800; width: 18px; }
.phase.now { color: var(--text); font-weight: 600; }
.phase.now::before { content: ''; width: 14px; height: 14px; margin: 0 2px; border: 2px solid var(--border); border-top-color: var(--brand); border-radius: 50%; animation: spin 0.8s linear infinite; }
.phase.wait::before { content: '○'; width: 18px; color: var(--border); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Modal */
.modal-back { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { width: 100%; max-width: 440px; padding: 28px; }
.modal h3 { font-size: 21px; margin-bottom: 6px; }
.modal p { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
.modal label, .auth-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 12px; text-align: left; }
.auth-form input { width: 100%; margin-top: 5px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.auth-form .btn { width: 100%; margin-top: 6px; }
.modal .terms-check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; color: var(--muted); }
.modal .terms-check input { width: auto; margin-top: 2px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--brand); font-weight: 600; font-size: 13px; cursor: pointer; }
.modal input { width: 100%; margin-top: 5px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.modal .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.pill-note { font-size: 12px; background: var(--brand-soft); color: var(--brand); padding: 8px 10px; border-radius: 10px; margin-bottom: 14px; }

#navUser { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) {
  .topbar .wrap { height: auto; min-height: 62px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .site-switch select { min-width: 0; width: 100%; }
  .site-switch, #addSite { width: 100%; }
  #addSite input { flex: 1; width: auto !important; }
}
#navUser .chip { text-decoration: none; }
.acct { position: relative; }
.acct-btn { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--panel); border-radius: 999px; padding: 4px 10px 4px 4px; cursor: pointer; font-weight: 600; }
.acct-btn:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; font-weight: 700; font-size: 14px; }
.acct-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 260px; padding: 8px; display: flex; flex-direction: column; z-index: 40; }
.acct-menu[hidden] { display: none; }
.acct-head { display: flex; flex-direction: column; padding: 8px 10px 10px; border-bottom: 1px solid var(--border); font-size: 14px; }
.acct-head .muted { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.acct-bal { display: flex; align-items: center; gap: 8px; padding: 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; font-size: 14px; }
.acct-bal b { margin-right: auto; }
.acct-menu [role="menuitem"] { display: block; text-align: left; padding: 9px 10px; border-radius: 8px; color: var(--text); text-decoration: none; background: none; border: 0; cursor: pointer; font-size: 14px; }
.acct-menu [role="menuitem"]:hover { background: var(--panel-2); }
@media (max-width: 520px) { .acct-name { display: none; } }
.bad-text { color: var(--bad); }
.good-text { color: var(--good); }
.fix-cost { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 16px; }
.fix-cost div { background: var(--panel-2); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.fix-cost b { font-size: 18px; }
.fix-cost .muted { font-size: 12px; }

/* Account / admin */
.page { padding-top: 28px; padding-bottom: 60px; } /* keeps .wrap's side padding, so text never touches the screen edge */
.page h1 { font-size: 28px; margin-bottom: 4px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0; }
.stat { padding: 18px; }
.stat .k { font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.stat .v { font-size: 28px; font-weight: 800; margin-top: 4px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .n { text-align: right; white-space: nowrap; }
.table-scroll { overflow-x: auto; }
.inline-form { display: flex; gap: 6px; align-items: center; }
.inline-form input { width: 90px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.inline-form input.note { width: 160px; }
.empty { color: var(--muted); padding: 18px 0; text-align: center; }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }

.steps-list { padding-left: 20px; margin: 0 0 14px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }

/* Fix review */
.review-table td { vertical-align: top; }
.review-table textarea, .review-table input[type="text"], .review-table input[type="url"] { width: 100%; min-width: 260px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); font: inherit; font-size: 13px; color: inherit; }
.review-table img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); }
.review-table .cur { color: var(--muted); font-size: 13px; }
.review-table textarea.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; min-width: 520px; }
/* Phones: each row stacks (tick + name on top, then the current and new text full width), no sideways scrolling. */
@media (max-width: 600px) {
  .review-table thead { display: none; }
  .review-table, .review-table tbody { display: block; }
  .review-table tr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .review-table tr:last-child { border-bottom: 0; }
  .review-table td { display: block; padding: 0; border: 0; flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
  .review-table td:first-child { flex: none; }
  .review-table td:nth-child(2) { flex: 1 1 0; }
  .review-table td.n { text-align: left; flex: none; }
  .review-table textarea, .review-table input[type="text"], .review-table input[type="url"], .review-table textarea.mono { min-width: 0; }
}
.sticky-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding: 14px 18px; margin-top: 16px; }
.sticky-bar .cost { font-size: 15px; }
/* Fix details (/fix/…), design pass 2026-10-22 (docs/design-pass/fix-details.md): the bar holds the cost and one violet
   button (Apply, or Add funds when the balance is short), errors stay above it, the review text shows whole. */
.fx-back { display: inline-flex; align-items: center; min-height: 36px; }
.fx-site { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 4px 0 0; font-size: 13px; font-weight: 600; }
.fx-bar [hidden] { display: none; }
.fx-bar-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fx-bar-act { display: flex; gap: 8px; align-items: center; }
.fx-saved { font-size: 12.5px; }
.fx-saved:empty { display: none; }
.fx-short { display: inline-flex; padding: 1px 8px; border-radius: 999px; background: #fde8e8; color: #b42318; font-size: 12.5px; font-weight: 700; }
.fx-err { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: #fde8e8; color: #b42318; font-size: 14px; font-weight: 600; }
.fx-err[hidden] { display: none; }
/* A field reached with Tab never hides under the bottom bar. */
html:has(.fx-bar) { scroll-padding-bottom: 120px; }
.review-table textarea { field-sizing: content; min-height: 4.6em; }
.review-table .cur.over { color: #8a4f00; font-weight: 600; }
.review-table input[type="checkbox"], #all { width: 18px; height: 18px; accent-color: var(--brand); }
@media (max-width: 600px) {
  .fx-back { min-height: 44px; }
  .fx-bar { padding: 12px 14px; gap: 10px; }
  .fx-bar-act, .fx-bar-act .btn { width: 100%; }
  .fx-bar-act .btn { min-height: 44px; }
  /* The header row hides on a phone: each cell says what it is. */
  .review-table td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .review-table input[type="checkbox"], #all { width: 24px; height: 24px; margin: 10px; }
  html:has(.fx-bar) { scroll-padding-bottom: 170px; }
}
.bar .indeterminate { display: block; width: 35%; animation: slide 1.4s ease-in-out infinite; }
@keyframes slide { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
.result-ok { color: var(--good); font-weight: 600; }
.result-bad { color: var(--bad); font-weight: 600; }

.back-link { display: inline-block; margin-bottom: 12px; font-weight: 600; font-size: 14px; text-decoration: none; }
.back-link:hover { text-decoration: underline; }

/* ---------- App shell: sidebar + main column (dashboard) ---------- */
.app-body { background: var(--bg); }
.shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--panel); border-right: 1px solid var(--border); padding: 18px 14px; display: flex; flex-direction: column; gap: 4px; }
.side-logo { margin: 0 6px 18px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav a, .side-site { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 500; font-size: 14px; }
.side-nav a:hover, .side-site:hover { background: var(--panel-2); }
.side-nav a.active, .side-site.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.ico { width: 20px; height: 20px; flex: none; }
.side-title { margin: 18px 10px 6px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.side-sites { display: flex; flex-direction: column; gap: 2px; }
.side-site .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); flex: none; }
.side-site .dot.on { background: var(--good); }
.side-site-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-score { font-size: 12px; font-weight: 700; color: var(--muted); }
.side-add-btn { text-align: left; padding: 9px 10px; border: 0; background: none; color: var(--brand); font-weight: 600; font-size: 14px; cursor: pointer; border-radius: 10px; }
.side-add-btn:hover { background: var(--panel-2); }
.side-add { display: none; gap: 6px; padding: 6px 4px; }
.side-add.open { display: flex; }
.side-add input { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); font-size: 13px; }
.main-col { min-width: 0; display: flex; flex-direction: column; }
.app-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 12px 28px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); min-height: 64px; }
.top-title { flex: 1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.top-site { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.top-site b { font-size: 16px; }
.top-site .muted { font-size: 12.5px; }
.top-h { font-size: 16px; }
.menu-btn { display: none; border: 1px solid var(--border); background: var(--panel); border-radius: 10px; width: 40px; height: 40px; font-size: 18px; cursor: pointer; }
.app-main { padding: 24px 28px 60px; max-width: 1180px; width: 100%; }
.side-backdrop { display: none; }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; z-index: 60; width: 270px; transform: translateX(-100%); transition: transform 0.2s; box-shadow: var(--shadow); }
  .menu-open .sidebar { transform: none; }
  .menu-open .side-backdrop { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 55; }
  .menu-btn { display: block; }
  .app-top { padding: 10px 16px; }
  .app-main { padding: 16px 16px 50px; }
  .acct-name { display: none; }
}

/* Overview */
.hero-score { display: flex; align-items: center; gap: 24px; padding: 24px; flex-wrap: wrap; }
.hero-score h1 { font-size: 26px; }
.hero-msg { margin: 4px 0 2px; font-size: 16px; color: var(--text); }
.hero-score .meta { color: var(--muted); font-size: 13px; }
.hero-actions { display: flex; flex-direction: column; gap: 8px; min-width: 190px; }
.admin-pages { font-size: 12px; display: flex; align-items: center; gap: 6px; }
.setup-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.setup-item { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: var(--text); font-size: 14px; }
.setup-item:hover { border-color: var(--brand); }
.setup-item b { display: block; }
.setup-item .muted { font-size: 12.5px; }
.setup-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.setup-item.done { opacity: 0.6; }
.setup-item.done .setup-check { background: var(--good); border-color: var(--good); color: #fff; }
.next-list { display: flex; flex-direction: column; }
.next-item { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border); }
.next-item:last-child { border-bottom: 0; }
.next-item b { font-size: 14px; }
.next-item .muted { font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.next-ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; flex: none; background: var(--info); }
.next-ico.error { background: var(--bad); }
.next-ico.warning { background: var(--ok); }
.next-more summary { cursor: pointer; color: var(--brand); font-weight: 600; font-size: 12.5px; margin-top: 4px; }
.next-item .muted { -webkit-line-clamp: unset; }
.more-link { display: inline-block; margin-top: 10px; font-weight: 600; font-size: 14px; text-decoration: none; }
.act-list { display: flex; flex-direction: column; }
.act-item { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: 14px; }
.act-item:last-child { border-bottom: 0; }
.act-item .muted { font-size: 12.5px; white-space: nowrap; }
.act-ico { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); font-size: 13px; flex: none; }
.act-ico.good { background: var(--good); color: #fff; font-weight: 700; }
@media (max-width: 1000px) { .setup-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .setup-list { grid-template-columns: 1fr; } .hero-actions { width: 100%; } }

/* Google Maps tab */
.listing-row { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border); }
.checkup-head { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.check-list li { display: flex; gap: 10px; font-size: 14px; }
.check-list li > span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 700; font-size: 12px; }
.check-list li.ok > span { background: var(--good-soft); color: var(--good); }
.check-list li.bad > span { background: var(--bad-soft); color: var(--bad); }
.check-list li.unk > span { background: #eef1f6; color: var(--muted); }
.check-list .muted { font-size: 13px; }
/* ---- Google Maps page (design pass 2026-10-22) ---- */
/* Checklist marks in the deeper status pairs (4.5:1+), like Home. */
.check-list li.ok > span { background: #e3f4ec; color: #12663f; }
.check-list li.bad > span { background: #fde8e8; color: #b42318; }
.check-list li.unk > span { background: #f0eff5; color: #5f5b78; }
.maps-more { margin-top: 14px; }
.maps-more > summary { padding: 12px 0; cursor: pointer; }
.maps-more[open] > summary { margin-bottom: 8px; }
.comp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.comp-list li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--border); }
.comp-list li:first-child { border-top: 0; }
.comp-list .muted { font-size: 13px; }
#mapForm .form-row > label { min-width: 0; max-width: 100%; }
#mapForm select { width: 100%; }
/* The map's three numbers stay in one row on a phone (the number leads, the label under it is short). */
@media (max-width: 600px) {
  #mapResult .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #mapResult .stat { padding: 10px 6px; }
  #mapResult .stat .v { font-size: 20px; }
  /* UX review 2026-10-23: the number first (Number Leads Rule), its label under it in sentence case, so the three
     numbers line up at the top instead of under 2–4 lines of capitals. */
  #mapResult .stat { display: flex; flex-direction: column; }
  #mapResult .stat .v { order: -1; margin-top: 0; font-size: 19px; line-height: 1.2; }
  #mapResult .stat .k { margin-top: 4px; text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: #5b6170; }
}
/* Smaller dots on a phone, where 49 of them share ~300 px. */
.rank-dot.sm span { width: 24px; height: 24px; font-size: 12px; }
/* A map check on its way: a spinner, a bar that fills as spots are answered. */
.mc-line.mj { background: var(--panel-2); }
.mj-body { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.mj-spin { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border-radius: 50%; border: 2px solid var(--brand-soft); border-top-color: var(--brand); animation: mj-spin .8s linear infinite; }
.mj-bar { height: 8px; border-radius: 99px; background: var(--brand-soft); overflow: hidden; }
.mj-bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand), #8b6cf6); transition: width .6s ease-out; animation: mj-pulse 1.6s ease-in-out infinite; }
@keyframes mj-spin { to { transform: rotate(360deg); } }
@keyframes mj-pulse { 50% { opacity: .65; } }
@media (prefers-reduced-motion: reduce) { .mj-spin, .mj-bar > i { animation: none; } }
/* Address suggestions under an address field (public/dash/address-pick.js). */
.ap-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 24px rgba(15, 23, 42, 0.06); }
.ap-list li[data-i] { display: flex; flex-direction: column; gap: 1px; padding: 9px 10px; min-height: 44px; border-radius: 8px; cursor: pointer; font-size: 14px; text-align: left; }
.ap-list li[data-i] span { font-size: 12.5px; color: var(--muted); }
.ap-list li[aria-selected="true"], .ap-list li[data-i]:hover { background: var(--brand-soft); }
.ap-list .ap-by { padding: 4px 10px 2px; font-size: 11.5px; color: var(--muted); text-align: right; }
/* Before the first map check: customers come to you or not, and the starting address. */
.cs .cs-q { margin: 12px 0 6px; }
.cs .cs-field { position: relative; }
.cs .cs-field input { width: 100%; }
.cs .cs-note { font-size: 13px; margin: 6px 0 0; }
/* Everything on your Google listing (public/dash/gbplisting.js): Google next to My business. */
.gl-table th[scope="row"] { width: 22%; min-width: 120px; text-align: left; vertical-align: top; font-weight: 600; }
.gl-table th[scope="row"] .chip { margin-top: 6px; font-size: 12px; padding: 3px 9px; }
.gl-table td { vertical-align: top; min-width: 200px; white-space: pre-line; overflow-wrap: anywhere; }
.gl-only { margin-top: 6px; font-size: 13px; }
.gl-warn { margin-bottom: 10px; }
.gl-sum { margin: 0 0 10px; }
.gl-sub { margin: 12px 0 4px; }
.gl-steps { margin: 8px 0 14px; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.gl-days { list-style: none; margin: 0; padding: 0; max-width: 460px; }
.gl-days li { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-top: 1px solid var(--border); font-size: 14px; }
.gl-days li:first-child { border-top: 0; }
.gl-days li span:last-child { text-align: right; }
.gl-foot { margin: 12px 0 0; font-size: 13px; }
/* ---- end Google Maps page ---- */
.table tr.me td { background: var(--brand-soft); }
.plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.plan-list > li { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; }
.plan-list .muted { font-size: 13px; margin-top: 2px; }
.plan-list > li > .grow { min-width: 0; } /* a long link or word wraps inside the step on phones */
.plan-num { width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.plan-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.plan-tags .tag { margin: 0; font-size: 12.5px; padding: 3px 8px; background: var(--panel-2); color: var(--text); } /* not violet: they can't be pressed */
.plan-copy { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; }
.plan-copy textarea, .plan-copy input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); color: var(--text); font: inherit; font-size: 13px; resize: vertical; }
.listing-details { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; font-size: 14px; }
.listing-details p { margin: 2px 0 0; }
.rank-map { height: 420px; border-radius: 12px; border: 1px solid var(--border); z-index: 0; }
.rank-dot span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 12px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; margin: 10px 0 4px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }

/* Website dashboard */
.answer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; }
.answer-row .engine { width: 90px; font-weight: 600; font-size: 13px; }
.answer-snip { flex-basis: 100%; font-size: 12px; padding-left: 98px; }
.vol-line { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; font-weight: 400; color: var(--muted); }
.vol-line b { color: var(--text); font-weight: 600; }
.num-in { width: 100px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); text-align: right; }
.site-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.site-switch { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.site-switch select, .form-row select, .field select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: inherit; font: inherit; font-weight: 600; max-width: 100%; }
.site-switch select { min-width: 220px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; }
.tabs a { padding: 10px 14px; text-decoration: none; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a.active { color: var(--brand); border-bottom-color: var(--brand); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-2 > .block { margin: 0; }
.chart { width: 100%; height: auto; margin-bottom: 8px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--muted); }
.field.wide, .check, .field-actions { grid-column: 1 / -1; }
.field input, .field textarea, .form-row input { padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; font-size: 14px; font-weight: 400; }
.field textarea { resize: vertical; }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px; }
/* My business: "Want me to tidy this up?" under a free-text field (public/dash/tidy.js). */
.tidy { grid-column: 1 / -1; margin-top: -6px; }
.tidy-ask { background: none; border: 0; padding: 2px 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--brand); cursor: pointer; }
.tidy-ask:hover { text-decoration: underline; }
.tidy .busy { opacity: .5; pointer-events: none; }
.tidy-box { border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border)); background: var(--brand-soft); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.tidy-head { font-size: 12px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .04em; }
.tidy-text { white-space: pre-line; color: var(--text); background: var(--panel); border-radius: 9px; padding: 9px 11px; }
.tidy-note { margin: 0; font-size: 13px; color: var(--muted); }
.tidy-q p { margin: 0 0 6px; font-weight: 600; color: var(--text); }
.tidy-opts, .tidy-actions, .tidy-type { display: flex; flex-wrap: wrap; gap: 6px; }
.tidy-type { margin-top: 6px; }
.tidy-type input { flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid var(--border); border-radius: 9px; font: inherit; font-size: 14px; background: var(--panel); color: var(--text); }
.edited { font-size: 11px; font-weight: 600; color: var(--brand); background: var(--brand-soft); padding: 1px 6px; border-radius: 6px; margin-left: 4px; }
.swatches { display: flex; gap: 6px; margin: 2px 0; }
.swatch { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border); }
.logo-preview { max-height: 48px; max-width: 200px; object-fit: contain; align-self: flex-start; background: var(--panel-2); border-radius: 8px; padding: 4px; }
.profile-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.teaser { border-style: dashed; }
.form-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.form-row label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); font-weight: 600; }
.danger-row { display: flex; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.tag { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--panel-2); color: var(--muted); margin-left: 4px; }
.pop { display: inline-block; width: 90px; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--brand) var(--w), var(--panel-2) var(--w)); }
.kw-group { border-top: 1px solid var(--border); padding: 10px 0; }
.kw-group summary { cursor: pointer; padding: 4px 0; }
.bars { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.bar-row { display: grid; grid-template-columns: 120px 1fr 60px; gap: 10px; align-items: center; font-size: 13px; }
.bar-row b { text-align: right; }
.bar-fill { height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--brand) var(--w), var(--panel-2) var(--w)); }
@media (max-width: 760px) {
  .grid-2, .form-grid { grid-template-columns: 1fr; }
  .profile-head { flex-direction: column; }
}

.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(140px); background: #0f172a; color: #fff; padding: 11px 18px; border-radius: 12px; transition: transform 0.25s; z-index: 60; max-width: calc(100% - 32px); }
.toast.show { transform: translateX(-50%); }

@media (max-width: 900px) {
  .cats { grid-template-columns: repeat(3, 1fr); }
  .summary { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .chips { justify-content: center; }
  .steps, .features, .fix-types { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .cats { grid-template-columns: repeat(2, 1fr); }
  .finding { grid-template-columns: 1fr; }
  .fix { flex-direction: row; align-items: center; gap: 10px; min-width: 0; }
  .fix .price { text-align: left; }
  .top-item { padding: 10px 12px; gap: 10px; }
  .teaser .block-head { flex-wrap: wrap; }
  .scan-form { flex-direction: column; }
  .speed-row { grid-template-columns: 1fr; }
}

/* ---------- popups ---------- */
.btn-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn-danger:hover { filter: brightness(1.08); }
.modal h3 + .charge-box { margin-top: 14px; }
.charge-box { background: var(--panel-2); border-radius: 12px; padding: 6px 16px; }
.charge-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; font-size: 15px; }
.charge-line:first-child b { font-size: 20px; color: var(--brand); }
.charge-line + .charge-line { border-top: 1px solid var(--border); }
.charge-line.sub { font-size: 13.5px; color: var(--muted); padding: 6px 0; }
.modal .charge-note { margin: 12px 0 0; font-size: 13px; color: var(--good); }
.modal label.dont-ask { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 6px; font-size: 13.5px; font-weight: 500; color: var(--muted); cursor: pointer; }
.modal .dont-ask input { width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--brand); cursor: pointer; }

/* ---------- content: tabs and pages ---------- */
.seg-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--panel-2); border-radius: 12px; margin-bottom: 16px; }
.seg-tabs button { border: 0; background: transparent; padding: 8px 16px; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--muted); cursor: pointer; }
.seg-tabs button.active { background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.btn-row { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.block-body > .btn-row { justify-content: flex-start; }
.score-pill { display: inline-block; min-width: 36px; text-align: center; padding: 2px 8px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.kw-inline { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 14px; }
.kw-inline .field { flex: 1 1 260px; }
.check-grid { align-items: start; }
.check-group + .check-group { margin-top: 14px; }
.check-group h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 4px; }
.check-row { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.check-row:last-child { border-bottom: 0; }
.check-ico { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.check-ico.good { background: var(--good-soft); color: var(--good); }
.check-ico.bad { background: var(--bad-soft); color: var(--bad); }
.check-ico.warn { background: var(--ok-soft); color: var(--ok); }
.check-ico.na { background: var(--panel-2); color: var(--muted); }
.check-fix { font-size: 13px; color: var(--muted); margin-top: 2px; }
.mini-stats { margin-bottom: 12px; }
.mini-stats .stat { padding: 10px 12px; }
.mini-stats .v { font-size: 22px; }
.outline { list-style: none; padding: 0; margin: 8px 0 0; font-size: 13.5px; }
.outline li { padding: 3px 0; }
.outline .o-h2 { padding-left: 14px; } .outline .o-h3 { padding-left: 28px; } .outline .o-h4 { padding-left: 42px; }
.outline .tag { margin: 0 6px 0 0; }
.img-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.img-item { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; }
.img-item img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; background: var(--panel-2); }
.sugg { border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px; }
.sugg-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; cursor: pointer; }
.sugg-head .tag { margin: 0; }
.sugg-title { font-size: 15px; margin: 18px 0 8px; }
.sugg-old { font-size: 13.5px; color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--bad) 50%, transparent); }
.sugg-old .muted { text-decoration: none; display: inline-block; }
.sugg-new { border: 1px solid var(--border); border-left: 3px solid var(--good); border-radius: 8px; padding: 10px 12px; background: var(--panel); font-size: 14.5px; }
.sugg-new.post-body { min-height: 0; max-height: none; border-left: 3px solid var(--good); }
.sugg-new[contenteditable="true"]:focus, .seg-text:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
.seg-list { display: flex; flex-direction: column; gap: 6px; max-height: 70vh; overflow: auto; padding-right: 4px; }
.seg { display: grid; grid-template-columns: 44px 1fr; gap: 8px; align-items: start; }
.seg .tag { margin: 8px 0 0; text-align: center; }
.seg-text { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--panel); font-size: 14.5px; line-height: 1.6; }
.seg-text.seg-h1, .seg-text.seg-h2 { font-weight: 700; font-size: 17px; }
.seg-text.seg-h3, .seg-text.seg-h4 { font-weight: 700; }
.seg-text p { margin: 0 0 8px; }

.fix-it { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.fix-it .dont-ask { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--muted); cursor: pointer; margin: 0; }
.fix-it .dont-ask input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.live-progress { display: flex; flex-direction: column; gap: 0; background: var(--panel-2); border-radius: 10px; padding: 10px 14px 4px; margin-bottom: 12px; font-size: 14px; }
.live-progress .bar { margin: 8px 0; height: 6px; }
.fix-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; background: var(--panel); position: sticky; top: 0; z-index: 2; }
.fix-bar .dont-ask { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.fix-bar .dont-ask input, .pick-col input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.pages-table .pick-col { width: 34px; padding-right: 0; }
.speed-list { list-style: none; padding: 0; margin: 0 0 12px; font-size: 14px; display: grid; gap: 4px; }
.speed-list li { color: var(--text); }
.speed-defer { display: flex !important; align-items: flex-start !important; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; cursor: pointer; }
.speed-defer input { margin-top: 3px !important; width: 16px; height: 16px; accent-color: var(--brand); flex: none; }
.img-pick-row { grid-template-columns: 18px 64px 1fr !important; cursor: pointer; }
.img-pick-row input { width: 16px; height: 16px; accent-color: var(--brand); }
.choice-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.modal .choice-list label { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; font-weight: 500; cursor: pointer; }
.modal .choice-list label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.modal .choice-list input { width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--brand); }
.fixed-banner { background: var(--good-soft); color: var(--text); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }

/* ---------- a page shown in a window over Mate's chat (?embed=1): no top bar or menu of its own ---------- */
.embedded .topbar, .embedded #verifyBar, .embedded .sidebar, .embedded .app-top, .embedded .side-backdrop, .embedded .sub-tabs { display: none; }
.embedded .shell { display: block; }
.embedded .app-main { padding: 16px 20px 40px; }

/* ---------- PDF (print) version of the report ---------- */
.print-only { display: none; }
@media print {
  @page { margin: 12mm; }
  :root, :root:not([data-theme="light"]) {
    --bg: #fff; --panel: #fff; --panel-2: #f2f3f9; --text: #172033; --muted: #6b7280; --border: #e6e8f0;
    --brand: #6544e9; --brand-2: #8b6cf6; --brand-soft: #efeaff; --good-soft: #dcfce7; --ok-soft: #fef3c7; --bad-soft: #fee2e2; --info-soft: #dbeafe;
    --shadow: none; color-scheme: light;
  }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff; font-size: 12px; }
  .print-only { display: block; }
  .topbar { position: static; border: 0; box-shadow: none; background: #fff; }
  .topbar .btn, #navUser, .toast, #verifyBar, .back-link, .teaser, .fixall, [data-fix], [data-all], .link-btn, .finding > .btn, .top-item .btn { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .card { box-shadow: none; break-inside: avoid; }
  .block { break-inside: auto; }
  .finding, .top-item, .cat, .speed-box, .good-item { break-inside: avoid; }
  .block-head { break-after: avoid; }
  .cats { grid-template-columns: repeat(4, 1fr); }
  a { color: inherit; text-decoration: none; }
  details > summary { list-style: none; }
  details > summary::-webkit-details-marker { display: none; }
}

/* ---------- email confirmation bar ---------- */
.verify-bar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--ok-soft); color: var(--text); border-bottom: 1px solid var(--border); padding: 10px 20px; font-size: 14px; }

/* ---------- content: blog post editor ---------- */
.field-more { grid-column: 1 / -1; font-size: 13px; }
.field-more summary { cursor: pointer; color: var(--brand); font-weight: 600; margin-bottom: 8px; }
.field-more .field { margin-bottom: 10px; }
/* ---------- Content → Your posts (design pass 2026-10-22): rows that stack on a phone; status chips in the deep pairs */
.ct-posts { list-style: none; margin: 0; padding: 0 8px 6px; }
.ct-post { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 12px; border-bottom: 1px solid var(--border); }
.ct-post:last-child { border-bottom: 0; }
.ct-post-main { flex: 1 1 260px; min-width: 0; display: grid; gap: 4px; }
.ct-post-kw { font-size: 12.5px; color: var(--muted); }
.ct-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--muted); }
.ct-post .chip.good { background: #e3f4ec; color: #12663f; }
.ct-post .chip.warning { background: #fff2db; color: #8a4f00; }
.ct-post .chip.error { background: #fde8e8; color: #b42318; }
.ct-post .chip:not(.good):not(.warning):not(.error) { color: #3a3658; }
.ct-nav button:not(.active) { color: #5f5b78; }
/* Post ideas use the same rows (UX review 2026-10-23); the ones past the first 8 wait for "Show all". */
.ct-ideas > li[hidden] { display: none; }
.ct-ideas-more { padding-top: 6px; }
@media (max-width: 640px) {
  .ct-post-act { width: 100%; }
  .ct-ideas-more .btn { min-height: 44px; }
  .ct-post-act .btn, .ct-nav button, #postForm .btn { min-height: 44px; }
  .field-more summary { padding: 12px 0; margin-bottom: 0; }
}
.post-editor { display: flex; flex-direction: column; gap: 18px; }
.post-editor > .field input { font-size: 18px; font-weight: 700; }
.rt-bar { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 6px; }
.post-body { border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); padding: 18px 20px; font-size: 15.5px; font-weight: 400; line-height: 1.7; min-height: 300px; max-height: 70vh; overflow: auto; }
.post-body:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
.post-body h2 { font-size: 22px; margin: 22px 0 8px; }
.post-body h3 { font-size: 18px; margin: 18px 0 6px; }
.post-body p, .post-body ul, .post-body ol { margin: 0 0 12px; }
.faq-edit { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.faq-edit .faq-a { grid-column: 1; }
.faq-edit [data-del-faq] { grid-row: 1; grid-column: 2; }
.faq-edit input, .faq-edit textarea { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; font-size: 14px; font-weight: 400; }
.faq-edit .faq-q { font-weight: 600; }
#addFaq { align-self: flex-start; margin-top: 8px; }
/* The blog editor after the UI review: question numbers, the paragraph style, the chosen image, the optional search
   settings, and "Publish future posts automatically". */
.faq-edit .faq-n { grid-column: 1; font-size: 12px; font-weight: 700; color: var(--muted); }
.faq-edit .faq-q, .faq-edit .faq-a { grid-column: 1; }
.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; }
.rt-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 2px; }
.rt-now { align-self: center; font-size: 12px; }
.img-now { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; font-size: 13px; }
.img-now img { width: 120px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.img-change > summary { list-style: none; display: inline-flex; cursor: pointer; margin-bottom: 8px; }
.img-change > summary::-webkit-details-marker { display: none; }
.post-adv { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.post-adv > summary { cursor: pointer; }
.post-adv[open] > summary { margin-bottom: 10px; }
.switch-row { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.switch-row input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand); }
.img-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.img-opt { position: relative; cursor: pointer; border: 2px solid var(--border); border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--panel-2); }
.img-opt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-opt input { position: absolute; opacity: 0; }
.img-opt:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.img-opt:has(input:focus-visible) { outline: 2px solid var(--brand); }
.img-opt.none span { font-size: 13px; color: var(--muted); }
.serp-box { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; background: var(--panel); max-width: 640px; }
.serp-title { color: #1a0dab; font-size: 18px; line-height: 1.3; }
.serp-url { color: var(--good); font-size: 13px; margin: 2px 0 4px; }
.serp-desc { font-size: 14px; color: var(--muted); }
.post-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Map grid: hover card with the top 3 at that spot + your position */
.leaflet-tooltip.rank-tooltip { padding: 0; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, .18); background: #fff; }
.rank-tip { min-width: 220px; max-width: 280px; padding: 10px 12px; font-size: 13px; line-height: 1.4; white-space: normal; color: #0f172a; }
.rank-tip-h { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #64748b; margin-bottom: 6px; }
.rank-tip ol { list-style: none; margin: 0 0 8px; padding: 0; }
.rank-tip li { padding: 3px 0; border-bottom: 1px solid #f1f5f9; }
.rank-tip li span { display: block; font-size: 12px; color: #64748b; }
.rank-tip li.me { color: #15803d; font-weight: 600; }
.rank-tip-you { border-left: 4px solid; padding: 4px 8px; background: #f8fafc; border-radius: 4px; }

/* Map check: searches to check */
.kw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kw-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--line, #e5e7eb); border-radius: 999px; background: #fff; font-size: 14px; cursor: pointer; user-select: none; }
.kw-chip input { margin: 0; accent-color: var(--brand); }
.kw-chip small { color: var(--muted); font-size: 12px; }
.kw-chip.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, #fff); }
.map-summary tbody tr { cursor: pointer; }
.map-pick { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.map-summary tbody tr:hover, .map-summary tbody tr.sel { background: color-mix(in srgb, var(--brand) 7%, #fff); }

/* Overview: where customers come from (Connect with Google) */
.src-card .block-head select { width: auto; }
/* The period picker in the app's field look, not the browser's bare box (UX review 2026-10-23). */
.src-card #srcDays { min-height: 40px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; }
@media (pointer: coarse) { .src-card #srcDays { min-height: 44px; } }
.src-connect { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.src-fine { font-size: 13px; margin: 0; }
.src-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.src-tile { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; background: var(--panel); }
.src-tile.off { background: var(--panel-2); }
.src-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.src-ico { font-size: 18px; }
.src-big { font-size: 30px; font-weight: 800; line-height: 1.1; }
.src-sub { color: var(--muted); font-size: 13px; }
.src-chg { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.src-chg.up { color: var(--good); }
.src-chg.down { color: var(--bad); }
.src-meta { color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.src-note { margin: 0; color: var(--muted); font-size: 13.5px; }
.src-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
/* Settings → Google connection: a gap between the chosen data and its buttons (UX review 2026-10-23: "Choose the data" touched the list). */
#googleSettings .src-list { margin-bottom: 14px; }
.src-queries { margin-top: 18px; }
.src-queries h3 { font-size: 15px; margin-bottom: 8px; }
.src-foot { margin-top: 14px; font-size: 13px; }
.src-choose { margin-top: 12px; }
.src-choose select { min-width: 200px; }

/* Admin: one account, and the bar shown while viewing the app as a user */
.admin-user .admin-h { font-size: 15px; margin: 18px 0 8px; }
.admin-user .check-row { flex-direction: row; align-items: center; gap: 6px; }
.support-bar { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 8px 16px; background: #17143a; color: #fff; font-size: 14px; }
.support-bar .btn { background: #fff; color: #17143a; border-color: #fff; }

/* ---------- Simple mode: mode switch + home with one box per place ---------- */
.mode-toggle { display: inline-flex; padding: 3px; background: var(--panel-2); border-radius: 10px; margin-left: auto; }
.mode-toggle button { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: 13px; color: var(--muted); cursor: pointer; }
.mode-toggle button[aria-checked="true"], .mode-toggle button[aria-pressed="true"] { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(23, 20, 58, .12); font-weight: 700; }
/* My business: Details · Photos · Design */
.sub-tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--panel-2); border-radius: 10px; margin: 0 0 16px; max-width: 100%; overflow-x: auto; }
.sub-tabs a { padding: 7px 14px; border-radius: 8px; font-weight: 600; font-size: 14px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.sub-tabs a.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(23, 20, 58, .12); font-weight: 700; }
.s-hero { margin: 4px 0 20px; }
.s-hero > p:first-child { margin: 0 0 4px; color: var(--muted); font-weight: 600; }
.s-hero h1 { font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -0.03em; margin: 0 0 6px; }
.s-hero-sub { margin: 0; color: var(--muted); font-size: 15px; }
.s-hero-sub b { color: var(--text); }
.s-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.s-box { background: var(--panel); border: 1px solid var(--border); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 12px 30px rgba(23, 20, 58, .06); min-width: 0; }
.s-box.wide { grid-column: 1 / -1; }
.s-head { padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 16px; }
.s-head.web { background: linear-gradient(135deg, #f3efff 0%, #fff 75%); }
.s-head.maps { background: linear-gradient(135deg, #eaf2ff 0%, #fff 75%); }
.s-head.ads { background: linear-gradient(135deg, #e8f7ef 0%, #fff 75%); }
.s-head.social { background: linear-gradient(135deg, #fdebf3 0%, #fff 75%); }
.s-head.biz { background: linear-gradient(135deg, #fff6e5 0%, #fff 60%); }
.s-title { display: flex; align-items: center; gap: 14px; }
.s-title h2 { font-size: 20px; letter-spacing: -0.02em; margin: 0; }
.s-title p { margin: 2px 0 0; font-size: 14px; color: #3a3658; }
.s-ico { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: #fff; flex: none; }
.s-ico.web { background: #6544e9; box-shadow: 0 8px 18px rgba(101, 68, 233, .3); }
.s-ico.maps { background: #1d5fd6; box-shadow: 0 8px 18px rgba(29, 95, 214, .3); }
.s-ico.ads { background: #15803d; box-shadow: 0 8px 18px rgba(21, 128, 61, .28); }
.s-ico.social { background: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af); box-shadow: 0 8px 18px rgba(221, 42, 123, .3); }
.s-ico.biz { background: #b7791f; box-shadow: 0 8px 18px rgba(183, 121, 31, .28); }
.s-chip { padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.s-chip.good { background: #e3f4ec; color: #12663f; }
.s-chip.ok { background: #fff2db; color: #8a4f00; }
.s-chip.bad { background: #fde8e8; color: #b42318; }
.s-chip.off { background: #f0eff5; color: #5f5b78; }
.s-chip.soon { background: #efebff; color: #4a2fc9; }
.s-stats { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.s-stats > div { flex: 1 1 160px; min-width: 0; }
.s-stat-col { display: flex; flex-direction: column; gap: 10px; }
.s-big { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.15; }
.s-small { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.s-stars { color: #f59e0b; font-size: 17px; }
.s-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: #3a3658; }
.s-legend span { display: inline-flex; align-items: center; gap: 4px; }
.s-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.s-map { position: relative; width: 176px; height: 176px; flex: none !important; border-radius: 16px; overflow: hidden; background: #eef0ea; box-shadow: inset 0 0 0 1px rgba(23, 20, 58, .06); }
.s-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.s-dots { position: absolute; inset: 5px; display: grid; place-items: center; }
.s-dots span { width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; font-size: 9.5px; font-weight: 800; color: #fff; box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(23, 20, 58, .25); }
.s-dots .top { background: #15803d; }
.s-dots .low { background: #f59e0b; color: #3a2600; }
.s-dots .no { background: #e5484d; }
.s-dots .na { background: #f0eff5; box-shadow: 0 0 0 1.5px #fff; }
.s-since { align-self: flex-start; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.s-since b { font-size: 15px; }
.s-since .was { color: #b7791f; }
.s-since .now { color: #15803d; }
.s-since .down { color: #b42318; }
.s-delta { padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.s-delta.up { background: #e3f4ec; color: #12663f; }
.s-delta.down { background: #fde8e8; color: #b42318; }
.s-mini3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.s-mini3 > div { padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .75); border: 1px solid var(--border); }
.s-mini3 > div.empty { border-style: dashed; }
.s-mini3 > div.empty .s-big { color: #c4c1d4; }
.s-body { padding: 4px 22px 18px; display: flex; flex-direction: column; flex: 1; }
.s-body-h { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 0 4px; }
.s-body-h h3 { margin: 0; font-size: 15px; }
.s-body-h span { font-size: 12px; color: var(--muted); }
.s-step { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); }
.s-num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 13px; font-weight: 800; }
.s-step-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.s-step-t b { font-size: 14.5px; }
.s-step-t span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.s-step-t span.quick { color: #12663f; }
.s-step .btn { white-space: nowrap; }
.s-more { margin: 8px 0 0; }
.s-more summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--brand); padding: 4px 0; }
.s-more[open] summary { margin-bottom: 4px; }
.s-done { padding: 12px 0; color: #12663f; font-weight: 600; }
.s-note { margin: 8px 0; font-size: 13.5px; color: var(--muted); }
.s-link { margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 700; text-decoration: none; }
.s-soon { list-style: none; margin: 0 0 12px; padding: 0; }
.s-soon li { padding: 10px 0; border-top: 1px solid var(--border); font-size: 14px; color: #3a3658; }
.s-biz-head { border-bottom: 1px solid #f3eee2; }
.s-biz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding: 18px 22px 20px; }
.s-biz h3 { font-size: 15px; margin: 0 0 10px; }
.s-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.s-tags span, .s-tags .add { padding: 6px 11px; border-radius: 999px; background: var(--panel-2); font-size: 13px; font-weight: 600; }
.s-tags span.area { background: #e6f0ff; color: #174ea6; }
.s-tags .add { background: #fff; border: 1px dashed #cfc9e8; color: var(--brand); text-decoration: none; font-weight: 700; }
.s-searches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; font-weight: 600; }
.s-searches li { display: flex; align-items: center; gap: 8px; }
.s-searches li span { width: 22px; height: 22px; border-radius: 50%; background: #fff2db; color: #8a4f00; display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: none; }
@media (max-width: 980px) { .s-boxes, .s-biz { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .s-map { width: 150px; height: 150px; } .s-dots span { width: 16px; height: 16px; font-size: 8.5px; } .s-mini3 { grid-template-columns: 1fr 1fr 1fr; } .s-head, .s-body { padding-left: 16px; padding-right: 16px; } }
@media (max-width: 560px) { .top-title .chip { display: none; } .mode-toggle { margin-left: 0; } .mode-toggle button { padding: 5px 10px; } }

/* ---------- "We fix it for you" requests ---------- */
.req-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.req-card { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.req-card:hover, .req-card:focus-visible { border-color: var(--brand); box-shadow: var(--shadow); }
.req-card b { font-size: 15.5px; }
.req-card .muted { font-size: 13.5px; line-height: 1.5; flex: 1; }
.req-ico { font-size: 26px; }
.req-meta { margin-top: 6px; font-size: 13.5px; color: var(--brand); }
.req-price { display: flex; flex-direction: column; align-items: flex-end; font-size: 22px; }
.req-price .muted { font-size: 13px; }
.req-h { font-size: 15px; margin: 22px 0 10px; }
.req-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-bottom: 10px; }
.req-choices label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; cursor: pointer; }
.req-choices label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.req-choices input { margin-top: 3px; accent-color: var(--brand); }
.req-choices span { display: flex; flex-direction: column; gap: 2px; }
.req-choices .muted { font-size: 12.5px; }
.req-access { margin: 6px 0 10px; }
.req-detail { font-size: 13.5px; line-height: 1.6; }
.req-detail dt { font-weight: 700; margin-top: 8px; }
.req-detail dd { margin: 0; white-space: pre-line; }
/* Admin: a "Send it to our team" speed request's snapshot and tools. */
.team-snap, .team-tools { font-size: 13.5px; margin-top: 10px; }
.team-snap p, .team-tools p { margin: 4px 0; }
.team-snap h4, .team-tools h4 { font-size: 13.5px; margin: 12px 0 4px; }
.team-checks { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.team-tools .form-row { margin-top: 4px; }
@media (max-width: 600px) { .req-price { align-items: flex-start; } }
.s-links { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.s-links .s-link { margin-top: 0; padding-top: 0; }
.s-done-note { margin: 10px 0 0; font-size: 13.5px; color: #15803d; font-weight: 600; }

/* Report preview without an account: blurred pages + unlock button */
.unlock-banner { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--brand-soft); font-size: 13.5px; line-height: 1.5; }
.unlock-banner .btn { margin-left: 6px; vertical-align: middle; }
.locked-box { position: relative; margin: 6px 0 4px; }
.locked-list { filter: blur(4px); user-select: none; pointer-events: none; opacity: .75; margin: 0; }
.locked-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; box-shadow: 0 6px 18px rgba(23, 32, 51, .15); }
@media (max-width: 600px) { .locked-btn { white-space: normal; width: 90%; } }

/* Monthly report: email under the report */
.monthly-form { display: flex; gap: 8px; flex-wrap: wrap; }
.monthly-form input { flex: 1; min-width: 200px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 15px; }

@media print { .monthly-box { display: none !important; } }

/* ---------- Photos tab ---------- */
.photos-note { margin: 0; }
/* A photos load that failed: the problem on its wash, then Try again (UX review 2026-10-23). */
.photos-load-err { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #fde8e8; color: #b42318; font-size: 14px; font-weight: 600; }
#photosBackup:not(:empty) { margin-top: 10px; }
.photos-note b { font-weight: 800; }
.photos-err { margin: 6px 0 0; font-size: 13.5px; }
/* a photo still without a description: the status on its wash (deep pair, readable); its button is a real 44 px one */
.photos-todo { display: inline-block; padding: 2px 9px; border-radius: 999px; background: #fff2db; color: #8a4f00; font-size: 12.5px; font-weight: 600; }
.photos-tile .photos-act, .photos-row .photos-act { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.photos-tile .link-btn.photos-act { justify-content: flex-start; }
.photos-tile-ph { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 8px; border-radius: 10px; background: var(--panel-2); color: #5f5b78; font-size: 12.5px; text-align: center; }
@media (hover: none) { .photos-drop-desk { display: none; } }
.photos-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 30px 16px; margin-top: 12px; border: 2px dashed color-mix(in srgb, var(--brand) 35%, var(--border)); border-radius: 16px; background: var(--brand-soft); color: var(--text); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.photos-drop:hover, .photos-drop.over { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, var(--panel)); }
.photos-drop-ico { color: var(--brand); margin-bottom: 4px; }
.photos-drop span:last-child { font-size: 13.5px; color: #3a3658; }
.photos-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.photos-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.photos-row img { flex: none; width: 72px; height: 72px; border-radius: 10px; object-fit: cover; background: var(--panel-2); }
.photos-row-main { flex: 1; min-width: 0; }
.photos-row-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photos-row-state { font-size: 13.5px; color: var(--muted); }
.photos-row.done .photos-row-state { color: var(--good); font-weight: 600; }
.photos-row.shrinking .photos-row-state::before, .photos-row.writing .photos-row-state::before { content: ''; display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; border: 2px solid var(--brand-soft); border-top-color: var(--brand); border-radius: 50%; animation: photos-spin .8s linear infinite; }
@keyframes photos-spin { to { transform: rotate(360deg); } }
.photos-fields { display: grid; gap: 6px; margin-top: 8px; }
/* A photo that may already be in the library: its twin, and Upload anyway / Skip it. */
.photos-dup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; }
.photos-dup img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.photos-removed { font-size: 13px; color: var(--muted); padding: 8px 0; }
.photos-fields label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); gap: 2px; }
.photos-fields input, .photos-fields textarea { font: inherit; font-size: 14px; color: var(--text); padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.photos-fields textarea { resize: vertical; min-height: 64px; line-height: 1.4; }
/* A library photo's details in a window (photos.js editPhoto): the photo beside the fields, above them on a phone. */
.modal:has(.photos-edit) { max-width: 720px; max-height: calc(100vh - 32px); overflow-y: auto; }
.photos-edit { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px; align-items: start; }
.photos-edit > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--panel-2); }
.photos-edit .photos-fields { margin-top: 0; }
.photos-edit .photos-fields label { margin-bottom: 4px; }
.photos-edit .photos-fields input, .photos-edit .photos-fields textarea { width: 100%; margin-top: 3px; box-sizing: border-box; }
.photos-edit .btn-row { justify-content: flex-end; margin-top: 6px; }
@media (max-width: 640px) { .photos-edit { grid-template-columns: 1fr; } .photos-edit > img { max-height: 180px; } }
.photos-fields .btn { justify-self: start; }
.photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.photos-tile { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.photos-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--panel-2); overflow: hidden; color: transparent; }
.photos-tile figcaption { font-size: 13px; line-height: 1.35; }
.photos-tile .link-btn { align-self: flex-start; }
.photos-back { display: flex; justify-content: center; margin: 8px 0 24px; }
@media (max-width: 640px) {
  .photos-row img { width: 56px; height: 56px; }
  .photos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* a phone: a compact picker, not a 220 px drop box */
  .photos-drop { padding: 16px 14px; gap: 2px; }
  .photos-drop-desk { display: none; }
  .photos-drop-ico svg { width: 24px; height: 24px; }
}
.photos-row-ph { flex: none; width: 72px; height: 72px; border-radius: 10px; background: var(--panel-2); }

/* ---------- Design studio (public/dash/design.js) ---------- */
.dz-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 18px 20px; margin-bottom: 16px; }
.dz-head .grow { flex: 1 1 360px; }
.dz-head h2 { font-size: 19px; margin: 0; }
.dz-head p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
.dz-save { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dz-status { font-size: 13px; color: var(--muted); font-weight: 600; }
.dz-note { margin: -4px 0 16px; }
.dz-main { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.dz-stage { padding: 12px; overflow: hidden; }
.dz-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dz-bar .seg-tabs { margin: 0; }
.dz-bar-note { font-size: 13px; }
.dz-wrap { position: relative; height: min(76vh, 860px); overflow: hidden; border-radius: 10px; background: var(--panel-2); }
.dz-wrap iframe { display: block; border: 0; background: #fff; transform-origin: 0 0; }
.dz-wrap.phone { display: flex; justify-content: center; padding-top: 12px; background: linear-gradient(180deg, var(--panel-2), var(--brand-soft)); }
.dz-wrap.phone iframe { border-radius: 22px; box-shadow: 0 0 0 8px #172033, 0 18px 40px rgba(15, 23, 42, .25); }
.dz-side { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; padding: 4px 16px 16px; }
.dz-group { padding: 14px 0; border-bottom: 1px solid var(--border); }
.dz-group:last-child { border-bottom: 0; }
.dz-group h3 { margin: 0 0 4px; font-size: 14px; letter-spacing: .02em; }
.dz-group > .muted { margin: 0 0 10px; font-size: 12.5px; }
.dz-grid { display: grid; gap: 8px; margin-top: 8px; }
.dz-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dz-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.dz-tile:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
.dz-tile.active { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.dz-tile b { font-size: 13.5px; }
.dz-tile small { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.dz-aa { font-size: 24px; font-weight: 700; line-height: 1; }
.dz-sw { display: inline-flex; gap: 3px; }
.dz-sw i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12); }
.dz-row { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.dz-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dz-chip { padding: 6px 11px; border: 1.5px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--text); font: 600 12.5px/1.2 inherit; font-family: inherit; cursor: pointer; }
.dz-chip:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
.dz-chip.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.dz-sec { margin-top: 12px; }
/* "Your style": the current pick in one row with Change (design pass 2026-10-22) */
.dz-now { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 8px 8px 12px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--panel); }
.dz-now b { flex: 1; min-width: 0; font-size: 13.5px; }
.dz-now .dz-aa { font-size: 20px; }
.dz-full { display: block; width: 100%; margin-top: 10px; }
.dz-device button:not(.active) { color: #5f5b78; }
.dz-savebar { display: none; }
@media (max-width: 900px) {
  .dz-savebar:not([hidden]) { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 10px 12px 10px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); }
  .dz-savebar-text { font-size: 13.5px; color: var(--text); }
}
@media (max-width: 640px), (pointer: coarse) {
  .dz-chip, .dz-page, .dz-change, .dz-device button, #dzSiteLook, .dz-ic, .dz .btn { min-height: 44px; }
  .dz-ic { min-width: 44px; }
  .dz-pick input { width: 44px; height: 44px; }
}
@media (max-width: 640px) {
  .dz-bar { flex-wrap: wrap; }
  .dz-bar .seg-tabs { display: flex; width: 100%; }
  .dz-bar .seg-tabs button { flex: 1; }
  .dz-bar-note { width: 100%; }
  /* the preview never catches the page's scroll on a phone: "See the whole page" shows all of it instead */
  .dz-stage .dz-wrap { height: min(62vh, 520px); }
  .dz-stage .dz-wrap iframe { pointer-events: none; }
}
.dz-sec > span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.dz-sec .muted { margin: 6px 0 0; font-size: 12px; line-height: 1.4; }
/* the Design studio: starting points, page types, sections one at a time, the fine-tune drawer */
.dz-honest { margin-top: 6px !important; font-weight: 600; color: var(--text) !important; }
.dz-starts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.dz-start { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--panel); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.dz-start:hover:not(:disabled) { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
.dz-start.active { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.dz-start:disabled { opacity: .55; cursor: default; }
.dz-start b { font-size: 14.5px; }
.dz-start small { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.dz-start-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; }
.dz-start-shot { width: 96px; height: 60px; margin-left: auto; object-fit: cover; object-position: top; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.dz-start[aria-busy="true"] { opacity: 1; cursor: progress; border-style: dashed; }
.dz-start[aria-busy="true"] small { color: var(--text); }
.dz-from { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 11px; font-weight: 700; letter-spacing: .02em; vertical-align: middle; }
/* Sample content: a tag on the section's row, and the list of what real pages do instead. */
.dz-sample-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 700; vertical-align: middle; }
.dz-samples { margin: 12px 0 4px; padding: 10px 12px; border: 1px solid #fde68a; border-radius: 10px; background: #fffbeb; font-size: 13px; }
.dz-samples p { margin: 0 0 6px; }
.dz-samples ul { margin: 0; padding-left: 18px; }
.dz-samples li { margin: 4px 0; }
/* The page types wrap on wider screens (every name in full); on phones they scroll sideways, with a fade at the edge. */
.dz-pages { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.dz-page { flex: none; padding: 7px 12px; border: 1.5px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--text); font: 600 13px/1.2 inherit; cursor: pointer; }
.dz-page.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.dz-secs { display: grid; gap: 6px; margin-top: 10px; }
.dz-secrow { border: 1.5px solid var(--border); border-radius: 12px; background: var(--panel); }
.dz-secrow.open { border-color: var(--brand); }
.dz-sechead { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px; }
.dz-secname { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; border: 0; border-radius: 9px; background: none; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.dz-secname:hover { background: var(--panel-2); }
.dz-secname b { font-size: 13.5px; }
.dz-secname small { font-size: 12px; color: var(--muted); }
.dz-secbtns { display: flex; gap: 2px; }
.dz-ic { width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 700 15px/1 inherit; cursor: pointer; }
.dz-ic:hover:not(:disabled) { background: var(--panel-2); color: var(--text); }
.dz-ic:disabled { opacity: .3; cursor: default; }
.dz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 4px 8px 10px; }
.dz-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 6px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.dz-opt.active { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.dz-opt.off { opacity: .55; }
.dz-opt b { font-size: 12.5px; }
.dz-opt small { font-size: 11px; line-height: 1.35; color: var(--muted); }
/* The card's choice: the whole tile (a one-of-many choice); "Preview larger" under it. */
.dz-opt-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.dz-opt-pick:disabled { cursor: default; }
.dz-opt-pick:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.dz-big-btn { font-size: 11.5px; }
.dz-chosen { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 10px; vertical-align: middle; }
.dz-bigmodal { width: min(940px, 94vw); max-width: none; }
.dz-bigview { position: relative; width: 100%; height: min(520px, 60vh); overflow: hidden; border-radius: 10px; background: var(--panel-2); margin: 10px 0; }
.dz-bigview iframe { position: absolute; top: 0; left: 0; border: 0; background: #fff; transform-origin: 0 0; }
.dz-rec { margin-left: auto; padding: 1px 8px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; }
.dz-mode { margin: 0 12px 8px; font-size: 12px; color: var(--muted); }
.dz-lock, .dz-tip { margin: 0 8px 8px; padding: 6px 8px; border-radius: 8px; background: var(--panel-2); font-size: 12px; color: var(--muted); }
.dz-tip { background: var(--brand-soft); color: var(--text); }
.dz-custom-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dz-simple-btns { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.dz-mini { position: relative; display: block; width: 100%; height: 96px; overflow: hidden; border-radius: 7px; background: var(--panel-2); pointer-events: none; }
.dz-mini.phone { height: 150px; }
.dz-mini iframe { position: absolute; top: 0; left: 0; border: 0; background: #fff; transform-origin: 0 0; }
.dz-more { margin: 0 8px 10px; }
.dz-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.dz-add > .muted { width: 100%; margin: 0; font-size: 12.5px; }
.dz-drawer summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; }
.dz-drawer summary::-webkit-details-marker { display: none; }
.dz-drawer summary h3 { margin: 0; }
.dz-drawer summary::after { content: '+'; margin-left: auto; font-weight: 700; color: var(--muted); }
.dz-drawer[open] summary::after { content: '–'; }
.dz-drawer h4 { margin: 16px 0 4px; font-size: 13px; }
.dz-pickers { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.dz-pick { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.dz-pick input { width: 34px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: none; cursor: pointer; }
@media (max-width: 900px) {
  .dz-main { grid-template-columns: 1fr; }
  .dz-side { position: static; max-height: none; }
  .dz-wrap { height: 70vh; }
}
@media (max-width: 640px) {
  .dz-pages { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .dz-starts { grid-template-columns: 1fr; }
  .dz-start { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .dz-start small { width: 100%; }
  .dz-head .dz-save { width: 100%; justify-content: space-between; }
}

/* ---------- Reviews tab (review kit) ---------- */
.rk-hero .block-head { flex-wrap: wrap; }
.rk-hero .block-head .grow { flex: 1 1 300px; }
.rk-lang { margin: 0; }
.rk-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 20px 4px; }
.rk-stats p { margin: 0; }
.rk-big { font-size: 28px; font-weight: 800; line-height: 1.15; }
.rk-star { color: #8a4f00; font-weight: 700; } /* deep attention text: the rating must read (gold was 2:1); in the gray line since the UX review 2026-10-23 */
.rk-note { font-size: 12.5px; padding: 6px 20px 16px; margin: 0; }
.rk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
.rk-grid > .card { margin: 0; }
.rk-small { font-size: 13px; margin: 10px 0 0; }
.rk-warn { font-size: 13px; background: var(--ok-soft); color: #7a4a00; padding: 8px 10px; border-radius: 10px; margin: 10px 0 0; }
.rk-qr-row { display: flex; gap: 18px; align-items: flex-start; }
.rk-qr { width: 150px; flex: none; border: 1px solid var(--border); border-radius: 12px; padding: 6px; background: #fff; }
.rk-qr svg { display: block; width: 100%; height: auto; }
.rk-qr-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.rk-qr-actions .rk-small { margin-top: 2px; }
.rk-who { margin-bottom: 14px; }
.rk-who label { flex: 1 1 220px; }
.rk-msgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.rk-msg { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--panel); }
.rk-msg p { margin: 0; }
.rk-subject { font-size: 14px; }
.rk-text { white-space: pre-line; font-size: 14px; line-height: 1.55; background: var(--panel-2); border-radius: 10px; padding: 10px 12px; }
.rk-msg-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.rk-list { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.rk-paste { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); font-size: 14px; }
.rk-paste ol { margin: 6px 0 8px; padding-left: 20px; font-size: 13px; }
.rk-paste .plan-copy { margin: 0; }
.rk-more { margin: 12px 0 0; font-size: 14px; }
.rk-more > summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.rk-more .rk-paste { margin-top: 8px; }
/* ---- Get reviews page (design pass 2026-10-22) ---- */
.rk-ways > summary, .rk-tophone > summary { padding: 10px 0; }
.rk-ways .rk-msgs { margin-top: 8px; }
.rk-qr-sm { width: 120px; margin-top: 8px; }
.rk-opens { padding: 0 20px 14px; margin: 0; }
.rk-opens > summary { padding: 6px 0; }
/* Phone: the actions are full-width, 44 px tall (the review request and the QR code are used on the job). */
@media (max-width: 600px) {
  .rk-msg-actions .btn, .rk-qr-actions .btn { width: 100%; min-height: 44px; justify-content: center; font-size: 15px; }
  .rk-qr-actions { align-items: stretch; width: 100%; }
  .rk-tophone { display: none; }
}
/* ---- end Get reviews page ---- */
.btn-link { background: none; border: 0; padding: 0; color: var(--brand); text-decoration: underline; cursor: pointer; font: inherit; }
@media (max-width: 900px) {
  .rk-grid, .rk-msgs, .rk-stats { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .rk-qr-row { flex-direction: column; }
  .rk-qr { width: 200px; }
}

/* ---------- Google Ads: report, weekly chart, suggestions, changes ---------- */
.ads-stats .stat { display: flex; flex-direction: column; gap: 2px; }
.ads-ch { font-size: 12.5px; font-weight: 700; }
.ads-ch.up { color: #12663f; }
.ads-ch.down { color: #b42318; }
.ads-fine { font-size: 12.5px; margin: -4px 0 10px; }
.ads-insights { margin: 4px 0 16px; padding-left: 18px; display: grid; gap: 6px; font-size: 14.5px; }
.ads-chart { margin: 0; padding: 14px 16px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.ads-chart figcaption { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 10px; font-size: 14px; }
.ads-chart figcaption .muted { font-size: 12.5px; }
.ads-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; height: 140px; align-items: end; border-bottom: 1px solid var(--border); }
.ads-bar { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; padding: 0 3px; cursor: default; outline: none; }
.ads-bar i { display: block; width: 100%; max-width: 26px; border-radius: 4px 4px 0 0; background: var(--brand); }
.ads-bar:hover i, .ads-bar:focus-visible i { background: #4a2fc9; }
.ads-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 5; display: none; flex-direction: column; gap: 2px; min-width: 150px; padding: 8px 10px; border-radius: 10px; background: var(--text); color: #fff; font-size: 12.5px; line-height: 1.35; pointer-events: none; box-shadow: var(--shadow); }
.ads-tip b { font-size: 14px; }
.ads-tip small { color: #c9cbe0; }
.ads-bar:hover .ads-tip, .ads-bar:focus-visible .ads-tip { display: flex; }
.ads-bar:first-child .ads-tip { left: 0; transform: none; }
.ads-bar:last-child .ads-tip { left: auto; right: 0; transform: none; }
.ads-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--muted); }
.ads-build h3 { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; font-size: 16px; }
.ads-build h4 { margin: 16px 0 6px; font-size: 14px; }
.ads-step-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: 13px; }
.ads-step.is-hidden, .ads-days.is-hidden { display: none; }
.ads-stepper { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 4px 0 0; }
.ads-stepper button { border: 1px solid var(--border); background: var(--panel); color: var(--muted); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.ads-stepper li.on button { border-color: var(--brand); color: var(--brand); font-weight: 700; }
.ads-stepper li.past button { color: var(--text); }
.ads-ready { padding: 12px 14px; border-radius: var(--radius); background: var(--ok-soft); font-size: 14px; }
.ads-ready ul { margin: 8px 0 10px; padding-left: 18px; display: grid; gap: 4px; }
.ads-ready.ok { background: var(--good-soft); }
.ads-grid-wrap { overflow-x: auto; }
.ads-grid { border-collapse: collapse; font-size: 14px; }
.ads-grid th, .ads-grid td { padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; }
.ads-grid th[scope="row"], .ads-grid thead th:first-child { text-align: left; }
.ads-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.ads-cell small, .ads-chip small { color: var(--muted); font-size: 11.5px; }
.ads-cards { display: none; gap: 10px; }
.ads-card { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.ads-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ads-chip { position: relative; }
.ads-chip input { position: absolute; opacity: 0; }
.ads-chip span { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); font-size: 13px; cursor: pointer; }
.ads-chip input:checked + span { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 600; }
.ads-chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.ads-photos p { font-size: 13px; }
.ads-photo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.ads-photo-row > span:first-child { min-width: 140px; }
.ads-thumbs { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.ads-thumbs img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.ads-photo-row .is-busy { opacity: .6; pointer-events: none; }
.ads-money { display: inline-flex; align-items: center; gap: 4px; }
.ads-money input { max-width: 120px; }
.ads-note { font-size: 13px; margin: 4px 0 0; }
.ads-hours { display: grid; gap: 8px; font-size: 14px; }
.ads-days { display: grid; gap: 6px; padding-left: 22px; }
.ads-day { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ads-day label { min-width: 64px; }
.ads-facts { display: grid; gap: 2px; }
.ads-fact { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.ads-fact > span:first-child { font-weight: 600; }
.ads-fact input[type="checkbox"] { justify-self: start; }
.ads-rows > div { display: grid; gap: 6px; justify-items: start; }
.ads-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ads-summary { margin: 16px 0 8px; font-size: 13.5px; color: var(--muted); }
.ads-done { margin-top: 12px; background: var(--good-soft); color: var(--text); }
.ads-golive { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); }
.ads-golive h3 { margin: 0 0 8px; }
.ads-check { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; font-size: 14px; }
.ads-check li b { display: inline-block; width: 18px; }
.ads-check li.ok b { color: var(--good); }
.ads-check li.no b { color: var(--bad); }
.ads-check li.maybe b { color: var(--ok); }
.ads-check small { display: block; margin-left: 22px; color: var(--muted); font-size: 12.5px; }
.ads-places-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .ads-grid-wrap { display: none; }
  .ads-cards { display: grid; }
  .ads-fact { grid-template-columns: 1fr; gap: 4px; }
}
.ads-table-view { margin-top: 8px; font-size: 13px; }
.ads-table-view summary { cursor: pointer; color: var(--muted); }
.ads-adv { flex-wrap: wrap; }
.ads-adv .s-step-t { min-width: 220px; }
.ads-why { font-weight: 400 !important; color: var(--text) !important; font-size: 13.5px !important; margin: 2px 0; }
.ads-acct { margin: 10px 0 0; font-size: 14px; color: var(--text); text-align: left; }
.ads-lines { margin: 10px 0; padding-left: 18px; font-size: 14px; font-weight: 600; text-align: left; }
.ads-items { max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; margin: 10px 0; }
.ads-item, .modal label.ads-item { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; border-top: 1px solid var(--border); font-size: 13.5px; font-weight: 500; cursor: pointer; }
.modal .ads-item input { width: 16px; height: 16px; margin: 0; padding: 0; flex: none; accent-color: var(--brand); }
.ads-item:first-child { border-top: 0; }
.ads-item span { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.ads-item small { color: var(--muted); }
.ads-item em { font-style: normal; font-weight: 700; white-space: nowrap; }
.ads-undo-note { font-size: 12.5px; margin: 6px 0 0; }
.ads-history { list-style: none; margin: 0; padding: 0; }
.ads-history li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.ads-history li:first-child { border-top: 0; }
.ads-history li span { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.ads-history small { color: var(--muted); font-size: 12.5px; }
.ads-setup li { color: var(--muted); }
.ads-setup li.ok { color: #12663f; }
@media (max-width: 600px) {
  .ads-head { flex-wrap: wrap; }
  .ads-head .grow { flex-basis: 100%; }
  .ads-bars { height: 110px; }
  .ads-bar { padding: 0 1px; }
}
/* Design pass 2026-10-22, Google Ads report (docs/design-pass/ads.md): readable chips, the chart on its card (not a
   card in a card), the app's segmented switch, Disconnect at the bottom, and every table as cards on a phone. */
.ads-head .chip.good { background: #e3f4ec; color: #12663f; }
.ads-head .chip.warning { background: #fff2db; color: #8a4f00; }
.ads-chart { padding: 16px 0 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; }
.ads-chart .ads-fine { margin: 10px 0 0; }
.ads-places-tabs { margin: 0; }
.ads-places-tabs button:not(.active) { color: #555b6b; }
.ads-fine, .ads-build .block-head p, .ads-ready li { text-wrap: pretty; }
.ads-undone { font-size: 13px; }
.ads-foot { margin: 0 4px; font-size: 13px; }
/* Design pass 2026-10-22, Ads setup (docs/design-pass/ads-setup.md): the app's fields in every step, brand-colored
   ticks, the ready box in one sentence, no boxes inside the card, a one-row stepper on a phone. */
.ads-build .ads-fact input:not([type="checkbox"]), .ads-build .ads-fact textarea, .ads-build .ads-row input,
.ads-build .ads-money input, .ads-build select {
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text);
  font: inherit; font-size: 14px; font-weight: 400; min-width: 0;
}
.ads-build .ads-fact textarea { resize: vertical; }
.ads-build input:focus-visible, .ads-build textarea:focus-visible, .ads-build select:focus-visible { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
.ads-build input[type="checkbox"], .ads-build input[type="radio"] { width: 20px; height: 20px; margin: 0; accent-color: var(--brand); flex: none; }
.ads-build .ads-opt { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.ads-ready p { margin: 0; }
.ads-ready + .ads-stepper { margin-top: 14px; }
.ads-ready details { margin: 8px 0 10px; }
.ads-ready summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.ads-ready summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.ads-cards .ads-card { padding: 12px 0; border: 0; border-radius: 0; border-top: 1px solid var(--border); }
.ads-cards .ads-card:first-child { border-top: 0; padding-top: 0; }
.ads-stepper .ads-short { display: none; }
/* Ads setup, step 1 and facts (owner 2026-10-22): cities and services as tap buttons, Add a city / service, photos from
   the website's library, a help line under a fact, offer examples. */
.ads-build h4 { margin: 18px 0 4px; }
.ads-add { display: flex; gap: 8px; margin: 10px 0 4px; max-width: 420px; }
.ads-add input { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 14px; }
.ads-photo-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.ads-thumb { position: relative; display: inline-block; }
.ads-thumb-x { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 13px; line-height: 1; cursor: pointer; }
.ads-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; max-height: 50vh; overflow: auto; margin-top: 10px; }
.ads-lib-item { position: relative; display: block; cursor: pointer; }
.ads-lib-item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 2px solid transparent; }
.ads-lib-item input { position: absolute; top: 6px; left: 6px; width: 20px; height: 20px; accent-color: var(--brand); }
.ads-lib-item input:checked + img { border-color: var(--brand); }
.ads-help { display: block; font-weight: 400; font-size: 12.5px; margin-top: 2px; }
.ads-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; }
/* Preview my ads (owner 2026-10-22): each ad as Google shows it. */
.ads-preview h4 { margin: 18px 0 2px; }
.ads-pv-service { padding: 4px 0 12px; border-top: 1px solid var(--border); }
.ads-pv-service:first-of-type { border-top: 0; }
.ads-ad { margin: 10px 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.ads-ad-top { display: block; color: #3a3658; font-size: 12.5px; }
.ads-ad-h { display: block; margin: 4px 0; color: #1a0dab; font-size: 17px; font-weight: 500; line-height: 1.3; }
.ads-ad p { margin: 0; font-size: 14px; color: var(--text); }
.ads-ad details { margin-top: 8px; font-size: 13px; }
.ads-ad summary, .ads-pv-notes summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.ads-ad ol, .ads-ad ul { margin: 6px 0; padding-left: 20px; }
.ads-pv-notes { margin: 10px 0; font-size: 13.5px; }
.ads-pv-notes ul { margin: 6px 0; padding-left: 18px; display: grid; gap: 4px; }
.ads-tag { display: inline-block; padding: 5px 11px; border-radius: 999px; background: var(--panel-2); font-size: 13px; }
.ads-writers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0; font-size: 13px; }
.ads-days-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 2px 0 6px; }
.ads-days-tools .muted { font-size: 12.5px; }
.ads-copy { padding: 4px 8px; font-size: 12.5px; }
.ads-example { border: 1px dashed var(--brand); background: var(--brand-soft); color: var(--brand); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 13px; cursor: pointer; }
/* Design pass 2026-10-22, Build my ads (docs/design-pass/ads-build.md): what's left first, done folded, each mark on
   its own wash, and why Go live is off. On the card, not a box inside it. */
.ads-golive { margin-top: 20px; padding: 18px 0 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; }
.ads-golive h3 { margin: 0 0 12px; font-size: 17px; text-wrap: balance; }
.ads-check li { display: flex; gap: 10px; align-items: flex-start; }
.ads-check li > span { flex: 1; min-width: 0; }
.ads-check .ads-mark { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; font-size: 12px; }
.ads-check .ads-mark.ok { background: #e3f4ec; color: #12663f; }
.ads-check .ads-mark.no { background: #fde8e8; color: #b42318; }
.ads-check .ads-mark.maybe { background: #fff2db; color: #8a4f00; }
.ads-check li > span small { margin: 2px 0 0; font-size: 13px; }
.ads-check .btn-link { font-weight: 600; }
.ads-done-list { margin: 0 0 14px; font-size: 14px; }
.ads-done-list summary { cursor: pointer; color: #12663f; font-weight: 600; padding: 6px 0; }
.ads-done-list .ads-check { margin: 8px 0 0; }
.ads-go { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ads-go .muted { font-size: 13px; }
@media (max-width: 600px) {
  .ads-go .btn, #adsBuildNow { min-height: 44px; }
  .ads-done-list summary { padding: 12px 0; }
  .ads-check .btn-link { display: inline-block; padding: 10px 0; margin: -10px 0; }
}
@media (max-width: 600px) {
  .ads-stepper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .ads-stepper button { width: 100%; min-height: 44px; padding: 6px 4px; }
  .ads-stepper .ads-long { display: none; }
  .ads-stepper .ads-short { display: inline; }
  .ads-build .ads-fact input:not([type="checkbox"]), .ads-build .ads-fact textarea, .ads-build select,
  .ads-build .ads-money input, .ads-build .ads-row input { min-height: 44px; }
  .ads-chip span { padding: 10px 14px; }
  .ads-days { padding-left: 0; }
  .ads-day { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; }
  .ads-day .ads-copy { grid-column: 2 / -1; justify-self: start; min-height: 36px; margin-top: -2px; }
  .ads-days-tools .btn { min-height: 44px; }
  .ads-day label { min-width: 0; display: flex; align-items: center; gap: 6px; min-height: 44px; }
  .ads-day select { width: 100%; padding-left: 8px; padding-right: 4px; }
  .ads-photo-row .btn, .ads-ready .btn, .ads-build .btn-row .btn, .ads-add .btn, .ads-add input, .ads-example { min-height: 44px; }
  .ads-thumb-x { width: 30px; height: 30px; }
}
.ads-phone-only { display: none; font-weight: 500; color: var(--muted); }
@media (max-width: 600px) {
  .ads-phone-only { display: inline; }
  .ads-stack .ads-hide-phone { display: none; }
  .ads-places-tabs { display: flex; width: 100%; }
  .ads-places-tabs button { flex: 1 1 auto; padding: 8px 8px; }
  .ads-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ads-stack, .ads-stack tbody { display: block; }
  .ads-stack tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--border); }
  .ads-stack tr:first-child { border-top: 0; padding-top: 0; }
  .ads-stack td, .ads-stack .n { display: block; padding: 0; border: 0; text-align: left; white-space: normal; font-weight: 600; }
  .ads-stack td.ads-name { grid-column: 1 / -1; font-size: 15px; font-weight: 700; }
  .ads-stack td.ads-sub { grid-column: 1 / -1; margin-top: -6px; font-size: 13px; font-weight: 400; }
  .ads-stack td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
  .ads-places-tabs button, .ads-head .btn, .ads-adv .btn, .ads-history .btn { min-height: 44px; }
  .ads-foot .btn-link { display: inline-block; padding: 12px 0; margin: -12px 0; }
}
.photos-connect { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 0; font-size: 13.5px; color: var(--bad); }

/* Settings → What your pages are for */
.role-sum { margin: 2px 0 6px; font-size: 14px; }
.role-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.role-row a b { word-break: break-all; }
.role-t, .role-why { font-size: 13px; }
.role-row select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); font: inherit; font-size: 13px; color: inherit; max-width: 100%; }
.role-more { margin-top: 6px; }
.role-more summary { cursor: pointer; color: var(--brand); font-size: 13px; font-weight: 600; padding: 6px 0; }
@media (max-width: 600px) { .role-row { grid-template-columns: 1fr; } }

/* Narrow screens: long page addresses and written text wrap instead of pushing the page sideways
   (Content → Pages → one page, and popups such as "Send these changes to your website?"). */
.grid-2 > *, .img-item > div, .check-row .grow { min-width: 0; }
.check-row, .serp-box, .sugg, .outline li, .item-list li, .hero-score h1, .hero-score .muted, .kw-group { overflow-wrap: anywhere; }
.sugg-new img, .post-body img { max-width: 100%; height: auto; }
.sugg-new table, .post-body table { display: block; max-width: 100%; overflow-x: auto; }
.modal { min-width: 0; overflow-wrap: anywhere; }
.modal .row { flex-wrap: wrap; }
.hero-score > .grow { min-width: 0; flex: 1 1 240px; }

/* ---------- This week's Google post (dialog) ---------- */
.gp-body { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.gp-body p { margin: 0; }
.gp-text { width: 100%; white-space: pre-wrap; overflow-x: hidden; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 14px; line-height: 1.55; resize: vertical; }
.gp-photo { display: flex; gap: 12px; align-items: center; }
.gp-photo img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; flex: none; }
.gp-photo div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 13px; }
.gp-tip { font-size: 13px; background: var(--panel-2); border-radius: 10px; padding: 8px 10px; }
.gp-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.gp-how { margin: 0; padding-left: 20px; font-size: 13px; color: var(--muted); }
.lt-more { margin-top: 10px; font-size: 13px; }
.lt-more > summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.lt-body { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.lt-body p { margin: 0; }
.lt-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow: auto; }
.lt-list li { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.lt-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.lt-row .btn { flex: none; }
.lt-text { font-size: 13.5px; color: var(--text); line-height: 1.5; }
.lt-post { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); font-size: 13.5px; }

/* ---------- "Searching from" (where map checks start) ---------- */
.mc-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; margin: 0 0 12px; border-radius: 10px; background: var(--panel-2); font-size: 14px; }
.mc-line > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mc-line .muted { font-size: 13px; }
.mc-line.ask { background: var(--ok-soft); }
.mc-line .btn { flex: none; }
.mc-form { display: flex; gap: 8px; margin: 10px 0; text-align: left; }
.mc-form input { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 14px; }
.mc-results { display: flex; flex-direction: column; gap: 6px; text-align: left; margin-bottom: 8px; }
.mc-results p { margin: 0; font-size: 13px; }
.mc-opt { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.mc-opt input { margin-top: 3px; }
.mc-why { margin: 8px 0 0; font-size: 13px; }
.mc-why summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.mc-why p { margin: 6px 0 0; }
.mc-tip { font-size: 12.5px; margin: 8px 0 0; }
/* Automatic (Settings) and its Home line */
.au-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.au-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.au-row.paused { opacity: .7; }
.au-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 14px; }
.au-main .muted { font-size: 13px; }
.au-last { font-size: 13px; }
.au-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.au-actions select, .au-add select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); font: inherit; font-size: 13px; }
.au-add { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.au-add label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); font-weight: 600; }
.au-home { display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px; font-size: 13.5px; }
.au-new { font-weight: 600; }
.au-mail { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
.au-choice .au-sub { padding-left: 24px; display: flex; flex-direction: column; gap: 6px; }
.au-choice .au-sub[hidden] { display: none; }
/* Inside dialogs: the round button or tick sits beside its text, not stretched above it. */
.mc-results label.mc-opt { display: flex; flex-direction: row; text-align: left; }
.mc-results label.mc-opt input { width: auto; flex: none; margin: 3px 0 0; }
@media (max-width: 600px) { .au-row { flex-direction: column; } .au-actions { justify-content: flex-start; } }

/* My business → Searches (ranked keyword list). Design pass 2026-10-22 (docs/design-pass/searches.md): one status chip
   per row in DESIGN.md's deep status pairs (AA), 44px targets on phones, a readable width (the violet focus ring is global, 7242a75). */
#kwList .block-body { max-width: 920px; }
.kwl-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--border); }
/* The rank: neutral ink (importance isn't a status color); the top 3 a little stronger. */
.kwl-n { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--panel-2); color: #5f5b78; }
.kwl-n.top { color: var(--text); }
.kwl-t { min-width: 0; overflow-wrap: anywhere; }
.kwl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 15px; line-height: 1.35; min-height: 28px; }
.kwl-chip { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.kwl-chip.good { background: #e3f4ec; color: #12663f; }
.kwl-chip.warn { background: #fff2db; color: #8a4f00; }
.kwl-chip.off { background: #f0eff5; color: #5f5b78; }
.kwl-chip.pin { background: var(--brand-soft); color: #4a2fc9; }
.kwl-meta { margin-top: 2px; font-size: 13px; color: var(--muted); }
.kwl-meta a { text-underline-offset: 2px; }
/* A page by its address, on one line (a long address ends in "…"; the whole one is in its tooltip). */
.kwl-page { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.kwl-go { display: inline-flex; align-items: center; min-height: 32px; margin-top: 2px; font-size: 13px; font-weight: 700; }
/* The row just added, pinned or put back: a short violet wash so the eye finds it. */
.kwl-flash { animation: kwlflash 2.4s ease-out; border-radius: 10px; }
@keyframes kwlflash { from { background: var(--brand-soft); } to { background: transparent; } }
.kwl-msg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 0; padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; }
.kwl-msg.ok { background: var(--panel-2); color: var(--text); }
.kwl-msg.bad { background: #fde8e8; color: #b42318; }
.kwl-msg .link-btn, .kwl-more { font-size: 14px; }
.kwl-more { display: inline-flex; align-items: center; min-height: 36px; margin-top: 6px; }
.kwl-add { margin: 18px 0 4px; padding-top: 14px; border-top: 1px solid var(--border); }
.kwl-add label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.kwl-add-row { display: flex; gap: 8px; }
.kwl-add input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); font: inherit; font-size: 14px; color: inherit; }
#kwList .kwl-add input:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.kwl-err { margin: 6px 0 0; padding: 6px 10px; border-radius: 10px; background: #fde8e8; font-size: 13px; font-weight: 600; color: #b42318; }
/* "Find more searches" under the list: a quiet section, a white button. */
.kwl-more-box { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--border); }
.kwl-more-box h3 { flex-basis: 100%; margin: 0; font-size: 15px; }
.kwl-more-box + .kwl-add { margin-top: 14px; }
.kwl-gone { list-style: none; padding: 0; margin: 0; }
.kwl-gone li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border); font-size: 14px; overflow-wrap: anywhere; }
.kwl-vol { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.kwl-vol > span { flex: 1 1 220px; }
.kwl-when { font-size: 13px; color: var(--muted); }
#kwList .kwl-menu > summary { width: 36px; height: 36px; }
#kwList .kwl-pop { top: 40px; }
@media (max-width: 600px) {
  #kwList .kwl-pop button, #kwList .kwl-filter button, #kwList .kwl-fold > summary, #kwList .kwl-gone .btn, #kwList .kwl-missing .btn, .kwl-go, .kwl-more, .kwl-grow .link-btn, .kwl-msg .link-btn, #kwList .kwl-scan .btn { min-height: 44px; }
  .kwl-grow .link-btn, .kwl-msg .link-btn { display: inline-flex; align-items: center; }
  /* The link inside the sentence keeps its 44px tap area without pushing its line away (UX review 2026-10-23). */
  .kwl-grow .link-btn { margin: -12px 0; vertical-align: middle; }
  /* Every filter in sight: they wrap instead of scrolling off the edge. */
  #kwList .kwl-filter { flex-wrap: wrap; overflow: visible; }
  #kwList .kwl-menu > summary { width: 44px; height: 44px; margin: -8px -8px 0 0; }
  #kwList .kwl-pop { top: 40px; right: -8px; }
  .kwl-add input, .kwl-add .btn { min-height: 44px; font-size: 16px; }
  .kwl-domains a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Keywords (keyword research). Design pass 2026-10-22 (docs/design-pass/keywords.md): a phone reads each search as two
   lines (the search and its tags, then its numbers in words); cells never break inside a word. */
.kwr-new > summary { cursor: pointer; padding: 10px 0; font-weight: 700; font-size: 15px; color: var(--brand); }
.kwr-new[open] > summary { margin-bottom: 8px; }
.kwr-err { margin: 8px 0 0; padding: 6px 10px; border-radius: 10px; background: #fde8e8; color: #b42318; font-size: 13px; font-weight: 600; }
.kwr-err[hidden] { display: none; }
.kwr-act .kwr-err { display: inline-block; margin: 4px 0 0; }
.kwr-desc { margin: 2px 0 8px; font-size: 13px; color: var(--muted); }
.kwr-help { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.kwr-table td, .kwr-table th { overflow-wrap: normal; word-break: normal; }
.kwr-table th { white-space: nowrap; }
.kwr-table td.kwr-kw { min-width: 14em; }
.kwr-table .tag { font-size: 12px; color: #5f5b78; }
.kwr-table tr.kwr-zero td { color: var(--muted); }
.kwr-table.collapsed tr.kwr-more { display: none; }
.kwr-m { display: none; }
.kwr-act { text-align: right; white-space: nowrap; }
.kwr-add { font-size: 13px; }
.kwr-add:focus-visible { outline-offset: -2px; } /* inside the scroll box, so its edge never clips the ring */
.kwr-in { font-size: 13px; font-weight: 600; color: #12663f; }
.kwr-showall { display: inline-flex; align-items: center; min-height: 36px; margin-top: 6px; font-size: 14px; }
.kwr-past { list-style: none; margin: 0; padding: 0; }
.kwr-past li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.kwr-past li:first-child { border-top: 0; }
.kwr-past li > div { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.kwr-past .muted { font-size: 13px; }
.kwr-open { font-size: 13px; font-weight: 600; color: var(--muted); }
@media (max-width: 600px) {
  .kwr-table thead { display: none; }
  .kwr-table, .kwr-table tbody { display: block; }
  .kwr-table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .kwr-table td { display: none; padding: 0; border: 0; }
  .kwr-table td.kwr-kw, .kwr-table td.kwr-act { display: block; text-align: left; }
  .kwr-table.collapsed tr.kwr-more { display: none; }
  .kwr-m { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
  .kwr-add, .kwr-showall { min-height: 44px; display: inline-flex; align-items: center; }
  .kwr-new > summary { padding: 12px 0; }
  .kwr-table td.kwr-kw { min-width: 0; }
  .kwr-group > summary { display: list-item; padding: 12px 0; }
  .kwr-past .btn { min-height: 44px; }
}

/* Competitors & data. Design pass 2026-10-22 (docs/design-pass/competitors-and-data.md): a page title, one sentence
   leading each report, top rows with "Show all", and label: value cards on a phone. */
.ins-head { margin: 0 0 14px; }
.ins-head h2 { margin: 0 0 4px; font-size: 22px; }
.ins-head p { margin: 0; font-size: 14px; color: var(--muted); max-width: 760px; }
.ins-verdict { margin: 0 0 12px; font-size: 15px; line-height: 1.5; }
.ins-err { flex-basis: 100%; margin: 6px 0 0; padding: 6px 10px; border-radius: 10px; background: #fde8e8; color: #b42318; font-size: 13px; font-weight: 600; }
.ins-next { margin: 10px 0 0; }
.ins-next .link-btn { font-size: 14px; }
.ins-tag { font-size: 12.5px; color: #5f5b78; }
.ins-tag.spam { background: #fff2db; color: #8a4f00; }
.ins-wide { grid-column: span 2; }
.ins-table td { overflow-wrap: normal; word-break: normal; }
/* A sentence in a number column (a search Google didn't answer) wraps like text. */
.ins-note { white-space: normal; display: inline-block; min-width: 12em; text-align: left; }
.ins-table.collapsed tr.ins-more { display: none; }
.ins-showall { display: inline-flex; align-items: center; min-height: 36px; margin-top: 6px; font-size: 14px; }
.ins-prompt > summary { cursor: pointer; padding: 6px 0; }
@media (max-width: 600px) {
  .ins-head h2 { font-size: 20px; }
  .ins-stats { grid-template-columns: 1fr; gap: 0; margin: 10px 0; }
  /* UX review 2026-10-23: one compact line per number (words left, number right) instead of three tall blocks that
     filled a whole phone screen. */
  .ins-stats .stat { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 0; border-top: 1px solid var(--border); }
  .ins-stats .stat:first-child { border-top: 0; }
  .ins-stats .stat .k { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: #5b6170; }
  .ins-stats .stat .v { margin-top: 0; font-size: 22px; flex: none; }
  .ins-wide { grid-column: auto; }
  /* Each row a small card: the first cell as its title, then "Label: value" lines. */
  .ins-table thead { display: none; }
  .ins-table, .ins-table tbody { display: block; }
  .ins-table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .ins-table.collapsed tr.ins-more { display: none; }
  .ins-table td { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; border: 0; text-align: right; font-size: 14px; }
  .ins-table td::before { content: attr(data-l); color: var(--muted); font-weight: 600; font-size: 13px; text-align: left; }
  .ins-table td:first-child { display: block; text-align: left; font-weight: 600; padding-bottom: 4px; }
  .ins-table td:first-child::before { content: none; }
  .ins-table td:empty, .ins-table td:has(> .ins-v:empty) { display: none; }
  .ins-table td > .ins-v { text-align: right; min-width: 0; }
  .ins-note { min-width: 0; text-align: right; }
  .ins-showall, .ins-next .link-btn, .ins-prompt > summary { min-height: 44px; display: inline-flex; align-items: center; }
  .ins-prompt > summary { display: list-item; padding: 12px 0; }
}

/* Website checks (#reports). Design pass 2026-10-22 (docs/design-pass/website-checks.md): one row per check that reads
   on a phone; the score on its wash (DESIGN.md's deep pairs) with the change since the check before. */
.wc-list { list-style: none; margin: 0; padding: 0; }
.wc-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 0; border-top: 1px solid var(--border); }
.wc-list li:first-child { border-top: 0; }
.wc-when { display: flex; flex-direction: column; gap: 2px; flex: 1 1 140px; min-width: 0; }
.wc-when .muted { font-size: 13px; }
.wc-result { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; flex: 1 1 160px; }
.wc-score { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 32px; padding: 0 10px; border-radius: 10px; font-weight: 800; font-size: 15px; }
.wc-score.good { background: #e3f4ec; color: #12663f; }
.wc-score.warn { background: #fff2db; color: #8a4f00; }
.wc-score.bad { background: #fde8e8; color: #b42318; }
.wc-score.off { background: #f0eff5; color: #5f5b78; }
.wc-score.txt { font-size: 13px; font-weight: 700; }
.wc-diff { font-size: 13px; font-weight: 700; color: var(--muted); }
.wc-of { font-size: 12px; font-weight: 700; opacity: .8; margin-left: 1px; }
.wc-word { font-size: 13px; font-weight: 600; }
.wc-note { font-size: 13px; color: var(--muted); }
.wc-diff.up { color: #12663f; }
.wc-diff.down { color: #b42318; }
.wc-act { display: flex; gap: 8px; flex: none; }
@media (max-width: 600px) {
  .wc-act { flex: 1 1 100%; }
  .wc-act .btn { min-height: 44px; flex: 1; }
  .wc-run, .wc-result .btn { min-height: 44px; }
}
.wc-err { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: #fde8e8; color: #b42318; font-size: 13px; font-weight: 600; }
.wc-err[hidden] { display: none; }

/* Home → Website box: area tiles, Google strip */
.s-web-stats > svg { flex: none; }
.s-areas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.s-area { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: #fff; text-decoration: none; color: var(--text); min-width: 0; transition: border-color .12s, transform .12s; }
.s-area:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.s-area-n { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.s-area.good .s-area-n { background: var(--good-soft); color: var(--good); }
.s-area.ok .s-area-n { background: var(--ok-soft); color: #8a4f00; }
.s-area.bad .s-area-n { background: var(--bad-soft); color: var(--bad); }
.s-area-t { display: flex; flex-direction: column; min-width: 0; }
.s-area-t b { font-size: 14px; }
.s-area-t span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.s-area.ok .s-area-t span, .s-area.bad .s-area-t span { color: var(--brand); }
.s-areas-more { font-size: 13px; color: var(--muted); text-decoration: none; margin-top: -6px; }
.s-areas-more:hover { color: var(--brand); }
.s-google { border-top: 1px solid var(--border); padding-top: 12px; }
.s-google:empty { display: none; }
.s-google-h { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.s-google-line { margin: 0; font-size: 13.5px; color: var(--muted); }
/* The button inside the sentence keeps a 44px tap area on phones without doubling its line's height (UX review
   2026-10-23: "…choose the data for this business. Choose" sat a whole line below the rest of its sentence). */
@media (max-width: 560px) { .s-google-line .link-btn { margin: -12px 0; vertical-align: middle; } }
.s-gstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; }
.s-gnum { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.2; }
.s-trend { font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.s-trend.up { color: #15803d; }
.s-trend.down { color: #b42318; }
@media (max-width: 420px) { .s-area { padding: 8px 9px; gap: 8px; } .s-area-n { width: 32px; height: 32px; font-size: 14px; border-radius: 9px; } .s-area-t b { font-size: 13.5px; } .s-gstats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 330px) { .s-areas { grid-template-columns: 1fr; } }

/* ---------- Website → Speed (#speed): design pass 2026-10-22, docs/design-pass/speed.md ----------
   Phone first: the scores, one sentence and the one violet button, then what's left. Inner panels are Lilac Gray
   (no bordered boxes inside the card); text on a tinted panel is Ink or Dusk, never Slate Gray (4.5:1). */
.sp-page { max-width: 860px; }
.sp-page .sp-back { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0; }
.sp-title { font-size: 22px; }
/* In Home's window the window's own header already says "Speed": the heading stays for screen readers only. */
.embedded .sp-title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sp-scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.sp-score { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sp-ring { width: 76px; height: 76px; flex: none; }
.sp-ring-track { stroke: var(--panel-2); }
.sp-ring-num { fill: var(--text); font-size: 20px; font-weight: 800; }
.sp-score-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-score-l { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sp-sub { font-size: 13px; color: var(--muted); }
.sp-var { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); line-height: 1.35; }
/* A score in words and a past fix's state: DESIGN.md's readable status pairs (deep text on its soft wash). */
.sp-verdict, .sp-state { display: inline-flex; align-items: center; white-space: nowrap; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1.5; background: #f0eff5; color: #5f5b78; }
.sp-verdict.good, .sp-state.good { background: #e3f4ec; color: #12663f; }
.sp-verdict.ok, .sp-state.ok { background: #fff2db; color: #8a4f00; }
.sp-verdict.bad, .sp-state.bad { background: #fde8e8; color: #b42318; }
.sp-when { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.sp-act { margin-top: 18px; padding: 16px; border-radius: 14px; background: var(--brand-soft); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.sp-found { margin: 0; font-size: 15px; font-weight: 600; max-width: 62ch; }
.sp-go { min-height: 44px; padding: 11px 24px; font-size: 15px; }
.sp-promise { margin: 0; font-size: 13px; color: #3a3658; max-width: 62ch; }
.sp-changes > summary, .sp-howto > summary { cursor: pointer; font-weight: 600; color: var(--brand); width: fit-content; }
.sp-changes > summary { padding: 10px 0; font-size: 14px; }
.sp-changes { margin-top: 6px; }
.sp-h { font-size: 17px; margin: 26px 0 2px; }
.sp-list { list-style: none; padding: 0; margin: 0; }
.sp-list li { display: flex; flex-direction: column; gap: 2px; padding: 12px 0 12px 22px; border-top: 1px solid var(--border); position: relative; overflow-wrap: anywhere; }
.sp-list li:first-child { border-top: 0; }
.sp-list li::before { content: ''; position: absolute; left: 5px; top: 21px; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.sp-list li > b { font-weight: 600; }
.sp-list li > span { font-size: 13px; max-width: 72ch; }
.sp-list .ask-mate { margin-top: 8px; }
.sp-note { margin: 4px 0 0; font-size: 13px; color: var(--muted); max-width: 72ch; }
.sp-howto { margin-top: 4px; font-size: 13px; }
.sp-howto > summary { padding: 4px 0; }
.sp-howto p { margin: 6px 0 0; }
.sp-howto ol, .sp-how ol { margin: 6px 0 8px 18px; padding: 0; list-style: decimal; }
/* Words, not addresses: never cut mid-word (the report's .f-more li breaks long links anywhere). */
.sp-howto li, .sp-how li { margin: 3px 0; word-break: normal; overflow-wrap: break-word; }
/* Steps inside a "What's left" row: a plain numbered list, not more rows. */
.sp-list .sp-howto li { display: list-item; padding: 0; border-top: 0; position: static; max-width: 72ch; }
.sp-list .sp-howto li::before { content: none; }
.sp-how { font-size: 14px; }
.speed-checks { list-style: none; padding: 0; margin: 6px 0 8px; }
/* The free QUIC.cloud connect on the row it solves, and the panels (put aside, team, admin test). */
.sp-next, .sp-panel { border-radius: 14px; background: var(--panel-2); font-size: 14px; }
.sp-next { margin-top: 10px; padding: 12px 14px; max-width: 72ch; }
.sp-panel { margin-top: 16px; padding: 14px 16px; }
.sp-next p, .sp-panel p { margin: 0; }
.sp-next > .btn, .sp-panel > .btn { margin-top: 10px; }
.sp-panel .ask-mate { margin-top: 10px; }
.sp-next .muted, .sp-panel .muted, .sp-consent { color: #3a3658; }
.sp-next .sp-consent, .sp-panel .sp-consent { margin-top: 6px; font-size: 12.5px; }
.sp-consent a { display: inline-block; padding: 4px 0; }
.sp-quic-on { margin: 14px 0 0; font-size: 13.5px; color: #12663f; }
.sp-again { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
.sp-again .muted { font-size: 13px; }
.sp-err { flex-basis: 100%; margin: 8px 0 0; }
.sp-run { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "when act" "st act"; align-items: center; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--border); font-size: 14px; }
.sp-run:first-child { border-top: 0; padding-top: 0; }
.sp-run-when { grid-area: when; }
.sp-run .sp-state { grid-area: st; justify-self: start; }
.sp-run .btn { grid-area: act; }
@media (min-width: 640px) { .sp-run { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "when st act"; } }
@media (max-width: 560px) {
  .sp-scores { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sp-ring { width: 64px; height: 64px; }
  .sp-act { align-items: stretch; }
  .sp-go { width: 100%; }
}
/* Touch: 44px to tap on the disclosures and the terms link (the buttons get it from the touch rule below). */
@media (pointer: coarse) {
  .sp-changes > summary, .sp-howto > summary { padding: 12px 0; }
  /* The terms link on its own line, 44px tall, instead of a gap opening inside the sentence. */
  .sp-consent a { display: block; width: fit-content; padding: 12px 0; line-height: 20px; }
}
/* ---------- end Website → Speed ---------- */
.s-area-var { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); line-height: 1.3; }
.choice-field { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.choice-field legend { padding: 0; margin-bottom: 6px; }
.choice-field label { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; font-size: 14px; cursor: pointer; }
.choice-field input { width: 16px; height: 16px; margin: 2px 0 0; flex: none; accent-color: var(--brand); }
.choice-field label { color: var(--text); }

/* Searches: filter, folds */
.kwl-filter { display: flex; max-width: 100%; overflow-x: auto; margin-bottom: 12px; }
.kwl-filter button { white-space: nowrap; padding: 7px 12px; font-size: 13px; }
.kwl-filter button:not(.active) { color: #5f5b78; }
.kwl-fold { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 4px; }
.kwl-fold > summary { cursor: pointer; padding: 10px 0; font-weight: 700; font-size: 14px; color: var(--brand); }
.kwl-note { font-size: 13.5px; color: var(--muted); margin: 6px 0 8px; }
.kwl-domains { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.kwl-domains a { padding: 4px 10px; border-radius: 999px; background: var(--panel-2); font-size: 13px; text-decoration: none; color: var(--text); overflow-wrap: anywhere; }
.kwl-missing { list-style: none; padding: 0; margin: 0; }
.kwl-missing li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 14px; overflow-wrap: anywhere; }
.kwl-grow { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: #12663f; }
.kwl-scan { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.kwl-scan .kwl-note { flex-basis: 100%; margin: 0; }
/* The two scan levels wrap on a phone (their prices must stay visible), never pushing the page wider (night check). */
.kwl-levels { margin: 0; display: flex; flex-wrap: wrap; max-width: 100%; }
.kwl-levels button { padding: 7px 12px; font-size: 13.5px; white-space: normal; text-align: left; }
.kwl-scan.running { padding: 10px 14px; border-radius: 12px; background: var(--brand-soft); font-size: 14px; }
.kwl-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--brand) 30%, transparent); border-top-color: var(--brand); animation: kwlspin .8s linear infinite; flex: none; }
@keyframes kwlspin { to { transform: rotate(360deg); } }

/* "RankByMe was updated · Reload" */
.update-bar { position: fixed; right: 16px; bottom: 16px; left: auto; transform: none; max-width: 360px !important; flex-wrap: wrap; font-weight: 500; z-index: 70; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 14px; background: #17143a; color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 10px 30px rgba(23, 20, 58, .25); max-width: calc(100% - 24px); }
.update-x { border: 0; background: transparent; color: #fff; opacity: .7; font-size: 20px; line-height: 1; padding: 4px 8px; cursor: pointer; }
.update-x:hover { opacity: 1; }
.embedded .update-bar { display: none; }

/* Settings → What your pages are for: one line, the list behind Change */
.role-change > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; font-size: 14px; padding: 4px 0; }
.role-change > summary::-webkit-details-marker { display: none; }
.role-change-btn { color: var(--brand); font-weight: 700; font-size: 13.5px; }
.role-change[open] .role-change-btn { visibility: hidden; }
/* Searches: Pin / remove in a small "…" menu */
.kwl-menu { position: relative; }
.kwl-menu > summary { list-style: none; cursor: pointer; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; color: var(--muted); }
.kwl-menu > summary::-webkit-details-marker { display: none; }
.kwl-menu > summary:hover, .kwl-menu[open] > summary { background: var(--panel-2); color: var(--text); }
.kwl-pop { position: absolute; right: 0; top: 36px; z-index: 5; min-width: 200px; display: flex; flex-direction: column; padding: 6px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); box-shadow: 0 10px 28px rgba(23, 20, 58, .14); }
.kwl-pop button { border: 0; background: transparent; text-align: left; padding: 9px 10px; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; }
.kwl-pop button:hover { background: var(--panel-2); }

/* Home: "Coming soon" line and the business-details nudge */
.s-soon-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 16px; padding: 12px 16px; border-radius: 14px; border: 1px dashed var(--border); color: var(--muted); font-size: 14px; }
.s-soon-line b { color: var(--text); }
.s-nudge { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 16px; border-radius: 16px; background: #fff6e5; border: 1px solid #f5dfb3; text-decoration: none; color: var(--text); }
.s-nudge > span:first-child { color: #b7791f; display: grid; place-items: center; }
.s-nudge .grow { display: flex; flex-direction: column; min-width: 0; }
.s-nudge .grow span { font-size: 13px; color: var(--muted); }
.s-nudge-go { font-weight: 700; font-size: 14px; color: var(--brand); white-space: nowrap; }
@media (max-width: 420px) { .s-nudge { flex-wrap: wrap; } .s-nudge-go { margin-left: 36px; } }

/* Home: the one next step for the whole business */
.s-next { margin-bottom: 18px; padding: 16px 20px; border-radius: 20px; background: var(--panel); border: 2px solid color-mix(in srgb, var(--brand) 35%, var(--border)); box-shadow: 0 12px 30px rgba(23, 20, 58, .06); }
.s-next-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.s-next-h h2 { font-size: 17px; margin: 0; }
.s-next-h span { font-size: 13px; color: var(--muted); }
.s-next > .s-step { border-top: 0; }
.s-next-foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.s-all { flex: 1 1 100%; }
.s-all > summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--brand); padding: 4px 0; }
.s-next-foot .s-link { margin: 0; }
.s-body-slim { padding-top: 12px; padding-bottom: 14px; }
.s-body-slim .s-links { margin-top: 0; }
@media (max-width: 560px) { .s-next { padding: 14px 16px; } }

/* Website → one area (#g-…): Fix all, the items, You do these */
.ag-score { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-weight: 800; font-size: 17px; }
/* Design pass 2026-10-22 (docs/design-pass/area-screens.md): DESIGN.md's deep status pairs (they were 3.0–3.95:1). */
.ag-score.good { background: #e3f4ec; color: #12663f; }
.ag-score.ok { background: #fff2db; color: #8a4f00; }
.ag-score.bad { background: #fde8e8; color: #b42318; }
.ag-sev { display: inline-flex; margin: 0 8px 4px 0; padding: 1px 9px; border-radius: 999px; background: #fde8e8; color: #b42318; font-size: 12.5px; font-weight: 700; vertical-align: 2px; }
.ag-err { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; padding: 8px 12px; border-radius: 10px; background: #fde8e8; color: #b42318; font-size: 13px; font-weight: 600; }
.ag-err[hidden] { display: none; }
.ag-fixall .ag-err { flex-basis: 100%; }
.ag-fixall { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 16px; border-radius: 14px; background: var(--brand-soft); margin: 4px 0 6px; }
.ag-fixall .grow { flex: 1 1 220px; display: flex; flex-direction: column; }
.ag-fixall .muted { font-size: 13px; color: #3a3658; }
.ag-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--border); }
.ag-row .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ag-row b { font-size: 14.5px; }
.ag-row p { margin: 3px 0 0; font-size: 13.5px; }
.ag-act { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.ag-act .muted { font-size: 12.5px; }
.ag-h { font-size: 15px; margin: 18px 0 2px; }
.ag-items, .ag-how { margin-top: 6px; }
.ag-items > summary, .ag-how > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--brand); }
.ag-items ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.ag-items li { margin-bottom: 3px; }
.ag-how p { background: var(--panel-2); padding: 10px 12px; border-radius: 10px; font-size: 13.5px; }
@media (max-width: 420px) { .ag-row { flex-wrap: wrap; } .ag-act { flex-direction: row; align-items: center; margin-left: auto; } }
/* Phones: the text gets the whole row; price and Fix it go on their own line under it, from the left edge. The "…"
   menu sits beside the title (UX review 2026-10-23: it used to take a line of its own). 44px to tap. */
@media (max-width: 600px) {
  .ag-row { flex-wrap: wrap; position: relative; }
  .ag-row .grow { flex: 1 1 100%; padding-right: 36px; }
  .ag-row .ag-act { margin-left: 0; flex-direction: row; align-items: center; gap: 10px; }
  .ag-items > summary, .ag-how > summary { display: flex; align-items: center; min-height: 44px; }
  .ag-row .hide-menu > summary { width: 44px; height: 44px; }
  .ag-row .hide-menu { position: absolute; top: 2px; right: -10px; margin: 0; }
  .ag-back, .ag-more { display: inline-flex; align-items: center; min-height: 44px; }
  .ag-items li { min-height: 32px; }
}

/* Google Maps box: Listing checklist */
.s-check { padding: 4px 22px 6px; }
.s-check-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.s-check-h h3 { font-size: 15px; margin: 8px 0 4px; }
.s-check-h span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.s-check ul { list-style: none; padding: 0; margin: 0; }
.s-check li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.s-check li label { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: center; cursor: pointer; font-size: 14px; font-weight: 600; }
.s-check li input { width: 18px; height: 18px; flex: none; accent-color: var(--good); }
.s-check li.done label span { color: var(--muted); text-decoration: line-through; font-weight: 500; }
.s-check li .btn, .s-check li .link-btn { flex: none; }
@media (max-width: 560px) { .s-check { padding-left: 16px; padding-right: 16px; } }
.s-check li label small { display: block; font-size: 11.5px; font-weight: 600; color: var(--good); text-decoration: none; }

/* Fix all (a group of fixes for one area) */
.fg-head h3 { font-size: 16px; margin: 0 0 2px; }
.fg-head p { margin: 0 0 8px; font-size: 13.5px; }
.fg-part { padding: 12px 0; border-top: 1px solid var(--border); }
.fg-part-h { display: flex; align-items: center; gap: 10px; }
.fg-part-h input, .fg-items input { width: 17px; height: 17px; flex: none; accent-color: var(--brand); }
.fg-part-h .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.fg-part-h .muted { font-size: 12.5px; }
.fg-items { margin: 6px 0 0 27px; }
.fg-items > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--brand); }
.fg-items ul { list-style: none; padding: 0; margin: 6px 0 0; max-height: 360px; overflow-y: auto; }
.fg-items li { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-top: 1px dashed var(--border); font-size: 13px; }
.fg-items li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.fg-open { margin-left: 27px; font-size: 13px; }
.fg-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }

/* Progress, said plainly: before → now */
.s-was { color: var(--muted); font-weight: 600; }
.s-better { color: #15803d; }
.s-worse { color: var(--text); }
.s-google-h span { text-transform: none; letter-spacing: 0; font-weight: 600; }

/* "Not for my business" */
.s-step .hide-menu, .ag-row .hide-menu { flex: none; }
.hide-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.hide-row:first-child { border-top: 0; }
.hide-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.hide-row .muted { font-size: 12.5px; }

/* Home area tiles: open in a window; "+ N more areas" opens in place */
.s-area { cursor: pointer; }
.s-area .btn { margin-left: auto; flex: none; }
.s-area:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
details.s-areas-more { margin-top: -6px; }
details.s-areas-more > summary { cursor: pointer; list-style: none; font-size: 13px; color: var(--muted); }
details.s-areas-more > summary::-webkit-details-marker { display: none; }
details.s-areas-more > summary:hover { color: var(--brand); }
details.s-areas-more[open] > summary { margin-bottom: 8px; }
@media (max-width: 420px) { .s-area { flex-wrap: wrap; } .s-area .btn { margin-left: 40px; } }

/* ---------- The Website plan (dash/website-plan.js) ---------- */
.s-wplan { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); }
.s-wplan b { display: block; font-size: 14px; }
.s-wplan span span { font-size: 13px; color: var(--muted); }
.wp-head { flex-wrap: wrap; }
.wp-actions { display: flex; gap: 8px; }
.wp-fine { font-size: 13px; color: var(--muted); margin: 6px 0; }
.wp-gate { display: grid; gap: 10px; }
.wp-miss { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--ok-soft); flex-wrap: wrap; }
.wp-get { display: grid; gap: 4px; justify-items: start; }
.wp-get.again { padding-top: 6px; border-top: 1px solid var(--border); }
.wp-get p { margin: 0; }
/* The plan in plain groups, each page folded (owner 2026-10-28: "easy and simple to see what's going on") */
.wp-filter { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px 0; }
.wp-f { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--text); font: 600 13.5px/1 inherit; font-family: inherit; cursor: pointer; }
.wp-f b { font-weight: 800; }
.wp-f:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.wp-f.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.wp-f--new:not(.on) b { color: #1d4ed8; }
.wp-cat { margin-top: 16px; }
.wp-count { color: var(--text); font-weight: 700; }
.wp-list { list-style: none; margin: 0; padding: 0 8px 8px; }
.wp-item + .wp-item { border-top: 1px solid var(--border); }
.wp-item > details > summary { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 11px 12px; border-radius: 10px; list-style: none; cursor: pointer; }
.wp-item > details > summary::-webkit-details-marker { display: none; }
.wp-item > details > summary::before { content: ''; flex: none; width: 7px; height: 7px; margin: 0 3px 0 1px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; }
.wp-item > details[open] > summary::before { transform: rotate(45deg); }
.wp-item > details > summary:hover { background: var(--panel-2); }
.wp-item-main { flex: 1; min-width: 0; }
.wp-item-main b { font-size: 14.5px; }
.wp-item-sub { display: block; overflow: hidden; font-size: 13px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.wp-item .chip { flex: none; padding: 4px 10px; font-size: 12.5px; }
.wp-step { margin-left: 2px; font-weight: 800; }
.wp-item-body { padding: 2px 12px 16px 36px; font-size: 13.5px; }
.wp-item-body h4 { margin: 12px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.wp-item-body h4:first-child { margin-top: 4px; }
.wp-item-body p { margin: 0; }
.wp-what { margin: 0; padding-left: 18px; line-height: 1.5; }
.wp-what li + li { margin-top: 2px; }
.wp-k-none { color: var(--muted); }
.wp-linkline, .wp-addr-line { margin-top: 12px !important; font-size: 12.5px; color: var(--muted); }
.wp-addr-line { margin-top: 4px !important; }
.wp-linkline em { font-style: normal; }
.wp-addr-line .wp-addr { display: inline; }
.wp-act { margin-top: 12px; }
/* The page a "Build a page for this search" button pointed at. */
.wp-here > details > summary { background: var(--brand-soft); }
/* What a re-run added (owner 2026-10-28): a "New" tag, info on its wash */
.wp-new { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: #dbeafe; color: #1d4ed8; font-size: 11.5px; font-weight: 700; vertical-align: 1px; }
.wp-added { margin: 6px 0 0; font-size: 13.5px; }
.wp-added .wp-new { margin: 0 4px 0 0; }
.wp-addr { display: block; font-size: 12px; color: var(--muted); word-break: break-all; }
.wp-vol, .wp-more i { font-size: 12px; color: var(--muted); font-style: normal; }
.wp-more { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px !important; }
.wp-more span { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); }
.wp-reasons { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; color: #b42318; }
.wp-on { font-size: 13px; font-weight: 600; color: var(--good); }
@media (max-width: 640px), (pointer: coarse) { .wp-f { min-height: 44px; } }
@media (max-width: 640px) {
  .wp-item-body { padding-left: 12px; }
  .wp-head .wp-actions { width: 100%; }
}
@media print {
  .no-print, .sidebar, .side, .sub-tabs, .mode-toggle, #sideNav { display: none !important; }
  .wp-cat { break-inside: auto; }
  .wp-item { break-inside: avoid; }
  .wp-item[hidden], .wp-cat[hidden] { display: block !important; }
}

/* Home → On Google: big number, small change; "See details" window */
.s-chg { margin: 2px 0 0; font-size: 12px; font-weight: 700; }
.s-chg.up { color: #15803d; }
.s-chg.down { color: #b42318; }
.s-chg span { font-weight: 500; color: var(--muted); }
.s-google-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.gd-chart { margin: 4px 0 18px; }
.gd-chart figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 14px; margin-bottom: 6px; }
.gd-chart figcaption .muted { font-size: 12.5px; }
.gd-chart svg { width: 100%; height: 110px; display: block; }
.gd-chart rect { fill: var(--brand); opacity: .75; }
.gd-chart rect:hover { opacity: 1; }
.gd-axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.gd-list { list-style: none; padding: 0; margin: 0; }
.gd-list li { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; font-size: 14px; }
.gd-list li:first-child { border-top: 0; }
.gd-list .muted { font-size: 12.5px; }
.gd-sources { list-style: none; padding: 0; margin: 8px 0 0; }
.gd-sources li { display: grid; grid-template-columns: minmax(0, 9rem) 1fr auto; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; }
.gd-bar { height: 8px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.gd-bar i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }

/* Settings → Backups */
.bk-last { margin: 0 0 4px; font-size: 14.5px; }
.bk-other { margin: 2px 0; font-size: 13px; }
.bk-make { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 12px; }
.bk-make .check { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0; }
.bk-run { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: var(--brand-soft); font-size: 14px; }
.bk-list { margin-top: 12px; }
.bk-list > summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--brand); }
.bk-list ul { list-style: none; padding: 0; margin: 8px 0 0; }
.bk-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px; overflow-wrap: anywhere; }
.s-notwp { margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; background: #fff6e5; border: 1px solid #f5dfb3; font-size: 14px; line-height: 1.45; }
.s-notwp p { margin: 0; }
.s-notwp-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px !important; }
.s-notwp-mail { font-weight: 600; user-select: all; overflow-wrap: anywhere; }
.fixall-mail { font-weight: 700; user-select: all; overflow-wrap: anywhere; }
.fixall .btn + .btn { margin-top: 8px; }

/* ---------- Free check, progress and teaser (design pass 2026-10-22, docs/design-pass/free-check.md) ---------- */
/* Free check without an account (report.js renderTeaser): the website card is the one violet way in; Google Maps
   beside it; what else the free account has in one quiet row. */
.tz-top { display: flex; align-items: center; gap: 20px; padding: 22px; margin-bottom: 16px; }
.tz-top h1 { margin: 0 0 4px; font-size: clamp(21px, 6.4vw, 26px); overflow-wrap: break-word; }
.tz-meta { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: #5b6170; }
.tz-sub { margin: 0; color: #5b6170; line-height: 1.45; }
.tz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.tz-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.tz-head { display: flex; align-items: center; gap: 12px; }
.tz-head h2 { margin: 0; font-size: 19px; }
.s-ico.sm { width: 36px; height: 36px; border-radius: 11px; }
.tz-line { margin: 0; line-height: 1.45; }
.tz-quiet { font-size: 14px; color: #5b6170; }
.tz-list { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.tz-list li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; }
.tz-list .dot { flex: none; margin-top: 6px; }
.tz-list .grow { flex: 1; min-width: 0; }
.tz-tag { flex: none; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #efebff; color: #4a2fc9; white-space: nowrap; }
.tz-tag.you { background: var(--panel-2); color: #5b6170; }
.tz-note { margin: 0; font-size: 13px; color: #5b6170; }
.tz-btn { align-self: flex-start; }
.tz-more { padding: 18px 20px; margin-top: 16px; }
.tz-more h2 { font-size: 16px; margin: 0 0 12px; }
.tz-more ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tz-more li { display: flex; gap: 10px; align-items: center; }
.tz-more li > span:last-child { display: flex; flex-direction: column; min-width: 0; font-size: 13px; color: #5b6170; }
.tz-more b { font-size: 14px; color: var(--text); }
.tz-login { text-align: center; margin: 18px 0 8px; color: #5b6170; }
@media (max-width: 640px) {
  .tz-top { flex-direction: column; text-align: center; padding: 18px 16px; }
  .tz-grid, .tz-more ul { grid-template-columns: 1fr; }
  .tz-btn { align-self: stretch; }
}
@media (max-width: 560px) and (pointer: coarse) { .tz-login .link-btn { min-height: 44px; } }
/* The score's word is a status chip under the ring (inside, it ran into the ring's stroke). */
.ring-col { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: none; }
.ring-col .chip { white-space: nowrap; }
/* The check while it runs: a slide-along bar, steps that keep their place, what happens if you leave. */
.progress-card h1 { font-size: clamp(20px, 6vw, 24px); overflow-wrap: break-word; }
.tz-top h1 { font-size: clamp(20px, 6vw, 26px); }
.tz-top h1:focus { outline: none; } /* focused only to start reading there when the check finishes */
#monthly.narrow { max-width: 620px; margin: 0 auto; }
.monthly-form input[aria-invalid="true"] { border-color: #b42318; }
.phase.now::before { width: 10px; height: 10px; } /* the spinner takes the same room as ✓ and ○ */
.pc-lead { margin: 0; color: #5b6170; }
.progress-card .phases { list-style: none; padding: 0; margin-bottom: 0; }
.phase.wait::before { color: #9aa0ae; }
.pc-leave { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 14px; }
.pc-leave p { margin: 0 0 6px; color: #5b6170; }
.pc-leave .share-url { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; }
.pc-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.pc-help { margin: 16px 0 0; font-size: 14px; color: #5b6170; }
.net-note, .page-error { max-width: 620px; margin: 0 auto 12px; padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; text-align: center; }
.net-note { background: #fff2db; color: #8a4f00; }
.page-error { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; background: #fde8e8; color: #b42318; }
.monthly-form .form-error { flex: 1 1 100%; margin: 0; min-height: 0; font-size: 14px; color: #b42318; }
@media (prefers-reduced-motion: reduce) { .phase.now::before { animation: none; } .bar > span { transition: none; } }
@media (max-width: 560px) and (pointer: coarse) { .pc-leave .link-btn { min-height: 44px; } }

/* First-run setup on Home (dash/setup.js): "Let's set up your business", one row per step with its status. */
.su { padding: 20px; margin-bottom: 16px; border: 1px solid var(--brand); }
.su-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.su-head h2 { margin: 0 0 4px; font-size: 20px; }
.su-head p { margin: 0; }
.su-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.su-step { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); }
.su-step.next { background: #f3efff; }
.su-step .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.su-step .grow .muted { font-size: 13px; overflow-wrap: anywhere; }
.su-step.done b { color: var(--muted); }
.su-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: #fff; border: 1px solid var(--border); }
.su-step.done .su-n { background: var(--good); border-color: var(--good); color: #fff; }
.su-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.su-skip { font-size: 13px; color: var(--muted); }
.su-foot { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; font-size: 13px; }
.su-mini { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 16px; border-radius: 14px; background: #f3efff; border: 1px solid #ddd3ff; }
.su-mini .grow { display: flex; flex-direction: column; }
.su-mini .muted { font-size: 13px; }
@media (max-width: 640px) {
  .su { padding: 16px; }
  .su-step { flex-wrap: wrap; }
  .su-step .grow { flex: 1 1 calc(100% - 40px); }
  .su-act { width: 100%; justify-content: flex-start; padding-left: 40px; }
}

/* "Before we start: make a backup" (backup-gate.js). */
.bg-box h3 { margin-top: 0; }
.modal .bg-row { justify-content: flex-start; margin: 4px 0 14px; }
.bg-or { margin: 0 0 8px; font-size: 13px; }
.bg-vouch { display: grid; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); margin-bottom: 12px; }
.bg-vouch .check { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.bg-vouch .check { flex-direction: row; margin: 0; font-weight: 500; }
.bg-photos { display: flex; gap: 8px; align-items: center; flex-direction: row; margin: 0 0 4px; font-weight: 500; }
.bg-photos input { width: auto; margin: 0; }
.bg-vouch .check input { width: auto; margin: 3px 0 0; flex: none; }
.bg-vouch .btn { justify-self: start; }
.bk-note { display: block; font-size: 12px; margin-top: 2px; }
.bk-size { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bk-size p { flex: 1 1 100%; margin: 0; }

.share-url { width: 100%; margin: 4px 0 8px; font-size: 13px; }

/* Home's area tiles: the button goes on its own line under the text (tiles are narrow at most widths, and an inline
   button covered the text). Lined up with the text, after the score. */
.s-area { flex-wrap: wrap; row-gap: 6px; }
.s-area-t { flex: 1 1 calc(100% - 48px); }
.s-area .btn { margin-left: 48px; }
.s-area-t span { overflow-wrap: anywhere; }
@media (max-width: 420px) { .s-area-t { flex-basis: calc(100% - 40px); } .s-area .btn { margin-left: 40px; } }

/* Before the first map check (map-grid.js mapTeaser): every spot a "?" with a soft pulse, and one clear button. */
.s-dots .ask { background: #b9bccd; color: #fff; animation: s-ask 2.8s ease-in-out infinite; }
@keyframes s-ask { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.14); opacity: 1; background: #8b7cf6; } }
@media (prefers-reduced-motion: reduce) { .s-dots .ask { animation: none; } }
.s-map-place { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: 11px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 3px rgba(23, 20, 58, .15); }
.s-ask .s-stat-col { justify-content: center; gap: 12px; }
.s-ask .btn { align-self: flex-start; }
.s-ask-q { margin: 0 0 4px; font-size: 18px; font-weight: 800; }
.tz-map { display: flex; align-items: center; gap: 14px; }
.tz-map .s-map { width: 132px; height: 132px; }
.tz-map .s-dots span { width: 14px; height: 14px; font-size: 8px; }
@media (max-width: 420px) { .s-ask { flex-direction: column; align-items: stretch; } .s-ask .s-map { align-self: center; } .s-ask .btn { align-self: stretch; } }

/* Customer mode (the admin seeing their own account as a customer). */
.customer-bar { background: #5b3fd6; }
.customer-bar .btn { color: #5b3fd6; }

/* Prospects (sales package, admin only): apart in the websites list, with a tag. */
.side-group { margin: 12px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.side-tag { flex: none; margin-left: auto; padding: 1px 6px; border-radius: 999px; background: #f3efff; color: #5b3fd6; font-size: 10.5px; font-weight: 700; }
.side-tag + .side-score { margin-left: 6px; }
.side-prospect { display: flex; gap: 6px; align-items: center; flex-basis: 100%; font-size: 12px; color: var(--muted); }
.side-prospect input { width: auto; margin: 0; }
/* The Sales package card on a prospect's Home (dash/sales.js). */
.sp-card { padding: 20px; margin-bottom: 16px; border: 1px solid var(--brand); }
.sp-card h2 { margin: 0 0 4px; font-size: 20px; }
.sp-steps { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 6px; }
.sp-steps li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.sp-steps .muted { font-size: 12.5px; }
.sp-st { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--panel-2); }
.sp-st.done { background: var(--good); color: #fff; }
.sp-st.failed { background: var(--bad); color: #fff; }
.sp-st.skipped { background: #e5e7eb; color: var(--muted); }
.sp-link { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 14px; border-radius: 12px; background: #f3efff; }
.sp-link input { flex: 1 1 220px; min-width: 0; font-size: 13px; }
.sp-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.side-add { flex-wrap: wrap; }

/* A prospect's page (/p/<key>, sales-page.js): plain, phone-first, one way in. */
.pk { display: grid; gap: 16px; padding-top: 20px; padding-bottom: 40px; max-width: 860px; }
.pk-hero { display: flex; align-items: center; gap: 24px; padding: 26px; }
.pk-hero h1 { margin: 4px 0 8px; font-size: 26px; line-height: 1.2; }
.pk-hero .muted { margin: 0 0 14px; }
.pk-kicker { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand); }
.pk-score { display: grid; justify-items: center; gap: 6px; flex: none; }
.pk-sec { padding: 22px; }
.pk-sec h2 { margin: 0 0 6px; font-size: 20px; }
/* A section title with its drawn icon tile, as on the free check (UX review 2026-10-23: emoji before). */
.pk-sec .pk-head { margin: 0 0 8px; }
.pk-sec .pk-head h2 { margin: 0; }
.pk-sec h3 { margin: 0 0 8px; font-size: 15px; }
.pk-sec > .muted { margin: 0 0 12px; }
.pk-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 10px 0; }
.pk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pk-list li { display: flex; gap: 8px; align-items: baseline; line-height: 1.4; }
.pk-list.good li { color: #166534; }
.pk-list .dot { flex: none; transform: translateY(-1px); }
.pk-note { margin: 8px 0 12px; font-size: 14px; }
.pk-table { display: grid; gap: 2px; margin: 4px 0 14px; font-size: 14px; }
.pk-row { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)); gap: 8px; padding: 9px 10px; border-radius: 10px; align-items: center; }
.pk-row span { overflow-wrap: anywhere; }
.pk-row.head { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pk-row.you { background: #f3efff; }
.pk-row:not(.head):not(.you):nth-child(odd) { background: var(--panel-2); }
.pk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pk-chip { padding: 6px 12px; border-radius: 999px; background: var(--panel-2); font-size: 14px; }
.pk-map { display: flex; align-items: center; gap: 20px; }
.pk-map h2 { font-size: 19px; }
.pk-map .muted { margin: 0 0 12px; }
.pk-pages { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.pk-until { text-align: center; margin: 0; font-size: 13px; }
/* The closing band: white text reads on its violet (the gradient ends darker than the button's, ≥4.5:1). */
.pk-cta { padding: 28px 22px; text-align: center; background: linear-gradient(135deg, var(--brand), #7a5af0); color: #fff; }
.pk-cta h2 { margin: 0 0 8px; font-size: 24px; }
.pk-cta p { margin: 0 auto 16px; max-width: 540px; }
.pk-cta .btn { background: #fff; color: #4a2fc9; border: 0; padding: 12px 28px; font-size: 16px; }
.pk-cta .btn:focus-visible { outline-color: #fff; }
/* Design pass 2026-10-22 (docs/design-pass/sales-page.md): who it's for, then what RankByMe is; one plain fact above the
   listing table; the score's word as a chip; search terms as a plain list; the expiry readable. */
.pk-for { margin: 0; font-size: 14px; font-weight: 600; color: #4a2fc9; }
.pk-lead { margin: 0 0 14px; color: #5b6170; }
.pk-score .chip { white-space: nowrap; }
.pk-score-l { font-size: 13px; color: #5b6170; }
.pk-fact { margin: 0 0 12px; font-weight: 600; }
.pk-row.you .chip { background: #efebff; color: #4a2fc9; }
ul.pk-chips { list-style: none; margin: 0; padding: 0; }
.pk-until { color: #5b6170; }
.pk-gone h1 { font-size: 22px; margin: 0 0 8px; }
.pk-page #navUser .btn-primary { background: var(--panel); color: var(--text); border-color: var(--border); box-shadow: none; }
@media (max-width: 640px) {
  .pk-hero { flex-direction: column; align-items: stretch; text-align: left; padding: 20px 16px; }
  .pk-hero .pk-score { align-self: center; }
  .pk-hero h1 { font-size: 22px; }
  .pk-hero .btn { width: 100%; }
  .pk-sec { padding: 18px 16px; }
  .pk-map { flex-direction: column; align-items: stretch; }
  .pk-map .s-map { align-self: center; }
  .pk-map .btn, .pk-cta .btn { width: 100%; }
  .pk-row { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, .8fr)); font-size: 13px; padding: 8px; }
}
.bk-btns { display: flex; gap: 6px; flex: none; }
.bk-big summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.bk-big ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; }
.bk-big li { display: flex; justify-content: space-between; gap: 10px; overflow-wrap: anywhere; }

.modal.modal-wide { max-width: 640px; width: calc(100vw - 32px); }
.modal-wide .sp-card { border: 0; padding: 0; box-shadow: none; margin: 0; }

/* Admin → All websites (admin-websites.js). */
.aw { margin-top: 16px; }
.aw-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 18px 0; }
.aw-bar input[type=search] { flex: 1 1 200px; max-width: 280px; }
.aw-table td { vertical-align: top; font-size: 13.5px; }
.aw-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.aw-flags .chip { font-size: 11px; }
.aw-open { white-space: nowrap; }
.aw-open .btn + .btn { margin-left: 4px; }
.aw-pages { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 18px 18px; }
.aw .seg-tabs { margin-bottom: 0; flex-wrap: wrap; }

/* "WordPress doesn't open? Get a restore file" (backups.js). */
.bk-rescue { display: inline-block; margin-top: 10px; font-size: 13px; }
.rf-key { width: 100%; font: 700 18px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; text-align: center; padding: 12px; margin: 4px 0 8px; }
.modal .rf-row { justify-content: flex-start; margin: 0 0 12px; }
.rf-steps { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.btn.disabled { pointer-events: none; opacity: .6; }
/* "Have a backup file on your computer? Restore from it" (backups.js): the upload's progress. */
.bk-up-bar { width: 100%; height: 12px; margin: 4px 0 10px; }

/* The prospect's page: the top bar scrolls away (sticky, it covered the score ring on phones). */
.pk-page .topbar { position: static; }
.sp-example { display: flex; gap: 8px; align-items: center; margin: 4px 0 8px; font-size: 14px; }
.sp-example input { width: auto; margin: 0; }
.sp-soon { margin: 0 0 8px; font-size: 13px; }

/* The preview website (public/dash/preview.js) */
.pv-body { display: grid; gap: 16px; }
.pv-get { display: grid; gap: 4px; justify-items: start; }
/* R08: the steps (sample pages, approve, the important pages, the rest), approving, and what publishing needs. */
.pv-step { margin: 0; font-size: 15px; }
.pv-get p { margin: 2px 0; }
.pv-get-btns { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 2px; }
.pv-approve { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; background: var(--brand-soft); }
.pv-needs { margin: 0; }
/* Rebuild my whole website (admins): the dry run's lists and the run's steps. */
.rb-dry { display: grid; gap: 6px; margin-top: 10px; }
.rb-dry p { margin: 0; }
.rb-list { margin: 6px 0; padding-left: 18px; max-height: 260px; overflow: auto; font-size: 13px; }
.rb-log { margin: 6px 0 10px; padding-left: 18px; font-size: 13px; color: var(--muted); }
.pv-progress p { margin: 6px 0 0; }
.pv-bar { height: 8px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.pv-bar i { display: block; height: 100%; min-width: 6%; border-radius: 999px; background: var(--brand); transition: width .4s ease; }
.pv-link { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 12px; background: var(--brand-soft); }
.pv-link b { display: block; }
.pv-url { display: block; font-size: 13px; word-break: break-all; color: var(--text); }
.pv-link .wp-fine { display: block; margin: 2px 0 0; }
.pv-link-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-cost { margin: 0; }
.pv-pages { list-style: none; margin: 0; padding: 0 8px 4px; }
.pv-page { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; padding: 14px 12px; border-bottom: 1px solid var(--border); }
.pv-page:last-child { border-bottom: 0; }
.pv-page-main { min-width: 220px; flex: 1 1 260px; }
.pv-page-main b { display: block; }
.pv-page-side { display: grid; gap: 6px; justify-items: end; align-content: start; flex: 0 1 auto; }
.pv-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.pv-reason { margin: 6px 0 0; font-size: 13px; color: #8a4f00; }
.pv-page.stopped .pv-reason { color: #b42318; }
/* Website plan + Preview new website, design pass 2026-10-22: a page's address, type and "first to approve" on one
   line; status chips in the deep pairs (the bright ones are 3:1 on their wash); 44 px buttons on phones. */
.pv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 3px; }
.pv-meta .wp-addr { display: inline; }
.pv-meta .wp-job { margin-top: 0; }
.pv-first { font-size: 12px; font-weight: 600; color: #3a3658; }
.pv-first::before { content: '·'; margin-right: 8px; color: var(--muted); }
.pv-done p { margin: 0; }
.pv-link .wp-fine { color: #3a3658; }
:is(#wpTab, #pvTab) .chip.good { background: #e3f4ec; color: #12663f; }
:is(#wpTab, #pvTab) .chip.warning { background: #fff2db; color: #8a4f00; }
:is(#wpTab, #pvTab) .chip.notice { background: #dbeafe; color: #1d4ed8; }
@media (max-width: 640px) {
  :is(#wpTab, #pvTab) .btn { min-height: 44px; }
  #wpTab .wp-links summary { display: flex; align-items: center; min-height: 44px; }
  .pv-page-side { width: 100%; grid-template-columns: auto 1fr; justify-items: start; align-items: center; }
  .pv-page-side .pv-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
.pv-editor { max-width: 680px; max-height: calc(100vh - 32px); overflow: auto; }
.pv-fields { display: grid; gap: 2px; }
.pv-editor textarea { width: 100%; margin-top: 5px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); font: inherit; font-size: 14px; resize: vertical; }
.pv-set { margin: 6px 0 10px; padding: 10px 12px 2px; border: 1px solid var(--border); border-radius: 12px; }
.pv-set legend { padding: 0 6px; font-size: 13px; font-weight: 700; }
.pv-pair { padding-bottom: 6px; border-bottom: 1px dashed var(--border); margin-bottom: 8px; }
.pv-pair:last-child { border-bottom: 0; }
@media (max-width: 640px) {
  .pv-page-side { justify-items: start; }
  .pv-actions { justify-content: flex-start; }
}

/* Paid results and the account (UI review J07, J13). */
.run-note { margin: 0 0 12px; }
.stat-sub { font-size: 12.5px; margin-top: 2px; }
.acct-funds { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); }

/* The report (report.js): Simple = compact rows, details folded; Expert = everything open (UI review L05). */
.rp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rp-kicker { font-weight: 600; font-size: 13px; color: var(--muted); letter-spacing: .04em; }
.rp-mode { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--panel-2); }
.rp-mode button { border: 0; background: transparent; padding: 4px 12px; border-radius: 8px; font-weight: 600; font-size: 13px; line-height: 1.4; color: #5b6170; cursor: pointer; }
.rp-mode button[aria-checked="true"] { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(23, 20, 58, .12); }
.rp-sev { margin-left: 8px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.rp-area.rp-simple .block-head p { font-size: 13.5px; }
.rp-row { align-items: flex-start; padding: 10px 0; }
.rp-row .grow { min-width: 0; }
.rp-details > summary { font-size: 13px; color: var(--muted); cursor: pointer; margin-top: 4px; }
.rp-details[open] > summary { margin-bottom: 6px; }
.rp-how-h { margin: 10px 0 4px; font-weight: 600; font-size: 13.5px; }
.how-steps { margin: 6px 0 6px; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; line-height: 1.45; }
.how-copy { font-size: 13px; margin-top: 2px; }
/* The report on phones: one-row top bar (PDF and New check are on bigger screens), a domain that fits. */
@media (max-width: 560px) {
  .rp-page #pdf, .rp-page .topbar a.btn[href="/"] { display: none !important; }
  .rp-page .topbar .wrap { flex-wrap: nowrap; gap: 8px; }
  .rp-page .acct-btn .chip, .rp-page .acct-name { display: none; }
  .rp-sum h1 { font-size: 21px; overflow-wrap: break-word; }
}

/* ---------- Shared report (design pass 2026-10-22, docs/design-pass/shared-report.md) ---------- */
/* One violet button at the top (Start fixing, Connect WordPress, or on a shared link Download PDF); every problem's
   button is white. The Fix-all panel is a light card, not a violet slab. */
.rp-page .fixall { background: #f7f5ff; color: var(--text); border: 1px solid #e3dcff; }
.rp-page .fixall .big { font-size: 22px; line-height: 1.2; }
.rp-page .fixall p { opacity: 1; color: #5b6170; font-size: 14px; margin: 6px 0 14px; }
.rp-page .fixall .btn { background: var(--panel); color: var(--text); border: 1px solid var(--border); }
.rp-page .fixall .btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: var(--on-brand); border-color: transparent; }
@media (min-width: 901px) { .rp-page .summary.no-fixall { grid-template-columns: auto minmax(0, 1fr); } }
.rp-why { margin: 6px 0 0; font-size: 14px; color: #5b6170; }
.rp-sum h1:focus { outline: none; }
/* How-to steps wrap between words (the page-address rule broke them mid-word: "r / eturn"). */
.f-more .how-steps li, .f-more .sp-how li { word-break: normal; overflow-wrap: anywhere; }
.rp-page .good-wrap summary { color: #12663f; }
.rp-page .top-item .eff, .rp-page .speed-box .metrics { color: #5b6170; } /* gray on the lilac rows reads (≥4.5:1) */
/* A shared link: who shared it and what to do with it, first. */
.shared-note { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; padding: 18px 20px; margin-bottom: 16px; border: 2px solid #e3dcff; }
.shared-note .grow { flex: 1 1 320px; min-width: 0; }
.shared-note h2 { font-size: 17px; margin: 0 0 4px; overflow-wrap: break-word; }
.shared-note p { margin: 0; font-size: 14px; color: #5b6170; }
.shared-act { display: flex; gap: 8px; flex-wrap: wrap; }
.rp-page .modal .form-error:empty { min-height: 0; margin: 0; }
.share-copied { margin: 8px 0 0 !important; font-size: 13px; }
.share-copied.ok { color: #12663f !important; }
/* A problem's fold is a visible control (a violet label and its own chevron, kept when the row is a flex box on phones). */
.rp-page .rp-details > summary { list-style: none; display: flex; align-items: center; gap: 8px; color: var(--brand); font-weight: 600; }
.rp-page .rp-details > summary::-webkit-details-marker { display: none; }
.rp-page .rp-details > summary::before { content: ''; flex: none; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; }
.rp-page .rp-details[open] > summary::before { transform: rotate(45deg); }
/* Notes in page lists wrap between words; only a long address breaks where it must. */
.rp-page .f-more li { word-break: normal; overflow-wrap: anywhere; }
@media print { .shared-act, .rp-mode, .rp-rest > summary { display: none !important; } }
/* Mate's window (?in=mate): the asked problem first and marked; the rest folded, without the other problems' buttons. */
body.in-mate .back-link, body.in-mate #monthly { display: none; }
.rp-asked-box { border: 2px solid #d9cffd; margin-bottom: 16px; }
.rp-asked-box .finding { border-bottom: 0; }
.rp-rest > summary { cursor: pointer; font-weight: 600; color: var(--brand); padding: 12px 4px; min-height: 44px; }
.in-mate .rp-rest .fix, .in-mate .rp-rest .top-item .btn, .in-mate .rp-rest .fixall .btn, .in-mate .rp-rest .teaser .btn { display: none; }
/* Phones: the six area tiles take two short rows; "Fix these first" puts its button under the title; folds, the
   Simple/Expert switch and the back link are 44 px to tap. */
@media (max-width: 600px) {
  .rp-page .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .rp-page .cat { padding: 10px 6px; gap: 6px; }
  .rp-page .cat .label { font-size: 12px; }
}
@media (max-width: 560px) {
  .rp-page .top-item { flex-wrap: wrap; }
  .rp-page .top-item .t { flex: 1 1 calc(100% - 40px); }
  .rp-page .top-item .btn { margin-left: 38px; }
  .shared-act { width: 100%; }
  .shared-act .btn { flex: 1 1 auto; }
}
@media (max-width: 560px) and (pointer: coarse) {
  .rp-page :is(.rp-details, .good-wrap, .f-more) > summary { display: flex; align-items: center; min-height: 44px; }
  .rp-page .rp-mode button { min-height: 40px; }
  .rp-page .back-link { display: inline-flex; align-items: center; min-height: 44px; }
  .rp-page .how-copy { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- Account windows and /reset (design pass 2026-10-22, docs/design-pass/sign-up-log-in.md) ---------- */
/* A visible close (×, 44 px) on windows that ask for it (modal(html, { closeButton: true })). */
.modal { position: relative; }
.modal-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; color: #5b6170; font-size: 26px; line-height: 1; cursor: pointer; }
.modal-x:hover { background: var(--panel-2); color: var(--text); }
.modal.has-x > h3:first-of-type { padding-right: 36px; }
/* Email first, one error line under each field, "Show" in the password field, one full-width violet button, the other
   window as a text link under it. Field borders readable (≥3:1). */
.auth-modal label { display: block; margin: 0 0 5px; font-size: 13px; font-weight: 600; color: var(--text); }
.auth-modal .field-hint { display: inline; margin-left: 6px; font-size: 12.5px; font-weight: 500; color: #5b6170; }
.auth-modal input:not([type=checkbox]) { width: 100%; margin: 0; padding: 11px 12px; border: 1px solid #8a8fa0; border-radius: 10px; background: var(--panel); font-size: 16px; }
.auth-modal input[aria-invalid="true"] { border-color: #b42318; }
.auth-modal .field-err { margin: 4px 0 12px; min-height: 0; font-size: 13px; font-weight: 500; color: #b42318; }
.auth-modal .form-error { margin: 0 0 10px; min-height: 0; font-size: 14px; color: #b42318; }
.auth-modal .form-error:empty { margin: 0; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 70px !important; }
.pw-show { position: absolute; top: 3px; right: 3px; bottom: 3px; min-width: 60px; border: 0; border-radius: 8px; background: var(--panel-2); color: var(--text); font-weight: 600; font-size: 13px; cursor: pointer; }
.auth-modal .terms-check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 0; padding: 6px 0; min-height: 44px; font-weight: 400; font-size: 13px; color: #5b6170; }
.auth-modal .terms-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--brand); }
.auth-forgot { margin: -6px 0 10px !important; text-align: right; }
.auth-submit { width: 100%; min-height: 46px; margin-top: 4px; }
.auth-switch { margin: 14px 0 0 !important; text-align: center; font-size: 14px; color: #5b6170 !important; }
.auth-switch .link-btn { font-size: 14px; }
/* /reset: the same form on its own page; a used link offers a new one. */
.reset-card { max-width: 460px; margin: 40px auto; padding: 28px; }
.reset-card h1 { font-size: 24px; margin: 0 0 6px; }
.reset-lead { margin: 0 0 18px; color: #5b6170; }
.reset-expired .form-error { margin: 0 0 14px; color: #b42318; }
@media (max-width: 560px) { .reset-card { margin: 20px auto; padding: 22px 16px; } }

/* ---------- Connect WordPress (design pass 2026-10-22, docs/design-pass/connect-wordpress.md) ---------- */
.cn-card h1 { overflow-wrap: break-word; }
.cn-card h1:focus { outline: none; }
.cn-host { margin: 2px 0 10px; font-size: 14px; color: #5b6170; overflow-wrap: anywhere; }
.cn-wait { display: flex; align-items: center; justify-content: center; gap: 10px; }
.cn-steps { text-align: left; margin: 16px 0 4px; }
.cn-card .pc-actions .btn { white-space: normal; }
.modal .cn-row { justify-content: flex-start; }
.modal.has-x > h3 { overflow-wrap: break-word; } /* a website address breaks at a dot, not mid-word */
#forgotForm .auth-submit { margin-top: 12px; }
.cn-forward { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 14px; }
.cn-forward p { margin: 0 0 6px; color: #5b6170; }
.cn-forward .share-url { width: 100%; padding: 10px 12px; border: 1px solid #8a8fa0; border-radius: 10px; font-size: 14px; }
/* The links that move between account windows are 44 px to tap. */
.auth-switch .link-btn, .auth-forgot .link-btn, .cn-forward .link-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
@media (max-width: 560px) {
  .cn-card .pc-actions .btn, .modal .cn-row .btn { flex: 1 1 100%; }
  .cn-wait { flex-direction: column; }
}

/* Business form (UI review R05, EC020). */
.field-hint { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); margin: 2px 0 4px; }
.choice-field.ask { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 10px; }
.field-ask { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--brand); }
.p-ask { margin-bottom: 14px; }
.more-fields > summary { cursor: pointer; font-size: 13.5px; color: var(--brand); font-weight: 600; }
.more-fields[open] > summary { margin-bottom: 8px; }

.update-bar .update-later { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.empty-state { padding: 12px 14px; border-radius: 12px; background: var(--panel-2); }
.empty-state p { margin: 4px 0 0; font-size: 13.5px; }
.ai-sentence { margin: 0 0 12px; line-height: 1.45; }
.modal:focus { outline: none; }

/* Linked websites (docs/SPEC-linked-sites.md). */
.side-tag.shared { background: #eef7f1; color: #15803d; }
.payer-pick { border: 0; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.payer-pick legend { font-weight: 600; font-size: 13.5px; margin-bottom: 4px; }
.payer-pick label { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.payer-pick input { width: auto; margin: 0; }
.side-tag.managed { background: #eef2ff; color: #4338ca; }
.s-google-next { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); font-size: 13.5px; line-height: 1.45; }
.s-google-next .link-btn { white-space: nowrap; }

/* Google insights (#google, docs/SPEC-google-insights.md): big numbers, where you stand, next steps, tables. */
.gi-view { margin: 0 0 12px; }
.gi-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.gi-top .more-link { margin: 0; }
.gi-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.gi-stat { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.gi-label { margin: 0; font-size: 13px; color: var(--muted); font-weight: 600; }
.gi-note { font-weight: 500; font-size: 12px; }
.gi-num { margin: 2px 0 0; font-size: 30px; font-weight: 800; line-height: 1.15; }
.gi-chg { margin: 4px 0 0; font-size: 13px; font-weight: 700; }
.gi-chg.up, .gi-chg-inline.up { color: #15803d; }
.gi-chg.down, .gi-chg-inline.down { color: #b42318; }
.gi-chg .muted { font-weight: 500; }
.gi-chg-inline { font-weight: 700; white-space: nowrap; }
.gi-stand-text { margin: 0 0 10px; font-size: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.gi-meter { height: 12px; border-radius: 99px; background: var(--panel-2); overflow: hidden; margin-bottom: 8px; }
.gi-meter i { display: block; height: 100%; border-radius: 99px; }
.gi-meter i.good { background: var(--good); }
.gi-meter i.ok { background: var(--ok); }
.gi-meter i.bad { background: var(--bad); }
.gi-stand .muted { margin: 0; font-size: 13px; }
.gi-next { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.gi-next li { border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.gi-next li p { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.gi-next li .btn { margin-top: auto; }
.gi-next-title { display: flex; flex-direction: column; gap: 2px; }
.gi-page { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.gi-gain { color: var(--good); font-weight: 600; font-size: 13px !important; }
.gi-ops { list-style: none; padding: 0; margin: 0; }
.gi-ops li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 0; border-top: 1px solid var(--border); }
.gi-ops li:first-child { border-top: 0; }
.gi-op-main { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: 14px; overflow-wrap: anywhere; }
.gi-op-main .muted { font-size: 12.5px; }
.gi-why { font-size: 13px; }
.gi-range { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; font-size: 14px; }
.gi-range label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.gi-range select, .gi-range input { width: auto; margin: 0; }
.gi-custom { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gi-custom[hidden] { display: none; }
.gi-vs { font-size: 12.5px; }
.gi-tabs { flex-wrap: wrap; }
.gi-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.gi-filter { flex: 1 1 200px; max-width: 320px; margin: 0; }
.gi-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.gi-kinds .chip { border: 1px solid transparent; cursor: pointer; font-size: 12.5px; }
.gi-kinds .chip.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.gi-sort { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; text-align: inherit; }
.gi-table { min-width: 880px; position: relative; } /* keeps the hidden "Action" label inside the scroll box */
.gi-table td { font-size: 13.5px; }
.gi-table td:first-child { min-width: 170px; }
.gi-table td .btn, .gi-table .chip, .gi-table td.n { white-space: nowrap; }
.gi-table td .chip { margin: 2px 0; }
.gi-table .gi-why { display: block; min-width: 220px; }
.gi-count { font-size: 12.5px; margin: 8px 0 0; }
.gi-none { margin: 8px 0; }
.gi-funnel { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.gi-step { border: 1px solid var(--border); border-radius: 12px; padding: 12px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gi-fnum { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.2; }
.gi-rate { margin: auto 0 0; padding-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--brand); }
.gi-sub, .gi-miss { margin: 0; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.gi-hint { margin: 10px 0 0; font-size: 13px; }
.gi-wait { margin: 0 0 10px; font-size: 13px; }
.gi-skip { font-size: 13px; }
.gi-skip b { font-weight: 600; }
.gi-maps { list-style: none; padding: 0; margin: 12px 0 0; font-size: 13.5px; }
.gi-maps li { padding: 4px 0; overflow-wrap: anywhere; }
.gi-ops li > .btn + .btn { margin-left: 0; }
/* On Google, design pass 2026-10-22 (docs/design-pass/on-google.md): rows behind "See all" stay hidden (the lists'
   display:flex beat the hidden attribute), readable green, styled fields in Detailed, 44px on a phone. */
.gi-ops li[hidden], .gd-list li[hidden] { display: none; }
.gi-gain { color: #12663f; }
.gi-ok { color: #12663f; font-weight: 600; }
.chip.gi-out { color: #5f5b78; }
.gi-filter, .gi-range select, .gi-range input:not([type="checkbox"]) { min-height: 40px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); font: inherit; font-size: 14px; color: inherit; }
.gi-filter:focus-visible, .gi-range select:focus-visible, .gi-range input:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
@media (max-width: 600px) {
  .gi-back, .gi-more { display: inline-flex; align-items: center; min-height: 44px; }
  .gi-view button { min-height: 44px; }
  .gi-filter, .gi-range select, .gi-range input:not([type="checkbox"]) { min-height: 44px; font-size: 16px; }
}
.gi-channels { list-style: none; padding: 0; margin: 0; }
.gi-channels li { display: grid; grid-template-columns: minmax(0, 12rem) 1fr 7.5rem; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; }
.gi-ch-name { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.gi-ch-name .muted { font-size: 12px; }
.gi-ch-num { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; text-align: right; }
.gi-ch-num b { font-size: 14px; }
@media (max-width: 900px) { .gi-funnel { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }
@media (max-width: 560px) {
  .gi-funnel { grid-template-columns: 1fr; }
  .gi-channels li { grid-template-columns: minmax(0, 1fr) auto; }
  .gi-ch-num { min-width: 0; }
  .gi-channels .gd-bar { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 560px) {
  .gi-num { font-size: 26px; }
  /* Two numbers a row, so "What to do next" starts on the first screen. */
  .gi-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gi-stat { padding: 10px 12px; }
}
/* Windows over the page (public/dash/window.js): a "Full screen" button next to ×, and a nearly full-screen size. */
.mate-window-acts { display: flex; align-items: center; gap: 8px; flex: none; }
.mate-window-box.wide { width: min(1440px, 100%); height: 100%; }
/* "Tried, couldn't" (src/tried.js): Settings → Tried before, and the fix screen's note. */
.tried-why { font-size: 13px; color: var(--text); margin: 2px 0; }
.tried-note { margin: 12px 0; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); font-size: 14px; }
/* Home: the folded setup is a slim line at the foot of "Your next step" (one box at the top of Home). */
.s-next .su-mini { margin: 12px 0 0; padding: 10px 0 0; background: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; font-size: 13.5px; }
.s-next .su-mini b { font-weight: 600; color: var(--muted); }

/* ---------- Phones: layout fixes from the night UX check (2026-10-22) ---------- */
/* A table in .table-wrap scrolls inside its card, like .table-scroll (Google Maps: the searches table). */
.table-wrap { overflow-x: auto; }
/* Button rows never push the page sideways. */
.wp-actions, .danger-row { flex-wrap: wrap; }
/* A choice's gray note flows after its words instead of standing in its own narrow column. */
.choice-field label, label.check:has(> span.muted) { display: block; position: relative; padding-left: 24px; line-height: 1.45; }
.choice-field label > input, label.check:has(> span.muted) > input { position: absolute; left: 0; top: 2px; margin: 0; }
@media (max-width: 600px) {
  /* Segmented choices scroll inside their track instead of pushing the page sideways. */
  .seg-tabs { max-width: 100%; overflow-x: auto; }
  /* The shared report's cards keep a side margin instead of touching the screen's edges. */
  .report { padding-left: 16px; padding-right: 16px; }
  /* A block's title and line keep a readable width; its buttons and chips go under them when space runs out. */
  .block-head { flex-wrap: wrap; }
  .block-head > .grow { flex: 1 1 220px; min-width: 0; }
}
@media (max-width: 560px) {
  /* Searches: the two research choices stack. */
  .kwl-levels { display: grid; width: 100%; }
  .kwl-levels button { white-space: normal; text-align: left; }
  /* Home steps: the title gets the row; the button (and its ⋯ menu) go under it, lined up with the title. */
  .s-step { flex-wrap: wrap; row-gap: 8px; }
  .s-step-t { flex: 1 1 calc(100% - 40px); }
  .s-step > .s-step-t + .btn { margin-left: 40px; }
  /* A Home box's status chip goes under its title and line, so the line isn't squeezed into a narrow column. */
  .s-title { flex-wrap: wrap; row-gap: 8px; }
  .s-title > .grow { flex: 1 1 calc(100% - 62px); min-width: 0; }
  .s-title > .s-chip { margin-left: 62px; }
  /* Sales page: the competitors' column names stay whole words. */
  .pk-row.head { font-size: 11px; letter-spacing: 0; }
  .pk-row.head span { overflow-wrap: normal; }
}
@media (max-width: 420px) {
  /* Home area tiles: the button spans the tile under the score, instead of sticking out of it. */
  .s-area .btn { margin-left: 0; flex: 1 1 100%; }
  /* Top bars stay one row: a smaller logo, the icon alone when the account button or the report's buttons need the room. */
  .topbar .wrap { gap: 8px; }
  .topbar .logo-full { height: 32px; }
  .topbar .wrap:has(.acct) .logo-full, .rp-page .topbar .logo-full { display: none; }
  .topbar .wrap:has(.acct) .logo-img, .rp-page .topbar .logo-img { display: block; }
  .rp-page #navUser { flex-wrap: nowrap; gap: 6px; }
  .rp-page .topbar .btn { padding-left: 10px; padding-right: 10px; }
}
/* Mate's fix card: the "Free how-to" pill keeps its small size (the card's 20px price size made it squeeze the title
   into a one-word column); on phones the price goes under the title. */
.mate-fixcard .mate-price-amount.free { font-size: 13px; }
@media (max-width: 560px) {
  .mate-fc-top { flex-wrap: wrap; row-gap: 6px; }
  .mate-fc-top .mate-card-title { flex: 1 1 calc(100% - 52px); }
  .mate-fc-top .mate-price-amount { margin-left: 52px; }
}
/* Get reviews: the one-column cards never grow wider than the screen (a long review link in its field). */
@media (max-width: 900px) { .rk-grid, .rk-msgs, .rk-stats { grid-template-columns: minmax(0, 1fr); } }
/* A popup taller than the screen (sign-up on a short phone, a phone turned sideways, the keyboard open) scrolls, so
   its buttons can always be reached; auto margins keep it centered when it fits. */
.modal-back { overflow-y: auto; overscroll-behavior: contain; }
.modal-back > .modal { margin: auto; }
@media (max-width: 480px) {
  /* Popup buttons share the row (or each take a full row) instead of stacking ragged on the right. */
  .modal .row { flex-wrap: wrap; }
  .modal .row > .btn { flex: 1 1 auto; }
}
/* Touch phones: 44px buttons; small text links, "See all" toggles and the Simple/Expert switch get a bigger tap area
   without moving anything. */
@media (max-width: 560px) and (pointer: coarse) {
  .btn { min-height: 44px; }
  .link-btn, a.more-link, a.s-link, .mode-toggle button, .s-more > summary, details.s-areas-more > summary { position: relative; }
  .link-btn::after, a.more-link::after, a.s-link::after, .s-more > summary::after, details.s-areas-more > summary::after { content: ''; position: absolute; inset: -8px -4px; }
  .mode-toggle button::after { content: ''; position: absolute; inset: -7px 0; }
}

/* ---------- Social media tab (docs/social/SPEC.md; design pass docs/design-pass/social.md) ---------- */
#socialTab { display: flex; flex-direction: column; gap: 18px; }
#socialTab ::selection { background: var(--brand-soft); color: var(--text); }
#socialTab textarea, #socialTab input { caret-color: var(--brand); }
#socialTab :is(button, a, summary, input, select, textarea):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.so-head h2 { font-size: 22px; letter-spacing: -0.01em; }
.so-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; max-width: 64ch; }
.so-head .so-facts { color: var(--text); font-weight: 600; font-size: 13px; }
.so-block, .so-ready { padding: 18px 20px; }
.so-block > h3, .so-ready > h3 { margin: 0 0 12px; font-size: 19px; letter-spacing: -0.01em; }
.so-ready { border: 2px solid color-mix(in srgb, var(--brand) 22%, var(--border)); }
.so-muted { color: var(--muted); font-weight: 400; }
.so-small { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.so-error { margin: 6px 0 0; color: #b42318; background: #fde8e8; border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; }
.so-error[hidden] { display: none; }
.so-msg { margin: 0; font-size: 13px; font-weight: 600; color: #12663f; }
.so-msg:empty { display: none; }
.so-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.so-empty { margin: 0; color: var(--muted); font-size: 14px; }

/* Make more posts */
.so-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.so-tool { background: var(--panel-2); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
.so-tool h4 { margin: 0; font-size: 15px; }
.so-tool p { margin: 0; font-size: 13.5px; color: #3a3658; }
.so-tool .so-muted, .so-tool .so-small { color: #5f5b78; }
#soPhotoForm { display: flex; flex-direction: column; gap: 8px; width: 100%; }
#soPhotoForm[hidden] { display: none; }
#soPreview { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; }
.so-note, .so-plan label, .so-tags-l { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: #3a3658; }
.so-note { width: 100%; }
.so-note input, .so-plan select, .so-plan input, .so-tags { font: inherit; font-weight: 400; font-size: 14px; padding: 9px 11px; border: 1px solid #8a8fa0; border-radius: 10px; background: var(--panel); color: var(--text); }
.so-plan { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.so-plan[hidden], .so-covered[hidden] { display: none; }
.so-writing { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.so-spin { width: 16px; height: 16px; border: 2.5px solid var(--brand-soft); border-top-color: var(--brand); border-radius: 50%; animation: so-spin 0.9s linear infinite; flex: none; }
@keyframes so-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .so-spin { animation-duration: 3s; } }

/* Posts: open cards (waiting today) and short rows (later, posted) */
.so-post.open + .so-post.open { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 14px; }
.so-post-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 10px; }
.so-post-h b { font-size: 16px; }
.so-day { font-size: 13px; font-weight: 700; color: var(--text); }
.so-kind { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--panel-2); color: #3a3658; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.so-rows { display: flex; flex-direction: column; max-width: 920px; }
.so-week { margin: 14px 0 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.so-week:first-child { margin-top: 0; }
.so-row { border-top: 1px solid var(--border); }
.so-row > summary { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 14px; gap: 12px; align-items: center; padding: 10px 0; min-height: 44px; cursor: pointer; list-style: none; }
.so-row > summary::-webkit-details-marker { display: none; }
.so-row > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); }
.so-row[open] > summary::after { transform: rotate(-135deg); }
.so-thumb { width: 48px; height: 48px; border-radius: 9px; background: var(--panel-2); overflow: hidden; display: grid; place-items: center; color: var(--muted); }
.so-actions a.link-btn { text-decoration: none; }
.so-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.so-row-t { display: flex; flex-direction: column; min-width: 0; }
.so-row-t .so-day { font-weight: 600; color: var(--muted); }
.so-row-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.so-row[open] > .so-body { padding: 4px 0 16px; }
.so-body { display: grid; grid-template-columns: 180px minmax(0, 720px); gap: 16px; }
.so-photo { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.so-photo img { width: 180px; height: 135px; object-fit: cover; border-radius: 12px; }
.so-photo.none p { margin: 0; background: var(--panel-2); border-radius: 12px; padding: 12px; font-size: 13.5px; color: #3a3658; }
.so-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.so-switch { display: inline-flex; gap: 3px; padding: 3px; background: var(--panel-2); border-radius: 10px; align-self: flex-start; }
.so-switch button { border: 0; background: transparent; border-radius: 8px; padding: 7px 14px; font: inherit; font-size: 14px; font-weight: 600; color: #3a3658; cursor: pointer; }
.so-switch button[aria-selected="true"] { background: var(--panel); color: var(--text); font-weight: 700; box-shadow: 0 1px 3px rgba(23, 20, 58, .12); }
.so-check { color: #12663f; }
.so-panel { display: flex; flex-direction: column; gap: 8px; }
.so-panel textarea { width: 100%; min-height: 96px; padding: 11px 12px; border: 1px solid #8a8fa0; border-radius: 10px; font: inherit; font-size: 15px; line-height: 1.55; resize: vertical; background: var(--panel); color: var(--text); overflow: hidden; }
.so-tags { width: 100%; }
.so-actions { display: flex; gap: 10px 14px; flex-wrap: wrap; align-items: center; }
.so-grow { flex: 1; }
.so-done { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; background: #e3f4ec; color: #12663f; font-size: 13px; font-weight: 700; }
.so-more > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; list-style: none; }
.so-more > summary::-webkit-details-marker { display: none; }
.so-more > summary::after { content: "▾"; }
.so-more[open] > summary::after { content: "▴"; }
.so-more > div { display: flex; gap: 8px 18px; flex-wrap: wrap; padding: 6px 0 2px; }
.link-btn.danger { color: #b42318; }
.so-gone { margin: 0; padding: 12px 0; border-top: 1px solid var(--border); font-size: 14px; color: #3a3658; }
.so-posted > summary { cursor: pointer; font-weight: 700; font-size: 15px; min-height: 44px; display: flex; align-items: center; gap: 6px; }
.so-posted[open] > summary { margin-bottom: 8px; }
.so-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; max-height: 50vh; overflow: auto; margin: 10px 0; }
.so-lib button { padding: 0; border: 2px solid transparent; border-radius: 10px; background: none; cursor: pointer; }
.so-lib button:hover, .so-lib button:focus-visible { border-color: var(--brand); }
.so-lib img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
/* Connect Facebook + Instagram and publish (admins and Meta's reviewer) */
.so-connect p { margin: 0 0 10px; font-size: 14px; color: #3a3658; max-width: 64ch; }
.so-connect .btn svg, .so-linked svg, .so-pub-net svg { flex: none; }
.so-pages { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.so-page { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; min-height: 44px; }
.so-page:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.so-page.off { cursor: default; opacity: 1; }
.so-page.off b { color: var(--muted); }
.so-page input { accent-color: var(--brand); width: 18px; height: 18px; }
.so-page > span { display: flex; flex-direction: column; }
.so-linked { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.so-linked li { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.so-linked svg { color: #3a3658; }
.so-conn-links { display: flex; gap: 18px; flex-wrap: wrap; }
.so-connect > .link-btn { margin-top: 10px; }
.so-live { margin: 0; font-size: 13px; font-weight: 600; color: #12663f; }
.so-live a { color: var(--brand); }
.so-pub-photo { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; margin: 8px 0; }
.so-pub { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; }
.so-pub-net { display: flex; gap: 8px; align-items: center; font-size: 14px; min-height: 44px; cursor: pointer; }
.so-pub-net > span { display: inline-flex; gap: 6px; align-items: center; }
.so-pub-net input { accent-color: var(--brand); width: 18px; height: 18px; }
.so-pub-net.off { color: var(--muted); cursor: default; }
.so-pub-text { white-space: pre-wrap; background: var(--panel-2); border-radius: 10px; padding: 10px 12px; font-size: 14px; line-height: 1.5; color: var(--text); max-height: 180px; overflow: auto; }
.so-pub-results { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.so-pub-results:empty { display: none; }
.so-pub-ok { margin: 0; font-weight: 700; color: #12663f; }
.so-pub-ok a { color: var(--brand); }
@media (max-width: 640px) {
  .so-block, .so-ready { padding: 16px; }
  .so-body { grid-template-columns: 1fr; }
  .so-photo { flex-direction: row; align-items: center; }
  .so-photo img { width: 112px; height: 84px; }
  .so-row > summary { grid-template-columns: 48px minmax(0, 1fr) 14px; }
  .so-row > summary .so-kind { display: none; }
  .so-switch { align-self: stretch; }
  .so-switch button { flex: 1; min-height: 44px; }
  #socialTab .btn, #socialTab .link-btn, .so-more > summary { min-height: 44px; }
  #socialTab .link-btn { display: inline-flex; align-items: center; padding: 0 2px; }
  .so-actions .btn-primary { flex: 1 1 100%; }
  .so-plan label, .so-plan .btn { flex: 1 1 100%; }
  .so-plan select, .so-plan input { min-height: 44px; }
}
/* Phones: the dashboard's top bar is one row: menu, website name, account. Connect WordPress is Home's first step
   (and in Settings), Simple/Expert is in the side menu, the admin's Sales view stays on computers. */
.side-mode { display: none; }
@media (max-width: 560px) {
  .top-title { flex-wrap: nowrap; }
  .top-title #connectWp, .top-title #salesView, .top-title .mode-toggle { display: none; }
  .top-site { flex: 1; }
  .top-site b, .top-site .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-mode { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 4px; padding: 0 4px; font-size: 13px; color: var(--muted); }
}
/* iPhone zooms in on form fields under 16px: 16px on phones, never wider than their box. Hub (hub.css) keeps its own. */
@media (max-width: 560px) {
  body:not(.hub-body) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), body:not(.hub-body) textarea, body:not(.hub-body) select { font-size: 16px; max-width: 100%; }
}
.nowrap { white-space: nowrap; }

/* ---------- Design pass: My websites list (docs/design-pass/my-websites.md) ---------- */
.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; }
.side-score { min-width: 30px; padding: 2px 8px; border-radius: 999px; text-align: center; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.side-score.good { background: #e3f4ec; color: #12663f; }
.side-score.ok { background: #fff2db; color: #8a4f00; }
.side-score.bad { background: #fde8e8; color: #b42318; }
.side-tag, .side-tag.shared, .side-tag.managed { background: var(--brand-soft); color: var(--brand); }
.side-add input { font-size: 14px; border-radius: 10px; padding: 8px 10px; }
.side-add .field-error { flex-basis: 100%; }
.side-add-cancel { font-size: 13px; padding: 4px 2px; }
.field-error { margin: 8px 0 0; font-size: 13.5px; font-weight: 600; color: #b42318; }
.first-site { max-width: 560px; text-align: left; }
.first-site h1 { margin-top: 0; }
.first-site-form { margin-top: 18px; }
.first-site-form > label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.first-site-form .scan-form { max-width: none; margin: 0; }
.no-sites .menu-btn, .no-sites .side-title { display: none; }
button.top-site { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 4px 6px; margin: -4px -6px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; position: relative; padding-right: 22px; }
button.top-site:hover { background: var(--panel-2); }
.top-site-caret { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted); }
.menu-btn { display: none; place-items: center; color: var(--text); }
@media (max-width: 900px) {
  .menu-btn { display: grid; width: 44px; height: 44px; }
  .side-nav a, .side-site, .side-add-btn { min-height: 44px; }
}
/* My websites, round 2: the phone website button fits and is 44px; one violet focus ring; neutral tags; the empty
   state on a computer is one centered column (no empty sidebar); the hidden toast never shows in captures or print. */
button.top-site { align-items: stretch; overflow: hidden; min-height: 44px; justify-content: center; }
button.top-site b, button.top-site .muted { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-score.off { background: #f0eff5; color: #5f5b78; font-weight: 600; }
.side-tag, .side-tag.shared, .side-tag.managed { background: #f0eff5; color: #5f5b78; }
.side-add input:focus, .first-site-form input:focus, .side-site:focus-visible, button.top-site:focus-visible, .side-add-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-color: var(--brand); }
.side-add-label { flex-basis: 100%; font-size: 13px; font-weight: 600; color: var(--muted); }
.side-add-cancel { min-height: 32px; }
.no-sites .shell { grid-template-columns: 1fr; }
.no-sites .sidebar { display: none; }
.toast:not(.show) { visibility: hidden; transition: transform 0.25s, visibility 0s 0.25s; }
.toast.show { visibility: visible; }
@media (max-width: 900px) { .side-add-cancel { min-height: 44px; } }
.no-sites .app-main { margin-left: auto; margin-right: auto; width: 100%; }
.side-add input { flex: 1 1 100%; }

/* ---------- Global: one violet focus ring, readable tabs (design pass, every page benefits) ---------- */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
::selection { background: var(--brand-soft); color: var(--text); }
.seg-tabs button, .sub-tabs a { color: #5b6170; }
@media (max-width: 900px) { .sub-tabs a { display: inline-flex; align-items: center; min-height: 44px; } }

/* ---------- Design pass: Home (docs/design-pass/home.md) ---------- */
/* Area numbers readable (deep text on the wash, ≥4.5:1; were 3.0 and 3.95). */
.s-area.good .s-area-n { background: #e3f4ec; color: #12663f; }
.s-area.bad .s-area-n { background: #fde8e8; color: #b42318; }
/* Gray text on the lilac panels and the unselected Simple/Expert reads (≥4.5:1). */
.mode-toggle button, .su-step .muted, .s-wplan span span { color: #5b6170; }
/* Boxes keep their own height (no tall empty white under a short box). */
.s-boxes { align-items: start; }
/* Home, round 2: the Pay window note reads (≥4.5:1); links you tap on a phone are 44 px. */
.charge-note { color: #12663f; }
@media (max-width: 560px) { .s-link, .s-all > summary, .s-areas-more > summary, .s-google-line .link-btn, .s-body .btn-link, .s-next .link-btn, .next-more > summary, a.more-link { display: inline-flex; align-items: center; min-height: 44px; } }

/* ---------- Design pass: My business → Details (docs/design-pass/my-business-details.md) ---------- */
.profile-title { font-size: 22px; }
#saveState.bad-text { color: #b42318; font-weight: 600; }
@media (max-width: 560px) {
  .sticky-bar { flex-wrap: nowrap; gap: 10px; }
  .sticky-bar #saveState { flex: 1; min-width: 0; font-size: 13.5px; }
  .tidy .link-btn { min-height: 44px; display: flex; align-items: center; gap: 8px; }
  /* UX review 2026-10-23: a choice stays one paragraph (its gray note after the words, not in a narrow column of its
     own); 44px tall to tap. */
  .choice-field label { min-height: 44px; display: block; padding: 11px 0 9px 26px; }
  .choice-field label > input { top: 13px; }
}
.field .edited { align-self: flex-start; }
#saveState.unsaved { color: #8a4f00; font-weight: 600; }
/* A field scrolled into view isn't hidden behind the sticky save bar. */
html:has(.sticky-bar) { scroll-padding-bottom: 96px; }
@media (max-width: 560px) { .more-fields > summary { min-height: 44px; display: flex; align-items: center; } }

/* ---------- Global: readable primary buttons, errors that stay, phone tables as cards (design pass) ---------- */
/* White text on the primary gradient's light end read 3.8:1; its end is now #7655f0 (4.85:1). Same for the avatar. */
.btn-primary, .avatar { background: linear-gradient(135deg, var(--brand), #7655f0); }
/* showError(): a problem that stays until closed or retried. */
.error-bar { position: fixed; left: 0; right: 0; bottom: 22px; margin: 0 auto; width: fit-content; z-index: 61; display: flex; align-items: flex-start; gap: 10px; max-width: min(560px, calc(100% - 32px)); padding: 12px 12px 12px 16px; border-radius: 12px; background: #fde8e8; color: #b42318; border: 1px solid #f5c2c0; box-shadow: 0 6px 24px rgba(15, 23, 42, .12); font-size: 14px; font-weight: 600; line-height: 1.45; }
.error-bar span { flex: 1; }
.error-bar-x { flex: none; width: 32px; height: 32px; margin: -6px -4px -6px 0; border: 0; border-radius: 8px; background: none; color: inherit; font-size: 20px; cursor: pointer; }
.error-bar-x:hover { background: rgba(180, 35, 24, .08); }
@media (max-width: 560px) { .error-bar-x { width: 44px; height: 44px; margin: -12px -8px -12px 0; } }
/* Phone tables as cards: add class "table-cards" to a .table and data-label="<column>" to each td. */
@media (max-width: 560px) {
  .table.table-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table.table-cards, .table.table-cards tbody, .table.table-cards tr, .table.table-cards td { display: block; width: 100%; }
  .table.table-cards tr { padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
  .table.table-cards td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; text-align: right; }
  .table.table-cards td::before { content: attr(data-label); color: #5b6170; font-weight: 600; text-align: left; }
  .table.table-cards td:not([data-label])::before { content: none; }
  .table.table-cards td:not([data-label]) { justify-content: flex-start; text-align: left; }
}

/* ---------- Skip to content (app shell, every app page; design pass) ---------- */
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 70; padding: 12px 16px; border-radius: 10px; background: var(--panel); color: var(--brand); font-weight: 700; box-shadow: 0 6px 24px rgba(15, 23, 42, .16); text-decoration: none; }
.skip-link:focus { top: 12px; }
#app:focus { outline: none; }

/* ---------- Design pass: Settings (docs/design-pass/settings.md) ---------- */
.settings-page .block-head p { max-width: 70ch; }
.settings-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px); gap: 14px 16px; align-items: start; }
.settings-form label { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 13px; color: var(--muted); font-weight: 600; }
.settings-form input, .settings-form select { min-height: 44px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; font-size: 15px; font-weight: 400; }
.settings-form .field-hint { margin: 0; }
.settings-form button { grid-column: 1 / -1; justify-self: start; }
.au-add label { flex: 1 1 220px; min-width: 0; }
.au-add select { width: 100%; max-width: 100%; }
@media (max-width: 560px) {
  .settings-form { grid-template-columns: minmax(0, 1fr); }
  .settings-form input, .settings-form select { font-size: 16px; }
  .au-add label { flex-basis: 100%; }
  .au-add select, .au-actions select { min-height: 44px; font-size: 16px; }
  .bk-list > summary, .settings-page .bk-rescue { min-height: 44px; display: inline-flex; align-items: center; margin-top: 0; }
}
.settings-form, .settings-page .au-add { max-width: 760px; }
.settings-page .bk-rescue { text-align: left; justify-content: flex-start; }
.au-add .field-hint { margin: 0; font-weight: 400; }

/* ---------- Design pass: My account (docs/design-pass/account.md) ---------- */
.acct-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0; max-width: 640px; }
.acct-ask { margin-top: 14px; }
.acct-host { display: block; font-size: 13px; font-weight: 400; }
.acct-count { font-weight: 500; }
.acct-btns { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
@media (max-width: 560px) {
  .acct-ask { min-height: 44px; align-items: center; }
  .acct-stats .stat .v { font-size: 24px; }
  .table.table-cards td:first-child:not([data-label]) { font-size: 15px; }
}
.acct-more { margin-top: 10px; }
@media (max-width: 560px) { .acct-more { min-height: 44px; } }
/* UX review 2026-10-23: on a phone the rows of My websites, Fix history, My reports and Balance history are
   separated by a line inside their block, not drawn as bordered cards inside a card (DESIGN.md "No box inside a box"). */
@media (max-width: 560px) {
  body:has(.acct-stats) .table.table-cards tr { margin: 0; padding: 14px 2px; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; }
  body:has(.acct-stats) .table.table-cards tbody tr:first-child { border-top: 0; }
}

/* ---------- Design pass: Admin and All websites (docs/design-pass/admin.md) ---------- */
.admin-tabs { display: flex; margin: 18px 0 16px; }
.admin-search { width: 100%; max-width: 260px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; font-size: 14px; }
.aw-back { display: inline-flex; align-items: center; min-height: 32px; }
.aw-table td:first-child { min-width: 180px; }
@media (max-width: 560px) {
  .admin-search { max-width: none; min-height: 44px; font-size: 16px; }
  .aw-back { min-height: 44px; }
  .aw-table td:first-child { min-width: 0; }
  .table.table-cards .inline-form { width: 100%; flex-wrap: wrap; }
  .table.table-cards .inline-form input { flex: 1 1 120px; min-width: 0; min-height: 44px; font-size: 16px; }
  .table.table-cards .num-in { min-height: 44px; font-size: 16px; max-width: 140px; }
  .table.table-cards .aw-open { flex-wrap: wrap; gap: 6px; }
}
/* Phone cards: a label keeps its width; a title cell (no label) wraps its name, chips and notes. */
@media (max-width: 560px) {
  .table.table-cards td::before { flex: 0 0 auto; max-width: 45%; }
  .table.table-cards td:not([data-label]) { flex-wrap: wrap; align-items: center; }
  .table.table-cards td:not([data-label]) .link-btn { text-align: left; overflow-wrap: anywhere; }
  .table.table-cards td > span, .table.table-cards td > .aw-who { min-width: 0; overflow-wrap: anywhere; }
}
/* All websites on a computer: several "View as" buttons wrap instead of running past the table. */
.aw-open { white-space: normal; min-width: 150px; text-align: right; }
.aw-open .btn { margin: 2px 0 2px 4px; }

/* "Balances are not refundable", agreed once in the Add funds and Pay windows. */
.bal-terms { margin-top: 12px; align-items: flex-start; }
@media (max-width: 560px) { .bal-terms { min-height: 44px; } }
/* Settings → Google: the "Google Analytics" card (docs/google/SPEC-analytics-for-all.md). */
.ga-steps { margin: 0 0 12px; padding-left: 20px; font-size: 14px; line-height: 1.6; }
.ga-steps li { margin-bottom: 4px; }
.ga-email { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ga-email code { padding: 2px 6px; border-radius: 6px; background: var(--panel-2); font-size: 13px; overflow-wrap: anywhere; }
.ga-or { margin: 8px 0 0; font-size: 13px; }
.ga-ok { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: #12663f; }
.ga-err { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: #fde8e8; color: #b42318; font-size: 13px; font-weight: 600; }
#gaSettings .src-list { margin-bottom: 12px; }
#gaSettings .block-body > p.muted:not(.ga-or) { margin: 0 0 10px; font-size: 14px; line-height: 1.6; }
@media (max-width: 600px) { #gaSettings .btn { min-height: 44px; } }
.ga-hand { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; }
.ga-hand > p { margin: 0 0 8px; font-size: 14px; }
.ga-hand form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.ga-hand label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 240px; font-weight: 600; color: var(--muted); }
.ga-hand input { padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 14px; color: var(--text); }

/* Expert only on a computer (owner 2026-10-23): below 900 px the side menu says so where the switch was. */
@media (max-width: 900px) {
  .side-mode { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; padding: 0 4px; font-size: 13px; color: #5b6170; }
  .mode-note { line-height: 1.4; }
}

/* ---------- Home on a computer: one card per row (owner 2026-10-25) ----------
   Two columns left an empty gap under the shorter card and bottoms that didn't line up. From 1200 px each card is a
   full-width row: what it shows on the left (the Website card: its score, then the area tiles beside it), the
   checklist, steps and actions on the right. Phones and tablets keep the stacked card. */
@media (min-width: 1200px) {
  .s-boxes { grid-template-columns: minmax(0, 1fr); }
  .s-box { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr); grid-template-rows: auto auto auto auto 1fr; }
  .s-box > .s-head { grid-column: 1; grid-row: 1 / -1; border-right: 1px solid var(--border); }
  .s-box > :not(.s-head) { grid-column: 2; }
  .s-box > .s-check, .s-box > .s-body { padding-top: 14px; }
  .s-box > .s-body .s-links { flex-direction: column; align-items: flex-start; }
  .s-box > .s-body-slim { align-items: flex-start; }
  /* The Website card: the score on the left, the area tiles and the Google line beside it. */
  .s-head:has(> .s-areas) { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.6fr); grid-auto-flow: row dense; align-content: start; gap: 16px 28px; }
  .s-head:has(> .s-areas) > .s-title { grid-column: 1 / -1; }
  .s-head:has(> .s-areas) > :not(.s-title) { grid-column: 2; }
  .s-head:has(> .s-areas) > .s-stats { grid-column: 1; grid-row: 2; align-self: start; flex-direction: column; align-items: flex-start; }
}

/* The Website card on a computer (owner 2026-10-25), in the Home box language. Level 1, the washed head: the score
   ring and the Google numbers at hero size (The Number Leads Rule). Level 2, the white body: what to fix, as area tiles
   with violet-outlined Fix it buttons (no second gradient: Home's one is the next step's). Level 3: one footer row of
   quiet links. */
@media (min-width: 1200px) {
  .s-box.s-web-row { display: flex; flex-direction: column; }
  .s-web-row > .s-head { border-right: 0; gap: 18px; }
  .s-box .s-title > .grow { flex: 1; }
  .s-web-hero { display: grid; grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.6fr); align-items: center; gap: 32px; padding: 4px 0 6px; }
  .s-web-score { display: flex; align-items: center; gap: 20px; }
  .s-web-score svg { flex: none; }
  .s-web-k { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--text); }
  .s-web-up { margin: 0; font-size: 13.5px; color: #3a3658; }
  .s-web-up b { color: #12663f; }
  .s-web-fixed { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: #12663f; }
  .s-google-inline { margin: 0; padding: 0 0 0 32px; border: 0; border-left: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; gap: 8px; min-height: 96px; }
  .s-gmini { display: flex; gap: 36px; flex-wrap: wrap; }
  .s-gmini > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .s-gmini b { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .s-gmini span { font-size: 13px; font-weight: 600; color: #5b6170; }
  .s-gmini b em { margin-left: 8px; font-size: 12px; font-style: normal; font-weight: 700; letter-spacing: 0; padding: 3px 8px; border-radius: 999px; vertical-align: 6px; }
  .s-gmini b em.up { background: #e3f4ec; color: #12663f; }
  .s-gmini b em.down { background: #f0eff5; color: #5f5b78; }
  .s-gmini-note, .s-gwait { margin: 0; font-size: 12.5px; color: #5b6170; }
  .s-gconnect { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 14px; background: rgba(255, 255, 255, .8); }
  .s-gconnect p { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: #3a3658; }
  .s-gconnect b { font-size: 16px; color: var(--text); }
  .s-gconnect .btn { flex: none; }
  /* Level 2: the white body. */
  .s-web-body { padding: 18px 22px 20px; gap: 12px; }
  .s-web-areas-h { display: flex; align-items: center; gap: 10px; }
  .s-web-areas-h h3 { margin: 0; font-size: 17px; }
  .s-count { padding: 3px 10px; border-radius: 999px; background: var(--panel-2); color: var(--text); font-size: 12.5px; font-weight: 700; }
  .s-web-note { font-size: 12.5px; color: #5b6170; }
  /* At most 4 a row (five squeezed every tile on live, site 2); tiles in a row share one height. */
  .s-web-row .s-areas { grid-template-columns: repeat(auto-fit, minmax(max(190px, calc((100% - 30px) / 4)), 1fr)); gap: 10px; }
  .s-web-row .s-area { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: center; gap: 10px 12px; padding: 14px 16px; background: #fff; }
  .s-web-row .s-area-n { width: 44px; height: 44px; font-size: 17px; border-radius: 12px; }
  .s-web-row .s-area-t { flex: none; }
  .s-web-row .s-area-t b { white-space: nowrap; font-size: 14.5px; }
  /* The button sits at the tile's foot, so every button in a row lines up (a long Speed note can't push one down). */
  .s-web-row .s-area .btn { grid-column: 1 / -1; justify-self: start; align-self: end; margin: 0; }
  /* Fix it / Show me how: violet outline (the action color), no gradient; See details: a quiet text button. */
  .s-web-row .s-area .btn:not(.btn-ghost), .s-check .btn { border-color: color-mix(in srgb, #6544e9 40%, #fff); color: #6544e9; font-weight: 700; }
  .s-web-row .s-area .btn:not(.btn-ghost):hover, .s-check .btn:hover { background: #efeaff; }
  .s-web-row .s-area .btn-ghost { border: 0; background: none; padding-left: 0; color: #5b6170; font-weight: 600; }
  .s-web-row details.s-areas-more { margin-top: 0; }
  /* Level 3: one quiet row of links. */
  .s-web-foot { display: flex; align-items: center; gap: 28px; padding-top: 14px; border-top: 1px solid var(--border); }
  .s-act { padding: 4px 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--brand); text-decoration: none; cursor: pointer; }
  .s-act:hover { text-decoration: underline; text-underline-offset: 3px; }
  .s-act:disabled { opacity: .55; cursor: default; }
  /* The Maps row matches: the same hero number size, a plain note instead of a pill. */
  .s-head.maps .s-stat-col .s-big { font-size: 30px; letter-spacing: -0.03em; }
  .s-head.maps > .s-since { border: 0; background: none; padding: 0; }
  /* The one moving moment: the score ring draws in once. */
  .s-web-row .s-ring-arc { animation: s-ring-in .7s cubic-bezier(.16, 1, .3, 1); }
  @keyframes s-ring-in { from { stroke-dasharray: 0 999; } }
}
@media (min-width: 1200px) and (prefers-reduced-motion: reduce) { .s-web-row .s-ring-arc { animation: none; } }

/* The Maps score on Home (RBM - Google Maps, 1248bc1d): its colors. */
.ms-good { color: #12663f; }
.ms-ok { color: #b45309; }
.ms-bad { color: #b42318; }
.ms-arrow { color: var(--muted); font-weight: 400; }
/* A narrower computer (1200–1365 px): the Connect Google panel stacks its button under the words. */
@media (min-width: 1200px) and (max-width: 1365px) {
  .s-gconnect { flex-direction: column; align-items: flex-start; gap: 10px; }
  /* The three Google numbers stay on one line. */
  .s-gmini { gap: 22px; flex-wrap: nowrap; }
  .s-gmini b { font-size: 26px; }
  .s-gmini b em { margin-left: 5px; padding: 2px 6px; font-size: 11.5px; vertical-align: 4px; }
}

/* "Why we ask" in My business (owner R-20261025-1914): one calm line, its first words bold. */
.p-why { font-size: 13.5px; line-height: 1.5; color: #5b6170; max-width: 72ch; }
.p-why b { color: #3a3658; font-weight: 600; }
.block-head .p-why { margin: 4px 0 0; }
/* "Your first backup" under the connected card (/connect, owner 2026-10-25). */
.cn-backup { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); text-align: left; }
.cn-backup h2 { margin: 0 0 4px; font-size: 18px; }
.cn-bk-lead { margin: 0 0 10px; color: #5b6170; }
.cn-bk-ready { margin: 10px 0 0; font-weight: 600; }
.cn-backup .cn-bk-actions { justify-content: flex-start; margin-top: 10px; }
.cn-bk-what, .cn-bk-note, .cn-bk-other { margin: 10px 0 0; font-size: 13px; }
.cn-bk-err { margin: 8px 0 0; font-size: 13px; }
.cn-bk-later { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; padding: 0 6px; }

/* Connect with a code (owner 2026-10-25): the second path in the "Connect first" window. */
.cn-code-box { margin-top: 16px; padding: 16px; border-radius: 14px; background: var(--panel-2); }
.cn-code-box h4 { margin: 0 0 4px; font-size: 15px; }
.cn-code-box p { margin: 0 0 10px; font-size: 14px; color: #3a3658; }
.cn-code { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 6px; }
.cn-code-v { flex: 1 1 100%; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--border); font-size: 26px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: center; user-select: all; }
.cn-code-note { font-size: 13px !important; font-weight: 600; color: #5b6170 !important; }
.cn-code-how { font-size: 13.5px !important; }
.cn-code-wait { display: flex; align-items: center; gap: 8px; margin: 4px 0 0 !important; font-size: 13.5px !important; color: #5b6170 !important; }
.cn-code-ok { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .cn-code-v { font-size: 22px; flex-basis: 100%; }
  .cn-code .btn { flex: 1; min-height: 44px; }
}
/* The first-change backup window (public/backup-gate.js, owner 2026-10-25). */
.bg-box .bg-what, .bg-box .bg-other { margin: 8px 0 0; font-size: 13px; }
.bg-box .bg-confirm { margin: 4px 0 0; font-size: 12px; }
.bg-box .bg-skip { margin: 6px 0 0; }
.bg-box .bg-skip .link-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: 13px; color: var(--muted); }
.bg-box .bg-done { margin: 8px 0 0; font-weight: 600; }
.bg-box .bg-dl-err { margin: 8px 0 0; font-size: 13px; }