/*
 * Clear Cut Digital client portal: the one stylesheet for every page (the CSP allows no inline styles).
 * Calm colours that follow the computer's light or dark setting, the brand's fonts and its blue.
 * The font and pattern file names below are swapped for their hashed asset paths when the portal starts (src/portal/assets.ts).
 */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/poppins-v24-latin-700-9338e65fc077.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/lato-v25-latin-regular-918b7dc3e2e2.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/lato-v25-latin-700-c447dd7677b4.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --bg: #f4f6f9;
  --pane: #ffffff;
  --surface: #ffffff;
  --surface-2: #f6f8fb;
  --field: #ffffff;
  --line: #e4e9ef;
  --line-2: #c5ced9;
  --heading: #111b26;
  --text: #2b3744;
  --muted: #5c6a78;
  --subtle: #636f7d;
  --accent: #0a72bd;
  --accent-hover: #0864a6;
  --link: #0a6ab0;
  --tint: #eaf3fb;
  --ring: rgba(10, 114, 189, 0.22);
  --ok: #1d7a4c;
  --ok-soft: #e9f6ef;
  --warn: #8a5300;
  --warn-soft: #fdf3e1;
  --bad: #b3261e;
  --bad-soft: #fcefee;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 20px -8px rgba(16, 24, 40, 0.1);
  --shadow-lg: 0 1px 2px rgba(16, 24, 40, 0.04), 0 14px 32px -12px rgba(16, 24, 40, 0.14), 0 32px 64px -32px rgba(16, 24, 40, 0.18);
  --showcase: radial-gradient(90% 70% at 100% 0%, rgba(98, 194, 255, 0.3), transparent 62%), linear-gradient(165deg, #f0f6fc 0%, #e7f0fa 52%, #dde9f6 100%);
  --showcase-line: rgba(10, 114, 189, 0.1);
  --hexagons: 0.3;
  --font-head: Poppins, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: Lato, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #11161c;
    --pane: #11161c;
    --surface: #171e26;
    --surface-2: #1c242d;
    --field: #151c23;
    --line: #252f3a;
    --line-2: #3b4855;
    --heading: #eef2f6;
    --text: #c9d2db;
    --muted: #95a2af;
    --subtle: #7b8895;
    --accent: #0a72bd;
    --accent-hover: #0f7ac6;
    --link: #7cbcf0;
    --tint: rgba(124, 188, 240, 0.1);
    --ring: rgba(124, 188, 240, 0.3);
    --ok: #72c69a;
    --ok-soft: rgba(114, 198, 154, 0.12);
    --warn: #e3b860;
    --warn-soft: rgba(227, 184, 96, 0.12);
    --bad: #f0948b;
    --bad-soft: rgba(217, 100, 90, 0.14);
    --shadow-sm: none;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 40px -16px rgba(0, 0, 0, 0.55);
    --showcase: radial-gradient(90% 70% at 100% 0%, rgba(10, 114, 189, 0.3), transparent 62%), linear-gradient(165deg, #16212d 0%, #131b25 55%, #10171f 100%);
    --showcase-line: rgba(124, 188, 240, 0.1);
    --hexagons: 0.24;
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { margin: 0; color: var(--heading); font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
strong { color: var(--heading); font-weight: 700; }
img, svg { display: block; }
::selection { background: var(--ring); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 4px; }
.visually { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; z-index: 10; }
.skip:focus { left: 16px; top: 12px; padding: 8px 14px; border-radius: 8px; background: var(--surface); color: var(--heading); box-shadow: var(--shadow-lg); }

/* The logo: dark lettering on light, light lettering on dark (the <picture> picks). */
.logo { display: inline-flex; border-radius: 6px; }
.logo img { width: auto; height: 34px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  font: 700 15.5px/1.2 var(--font-body);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; transition: transform 0.15s ease; }
.btn:hover .go { transform: translateX(3px); }
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(16, 24, 40, 0.14), 0 6px 16px -6px rgba(10, 114, 189, 0.5);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-quiet { background: var(--surface); color: var(--heading); border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.btn-quiet:hover { background: var(--surface-2); border-color: var(--subtle); }
.btn-block { width: 100%; }
.btn-block + .btn-block { margin-top: 10px; }

/* Form fields */
.field { margin: 0 0 16px; }
.field label { display: block; margin: 0 0 8px; color: var(--heading); font-size: 14.5px; font-weight: 700; }
.input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--field);
  color: var(--heading);
  font: 400 16px/1.4 var(--font-body);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input::placeholder { color: var(--subtle); opacity: 1; }
.input:hover { border-color: var(--subtle); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
.input.code {
  min-height: 60px;
  padding-left: calc(14px + 0.32em);
  font: 700 26px/1 var(--font-mono);
  letter-spacing: 0.32em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.input.code::placeholder { font: 400 16px/1 var(--font-body); letter-spacing: 0; }

/* Messages above a form: red for a problem, green for "done". */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--bad-soft);
  color: var(--bad);
  font-size: 14.5px;
  line-height: 1.5;
}
.notice.ok { background: var(--ok-soft); color: var(--ok); }
.notice svg { flex: none; margin-top: 1px; }

/* Sign-in: the form on the left, a quiet look inside on the right (hidden on small screens). */
.signin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); min-height: 100vh; min-height: 100dvh; background: var(--pane); }
.signin-pane { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding: 28px clamp(24px, 5vw, 64px) 24px; }
.signin-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 0; }
.signin-form { width: 100%; max-width: 392px; }
.signin h1 { font-size: 30px; line-height: 1.2; }
.lede { margin: 12px 0 28px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.lede strong { overflow-wrap: anywhere; }
.fine { display: flex; align-items: flex-start; gap: 8px; margin: 20px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.fine svg { flex: none; margin-top: 2px; color: var(--subtle); }
.after { margin: 12px 0 0; }
.back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 28px; color: var(--muted); font-size: 14.5px; text-decoration: none; }
.back:hover { color: var(--heading); }
.badge { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 0 22px; border-radius: 16px; background: var(--tint); color: var(--link); box-shadow: inset 0 0 0 1px var(--showcase-line); }
.signin-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; color: var(--subtle); font-size: 13.5px; }
.signin-foot a { color: var(--muted); }

.showcase {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px;
  padding: 56px clamp(32px, 5vw, 72px);
  overflow: hidden;
  border-radius: 24px;
  background: var(--showcase);
  box-shadow: inset 0 0 0 1px var(--showcase-line);
}
.showcase::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -96px;
  right: -96px;
  width: min(400px, 56%);
  aspect-ratio: 485 / 572;
  background: url("/assets/hexagons-9f93f7d4bc92.svg") center / 100% 100% no-repeat;
  opacity: var(--hexagons);
  -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 30%, transparent 72%);
  mask-image: radial-gradient(circle at 100% 0%, #000 30%, transparent 72%);
  pointer-events: none;
}
.showcase-inner { width: 100%; max-width: 460px; }
.showcase h2 { font-size: clamp(28px, 2.3vw, 36px); line-height: 1.18; letter-spacing: -0.025em; }
.showcase p { margin: 14px 0 0; color: var(--muted); font-size: 16.5px; line-height: 1.6; }

/* The look inside: drawn, not real numbers, and hidden from screen readers. */
.peek { position: relative; margin: 40px 0 0; }
.peek-card { padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-lg); }
.peek-site { width: 86%; }
.peek-month { position: relative; width: 54%; margin: -12px 0 0 auto; }
.peek-request { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 72%; margin: -12px 0 0 5%; padding: 14px 18px; }
.peek-title { color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.peek-status { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; color: var(--heading); font: 700 20px/1.3 var(--font-head); letter-spacing: -0.01em; }
.peek-note { color: var(--muted); font-size: 13.5px; }
.peek-rows { margin: 12px 0 0; padding: 0; }
.peek-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0 0; margin: 8px 0 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.peek-rows dt { color: var(--muted); }
.peek-rows dd { margin: 0; color: var(--heading); font-weight: 700; font-variant-numeric: tabular-nums; }
.peek-big { margin: 8px 0 0; color: var(--heading); font: 700 30px/1.15 var(--font-head); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.peek-delta { color: var(--ok); font-size: 13.5px; font-weight: 700; }
.peek-what { min-width: 0; font-size: 14px; color: var(--heading); }
.peek-what small { display: block; color: var(--muted); font-size: 12.5px; }

/* Message pages: one calm card in the middle. */
.simple { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding: 28px clamp(20px, 5vw, 48px) 24px; }
.simple-main { flex: 1; display: grid; place-items: center; padding: 48px 0; }
.sheet { width: 100%; max-width: 440px; padding: 40px 36px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-lg); text-align: center; }
.sheet .badge { margin: 0 auto 20px; }
.sheet h1 { font-size: 24px; line-height: 1.25; }
.sheet .lede { margin: 10px 0 0; }
.sheet .btn { margin: 28px 0 0; }
.simple-foot { color: var(--subtle); font-size: 13.5px; text-align: center; }

/* Dashboard: is the site up, how is it doing, form messages, then requests, reports, billing and help. */
header.top { position: sticky; top: 0; z-index: 5; border-bottom: 1px solid var(--line); background: var(--surface); }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1120px; margin: 0 auto; padding: 12px 24px; }
header.top .logo img { height: 30px; }
.who { display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-width: 0; color: var(--muted); font-size: 14px; }
.who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who form { margin: 0; }
.linklike {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--surface);
  color: var(--heading);
  font: 700 14px/1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.linklike:hover { background: var(--surface-2); border-color: var(--subtle); }
main.dash { max-width: 1120px; margin: 0 auto; padding: 36px 24px 64px; }

.switch { margin: 0 0 22px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pills a { display: inline-block; padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 14px; text-decoration: none; }
.pills a:hover { border-color: var(--subtle); }
.pills a[aria-current=page] { border-color: var(--accent); background: var(--tint); color: var(--link); font-weight: 700; }

.hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin: 0 0 40px; }
.hero-text { min-width: 0; }
.hero h1 { font-size: 32px; line-height: 1.15; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.hero-domain { margin: 6px 0 0; color: var(--muted); font-size: 16px; overflow-wrap: anywhere; }
.facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 16px 0 0; padding: 0; list-style: none; color: var(--text); font-size: 14.5px; }
.facts .state { display: inline-flex; align-items: center; gap: 9px; color: var(--heading); font-weight: 700; }
.soft { color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-actions form { margin: 0; }
.hero-actions .btn { min-height: 44px; }

.dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--subtle); }
.dot.up { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.dot.down { background: var(--bad); box-shadow: 0 0 0 4px var(--bad-soft); }
.dot.maintenance, .dot.pending { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); }

.card { position: relative; min-width: 0; margin: 0; padding: 22px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.card-title { margin: 0; color: var(--heading); font: 700 16.5px/1.4 var(--font-body); letter-spacing: 0; }
.card-note { margin: 4px 0 14px; color: var(--muted); font-size: 14px; }
.card .btn { margin-top: 16px; }
.empty { margin: 10px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
p.card.empty { margin: 0; }

.month { margin: 0 0 40px; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 14px; }
.section-head h2 { font-size: 20px; line-height: 1.3; letter-spacing: -0.015em; }
.range { margin: 0; color: var(--muted); font-size: 14px; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 16px; }
.kpi { padding: 20px 22px; }
.kpi-label { margin: 0; color: var(--muted); font-size: 14px; font-weight: 700; }
.kpi-value { margin: 6px 0 0; color: var(--heading); font: 700 34px/1.1 var(--font-head); letter-spacing: -0.02em; }
.delta { margin: 8px 0 0; color: var(--muted); font-size: 13.5px; font-weight: 700; }
.delta.up { color: var(--ok); }
.delta .vs { color: var(--muted); font-weight: 400; }
.split { margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; }
.before { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.filter-note { margin: -4px 0 0; font-size: 13.5px; }

.bars { margin: 0; padding: 0; list-style: none; }
.bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 16px; padding: 12px 0 0; }
.bars li:first-child { padding-top: 0; }
.bar-name { min-width: 0; overflow: hidden; color: var(--heading); font-size: 14.5px; text-overflow: ellipsis; white-space: nowrap; }
.bar-value { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.bar { grid-column: 1 / -1; display: block; height: 6px; overflow: visible; }
.bar rect { fill: var(--accent); }

/* Google Search: its two numbers side by side, then the searches as bars like the pages above. */
.search-numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 18px; }
.search-number { min-width: 0; }
.search-value { margin: 4px 0 0; color: var(--heading); font: 700 28px/1.1 var(--font-head); letter-spacing: -0.02em; }
.search-sub { padding: 16px 0 0; border-top: 1px solid var(--line); font: 700 15px/1.4 var(--font-body); letter-spacing: 0; }
.search .search-sub + .card-note { margin: 2px 0 12px; }
.search-foot { margin: 16px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
/* On a phone each search gets the full width, with how often it was shown on the line below. */
@media (max-width: 560px) {
  .search .bars li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .search .bar-name { white-space: normal; overflow-wrap: anywhere; }
}

.layout { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.col { display: grid; gap: 20px; min-width: 0; }
.layout.single { grid-template-columns: minmax(0, 1fr); }
.layout.single .col { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); align-items: start; }
p.card.empty + .layout { margin-top: 20px; }

.list { margin: 6px 0 0; padding: 0; list-style: none; }
.list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.list li:first-child { border-top: 0; padding-top: 4px; }
.list .what { min-width: 0; color: var(--heading); }
.list .what small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.pill { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 12.5px; font-weight: 700; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line); }
.pill.done { background: var(--ok-soft); color: var(--ok); box-shadow: none; }
.pill.active { background: var(--tint); color: var(--link); box-shadow: none; }
.pill.info { background: var(--warn-soft); color: var(--warn); box-shadow: none; }

/* Form messages: what visitors typed, line breaks kept, long words and links broken to fit a phone. */
.messages { margin: 0; padding: 0; list-style: none; }
.messages > li + li { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.message-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.message-from { min-width: 0; color: var(--heading); font: 700 15px/1.4 var(--font-body); letter-spacing: 0; overflow-wrap: anywhere; }
.message-head .pill { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.message-when { margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; }
.message-contact { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 4px 0 0; font-size: 14.5px; }
.message-contact a { min-width: 0; overflow-wrap: anywhere; }
.message-fields { margin: 10px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.message-fields div + div { margin-top: 10px; }
.message-fields dt { color: var(--muted); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.message-fields dd { margin: 2px 0 0; color: var(--text); font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Three at a time: newer on the left, older on the right, which ones these are in the middle. */
.pager { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); }
.card .pager .btn { min-height: 44px; margin: 0; padding: 0 14px; }
.pager .newer { grid-column: 1; justify-self: start; }
.pager .older { grid-column: 3; justify-self: end; }
.pager-count { grid-column: 2; color: var(--muted); font-size: 14px; white-space: nowrap; }
/* The pager's links come back to the card's title, clear of the header that stays at the top. */
.card-title { scroll-margin-top: 96px; }

.billing .notice { margin: 14px 0 0; }
.plans { margin: 12px 0 0; padding: 0; list-style: none; }
.plan + .plan { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan-name { min-width: 0; color: var(--heading); font-weight: 700; }
.plan-price { margin: 4px 0 0; color: var(--heading); font: 700 24px/1.3 var(--font-head); letter-spacing: -0.015em; }
.plan-price .per { color: var(--muted); font: 400 15px var(--font-body); letter-spacing: 0; }
.plan-when { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.billing form { margin: 0; }
.billing .card-note { margin: 10px 0 0; font-size: 13.5px; }

/* "Refer a business": two buttons side by side, stacked when the card is too narrow for both. */
.refer-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 10px; margin: 16px 0 0; }
.card .refer-actions .btn { width: 100%; min-height: 44px; margin: 0; padding: 0 12px; }
.refer-note { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* "People": who can sign in; a manager's Remove opens a second button (the page runs no script), then the form to add one. */
.people .notice { margin: 4px 0 12px; }
.people .list li { flex-wrap: wrap; }
.people .what { flex: 1 1 10rem; overflow-wrap: anywhere; }
.person-remove { flex-basis: 100%; margin: -4px 0 0; }
.person-remove summary { display: inline-block; padding: 2px 0; color: var(--link); font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; }
.person-remove summary::-webkit-details-marker { display: none; }
.person-remove summary:hover { text-decoration: underline; }
.person-remove[open] summary { color: var(--muted); }
.person-remove form { margin: 8px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.person-remove p { margin: 0; color: var(--text); font-size: 14px; line-height: 1.5; }
.card .person-remove .btn { min-height: 44px; margin-top: 10px; }
.people-sub { margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); color: var(--heading); font: 700 15px/1.4 var(--font-body); letter-spacing: 0; }
.people .people-sub + .empty { margin-top: 4px; font-size: 14px; }
.people-add { margin: 14px 0 0; }
.people-add .field { margin: 0 0 12px; }
.people-add .field label { font-size: 14px; }
.optional { color: var(--muted); font-weight: 400; }
.card .people-add .btn { margin-top: 4px; }

/* "Notifications": email or this device. Its script shows the buttons that fit; a hidden one stays hidden although .btn sets display. */
.notify-card [hidden] { display: none; }
.notify-card .steps { margin: 12px 0 0; color: var(--text); font-size: 14.5px; line-height: 1.6; }
.notify-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 10px; margin: 16px 0 0; }
.card .notify-actions .btn { width: 100%; min-height: 44px; margin: 0; padding: 0 12px; }

/* "Add to your home screen": under the business name on phones and tablets only (an iPad's Safari says it is a Mac,
   so those steps wait for a touch screen). The whole row opens the steps, with no script; the arrow turns when open. */
.card.app-card { margin: 0 0 32px; padding: 0; }
.app-card summary { padding: 14px 18px; cursor: pointer; list-style: none; }
.app-card summary::-webkit-details-marker { display: none; }
.app-card summary:focus-visible { outline-offset: -2px; border-radius: 16px; }
/* The layout sits on a span inside the summary: older Safari ignores grid on a summary itself. */
.app-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 14px; }
.app-icon { grid-row: span 2; width: 44px; height: 44px; border-radius: 10px; }
.app-row .card-title { align-self: end; }
.app-how { display: inline-flex; align-items: center; gap: 4px; align-self: start; color: var(--link); font-size: 14px; font-weight: 700; }
.app-how svg { transition: transform 0.15s; }
.app-card[open] .app-how svg { transform: rotate(180deg); }
.app-card:not([open]) .app-less, .app-card[open] .app-more { display: none; }
.app-steps { margin: 0 18px; padding: 14px 0 18px; border-top: 1px solid var(--line); color: var(--text); font-size: 14.5px; line-height: 1.6; }
.app-steps > * { max-width: 38rem; }
.app-why { margin: 0 0 10px; color: var(--muted); }
.app-steps ol { margin: 0; padding: 0 0 0 1.3em; }
.app-steps li { padding-left: 2px; }
.app-steps li + li { margin-top: 8px; }
.app-note { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
@media (pointer: fine) {
  .app-card.touch-only { display: none; }
}
/* Opened from the home screen: no card asking for that, and a Refresh button, since there is no browser bar to reload with. */
a.linklike { align-items: center; text-decoration: none; }
.app-only { display: none; }
@media (display-mode: standalone), (display-mode: fullscreen) {
  .app-only { display: inline-flex; }
  .app-card { display: none; }
}

footer.base { padding: 0 24px 36px; color: var(--muted); font-size: 13px; text-align: center; }

/* Smaller screens */
@media (max-width: 1023px) {
  .signin { grid-template-columns: minmax(0, 1fr); }
  .showcase { display: none; }
}
@media (max-width: 960px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kpis .kpi:last-child { grid-column: 1 / -1; }
  .hero { align-items: stretch; }
  .hero-actions { width: 100%; }
  /* Two to a row: with "Edit my blog" as well, the third button gets a row of its own. */
  .hero-actions > * { flex: 1 1 140px; }
  .hero-actions .btn { width: 100%; }
}
@media (max-width: 560px) {
  .signin-pane { padding: 20px 20px 22px; }
  .signin-main { align-items: flex-start; padding: 9vh 0 40px; }
  .signin h1 { font-size: 26px; }
  .logo img { height: 30px; }
  .signin-foot { justify-content: center; text-align: center; }
  .sheet { padding: 32px 22px; }
  .top-inner { padding: 10px 16px; }
  header.top .logo img { height: 26px; }
  .who span { display: none; }
  main.dash { padding: 24px 16px 48px; }
  .hero { margin-bottom: 32px; }
  .hero h1 { font-size: 26px; }
  .facts { gap: 6px 16px; font-size: 14px; }
  .month { margin-bottom: 32px; }
  .kpis { gap: 12px; }
  .kpi { padding: 16px; }
  .kpi-value { font-size: 28px; }
  .card { padding: 18px 16px; }
}
@media (max-width: 380px) {
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .search-numbers { grid-template-columns: minmax(0, 1fr); }
  .hero-actions { flex-direction: column; }
  .hero-actions > * { flex: none; }
  .requests li { flex-direction: column; align-items: flex-start; gap: 6px; }
  /* Which ones these are on a line of its own, the links below it. */
  .pager { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pager-count { grid-column: 1 / -1; grid-row: 1; text-align: center; }
  .pager .older { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}
/* A site being built (src/portal/build.ts): the "Your new website" card, its trail and "Next" box, Zack's note, and
   the approval page. Flat colours from the palette above, light and dark alike. */
.dot.building { background: var(--accent); box-shadow: 0 0 0 4px var(--tint); }
.build .trail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 18px 0 20px; padding: 0; list-style: none; counter-reset: none; }
.build .trail li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.build .trail li + li::before { content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.build .trail li.done + li::before, .build .trail li.done + li.now::before { background: var(--accent); }
.build .trail .hex { position: relative; z-index: 1; display: block; width: 30px; height: 30px; }
.build .trail .hex svg { display: block; }
.build .trail .hex path:first-child { fill: var(--surface); stroke: var(--line-2, var(--line)); stroke-width: 1.5; }
.build .trail .hex text { fill: var(--muted); font: 700 10px/1 var(--font-body); }
.build .trail li.done .hex path:first-child { fill: var(--accent); stroke: var(--accent); }
.build .trail li.done .hex .tick { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.build .trail li.now .hex path:first-child { fill: var(--tint); stroke: var(--accent); }
.build .trail li.now .hex text { fill: var(--link); }
.build .trail .step strong { display: block; color: var(--heading); font-size: 13.5px; line-height: 1.3; }
.build .trail .step small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.build .trail li.now .step small { color: var(--link); font-weight: 700; }
.build .next { margin: 0 0 18px; padding: 16px 18px; border-radius: 12px; background: var(--tint); color: var(--text); }
.build .next strong { display: block; color: var(--heading); font-size: 15.5px; line-height: 1.4; }
.build .next p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; }
.build .next.paused { background: var(--surface-2, var(--bg)); box-shadow: inset 0 0 0 1px var(--line); }
.build .next-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.build .next-actions .btn, .build .next-actions form { margin: 0; }
.build .payment { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.build .payment strong { font-size: 14.5px; }
.build .payment small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.build .build-sub { margin: 20px 0 6px; color: var(--heading); font: 700 14.5px/1.4 var(--font-body); }
.build .received { margin-top: 10px; }
.build .week { padding: 10px 0; border-top: 1px solid var(--line); }
.build .week:first-of-type { border-top: 0; }
.build .week strong { color: var(--heading); font-size: 13.5px; }
.build .week-lines { margin: 6px 0 0; padding-left: 18px; font-size: 14.5px; line-height: 1.55; }
.build .week .empty { margin-top: 4px; }
.build .owner-note { display: flex; gap: 14px; align-items: flex-start; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.build .owner-note img { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.build .owner-note p { margin: 0; color: var(--text); font-size: 14.5px; line-height: 1.55; }
.build .owner-note small { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
.went-live { margin: 0 0 20px; }
.sheet.approve { max-width: 520px; text-align: left; }
.sheet.approve h1 { text-align: center; }
.sheet.approve .lede { text-align: center; }
.approve-list { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 26px 0 0; font-size: 14.5px; }
.approve-list dt { color: var(--muted); }
.approve-list dd { margin: 0; color: var(--heading); overflow-wrap: anywhere; }
.sheet .confirm { margin: 26px 0 0; padding: 14px 16px; border: 0; border-radius: 12px; background: var(--tint); }
.sheet .confirm legend { padding: 0; float: left; width: 100%; margin-bottom: 10px; color: var(--heading); font-weight: 700; }
.sheet .confirm label { display: flex; gap: 10px; align-items: center; clear: both; font-size: 14.5px; }
.sheet .confirm input { width: 18px; height: 18px; accent-color: var(--accent); }
.sheet.approve .btn { width: 100%; margin-top: 16px; }
.sheet .fine { margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.sheet.approve p:last-child { margin: 14px 0 0; text-align: center; font-size: 14px; }
.badge.ok { background: var(--ok-soft); color: var(--ok); box-shadow: none; }
@media (max-width: 560px) {
  .build .trail { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .build .trail li:nth-child(3)::before { display: none; }
  .approve-list { grid-template-columns: 1fr; gap: 2px; }
  .approve-list dd { margin-bottom: 10px; }
}

@media (forced-colors: active) {
  .input:focus { outline: 2px solid; }
  .btn, .linklike { border-color: ButtonText; }
  .bar rect { fill: CanvasText; }
}