:root {
  color-scheme: light;
  --canvas: #f5f7fc;
  --canvas-light: #fafbfe;
  --surface: #ffffff;
  --surface-warm: #f8fafd;
  --surface-sunk: #eef2f9;
  --ink: #172238;
  --ink-2: #42516b;
  --ink-3: #566580;
  --line: #d8e1ef;
  --line-strong: #bfcbdf;
  --line-control: #7b89a3;
  --accent: #354ac8;
  --accent-strong: #2a3ba6;
  --accent-soft: #e9edfc;
  --accent-line: rgba(53, 74, 200, 0.32);
  --focus: #354ac8;
  --good: #176c50;
  --good-ink: #125a42;
  --good-soft: #e4f3ec;
  --good-line: rgba(23, 108, 80, 0.3);
  --caution: #885600;
  --caution-ink: #744900;
  --caution-strong: #ba7d10;
  --caution-soft: #fdf2da;
  --caution-line: rgba(136, 86, 0, 0.34);
  --bad: #aa3340;
  --bad-ink: #932a36;
  --bad-strong: #c23b4a;
  --bad-soft: #fbebed;
  --bad-line: rgba(170, 51, 64, 0.3);
  --neutral-soft: #edf1f7;
  --neutral-line: #c6d0e0;
  --demo: #6846cf;
  --demo-ink: #5638b8;
  --demo-soft: #f0ebfd;
  --demo-line: rgba(104, 70, 207, 0.3);
  --teal: #0b6e72;
  --teal-ink: #075055;
  --teal-soft: #def2f1;
  --teal-line: rgba(11, 110, 114, 0.3);
  --amber: #8a5a00;
  --amber-ink: #694400;
  --amber-soft: #fbf0d5;
  --amber-line: rgba(138, 90, 0, 0.3);
  --c1: #354ac8;
  --c2: #0e7c7b;
  --c3: #c98a1b;
  --c4: #8b4da8;
  --c5: #5b6b85;
  --c6: #c9d2e2;
  --band-1: #1a7652;
  --band-2: #7dbe98;
  --band-3: #e6be5a;
  --band-4: #d2d9e5;
  --band-error: #c23b4a;
  --chg-down-2: #c4495a;
  --chg-down-1: #e9a5ac;
  --chg-flat: #c5cedd;
  --chg-up-1: #8cc7a6;
  --chg-up-2: #2b8a60;
  --chg-unknown: #ebeff6;
  --dv-gain: #2f9467;
  --dv-loss: #cc5563;
  --muted: #768091;
  --dv-neutral: var(--muted);
  --ba-before: #8a94a6;
  --ba-after: #354ac8;
  --map-water: #dce8f4;
  --map-land: #fbfbf7;
  --map-coast: #bcc7d6;
  --rank-a: var(--band-1);
  --rank-b: var(--band-2);
  --rank-c: var(--band-3);
  --rank-d: var(--band-4);
  --rank-none: var(--band-4);
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --t-0: 14px;
  --t-1: 14px;
  --t-2: 16px;
  --t-3: 16px;
  --t-lead: 18px;
  --t-4: 20px;
  --t-h2: 22px;
  --t-5: 24px;
  --t-6: 28px;
  --t-title: 32px;
  --t-title-phone: 26px;
  --t-nav: 15px;
  --t-num: 40px;
  --t-num-phone: 28px;
  --lh: 1.5;
  --r-1: 8px;
  --r-2: 12px;
  --r-3: 16px;
  --r-pill: 999px;
  --e-flat: none;
  --e-raised: 0 1px 2px rgba(23, 34, 56, 0.04), 0 2px 8px rgba(23, 34, 56, 0.04);
  --e-floating: 0 2px 4px rgba(23, 34, 56, 0.04), 0 10px 28px rgba(23, 34, 56, 0.08);
  --e-overlay: 0 4px 8px rgba(23, 34, 56, 0.05), 0 20px 48px rgba(23, 34, 56, 0.16);
  --glass-bg: rgba(255, 255, 255, 0.88);
  --glass-bg-strong: rgba(255, 255, 255, 0.94);
  --glass-blur: saturate(160%) blur(14px);
  --glass-edge: rgba(255, 255, 255, 0.9);
  --glass-hairline: rgba(23, 34, 56, 0.1);
  --glass-shadow: 0 1px 2px rgba(23, 34, 56, 0.04), 0 8px 24px rgba(23, 34, 56, 0.08);
  --panel-bg: #ffffff;
  --panel-blur: none;
  --panel-edge: #d8e1ef;
  --panel-line: rgba(23, 34, 56, 0);
  --panel-shadow: 0 1px 2px rgba(23, 34, 56, 0.04), 0 2px 8px rgba(23, 34, 56, 0.04);
  --tile: #f2f5fb;
  --tile-hover: #e9eef8;
  --bloom-blue: rgba(53, 74, 200, 0.09);
  --bloom-teal: rgba(11, 110, 114, 0.06);
  --bloom-sand: rgba(201, 138, 27, 0.07);
  --area: #354ac8;
  --area-soft: #e9edfc;
  --area-ink: #25348f;
  --area-line: rgba(53, 74, 200, 0.26);
  --area-bloom: rgba(53, 74, 200, 0.09);
  --area-glow: rgba(53, 74, 200, 0.28);
  --area-wash: rgba(53, 74, 200, 0.07);
  --area-tile: #e9edfc;
  --area-tile-ink: #354ac8;
  --area-icon: none;
  --r-4: 24px;
  --t-hero: 36px;
  --t-hero-phone: 28px;
  --t-hero-lead: 20px;
  --e-lift: 0 2px 6px rgba(23, 34, 56, 0.05), 0 16px 36px rgba(23, 34, 56, 0.12);
  --glass-sheen: rgba(255, 255, 255, 0.7);
  --glass-rim: rgba(255, 255, 255, 0.95);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-base: 460ms;
  --motion-slow: 900ms;
  --path-node: 52px;
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gutter: 16px;
  --page-max: 1280px;
  --bar-max: 1280px;
  --bottom-bar-h: 64px;
  --gap-section: 32px;
  --pad-panel: 16px;
  --tone-ink: var(--ink-2);
  --tone-strong: var(--ink-3);
  --tone-soft: var(--neutral-soft);
  --tone-line: var(--neutral-line);
}

[data-area="home"] {
  --area: #354ac8;
  --area-soft: #e9edfc;
  --area-ink: #25348f;
  --area-line: rgba(53, 74, 200, 0.26);
  --area-bloom: rgba(53, 74, 200, 0.09);
  --area-glow: rgba(53, 74, 200, 0.28);
  --area-wash: rgba(53, 74, 200, 0.07);
  --area-tile: #e9edfc;
  --area-tile-ink: #354ac8;
  --area-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.8%2011.4L12%204.4l8.2%207%22%2F%3E%3Cpath%20d%3D%22M6%209.8v9.7h12V9.8%22%2F%3E%3Cpath%20d%3D%22M10%2019.5v-5h4v5%22%2F%3E%3C%2Fsvg%3E");
}
[data-area="local-map"] {
  --area: #0b6e72;
  --area-soft: #def2f1;
  --area-ink: #075055;
  --area-line: rgba(11, 110, 114, 0.26);
  --area-bloom: rgba(11, 110, 114, 0.09);
  --area-glow: rgba(11, 110, 114, 0.28);
  --area-wash: rgba(11, 110, 114, 0.07);
  --area-tile: #def2f1;
  --area-tile-ink: #0b6e72;
  --area-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s-6.5-5.7-6.5-11.2a6.5%206.5%200%200%201%2013%200C18.5%2015.3%2012%2021%2012%2021z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229.8%22%20r%3D%222.4%22%2F%3E%3C%2Fsvg%3E");
}
[data-area="google"] {
  --area: #1763b0;
  --area-soft: #e2eefb;
  --area-ink: #0f4a86;
  --area-line: rgba(23, 99, 176, 0.26);
  --area-bloom: rgba(23, 99, 176, 0.09);
  --area-glow: rgba(23, 99, 176, 0.28);
  --area-wash: rgba(23, 99, 176, 0.07);
  --area-tile: #e2eefb;
  --area-tile-ink: #1763b0;
  --area-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210.5%22%20cy%3D%2210.5%22%20r%3D%226%22%2F%3E%3Cpath%20d%3D%22M15%2015l5%205%22%2F%3E%3C%2Fsvg%3E");
}
[data-area="ai"] {
  --area: #8b3a93;
  --area-soft: #f5e8f7;
  --area-ink: #662a6d;
  --area-line: rgba(139, 58, 147, 0.26);
  --area-bloom: rgba(139, 58, 147, 0.09);
  --area-glow: rgba(139, 58, 147, 0.28);
  --area-wash: rgba(139, 58, 147, 0.07);
  --area-tile: #f5e8f7;
  --area-tile-ink: #8b3a93;
  --area-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5.5%204.5h13a2%202%200%200%201%202%202v8.5a2%202%200%200%201-2%202h-6.3L8%2020.8V17H5.5a2%202%200%200%201-2-2V6.5a2%202%200%200%201%202-2z%22%2F%3E%3Cpath%20d%3D%22M12%207.3l1.05%202.4%202.4%201.05-2.4%201.05L12%2014.2l-1.05-2.4-2.4-1.05%202.4-1.05z%22%2F%3E%3C%2Fsvg%3E");
}
[data-area="team"] {
  --area: #2a3570;
  --area-soft: #e5e9f6;
  --area-ink: #1d2552;
  --area-line: rgba(42, 53, 112, 0.26);
  --area-bloom: rgba(42, 53, 112, 0.09);
  --area-glow: rgba(42, 53, 112, 0.28);
  --area-wash: rgba(42, 53, 112, 0.07);
  --area-tile: #2a3570;
  --area-tile-ink: #ffffff;
  --area-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228.2%22%20r%3D%223.1%22%2F%3E%3Cpath%20d%3D%22M6.4%2019.6a5.6%205.6%200%200%201%2011.2%200%22%2F%3E%3Ccircle%20cx%3D%224.9%22%20cy%3D%2210.6%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M1.9%2017.6a3.4%203.4%200%200%201%203.2-3.3%22%2F%3E%3Ccircle%20cx%3D%2219.1%22%20cy%3D%2210.6%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M22.1%2017.6a3.4%203.4%200%200%200-3.2-3.3%22%2F%3E%3C%2Fsvg%3E");
}
[data-area="articles"] {
  --area: #8a5a00;
  --area-soft: #fbf0d5;
  --area-ink: #694400;
  --area-line: rgba(138, 90, 0, 0.26);
  --area-bloom: rgba(138, 90, 0, 0.09);
  --area-glow: rgba(138, 90, 0, 0.28);
  --area-wash: rgba(138, 90, 0, 0.07);
  --area-tile: #fbf0d5;
  --area-tile-ink: #8a5a00;
  --area-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224.5%22%20y%3D%223.5%22%20width%3D%2215%22%20height%3D%2217%22%20rx%3D%222.4%22%2F%3E%3Crect%20x%3D%227.8%22%20y%3D%226.9%22%20width%3D%228.4%22%20height%3D%222.8%22%20rx%3D%220.9%22%20fill%3D%22%23000%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M8%2013h8M8%2016.5h5%22%2F%3E%3C%2Fsvg%3E");
}
[data-area="opportunities"] {
  --area: #a8470f;
  --area-soft: #fce9dd;
  --area-ink: #7d340a;
  --area-line: rgba(168, 71, 15, 0.26);
  --area-bloom: rgba(168, 71, 15, 0.09);
  --area-glow: rgba(168, 71, 15, 0.28);
  --area-wash: rgba(168, 71, 15, 0.07);
  --area-tile: #fce9dd;
  --area-tile-ink: #a8470f;
  --area-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.3%2017.6h5.4M10.3%2020.6h3.4%22%2F%3E%3Cpath%20d%3D%22M8.7%2014.6a6%206%200%201%201%206.6%200c-.8.6-1.3%201.5-1.3%202.4h-4c0-.9-.5-1.8-1.3-2.4z%22%2F%3E%3C%2Fsvg%3E");
}
[data-area="setup"] {
  --area: #42516b;
  --area-soft: #edf1f7;
  --area-ink: #2c3950;
  --area-line: rgba(66, 81, 107, 0.26);
  --area-bloom: rgba(66, 81, 107, 0.09);
  --area-glow: rgba(66, 81, 107, 0.28);
  --area-wash: rgba(66, 81, 107, 0.07);
  --area-tile: #edf1f7;
  --area-tile-ink: #42516b;
  --area-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222.8%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%226.2%22%2F%3E%3Cpath%20d%3D%22M12%203v2.8M12%2018.2V21M3%2012h2.8M18.2%2012H21M5.6%205.6l2%202M16.4%2016.4l2%202M5.6%2018.4l2-2M16.4%207.6l2-2%22%2F%3E%3C%2Fsvg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

/* An in-page target lands below the sticky top bar (one row, about 76 px with its margin). */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: var(--t-3);
  line-height: var(--lh);
  color: var(--ink);
  background-color: var(--canvas);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* A quiet color field behind the page: the area's own hue at the top left, a
   little teal and sand farther off. It is a background, never a blur. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(58vmax 40vmax at 2% -8%, var(--area-bloom), transparent 70%),
    radial-gradient(50vmax 38vmax at 104% 18%, var(--bloom-teal), transparent 72%),
    radial-gradient(70vmax 48vmax at 40% 114%, var(--bloom-sand), transparent 70%);
}

h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; }
img, svg { max-width: 100%; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-strong); }
/* A standalone link is a 44 x 44 px target, however short its label ("Pages",
   "Estero", "/"). A standalone link is one laid out as a box of its own (made
   inline-flex, or a flex or grid item) instead of sitting inline in a
   sentence. min-width and min-height never apply to an inline box, so a link
   inside running text keeps its size and its line. A link that must fit a
   smaller cell (a map point) sets its own minimum. */
a { min-width: 44px; min-height: 44px; }
strong { font-weight: 600; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1em; overflow-wrap: anywhere; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Vertical rhythm for blocks placed one after another in a page or a section
   (components that set their own top margin, such as sections, win). */
.main > * + *, .section > * + * { margin-top: 16px; }

/* Focus is always visible for keyboard users: a 3 px indigo ring, on white, on tints and on glass. */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.icon { display: inline-block; flex: none; vertical-align: middle; }

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

.skip-link {
  position: absolute;
  left: var(--s-3);
  top: var(--s-3);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--r-2);
  background: var(--surface);
  color: var(--accent);
  font-weight: 600;
  box-shadow: var(--e-overlay);
  transform: translateY(-300%);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; }

/* ------------------------------------------------------------- glass */

/* Glass is for the navigation, the phone's bottom bar and a floating control
   only. The translucent layer is a pseudo-element, so the element itself
   stays a plain box (a fixed child, such as the phone's menu sheet, is still
   placed against the window). */
.glass { position: relative; isolation: isolate; }
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 0 0 1px var(--glass-hairline), var(--glass-shadow);
  pointer-events: none;
}
/* The depth of the glass (2026-11-13, build 4): a sheen over its upper half and a bright rim along
   its top edge, over the frosted layer, like light on a curved pane. It only adds white, so every
   word on it keeps its contrast; the solid fallbacks below take it away. */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--glass-sheen), rgba(255, 255, 255, 0) 56%);
  box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 rgba(23, 34, 56, 0.05);
  pointer-events: none;
}
/* A menu's list, open over the page: the stronger frost (white at 94 percent), so its quietest words keep 4.5:1. */
.glass-strong::before { background: var(--glass-bg-strong); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass::before { background: var(--surface); }
  .glass::after { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass::before {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .glass::after { display: none; }
  body::before { display: none; }
}
@media (prefers-contrast: more) {
  .glass::before {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--line-control);
  }
  .glass::after { display: none; }
}

/* A floating control: a small glass bar that stays in view over the page (a
   map's controls, a decision kept at hand). On a phone it sits above the
   bottom bar. */
.float-bar {
  position: sticky;
  bottom: 16px;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 16px auto 0;
  padding: 8px;
  border-radius: var(--r-3);
}
.float-bar-text { padding: 0 8px; font-size: var(--t-1); font-weight: 500; color: var(--ink); }

/* ----------------------------------------------------------- app bar */

.app-bar {
  position: sticky;
  top: 0;
  z-index: 42;
  padding: calc(8px + env(safe-area-inset-top)) var(--gutter) 0;
}
.app-bar-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(var(--bar-max) - 2 * var(--gutter));
  min-height: 60px;
  margin: 0 auto;
  padding: 8px;
  border-radius: var(--r-3);
}
.bar-start { display: flex; flex: 0 1 auto; align-items: center; gap: 8px; min-width: 0; }
.bar-end { display: flex; flex: none; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
/* The sections keep one row and their natural width: the business name shortens first. */
.nav-primary { flex: none; min-width: 0; margin: 0 auto; }

.brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 8px;
  border-radius: var(--r-2);
  color: var(--ink);
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.brand:hover { color: var(--ink); background: rgba(23, 34, 56, 0.05); }
.brand-mark { width: 28px; height: 28px; flex: none; }

.nav-primary ul { display: flex; flex-wrap: nowrap; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--r-2);
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--t-nav);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.nav-link:hover { color: var(--ink); background: rgba(23, 34, 56, 0.06); }
/* The current section: its area's tint and ink, a heavier label and an edge (never color alone). */
.nav-link[aria-current] {
  color: var(--area-ink);
  font-weight: 600;
  background: var(--area-soft);
  box-shadow: inset 0 0 0 1px var(--area-line);
}
/* Icons beside the labels where seven of them fit with room to spare. */
.nav-link .icon { display: none; }
@media (min-width: 1440px) {
  .nav-link .icon { display: inline-block; }
  .nav-link { padding: 8px 10px; }
  /* An example business's bar gives their room to its "Demo" tag and "Exit example". */
  .is-demo .nav-link .icon { display: none; }
  .is-demo .nav-link { padding: 8px 12px; }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: var(--t-1);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
/* The demo label: one quiet outlined chip, never the loudest thing on the page. */
.pill-demo { background: var(--demo-soft); color: var(--demo-ink); box-shadow: inset 0 0 0 1px var(--demo-line); }

/* ------------------------------------------------------------- menus */

.menu { position: relative; }
.menu > summary, .menu-sheet > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker, .menu-sheet > summary::-webkit-details-marker { display: none; }
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 12px;
  border-radius: var(--r-2);
  color: var(--ink-2);
  font-size: var(--t-nav);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.menu-toggle:hover { color: var(--ink); background: rgba(23, 34, 56, 0.06); }
.menu-toggle.is-active { color: var(--area-ink); font-weight: 600; background: var(--area-soft); box-shadow: inset 0 0 0 1px var(--area-line); }
.menu[open] > .menu-toggle { color: var(--ink); background: rgba(23, 34, 56, 0.08); }
.menu-toggle .icon-chevron-down { transition: transform 0.15s ease; }
.menu[open] > .menu-toggle .icon-chevron-down { transform: rotate(180deg); }

.ws-switch { min-width: 0; }
.ws-switch > .menu-toggle {
  max-width: min(260px, 100%);
  min-width: 0;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}
.ws-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* An example business's switcher shows its violet "Demo" tag, whole (its name is for screen
   readers), so the bar that stays in view labels every part of a long page. */
.ws-name-mark { flex: none; white-space: nowrap; }
/* The way out of an example business, beside the switcher: "Exit example" on a computer, "Exit"
   on a phone (its whole words for screen readers). The switcher's name shortens first. */
.bar-exit {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--r-2);
  color: var(--demo-ink);
  font-size: var(--t-nav);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.bar-exit:hover { color: var(--ink); background: rgba(23, 34, 56, 0.06); }
/* An example business's bar holds its "Demo" tag and the way out beside the sections at every
   width: "Exit" under 1280 px (its whole words for screen readers); between 760 and 1023 px the
   brand gives way and the exit keeps its cross and its word (Home is in the bar, see below); from
   1440 px the sections keep their words without icons (with the section icons, above). */
@media (min-width: 760px) and (max-width: 1279.98px) {
  .is-demo .bar-exit-more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* A menu's list (2026-11-13, build 4): navigation, so it is glass, the stronger frost (class
   glass-strong) opening below the bar over the page, never over another glass surface; its words
   keep 4.5:1 over the darkest thing under it, and it is solid white where the browser cannot blur
   or the reader asks for less transparency. The list scrolls inside it (.menu-scroll), so the
   glass keeps the size of the room in the window. */
.menu-pop {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 50;
  width: max-content;
  min-width: 248px;
  max-width: min(340px, calc(100vw - 32px));
  border-radius: var(--r-3);
  box-shadow: var(--e-overlay);
}
.menu-scroll {
  display: grid;
  gap: 2px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  border-radius: inherit;
}
.menu-pop-end { left: auto; right: 0; }
.menu-pop ul { display: grid; gap: 2px; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--r-1);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--t-2);
}
.menu-item:hover { color: var(--ink); background: var(--tile); }
.menu-item[aria-current] { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.menu-item-text { min-width: 0; flex: 1 1 auto; overflow-wrap: break-word; }
.menu-item .icon { color: var(--ink-3); }
.menu-item[aria-current] .icon { color: var(--accent); }
.menu-sep { height: 1px; margin: 6px 4px; background: var(--line); }
.menu-label { padding: 8px 12px 2px; font-size: var(--t-1); font-weight: 600; color: var(--ink-2); }
/* Sign out: a POST form whose button looks like a menu item. */
.menu-form { margin: 0; }
.menu-account { display: grid; }
.menu-action {
  width: 100%;
  margin: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.menu-note { padding: 0 12px 6px; font-size: var(--t-1); color: var(--ink-3); }

/* A section that does not fit the bar is listed first in More (only where it is folded). */
.more-fold, .more-here-fold { display: none; }
@media (max-width: 1279.98px) {
  .nav-fold-a { display: none; }
  .more-fold-a { display: block; }
  .menu-toggle.is-fold-a { color: var(--area-ink); font-weight: 600; background: var(--area-soft); box-shadow: inset 0 0 0 1px var(--area-line); }
  .menu-toggle.is-fold-a .more-plain { display: none; }
  .menu-toggle.is-fold-a .more-here-fold { display: inline; }
}
@media (max-width: 1099.98px) {
  .nav-fold-b { display: none; }
  .more-fold-b { display: block; }
  .menu-toggle.is-fold-b { color: var(--area-ink); font-weight: 600; background: var(--area-soft); box-shadow: inset 0 0 0 1px var(--area-line); }
  .menu-toggle.is-fold-b .more-plain { display: none; }
  .menu-toggle.is-fold-b .more-here-fold { display: inline; }
}
@media (max-width: 899.98px) {
  .nav-fold-c { display: none; }
  .more-fold-c { display: block; }
  .menu-toggle.is-fold-c { color: var(--area-ink); font-weight: 600; background: var(--area-soft); box-shadow: inset 0 0 0 1px var(--area-line); }
  .menu-toggle.is-fold-c .more-plain { display: none; }
  .menu-toggle.is-fold-c .more-here-fold { display: inline; }
}
/* Between 760 and 1023 px the brand is its mark alone, so four sections and More keep one row. */
@media (min-width: 760px) and (max-width: 1023.98px) {
  .brand-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* The sections and More sit a little closer (fix round 4), so the business's whole name keeps its
     room even while More carries the name of a folded section ("AI Visibility"). */
  .nav-link, .nav-more > .menu-toggle { padding-left: 9px; padding-right: 9px; }
  /* An example business's bar: its "Demo" tag and the way out keep their room. The way out keeps
     its word "Exit" beside the cross (a cross alone reads as closing a menu, fix round 4). */
  .is-demo .brand { display: none; }
  .is-demo .bar-exit { gap: 4px; padding: 0 8px; }
}

/* --------------------------------------------- the phone's bottom bar */

/* Home, Local Map, Google, Agent Team and More, in a compact glass bar fixed
   to the bottom of a phone. More opens the full list as a sheet under it. */
.bottom-bar { display: none; }
.bottom-bar-list { display: flex; align-items: stretch; gap: 2px; margin: 0; padding: 0; list-style: none; }
.bottom-bar-list > li { display: flex; flex: 1 1 auto; min-width: 0; }
.bottom-bar .menu-sheet { display: block; flex: 1 1 auto; min-width: 0; }
.bottom-link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 44px;
  min-height: 56px;
  height: 100%;
  padding: 6px 2px;
  border-radius: var(--r-2);
  color: var(--ink-2);
  text-decoration: none;
  text-align: center;
  font-size: var(--t-0);
  font-weight: 500;
  line-height: 1.15;
  cursor: pointer;
}
.bottom-link:hover { color: var(--ink); }
.bottom-link[aria-current] {
  color: var(--area-ink);
  font-weight: 600;
  background: var(--area-soft);
  box-shadow: inset 0 0 0 1px var(--area-line);
}
/* The open list's own button (it reads Close): pressed, not a place. */
.menu-sheet[open] > .bottom-link { color: var(--ink); font-weight: 600; background: rgba(23, 34, 56, 0.08); box-shadow: none; }
.bottom-label { display: block; max-width: 100%; }
.when-open, .when-closed { align-items: center; gap: 2px; }
.bottom-link .when-open, .bottom-link .when-closed { flex-direction: column; }
.when-closed { display: inline-flex; }
.when-open { display: none; }
.menu-sheet[open] > summary .when-open { display: inline-flex; }
.menu-sheet[open] > summary .when-closed { display: none; }

/* The full list: an opaque sheet over the whole window, behind both glass
   bars (its first rows start under the top bar, its last end above the
   bottom bar). */
.sheet {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(72px + env(safe-area-inset-top)) 16px calc(var(--bottom-bar-h) + 40px + env(safe-area-inset-bottom));
  background: var(--surface);
  cursor: default;
}
.sheet-section { display: grid; gap: 4px; padding: 8px 0 12px; border-bottom: 1px solid var(--line); }
.sheet-section:last-child { border-bottom: 0; }
.sheet-label { padding: 8px 12px 4px; font-size: var(--t-1); font-weight: 600; color: var(--ink-2); }
/* Two columns where two names fit side by side, one on the narrowest phones (a name never breaks inside a word). */
.sheet-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(164px, 1fr)); gap: 4px 8px; }
.sheet-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 12px;
  border-radius: var(--r-2);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--t-3);
  line-height: 1.25;
}
.sheet-link:hover { color: var(--ink); background: var(--tile); }
.sheet-link[aria-current] { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.sheet-link .icon { color: var(--ink-3); }
.sheet-link[aria-current] .icon { color: var(--accent); }
/* Only the window is locked while the sheet is open: the body stays as it is, so the sticky top bar keeps its place. */
.sheet-open { overflow: hidden; }

/* The phone shell: a slim top bar with the brand mark and the business
   switcher (its list opens full width under the bar), and the bottom bar.
   The page ends with room for the bottom bar, and a focused control scrolls
   clear of both bars. */
@media (max-width: 759.98px) {
  html { scroll-padding-top: 76px; scroll-padding-bottom: calc(var(--bottom-bar-h) + 32px + env(safe-area-inset-bottom)); }
  body { padding-bottom: calc(var(--bottom-bar-h) + 24px + env(safe-area-inset-bottom)); }
  .app-bar { padding: calc(6px + env(safe-area-inset-top)) 8px 0; }
  .app-bar-inner { min-height: 52px; padding: 4px; }
  .nav-primary, .nav-more { display: none; }
  .ws-switch { display: block; flex: 0 1 auto; min-width: 0; }
  .ws-switch > .menu-toggle { max-width: 100%; }
  /* "Exit" on a phone, its whole words for screen readers. */
  .bar-exit { gap: 4px; padding: 0 8px; }
  .bar-exit-more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .ws-switch .menu-pop {
    position: fixed;
    top: calc(68px + env(safe-area-inset-top));
    left: 8px;
    right: 8px;
    width: auto;
    min-width: 0;
    max-width: none;
  }
  .ws-switch .menu-scroll { max-height: calc(100vh - 168px); }
  .brand { padding: 0 8px; }
  .brand-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .bottom-bar {
    display: block;
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 41;
    padding: 4px;
    border-radius: var(--r-3);
  }
  .float-bar { bottom: calc(var(--bottom-bar-h) + 20px + env(safe-area-inset-bottom)); }
}
@media (max-width: 379.98px) {
  .pill { padding: 4px 10px; }
}

/* -------------------------------------------------------- page frame */

.main {
  display: block;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 24px var(--gutter) 48px;
}
.main:focus { outline: none; }
/* The one demo label of an example business's page: an opaque violet-tinted strip. */
.main > .demo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 16px;
  padding: 8px 12px;
  border: 1px solid var(--demo-line);
  border-radius: var(--r-2);
  background: var(--demo-soft);
  font-size: var(--t-1);
  color: var(--ink-2);
}
.flash { margin-bottom: 16px; border-radius: var(--r-2); }
.problem-actions { margin-top: 24px; }
.form-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.footer {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 24px var(--gutter) calc(32px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: var(--t-1);
}
.footer-links { margin-top: 4px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); }
@media (min-width: 640px) { :root { --gutter: 24px; --pad-panel: 24px; } }
@media (min-width: 760px) { :root { --gap-section: 48px; } }
@media (min-width: 1024px) { :root { --gap-section: 56px; } .main { padding-top: 32px; } }

/* The page header: the area's icon tile, the title, ONE answer sentence, an
   optional status and the one action. Spacing is by margins, so a part that
   is left out leaves no gap. */
.page-header { display: grid; gap: 16px; margin: 0 0 24px; }
.page-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icon eyebrow" "icon title" "icon answer" "icon status";
  align-items: start;
  min-width: 0;
}
.page-heading > * { min-width: 0; }
.page-eyebrow { grid-area: eyebrow; margin-bottom: 2px; font-size: var(--t-1); font-weight: 500; color: var(--ink-2); }
.page-title { grid-area: title; font-size: var(--t-title); line-height: 1.15; letter-spacing: -0.02em; overflow-wrap: break-word; }
.answer { max-width: 62ch; font-size: var(--t-lead); line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.page-heading > .answer { grid-area: answer; margin-top: 8px; }
.page-status { grid-area: status; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.page-meta { min-width: 0; }
/* The icon tile is drawn only where the page (or the header) names its area. */
.page-icon, .area-tile { display: none; }
[data-area] .page-icon, [data-area] .area-tile, .area-tile[data-area] {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-2);
  background: var(--area-tile);
  box-shadow: inset 0 0 0 1px var(--area-line);
}
.page-icon::before, .area-tile::before {
  content: "";
  width: 22px;
  height: 22px;
  background: var(--area-tile-ink);
  -webkit-mask: var(--area-icon) center / contain no-repeat;
  mask: var(--area-icon) center / contain no-repeat;
}
[data-area] .page-icon { grid-area: icon; width: 56px; height: 56px; margin-right: 16px; border-radius: var(--r-3); }
[data-area] .page-icon::before { width: 28px; height: 28px; }
[data-area] .area-tile-lg, .area-tile-lg[data-area] { width: 56px; height: 56px; border-radius: var(--r-3); }
.area-tile-lg::before { width: 28px; height: 28px; }
[data-area] .area-tile-sm, .area-tile-sm[data-area] { width: 32px; height: 32px; border-radius: 10px; }
.area-tile-sm::before { width: 18px; height: 18px; }
@media (min-width: 900px) {
  .page-header.has-actions { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .page-header.has-actions .page-meta { grid-column: 1 / -1; }
  /* The meta comes first in the reading order; the actions keep the top right. */
  .page-header.meta-first.has-actions .page-actions { grid-column: 2; grid-row: 1; }
  .page-header.meta-first.has-actions .page-meta { grid-row: 2; }
}
/* On a phone the tile sits beside the title only; the answer takes the full width. */
@media (max-width: 639.98px) {
  .page-heading { grid-template-areas: "eyebrow eyebrow" "icon title" "answer answer" "status status"; }
  .page-title { align-self: center; font-size: var(--t-title-phone); }
  [data-area] .page-icon { width: 44px; height: 44px; margin-right: 12px; border-radius: var(--r-2); }
  [data-area] .page-icon::before { width: 22px; height: 22px; }
  .page-eyebrow { margin-bottom: 6px; }
  .page-heading > .answer { margin-top: 12px; }
}

.section { margin-top: var(--gap-section); min-width: 0; }
.section:first-child { margin-top: 0; }
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 16px;
}
.section-title { font-size: var(--t-4); letter-spacing: -0.015em; }
h3.section-title { font-size: var(--t-lead); letter-spacing: -0.01em; }
@media (min-width: 760px) { h2.section-title { font-size: var(--t-h2); } }
.section-intro { max-width: 68ch; margin: -8px 0 16px; font-size: var(--t-2); color: var(--ink-2); text-wrap: pretty; }

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-stats { gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 156px), 1fr)); }
.grid-halves { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid-wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.span-all { grid-column: 1 / -1; }
.grid-list { list-style: none; margin: 0; padding: 0; }

.stack { display: grid; gap: 16px; min-width: 0; }
.stack-tight { gap: 8px; }
.stack-loose { gap: 24px; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.prose { display: grid; gap: 12px; max-width: 68ch; }
.prose p { color: var(--ink-2); }
.list { display: grid; gap: 6px; margin: 0; padding-left: 1.25em; color: var(--ink-2); font-size: var(--t-2); }
.muted { color: var(--ink-3); }
.small { font-size: var(--t-1); }
.num, .tabular { font-variant-numeric: tabular-nums; }
.wrap-anywhere, .url { overflow-wrap: anywhere; }
/* Words beside a drawing: one column on a phone, the drawing at the end on a computer. */
.with-art { display: grid; gap: 16px 32px; align-items: center; min-width: 0; }
.with-art > * { min-width: 0; }
@media (min-width: 760px) { .with-art { grid-template-columns: minmax(0, 1fr) auto; } }

/* ------------------------------------------------------------- tones */

.tone-good { --tone-ink: var(--good); --tone-strong: var(--good); --tone-soft: var(--good-soft); --tone-line: var(--good-line); }
.tone-caution { --tone-ink: var(--caution); --tone-strong: var(--caution-strong); --tone-soft: var(--caution-soft); --tone-line: var(--caution-line); }
.tone-bad { --tone-ink: var(--bad); --tone-strong: var(--bad); --tone-soft: var(--bad-soft); --tone-line: var(--bad-line); }
.tone-info, .tone-accent { --tone-ink: var(--accent); --tone-strong: var(--accent); --tone-soft: var(--accent-soft); --tone-line: var(--accent-line); }
.tone-neutral { --tone-ink: var(--ink-2); --tone-strong: var(--ink-3); --tone-soft: var(--neutral-soft); --tone-line: var(--neutral-line); }
.tone-demo { --tone-ink: var(--demo-ink); --tone-strong: var(--demo); --tone-soft: var(--demo-soft); --tone-line: var(--demo-line); }
/* A quiet slate for the items beside the one that matters (the other businesses
   beside yours): bars and swatches in --muted (3:1 on the bar track), words in --ink-2. */
.tone-muted { --tone-ink: var(--ink-2); --tone-strong: var(--muted); --tone-soft: var(--neutral-soft); --tone-line: var(--neutral-line); }

/* ------------------------------------------------------ cards, stats */

/* One card family: an opaque white surface with the border color, 16 px corners and a soft shadow. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: var(--pad-panel);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--e-raised);
}
.card-warm { background: var(--surface-warm); }
.card-flat { box-shadow: none; }
/* A toned card: a 4 px bar inside its left edge (never an arc on the rounded corners). */
.card-toned::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--tone-strong);
}
/* The badges sit in one row under the title, whatever its length, so cards
   side by side keep their pills in one place. */
.card-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.card-heading { display: grid; gap: 4px; min-width: 0; max-width: 100%; }
.card-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; }
.card-eyebrow { font-size: var(--t-1); font-weight: 500; color: var(--ink-2); }
.card-title { font-size: var(--t-lead); font-weight: 600; line-height: 1.3; overflow-wrap: break-word; }
.card-body { display: grid; gap: 12px; min-width: 0; font-size: var(--t-2); color: var(--ink-2); }
.card-body > p { max-width: 68ch; }
.card-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.card-link { transition: box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; }
.card-link .card-title a { color: inherit; text-decoration: none; }
.card-link .card-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card-link .card-title a:focus-visible { outline: none; }
.card-link:hover { border-color: var(--line-strong); box-shadow: var(--e-floating); }
.card-link:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.card-more { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-2); font-weight: 600; color: var(--accent); }

/* A card about one of the areas (Home's short summaries): its icon tile, its
   name, one sentence and where it leads. */
.area-card { gap: 12px; }
.area-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.area-card-head .card-title { min-width: 0; }
/* The title's link is a box as tall as the tile beside it (the whole card is its target). */
.area-card-head .card-title a { display: flex; align-items: center; min-height: 44px; }
.area-card-text { font-size: var(--t-2); color: var(--ink); text-wrap: pretty; }
.area-card .card-more { margin-top: auto; color: var(--area-ink); }

.stat {
  position: relative;
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--e-raised);
}
.stat-label { font-size: var(--t-1); font-weight: 500; color: var(--ink-2); }
.stat-value {
  font-size: var(--t-6);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  overflow-wrap: break-word;
}
.stat-sub { font-size: var(--t-1); color: var(--ink-3); }
.stat-change {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: var(--t-1);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.stat-link { transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.stat-link .stat-label a { color: inherit; text-decoration: none; }
.stat-link .stat-label a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.stat-link .stat-label a:focus-visible { outline: none; }
.stat-link:hover { border-color: var(--line-strong); box-shadow: var(--e-floating); }
.stat-link:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 419.98px) { .stat-value { font-size: var(--t-5); } }

/* Inside a panel, cards and tiles are soft fills without a frame: never boxes in boxes. */
.card .card, .panel .card, .summary-band .card, .card .stat, .panel .stat, .summary-band .stat {
  background: var(--tile);
  border-color: transparent;
  border-radius: var(--r-2);
  box-shadow: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--tone-line);
  background: var(--tone-soft);
  color: var(--tone-ink);
  font-size: var(--t-1);
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: break-word;
}
.badge .icon { width: 14px; height: 14px; }

/* Three chips: a quiet grey fact, an outlined neutral tag, and a link with
   its chevron inside (a 44 px target around a 36 px pill). A link label that
   wraps keeps its line height, and its outline grows with it: 8 px of padding
   above and below the text, the outline 4 px inside that, so both lines sit
   inside the outline and clear of its rounded ends. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-height: 28px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: var(--t-1);
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: break-word;
}
.chip-meta { background: var(--tile); color: var(--ink-2); }
.chip-tag { background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.chip-link {
  position: relative;
  isolation: isolate;
  min-height: 44px;
  padding: 8px 8px 8px 12px;
  border-radius: 22px;
  color: var(--accent);
  font-weight: 600;
  line-height: var(--lh);
  text-decoration: none;
}
.chip-link::before { content: ""; position: absolute; inset: 4px 0; z-index: -1; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--accent-line); }
.chip-link:hover { color: var(--accent-strong); }
.chip-link:hover::before { background: var(--accent-soft); }
.chip-text { min-width: 0; }

/* An average Google Search position: one neutral chip, never a rank color. */
.pos-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 2px 10px;
  border-radius: 14px;
  background: var(--tile);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2);
  font-size: var(--t-1);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  /* "Avg. Google Search position 7.9" takes two lines where a row has no room for one; the
     corners stay round. */
  white-space: normal;
  text-align: left;
}
.pos-chip-short { white-space: nowrap; }
.pos-chip-none { color: var(--ink-3); }

/* The one quiet link from a screen to its Details page. */
.tech-link { margin: 0; }
.tech-link a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--t-2); color: var(--ink-2); }
.tech-link a:hover { color: var(--accent); }

/* ----------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 18px;
  border-radius: var(--r-2);
  border: 1px solid transparent;
  font-size: var(--t-2);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.btn-primary { background: var(--accent); color: #ffffff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(23, 34, 56, 0.12), 0 4px 12px rgba(53, 74, 200, 0.24); }
.btn-primary:hover { background: var(--accent-strong); color: #ffffff; }
/* The action of a "Needs you" card (2026-11-13, build 4): its area's strong color with white words
   (4.5:1 or more on every area's accent), a bright top edge and a glow in its own hue, so the one
   thing to do is colorful for a reason. */
.btn-area { background: var(--area); color: #ffffff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(23, 34, 56, 0.12), 0 6px 16px var(--area-glow); }
.btn-area:hover { background: var(--area-ink); color: #ffffff; }
.btn-large { min-height: 52px; padding: 14px 22px; font-size: var(--t-lead); border-radius: 14px; }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: 0 1px 2px rgba(23, 34, 56, 0.04); }
.btn-secondary:hover { color: var(--ink); border-color: var(--line-control); background: var(--surface-warm); }
.btn-quiet { background: transparent; color: var(--accent); }
.btn-quiet:hover { background: var(--accent-soft); color: var(--accent-strong); }
.btn-danger { background: var(--surface); color: var(--bad); border-color: var(--bad-line); }
.btn-danger:hover { background: var(--bad-soft); color: var(--bad); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.btn-icon { padding: 10px; }
/* One text size for buttons; a small button is only tighter, except in a
   table or a list row, where its text is small too. */
.btn-small { padding: 8px 12px; }
.table .btn-small, .rows .btn-small { font-size: var(--t-1); }
.btn-block { width: 100%; }

/* ------------------------------------------------------------- forms */

.form { display: grid; gap: 16px; max-width: 640px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.field { display: grid; gap: 6px; min-width: 0; }
.field-label, .fieldset-legend { font-size: var(--t-2); font-weight: 600; color: var(--ink); }
.field-req { font-weight: 400; color: var(--ink-3); }
.field-hint { font-size: var(--t-1); color: var(--ink-2); }
.field-error { display: flex; align-items: flex-start; gap: 6px; font-size: var(--t-1); font-weight: 600; color: var(--bad); }
/* A field's edge keeps 3:1 against the surface it sits on. */
.input, .select, .textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font-size: var(--t-3);
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--line-control);
  border-radius: var(--r-2);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--accent); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--bad);
  box-shadow: 0 0 0 1px var(--bad);
}
.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2342516b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5l5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}
.textarea { min-height: 96px; resize: vertical; }
.fieldset { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.fieldset-legend { padding: 0; margin-bottom: 2px; }
.choices { display: grid; }
.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 10px 0;
  cursor: pointer;
  font-size: var(--t-2);
  color: var(--ink);
}
.check input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--accent); cursor: pointer; }
.check-text { display: grid; gap: 2px; min-width: 0; }
.check-hint { font-size: var(--t-1); color: var(--ink-2); }
.choice .check-hint { margin: -6px 0 8px 34px; }
.field-check { gap: 0; }
.field-check .field-hint, .field-check .field-error { margin: -6px 0 6px 34px; }

/* A bar of filters: an opaque surface like every other reading surface. */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--surface);
  box-shadow: var(--e-raised);
}
.filter-bar .field { flex: 1 1 180px; }
.filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ------------------------------------------------------------ tables */

.table-card { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-2); }
.table caption { padding: 12px 16px 4px; text-align: left; font-weight: 600; color: var(--ink); }
/* Cells break words only at their ends, so a column never shrinks below one word. */
.table th, .table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); overflow-wrap: break-word; }
.table thead th { font-size: var(--t-1); font-weight: 600; color: var(--ink-2); background: var(--surface-warm); white-space: nowrap; }
.table tbody tr:last-child > * { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-warm); }
.table th[scope="row"] { font-weight: 500; color: var(--ink); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .cell-missing { color: var(--ink-3); }
/* A scrolling table keeps whole words, so it scrolls instead of crushing a column. */
.table-scroll .table th, .table-scroll .table td { overflow-wrap: normal; }
/* Its names and ids too ("workspace_settings" never breaks into "workspace_sett" and "ings"):
   code elsewhere may break anywhere, but this table scrolls instead. */
.table-scroll .table code { overflow-wrap: normal; white-space: nowrap; }
/* A stacked table is a plain table from 640 px up: its column names wrap at
   word ends, and one still wider than its frame (many columns) scrolls inside
   it instead of being cut off at the frame's edge. */
.table-stack { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-stack .table thead th { white-space: normal; overflow-wrap: normal; }
.table-scroll .table th[scope="row"] { min-width: 9em; }
/* A frame whose table is wider than it is a tab stop (the script makes it one,
   so the arrow keys scroll it), with the product's focus ring around it. */
.table-card[tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.scroll-hint { display: none; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--t-1); color: var(--ink-3); }
@media (max-width: 639.98px) {
  .scroll-hint { display: flex; }
  /* With the script, the hint shows only while the table really scrolls. */
  .js .table-scroll:not([data-overflowing]) + .scroll-hint { display: none; }
  .table-stack .table, .table-stack .table tbody, .table-stack .table tr,
  .table-stack .table td, .table-stack .table th[scope="row"], .table-stack .table caption { display: block; }
  .table-stack .table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
  .table-stack .table tr { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .table-stack .table tbody tr:last-child { border-bottom: 0; }
  /* A label sits on the first line of its value, beside it, even when that
     line is a 44 px link or a badge ("Setup" beside "Not finished"). */
  .table-stack .table td, .table-stack .table th[scope="row"] {
    display: grid;
    grid-template-columns: minmax(6.5em, 38%) minmax(0, 1fr);
    align-items: baseline;
    gap: 12px;
    padding: 4px 0;
    border: 0;
    text-align: left;
  }
  .table-stack .table td::before, .table-stack .table th[scope="row"]::before {
    content: attr(data-label);
    font-size: var(--t-1);
    font-weight: 500;
    color: var(--ink-2);
  }
  .table-stack .table .num { text-align: left; white-space: normal; }
  .table-stack .table .cell-value { min-width: 0; }
  .table-stack .table .no-label { grid-template-columns: minmax(0, 1fr); }
  .table-stack .table .no-label::before { display: none; }
}
/* On the narrowest phones a label beside its value leaves the value a few words a line: the
   label goes above its value, and the value has the card's whole width. */
@media (max-width: 359.98px) {
  .table-stack .table td, .table-stack .table th[scope="row"] { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 6px 0; }
}

/* ------------------------------------------- segmented, empty, banners */

.segmented ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 4px;
  list-style: none;
  border-radius: var(--r-2);
  background: var(--neutral-soft);
}
.seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--r-1);
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--t-2);
  font-weight: 500;
}
.seg:hover { color: var(--ink); background: rgba(255, 255, 255, 0.7); }
.seg[aria-current] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(23, 34, 56, 0.08); }
/* --ink-2 keeps small counts above 4.5:1 on the track over the page background. */
.seg-count { font-size: var(--t-1); font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* A choice that holds nothing is dimmed (--ink-3 still reads at 4.5:1 on the track). */
.seg.seg-zero, .seg.seg-zero .seg-count { color: var(--ink-3); }
/* On a phone the choices form an even grid, never ragged rows; each fills its
   cell, its count centered under its name, so every cell has one shape. */
@media (max-width: 639.98px) {
  .segmented ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr)); width: 100%; }
  .segmented li { display: flex; min-width: 0; }
  .seg { flex: 1 1 auto; flex-direction: column; justify-content: center; gap: 0; padding: 6px 4px; text-align: center; line-height: 1.25; }
}

/* Tabs: links, one page each; the current one is underlined and heavier, never color only. */
.tabs { min-width: 0; }
.tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  margin-bottom: -1px;
  border-bottom: 3px solid transparent;
  border-radius: var(--r-1) var(--r-1) 0 0;
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--t-2);
  font-weight: 500;
}
.tab:hover { color: var(--ink); background: var(--tile); }
.tab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--neutral-soft);
  color: var(--ink-2);
  font-size: var(--t-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tab[aria-current="page"] .tab-count { background: var(--accent-soft); color: var(--accent-strong); }

/* Pagination: Previous, "Page 2 of 5", Next. */
.pager-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.pager-status { font-size: var(--t-2); color: var(--ink-2); font-variant-numeric: tabular-nums; }
span.btn[aria-disabled="true"] { cursor: default; }
/* On a phone the pager stays one row: arrow buttons (their words kept for
   screen readers) with the page count centered between them. */
@media (max-width: 559.98px) {
  .pager-list { flex-wrap: nowrap; }
  .pager-list .btn { padding: 10px; }
  .pager-list .btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .pager-status { flex: 1 1 auto; min-width: 0; text-align: center; font-size: var(--t-1); }
}

.empty {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 24px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-3);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--t-2);
}
.empty-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-2);
  background: var(--tile);
  color: var(--ink-2);
}
.empty-title { font-size: var(--t-lead); }

.banner, .callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r-2);
  border: 1px solid var(--tone-line);
  background: var(--tone-soft);
  color: var(--ink);
  font-size: var(--t-2);
}
.banner { margin-bottom: 16px; }
.callout { padding: 16px; }
.banner-icon, .callout-icon { flex: none; margin-top: 2px; color: var(--tone-ink); }
.banner-body, .callout-body { display: grid; gap: 4px; min-width: 0; }
.banner-body > p, .callout-body > p { max-width: 68ch; }
.banner-title { font-weight: 600; color: var(--tone-ink); }
.callout-title { font-weight: 600; color: var(--ink); }
.banner-action, .callout-action { margin-top: 4px; }

/* The next step at the end of a page: the area's tint, so it is found at a glance. */
.next-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 32px;
  padding: 16px;
  border-radius: var(--r-3);
  background: var(--area-soft);
  border: 1px solid var(--area-line);
}
.next-action-text { display: grid; gap: 2px; min-width: 0; flex: 1 1 260px; }
.next-action-title { font-size: var(--t-lead); font-weight: 600; color: var(--ink); }
.next-action-note { font-size: var(--t-2); color: var(--ink-2); }
@media (min-width: 640px) { .next-action { padding: 20px 24px; } }

/* ---------------------------------------------- freshness and sources */

.freshness { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: var(--t-1); color: var(--ink-3); }
.freshness li { display: inline-flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.fresh-key { font-weight: 500; color: var(--ink-2); }
.source-note { font-size: var(--t-1); color: var(--ink-3); }
.source-key { font-weight: 500; color: var(--ink-2); }

.details { min-width: 0; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); }
.details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--r-2);
  cursor: pointer;
  list-style: none;
  font-size: var(--t-2);
  font-weight: 500;
  color: var(--ink-2);
}
.details > summary::-webkit-details-marker { display: none; }
.details > summary:hover { color: var(--ink); }
.details > summary .icon { transition: transform 0.15s ease; }
.details[open] > summary .icon { transform: rotate(180deg); }
.details-body { display: grid; gap: 12px; min-width: 0; padding: 4px 16px 16px; font-size: var(--t-2); color: var(--ink-2); }
.details-body > p { max-width: 68ch; }

.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin: 0 0 4px; padding: 0; list-style: none; font-size: var(--t-1); color: var(--ink-3); }
.crumbs li { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.crumbs li + li::before { content: "/"; margin-right: 4px; color: var(--line-control); }
/* Every crumb link is a 44 x 44 px target, however short its label ("Pages"). */
.crumbs a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 2px; color: var(--ink-2); }
.crumbs [aria-current] { overflow-wrap: break-word; color: var(--ink-3); }
/* A long breadcrumb shortens its last crumb on a phone instead of wrapping a lone slash. */
@media (max-width: 639.98px) {
  .crumbs ol { flex-wrap: nowrap; overflow: hidden; margin: -4px; padding: 4px; }
  .crumbs li { flex: none; }
  .crumbs li:last-child { flex: 0 1 auto; min-width: 0; }
  .crumbs li:last-child > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

.kv { display: grid; grid-template-columns: minmax(8em, max-content) minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: var(--t-2); }
.kv dt { font-weight: 500; color: var(--ink-2); }
.kv dd { margin: 0; min-width: 0; color: var(--ink); overflow-wrap: break-word; }
@media (max-width: 479.98px) {
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kv dd { margin-bottom: 8px; }
}

.timeline { display: grid; margin: 0; padding: 0; list-style: none; }
.tl-item { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
.tl-item::before { content: ""; position: absolute; left: 9px; top: 24px; bottom: 0; width: 2px; background: var(--line); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item:last-child::before { display: none; }
.tl-dot { width: 12px; height: 12px; margin: 6px 4px 0; border-radius: 50%; background: var(--tone-strong); box-shadow: 0 0 0 3px var(--tone-soft); }
.tl-body { display: grid; gap: 2px; min-width: 0; }
.tl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--t-1); color: var(--ink-3); }
.tl-title { font-size: var(--t-2); font-weight: 500; color: var(--ink); overflow-wrap: break-word; }
.tl-title a { display: inline-flex; align-items: center; min-height: 44px; }
.tl-text { font-size: var(--t-2); color: var(--ink-2); }

.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; font-size: var(--t-1); color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend-value { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.swatch { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--tone-ink); }
.swatch-dot { border-radius: 50%; }
.swatch-line { width: 18px; height: 3px; border-radius: 2px; }
.swatch-dashed { width: 18px; height: 0; border-top: 3px dashed var(--tone-ink); border-radius: 0; background: none; }
.swatch-hollow { background: var(--surface); border: 2px dashed var(--ink-3); }
.swatch.tone-muted { background: var(--muted); }
/* A line chart's shaded windows, in the legend as on the chart. */
.swatch-win-a, .swatch-win-b { width: 18px; border-radius: 3px; }
.swatch-win-a { background: rgba(186, 125, 16, 0.26); box-shadow: inset 0 0 0 1px rgba(186, 125, 16, 0.6); }
.swatch-win-b { background: rgba(53, 74, 200, 0.16); box-shadow: inset 0 0 0 1px rgba(53, 74, 200, 0.45); }

.progress { display: grid; gap: 6px; }
.progress-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: var(--t-2); color: var(--ink-2); }
.progress-count { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.progress progress { width: 100%; height: 8px; border: 0; border-radius: 4px; background: var(--neutral-soft); overflow: hidden; -webkit-appearance: none; appearance: none; }
.progress progress::-webkit-progress-bar { background: var(--neutral-soft); border-radius: 4px; }
.progress progress::-webkit-progress-value { background: var(--accent); border-radius: 4px; }
.progress progress::-moz-progress-bar { background: var(--accent); border-radius: 4px; }

/* ------------------------------------------------------------ drawer */

.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  max-width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--e-overlay);
  overflow: hidden;
}
.drawer:not([open]) { display: none; }
.drawer::backdrop { background: rgba(23, 34, 56, 0.32); }
.drawer-backdrop { position: fixed; inset: 0; z-index: 59; margin: 0; background: rgba(23, 34, 56, 0.32); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 24px; border-bottom: 1px solid var(--line); }
.drawer-title { font-size: var(--t-4); overflow-wrap: break-word; }
.drawer-body { display: grid; align-content: start; gap: 16px; padding: 16px 24px calc(32px + env(safe-area-inset-bottom)); overflow-y: auto; }
@media (max-width: 639.98px) {
  .drawer {
    inset: auto 0 0 0;
    width: 100%;
    height: auto;
    max-height: 88vh;
    border-left: 0;
    border-top: 1px solid var(--line);
    border-radius: var(--r-3) var(--r-3) 0 0;
  }
  .drawer-head { padding-left: 16px; }
  .drawer-body { padding-left: 16px; padding-right: 16px; }
}

/* ------------------------------------------------------------ charts */

/* A chart stretched by its row keeps its rows at the top (align-content: start). */
.chart { display: grid; align-content: start; gap: 12px; min-width: 0; margin: 0; }
.chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.chart-title { font-size: var(--t-2); font-weight: 600; color: var(--ink); }
.chart-unit { font-size: var(--t-1); color: var(--ink-3); }
.chart-frame { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; min-width: 0; }
.chart-y { position: relative; font-size: var(--t-1); line-height: 1; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chart-y span { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; }
.chart-svg { display: block; width: 100%; overflow: visible; }
.chart-svg .grid-line { stroke: rgba(23, 34, 56, 0.09); stroke-width: 1; }
.chart-svg .base-line { stroke: rgba(23, 34, 56, 0.3); stroke-width: 1; }
.chart-svg .x-tick { stroke: rgba(23, 34, 56, 0.3); stroke-width: 1; }
.chart-svg .x-label { font-family: var(--font); font-size: 14px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.chart-svg .gap { fill: rgba(23, 34, 56, 0.05); }
.chart-svg .seg { fill: none; stroke: var(--tone-ink); stroke-width: 2.25; stroke-linecap: round; }
.chart-svg .series-dashed .seg { stroke-dasharray: 6 4; }
.chart-svg .pt { fill: var(--surface); stroke: var(--tone-ink); stroke-width: 2; }
.chart-svg .pt-dense { stroke-width: 1.5; }
/* The previous period: dashed, grey and lighter, under the line of the period shown. */
.chart-svg .series-compare .seg { stroke: var(--ink-3); stroke-width: 1.75; stroke-dasharray: 5 4; opacity: 0.85; }
.chart-svg .series-compare .pt { stroke: var(--ink-3); stroke-width: 1.25; }
.chart-svg .pt-latest { fill: var(--accent); stroke: var(--surface); stroke-width: 3; }
.chart-svg .pt-latest-label, .chart-svg .mark-label {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  fill: var(--ink);
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.chart-svg .mark-label { font-weight: 500; fill: var(--ink-2); }
.chart-svg .mark-line { stroke: var(--ink-3); stroke-width: 1.25; stroke-dasharray: 3 3; }
/* Shaded windows (the compared periods): amber, then indigo, never the grey of a day without data. */
.chart-svg .win-a { fill: rgba(186, 125, 16, 0.13); }
.chart-svg .win-b { fill: rgba(53, 74, 200, 0.08); }
.chart-svg .win-label {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  fill: var(--ink-2);
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.chart-note { font-size: var(--t-1); color: var(--ink-3); }
@media (max-width: 559.98px) { .chart-svg .x-minor { display: none; } }

/* One column that never grows past its frame (a long address no longer sets its width, and
   breaks at the frame's edge), and the count moves under the label when the two do not fit
   one line. */
.bars { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.bar-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; font-size: var(--t-2); }
.bar-label { min-width: 0; overflow-wrap: break-word; color: var(--ink); }
.bar-label a { display: inline-flex; align-items: center; min-height: 44px; }
.bar-value { white-space: nowrap; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bar { display: block; width: 100%; height: 10px; margin-top: 6px; overflow: visible; }
.bar-track { fill: var(--neutral-soft); }
.bar-fill { fill: var(--tone-ink); }
.bar-note { font-size: var(--t-1); color: var(--ink-3); }
/* The item to find first among others (you, among competitors); the others muted. */
.bar-row-highlight .bar-label, .bar-row-highlight .bar-value { font-weight: 600; color: var(--ink); }
.bar-row.tone-muted .bar-fill { fill: var(--muted); }

.spark { display: inline-flex; align-items: center; gap: 8px; color: var(--tone-ink); }
.spark svg { display: block; overflow: visible; }
.spark path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.spark .spark-end { stroke-width: 6; }
/* A bridged trend: the days without a value, a light dashed join under the line, so a gap reads as a gap. */
.spark .spark-bridge { stroke-width: 1.5; stroke-dasharray: 2 4; opacity: 0.55; }
.spark-fluid { display: flex; width: 100%; }
.spark-fluid svg { width: 100%; }
/* A trend with too few days says so quietly, instead of drawing loose dots. */
.spark-none { font-size: var(--t-1); color: var(--ink-3); }

/* ------------------------------------------- Local Map points and ranks */

/* Ranks are data, not states: a sequential ramp from deep green to amber to grey;
   the light steps carry dark ink, the deep green white ink. Red is for an error only. */
.rank-a { --rank: var(--rank-a); --rank-ink: #ffffff; }
.rank-b { --rank: var(--rank-b); --rank-ink: var(--ink); }
.rank-c { --rank: var(--rank-c); --rank-ink: var(--ink); }
.rank-d { --rank: var(--rank-d); --rank-ink: var(--ink); }
.rank-none { --rank: var(--rank-none); --rank-ink: var(--ink); }
.swatch.rank-a, .swatch.rank-b, .swatch.rank-c, .swatch.rank-d, .swatch.rank-none { background: var(--rank); border-radius: 50%; }
.swatch.rank-unmeasured { background: var(--surface); border: 2px dashed var(--ink-3); border-radius: 50%; }
.swatch.rank-failed { background: var(--surface); border: 2px solid var(--bad); border-radius: 50%; }
.swatch.rank-outside { background: var(--neutral-soft); border: 1px solid var(--line-strong); border-radius: 50%; }
.map-point circle { fill: var(--rank, var(--rank-none)); stroke: #ffffff; stroke-width: 2; }
.map-point text { fill: var(--rank-ink, #ffffff); font-family: var(--font); font-weight: 600; font-variant-numeric: tabular-nums; }
.map-point.rank-unmeasured circle { fill: var(--surface); stroke: var(--ink-3); stroke-dasharray: 3 2; }
.map-point.rank-unmeasured text { fill: var(--ink-3); }
.map-point.rank-failed circle { fill: var(--surface); stroke: var(--bad); }
.map-point.rank-failed text { fill: var(--bad); }
.map-point.rank-outside circle { fill: var(--neutral-soft); stroke: var(--line-strong); }
.map-point.rank-outside text { fill: var(--ink-3); }
.rank-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 15px; background: var(--rank, var(--rank-none)); color: var(--rank-ink, #ffffff); font-size: var(--t-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.rank-chip.rank-unmeasured { background: var(--surface); color: var(--ink-3); border: 2px dashed var(--ink-3); }
.rank-chip.rank-failed { background: var(--surface); color: var(--bad); border: 2px solid var(--bad); }
.rank-chip.rank-outside { background: var(--neutral-soft); color: var(--ink-3); border: 1px solid var(--line-strong); }

/* ------------------------------------------------------------ panels */

/* A top-level panel and the summary band: opaque white, the border color,
   16 px corners and a soft shadow. A panel stretched by its row (cards side
   by side) keeps its head and body at the top, so titles in one row line up. */
.panel, .summary-band {
  position: relative;
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  padding: var(--pad-panel);
  border-radius: var(--r-3);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--e-raised);
}
/* The band is the screen's answer: a short tab in the area's accent marks it. */
.summary-band { box-shadow: var(--e-floating); }
.summary-band::before {
  content: "";
  position: absolute;
  left: var(--pad-panel);
  top: -1px;
  width: 48px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--area);
}
.panel .panel { background: var(--tile); border-color: transparent; box-shadow: none; border-radius: var(--r-2); }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.panel-title { font-size: var(--t-lead); font-weight: 600; letter-spacing: -0.01em; }
/* A panel's h2 heads a section of the page: a section heading (20 px on a phone, 22 px from
   760 px), as the section titles are. A card's, a tile's or an inner panel's title keeps 18 px. */
h2.panel-title { font-size: var(--t-4); letter-spacing: -0.015em; }
@media (min-width: 760px) { h2.panel-title { font-size: var(--t-h2); } }
.panel .panel h2.panel-title { font-size: var(--t-lead); letter-spacing: -0.01em; }
.panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.panel-body { display: grid; align-content: start; gap: 16px; min-width: 0; }
.panel-body > p { max-width: 68ch; color: var(--ink-2); text-wrap: pretty; }
.panel .table-card, .summary-band .table-card { background: var(--surface); }

/* -------------------------------------------------------- status system */

/* Five states, each with an icon, a color and one word; demo keeps its violet. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 28px;
  padding: 3px 10px 3px 7px;
  border-radius: var(--r-pill);
  border: 1px solid var(--st-line);
  background: var(--st-soft);
  color: var(--st-ink);
  font-size: var(--t-1);
  font-weight: 600;
  line-height: 1.25;
  vertical-align: middle;
  justify-self: start;
  /* Never squeezed by its row: the words beside it wrap, the pill keeps one line. */
  flex-shrink: 0;
}
.status .icon { color: var(--st-icon); }
.status-word { min-width: 0; overflow-wrap: break-word; }
.status-small { min-height: 24px; padding: 1px 8px 1px 5px; font-size: var(--t-0); gap: 4px; }
.status-done { --st-ink: var(--good-ink); --st-icon: var(--good); --st-soft: var(--good-soft); --st-line: var(--good-line); }
.status-in-progress { --st-ink: var(--accent-strong); --st-icon: var(--accent); --st-soft: var(--accent-soft); --st-line: var(--accent-line); }
.status-needs-you { --st-ink: var(--caution-ink); --st-icon: var(--caution-strong); --st-soft: var(--caution-soft); --st-line: var(--caution-line); }
.status-blocked { --st-ink: var(--bad-ink); --st-icon: var(--bad-strong); --st-soft: var(--bad-soft); --st-line: var(--bad-line); }
.status-paused { --st-ink: var(--ink-2); --st-icon: var(--ink-3); --st-soft: var(--neutral-soft); --st-line: var(--neutral-line); }
.status-not-connected { --st-ink: var(--ink-2); --st-icon: var(--ink-3); --st-soft: var(--surface); --st-line: var(--line-control); }
.status.status-not-connected { border-style: dashed; }
.status-demo { --st-ink: var(--demo-ink); --st-icon: var(--demo); --st-soft: var(--demo-soft); --st-line: var(--demo-line); }

/* ---------------------------------------------------- the agents' roles */

/* What a role of the Agent Team is doing: one of six truthful states, each a
   mark with its icon and its words, never a color alone. */
.role-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 32px;
  padding: 4px 12px 4px 5px;
  border-radius: var(--r-pill);
  border: 1px solid var(--rs-line);
  background: var(--rs-soft);
  color: var(--rs-ink);
  font-size: var(--t-1);
  font-weight: 600;
  line-height: 1.25;
  vertical-align: middle;
  justify-self: start;
}
.role-state-mark {
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--rs-mark);
  color: var(--rs-on-mark);
}
.role-state-word { min-width: 0; overflow-wrap: break-word; }
.role-state-small { min-height: 28px; padding: 2px 10px 2px 3px; gap: 6px; }
.role-state-working { --rs-ink: var(--accent-strong); --rs-soft: var(--accent-soft); --rs-line: var(--accent-line); --rs-mark: var(--accent); --rs-on-mark: #ffffff; }
.role-state-waiting { --rs-ink: var(--ink-2); --rs-soft: var(--neutral-soft); --rs-line: var(--neutral-line); --rs-mark: var(--surface); --rs-on-mark: var(--ink-2); }
.role-state-ready { --rs-ink: var(--teal-ink); --rs-soft: var(--teal-soft); --rs-line: var(--teal-line); --rs-mark: var(--surface); --rs-on-mark: var(--teal); }
.role-state-needs-connection { --rs-ink: var(--caution-ink); --rs-soft: var(--caution-soft); --rs-line: var(--caution-line); --rs-mark: var(--surface); --rs-on-mark: var(--caution); }
.role-state.role-state-needs-connection { border-style: dashed; }
.role-state-paused { --rs-ink: var(--ink-2); --rs-soft: var(--surface); --rs-line: var(--line-control); --rs-mark: var(--neutral-soft); --rs-on-mark: var(--ink-2); }
.role-state-done { --rs-ink: var(--good-ink); --rs-soft: var(--good-soft); --rs-line: var(--good-line); --rs-mark: var(--good); --rs-on-mark: #ffffff; }
/* Live: only a role that is working now moves, a soft ring around its mark.
   A role that waits, is ready, paused or done never moves. */
.role-state-working .role-state-mark::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: role-live 2.4s ease-out infinite;
}
@keyframes role-live {
  0% { transform: scale(0.82); opacity: 0.55; }
  70% { transform: scale(1.3); opacity: 0; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* -------------------------------------------- KPI tiles, deltas, the band */

.kpi {
  position: relative;
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 14px 16px 12px;
  border-radius: var(--r-2);
  background: var(--tile);
  /* Its own width decides where the chip goes (below), whatever the page around it. */
  container: kpi / inline-size;
}
.kpi-label { font-size: var(--t-1); font-weight: 500; color: var(--ink-2); }
.kpi-has-tip .kpi-label { padding-right: 24px; }
.kpi-value { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.kpi-num { font-size: var(--t-num); font-weight: 600; line-height: 1.05; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; color: var(--ink); }
.kpi-unit { font-size: var(--t-2); color: var(--ink-3); }
.kpi-trend { display: block; min-width: 0; margin-top: 2px; color: var(--accent); }
.kpi-trend .spark svg { height: 30px; }
/* A trend with too few days, in the same slot, so the tiles of a row keep one height. */
.kpi-trend-none { display: flex; align-items: center; min-height: 30px; font-size: var(--t-1); color: var(--ink-3); }
.kpi-change { display: inline-flex; min-width: 0; }
/* What must be seen with the figure: a small sample under its chip, a position's scale under it. */
.kpi-note, .kpi-caption { font-size: var(--t-1); line-height: 1.35; color: var(--ink-3); }
.kpi-link { transition: background-color 0.15s ease; }
.kpi-link .kpi-label a { color: inherit; text-decoration: none; }
.kpi-link .kpi-label a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.kpi-link .kpi-label a:focus-visible { outline: none; }
.kpi-link:hover { background: var(--tile-hover); }
.kpi-link:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.kpi .tip-button { position: absolute; top: 2px; right: 2px; margin: 0; z-index: 2; }
.kpi .tip-body { position: relative; z-index: 2; }
@media (max-width: 639.98px) {
  .kpi { padding: 12px; }
  .kpi-num { font-size: var(--t-num-phone); }
  /* On a phone the chip has its own line under the number, in every tile of a row. */
  .kpi-change { flex-basis: 100%; }
}
/* So does a narrow tile on a wider screen (four tiles beside a rail): the tiles of a row share
   one width, so the chip sits under the number in all of them, never beside it in one and
   under it in the next. A note in words ("No fair comparison") is too long to sit beside a
   number reliably, so it always has its own line. */
.kpi-change-note { flex-basis: 100%; }
@container kpi (max-width: 199.98px) {
  .kpi-change { flex-basis: 100%; }
}

/* A change: its arrow (it follows the figure), then the figure and the verdict in words
   ("33%, worse"), whose last words move to a second line in a narrow tile; the corners stay
   round on two lines. A position has no arrow, only words ("was 11.3, worse"). */
.delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 26px;
  padding: 2px 9px 2px 6px;
  border-radius: 13px;
  background: var(--d-soft);
  color: var(--d-ink);
  font-size: var(--t-1);
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.delta .icon { flex: none; stroke-width: 2.25; }
.delta-text { min-width: 0; white-space: normal; }
.delta-words { padding-left: 9px; }
.delta-good { --d-soft: var(--good-soft); --d-ink: var(--good-ink); }
.delta-bad { --d-soft: var(--bad-soft); --d-ink: var(--bad-ink); }
.delta-flat { --d-soft: var(--neutral-soft); --d-ink: var(--ink-2); }
/* A change on a small sample: its size, hatched and outlined dashed, like the hatched bars. */
.delta-small {
  padding: 1px 8px 1px 5px;
  border: 1px dashed currentColor;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0 3px, rgba(255, 255, 255, 0) 3px 6px);
}
.delta-words.delta-small { padding-left: 8px; }
/* Why no change is shown ("No fair comparison"): words only, grey. */
.delta-note { padding: 2px 9px; font-weight: 500; }

/* The band: the status pill on its own row above the sentence, always in one
   place; the sentence never leaves one word alone on its last line. */
.band-line { display: grid; justify-items: start; gap: 8px; max-width: 72ch; font-size: var(--t-lead); line-height: 1.4; color: var(--ink); }
.band-text { min-width: 0; text-wrap: pretty; }
.band-meta { font-size: var(--t-1); color: var(--ink-3); }
.band-visual { display: grid; gap: 12px; min-width: 0; }
.kpi-row { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpi-row-1 { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 899.98px) { .kpi-row-3 > :first-child { grid-column: 1 / -1; } }
@media (min-width: 900px) {
  .kpi-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi-row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Info tips: a 44 px button, the note in the flow below it (never off the screen). */
.tip { display: inline-block; vertical-align: middle; }
.tip > summary { list-style: none; cursor: pointer; }
.tip > summary::-webkit-details-marker { display: none; }
.tip-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -12px; border-radius: 50%; color: var(--ink-3); }
.tip-button:hover, .tip[open] > .tip-button { color: var(--accent); }
.tip-body { max-width: 40ch; margin-top: 8px; padding: 10px 12px; border-radius: var(--r-2); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--e-floating); font-size: var(--t-1); font-weight: 400; color: var(--ink-2); }

/* ------------------------------------------------- parts of a whole */

.fill-c1 { --fill: var(--c1); --fill-ink: #ffffff; }
.fill-c2 { --fill: var(--c2); --fill-ink: #ffffff; }
.fill-c3 { --fill: var(--c3); --fill-ink: var(--ink); }
.fill-c4 { --fill: var(--c4); --fill-ink: #ffffff; }
.fill-c5 { --fill: var(--c5); --fill-ink: #ffffff; }
.fill-c6 { --fill: var(--c6); --fill-ink: var(--ink); }
.fill-done { --fill: var(--good); --fill-ink: #ffffff; }
.fill-in-progress { --fill: var(--accent); --fill-ink: #ffffff; }
.fill-needs-you { --fill: var(--caution-strong); --fill-ink: var(--ink); }
.fill-paused { --fill: #a3adbd; --fill-ink: var(--ink); }
.fill-blocked { --fill: var(--bad-strong); --fill-ink: #ffffff; }
.fill-not-connected { --fill: #dde3ee; --fill-ink: var(--ink); }
.fill-demo { --fill: var(--demo); --fill-ink: #ffffff; }
.fill-top-3 { --fill: var(--band-1); --fill-ink: #ffffff; }
.fill-top-10 { --fill: var(--band-2); --fill-ink: var(--ink); }
.fill-top-20 { --fill: var(--band-3); --fill-ink: var(--ink); }
.fill-beyond-20 { --fill: var(--band-4); --fill-ink: var(--ink); }
.fill-not-checked { --fill: #eef1f7; --fill-ink: var(--ink-2); }
.fill-error { --fill: var(--band-error); --fill-ink: #ffffff; }
/* Google Search positions: a blue ramp of their own, never the map's rank colors. */
.fill-pos-1 { --fill: #0f3d82; --fill-ink: #ffffff; }
.fill-pos-2 { --fill: #2d6cc4; --fill-ink: #ffffff; }
.fill-pos-3 { --fill: #8cb3e8; --fill-ink: var(--ink); }
.fill-pos-4 { --fill: #d4e3f7; --fill-ink: var(--ink); }
.swatch[class*="fill-"] { background: var(--fill); }
/* The palest parts keep an edge, so they never vanish on white. */
.swatch.fill-not-checked, .swatch.fill-not-connected, .swatch.fill-pos-4, .stack-seg.fill-not-checked, .stack-seg.fill-not-connected { box-shadow: inset 0 0 0 1px var(--line-strong); }

.stack-bar { display: flex; gap: 2px; width: 100%; height: 32px; border-radius: 8px; overflow: hidden; }
.stack-seg { display: flex; align-items: center; justify-content: center; flex: 0 1 auto; min-width: 4px; overflow: hidden; background: var(--fill); color: var(--fill-ink); font-size: var(--t-1); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.parts-legend { gap: 6px 18px; }
/* A linked entry is one quiet link (swatch, name and value): a 44 px target
   whose extra height overlaps the gap, so the rows stay about 26 px apart. */
.parts-legend-links { gap: 2px 18px; }
.parts-legend a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: -10px -6px;
  padding: 0 6px;
  border-radius: var(--r-1);
  color: var(--ink-2);
  text-decoration: none;
}
.parts-legend a .legend-name { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.parts-legend a:hover .legend-name { color: var(--accent); text-decoration-color: currentColor; }
.parts-legend a:hover { background: var(--tile); }
.parts-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--t-2); color: var(--ink); }
.chart-refused .chart-note { max-width: 68ch; }

.donut-body { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.donut-wrap { position: relative; flex: none; width: 168px; height: 168px; }
.donut-svg { display: block; width: 100%; height: 100%; }
.donut-track { fill: none; stroke: var(--neutral-soft); stroke-width: 6; }
.donut-seg { fill: none; stroke: var(--fill); stroke-width: 6; }
.donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; }
.donut-total { font-size: var(--t-6); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.donut-unit { font-size: var(--t-1); color: var(--ink-3); }
.donut .parts-legend { display: grid; gap: 8px; }

/* --------------------------------------------------- diverging bars */

.dv-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dv-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
.dv-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; font-size: var(--t-2); color: var(--ink); }
.dv-label { min-width: 0; overflow-wrap: break-word; }
.dv-label a { display: inline-flex; align-items: center; min-height: 44px; }
.dv-note { font-size: var(--t-1); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dv-track { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; min-width: 0; }
.dv-side { display: flex; align-items: center; gap: 6px; min-width: 0; height: 24px; }
.dv-left { justify-content: flex-end; padding-right: 0; border-right: 1px solid var(--line-control); }
.dv-right { justify-content: flex-start; }
.dv-bar { display: block; flex: none; height: 12px; min-width: 2px; }
.dv-left .dv-bar { border-radius: 6px 0 0 6px; background-color: var(--dv-loss); }
.dv-right .dv-bar { border-radius: 0 6px 6px 0; background-color: var(--dv-gain); }
.dv-num { flex: none; font-size: var(--t-1); font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.dv-left .dv-num { margin-right: 2px; }
.dv-right .dv-num { margin-left: 2px; }
.dv-none .dv-num { font-weight: 400; color: var(--ink-3); }
/* The neutral mode (periods that do not compare fairly): both sides one grey, judging neither. */
.dv-neutral .dv-left .dv-bar, .dv-neutral .dv-right .dv-bar { background-color: var(--dv-neutral); }
.dv-faded .dv-bar { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0 3px, rgba(255, 255, 255, 0) 3px 6px); opacity: 0.75; }
/* Held to about 760 px, so a name, its bar and its number read as one row on a wide screen. */
.chart.dv { max-width: 760px; }
.dv-key { font-size: var(--t-0); font-weight: 500; color: var(--ink-3); }
.dv-key .dv-track > span { padding: 0 6px; }
.dv-key-loss { text-align: right; }
@media (min-width: 640px) {
  .dv-row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: 16px; }
}
/* From 900 px the names and the bars get equal room (a name is rarely squeezed onto three
   lines), and the quiet note ("63 now") stays on the name's line instead of a line of its own. */
@media (min-width: 900px) {
  .dv-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dv-name { flex-wrap: nowrap; }
  .dv-label { flex: 0 1 auto; }
  .dv-note { flex: none; white-space: nowrap; }
}

/* ------------------------------------------------- before and after */

.ba-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.ba-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; font-size: var(--t-2); color: var(--ink); }
.ba-label { min-width: 0; overflow-wrap: break-word; }
.ba-label a { display: inline-flex; align-items: center; min-height: 44px; }
.ba-pair { display: grid; gap: 4px; margin-top: 6px; }
.ba-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ba-bar { display: block; flex: none; height: 10px; min-width: 2px; border-radius: 5px; }
.ba-before { background: var(--ba-before); }
.ba-after { background: var(--ba-after); }
.ba-num { flex: none; font-size: var(--t-1); font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ba-swatch-before { background: var(--ba-before); }
.ba-swatch-after { background: var(--ba-after); }

/* --------------------------------------------------------- the flow */

/* The six stages of the agents' work (Research, Plan, Write, Review, Publish,
   Measure), or a caller's own stages. The list measures its own width: one
   column when narrow (a phone), rows of half the stages when wider, one row
   when all fit. A chevron joins each stage to the next. */
.flow { container: flow / inline-size; display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; list-style: none; }
.flow-step { position: relative; flex: 1 1 100%; min-width: 0; }
.flow-node {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-areas: "icon name count" "icon state state";
  align-items: center;
  gap: 2px 12px;
  height: 100%;
  min-height: 64px;
  padding: 12px 14px;
  border-radius: var(--r-2);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  text-decoration: none;
}
a.flow-node:hover { background: var(--surface-warm); box-shadow: inset 0 0 0 1px var(--line-control); color: var(--ink); }
.flow-icon { grid-area: icon; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--area-soft); color: var(--area-ink); }
.flow-name { grid-area: name; font-size: var(--t-2); font-weight: 600; }
.flow-count { grid-area: count; font-size: var(--t-5); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.flow-state { grid-area: state; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-size: var(--t-1); color: var(--ink-3); }
.flow-step.is-empty .flow-count, .flow-step.is-empty .flow-name { color: var(--ink-3); }
.flow-step.is-empty .flow-icon { background: var(--neutral-soft); color: var(--ink-3); }
.flow-step.is-current .flow-node { box-shadow: inset 0 0 0 2px var(--accent); }
.flow-step.is-current .flow-icon { background: var(--accent); color: #ffffff; }
/* A custom stage without an icon shows its number. */
.flow-num { font-size: var(--t-2); font-weight: 600; font-variant-numeric: tabular-nums; }
/* The connector: a chevron pointing down between the stages of a column. */
.flow-step + .flow-step::before {
  content: "";
  position: absolute;
  left: 30px;
  top: -13px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--line-control);
  border-bottom: 2px solid var(--line-control);
  transform: rotate(45deg);
}
/* A phone's width (240 to 519 px of its own): rows of two small tiles, so six stages take
   three short rows instead of a screen of tall ones. Three to a row would leave a stage about
   75 px, too little for its name and its state at 14 px. */
@container flow (min-width: 240px) and (max-width: 519.98px) {
  .flow-step { flex: 0 0 calc((100% - 16px) / 2 - 0.5px); }
  .flow-node { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "icon count" "name name" "state state"; align-items: start; align-content: start; gap: 4px 8px; min-height: 0; padding: 10px 12px; }
  .flow-icon { width: 32px; height: 32px; }
  .flow-count { font-size: var(--t-4); line-height: 32px; }
  .flow-name { overflow-wrap: break-word; }
  .flow-step + .flow-step::before { left: -13px; top: 22px; border-bottom: 0; border-top: 2px solid var(--line-control); }
  .flow > .flow-step:nth-child(2n + 1)::before { display: none; }
}
@container flow (min-width: 520px) {
  /* Rows of half the stages (three and three for the six), each a small card. */
  .flow-step { flex: 0 0 calc((100% - (var(--flow-row, 3) - 1) * 16px) / var(--flow-row, 3) - 0.5px); }
  .flow-node { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "icon count" "name name" "state state"; align-items: start; align-content: start; gap: 8px; min-height: 132px; padding: 16px; }
  /* The chevron points right, in the gap before the stage; a row's first stage has none. */
  .flow-step + .flow-step::before { left: -13px; top: 32px; border-bottom: 0; border-top: 2px solid var(--line-control); }
  .flow[data-flow-row="2"] > .flow-step:nth-child(2n + 1)::before,
  .flow[data-flow-row="3"] > .flow-step:nth-child(3n + 1)::before,
  .flow[data-flow-row="4"] > .flow-step:nth-child(4n + 1)::before { display: none; }
}
@container flow (min-width: 900px) {
  /* One row: every stage beside the next. */
  .flow[data-flow-size="few"] > .flow-step { flex: 1 1 0; }
  .flow[data-flow-size="few"] > .flow-step + .flow-step::before { display: block; }
}
@container flow (min-width: 1160px) {
  /* Seven or eight stages need more room for one row. */
  .flow[data-flow-size="many"] > .flow-step { flex: 1 1 0; }
  .flow[data-flow-size="many"] > .flow-step + .flow-step::before { display: block; }
}

/* ------------------------------------------------------------ stepper */

.stepper { display: grid; margin: 0; padding: 0; list-style: none; }
/* A step stretched by its row keeps its mark and label at the top, so labels line up. */
.step { position: relative; display: grid; align-content: start; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
.step:last-child { padding-bottom: 0; }
.step::before { content: ""; position: absolute; left: 15px; top: 36px; bottom: 4px; width: 2px; background: var(--line-strong); }
.step:last-child::before { display: none; }
.step-done::before { background: var(--good); }
.step-mark { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 2px var(--line-strong); font-size: var(--t-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.step-done .step-mark { background: var(--good); color: #ffffff; box-shadow: none; }
.step-current .step-mark { background: var(--accent); color: #ffffff; box-shadow: 0 0 0 4px var(--accent-soft); }
.step-body { display: grid; gap: 2px; min-width: 0; padding-top: 4px; }
.step-label { font-size: var(--t-2); font-weight: 500; color: var(--ink); overflow-wrap: break-word; }
/* A step's link: a 44 px target whose extra height (12 px above and below) is taken back by its
   margins, so it holds exactly the room of its words, also when a long label wraps to two lines
   (an inline flex box let the second line run over the note under it). */
.step-label a { display: inline-block; min-height: 44px; padding: 12px 0; margin: -12px 0; }
/* A step's link to another site (StepItem.external): its icon a little apart from the last word. */
.step-label a > .icon-external { margin-left: 4px; vertical-align: -2px; }
.step-current .step-label { font-weight: 600; }
.step-next .step-label { color: var(--ink-2); }
.step-note { font-size: var(--t-1); color: var(--ink-3); }
/* Where the work stands when it does not move: held for you, waiting, or stopped. */
.step-held .step-mark { background: var(--caution-soft); color: var(--caution-ink); box-shadow: inset 0 0 0 2px var(--caution-strong); }
.step-waiting .step-mark { background: var(--neutral-soft); color: var(--ink-2); box-shadow: inset 0 0 0 2px var(--ink-3); }
.step-stopped .step-mark { background: var(--surface); color: var(--ink-3); box-shadow: inset 0 0 0 2px var(--ink-3); }
.step-held .step-label, .step-waiting .step-label, .step-stopped .step-label { font-weight: 600; }

/* The one-line stepper of a list row: dots joined by a line, the states in words for screen readers. */
.stepper-compact { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.step-dots { display: inline-flex; flex: none; align-items: center; }
.step-dot { position: relative; display: block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.step-dot + .step-dot { margin-left: 10px; }
.step-dot + .step-dot::before { content: ""; position: absolute; right: 10px; top: 4.5px; width: 10px; height: 1px; background: var(--line-strong); }
.step-dot-done { background: var(--good); }
.step-dot-current { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.step-dot-held { background: var(--caution-strong); box-shadow: 0 0 0 3px var(--caution-soft); }
.step-dot-waiting { background: var(--ink-3); box-shadow: 0 0 0 3px var(--neutral-soft); }
.step-dot-stopped { background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink-3); }
.step-caption { font-size: var(--t-1); color: var(--ink-2); }
@media (min-width: 640px) {
  .stepper { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .step { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 8px; padding: 0 12px 0 0; }
  .step:last-child { padding-right: 0; }
  .step::before { left: 42px; right: 10px; top: 15px; bottom: auto; width: auto; height: 2px; }
  .step-body { padding-top: 0; }
}

/* ------------------------------------------------------- day timeline */

/* The timeline is laid out by its own width (a container), so a timeline in a card's narrow
   column reads as well as one across the page. It always fills its column. */
.days { container: days / inline-size; display: grid; gap: 20px; min-width: 0; justify-self: stretch; }
.day-head { margin: 0 0 6px; font-size: var(--t-1); font-weight: 600; color: var(--ink-2); }
.day-events { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ev { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 12px; padding: 6px 0; }
.ev-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--st-soft, var(--neutral-soft)); color: var(--st-icon, var(--ink-2)); }
/* Time and text in two columns, so every line starts at the same place. */
.ev-line { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); align-items: baseline; gap: 2px 10px; min-width: 0; padding-top: 4px; font-size: var(--t-2); color: var(--ink); }
.ev-time { grid-column: 1; font-size: var(--t-1); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev-text { grid-column: 2; min-width: 0; overflow-wrap: break-word; }
.ev-chip { grid-column: 2; justify-self: start; }
/* A narrow timeline (under 400 px of its own: a phone, a card's column): the time stands above
   its words, so the words keep the whole width and never break inside a word (at 320 px the
   column beside the time was 83 px, "Maintenance" broke in two and one line was 700 px tall). */
@container days (max-width: 399.98px) {
  .ev-line { grid-template-columns: minmax(0, 1fr); }
  .ev-time, .ev-text, .ev-chip { grid-column: 1; }
}
/* A linked line is a 44 px target whose padding is taken back by its margin,
   so the line keeps the height of its words, one line or several: its first
   line stays level with its icon and its time, and a chip under it never
   overlaps it. */
.ev-text a { display: block; min-height: 44px; padding: 10px 0; margin: -10px 0; }
.ev-chip { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--r-pill); background: var(--neutral-soft); color: var(--ink-2); font-size: var(--t-0); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- ring, meter */

/* The number sits over the ring as text of its own, so it is 14 px or more at any ring size. */
.ring { display: inline-grid; justify-items: center; gap: 4px; text-align: center; }
.ring-wrap { position: relative; display: inline-grid; place-items: center; }
.ring-svg { display: block; }
.ring-track { fill: none; stroke: var(--neutral-soft); stroke-width: 10; }
.ring-value { fill: none; stroke: var(--st-icon, var(--accent)); stroke-width: 10; stroke-linecap: round; }
.ring-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(14px, calc(var(--ring-size, 96px) * 0.24), 28px); font-weight: 600; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.ring-none { font-size: 14px; font-weight: 500; color: var(--ink-3); }
.ring-label { max-width: 18ch; font-size: var(--t-1); font-weight: 500; color: var(--ink-2); }
.ring-caption { font-size: var(--t-1); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* A measure (effort, risk, confidence): neutral ink, never a status color. */
.meter { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-1); color: var(--ink-2); }
.meter-label { font-weight: 500; }
.meter-bars { display: inline-flex; align-items: flex-end; gap: 2px; }
.meter-bars span { display: block; width: 6px; border-radius: 2px; background: var(--line-strong); }
.meter-bars span:nth-child(1) { height: 8px; }
.meter-bars span:nth-child(2) { height: 12px; }
.meter-bars span:nth-child(3) { height: 16px; }
.meter-bars .on { background: var(--ink-2); }
.meter-word { font-weight: 500; color: var(--ink); }

/* ------------------------------------------------------ illustrations */

/* Original drawings: thin slate lines, white paper, and the area's own accent
   and tint (a drawing may name its area with data-area). No words are drawn. */
.art { display: block; width: 160px; max-width: 100%; height: auto; color: var(--ink-3); }
.art-lg { width: 240px; }
.art-paper { fill: var(--surface); stroke: var(--ink-3); }
.art-line { stroke: var(--ink-3); }
.art-faint { stroke: var(--line-strong); }
.art-accent { stroke: var(--area); stroke-width: 2.5; }
.art-soft { fill: var(--area-soft); stroke: none; }
.art-soft-line { fill: var(--area-soft); stroke: var(--area); stroke-width: 1.5; }
.art-fill { fill: var(--area); stroke: none; }
.art-ground { fill: var(--area-soft); stroke: none; opacity: 0.7; }
.art-sand { fill: var(--amber-soft); stroke: var(--ink-3); stroke-width: 1.5; }
.art-lens { fill: rgba(255, 255, 255, 0.9); stroke: var(--area); stroke-width: 2.5; }
.art-good { fill: var(--good-soft); stroke: var(--good); stroke-width: 1.5; }
.art-tick { stroke: var(--good); stroke-width: 2; }
.art-dash { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 3 3; }
.art-dot { fill: var(--ink-3); stroke: none; }
.art-dot-soft { fill: var(--line-strong); stroke: none; }
.art-bar { fill: var(--area-soft); stroke: var(--area); stroke-width: 1.5; }
.art-bar-strong { fill: var(--area); stroke: var(--area); stroke-width: 1.5; }
.art-pin { fill: var(--area); stroke: var(--surface); stroke-width: 2; }
.art-route { stroke: var(--area); stroke-width: 2; stroke-dasharray: 5 4; }
.art-pinhead { fill: var(--area); stroke: var(--area-ink); stroke-width: 1.5; }
.art-pindot { fill: var(--surface); stroke: none; }
.art-white { fill: var(--surface); stroke: none; }
.art-white-line { stroke: var(--surface); stroke-width: 2; }
/* Home's six marks in their area's real state (fix round 4): amber where something needs the owner,
   dashed where only a connection is to arrange (the Needs-you list says both in words). */
.art-hub-need { fill: var(--caution-soft); stroke: var(--caution-strong); stroke-width: 2.25; }
.art-hub-link { fill: var(--surface); stroke-dasharray: 3 3; }
.empty-art { justify-items: center; padding: 32px 24px; text-align: center; border-style: solid; border-color: var(--line); }
.empty-art > p { max-width: 52ch; }
.empty-art > .status { justify-self: center; }

/* --------------------------------------------- list rows, the action rail */

.rows { display: grid; margin: 0; padding: 0; list-style: none; }
.rows > li + li { border-top: 1px solid var(--line); }
.row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 4px; color: var(--ink); text-decoration: none; }
a.row:hover { background: var(--tile); color: var(--ink); }
.row-start { flex: none; display: inline-flex; align-items: center; }
.row-text { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.row-title { font-size: var(--t-2); font-weight: 500; overflow-wrap: break-word; }
.row-meta { font-size: var(--t-1); color: var(--ink-3); }
.row-end { flex: none; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-variant-numeric: tabular-nums; }
.row-chevron { color: var(--ink-3); }
/* The split rows: on a phone the end (the figures) goes under the title, which keeps the width. */
@media (max-width: 639.98px) {
  .rows-split .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text chevron" "end chevron"; align-items: center; column-gap: 12px; row-gap: 4px; }
  .rows-split .row.has-start { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "start text chevron" "start end chevron"; }
  .rows-split .row-start { grid-area: start; }
  .rows-split .row-text { grid-area: text; }
  .rows-split .row-end { grid-area: end; justify-self: start; flex-wrap: wrap; font-weight: 500; }
  .rows-split .row-chevron { grid-area: chevron; }
}

/* The rail comes first on a phone; on a computer it takes the right 4 of 12 columns. */
.with-rail { display: grid; gap: 24px; min-width: 0; }
.rail { min-width: 0; }
/* The main column stacks its panels with a section gap, never touching. */
.rail-main { display: grid; align-content: start; gap: 24px; min-width: 0; }
@media (min-width: 760px) { .rail-main { gap: 32px; } }
.rail-panel { gap: 12px; }
.rail-title { font-size: var(--t-lead); font-weight: 600; line-height: 1.3; text-wrap: pretty; }
.rail-text { font-size: var(--t-2); color: var(--ink-2); text-wrap: pretty; }
.rail-needs { display: grid; gap: 6px; }
.rail-needs-label { font-size: var(--t-1); font-weight: 500; color: var(--ink-2); }
.rail-needs-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--t-2); color: var(--ink); }
.rail-needs-list li { display: flex; align-items: baseline; gap: 8px; }
.rail-needs-list li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 0.6em; align-self: flex-start; border-radius: 50%; background: var(--caution-strong); }
.rail-action { display: flex; flex-wrap: wrap; gap: 8px; }
.rail-action .btn { flex: 1 1 auto; }
.rail-after { font-size: var(--t-1); color: var(--ink-3); }
@media (min-width: 1024px) {
  .with-rail { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); grid-template-areas: "main rail"; align-items: start; gap: 32px; }
  .rail { grid-area: rail; }
  .rail-main { grid-area: main; }
}

/* ---------------------------------------------------------- region map */

.rmap { display: grid; gap: 12px; min-width: 0; margin: 0; }
.rmap-frame { position: relative; width: 100%; max-width: calc(600px * var(--rmap-aspect, 1)); aspect-ratio: var(--rmap-aspect, 1); margin: 0 auto; overflow: hidden; border-radius: var(--r-2); background: var(--map-water); box-shadow: inset 0 0 0 1px var(--line); }
.rmap-no-outline .rmap-frame { background: var(--surface-warm); }
.rmap-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; }
/* Water over land has no outline of its own (its edges reach into the open Gulf). */
.rmap-water, .rmap-sea { fill: var(--map-water); stroke: none; }
.rmap-plain { fill: var(--surface-warm); }
.rmap-land { fill: var(--map-land); stroke: var(--map-coast); stroke-width: 1.2; stroke-linejoin: round; }
.rmap-river { fill: none; stroke: var(--map-water); stroke-linecap: round; stroke-linejoin: round; }
.rmap-grat { fill: none; stroke: rgba(23, 34, 56, 0.08); stroke-width: 1; }
/* Every bubble keeps a 2 px white edge at any size, so two that overlap read as two. */
.rmap-bubble { fill-opacity: 0.88; stroke: #ffffff; stroke-width: 2; vector-effect: non-scaling-stroke; }
/* A name set apart from its bubble is joined to it by a short line. */
.rmap-leader { stroke: var(--ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rmap-bubble.chg-down-2 { fill: var(--chg-down-2); }
.rmap-bubble.chg-down-1 { fill: var(--chg-down-1); }
.rmap-bubble.chg-flat { fill: var(--chg-flat); }
.rmap-bubble.chg-up-1 { fill: var(--chg-up-1); }
.rmap-bubble.chg-up-2 { fill: var(--chg-up-2); }
.rmap-bubble.chg-unknown { fill: var(--chg-unknown); fill-opacity: 1; stroke: #8a94a6; stroke-dasharray: 3 2; }
/* A change on a small sample: its color, pale, with a dashed edge in that color (the hatched
   chips' and bars' rule), so it never reads like a solid rise or fall. */
.rmap-bubble.rmap-small { fill-opacity: 0.4; stroke-width: 1.5; stroke-dasharray: 3 2; }
.rmap-bubble.rmap-small.chg-down-2 { stroke: var(--chg-down-2); }
.rmap-bubble.rmap-small.chg-down-1 { stroke: #c97a84; }
.rmap-bubble.rmap-small.chg-flat { stroke: #8f9aae; }
.rmap-bubble.rmap-small.chg-up-1 { stroke: #5aa57f; }
.rmap-bubble.rmap-small.chg-up-2 { stroke: var(--chg-up-2); }
/* A map whose bubbles show no change: one plain fill, the size key's own. */
.rmap-bubble.rmap-bubble-plain { fill: var(--chg-flat); }
.rmap-bubble.rmap-hollow { fill: #ffffff; fill-opacity: 1; stroke: var(--ink-3); stroke-dasharray: 2 2; }
.rmap-arrow { display: inline-flex; margin-left: 2px; vertical-align: -1px; }
.rmap-arrow .icon { stroke-width: 2.75; }
.rmap-arrow-up { color: var(--good); }
.rmap-arrow-down { color: var(--bad); }
.rmap-pt { stroke: #ffffff; stroke-width: 1.2; }
.rmap-pt.band-top-3 { fill: var(--band-1); }
.rmap-pt.band-top-10 { fill: var(--band-2); }
.rmap-pt.band-top-20 { fill: var(--band-3); }
.rmap-pt.band-beyond-20 { fill: var(--band-4); stroke: #9aa5b8; }
.rmap-pt.band-not-checked { fill: #ffffff; stroke: #8a94a6; stroke-dasharray: 2 1.5; }
.rmap-pt.band-error { fill: #ffffff; stroke: var(--band-error); stroke-width: 2; }
/* An illustration's spots: one neutral grey, never a rank color. */
.rmap-pt.band-plain { fill: #b3bbc8; stroke: #ffffff; }
/* The mark inside a spot, so a band is told by shape too: a ring for 4 to 10, a white upper
   half for 11 to 20, a dash for beyond the top 20 (the top 3 is a full dot). */
.rmap-mark { pointer-events: none; }
.rmap-mark-hole, .rmap-mark-half { fill: #ffffff; }
.rmap-mark-dash { stroke: var(--ink-2); stroke-width: 2px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rmap-tags { position: absolute; inset: 0; pointer-events: none; }
.rmap-tag {
  position: absolute;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  text-shadow: 0 0 2px #ffffff, 0 0 3px #ffffff, 0 0 4px #ffffff;
  /* One line where it fits, and never past the frame's edge on a map narrower than the one its
     place was chosen for: the room on its side of its anchor (--tx), where it wraps (its arrow
     under it) instead of being cut off. */
  width: max-content;
  max-width: var(--tag-room, none);
  overflow-wrap: normal;
}
.rmap-tag-right, .rmap-tag-top-right, .rmap-tag-bottom-right { --tag-room: calc(100% - var(--tx, 0%) - 4px); }
.rmap-tag-left, .rmap-tag-top-left, .rmap-tag-bottom-left { --tag-room: calc(var(--tx, 100%) - 4px); }
.rmap-tag-top, .rmap-tag-bottom { --tag-room: calc(2 * min(var(--tx, 50%), 100% - var(--tx, 50%)) - 4px); }
.rmap-tag-right { transform: translate(3px, -50%); }
.rmap-tag-left { transform: translate(calc(-100% - 3px), -50%); }
.rmap-tag-top { transform: translate(-50%, calc(-100% - 3px)); }
.rmap-tag-bottom { transform: translate(-50%, 3px); }
.rmap-tag-top-right { transform: translate(1px, calc(-100% - 1px)); }
.rmap-tag-top-left { transform: translate(calc(-100% - 1px), calc(-100% - 1px)); }
.rmap-tag-bottom-right { transform: translate(1px, 1px); }
.rmap-tag-bottom-left { transform: translate(calc(-100% - 1px), 1px); }
/* A name of two words on two lines, aligned toward its bubble. */
.rmap-tag-line { display: block; }
.rmap-tag-two.rmap-tag-left, .rmap-tag-two.rmap-tag-top-left, .rmap-tag-two.rmap-tag-bottom-left { text-align: right; }
.rmap-tag-two.rmap-tag-top, .rmap-tag-two.rmap-tag-bottom { text-align: center; }
.rmap-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: var(--t-1); color: var(--ink-2); }
.rmap-key-item { display: inline-flex; align-items: center; gap: 6px; }
/* The color key says what it compares, then its ends. */
.rmap-key-change { flex-wrap: wrap; gap: 4px 8px; }
.rmap-key-ramp { display: inline-flex; align-items: center; gap: 6px; }
.rmap-caption { font-size: var(--t-1); color: var(--ink-2); }
/* A place's link in "Show the numbers" is a 44 px target: the row's padding is its own (12 px above
   and below, taken back by its margins), so the row keeps its height and no target meets the next. */
.rmap .table a { display: inline-block; min-height: 44px; padding: 12px 0; margin: -12px 0; }
.rmap-key-size circle { fill: var(--chg-flat); stroke: #ffffff; stroke-width: 1.5; }
.rmap-ramp { display: inline-flex; }
.rmap-sw { display: inline-block; width: 16px; height: 10px; }
.rmap-ramp .rmap-sw:first-child { border-radius: 5px 0 0 5px; }
.rmap-ramp .rmap-sw:last-child { border-radius: 0 5px 5px 0; }
.rmap-sw.chg-down-2 { background: var(--chg-down-2); }
.rmap-sw.chg-down-1 { background: var(--chg-down-1); }
.rmap-sw.chg-flat { background: var(--chg-flat); }
.rmap-sw.chg-up-1 { background: var(--chg-up-1); }
.rmap-sw.chg-up-2 { background: var(--chg-up-2); }
.rmap-sw.chg-unknown { width: 12px; height: 12px; border-radius: 50%; background: var(--chg-unknown); box-shadow: inset 0 0 0 1px #8a94a6; }
.rmap-sw-small { width: 12px; height: 12px; border: 1.5px dashed var(--ink-3); border-radius: 50%; background: rgba(197, 206, 221, 0.4); }
.rmap-sw-dot { width: 14px; height: 14px; border-radius: 50%; }
/* The key draws each band's mark as the map does: full, ring, upper half white, dash. */
.rmap-sw-dot.band-top-3 { background: var(--band-1); }
.rmap-sw-dot.band-top-10 { background: radial-gradient(circle, #ffffff 0 38%, var(--band-2) 41%); }
.rmap-sw-dot.band-top-20 { background: radial-gradient(circle, transparent 0 58%, var(--band-3) 61%), linear-gradient(to bottom, #ffffff 50%, var(--band-3) 50%); }
.rmap-sw-dot.band-beyond-20 { background: linear-gradient(var(--ink-2), var(--ink-2)) center / 7px 2px no-repeat, var(--band-4); }
.rmap-sw-dot.band-not-checked { background: #ffffff; box-shadow: inset 0 0 0 1.5px #8a94a6; }
.rmap-sw-dot.band-error { background: #ffffff; box-shadow: inset 0 0 0 2px var(--band-error); }
.rmap-sw-dot.band-plain { background: #b3bbc8; }


/* -------------------------------------------------------- the area hero */

.hero { container: hero / inline-size; position: relative; display: grid; min-width: 0; margin: 0 0 32px; }
@media (min-width: 1024px) { .hero { margin-bottom: 40px; } }
.hero-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 20px;
  min-width: 0;
  padding: 24px 16px 20px;
  border-radius: var(--r-4);
  border: 1px solid var(--area-line);
  background: linear-gradient(140deg, var(--area-soft) 0%, var(--surface) 70%);
  box-shadow: var(--e-raised);
}
/* The area's short bar at the top left, as the summary band has. */
.hero-stage::after {
  content: "";
  position: absolute;
  left: 24px;
  top: -1px;
  width: 56px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--area);
}
.hero-top { display: grid; gap: 20px; min-width: 0; }
.hero-visual { min-width: 0; }
.hero-needs { position: relative; z-index: 1; min-width: 0; margin-top: 12px; }
/* The header: the shared page header, its actions under the sentence at every width. */
.hero .page-header { margin: 0; gap: 14px; }
.hero .page-header.has-actions { grid-template-columns: minmax(0, 1fr); align-items: start; }
.hero .page-header.has-actions .page-meta { grid-column: auto; }
.hero .page-header.meta-first.has-actions .page-actions, .hero .page-header.meta-first.has-actions .page-meta { grid-column: auto; grid-row: auto; }
.hero .page-title { font-size: var(--t-hero-phone); line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }
.hero .answer { max-width: 56ch; }
/* The drawing in its frame; hidden on the narrowest stages, where the words come first. */
.hero-art { --art-size: 176px; position: relative; isolation: isolate; display: block; justify-self: end; width: var(--art-size); }
.hero .hero-art { display: none; }
.hero-art::before {
  content: "";
  position: absolute;
  inset: -36px -44px;
  z-index: -1;
  background: var(--hero-pattern, none);
  -webkit-mask-image: radial-gradient(closest-side, #000000 40%, transparent);
  mask-image: radial-gradient(closest-side, #000000 40%, transparent);
  pointer-events: none;
}
.hero-art-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--art-size);
  height: var(--art-size);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--area-line), 0 12px 28px -8px var(--area-glow);
  margin: 0 auto;
}
.hero-art-frame .art { width: calc(var(--art-size) - 40px); }
/* Home's hub on a narrow stage (follow-up): a small round copy beside the title, in the icon tile's
   place, so a phone keeps the drawing of where each area stands; from 560 px the tile steps aside
   for the large one, as every hero's does. */
[data-area] .page-icon.page-icon-art { width: 72px; height: 72px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--area-line); }
.page-icon.page-icon-art::before { content: none; }
.page-icon-art .art { width: 72px; }
@container hero (min-width: 560px) {
  .hero-top { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 24px; }
  .hero .hero-art { display: block; }
  .hero:not(.hero-no-art) .page-icon { display: none; }
}
@container hero (min-width: 760px) {
  .hero-stage { padding: 32px 32px 28px; gap: 24px; }
  .hero .page-title { font-size: var(--t-hero); }
  .hero .answer { font-size: var(--t-hero-lead); }
  .hero.has-needs .hero-stage { padding-bottom: 68px; }
  .hero-needs { margin: -44px 28px 0; }
}
@container hero (min-width: 960px) {
  .hero-art { --art-size: 212px; margin-right: 12px; }
}
/* (fix round 4c) A visual summary a screen keeps off a phone (AreaHeroOptions.visualOnPhone
   'hidden'), under 560 px of the window, where the screens' own phone copies show after the
   Needs-you card: not drawn, so the stage keeps no empty row and no gap above the card. */
@media (max-width: 559.98px) {
  .hero.hero-visual-wide > .hero-stage > .hero-visual { display: none; }
}

/* Each area's frame and pattern: coordinated, never identical. */
.hero-art[data-area="home"] { --hero-pattern: radial-gradient(circle, transparent 0 46%, var(--area-line) 46.4% 47%, transparent 47.4% 62%, var(--area-wash) 62.4% 64%, transparent 64.4%); }
.hero-art[data-area="local-map"] { --hero-pattern: linear-gradient(var(--area-line) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, var(--area-line) 1px, transparent 1px) 0 0 / 22px 22px; }
.hero-art[data-area="local-map"] .hero-art-frame { border-radius: 36px; transform: rotate(-3deg); }
.hero-art[data-area="google"] { --hero-pattern: repeating-linear-gradient(180deg, transparent 0 16px, var(--area-line) 16px 18px); }
.hero-art[data-area="google"] .hero-art-frame { border-radius: 22px; padding-top: 22px; }
.hero-art[data-area="google"] .hero-art-frame::before {
  content: "";
  position: absolute;
  inset: 2px 2px auto;
  height: 26px;
  border-radius: 20px 20px 0 0;
  background: radial-gradient(circle at 18px 13px, var(--area) 0 4px, transparent 4.5px), radial-gradient(circle at 34px 13px, var(--area-line) 0 4px, transparent 4.5px), radial-gradient(circle at 50px 13px, var(--area-line) 0 4px, transparent 4.5px), var(--area-soft);
}
.hero-art[data-area="ai"] { --hero-pattern: radial-gradient(var(--area-line) 0 1.6px, transparent 2.2px) 0 0 / 16px 16px; }
.hero-art[data-area="ai"] .hero-art-frame { border-radius: 46% 46% 46% 14%; }
.hero-art[data-area="team"] { --hero-pattern: repeating-linear-gradient(135deg, var(--area-wash) 0 3px, transparent 3px 14px); }
.hero-art[data-area="team"] .hero-art-frame { box-shadow: inset 0 0 0 3px var(--area), 0 12px 28px -8px var(--area-glow); }
.hero-art[data-area="team"] .hero-art-frame::after {
  content: "";
  position: absolute;
  inset: -24px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 7px, var(--area) 0 6px, transparent 6.5px), radial-gradient(circle at 10% 74%, var(--area-line) 0 6px, transparent 6.5px), radial-gradient(circle at 90% 74%, var(--area-line) 0 6px, transparent 6.5px);
  pointer-events: none;
}
.hero-art[data-area="articles"] { --hero-pattern: repeating-linear-gradient(180deg, transparent 0 21px, var(--area-line) 21px 22px); }
.hero-art[data-area="articles"] .hero-art-frame { width: calc(var(--art-size) * 0.84); border-radius: 14px; transform: rotate(2deg); box-shadow: inset 0 0 0 2px var(--area-line), 10px 10px 0 -2px var(--area-soft), 10px 10px 0 0 var(--area-line), 0 12px 28px -8px var(--area-glow); }
.hero-art[data-area="opportunities"] .hero-art-frame::before { content: ""; position: absolute; inset: -22px; z-index: -1; border-radius: 50%; background: repeating-conic-gradient(var(--area-line) 0 7deg, transparent 7deg 22.5deg); }
.hero-art[data-area="setup"] .hero-art-frame { border-radius: 30px; }

/* ------------------------------------------------------------- needs you */

.needs { display: grid; gap: 12px; min-width: 0; }
.needs-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.needs-title { font-size: var(--t-4); letter-spacing: -0.015em; }
@media (min-width: 760px) { h2.needs-title { font-size: var(--t-h2); } }
.needs-counts { margin: 0; font-size: var(--t-1); font-weight: 600; color: var(--ink-2); }
.needs-count { font-size: var(--t-1); font-weight: 600; color: var(--ink-2); }
.needs-count-waiting { font-weight: 500; }
.needs-more-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.needs-rest { margin: 0; }
/* The rest link is one phrase of running text ("And 6 more: 3 need you, 3 not connected", then its
   arrow), so on a narrow screen it wraps as words do, never into columns (a flex box made each of
   its parts a column of its own at 320 px). Its 44 px target is its line and padding. */
.needs-rest-link { display: inline-block; min-height: 44px; padding: 11px 4px; line-height: 22px; font-size: var(--t-2); font-weight: 600; color: var(--area-ink); }
.needs-rest-link:hover { color: var(--ink); }
.needs-rest-link > .icon { margin-left: 6px; vertical-align: -3px; }

.need {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px 16px;
  min-width: 0;
  container: need / inline-size;
  padding: 16px 16px 12px;
  border-radius: var(--r-3);
  border: 1px solid var(--area-line);
  background: var(--surface);
  box-shadow: var(--e-raised);
}
/* The card that matters most: lifted, the area's bar at its left, a breath of its tint at the top. */
.need-hero { padding: 20px 20px 14px 24px; background: linear-gradient(180deg, var(--area-wash), rgba(255, 255, 255, 0) 60%), var(--surface); box-shadow: var(--e-lift); }
.need-hero::before { content: ""; position: absolute; left: -1px; top: 18px; bottom: 18px; width: 5px; border-radius: 0 5px 5px 0; background: var(--area); }
.need-mark { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--area); color: #ffffff; box-shadow: 0 0 0 4px var(--area-soft); }
.need-hero .need-mark { width: 52px; height: 52px; box-shadow: 0 0 0 5px var(--area-soft), 0 8px 18px -6px var(--area-glow); }
.need-main { display: grid; justify-items: start; gap: 8px; min-width: 0; }
.need-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.need-area { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-1); font-weight: 600; color: var(--area-ink); }
.need-title { font-size: var(--t-lead); font-weight: 600; line-height: 1.3; text-wrap: balance; overflow-wrap: break-word; }
.need-hero .need-title { font-size: var(--t-4); line-height: 1.25; letter-spacing: -0.015em; }
.need-why { max-width: 68ch; font-size: var(--t-2); color: var(--ink-2); text-wrap: pretty; }
.need-act { margin-top: 4px; }
.need-after { display: grid; gap: 2px; max-width: 68ch; padding: 10px 14px; border-radius: var(--r-2); background: var(--tile); }
.need-after-label { font-size: var(--t-1); font-weight: 600; color: var(--ink-2); }
.need-after-text { font-size: var(--t-2); color: var(--ink); text-wrap: pretty; }
.need-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; font-size: var(--t-1); color: var(--ink-3); }
.need-since { color: var(--ink-3); }
.need-evidence { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--t-1); font-weight: 600; color: var(--ink-2); }
.need-evidence:hover { color: var(--area-ink); }
.need-evidence-label { font-weight: 400; }
/* A compact card: one quieter block, a smaller mark and button, "What happens next" on one line. */
.need-compact { gap: 6px 12px; padding: 12px 14px 8px; box-shadow: none; }
.need-compact .need-mark { width: 32px; height: 32px; box-shadow: 0 0 0 3px var(--area-soft); }
.need-compact .need-main { gap: 6px; }
.need-compact .need-title { font-size: var(--t-2); }
.need-compact .need-after { display: flex; flex-wrap: wrap; gap: 0 6px; padding: 0; background: none; }
/* A narrow card (a phone, a side column): its mark beside its pills, every other part at its full width. */
@container need (max-width: 479.98px) {
  .need-main { display: contents; }
  .need-main > * { grid-column: 1 / -1; }
  .need-main > .need-tags { grid-column: 2; align-self: center; }
  .need-hero .need-mark { width: 44px; height: 44px; }
}
.need-hero, .need-compact { row-gap: 10px; }
/* A wide hero card: what happens next beside the action, so the card stays short and uses its width. */
@container need (min-width: 760px) {
  .need-hero .need-main { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 32px; }
  .need-hero .need-main > * { grid-column: 1; }
  .need-hero .need-main > .need-after { grid-column: 2; grid-row: 1 / span 4; align-self: center; justify-self: stretch; }
  .need-hero .need-main > .need-foot { grid-column: 1 / -1; }
}
/* One strong action per view (fix round 4): the hero card's button is the filled one. A compact
   card's button, and a step's button inside a stage that has a Needs-you card under it, are drawn
   in the area's outline: its ink on white, its accent as the edge, never a second glowing fill. */
.need-compact .btn-area, .hero.has-need-card .hero-visual .btn-area { background: var(--surface); color: var(--area-ink); border-color: var(--area); box-shadow: none; }
.need-compact .btn-area:hover, .hero.has-need-card .hero-visual .btn-area:hover { background: var(--area-soft); color: var(--area-ink); }
/* The one card of a page without a hero (follow-up): a compact card's size, the hero card's bar at
   its left and its filled button, the one strong action of that view. */
.need-single { row-gap: 10px; padding: 16px 18px 12px 22px; }
.need-single::before { content: ""; position: absolute; left: -1px; top: 16px; bottom: 16px; width: 4px; border-radius: 0 4px 4px 0; background: var(--area); }
@container need (min-width: 760px) {
  .need-single .need-main { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 32px; }
  .need-single .need-main > * { grid-column: 1; }
  .need-single .need-main > .need-after { grid-column: 2; grid-row: 1 / span 4; align-self: center; justify-self: stretch; }
  .need-single .need-main > .need-foot { grid-column: 1 / -1; }
}
/* A wide compact card: what happens next on its quiet tile beside the action, as the hero card has it. */
@container need (min-width: 760px) {
  .need-compact .need-main { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 32px; }
  .need-compact .need-main > * { grid-column: 1; }
  .need-compact .need-main > .need-after { display: grid; grid-column: 2; grid-row: 1 / span 4; align-self: center; justify-self: stretch; padding: 10px 14px; background: var(--tile); }
  .need-compact .need-main > .need-foot { grid-column: 1 / -1; }
}
/* A connection the owner must arrange: drawn apart, never with the tint of something to do now. */
.need-waiting { border-style: dashed; border-color: var(--line-control); }
.need-waiting.need-hero { background: var(--surface); }
.need-waiting.need-hero::before, .need-waiting.need-single::before { background: repeating-linear-gradient(180deg, var(--area) 0 8px, transparent 8px 14px); }
.need-waiting .need-mark { background: var(--surface); color: var(--area-ink); border: 2px dashed var(--area); box-shadow: none; }

/* Nothing needs the owner: a calm line with a green tick, never an empty box. */
.calm { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px 18px; border-radius: var(--r-3); border: 1px solid var(--good-line); background: linear-gradient(90deg, var(--good-soft), var(--surface) 85%); }
.calm-mark { display: inline-grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--good); color: #ffffff; box-shadow: 0 0 0 4px var(--good-soft); }
.calm-body { display: grid; gap: 2px; min-width: 0; }
.calm-text { font-size: var(--t-lead); font-weight: 500; color: var(--ink); text-wrap: pretty; }
.calm-note { font-size: var(--t-2); color: var(--ink-2); }

/* -------------------------------------------------------- progress paths */

.path { container: path / inline-size; display: grid; gap: 12px; min-width: 0; }
.path-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.path-title { font-size: var(--t-lead); font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
h2.path-title { font-size: var(--t-4); letter-spacing: -0.015em; }
@media (min-width: 760px) { h2.path-title { font-size: var(--t-h2); } }
.path-sentence { max-width: 68ch; font-size: var(--t-2); color: var(--ink-2); text-wrap: pretty; }
.path-steps { --path-dir: 180deg; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
/* A step: its round mark (the step's icon, a ring in its state's color, a badge with the state's icon), then its words. */
.path-step {
  position: relative;
  display: grid;
  grid-template-columns: var(--path-node) minmax(0, 1fr);
  align-items: start;
  align-content: start;
  gap: 4px 14px;
  min-width: 0;
  --pm-bg: var(--surface);
  --pm-ink: var(--ink-3);
  --pm-ring: var(--line-control);
  --pm-style: solid;
  --pb-bg: var(--surface);
  --pb-ink: var(--ink-3);
  --pb-ring: var(--line-control);
  --ps-ink: var(--ink-3);
  --pl: repeating-linear-gradient(var(--path-dir), var(--line-control) 0 5px, transparent 5px 10px);
}
.path-complete { --pm-bg: var(--good-soft); --pm-ink: var(--good-ink); --pm-ring: var(--good); --pb-bg: var(--good); --pb-ink: #ffffff; --pb-ring: var(--good); --ps-ink: var(--good-ink); --pl: linear-gradient(var(--path-dir), var(--good), var(--good)); }
.path-working { --pm-bg: var(--accent-soft); --pm-ink: var(--accent-strong); --pm-ring: var(--accent); --pb-bg: var(--accent); --pb-ink: #ffffff; --pb-ring: var(--accent); --ps-ink: var(--accent-strong); --pl: linear-gradient(var(--path-dir), var(--accent), var(--accent-line)); }
.path-waiting-for-you { --pm-bg: var(--caution-soft); --pm-ink: var(--caution-ink); --pm-ring: var(--caution-strong); --pb-bg: var(--caution-strong); --pb-ink: var(--ink); --pb-ring: var(--caution-strong); --ps-ink: var(--caution-ink); }
.path-waiting-for-connection { --pm-bg: var(--surface); --pm-ink: var(--caution-ink); --pm-ring: var(--caution-strong); --pm-style: dashed; --pb-bg: var(--caution-soft); --pb-ink: var(--caution-ink); --pb-ring: var(--caution-strong); --ps-ink: var(--caution-ink); }
.path-paused { --pm-bg: var(--neutral-soft); --pm-ink: var(--ink-2); --pm-ring: var(--muted); --pb-bg: var(--surface); --pb-ink: var(--ink-2); --pb-ring: var(--muted); --ps-ink: var(--ink-2); }
.path-not-started { --pm-bg: var(--surface); --pm-ink: var(--ink-3); --pm-ring: var(--line-control); --pm-style: dashed; --pb-bg: var(--surface); --pb-ink: var(--ink-3); --pb-ring: var(--line-control); --ps-ink: var(--ink-3); }
.path-failed { --pm-bg: var(--bad-soft); --pm-ink: var(--bad-ink); --pm-ring: var(--bad-strong); --pb-bg: var(--bad-strong); --pb-ink: #ffffff; --pb-ring: var(--bad-strong); --ps-ink: var(--bad-ink); }
.path-node { position: relative; display: block; width: var(--path-node); height: var(--path-node); }
.path-medal {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px var(--pm-style) var(--pm-ring);
  background: var(--pm-bg);
  color: var(--pm-ink);
}
.path-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px var(--pm-style) var(--pb-ring);
  background: var(--pb-bg);
  color: var(--pb-ink);
  box-shadow: 0 0 0 2px var(--surface);
}
/* The way to the next step starts at this one: solid after a complete step, dashed before what has not happened. */
.path-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--path-node) / 2 - 1.5px);
  top: calc(var(--path-node) + 6px);
  bottom: -14px;
  width: 3px;
  border-radius: 2px;
  background: var(--pl);
}
.path-body { display: grid; gap: 2px; min-width: 0; padding-top: 4px; }
.path-name { font-size: var(--t-2); font-weight: 600; color: var(--ink); line-height: 1.3; overflow-wrap: break-word; }
/* A step's link: a 44 px target whose extra height (12 px above and below) is taken back by its
   margins, so it holds exactly the room of its words, also when a long name wraps to two lines
   (an inline box of fixed height let the second line run over the state under it). */
.path-link { display: inline-block; min-height: 44px; padding: 12px 0; margin: -12px 0; color: var(--ink); text-decoration-color: var(--line-control); }
.path-link:hover { color: var(--area-ink); }
.path-state { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--t-1); font-weight: 600; color: var(--ps-ink); }
.path-state-icon { flex: none; }
.path-state-word { min-width: 0; overflow-wrap: break-word; }
/* A date in a step's words stays on one line ("Done Nov 13" may wrap before the date, never inside it). */
.path-keep { white-space: nowrap; }
.path-detail { font-size: var(--t-1); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.path-action { margin-top: 8px; }
/* The step that matters now: a halo in its area's tint around its mark, its words on the tint. */
.path-step.is-current .path-medal { box-shadow: 0 0 0 6px var(--area-wash), 0 0 0 7px var(--area-line); }
/* A connection missing further on waits behind the step of now (fix round 4): still dashed, with its
   own icon and words, but grey, so only the step of now carries the amber of what to arrange. */
.path-step.is-current ~ .path-waiting-for-connection { --pm-ink: var(--ink-3); --pm-ring: var(--line-control); --pb-bg: var(--surface); --pb-ink: var(--ink-2); --pb-ring: var(--line-control); --ps-ink: var(--ink-2); }
.path-rail .path-body { padding: 6px 10px 8px; margin-left: -10px; border-radius: var(--r-2); }
.path-rail .path-step.is-current .path-body { background: var(--area-soft); box-shadow: inset 0 0 0 1px var(--area-line); }
/* Work in progress: its mark's halo breathes, the one loop of the paths, only while the job really runs. */
.path-step[data-state="working"] .path-medal::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: path-live 2.4s ease-out infinite;
}
@keyframes path-live {
  0% { transform: scale(0.9); opacity: 0.55; }
  70% { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}
/* One row where the steps fit: five from 640 px of the path's own width, six or more from 880 px. */
@container path (min-width: 640px) {
  .path-rail[data-path-size="few"] .path-steps { --path-dir: 90deg; grid-template-columns: repeat(var(--path-n, 5), minmax(0, 1fr)); gap: 16px; }
  .path-rail[data-path-size="few"] .path-step { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 10px; }
  .path-rail[data-path-size="few"] .path-step:not(:last-child)::before { left: calc(var(--path-node) + 8px); right: -8px; top: calc(var(--path-node) / 2 - 1.5px); bottom: auto; width: auto; height: 3px; }
  .path-rail[data-path-size="few"] .path-body, .path-rail[data-path-size="few"] .path-step.is-current .path-body { margin-left: 0; padding: 0; background: none; box-shadow: none; }
  .path-rail[data-path-size="few"] .path-step.is-current .path-name { color: var(--area-ink); }
}
@container path (min-width: 880px) {
  .path-rail[data-path-size="many"] .path-steps { --path-dir: 90deg; grid-template-columns: repeat(var(--path-n, 7), minmax(0, 1fr)); gap: 12px; }
  .path-rail[data-path-size="many"] .path-step { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 10px; }
  .path-rail[data-path-size="many"] .path-step:not(:last-child)::before { left: calc(var(--path-node) + 8px); right: -6px; top: calc(var(--path-node) / 2 - 1.5px); bottom: auto; width: auto; height: 3px; }
  .path-rail[data-path-size="many"] .path-body, .path-rail[data-path-size="many"] .path-step.is-current .path-body { margin-left: 0; padding: 0; background: none; box-shadow: none; }
  .path-rail[data-path-size="many"] .path-step.is-current .path-name { color: var(--area-ink); }
}
/* A compact path: one wrapping line of small steps, the step of now ringed, then its words. */
.path-compact { --path-node: 32px; }
/* Each line leads into a step from the one before it (in that step's look: solid after a complete
   step, dashed before what has not happened). The list reaches one gap to the left and clips that
   strip, where the first step of every row has its line: so a wrapped row never ends, nor begins,
   with a loose stub (fix round 4). The clip reaches out on the other sides for focus rings. */
/* (follow-up 2) Every step keeps its natural width, its mark round and its words on their own
   lines, and the rows are balanced: the steps are a line of inline boxes, balanced as words are
   (text-wrap: balance), so six steps that do not fit one row stand 3 and 3, seven 4 and 3, never
   five with the last one alone below. Squeezing them into one row (a flex row shrunk to the
   longest words) drew the marks as ovals and stacked a step's words on 4 or 5 lines. A step wider
   than the whole path (a phone) wraps its words inside, and its corners are rounded no more than
   a two-line step's ends, so no word reaches a curve. Each step's margin is the gap before it:
   the strip the list reaches out to the left, where every row's first line and margin lie, is
   clipped. A browser that cannot balance fills the rows in turn, the steps still whole. */
.path-compact .path-steps { --path-dir: 90deg; --path-gap: 20px; display: block; margin: -4px 0 -4px calc(var(--path-gap) * -1); padding: 0; line-height: 0; text-wrap: balance; clip-path: inset(-24px -24px -24px var(--path-gap)); }
.path-compact .path-step { display: inline-flex; vertical-align: middle; align-items: center; gap: 10px; margin: 4px 0 4px var(--path-gap); padding: 4px 14px 4px 4px; border-radius: 22px; line-height: 1.25; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
/* The round mark never gives up its width to the words. */
.path-compact .path-step > .path-node { flex: none; }
.path-compact .path-step::before { content: none; }
.path-compact .path-step + .path-step::before { content: ""; position: absolute; left: calc(var(--path-gap) * -1 + 4px); right: auto; top: calc(50% - 1.5px); bottom: auto; width: calc(var(--path-gap) - 8px); height: 3px; border-radius: 2px; background: var(--pl-in, repeating-linear-gradient(90deg, var(--line-control) 0 5px, transparent 5px 10px)); }
.path-compact .path-complete + .path-step { --pl-in: linear-gradient(90deg, var(--good), var(--good)); }
.path-compact .path-working + .path-step { --pl-in: linear-gradient(90deg, var(--accent), var(--accent-line)); }
.path-compact .path-step.is-current { background: var(--area-soft); box-shadow: inset 0 0 0 2px var(--area); }
.path-compact .path-step.is-current .path-medal { box-shadow: none; }
.path-compact .path-body { display: grid; gap: 0; padding: 0; line-height: 1.25; }
.path-compact .path-name { font-size: var(--t-1); }
/* A compact step's state has no icon of its own: its words are one run of text (a date in them is a
   span that must not become a flex item of its own). */
.path-compact .path-state { display: block; font-size: var(--t-1); font-weight: 500; }
.path-compact .path-badge { right: -6px; bottom: -6px; width: 18px; height: 18px; }
/* On a narrow path every step but the step of now shows its mark only (its words stay for screen readers). */
@container path (max-width: 519.98px) {
  .path-compact .path-step:not(.is-current) { padding: 4px; }
  .path-compact .path-step:not(.is-current) .path-body { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .path-compact .path-steps { --path-gap: 18px; }
}
.path-now { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 14px; border-radius: var(--r-2); background: var(--tile); }
.path-now-text { display: flex; flex-wrap: wrap; gap: 2px 6px; min-width: 0; flex: 1 1 260px; font-size: var(--t-2); color: var(--ink); }
.path-now-label { font-weight: 600; color: var(--area-ink); }
.path-now-name { font-weight: 600; }
.path-now-detail { flex-basis: 100%; font-size: var(--t-1); color: var(--ink-2); }
.path-now .path-action { margin-top: 0; }

/* ---------------------------------------------------------- worker health */

.health {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  max-width: 100%;
  min-height: 28px;
  padding: 3px 12px 3px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hl-line);
  background: var(--hl-soft);
  color: var(--hl-ink);
  font-size: var(--t-1);
  font-weight: 600;
  line-height: 1.25;
}
.health .icon { color: var(--hl-icon); }
.health-word { min-width: 0; overflow-wrap: break-word; }
.health-running { --hl-ink: var(--good-ink); --hl-icon: var(--good); --hl-soft: var(--good-soft); --hl-line: var(--good-line); }
.health-failing { --hl-ink: var(--caution-ink); --hl-icon: var(--caution-strong); --hl-soft: var(--caution-soft); --hl-line: var(--caution-line); }
.health-stopped { --hl-ink: var(--ink-2); --hl-icon: var(--ink-3); --hl-soft: var(--neutral-soft); --hl-line: var(--neutral-line); }
.worker-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; min-width: 0; font-size: var(--t-1); color: var(--ink-3); }
.worker-last { color: var(--ink-2); }
.worker-link { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; font-weight: 600; }
.main > .worker-strip { margin: 0 0 8px; }
@media (min-width: 640px) { .main > .worker-strip { justify-content: flex-end; } }

/* ----------------------------------------------------------------- motion */

/* A change the records hold plays once, where the product's script marks it (data-motion): a state
   that changed, a card that appeared, a token handed from a completed step to the next, a piece of
   work gliding to its new place. Only the halo of work in progress loops; the reduced-motion rule
   after these stops everything. */
[data-motion~="changed"] { animation: motion-change var(--motion-base) var(--ease-out) 1; }
[data-motion~="arrived"] { animation: motion-arrive var(--motion-base) var(--ease-out) 1; }
[data-motion~="moved"] { animation: motion-move var(--motion-slow) var(--ease-out) 1; }
[data-motion~="moved"][data-motion~="changed"] { animation: motion-move var(--motion-slow) var(--ease-out) 1, motion-change var(--motion-base) var(--ease-out) 1; }
.path-step[data-motion~="changed"] { animation: none; }
.path-step[data-motion~="changed"] .path-medal { animation: motion-pop var(--motion-base) var(--ease-out) 1; }
.path-step[data-motion~="handoff"]::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: calc(var(--path-node) / 2 - 6px);
  top: calc(var(--path-node) + 4px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--area);
  box-shadow: 0 0 0 4px var(--area-wash);
  opacity: 0;
  animation: path-token-down var(--motion-slow) var(--ease-out) 1;
}
@container path (min-width: 640px) {
  .path-rail[data-path-size="few"] .path-step[data-motion~="handoff"]::after { left: calc(var(--path-node) + 4px); top: calc(var(--path-node) / 2 - 6px); animation-name: path-token-across; }
}
@container path (min-width: 880px) {
  .path-rail[data-path-size="many"] .path-step[data-motion~="handoff"]::after { left: calc(var(--path-node) + 4px); top: calc(var(--path-node) / 2 - 6px); animation-name: path-token-across; }
}
@keyframes motion-change {
  0% { transform: none; }
  35% { transform: scale(1.03); }
  100% { transform: none; }
}
@keyframes motion-arrive {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes motion-move {
  from { transform: translate(var(--motion-dx, 0px), var(--motion-dy, 0px)); }
  to { transform: none; }
}
@keyframes motion-pop {
  0% { transform: scale(0.84); }
  55% { transform: scale(1.1); }
  100% { transform: none; }
}
@keyframes path-token-down {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(28px); }
}
@keyframes path-token-across {
  0% { opacity: 0; transform: translateX(0); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateX(64px); }
}


/* ------------------------------------------ the guidance parts, follow-ups */

/* The drawing's pattern reaches 44 px past the drawing at its sides. From 560 px of the hero's
   own width the drawing stands against the stage's right padding (16 px; 32 px from 760 px; the
   padding and the drawing's 12 px margin from 960 px), so on that side the pattern reaches no
   further than the room there: it reached 3 to 11 px past the window between 592 and 807 px,
   and the whole page scrolled sideways on a tablet. */
@container hero (min-width: 560px) { .hero-art::before { right: -16px; } }
@container hero (min-width: 760px) { .hero-art::before { right: -32px; } }
@container hero (min-width: 960px) { .hero-art::before { right: -44px; } }

.need-area[data-need-area="facts"] .area-tile { --area-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%206.5h10M10%2012h10M10%2017.5h10%22%2F%3E%3Cpath%20d%3D%22M4%206.6l1.4%201.4%202.4-2.5%22%2F%3E%3Cpath%20d%3D%22M4%2012.1l1.4%201.4%202.4-2.5%22%2F%3E%3Cpath%20d%3D%22M4%2017.6l1.4%201.4%202.4-2.5%22%2F%3E%3C%2Fsvg%3E"); }

/* ------------------------------------------------ comfort and printing */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
@media (forced-colors: active) {
  .glass::before { background: Canvas; border-color: CanvasText; }
  .glass::after { display: none; }
  .need, .calm, .health, .path-medal, .path-badge, .need-mark, .calm-mark { border: 1px solid CanvasText; }
  .hero-stage::before, .hero-art-frame::before, .hero-art-frame::after { display: none; }
  .btn, .seg, .nav-link, .menu-toggle, .bottom-link { border: 1px solid ButtonText; }
  .badge, .pill, .status, .role-state, .delta, .chip, .pos-chip { border: 1px solid CanvasText; }
  .tab[aria-current="page"] { text-decoration: underline; }
  .nav-link[aria-current], .bottom-link[aria-current] { text-decoration: underline; }
  .stack-seg, .dv-bar, .ba-bar, .step-dot { forced-color-adjust: none; }
  .page-icon::before, .area-tile::before { forced-color-adjust: none; background: CanvasText; }
}
@media print {
  .app-bar, .bottom-bar, .skip-link, .footer, .drawer-backdrop, .float-bar { display: none !important; }
  body { background: #ffffff; padding-bottom: 0; }
  body::before { display: none; }
  .card, .stat, .table-card, .panel, .summary-band { box-shadow: none; background: #ffffff; }
}


.onb-page { display: grid; gap: var(--s-5); min-width: 0; }
.onb-page > * { min-width: 0; }
.onb-page .section { margin-top: 0; }
/* The page's grid gap already spaces the next action from what is above it. */
.onb-page > .next-action { margin-top: 0; }
.onb-page .section-head { align-items: center; }
.onb-page .onb-section-link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-2); font-weight: 600; }
.onb-page .onb-tech { margin: 0; overflow-wrap: anywhere; }

/* Standalone links: boxes with the label centered in a 44 px tall target. */
.onb-page .onb-more,
.onb-page .onb-standalone { margin: 0; }
.onb-page .onb-more a,
.onb-page .onb-standalone a,
.onb-page .onb-errors a,
.onb-page .onb-answer-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}
/* A second way under a main link (the exact steps under the way to reconnect): the same target,
   quieter words. */
.onb-page .onb-quiet-link a { font-weight: 500; }
.onb-page .onb-link-group { display: grid; gap: 0; justify-items: start; min-width: 0; }

/* ----------------------------------------------------------------- Home */

/* Sections stand apart by the section gap: 32 px on a phone, 48 to 56 on a computer. */
.onb-overview { gap: var(--gap-section); }
.onb-page .onb-lead { margin: 0; max-width: 68ch; font-size: var(--t-lead); line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.onb-page .onb-meta,
.onb-page .onb-band-meta { margin: 0; font-size: var(--t-1); color: var(--ink-3); }
.onb-page .onb-caption { margin: 0; font-size: var(--t-1); color: var(--ink-2); }
.onb-page .onb-scan-label { margin: 0; font-size: var(--t-2); font-weight: 600; color: var(--ink); }
/* A card's own link takes its area's ink, so each area keeps one identity. */
.onb-page .area-card .onb-more a { color: var(--area-ink); }

/* 2. Where you appear. In reading order at every width: Google Search (its three figures in the
   shared row of three, then, from 640 px, the three towns its searches name most as a short list,
   then the way to the Google page), the Local Map, AI Visibility. From 760 px the Local Map and
   AI Visibility sit side by side; from 1200 px Google Search takes two thirds of the row and the
   two cards the last third. Each card is as tall as its content: a short card sits at the top, never
   stretched. The towns are a list, never a map: only the Local Map card draws a map. */
.onb-page .onb-appear { display: grid; gap: var(--s-4); align-items: start; }
.onb-page .onb-appear > * { min-width: 0; }
.onb-page .onb-google { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); min-width: 0; }
.onb-page .onb-google > * { min-width: 0; }
.onb-page .onb-google-figures { display: grid; align-content: start; gap: var(--s-3); }
.onb-page .onb-google-towns { display: grid; align-content: start; gap: var(--s-2); min-width: 0; }
.onb-page .onb-towns-title { margin: 0; font-size: var(--t-2); font-weight: 600; color: var(--ink); }
.onb-page .onb-google-towns .rows { margin: 0; }
.onb-page .onb-band-counts { margin: 0; font-size: var(--t-1); color: var(--ink-2); }
.onb-page .onb-appear-side { display: grid; gap: var(--s-4); align-items: start; min-width: 0; }
.onb-page .onb-appear-side > * { min-width: 0; }
.onb-page .onb-mapcard .rmap-frame { max-width: min(100%, 360px); }
.onb-page .onb-mapcard .rmap-key { gap: 6px 14px; }
/* The Local Map's path while there is no scan to draw (the shared compact path, unchanged). */
.onb-page .onb-card-path { min-width: 0; }
/* AI Visibility: three small rings, mentioned, recommended and linked, kept apart. */
.onb-page .onb-ai-rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); justify-items: center; align-items: start; min-width: 0; }
.onb-page .onb-ai-rings > * { min-width: 0; }
/* On a phone the towns are left out of the card, so the Local Map and AI Visibility cards come up
   sooner; one line takes their place there and leads to where every town is drawn (the Google
   details page). From 640 px the list is in the card and that line is not needed. */
.onb-page .onb-towns-phone { margin: 0; }
.onb-page .onb-towns-phone a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--area-ink); }
@media (max-width: 639.98px) {
  .onb-page .onb-google-towns { display: none; }
}
@media (min-width: 640px) {
  .onb-page .onb-towns-phone { display: none; }
}
@media (min-width: 760px) {
  .onb-page .onb-appear-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .onb-page .onb-appear { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .onb-page .onb-appear-side { grid-template-columns: minmax(0, 1fr); }
}

/* Build 4: each area's card on Home in its own identity (its data-area tokens), never a wall of
   identical white boxes: a breath of the area's tint at the top fading to white before the words
   below, and a short bar of its accent at the top left, as the hero's stage has. Then each area's
   visual in its frame: Google's figures in a browser window (three dots in its top bar), the
   Local Map's empty map as a tile with the map grid (a dashed mark: no source is connected), and
   AI Visibility's rings in a chat bubble. Patterns sit only where no word is; nothing moves. */
.onb-page.onb-overview .area-card,
.onb-page.onb-overview [data-area] > .panel {
  background: linear-gradient(180deg, var(--area-wash), transparent 104px), var(--surface);
}
.onb-page.onb-overview .area-card::before,
.onb-page.onb-overview [data-area] > .panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 24px;
  width: 48px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--area);
}
.onb-page.onb-overview .onb-google-figures {
  padding: 40px 12px 12px;
  border-radius: var(--r-2);
  box-shadow: inset 0 0 0 1px var(--area-line);
  background:
    radial-gradient(circle at 18px 14px, var(--area) 0 4px, transparent 4.5px) no-repeat,
    radial-gradient(circle at 34px 14px, var(--area-line) 0 4px, transparent 4.5px) no-repeat,
    radial-gradient(circle at 50px 14px, var(--area-line) 0 4px, transparent 4.5px) no-repeat,
    linear-gradient(var(--area-soft), var(--area-soft)) 0 0 / 100% 28px no-repeat,
    var(--surface);
}
.onb-page.onb-overview .onb-map-empty {
  position: relative;
  height: 88px;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px var(--area-line);
  background:
    linear-gradient(var(--area-line) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, var(--area-line) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--area-wash);
}
.onb-page.onb-overview .onb-map-empty::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  border: 2px dashed var(--area);
  background: var(--surface);
}
.onb-page.onb-overview .onb-ai-bubble {
  container: ai-bubble / inline-size;
  padding: 12px 8px;
  border-radius: 20px 20px 20px 6px;
  box-shadow: inset 0 0 0 1px var(--area-line);
  background: var(--area-wash);
}
/* (build 4, follow-up) In a narrow bubble (a 320 px phone: under 277 px inside it) three rings side
   by side would push their names together ("MentionedRecommended", and the counts under them onto
   two lines): each ring then stands in its own row, its name and its count of questions beside it,
   so no name can touch another at any width. From 277 px the three stand side by side, at least
   12 px between their names. */
@container ai-bubble (max-width: 276.98px) {
  .onb-page .onb-ai-rings { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--s-2); }
  .onb-page .onb-ai-rings .ring { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-3); row-gap: 0; align-items: center; justify-items: start; text-align: start; }
  .onb-page .onb-ai-rings .ring-wrap { grid-row: 1 / span 2; }
  .onb-page .onb-ai-rings .ring-label { align-self: end; max-width: none; }
  .onb-page .onb-ai-rings .ring-caption { align-self: start; }
}
/* Under the rings, what the questions that name the business showed: counted apart from them. */
.onb-page .onb-ai-named { max-width: 60ch; text-wrap: pretty; }

/* 3. What changed: one sentence, one chart; the note on a weekly pattern is the product's one data note. */
.onb-page .onb-spike { max-width: 72ch; }

/* 4. What the team is doing: its sentence beside the area's tile, then each state once with its
   roles as one line of words. Each name is a plain text link in that line (underlined, in the
   area's ink, the product's focus ring), never a chip: nothing looks like a control that does
   nothing, and the strip stays short on a phone. */
.onb-page .onb-team-head { display: flex; align-items: flex-start; gap: var(--s-3); min-width: 0; }
.onb-page .onb-team-words { display: grid; gap: var(--s-1); min-width: 0; }
/* The team's work step by step (the shared compact path) between its sentence and its roles. */
.onb-page .onb-sub-title { margin: 0; font-size: var(--t-2); font-weight: 600; color: var(--ink); }
.onb-page .onb-team-path { display: grid; gap: var(--s-2); min-width: 0; }
.onb-page .onb-team { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.onb-page .onb-team-group { display: grid; gap: var(--s-1); justify-items: start; min-width: 0; }
.onb-page .onb-roles { margin: 0; min-width: 0; max-width: 68ch; font-size: var(--t-2); line-height: 1.75; color: var(--ink-2); text-wrap: pretty; }
.onb-page .onb-role { color: var(--area-ink); font-weight: 500; overflow-wrap: break-word; }
/* A role's name never breaks in its middle ("Content / Writer" would read as two roles): the line
   wraps between names. */
.onb-page .onb-role-name { white-space: nowrap; }
@media (min-width: 760px) {
  /* The state in its own column, so the roles of every state start on one line. */
  .onb-page .onb-team-group { grid-template-columns: 232px minmax(0, 1fr); align-items: center; gap: var(--s-4); }
}
/* The last 14 days on demand: a long folded line wraps under its time. */
.onb-page .onb-teamcard .ev-text { text-wrap: pretty; }

/* 6. The next step: the one action, then the rest of what needs the owner as compact cards (the
   shared Needs-you card), on demand, with the stated rule of their order. */
.onb-page .onb-next > .next-action { margin-top: 0; }
.onb-page .onb-needs-rest { display: grid; gap: var(--s-2); margin: 0 0 var(--s-3); padding: 0; list-style: none; }
.onb-page .onb-needs-rest > li { min-width: 0; }
.onb-page .onb-rule { margin: var(--s-1) 0 0; font-size: var(--t-2); color: var(--ink-2); }

/* 6. Articles and opportunities: two cards side by side on a computer, one height. */
.onb-page .onb-pair { display: grid; gap: var(--s-4); align-items: start; }
.onb-page .onb-pair > * { min-width: 0; }
@media (min-width: 900px) {
  .onb-page .onb-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}
/* The articles by where they stand: a count under its label, zero shown as zero. The label takes
   the room it needs and the number sits at the bottom of its tile, so a label that wraps never
   pushes its number below its neighbours'. */
.onb-page .onb-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: var(--s-2); margin: 0; }
.onb-page .onb-count { display: grid; grid-template-rows: 1fr auto; align-items: start; gap: var(--s-1); min-width: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-2); background: var(--tile); }
.onb-page .onb-count dd { align-self: end; }
.onb-page .onb-count dt { font-size: var(--t-1); font-weight: 500; color: var(--ink-2); }
.onb-page .onb-count dd { margin: 0; font-size: var(--t-5); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink); }
.onb-page .onb-about { font-size: var(--t-2); }

/* ----------------------------------------------------------- Workspaces */

.onb-page .onb-ws-list { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) {
  .onb-page .onb-ws-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The monogram stays beside the first line of a long name. */
.onb-page .onb-ws-head { display: flex; align-items: flex-start; gap: var(--s-3); min-width: 0; }
.onb-page .onb-mono {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-2);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
  color: var(--accent-strong);
  font-size: var(--t-2);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.onb-page .onb-ws-card.is-demo .onb-mono { background: var(--demo-soft); box-shadow: inset 0 0 0 1px var(--demo-line); color: var(--demo-ink); }
.onb-page .onb-ws-who { display: grid; gap: 0; min-width: 0; }
.onb-page .onb-ws-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.onb-page .onb-ws-name a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-lead); font-weight: 600; overflow-wrap: anywhere; }
.onb-page .onb-ws-kind { font-size: var(--t-1); color: var(--ink-2); }
.onb-page .onb-ws-kind .status { margin-top: 2px; }
/* Where the setup stands: the pill, then one plain line or the bar of confirmed steps. */
.onb-page .onb-ws-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.onb-page .onb-ws-state > .onb-ws-note,
.onb-page .onb-ws-state > .progress { flex-basis: 100%; }
.onb-page .onb-ws-note { margin: 0; font-size: var(--t-2); color: var(--ink-2); text-wrap: pretty; }
/* A website address never breaks inside its name: a long one ends in an ellipsis, its full text in the title. */
.onb-page .onb-host { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-2); color: var(--ink-2); }
/* (build 4) An example started in setup and not created yet: its name as words (no Home to open). */
.onb-page .onb-ws-draft-name { min-height: 44px; font-size: var(--t-lead); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.onb-page .onb-ws-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.onb-page .onb-ws-actions .onb-remove { margin-left: auto; }

/* ---------------------------------------------------------------- Setup */

/* The start of setup: your business and an example business, side by side on a computer. */
.onb-page .onb-choose { display: grid; gap: var(--s-4); align-items: start; }
@media (min-width: 900px) {
  .onb-page .onb-choose { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}
/* (build 4) From 640 px a step's link keeps the shared rule (ui/styles.ts: its 44 px target by
   12 px of padding taken back by a -12 px margin), so a name that wraps onto two lines ("Your
   searches and services") keeps its whole height and its note ("Filled in") starts under its last
   line; nothing here changes that padding or margin outside the phone's row of numbers. */
.onb-page .onb-stepper { min-width: 0; }
.onb-page .onb-setup-grid { display: grid; gap: var(--s-5); align-items: start; min-width: 0; }
@media (min-width: 1024px) {
  .onb-page .onb-setup-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s-6); }
}
.onb-page .onb-form { max-width: none; gap: var(--s-4); }
.onb-page .onb-step-card .panel-body { gap: var(--s-4); }
.onb-page .onb-services { display: grid; gap: 2px; }
/* The map center: the choice, then the two numbers for exact coordinates (side by side when there is room). */
.onb-page .onb-center { display: grid; gap: var(--s-3); min-width: 0; }
.onb-page .onb-coords { display: grid; gap: var(--s-3); min-width: 0; }
@media (min-width: 560px) {
  .onb-page .onb-coords { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.onb-page .onb-form textarea { min-height: 88px; }
.onb-page .onb-review { display: grid; gap: var(--s-4); }
@media (min-width: 900px) {
  .onb-page .onb-review { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.onb-page .onb-answers-panel .row-title { font-size: var(--t-1); font-weight: 500; color: var(--ink-2); }
/* An answer is the owner's own words: a long name without a space breaks where it must, never widening the page. */
.onb-page .onb-answers-panel .row-meta { font-size: var(--t-2); color: var(--ink); overflow-wrap: anywhere; }
.onb-page .onb-review .kv dd { overflow-wrap: anywhere; }
.onb-page .onb-answers-panel .row-link .row-title { color: var(--accent); }

/* The buttons: Next first, then Back and Save and exit; Cancel setup apart, behind a confirmation. */
.onb-page .onb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding-top: 4px; }
.onb-page .onb-cancel { margin-left: auto; }
.onb-page .onb-cancel > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--r-2);
  color: var(--bad);
  font-size: var(--t-2);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.onb-page .onb-cancel > summary::-webkit-details-marker { display: none; }
.onb-page .onb-cancel > summary:hover { background: var(--bad-soft); }
.onb-page .onb-cancel[open] {
  flex-basis: 100%;
  margin-left: 0;
  padding: 4px 16px 16px;
  border-radius: var(--r-2);
  border: 1px solid var(--bad-line);
  background: var(--bad-soft);
}
.onb-page .onb-cancel-body { display: grid; gap: var(--s-2); justify-items: start; }
/* (build 4) "Start a new one instead" on the choice of a saved example: the same confirmation,
   standing on its own line under the next step (no row of buttons to sit apart from). */
.onb-page .onb-restart { margin-left: 0; justify-self: start; }
.onb-page .onb-restart[open] { justify-self: stretch; }
.onb-page .onb-cancel-body p { max-width: 60ch; font-size: var(--t-2); color: var(--ink); }

@media (max-width: 639.98px) {
  .onb-page .onb-actions > .btn { flex: 1 1 auto; justify-content: center; }
  .onb-page .onb-actions > .btn-primary { flex-basis: 100%; }
  .onb-page .onb-cancel { flex-basis: 100%; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
  .onb-page .onb-cancel[open] { padding-top: 4px; }

  /* The stepper on a phone: the six numbers in one row, each a 44 px target, and the current
     step's name on one line under the row (never squeezed between the numbers, also at 320 px). */
  .onb-page .onb-stepper .stepper {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    padding-bottom: 28px;
  }
  .onb-page .onb-stepper .step {
    position: static;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }
  .onb-page .onb-stepper .step::before { display: none; }
  .onb-page .onb-stepper .step-body { padding-top: 0; }
  .onb-page .onb-stepper .step-current .step-body { position: absolute; left: 0; right: 0; bottom: 0; }
  .onb-page .onb-stepper .step-current .step-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .onb-page .onb-stepper .step-current .step-note { display: none; }
  .onb-page .onb-stepper .step:not(.step-current) { position: relative; }
  .onb-page .onb-stepper .step:not(.step-current) .step-note { display: none; }
  /* Another step's name: out of sight, still read, and its link covers the number. */
  .onb-page .onb-stepper .step:not(.step-current) .step-label {
    position: absolute;
    inset: 0;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 200%;
  }
  .onb-page .onb-stepper .step:not(.step-current) .step-label a {
    position: absolute;
    inset: 0;
    margin: 0;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
  }
}


/* ------------------------------------------------------------ Local Map */

.lm-page { display: grid; gap: var(--gap-section); min-width: 0; }
.lm-page > .callout, .lm-page > .next-action, .lm-page > .tech-link { margin: 0; }
.lm-closed { display: grid; gap: var(--s-3); min-width: 0; }
.lm-lead { max-width: 68ch; font-size: var(--t-2); color: var(--ink); }
.lm-more a { display: inline-flex; align-items: center; min-height: 44px; }

/* What the Local Map shows (a business that is not connected): the illustration of a scan
   beside what a scan records; one column on a phone. */
.lm-explain-maps { display: grid; gap: var(--s-5); min-width: 0; }
@media (min-width: 900px) {
  .lm-explain-maps { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-6); align-items: start; }
  /* The words start level with the picture, under its caption. */
  .lm-shows-col { padding-top: var(--s-6); }
}
.lm-explain-map { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
/* The places named on the illustration: a small solid town mark in ink with a white edge (a
   name at a position, never a figure), so it reads as a place on a map and not as a spot.
   The drawing gives such a mark 4 of the map's 600 units, a 2 px speck on a phone, so the mark
   takes its own radius in those units (--lm-town-r, fewer where the map is drawn larger): about
   7 to 11 px across at every width, its white edge 1.5 px at every width. A name beside its mark moves out by what the mark gained (a margin in percent of the
   map's width is that many units) and keeps that much less room, so it never sits on its mark
   nor leaves the frame; a name on a leader line is far enough out already. */
.lm-explain-map { --lm-town-r: 8; --lm-town-out: calc((var(--lm-town-r) - 4) * 100% / 600); --lm-town-diag: calc(var(--lm-town-out) * 0.7071); }
@media (min-width: 480px) {
  .lm-explain-map { --lm-town-r: 5.5; }
}
.lm-explain-map .rmap-bubble.rmap-hollow { fill: var(--ink); stroke: #ffffff; stroke-width: 1.5; stroke-dasharray: none; r: calc(var(--lm-town-r) * 1px); }
.lm-explain-map .rmap-tag-right:not(.rmap-tag-leader) { margin-left: var(--lm-town-out); --tag-room: calc(100% - var(--tx, 0%) - 4px - var(--lm-town-out)); }
.lm-explain-map .rmap-tag-left:not(.rmap-tag-leader) { margin-left: calc(0px - var(--lm-town-out)); --tag-room: calc(var(--tx, 100%) - 4px - var(--lm-town-out)); }
.lm-explain-map .rmap-tag-top:not(.rmap-tag-leader) { margin-top: calc(0px - var(--lm-town-out)); }
.lm-explain-map .rmap-tag-bottom:not(.rmap-tag-leader) { margin-top: var(--lm-town-out); }
.lm-explain-map .rmap-tag-top-right:not(.rmap-tag-leader), .lm-explain-map .rmap-tag-bottom-right:not(.rmap-tag-leader) { margin-left: var(--lm-town-diag); --tag-room: calc(100% - var(--tx, 0%) - 4px - var(--lm-town-diag)); }
.lm-explain-map .rmap-tag-top-left:not(.rmap-tag-leader), .lm-explain-map .rmap-tag-bottom-left:not(.rmap-tag-leader) { margin-left: calc(0px - var(--lm-town-diag)); --tag-room: calc(var(--tx, 100%) - 4px - var(--lm-town-diag)); }
.lm-explain-map .rmap-tag-top-right:not(.rmap-tag-leader), .lm-explain-map .rmap-tag-top-left:not(.rmap-tag-leader) { margin-top: calc(0px - var(--lm-town-diag)); }
.lm-explain-map .rmap-tag-bottom-right:not(.rmap-tag-leader), .lm-explain-map .rmap-tag-bottom-left:not(.rmap-tag-leader) { margin-top: var(--lm-town-diag); }
.lm-shows-col { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.lm-shows { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; font-size: var(--t-2); color: var(--ink); }
.lm-shows li { display: flex; align-items: flex-start; gap: var(--s-3); min-width: 0; }
.lm-shows-icon { flex: none; margin-top: 2px; color: var(--area); }
/* The three measures that are never mixed, as a quiet inset in the area's tint. */
.lm-measure { max-width: 62ch; padding: var(--s-3) var(--s-4); border-radius: var(--r-2); background: var(--area-soft); font-size: var(--t-1); color: var(--ink-2); }

/* The connection page: the steps beside the cost from 1024 px. */
.lm-connect-grid { display: grid; gap: var(--gap-section); min-width: 0; }
@media (min-width: 1024px) {
  .lm-connect-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
}
.lm-provider .art { justify-self: center; }
.lm-steps-lead, .lm-cost-lead, .lm-limits-lead, .lm-new-lead, .lm-history-lead { max-width: 68ch; font-size: var(--t-2); color: var(--ink-2); }
/* Where the first step happens (another company's site), right under the steps. */
.lm-steps-out { max-width: 68ch; margin: 0; padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: var(--t-2); color: var(--ink-2); }
/* A hyphenated word of its link stays on one line with the word after it ("sign-up page"), so a
   phone breaks the name between words, never at its hyphen. */
.lm-steps-out .lm-keep { white-space: nowrap; }
/* A linked step label that wraps (the API login step on a phone) keeps its 44 px target, and its
   second line pushes the note down: the padding gives the target its height, and the negative
   margins take back only that padding, never a line of text. */
.lm-steps .step-label a { padding: 12px 0; }
/* The five steps, each with a note, read as one column at every width: a row of five would
   squeeze each label onto several lines (the stepper is a row from 640 px elsewhere). */
@media (min-width: 640px) {
  .lm-steps .stepper { grid-auto-flow: row; }
  .lm-steps .step { grid-template-columns: 32px minmax(0, 1fr); justify-items: stretch; gap: 12px; padding: 0 0 16px; }
  .lm-steps .step:last-child { padding-bottom: 0; }
  .lm-steps .step::before { left: 15px; right: auto; top: 36px; bottom: 4px; width: 2px; height: auto; }
  .lm-steps .step-body { padding-top: 5px; }
}
/* The starting balance, said once above the cost bars. */
.lm-balance { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; font-size: var(--t-2); color: var(--ink-2); }
.lm-balance-num { font-size: var(--t-5); font-weight: 600; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.lm-rules { max-width: 72ch; }

/* The search phrase selector: one row that names the phrase on the map and opens the list of
   every tracked phrase. Each phrase is a whole row, so a long one wraps and none is cut short. */
.lm-pick { min-width: 0; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface); }
.lm-pick-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "key more" "value more";
  align-items: center;
  gap: 0 var(--s-3);
  min-height: 44px;
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-4);
  border-radius: var(--r-2);
  cursor: pointer;
  list-style: none;
}
.lm-pick-summary::-webkit-details-marker { display: none; }
.lm-pick-key { grid-area: key; font-size: var(--t-1); font-weight: 500; color: var(--ink-2); }
.lm-pick-value { grid-area: value; min-width: 0; font-size: var(--t-2); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.lm-pick-more { grid-area: more; display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-1); font-weight: 500; color: var(--accent); white-space: nowrap; }
.lm-pick[open] .lm-pick-chevron { transform: rotate(180deg); }
.lm-pick-list { display: grid; gap: 2px; margin: 0; padding: var(--s-1); list-style: none; border-top: 1px solid var(--line); }
.lm-pick-item { display: grid; gap: 2px; min-height: 44px; padding: var(--s-2) var(--s-3); border-radius: var(--r-1); color: var(--ink); text-decoration: none; }
.lm-pick-item:hover { background: var(--tile); color: var(--ink); }
.lm-pick-item[aria-current] { background: var(--area-soft); }
.lm-pick-name { font-size: var(--t-2); font-weight: 500; overflow-wrap: anywhere; }
.lm-pick-note { font-size: var(--t-1); color: var(--ink-2); }
/* On a narrow phone the word "Change" drops under the phrase, so the phrase keeps the row. */
@media (max-width: 379.98px) {
  .lm-pick-summary { grid-template-columns: minmax(0, 1fr); grid-template-areas: "key" "value" "more"; gap: 2px; }
}

.lm-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: var(--t-2); color: var(--ink-2); }
.lm-status > p { flex: 1 1 260px; max-width: 68ch; }
.lm-status .progress { flex: 1 1 260px; }

.lm-hero-grid { display: grid; gap: var(--s-4); min-width: 0; }
.lm-hero-map { display: grid; gap: var(--s-3); align-content: start; min-width: 0; }
.lm-hero-side { display: grid; gap: var(--s-5); align-content: start; min-width: 0; }
.lm-point-slot { min-width: 0; }
.lm-point-slot:focus { outline: none; }
@media (min-width: 960px) {
  .lm-hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "map point" "map side";
    grid-template-rows: auto 1fr;
    column-gap: var(--s-6);
    row-gap: 0;
    align-items: start;
  }
  .lm-hero-map { grid-area: map; }
  .lm-point-slot { grid-area: point; }
  .lm-hero-side { grid-area: side; }
  .has-point .lm-hero-side { margin-top: var(--s-5); }
}
/* The map and its key stay in view, under the top bar, while the list or a spot's details
   scroll beside them; the square map is held to the window's height, so its last row and the
   key always show. Only in a window tall enough for 7 columns of 44 px (a shorter window keeps
   the map in the flow, never a smaller target). A map of more than 7 columns stays in the flow. */
@media (min-width: 960px) and (min-height: 620px) {
  .lm-hero-map { position: sticky; top: 92px; }
  .lm-hero-map .lm-map { max-width: min(100%, calc(100vh - 252px)); }
}
.lm-hero-wide .lm-hero-map { position: static; }
.lm-hero-wide .lm-hero-map .lm-map { max-width: none; }

/* The map: full width of its column, centered and held to a readable size on a tablet. It is
   the container its numbers are sized from. */
.lm-figure { display: grid; gap: var(--s-2); min-width: 0; margin: 0; }
.lm-map {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--map-land);
}
@media (min-width: 960px) { .lm-map { max-width: none; } }
/* On a phone the map takes back the panel's side padding: its cells stay 44 px or more. */
@media (max-width: 639.98px) {
  .lm-hero .lm-figure { margin-left: calc(0px - var(--pad-panel)); margin-right: calc(0px - var(--pad-panel)); }
  .lm-hero .lm-map { border-left: 0; border-right: 0; border-radius: 0; }
}
/* Under 360 px the map's panel reaches the screen's edges, so the map spans the whole screen:
   7 columns are 45 px each at 320 px. The words inside keep the panel's own padding. */
@media (max-width: 359.98px) {
  .lm-hero { margin-left: calc(0px - var(--gutter)); margin-right: calc(0px - var(--gutter)); border-left: 0; border-right: 0; border-radius: 0; }
}
/* A map wider than 7 columns: 44 px cells at least, scrolling inside its own bounded region. */
.lm-scroll {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.lm-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lm-map.lm-map-wide { min-width: calc(var(--lm-cols, 9) * 44px + 2px); }
.lm-art { display: block; width: 100%; height: auto; }
.lm-bg { fill: var(--map-land); }
.lm-lines { fill: none; stroke: var(--line); stroke-width: 1.5; }
.lm-center-halo { fill: none; stroke: var(--surface); stroke-width: 11; }
.lm-center { fill: none; stroke: var(--accent); stroke-width: 6; }
.lm-sel { fill: none; stroke: var(--ink); stroke-width: 6; }
/* Better in green, worse in dark slate: red stays for a spot that could not be checked. Each
   triangle sits on a white disc with a thin edge, so it reads on every rank color. */
.lm-up { fill: var(--good); }
.lm-down { fill: var(--ink-2); }
.lm-mark-ground { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; }
.lm-mark-art { display: block; width: 100%; height: 100%; }

/* The cells over the drawing: one cell each, in grid order. A cell is square,
   so its whole cell is the target (a rounded corner would not take a tap). */
.lm-points {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--lm-cols, 7), minmax(0, 1fr));
  grid-template-rows: repeat(var(--lm-rows, 7), minmax(0, 1fr));
}
.lm-pt { display: grid; place-items: center; position: relative; min-width: 0; min-height: 0; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a.lm-pt:hover { box-shadow: inset 0 0 0 3px var(--line-control); }
.lm-pt:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
/* The rank or symbol of a spot, over its disc: sized from the map's own width (about a third
   of a cell), never under 14 px, in the ink of its rank color. */
.lm-num {
  font-size: clamp(14px, calc(100cqw / var(--lm-cols, 7) * 0.32), 22px);
  font-weight: 600;
  line-height: 1;
  color: var(--rank-ink, var(--ink));
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.lm-pt.rank-failed .lm-num { color: var(--bad); }
.lm-pt.rank-unmeasured .lm-num, .lm-pt.rank-outside .lm-num { color: var(--ink-3); }
/* A spot's change mark, HTML at the upper right of its cell (over the disc's edge): sized from
   the map's own width like the numbers, never under 16 px. */
.lm-mark {
  position: absolute;
  top: 3%;
  right: 3%;
  inline-size: clamp(16px, calc(100cqw / var(--lm-cols, 7) * 0.3), 24px);
  block-size: clamp(16px, calc(100cqw / var(--lm-cols, 7) * 0.3), 24px);
  pointer-events: none;
}

/* The key right under the map: the rings, the rank colors and symbols on this map, the change marks. */
.lm-key { gap: 8px 16px; }
.lm-key li { gap: 8px; }
.lm-key-chip { min-width: 30px; height: 24px; padding: 0 6px; border-radius: 12px; font-size: var(--t-0); }
.lm-key .swatch { width: 14px; height: 14px; }
.lm-swatch { display: inline-block; flex: none; width: 18px; height: 18px; }
.lm-mark-key { width: 20px; height: 20px; }
.lm-center-key { stroke: var(--accent); }
.lm-sel-key { stroke: var(--ink); }
.lm-dense-note { padding: 8px 12px; border-radius: var(--r-2); background: var(--tile); font-size: var(--t-1); color: var(--ink-2); }
@media (min-width: 640px) { .lm-dense-note { display: none; } }

/* Beside the map: the last update, the two figures with the comparison, the choice of the scan
   to compare with, the bar, what stands out, the list and the businesses. */
.lm-fresh { display: grid; gap: var(--s-1); min-width: 0; }
.lm-schedule { max-width: 70ch; }
.lm-strip { display: grid; gap: var(--s-2); min-width: 0; }
.lm-kpis { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.lm-kpi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; font-size: var(--t-2); color: var(--ink-2); }
.lm-kpi-num { font-size: var(--t-5); font-weight: 600; line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; }
.lm-kpi .delta { align-self: center; }
/* What the average counts, on a line of its own under the figure. */
.lm-kpi-base { flex: 1 0 100%; font-size: var(--t-1); color: var(--ink-2); }
.lm-older { font-size: var(--t-2); font-weight: 500; color: var(--ink); }
.lm-change { max-width: 60ch; font-size: var(--t-2); font-weight: 500; color: var(--ink); }
.lm-kpi-note { font-size: var(--t-1); color: var(--ink-3); }
.lm-side-block { display: grid; gap: var(--s-3); min-width: 0; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.lm-side-title { font-size: var(--t-3); font-weight: 600; color: var(--ink); }
/* A side block's title with its Demo data label beside it (under it when there is no room). */
.lm-side-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); min-width: 0; }
.lm-bar-note { margin-top: calc(0px - var(--s-3)); font-size: var(--t-1); color: var(--ink-2); }

/* What stands out: plain sentences, each with a small mark in the area's accent. */
.lm-insights { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.lm-insights li { position: relative; padding-left: 20px; font-size: var(--t-2); color: var(--ink); }
.lm-insights li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: var(--area); }
.lm-insights-note { font-size: var(--t-1); color: var(--ink-3); }

/* The choice of the scan to compare with. The select shares a row with Show only while it keeps
   220 px; below 480 px the select has a full row, and Show a full-width row under it (a 44 px
   tall target, as every button), so a long choice is never cut short. */
.lm-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); min-width: 0; }
.lm-controls .field { flex: 1 1 220px; min-width: 0; }
.lm-controls-actions { flex: none; }
@media (max-width: 479.98px) {
  .lm-controls .field { flex: 1 1 100%; }
  .lm-controls-actions { flex: 1 1 100%; }
  .lm-controls-actions .btn { width: 100%; }
}

/* The list of every spot, one block per state, one open at a time. */
.lm-bands { display: grid; gap: 8px; min-width: 0; }
.lm-band { min-width: 0; border-top: 1px solid var(--line); }
.lm-band:first-child { border-top: 0; }
.lm-band > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font-size: var(--t-2); font-weight: 600; color: var(--ink); }
.lm-band > summary::-webkit-details-marker { display: none; }
.lm-band-name { min-width: 0; }
.lm-band-count { font-size: var(--t-1); font-weight: 500; color: var(--ink-3); }
.lm-band-chevron { margin-left: auto; color: var(--ink-3); }
.lm-band[open] > summary .lm-band-chevron { transform: rotate(180deg); }
.lm-band .row-meta { color: var(--ink-2); }
.lm-band .swatch { width: 14px; height: 14px; }

/* One spot's details, in place: a tile inside the hero (no box in a box). */
.lm-point .panel-head { flex-wrap: nowrap; align-items: flex-start; }
.lm-point .panel-title { font-size: var(--t-3); line-height: 1.35; }
.lm-point .lm-close { margin: -8px -8px 0 0; flex: none; }
.lm-rank-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.rank-chip.lm-rank-pill { height: auto; min-height: 32px; padding: 4px 14px; border-radius: var(--r-pill); font-size: var(--t-3); line-height: 1.3; }
.lm-point-change { font-size: var(--t-2); color: var(--ink-2); }
.lm-point-why { font-size: var(--t-2); color: var(--ink-2); }
.lm-point-recenter a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-2); }
.lm-point-sub { font-size: var(--t-2); font-weight: 600; color: var(--ink); }
.lm-rivals { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--t-2); color: var(--ink-2); }
.lm-rivals li { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.lm-rival-rank { display: inline-flex; justify-content: flex-end; flex: none; min-width: 2ch; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lm-rival-self { color: var(--ink); font-weight: 600; }
.lm-rival-self .lm-rival-rank { color: var(--area); }
.lm-rival-gap { line-height: 1; color: var(--ink-3); }

/* The scan settings in their panel. */
.lm-scan-form { max-width: none; }
.lm-form-grid { display: grid; align-items: start; gap: var(--s-4); min-width: 0; }
@media (min-width: 760px) { .lm-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lm-estimate { max-width: 72ch; font-size: var(--t-2); color: var(--ink); }
.lm-center-line { font-size: var(--t-2); color: var(--ink-2); overflow-wrap: anywhere; }
.lm-about-sub, .lm-tech-sub { margin-top: 4px; font-size: var(--t-2); font-weight: 600; color: var(--ink); }

@media (forced-colors: active) {
  .lm-pt:focus-visible, .lm-scroll:focus-visible { outline-color: Highlight; }
  .lm-center, .lm-sel, .lm-sel-key, .lm-center-key { stroke: CanvasText; }
}


/* ------------------------------------------------ Google */

/* The screen's rhythm: one gap between its blocks, wider on a computer. */
.rk-page { display: grid; gap: var(--s-4); min-width: 0; }
.rk-page > .banner { margin-bottom: 0; }
.rk-page > .next-action { margin-top: 0; }
/* The breakdowns of Details: two equal columns from 1024 px (the edges line up), each panel
   its own height, so no panel stretches into empty space; one column on a phone and a tablet. */
.rk-insights, .rk-col { display: grid; gap: var(--s-4); min-width: 0; align-content: start; }
@media (min-width: 640px) {
  .rk-page, .rk-insights, .rk-col { gap: var(--s-5); }
}
@media (min-width: 1024px) {
  .rk-page { gap: var(--s-6); }
  .rk-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* The period, the filters on (chips that take them off) and the filter button. */
.rk-controls { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-3); min-width: 0; }
.rk-controls:empty { display: none; }
.rk-period { min-width: 0; }
/* On a phone the period's three choices take one row of their own, three equal cells. */
@media (max-width: 639.98px) {
  .rk-period { flex: 1 1 100%; }
  .rk-period .segmented ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.rk-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2); min-width: 0; flex: 1 1 auto; }
.rk-filter { min-width: 0; }
.rk-filter[open] { flex-basis: 100%; }
.rk-filter > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t-2);
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}
.rk-filter > summary::-webkit-details-marker { display: none; }
.rk-filter > summary:hover { border-color: var(--accent-line); }
.rk-filter[open] .rk-filter-chevron { transform: rotate(180deg); }
.rk-filter .filter-bar { margin: var(--s-3) 0 0; }
.rk-chosen-list { justify-content: flex-end; }
a.rk-chosen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  max-width: 100%;
  padding: 4px 10px 4px 14px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: var(--t-1);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.rk-chosen:hover { background: var(--tile-hover); }
a.rk-chosen .icon { flex: none; }
@media (max-width: 639.98px) {
  .rk-filters { justify-content: flex-start; }
  .rk-chosen-list { justify-content: flex-start; }
}

/* The band's quiet lines: the period and what it is compared with, then why it is not compared. */
.rk-band-meta { display: grid; gap: 6px; min-width: 0; }
/* An example business's figures band: its Demo data badge on a row of its own over the period. */
.rk-demo-mark { margin-bottom: 6px; }
.rk-meta { display: flex; flex-wrap: wrap; gap: 2px 0; margin: 0; font-size: var(--t-1); color: var(--ink-3); }
.rk-meta-item { min-width: 0; }
.rk-meta-item + .rk-meta-item::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 8px; border-radius: 50%; background: currentColor; vertical-align: middle; }
.rk-meta-key { color: var(--ink-2); font-weight: 500; }
/* On a phone each part of the line takes its own line, so no separator starts one. */
@media (max-width: 639.98px) {
  .rk-meta { display: grid; gap: 2px; }
  .rk-meta-item + .rk-meta-item::before { display: none; }
}
.rk-compare { max-width: 72ch; font-size: var(--t-1); color: var(--ink-2); text-wrap: pretty; }
.rk-unfair { display: flex; align-items: flex-start; gap: 6px; }
.rk-unfair .icon { flex: none; margin-top: 1px; color: var(--ink-3); }

/* Where the figures come from: the source, the last import and the last available day, in
   one quiet strip under the trend; then the newest days that are left out, when there are. */
.rk-source { display: grid; gap: var(--s-1); min-width: 0; padding: 0 var(--s-1); }
.rk-fresh { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: 0; padding: 0; list-style: none; font-size: var(--t-1); color: var(--ink-3); }
.rk-fresh li { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); min-width: 0; }
.rk-fresh-key { font-weight: 500; color: var(--ink-2); }
.rk-held { max-width: 72ch; margin: 0; font-size: var(--t-1); color: var(--ink-3); text-wrap: pretty; }

/* (build 4) The line under every chart: what the owner sees in it, then its period and its
   source, quieter. The out-of-date line over the trend: the caution tint with its clock, never
   a color alone (the words say "Out of date"). */
.rk-chart-note { max-width: 72ch; margin: var(--s-2) 0 0; font-size: var(--t-1); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.rk-chart-src { color: var(--ink-3); }
.rk-stale { display: flex; align-items: flex-start; gap: var(--s-2); max-width: 72ch; margin: 0 0 var(--s-2); padding: var(--s-2) var(--s-3); border: 1px solid var(--caution-line); border-radius: var(--r-2); background: var(--caution-soft); color: var(--caution-ink); font-size: var(--t-1); line-height: 1.5; }
.rk-stale .icon { flex: none; margin-top: 2px; }
.rk-stale strong { font-weight: 600; }
.rk-movers-part { display: grid; gap: var(--s-2); min-width: 0; }

/* Words inside panels. */
.rk-note { max-width: 68ch; font-size: var(--t-2); color: var(--ink-2); }
.rk-insight { max-width: 68ch; font-size: var(--t-3); font-weight: 500; line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.rk-legend { max-width: 72ch; margin: 0; font-size: var(--t-1); color: var(--ink-3); text-wrap: pretty; }
.rk-sub { margin-top: var(--s-1); font-size: var(--t-2); font-weight: 600; color: var(--ink); }
.rk-address { font-size: var(--t-1); color: var(--ink-3); overflow-wrap: anywhere; }
.rk-about-list { max-width: 72ch; }
.rk-link { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; font-weight: 600; overflow-wrap: anywhere; }
/* A link that ends a sentence (the line of what the figures are, who brings the visits) takes a
   line of its own under it: its 44 px box never stretches the line of words it follows. */
.rk-held .rk-link, .rk-insight .rk-link { display: flex; width: fit-content; }
.rk-more { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; }
.rk-end { display: grid; gap: var(--s-3); min-width: 0; }
.rk-of { font-size: var(--t-1); font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Rows of the product's chips: how a search is read, the places that are not on the map. */
.rk-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 0; list-style: none; }
.rk-off-map { display: grid; gap: var(--s-1); min-width: 0; }
.rk-rest { margin: 0; }
.rk-off-label { font-size: var(--t-1); font-weight: 500; color: var(--ink-3); }

/* The searches near the top with no click, and the searches about another page: a soft tile. */
.rk-near { display: grid; gap: 2px; min-width: 0; padding: 12px 12px 4px; border-radius: var(--r-2); background: var(--tile); }
.rk-near-title { font-size: var(--t-2); font-weight: 600; color: var(--ink); }

/* What changed: the searches, then the pages, each across the panel, so a name and its
   "now" note keep one line beside the bars and every chart starts at the top. */
.rk-movers { display: grid; gap: var(--s-5); min-width: 0; align-items: start; }
@media (min-width: 1024px) {
  .rk-movers { gap: var(--s-6); }
}

/* ------------------------------------------------ the short list of the first view */

/* A name with one quiet line, then three figures: how often it was shown, its visits and
   its average position. Each row is its own grid; the figures have fixed columns, so they
   line up under the one quiet heading. */
.rk-short { min-width: 0; }
.rk-short .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  grid-template-areas: "text end chev";
  align-items: center;
  column-gap: var(--s-4);
  row-gap: var(--s-2);
  padding: 10px var(--s-1);
}
.rk-short .row-text { grid-area: text; }
.rk-short .row-title { overflow-wrap: anywhere; }
.rk-short .row-meta { overflow-wrap: anywhere; }
.rk-short .row-end { grid-area: end; font-weight: 400; }
.rk-short .row-chevron { grid-area: chev; }
.rk-figs { display: grid; grid-template-columns: 96px 64px 116px; align-items: center; column-gap: var(--s-4); }
.rk-figs-none { display: block; text-align: right; }
.rk-none { font-size: var(--t-1); color: var(--ink-3); white-space: nowrap; }
.rk-short-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  align-items: end;
  column-gap: var(--s-4);
  padding: 0 var(--s-1) var(--s-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-0);
  font-weight: 500;
  color: var(--ink-3);
}
.rk-short-head .rk-cell { align-items: flex-end; text-align: right; }

/* ------------------------------------------------ the opportunities */

/* Two or three tiles inside their panel, each one sentence, its figures and its links;
   the Opportunities drawing sits beside them where there is room. */
.rk-opps-wrap { display: grid; gap: var(--s-4) var(--s-6); align-items: center; min-width: 0; }
.rk-opp-art { display: none; }
@media (min-width: 900px) {
  .rk-opps-wrap { grid-template-columns: minmax(0, 1fr) auto; }
  .rk-opp-art { display: block; }
}
.rk-opps { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; min-width: 0; }
.rk-opp { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3); align-items: start; min-width: 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-2); background: var(--tile); }
.rk-opp-mark, .rk-closer-mark { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-2); background: var(--area-soft); color: var(--area-ink); }
.rk-opp-text { display: grid; gap: var(--s-1); min-width: 0; }
.rk-opp-title { font-size: var(--t-2); font-weight: 600; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; text-wrap: pretty; }
.rk-opp-evidence { max-width: 68ch; margin: 0; font-size: var(--t-1); color: var(--ink-2); overflow-wrap: anywhere; }
.rk-opp-links { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); margin: 0; }
.rk-opp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); min-width: 0; }
.rk-opp-foot .rk-note { flex: 1 1 240px; margin: 0; }
/* On a narrow phone the icon tile sits over the sentence, so the words keep the width. */
@media (max-width: 479.98px) {
  .rk-opp { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); padding: var(--s-3); }
  .rk-opp-mark { width: 32px; height: 32px; }
}

/* ------------------------------------------------ searches we follow */

.rk-follow { display: grid; gap: var(--s-5); margin: 0; padding: 0; list-style: none; min-width: 0; }
.rk-follow-group { display: grid; gap: var(--s-1); min-width: 0; }
.rk-follow-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--s-4); min-width: 0; }
.rk-follow-name { min-width: 0; font-size: var(--t-2); font-weight: 600; color: var(--ink); }
.rk-follow-total { margin: 0; font-size: var(--t-1); color: var(--ink-3); }
.rk-follow-notes { display: grid; gap: var(--s-2); min-width: 0; }

/* ------------------------------------------------ the ranked list */

.rk-list { min-width: 0; }
.rk-list .row {
  display: grid;
  grid-template-columns: 2em minmax(0, 1fr) auto 18px;
  grid-template-areas: "start text end chev";
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
  padding: 10px 4px;
}
.rk-list .row-start { grid-area: start; justify-content: center; }
.rk-list .row-text { grid-area: text; }
.rk-list .row-meta { overflow-wrap: anywhere; }
.rk-list .row-end { grid-area: end; font-weight: 400; }
.rk-list .row-chevron { grid-area: chev; }
.rk-rank { min-width: 2em; text-align: center; font-size: var(--t-1); font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rk-stats { display: grid; grid-template-columns: 96px 96px 96px 108px; align-items: center; column-gap: 12px; }
.rk-list-plain .rk-stats { grid-template-columns: 96px 112px 108px; }
.rk-list-nochg .rk-stats { grid-template-columns: 96px 96px 108px; }
.rk-list-plain.rk-list-nochg .rk-stats { grid-template-columns: 96px 108px; }
.rk-cell { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.rk-num { font-size: var(--t-2); font-weight: 600; line-height: 1.25; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rk-cap { display: none; font-size: var(--t-0); line-height: 1.2; color: var(--ink-3); }
.rk-trend { display: block; width: 96px; height: 28px; color: var(--accent); }
.rk-trend .spark { width: 100%; height: 100%; }
.rk-trend .spark svg { height: 28px; }
.rk-word {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--neutral-soft);
  color: var(--ink-2);
  font-size: var(--t-1);
  font-weight: 600;
  white-space: nowrap;
}
.rk-word-new { background: var(--accent-soft); color: var(--accent-strong); }
.rk-list-head {
  display: grid;
  grid-template-columns: 2em minmax(0, 1fr) auto 18px;
  align-items: end;
  column-gap: 12px;
  padding: 0 4px 8px;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-0);
  font-weight: 500;
  color: var(--ink-3);
}
.rk-list-head .rk-cell { align-items: flex-end; text-align: right; }
.rk-list-head .rk-trend { height: auto; color: inherit; }
/* The position chip's short words under the "Average position" heading; its full words below. */
.rk-pos .rk-pos-full { display: none; }

/* Below 720 px the figures wrap under the name, each with its unit, and the position chip says
   its full words: the heading that named it is hidden. */
@media (max-width: 719.98px) {
  .rk-list-head, .rk-short-head { display: none; }
  .rk-pos .rk-pos-short { display: none; }
  .rk-pos .rk-pos-full { display: inline-flex; }
  .rk-list .row { grid-template-columns: 2em minmax(0, 1fr) 18px; grid-template-areas: "start text chev" "end end end"; }
  .rk-short .row { grid-template-columns: minmax(0, 1fr) 18px; grid-template-areas: "text chev" "end end"; }
  .rk-stats, .rk-list-plain .rk-stats, .rk-list-nochg .rk-stats, .rk-figs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s-4); }
  .rk-stats, .rk-list-plain .rk-stats, .rk-list-nochg .rk-stats { column-gap: 12px; }
  .rk-figs-none { display: block; text-align: left; }
  .rk-cell { align-items: flex-start; }
  .rk-pos { justify-content: center; }
  .rk-cap { display: block; }
  /* The trend takes the room the figures leave on their line, or a line of its own. */
  .rk-trend { order: 4; flex: 1 1 56px; width: auto; max-width: 120px; height: 24px; margin-top: 2px; }
  .rk-trend:empty { display: none; }
  .rk-trend .spark svg { height: 24px; }
}


/* ---------------------------------------------------- Recommendations */

/* The band: the answers by kind as link chips, then the groups as the segmented control. */
.rec-kinds-line { display: flex; flex-wrap: wrap; gap: 0 8px; margin: 2px 0 0; }
.rec-band-groups { margin-top: 8px; }
/* What the group tabs count (recommended changes, not questions), said once above them. */
.rec-band-unit { margin: 12px 0 0; color: var(--ink-2); font-size: var(--t-1); font-weight: 600; }
.rec-band-groups .segmented ul { background: var(--tile); }

/* The filter: one quiet disclosure under the band, its body full width when open. */
.rec-controls { display: grid; gap: 12px; margin-top: 16px; min-width: 0; }
.rec-controls > .details { max-width: 100%; }
.rec-controls > .details[open] { background: var(--surface); }
.rec-controls .filter-bar { margin-bottom: 0; }
@media (min-width: 900px) {
  .rec-controls > .details:not([open]) { justify-self: start; min-width: 16rem; }
}

.rec-saved-block { display: grid; gap: 8px; min-width: 0; }
.rec-saved-title { font-size: var(--t-2); font-weight: 600; color: var(--ink-2); }
.rec-saved { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rec-saved-item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  min-width: 0;
  padding: 0 2px 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  background: var(--surface);
}
.rec-saved-item > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  font-size: var(--t-2);
  font-weight: 600;
}
.rec-saved-item > a[aria-current] { color: var(--ink); text-decoration-thickness: 2px; }
.rec-saved-item .form-inline { flex: none; }

/* "Needs you": a group for each kind of answer, each with its own heading. */
.rec-kinds { display: grid; gap: 32px; min-width: 0; }
.rec-kind { display: grid; gap: 12px; min-width: 0; scroll-margin-top: 88px; }
.rec-kind-head { display: grid; gap: 2px; min-width: 0; }
.rec-kind-title { font-size: var(--t-3); font-weight: 600; color: var(--ink); }
.rec-kind-note { max-width: 68ch; font-size: var(--t-2); color: var(--ink-2); text-wrap: pretty; }

/* A card of the list: the question, one line, what it is needed for, the meters, one action. */
/* Each card keeps its own height: a short card never shows its buttons under an empty area. */
.rec-ask { align-self: start; }
/* (Build 4) The questions for you as compact rows, one under the other under their kind's
   heading: from 900 px the question, its line and what it decides on the left, its actions on
   the right. Only the first row's action is the strong one. */
.rec-rows .grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.rec-rows .rec-ask { gap: 8px; padding: var(--s-4) var(--s-5); }
@media (min-width: 900px) {
  .rec-rows .rec-ask { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: var(--s-6); row-gap: 8px; align-items: start; }
  .rec-rows .rec-ask > .card-head, .rec-rows .rec-ask > .card-body { grid-column: 1; }
  .rec-rows .rec-ask > .card-foot { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; }
}
/* A meter never breaks inside itself: on a narrow card the second one moves to its own line whole. */
.rec-meters .meter { white-space: nowrap; }
.rec-ask .card-title, .rec-card .card-title { font-size: var(--t-3); }
.rec-ask .card-body, .rec-card .card-body { gap: 10px; }
.rec-suggestion { color: var(--ink); }
.rec-suggestion-key { font-weight: 600; }
.rec-why { color: var(--ink-2); }
.rec-outcome { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ink); }

/* What an answer is needed for: a count, then rows; one link each, a line between, never run together. */
.rec-unlocks, .rec-also { display: grid; gap: 2px; min-width: 0; }
.rec-unlocks-label, .rec-also-label { font-size: var(--t-1); font-weight: 500; color: var(--ink-3); }
.rec-unlocks .row, .rec-also .row { min-height: 44px; padding: 6px 0; }
.rec-unlocks .row-title, .rec-also .row-title { color: var(--accent); font-weight: 500; }
.rec-unlocks .row-link:hover .row-title, .rec-also .row-link:hover .row-title { text-decoration: underline; }
.rec-unlocks .details, .rec-also .details { margin-top: 4px; background: transparent; }

.rec-meters { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.rec-how { flex: 1 1 100%; color: var(--ink-2); font-size: var(--t-2); }
.rec-answer-form { display: block; max-width: none; flex: 1 1 100%; }
.rec-answer { display: flex; flex-wrap: wrap; gap: 8px; }
.rec-answer .btn { flex: 1 1 8rem; }
/* A link to the page that shows the wording takes the whole row on a phone, so its words never wrap. */
.rec-answer > a.btn { flex: 1 1 100%; }
@media (min-width: 640px) { .rec-answer .btn, .rec-answer > a.btn { flex: 0 1 auto; } }
.rec-ask .card-foot > .btn { flex: 1 1 100%; }
@media (min-width: 640px) { .rec-ask .card-foot > .btn { flex: 0 1 auto; } }
.rec-not-shown { padding: 8px 12px; border-radius: var(--r-1); background: var(--tile); }

/* ------------------------------------------------ one recommendation */

/* In the decision rail each part takes the rail's full width: the wording, the others it covers, the answer. */
#decide .rail-action > .rec-now,
#decide .rail-action > form,
#decide .rail-action > .details,
#decide .rail-action > .rec-also { flex: 1 1 100%; min-width: 0; }
/* "I sent it to my website team" or "I did this step" first, its own row above Not now. */
#decide .rail-action > .rec-mark { margin-bottom: 4px; }
#decide .rail-action > .details { background: transparent; }
.rec-lead { color: var(--ink); font-size: var(--t-3); max-width: 68ch; }
.rec-fact { max-width: 68ch; padding: 10px 12px; border-radius: var(--r-1); background: var(--tile); color: var(--ink); font-size: var(--t-2); }
.rec-key { font-weight: 600; color: var(--ink); }
.rec-now { font-size: var(--t-2); color: var(--ink-2); }
.rec-decision { display: grid; gap: 12px; max-width: none; }
.rail-panel .rec-decision .details { background: transparent; }
.rec-sub { display: grid; gap: 4px; min-width: 0; }
.rec-sub-title { font-size: var(--t-2); font-weight: 600; color: var(--ink); }
.rec-stands-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin-top: 8px; font-size: var(--t-2); color: var(--ink-2); }
.rec-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
/* The story's head: the way to the live website, above the six parts. */
.rec-track { min-width: 0; }
.rec-track .rec-outcome { margin: 0; }
/* The rule a town page is held to, on the area's tint. */
.rec-rule { max-width: 68ch; margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-1); background: var(--area-soft); border: 1px solid var(--area-line); color: var(--ink); font-size: var(--t-2); }
.rec-roles { margin: 0; color: var(--ink-2); font-size: var(--t-2); }
/* A page's row: its name and address beside its two links; a long address breaks at its hyphens. */
#affects .row-end { gap: 4px; }
#affects .row-meta { overflow-wrap: anywhere; }

/* The prepared wording: where it goes, what the page says now, then the prepared text. */
.rec-word { display: grid; gap: 6px; padding: 12px 0; min-width: 0; }
.rec-word + .rec-word { border-top: 1px solid var(--line); }
.rec-word-where { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: var(--t-1); color: var(--ink-3); }
.rec-word-part { font-weight: 600; color: var(--ink-2); }
.rec-word-now, .rec-word-new { display: grid; gap: 4px; padding: 8px 12px; border-radius: var(--r-1); font-size: var(--t-2); }
.rec-word-now { background: var(--tile); color: var(--ink-2); }
.rec-word-new { background: var(--surface); color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); }
.rec-word-key { font-size: var(--t-1); font-weight: 600; color: var(--ink-3); }

/* The evidence: one line each, its kind as a word, its source and date quiet under it. */
.rec-evidence { display: grid; margin: 0; padding: 0; list-style: none; }
.rec-ev { display: grid; gap: 4px; justify-items: start; padding: 12px 0; }
.rec-ev + .rec-ev { border-top: 1px solid var(--line); }
.rec-ev-text { color: var(--ink); font-size: var(--t-2); max-width: 68ch; }
.rec-ev-meta { color: var(--ink-3); font-size: var(--t-1); }
.rec-ev-kept { margin-top: 8px; }
.rec-ev-kept a { display: inline; padding: 12px 0; margin: -12px 0; }
.rec-kind-meanings { margin-top: 12px; }
.rec-findings { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.rec-finding { display: grid; gap: 6px; min-width: 0; }
.rec-finding-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-weight: 600; color: var(--ink); }
.rec-more-blocks { gap: 12px; margin-top: 8px; }
/* The full list it sits in, one quiet link: a 44 px target. */
.rec-all-link { margin: 0; font-size: var(--t-2); }
.rec-all-link a { display: inline-flex; align-items: center; min-height: 44px; }
/* Licence words the prepared wording keeps are another decision's: said above the wording. */
.rec-licence-note { margin: 0 0 8px; }
.rec-about { margin-top: 32px; gap: 12px; }
/* A recommendation's technical details: a file name or a record id has no space to break at, so
   it breaks anywhere rather than push the page sideways on a phone. */
.rec-tech-list li { overflow-wrap: anywhere; min-width: 0; }


.res-link, .plan-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-weight: 600; }
.res-pages, .plan-pages, .plan-words { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.plan-words li { color: var(--ink-2); }
.res-notes { margin-top: 8px; }

/* A page in a list: its name (a link, its 44 px target in padding taken back), its address a quiet line. */
.res-page { display: grid; gap: 0; min-width: 0; padding: 4px 0; }
.res-page .res-link, .res-page .plan-link { display: block; min-height: 0; min-width: 44px; padding: 12px 0; margin: -12px 0; justify-self: start; }
.res-page-path { color: var(--ink-3); font-size: var(--t-1); font-weight: 400; overflow-wrap: anywhere; }

/* ----------------------------------------------------------- Results */

.res-band-periods, .plan-band-where, .plan-band-facts { margin: 0 0 4px; color: var(--ink-2); font-size: var(--t-1); }
/* A link inside a line of text keeps the line: its 44 px target is padding that does not move the text. */
.plan-band-facts .plan-link, .plan-stage-intro .plan-link { display: inline; min-height: 0; min-width: 0; padding: 12px 0; }
.res-lanes { margin-top: var(--gap-section); }
.res-lane-intro, .plan-stage-intro { margin: -8px 0 0; color: var(--ink-3); font-size: var(--t-1); max-width: 68ch; }
.res-lane .rows { margin-top: -4px; }

/* The question of yours that holds some changes, then those changes. */
.res-ask-group { display: grid; gap: 4px; }
.res-ask-group + .res-ask-group { margin-top: 12px; }
.res-ask { display: grid; gap: 2px; justify-items: start; padding: 12px 14px 4px; border-radius: var(--r-2); background: var(--tile); box-shadow: inset 3px 0 0 var(--caution-strong); }
.res-ask-kind { margin: 0; color: var(--caution-ink); font-size: var(--t-1); font-weight: 600; }
.res-ask-text { margin: 0; color: var(--ink); font-size: var(--t-2); font-weight: 500; max-width: 68ch; text-wrap: pretty; }
/* How to answer a go-ahead whose wording its page cannot show: one quiet line under its link. */
.res-ask-how, .plan-how { margin: -6px 0 6px; max-width: 68ch; color: var(--ink-2); font-size: var(--t-1); }
.plan-how { flex: 1 1 100%; margin: 4px 0 0; }

.res-reading { max-width: 72ch; color: var(--ink); }
.res-live-mark { margin: 0; color: var(--ink-2); font-size: var(--t-1); }
.res-pattern { max-width: 72ch; }
.res-pairs { gap: 16px; }
.res-form { display: grid; gap: 12px; min-width: 0; max-width: none; flex: 1 1 100%; }
.res-form .input { width: 100%; min-height: 44px; }
#publication .rail-action > form, #publication .rail-action > .details, #next .rail-action > .ring { flex: 1 1 100%; min-width: 0; }
#publication .rail-action > .details { margin-top: 4px; }
#next .rail-action { align-items: center; }
/* A key beside a link keeps its first line level with the link's words. */
.res-facts dd > .res-link, .res-handoff + .res-link { display: inline; min-height: 0; min-width: 0; padding: 12px 0; margin: -12px 0; }
.res-facts dd { min-width: 0; }
.res-handoff { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; margin-bottom: 4px; color: var(--ink-2); font-size: var(--t-1); font-weight: 400; }
.res-more-blocks, .plan-more-blocks { gap: 12px; margin-top: 24px; }
.res-about, .plan-about, .facts-about { margin-top: 32px; gap: 12px; }
.res-learning-reading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; margin: 0; max-width: 72ch; color: var(--ink); }
.res-learning-key { color: var(--ink-2); font-size: var(--t-1); font-weight: 600; }
.res-learning-said { margin: 0 0 8px; max-width: 72ch; color: var(--ink); }
/* Links from other websites: the websites an export lists, and the listing sites to check. */
.res-sub { margin: var(--s-4) 0 var(--s-1); color: var(--ink); font-size: var(--t-2); font-weight: 600; }
.res-sites { display: grid; gap: var(--s-1); margin: 0; padding: 0; list-style: none; max-width: 72ch; }
.res-sites > li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--s-3); min-width: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-2); background: var(--tile); }
.res-site { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.res-site-links { color: var(--ink-2); font-size: var(--t-1); }
/* Your own listing there, already checked by hand: a line of its own under the site. */
/* Your Google Business Profile while its check counts: said apart from the sites to check, verified. */
.res-site-verified { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--s-3); max-width: 72ch; min-width: 0; margin: var(--s-2) 0 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-2); background: var(--surface); box-shadow: inset 3px 0 0 var(--good); }
.res-site-checked { flex: 1 1 100%; min-width: 0; color: var(--ink); font-size: var(--t-1); }
.res-site-checked .res-link { display: inline; min-height: 0; min-width: 0; padding: 12px 0; margin: -12px 0; }
.res-links-change { margin: var(--s-2) 0 0; color: var(--ink); max-width: 72ch; }
.res-listings { margin-top: var(--s-2); }
.res-learned-empty { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ink-2); font-size: var(--t-2); }
.res-learned-empty .icon { flex: none; color: var(--ink-3); }
/* The first visual: one sentence that counts the stages, the source line, a drawing beside them from 760 px. */
.res-stages-line, .plan-kinds { margin: 0; color: var(--ink); font-size: var(--t-3); max-width: 68ch; text-wrap: pretty; }
.res-art, .plan-art { width: 140px; }
@media (max-width: 759.98px) { .res-art, .plan-art { display: none; } }
.res-stages .flow, .plan-pipeline .flow { margin-top: var(--s-5); }
/* Build 4: the stages and the plan's steps are the visual inside the area hero, under their own heading. */
.res-stages-title, .plan-pipeline-title { margin: 0 0 var(--s-2); color: var(--ink); font-size: var(--t-3); font-weight: 600; line-height: 1.3; }
.res-stages, .plan-pipeline { min-width: 0; }
/* The way to Settings after what going live rests on: a link in a line of text keeps the line. */
.plan-how .plan-inline-link, .plan-also-how .plan-inline-link { display: inline; min-height: 0; min-width: 0; padding: 12px 0; margin: -12px 0; font-size: var(--t-1); }
/* What "not live yet" rests on: the day the website was last read, one quiet line. */
.res-basis { margin: var(--s-4) 0 0; max-width: 72ch; color: var(--ink-2); font-size: var(--t-1); }
.res-basis .res-link { display: inline; min-height: 0; min-width: 0; padding: 12px 0; margin: -12px 0; }
.res-after { margin-top: var(--gap-section); }
/* Links from other websites: not connected, what it needs, and the rule that no link is bought. */
.res-links .panel-body > p { margin: 0; max-width: 68ch; }
.res-links .panel-body > p + p { margin-top: var(--s-3); }
.res-needs, .res-links-note { color: var(--ink-2); font-size: var(--t-1); }
.res-needs-key { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------ Content plan */

.plan-stages { margin-top: var(--gap-section); }
.plan-lead { color: var(--ink); font-size: var(--t-3); }
.plan-every { color: var(--ink-3); font-size: var(--t-1); }
.plan-unblock-answer { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.plan-yours { margin: 0; color: var(--ink); font-size: var(--t-3); font-weight: 600; }
.plan-own { margin-top: var(--s-3); }
.plan-unblock .details { margin-top: var(--s-3); }
.plan-apart { margin: 0; }
.plan-pipeline .plan-band-facts { margin: var(--s-4) 0 0; }
.plan-step { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; color: var(--ink); font-size: var(--t-2); }
/* The plan's own stages: an empty one stays at every width, quieter, so no step looks missing on a phone. */
#plan-flow > .flow-step[class*="-empty"] .flow-count, #plan-flow > .flow-step[class*="-empty"] .flow-name { color: var(--ink-3); }
#plan-flow > .flow-step[class*="-empty"] .flow-icon { background: var(--neutral-soft); color: var(--ink-3); }
/* The narrowest phones (the plan's and the Results' flow under 300 px of its own): one stage to a
   line, its icon, name and count side by side and its state under them, so "Needs you", "10 need
   your answer" and "Technician review" never break inside a tile two to a row would leave about
   120 px wide. */
@container flow (max-width: 299.98px) {
  #plan-flow > .flow-step, #res-flow > .flow-step { flex: 1 1 100%; }
  #plan-flow .flow-node, #res-flow .flow-node { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "icon name count" "icon state state"; align-items: center; gap: 2px 12px; min-height: 56px; padding: 10px 12px; }
  #plan-flow > .flow-step + .flow-step::before, #res-flow > .flow-step + .flow-step::before { display: block; left: 24px; top: -13px; border-top: 0; border-bottom: 2px solid var(--line-control); }
}

.plan-pieces { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .plan-pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A piece is one link as a whole card: its title's link covers the card, its Agent work link sits above it. */
.plan-piece { position: relative; display: grid; align-content: start; gap: 6px; min-width: 0; padding: 12px 16px; border-radius: var(--r-2); background: var(--tile); }
.plan-piece:hover { background: var(--tile-hover); }
.plan-piece-title { margin: 0; font-size: var(--t-2); font-weight: 600; line-height: 1.35; }
.plan-piece-title .plan-link { display: inline; min-height: 0; min-width: 0; margin: 0; color: var(--ink); text-decoration: none; }
.plan-piece-title .plan-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-2); }
/* The focus ring is the card's own outline, inside its edge: seen at every width, never clipped. */
.plan-piece-title .plan-link:focus-visible { outline: none; }
.plan-piece:has(.plan-piece-title .plan-link:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }
@supports not selector(:has(*)) {
  .plan-piece-title .plan-link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: -3px; }
}
.plan-piece:hover .plan-piece-title .plan-link { color: var(--accent-strong); text-decoration: underline; }
.plan-piece-work { position: relative; z-index: 1; margin: -4px 0; }
.plan-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.plan-chip-warn { background: var(--caution-soft); box-shadow: inset 0 0 0 1px var(--caution-line); color: var(--caution-ink); }
.plan-piece-waits { color: var(--ink-2); font-size: var(--t-1); }
.plan-key { font-weight: 600; color: var(--ink-2); }
.plan-question { color: var(--ink); }
.plan-subtitle { margin: 4px 0; font-size: var(--t-2); font-weight: 600; color: var(--ink); }
.plan-sub { display: grid; gap: 2px; }
.plan-upkeep { margin: 8px 0 4px; max-width: 72ch; color: var(--ink); }
.plan-upkeep-key { font-weight: 600; }

/* A piece's outline: its questions as the page's headings. */
.plan-outline { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--r-2); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.plan-outline-page { font-size: var(--t-1); font-weight: 600; color: var(--ink-3); overflow-wrap: anywhere; }
.plan-outline-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: plan-h; }
.plan-outline-list li { position: relative; padding: 6px 0 6px 34px; color: var(--ink); font-weight: 600; line-height: 1.35; counter-increment: plan-h; }
.plan-outline-list li::before { content: counter(plan-h); position: absolute; left: 0; top: 5px; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-size: var(--t-0); font-weight: 600; }
.plan-fact-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
/* What else a piece waits on, in the rail above its links: the whole row, each with where it is cleared. */
#plan-next .rail-action > .plan-also { flex: 1 1 100%; min-width: 0; margin-bottom: 4px; }
.plan-also-item { display: block; min-width: 0; }
/* The place that clears it follows its words in the same line: its 44 px target is padding that keeps the line. */
.plan-also .plan-also-link { display: inline; min-height: 0; min-width: 0; padding: 12px 0; margin: -12px 0; white-space: nowrap; }
.plan-also-how { display: block; margin-top: 2px; color: var(--ink-2); font-size: var(--t-1); }
/* The wordings never to use, under the fact that rules each out. */
.plan-never-group + .plan-never-group { margin-top: var(--s-3); }
.plan-never-why { margin: 0 0 var(--s-1); color: var(--ink); font-size: var(--t-1); font-weight: 600; }

/* ---------------------------------------------------- Business facts */

.facts-intro { margin: -8px 0 0; color: var(--ink-3); font-size: var(--t-1); max-width: 68ch; }
.facts-list { display: grid; margin: 0; padding: 0; list-style: none; }
.facts-list > li + li { border-top: 1px solid var(--line); }
.facts-list .facts-item { border: 0; border-radius: 0; background: transparent; }
.facts-list .facts-item > summary { padding: 10px 4px; align-items: flex-start; gap: 12px; }
.facts-list .facts-item > summary > .icon { margin-top: 2px; }
.facts-list .facts-item > .details-body { padding: 0 4px 14px; }
/* Everything a line says sits under its name, so the chevron stays at the top right on a phone too. */
.facts-sum { display: grid; justify-items: start; gap: 2px; flex: 1 1 auto; min-width: 0; }
.facts-label { font-size: var(--t-2); font-weight: 600; color: var(--ink); }
.facts-value { display: block; color: var(--ink-2); font-size: var(--t-2); font-weight: 400; }
.facts-held { color: var(--ink-3); font-size: var(--t-1); font-weight: 400; }
.facts-use { display: block; margin-top: 4px; color: var(--ink-3); font-size: var(--t-1); overflow-wrap: anywhere; }
.facts-never { display: inline-flex; align-items: center; margin-top: 2px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--neutral-soft); color: var(--ink-2); font-size: var(--t-0); font-weight: 600; white-space: nowrap; }
.facts-sub { margin-top: 8px; font-size: var(--t-1); font-weight: 600; color: var(--ink-2); }
.facts-kv { font-size: var(--t-2); }
.facts-tech-title { margin: 12px 0 4px; font-size: var(--t-2); font-weight: 600; color: var(--ink); }
.facts-tech-title:first-child { margin-top: 0; }
.proof-all { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; color: var(--ink); font-size: var(--t-2); }
.proof-groups { gap: 8px; }
.proof-group > summary { align-items: center; }
.proof-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; flex: 1 1 auto; min-width: 0; }
.proof-group-title { font-size: var(--t-2); font-weight: 600; color: var(--ink); }
.proof-shows { color: var(--ink-3); font-size: var(--t-1); font-weight: 400; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.proof-permission { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; margin-top: 2px; }
.proof-note { color: var(--ink-3); font-size: var(--t-1); font-weight: 400; }
.proof-counts { margin: 0; max-width: 72ch; color: var(--ink-3); font-size: var(--t-1); }
.proof-needed, .proof-questions { display: grid; gap: 2px; margin: 0; padding-inline-start: 1.25em; min-width: 0; }
.proof-questions .plan-link { display: inline; min-height: 0; min-width: 0; padding: 12px 0; margin: -12px 0; }
.proof-ask { color: var(--ink); }

/* The business card: the area's tile, the name and the region, then the lines the register confirms. */
.facts-card-top { display: flex; align-items: center; gap: var(--s-4); min-width: 0; margin-bottom: var(--s-4); }
.facts-card-top > .area-tile { flex: none; }
.facts-card-names { display: grid; gap: var(--s-1); min-width: 0; }
.facts-card-name { margin: 0; color: var(--ink); font-size: var(--t-4); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.facts-card-region { margin: 0; color: var(--ink-2); font-size: var(--t-2); }
.facts-card-missing { margin: var(--s-3) 0 0; color: var(--ink-3); font-size: var(--t-1); max-width: 68ch; }
.facts-card #facts-split { margin-top: var(--s-5); }
.facts-sections { margin-top: var(--gap-section); }
/* Does your website say the same: one row per detail, its state in words at the end (under it on a phone). */
.facts-check-lead { margin: 0 0 var(--s-2); color: var(--ink); font-size: var(--t-3); max-width: 68ch; }
.facts-checks { display: grid; margin: 0; padding: 0; list-style: none; }
.facts-checks > li + li { border-top: 1px solid var(--line); }
.facts-check { display: grid; gap: var(--s-2); min-width: 0; padding: var(--s-3) 0; }
@media (min-width: 640px) { .facts-check { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--s-4); } }
.facts-check-main { display: grid; gap: var(--s-1); min-width: 0; }
.facts-check-label { margin: 0; color: var(--ink); font-size: var(--t-3); font-weight: 600; }
.facts-check-said { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.facts-check-why { margin: 0; color: var(--ink-2); font-size: var(--t-1); max-width: 68ch; }
.facts-check-date { color: var(--ink-3); }
.facts-check-pages { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-1) 0 0; min-width: 0; }
.facts-check-key { color: var(--ink-2); font-size: var(--t-1); font-weight: 600; }
/* The opportunity that puts a statement right, and the way to an AI answer: one line under it. */
.facts-check-rec { margin: var(--s-1) 0 0; color: var(--ink-2); font-size: var(--t-1); max-width: 68ch; }
.facts-check-rec .plan-link { display: inline; min-height: 0; min-width: 0; padding: 12px 0; margin: -12px 0; font-size: var(--t-1); }
/* Beside a confirmed fact on the card or in a list: an AI assistant said something else. */
.facts-ai-flag { display: flex; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-1); color: var(--caution-ink); font-size: var(--t-1); }
.facts-ai-flag > .icon { flex: none; margin-top: 2px; color: var(--caution-strong); }
.facts-ai-flag .plan-link { display: inline; min-height: 0; min-width: 0; padding: 12px 0; margin: -12px 0; font-size: var(--t-1); }
.facts-ai-said { display: inline-flex; align-items: center; margin-top: 2px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--caution-soft); color: var(--caution-ink); font-size: var(--t-0); font-weight: 600; white-space: nowrap; }
/* Inside an opened fact line: what the assistant said, above the line's own details. */
.facts-item .details-body > .facts-ai-flag { margin: 0 0 var(--s-3); }
.facts-check-state { justify-self: start; }
.facts-check-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-3) 0 0; color: var(--ink-2); font-size: var(--t-1); max-width: 72ch; }
.facts-check-more, .facts-reviews-rule { margin: var(--s-3) 0 0; max-width: 72ch; }
.facts-reviews-rule { color: var(--ink-2); font-size: var(--t-1); }
/* The facts by subject: each a closed block that names its facts. */
.facts-topics { gap: var(--s-2); }
.facts-topic > summary { align-items: flex-start; }
.facts-topic > summary > .icon { margin-top: 2px; }
.facts-topic-sum { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.facts-topic-title { color: var(--ink); font-size: var(--t-3); font-weight: 600; }
.facts-topic-names { color: var(--ink-3); font-size: var(--t-1); font-weight: 400; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Customer reviews: what the facts and the website say, then what it needs, in order. */
.facts-reviews .panel-body > p:first-child { margin: 0; max-width: 68ch; }
.facts-reviews-part { margin-top: var(--s-4); }
.facts-reviews-part > .facts-sub { margin: 0 0 var(--s-1); }
.facts-says { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.facts-says > li { display: grid; gap: 2px; min-width: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-2); background: var(--tile); }
.facts-says-label { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.facts-says-words { color: var(--ink-2); font-size: var(--t-1); }
.facts-needs { display: grid; gap: var(--s-2); margin: 0; padding-inline-start: 1.5em; max-width: 72ch; }
.facts-needs .plan-link, .facts-reviews-rule .plan-link { display: inline; min-height: 0; min-width: 0; padding: 12px 0; }

/* Build 4: the hours line's state (Verified Nov 13 / Needs verification) beside its value, and where the lines come from. */
.facts-state { display: block; margin-top: var(--s-1); }
.facts-card-source { margin: var(--s-3) 0 0; color: var(--ink-2); font-size: var(--t-1); max-width: 72ch; }
/* The check of the hours on the source you chose: a quiet tile under the card's lines. */
.facts-hours { display: grid; gap: var(--s-2); min-width: 0; margin-top: var(--s-5); padding: var(--s-4); border-radius: var(--r-2); background: var(--tile); }
.facts-hours-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); min-width: 0; }
.facts-hours-title { margin: 0; color: var(--ink); font-size: var(--t-3); font-weight: 600; line-height: 1.3; text-wrap: balance; }
.facts-hours-sentence { margin: 0; color: var(--ink); max-width: 68ch; }
.facts-hours-lines { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; max-width: 40rem; }
.facts-hours-lines > li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--s-4); min-width: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-2); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.facts-hours-days { color: var(--ink); font-weight: 600; }
.facts-hours-time { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.facts-hours-notes { margin: 0; color: var(--ink-2); font-size: var(--t-1); max-width: 72ch; }
.facts-hours .details { margin-top: var(--s-1); background: var(--surface); }
.facts-hours-how { display: grid; gap: var(--s-2); margin: 0; padding-inline-start: 1.25em; max-width: 72ch; color: var(--ink-2); font-size: var(--t-1); }
.facts-hours .facts-check-more .plan-link { display: inline-flex; }
.facts-hours .facts-diffs { margin-top: var(--s-1); }
/* An observed difference: what was observed, what is verified and a suggestion, each with its label, never mixed. */
.facts-diff-parts { display: grid; gap: var(--s-2); margin: var(--s-1) 0 0; min-width: 0; }
.facts-diff-part { display: grid; gap: 2px; min-width: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-2); background: var(--tile); }
.facts-hours .facts-diff-part { background: var(--surface); }
@media (min-width: 640px) { .facts-diff-part { grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s-3); } }
.facts-diff-part > dt { color: var(--ink-2); font-size: var(--t-1); font-weight: 600; }
.facts-diff-part > dd { margin: 0; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.facts-diff-seen { box-shadow: inset 3px 0 0 var(--caution-strong); }
.facts-diff-fact { box-shadow: inset 3px 0 0 var(--good); }
.facts-diff-suggestion { box-shadow: inset 3px 0 0 var(--line-control); }
.facts-diff-quote, .facts-diff-also, .facts-diff-how { display: block; margin-top: 2px; color: var(--ink-2); font-size: var(--t-1); }
/* A row a card links to lands below the sticky navigation; a second address on a row takes no room. */
.facts-check, .facts-hours, #facts-check-form { scroll-margin-top: 96px; }
.facts-check-main { position: relative; }
.facts-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; scroll-margin-top: 96px; }
/* The Google Business Profile's row: what its check by hand found, then what a connection would add. */
.facts-profile-check { margin: 0; color: var(--ink); max-width: 68ch; }
/* The hours check's own action: record a new check by hand. */
.facts-hours-act { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; margin: var(--s-1) 0 0; }
/* Said under it when a check is already on record for today: a different one waits for another day. */
.facts-hours-today { margin: var(--s-1) 0 0; color: var(--ink-2); font-size: var(--t-1); max-width: 68ch; }
/* A refused form: its message first on the page, focused on load (the layout script focuses [data-flash]). */
.facts-form-refused:focus { outline: none; }
.facts-form-refused:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-2); }
/* The form that records a check by hand. */
.facts-form { display: grid; gap: var(--s-4); min-width: 0; }
.facts-form-steps { display: grid; gap: var(--s-2); margin: 0; padding-inline-start: 1.5em; max-width: 72ch; color: var(--ink-2); }
.facts-form-pair { display: grid; gap: var(--s-3); min-width: 0; }
@media (min-width: 640px) { .facts-form-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.facts-form-days { display: grid; gap: var(--s-3); min-width: 0; }
@media (min-width: 640px) { .facts-form-days { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.facts-form-part { display: grid; gap: var(--s-2); min-width: 0; padding: var(--s-3); border-radius: var(--r-2); background: var(--tile); }
.facts-form-card { margin: 0; color: var(--ink-2); font-size: var(--t-1); overflow-wrap: anywhere; }
.facts-form .field-error { overflow-wrap: anywhere; }


/* ------------------------------------------------ Pages and Competitors */

.pc-screen { display: grid; gap: var(--s-5); min-width: 0; }
.pc-screen > * { min-width: 0; }
.pc-screen .rail { display: grid; gap: var(--s-4); }
.pc-screen .pc-more { display: grid; gap: var(--s-3); min-width: 0; }
@media (min-width: 760px) { .pc-screen { gap: var(--s-6); } }

.pc-screen .pc-sub { margin: 4px 0 0; font-size: var(--t-2); font-weight: 600; line-height: 1.3; color: var(--ink); }
.pc-screen .details-body h3.pc-sub { margin-top: 8px; }
.pc-screen .details-body h3.pc-sub:first-child { margin-top: 0; }
.pc-screen .panel-body > h3.pc-sub:not(:first-child) { margin-top: 12px; }
.pc-screen .pc-head-note { font-size: var(--t-1); color: var(--ink-3); }
.pc-screen .pc-quiet { max-width: 68ch; margin: 0; font-size: var(--t-1); color: var(--ink-3); text-wrap: pretty; }
/* A figure's comparison ("you: 1,893", "covered by 2 or more competitors") on its own line under it. */
.pc-screen .kpi-value .kpi-unit { flex-basis: 100%; font-size: var(--t-1); }

/* Standalone links: one 44 px line each. */
.pc-screen .pc-links { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pc-screen .pc-links li { min-width: 0; overflow-wrap: break-word; }
.pc-screen .pc-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.pc-screen .rail-action .pc-rail-links,
.pc-screen .rail-action .pc-sub,
.pc-screen .rail-action > .details { flex: 1 1 100%; }
.pc-screen .rail-action > .details { background: transparent; }
.pc-screen .pc-rail-links li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pc-screen .pc-rail-links li + li { border-top: 1px solid var(--line); }
.pc-screen .pc-rail-links a { font-size: var(--t-2); font-weight: 500; line-height: 1.35; text-decoration: none; padding: 6px 0; }
.pc-screen .pc-rail-links a:hover { text-decoration: underline; }
.pc-screen .pc-note-link a,
.pc-screen .pc-issue-link a,
.pc-screen .pc-private a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.pc-screen .pc-private a { font-weight: 500; color: var(--ink-2); text-decoration-color: var(--line-strong); }
.pc-screen .pc-private a:hover { color: var(--accent-strong); }
.pc-screen .pc-issue-link,
.pc-screen .pc-private { margin: 0; }
.pc-screen .pc-issue-link { padding-left: 20px; }
/* The band's one quiet link (re-reading in Settings). */
.pc-screen .band-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.pc-screen .pc-meta-link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-1); font-weight: 500; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.pc-screen .pc-meta-link:hover { color: var(--accent-strong); }
@media (min-width: 1024px) { .pc-screen .rail { position: sticky; top: 88px; align-self: start; } }

.pc-screen .url { overflow-wrap: anywhere; word-break: break-word; }
.pc-screen .pc-wrap { overflow-wrap: anywhere; word-break: break-word; }
/* Record notes carry long words: they wrap, so an opened block never widens the page. */
.pc-screen .details-body,
.pc-screen .details-body .list,
.pc-screen .details-body .kv dd,
.pc-screen .panel-body .list { overflow-wrap: anywhere; }
.pc-screen .details-body > * { min-width: 0; }

/* ------------------------------------------------- chips, dots, figures */

.pc-screen .pc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pc-screen .pc-chips li { display: inline-flex; align-items: center; min-height: 28px; max-width: 100%; padding: 2px 10px; border-radius: var(--r-pill); background: var(--tile); color: var(--ink-2); font-size: var(--t-1); overflow-wrap: anywhere; }
.pc-screen .pc-chips .pc-chip-flag { background: var(--caution-soft); color: var(--caution-ink); font-weight: 500; }

.pc-screen .pc-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; }
.pc-screen .pc-dot-attention { background: var(--caution-strong); }
.pc-screen .pc-dot-fine { background: var(--good); }
.pc-screen .pc-dot-test-copy { background: var(--c5); }
.pc-screen .pc-dot-unknown { background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink-3); }
.pc-screen .pc-sev { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; }
.pc-screen .pc-sev-high { background: var(--bad-strong); }
.pc-screen .pc-sev-medium { background: var(--caution-strong); }
.pc-screen .pc-sev-low { background: var(--muted); }
.pc-screen .pc-sev-info { background: var(--accent); }

.pc-screen .pc-fig { display: inline-flex; align-items: center; justify-content: flex-end; gap: 12px; }
.pc-screen .pc-fig-trend { display: inline-flex; width: 88px; color: var(--accent); }
.pc-screen .pc-fig-num { min-width: 7em; text-align: right; font-weight: 600; white-space: nowrap; }
.pc-screen .pc-fig-unit { font-size: var(--t-1); font-weight: 400; color: var(--ink-3); }
.pc-screen .pc-fig-none { font-size: var(--t-1); font-weight: 400; color: var(--ink-3); }
.pc-screen .pc-fig .pos-chip { min-width: 6.5em; }
.pc-screen .pc-tags { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 18em; }
.pc-screen .pc-tags .chip { min-height: 24px; padding: 1px 8px; font-size: var(--t-0); }

/* A phone puts a row's figures under its title (the shared split rows): they start at its left. */
@media (max-width: 639.98px) {
  /* The figures wrap: the position chip in full words takes the next line where the row has no room. */
  .pc-screen .rows-split .pc-fig { flex-wrap: wrap; row-gap: 6px; justify-content: flex-start; }
  .pc-screen .rows-split .pc-fig-num { min-width: 0; text-align: left; }
  .pc-screen .rows-split .pc-tags { justify-content: flex-start; max-width: none; }
  .pc-screen .rows-split .row-start { align-self: start; margin-top: 5px; }
}
@media (max-width: 419.98px) { .pc-screen .pc-fig-trend { display: none; } }
.pc-screen .segmented { margin-bottom: 4px; }
/* The list's views on a phone: two equal columns, so no choice sits alone on a row of its own. */
@media (max-width: 639.98px) {
  .pc-screen #pc-list .segmented ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The period and what the band's search figures count, said once beside them. */
.pc-screen .pc-band-period { margin: 8px 0 0; font-size: var(--t-1); color: var(--ink-2); }

/* ------------------------------------------------------------ issues */

.pc-screen .pc-issues { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pc-screen .pc-issue { display: grid; gap: 6px; min-width: 0; padding: 12px 14px; border-radius: var(--r-2); background: var(--tile); }
.pc-screen .pc-issue-head { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.pc-screen .pc-issue-head .pc-sev { margin-top: 6px; }
.pc-screen .pc-issue-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--t-2); font-weight: 500; color: var(--ink); overflow-wrap: break-word; text-wrap: pretty; }
.pc-screen .pc-issue-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding-left: 20px; font-size: var(--t-1); color: var(--ink-3); }
.pc-screen .pc-issue .details { margin-left: 20px; background: transparent; }
.pc-screen .pc-evidence { font-size: var(--t-1); }
.pc-screen .pc-changes li { color: var(--ink-2); }

/* -------------------------------------------------------- checklists */

.pc-screen .pc-checklist { display: grid; margin: 0; padding: 0; list-style: none; }
.pc-screen .pc-checklist > li + li { border-top: 1px solid var(--line); }
.pc-screen .pc-check-details > summary { list-style: none; }
.pc-screen .pc-check-details > summary::-webkit-details-marker { display: none; }
.pc-screen .pc-check-head { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 4px; cursor: pointer; }
.pc-screen .pc-check-head:hover .pc-check-name { color: var(--accent-strong); }
.pc-screen .pc-check-head:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-1); }
.pc-screen .pc-check-icon { display: inline-flex; flex: none; }
.pc-screen .pc-verdict-pass { color: var(--good); }
.pc-screen .pc-verdict-warn { color: var(--caution-strong); }
.pc-screen .pc-verdict-fail { color: var(--bad-strong); }
.pc-screen .pc-verdict-unknown { color: var(--ink-3); }
.pc-screen .pc-check-name { flex: 1 1 auto; min-width: 0; font-size: var(--t-2); font-weight: 500; color: var(--ink); }
.pc-screen .pc-check-result { flex: 0 1 auto; min-width: 0; font-size: var(--t-1); color: var(--ink-2); text-align: right; overflow-wrap: break-word; }
.pc-screen .pc-check-chevron { flex: none; color: var(--ink-3); transition: transform 0.15s ease; }
.pc-screen .pc-check-details[open] .pc-check-chevron { transform: rotate(180deg); }
.pc-screen .pc-check-body { display: grid; gap: 10px; min-width: 0; padding: 4px 4px 16px 32px; font-size: var(--t-2); color: var(--ink-2); }
.pc-screen .pc-check-body > * { min-width: 0; }
.pc-screen .pc-trail { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.pc-screen .pc-structure { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pc-screen .pc-structure li { min-width: 0; overflow-wrap: anywhere; color: var(--ink-2); }
.pc-screen .pc-structure .badge { margin-right: 4px; }
/*
 * Build 4: from 640 px the checks are a board of tiles (the mark, the name, the result under it),
 * so the website's health reads at a glance; the check that is open takes the whole row.
 */
@media (min-width: 640px) {
  .pc-screen .pc-checklist { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); grid-auto-flow: row dense; gap: var(--s-2); }
  .pc-screen .pc-checklist > li + li { border-top: 0; }
  .pc-screen .pc-checklist > li { min-width: 0; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); scroll-margin-top: 96px; }
  .pc-screen .pc-checklist > li:has(> details[open]) { grid-column: 1 / -1; }
  .pc-screen .pc-checklist > li:has(.pc-verdict-warn) { box-shadow: inset 3px 0 0 var(--caution-strong); }
  .pc-screen .pc-checklist > li:has(.pc-verdict-fail) { box-shadow: inset 3px 0 0 var(--bad-strong); }
  .pc-screen .pc-checklist .pc-check-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-content: center; column-gap: 10px; row-gap: 2px; min-height: 72px; padding: 10px 12px; border-radius: var(--r-2); }
  .pc-screen .pc-checklist .pc-check-head .pc-check-icon { grid-column: 1; grid-row: 1; }
  .pc-screen .pc-checklist .pc-check-head .pc-check-name { grid-column: 2; grid-row: 1; }
  .pc-screen .pc-checklist .pc-check-head .pc-check-chevron { grid-column: 3; grid-row: 1; }
  .pc-screen .pc-checklist .pc-check-head .pc-check-result { grid-column: 2 / 4; grid-row: 2; text-align: left; }
  .pc-screen .pc-checklist .pc-check-body { padding: 4px 16px 16px 40px; }
}
/* On a phone: the mark, the name and the chevron on one line, the result under the name. */
@media (max-width: 559.98px) {
  .pc-screen .pc-check-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; align-items: center; }
  .pc-screen .pc-check-head .pc-check-icon { grid-column: 1; grid-row: 1; }
  .pc-screen .pc-check-head .pc-check-name { grid-column: 2; grid-row: 1; }
  .pc-screen .pc-check-head .pc-check-chevron { grid-column: 3; grid-row: 1; }
  .pc-screen .pc-check-head .pc-check-result { grid-column: 2 / 4; grid-row: 2; text-align: left; }
  .pc-screen .pc-check-body { padding-left: 4px; }
}

/* -------------------------------------------- the comparison matrix */

.pc-screen .pc-matrix-key .icon { color: var(--ink-2); }
.pc-screen .pc-you-swatch { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
/* Positioned, so the words for screen readers in its cells scroll with it, never past the page. */
.pc-screen .pc-matrix-wrap { position: relative; min-width: 0; overflow-x: auto; }
.pc-screen .pc-matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-1); }
.pc-screen .pc-matrix th,
.pc-screen .pc-matrix td { padding: 6px 2px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--line); }
.pc-screen .pc-matrix thead th,
.pc-screen .pc-matrix thead td { border-bottom: 1px solid var(--line-strong); vertical-align: bottom; }
.pc-screen .pc-matrix tbody tr:last-child > * { border-bottom: 0; }
.pc-screen .pc-matrix .pc-topic { min-width: 9.5em; padding-left: 0; text-align: left; font-weight: 500; }
.pc-screen .pc-topic-name { display: block; color: var(--ink); font-size: var(--t-2); }
.pc-screen .pc-topic-count { display: block; color: var(--ink-3); font-size: var(--t-0); font-weight: 400; }
.pc-screen .pc-col { min-width: 56px; max-width: 84px; padding-bottom: 6px; }
/* Short names read across, on up to four lines (a full name such as "Precision Garage Door Service" fits); the full name is the link's name and title. */
.pc-screen .pc-col-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; padding: 6px 1px; color: var(--ink-2); font-size: var(--t-0); font-weight: 500; line-height: 1.25; text-align: center; text-decoration: none; overflow-wrap: normal; word-break: normal; hyphens: auto; }
.pc-screen a.pc-col-name { display: -webkit-box; min-height: 44px; }
.pc-screen a.pc-col-name:hover { color: var(--accent-strong); text-decoration: underline; }
.pc-screen .pc-matrix .pc-you { background: var(--accent-soft); }
.pc-screen .pc-matrix th.pc-you { border-radius: var(--r-1) var(--r-1) 0 0; }
.pc-screen .pc-matrix th.pc-you .pc-col-name { color: var(--accent-strong); font-weight: 600; }
.pc-screen .pc-matrix .pc-yes .icon { color: var(--ink-2); }
.pc-screen .pc-matrix .pc-yes.pc-you .icon { color: var(--accent-strong); }
.pc-screen .pc-none { display: inline-block; width: 10px; height: 2px; border-radius: 1px; background: var(--line-strong); vertical-align: middle; }
.pc-screen .pc-none-gap,
.pc-screen .pc-matrix .pc-own-gap .pc-none { width: 14px; height: 4px; border-radius: 2px; background: var(--caution-strong); }
.pc-screen .pc-matrix .pc-row-off .pc-topic-name { color: var(--ink-3); }
.pc-screen .pc-matrix tbody tr:hover > * { background: var(--tile); }
.pc-screen .pc-matrix tbody tr:hover > .pc-you { background: var(--accent-soft); }

/* On a phone: one bar per topic and whether you have a page on it. */
.pc-screen .pc-cover { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.pc-screen .pc-cover-row { display: grid; gap: 4px; min-width: 0; }
.pc-screen .pc-cover-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.pc-screen .pc-cover-name { font-size: var(--t-2); font-weight: 500; color: var(--ink); }
.pc-screen .pc-cover-off .pc-cover-name { color: var(--ink-3); }
.pc-screen .pc-cover-bar { height: 8px; border-radius: 4px; background: var(--neutral-soft); overflow: hidden; }
.pc-screen .pc-cover-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--muted); }
.pc-screen .pc-cover-count { font-size: var(--t-1); color: var(--ink-3); }
/* Build 4: the bars are the picture at every width; two columns of them on a computer. */
@media (min-width: 900px) { .pc-screen .pc-cover { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; } }
/* On a phone the chip of your own column has one place: its own line under the topic's name. */
@media (max-width: 639.98px) {
  .pc-screen .pc-cover-head { display: grid; justify-content: start; gap: 2px; }
}
.pc-screen .pc-you-chip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-1); font-weight: 500; white-space: nowrap; }
.pc-screen .pc-you-yes { color: var(--accent-strong); }
.pc-screen .pc-you-no { color: var(--caution-ink); }
.pc-screen .pc-you-none,
.pc-screen .pc-you-off { color: var(--ink-3); font-weight: 400; }

.pc-screen .pc-sites { display: grid; gap: 4px; margin-top: 8px; }

/*
 * The matrix from 1024 px, where its 15 columns fit; the bars and the
 * list of competitors below it. These come after both blocks' own rules, so they win.
 */
.pc-screen .pc-wide { display: none; }
@media (min-width: 1024px) {
  .pc-screen .pc-wide { display: block; }
  .pc-screen ul.pc-wide { display: flex; }
  .pc-screen .pc-narrow { display: none; }
}

/* Two charts side by side on a computer, each with the rest of its sites under it. */
.pc-screen .pc-two { display: grid; gap: 24px; min-width: 0; }
.pc-screen .pc-depth-col { display: grid; gap: 12px; align-content: start; min-width: 0; }
@media (min-width: 900px) { .pc-screen .pc-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }

/* A competitor's topics beside yours: two short bars per topic on one scale. */
.pc-screen .pc-pairs { display: grid; gap: 14px 32px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .pc-screen .pc-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pc-screen .pc-pair { display: grid; gap: 4px; min-width: 0; }
.pc-screen .pc-pair-name { font-size: var(--t-2); font-weight: 500; color: var(--ink); }
/* The bar keeps a width of its own beside a long name, so it never vanishes on a 320 px phone. */
.pc-screen .pc-pair-row { display: grid; grid-template-columns: minmax(4.5em, 10.5em) minmax(3em, 1fr) minmax(6.5em, auto); align-items: center; gap: 8px; font-size: var(--t-1); color: var(--ink-2); }
/* The firm's whole name, on two lines where it is long: never cut, so it reads as the page's heading says it. */
.pc-screen .pc-pair-who { min-width: 0; line-height: 1.3; overflow-wrap: break-word; }
.pc-screen .pc-pair-track { height: 8px; border-radius: 4px; background: var(--neutral-soft); overflow: hidden; }
.pc-screen .pc-pair-fill { display: block; height: 100%; border-radius: 4px; }
.pc-screen .pc-pair-them .pc-pair-fill { background: var(--muted); }
.pc-screen .pc-pair-you .pc-pair-fill { background: var(--accent); }
.pc-screen .pc-pair-you .pc-pair-who { font-weight: 600; color: var(--ink); }
.pc-screen .pc-pair-gap .pc-pair-you .pc-pair-val { color: var(--caution-ink); font-weight: 600; }
.pc-screen .pc-pair-off .pc-pair-name,
.pc-screen .pc-pair-off .pc-pair-val { color: var(--ink-3); }
.pc-screen .pc-pair-off .pc-pair-them .pc-pair-fill { background: var(--line-strong); }

/* ------------------------------------------- notes, ways to get in touch */

.pc-screen .pc-notes { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pc-screen .pc-note { display: grid; gap: 4px; min-width: 0; padding: 12px 14px; border-radius: var(--r-2); background: var(--tile); scroll-margin-top: 96px; }
.pc-screen .pc-note:target { box-shadow: inset 0 0 0 2px var(--accent-line); }
.pc-screen .pc-note-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 12px; }
.pc-screen .pc-note-title { flex: 1 1 14em; min-width: 0; margin: 0; font-size: var(--t-2); font-weight: 500; color: var(--ink); }
.pc-screen .pc-note-state { margin: 0; font-size: var(--t-1); color: var(--ink-3); }
.pc-screen .pc-note-action { margin: 0; max-width: 68ch; font-size: var(--t-2); color: var(--ink-2); }
.pc-screen #pc-notes-rest { margin-top: 10px; }
.pc-screen .pc-note-link { margin: 0; }
.pc-screen .pc-note .details { background: transparent; }

.pc-screen .pc-ways { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
.pc-screen .pc-way { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: start; padding: 10px 12px; border-radius: var(--r-2); background: var(--tile); color: var(--ink-3); }
.pc-screen .pc-way .icon { grid-row: 1 / span 2; margin-top: 2px; }
.pc-screen .pc-way-yes .icon { color: var(--good); }
.pc-screen .pc-way-name { font-size: var(--t-2); font-weight: 500; color: var(--ink); }
.pc-screen .pc-way-count { font-size: var(--t-1); }
.pc-screen .pc-facts { gap: 6px 16px; }

/* --------------------------- suggestions, page lists, why a site is listed */

.pc-screen .pc-sugs { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.pc-screen .pc-sug { display: grid; gap: var(--s-1); min-width: 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-2); background: var(--tile); overflow-wrap: break-word; scroll-margin-top: 96px; }
.pc-screen .pc-sug > p { margin: 0; max-width: 68ch; color: var(--ink-2); }
.pc-screen .pc-sug .pc-sug-title { font-size: var(--t-2); font-weight: 600; color: var(--ink); }
.pc-screen .pc-sug .pc-sug-found { font-size: var(--t-1); }
.pc-screen .pc-sug .pc-sug-proposal { padding: var(--s-2) var(--s-3); border-left: 3px solid var(--area-line); border-radius: var(--r-1); background: var(--surface); color: var(--ink); }
.pc-screen .pc-sug .pc-sug-cover { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); font-size: var(--t-1); }
.pc-screen .pc-sug .pc-sug-cover a,
.pc-screen .pc-sug .pc-sug-more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.pc-screen .pc-sug .pc-sug-more { font-size: var(--t-1); }
.pc-screen .pc-ideas li { overflow-wrap: anywhere; }

/* The pages of a check across the website: each a 44 px link, side by side where they fit. */
.pc-screen .pc-page-links { display: grid; gap: 0 var(--s-4); margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16em), 1fr)); }
.pc-screen .pc-page-links li { min-width: 0; overflow-wrap: break-word; }
.pc-screen .pc-page-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
/* A page with a note under it: the note hugs its own link, and a gap parts it from the next page. */
.pc-screen .pc-page-notes { row-gap: var(--s-1); }
.pc-screen .pc-page-notes li { display: grid; align-content: start; }
/* Still a 44 px target: the same padding above and below its words however many lines they take. */
.pc-screen .pc-page-notes a { padding-block: 10px; }
.pc-screen .pc-page-note { margin-top: -8px; padding-bottom: var(--s-2); font-size: var(--t-1); line-height: 1.4; color: var(--ink-3); overflow-wrap: anywhere; }

.pc-screen .pc-lead { margin: 0; max-width: 68ch; font-size: var(--t-lead); color: var(--ink); text-wrap: pretty; }

/* ------------------------------------- build 4: the parts inside the area hero */

/* The hero's own parts carry the screen's class, so these rules reach them and nothing else. */
.pc-screen.pc-hero-part { gap: var(--s-2); }
.pc-screen.pc-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-3); }
.pc-screen .pc-hero-line { margin: 0; font-size: var(--t-2); color: var(--ink-2); text-wrap: pretty; }
/* A second quiet line (who the sampled searches showed most) takes a row of its own. */
.pc-screen .pc-hero-note { flex: 1 1 100%; }
/* A research note's own opportunity, one 44 px link under its row (never inside the row's link). */
.pc-screen .pc-note-rec { margin: -6px 0 6px; padding: 0 4px; }
/* The visual summary: one solid card on the stage (never glass under text). */
.pc-screen.pc-overview { gap: var(--s-5); padding: var(--s-4); border-radius: var(--r-3); border: 1px solid var(--area-line); background: var(--surface); }
.pc-screen.pc-overview .stacked-bar,
.pc-screen.pc-overview figure { margin: 0; }
@container hero (min-width: 760px) {
  .pc-screen.pc-overview { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; padding: var(--s-5); }
  .pc-screen.pc-overview > :only-child { grid-column: 1 / -1; }
}

/* The checks across the website by result: a count with its icon and words, each a link. */
.pc-screen .pc-tally { display: grid; gap: var(--s-2); min-width: 0; }
.pc-screen .pc-tally-title { margin: 0; font-size: var(--t-2); font-weight: 600; color: var(--ink); }
.pc-screen .pc-tally-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5em), 1fr)); gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.pc-screen .pc-tally-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--s-2); min-height: 64px; padding: var(--s-2) var(--s-3); border-radius: var(--r-2); border: 1px solid var(--line); background: var(--tile); color: var(--ink); text-decoration: none; }
.pc-screen .pc-tally-item:hover { border-color: var(--area-line); background: var(--area-wash); }
.pc-screen .pc-tally-item:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pc-screen .pc-tally-item .pc-check-icon { grid-row: 1 / span 2; }
.pc-screen .pc-tally-num { font-size: var(--t-5); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pc-screen .pc-tally-word { grid-column: 2; font-size: var(--t-1); color: var(--ink-2); }
/* On a narrow hero each count is one 44 px line: its icon, its number and its words side by side. */
@container hero (max-width: 559.98px) {
  .pc-screen .pc-tally-list { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pc-screen .pc-tally-item { grid-template-columns: auto auto minmax(0, 1fr); column-gap: 10px; min-height: 44px; padding: 4px 12px; }
  .pc-screen .pc-tally-item .pc-check-icon { grid-row: auto; }
  .pc-screen .pc-tally-num { font-size: var(--t-4); }
  .pc-screen .pc-tally-word { grid-column: auto; font-size: var(--t-2); }
}

/* Who covers what, at a glance: your topics by mark as one bar (the hero of Competitors). */
.pc-screen .pc-topic-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.pc-screen .pc-topic-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; max-width: 100%; padding: 4px 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--tile); font-size: var(--t-1); color: var(--ink-2); overflow-wrap: anywhere; }
.pc-screen .pc-topic-chip.pc-you-yes { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-strong); font-weight: 500; }
.pc-screen .pc-topic-chip.pc-you-no { border-color: var(--caution-line); background: var(--caution-soft); color: var(--caution-ink); font-weight: 500; }
.pc-screen .pc-topic-chip.pc-you-none,
.pc-screen .pc-topic-chip.pc-you-off { color: var(--ink-3); font-weight: 400; }
.pc-screen .pc-cover-sub { margin: 0; font-size: var(--t-2); font-weight: 600; color: var(--ink); }

/* The full table of a comparison, on request: it scrolls inside its own frame on a narrow screen. */
.pc-screen .pc-full-table .pc-matrix-wrap { overflow-x: auto; }
.pc-screen .pc-full-table .pc-matrix { min-width: 860px; }
.pc-screen .pc-full-table .details-body { min-width: 0; }

.pc-screen .pc-why { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.pc-screen .pc-why li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: start; min-width: 0; }
.pc-screen .pc-why-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-2); background: var(--area-soft); color: var(--area); }
.pc-screen .pc-why-text { display: grid; gap: 2px; min-width: 0; color: var(--ink); overflow-wrap: break-word; }
.pc-screen .pc-why-source { font-size: var(--t-1); color: var(--ink-3); }


/* ------------------------------------------------------- shared pieces */

.footer-text { max-width: 68ch; }

.sys-page { display: grid; gap: var(--s-5); min-width: 0; }
@media (min-width: 1024px) { .sys-page { gap: var(--s-6); } }
.sys-page > .section, .sys-page > .next-action { margin-top: 0; }

.sys-intro { color: var(--ink-2); }
.sys-what { font-size: var(--t-2); color: var(--ink-2); }
.sys-link { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.sys-state-key, .sys-next-key, .sys-fact-key { font-weight: 500; color: var(--ink-3); }
.sys-state-line { font-size: var(--t-2); font-weight: 600; color: var(--ink); }
.sys-next { display: block; font-size: var(--t-1); color: var(--ink-2); }
.sys-next .sys-next-key { margin-right: var(--s-1); }
.sys-if { color: var(--ink-2); }
.sys-subhead { margin-top: var(--s-2); font-size: var(--t-3); }
/* A section of these screens drawn as a panel: its title is a section heading. */
.sys-h2 > .panel-head > .panel-title { font-size: var(--t-4); letter-spacing: -0.015em; }
@media (min-width: 760px) { .sys-h2 > .panel-head > .panel-title { font-size: var(--t-h2); } }

/* A disclosure inside a row or a card: a 44 px summary, closed by default. */
.sys-more { min-width: 0; }
.sys-more > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: var(--t-2);
  font-weight: 600;
  color: var(--accent);
}
.sys-more > summary::-webkit-details-marker { display: none; }
.sys-more > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.sys-more[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.sys-more > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-1); }
.sys-more-body { display: grid; gap: var(--s-2); min-width: 0; padding: 0 0 var(--s-2); font-size: var(--t-2); color: var(--ink-2); }
.sys-more-body p { max-width: 68ch; }

/* Commands and steps a person follows. */
.sys-steps { display: grid; gap: var(--s-3); margin: 0; padding-left: 1.4em; font-size: var(--t-2); color: var(--ink-2); }
.sys-steps li { padding-left: var(--s-1); }
.sys-steps li > span { display: block; }
.sys-code {
  max-width: 100%;
  margin: var(--s-2) 0 0;
  padding: var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  background: var(--surface-sunk);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-1);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.sys-code code { font-size: inherit; }
.sys-account { color: var(--ink); overflow-wrap: anywhere; }
.sys-after { font-weight: 600; color: var(--ink); }
.sys-signin .card-title { font-size: var(--t-3); }

/* Compact rows: a name and its state, one or two lines, more on request. */
.sys-srcs { display: grid; margin: 0; padding: 0; list-style: none; }
.sys-srcs > li + li { border-top: 1px solid var(--line); }
.sys-src { display: grid; gap: var(--s-1); min-width: 0; padding: var(--s-3) 0 var(--s-1); }
.sys-srcs > li:first-child { padding-top: 0; }
.sys-src-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-3); min-width: 0; }
.sys-src-name { min-width: 0; font-size: var(--t-2); font-weight: 600; color: var(--ink); overflow-wrap: break-word; }
.sys-src .sys-what { font-size: var(--t-1); }
.sys-src-line { font-size: var(--t-1); color: var(--ink-2); }
.sys-src-meta { display: flex; flex-wrap: wrap; gap: 2px var(--s-4); padding-bottom: var(--s-2); font-size: var(--t-1); color: var(--ink-3); }
.sys-src-file code { overflow-wrap: anywhere; }

.sys-tech { font-size: var(--t-1); }
.sys-tech li { overflow-wrap: anywhere; }
.sys-after-story { display: grid; gap: var(--s-3); min-width: 0; }

/* A quiet row of facts: a key and its value, wrapping as one line of text. */
.sys-facts-row { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: 0; padding: 0; list-style: none; font-size: var(--t-1); color: var(--ink-2); }
.sys-facts-row > li { min-width: 0; }
.sys-facts-row .sys-fact-key { margin-right: var(--s-1); }

/* ------------------------------------------------------------- Activity */

/* What needs you first, then the story, then what comes next; on a computer the story is beside the other two. */
.sys-act { display: grid; gap: var(--s-5); align-items: start; min-width: 0; }
.sys-act > * { min-width: 0; }
@media (min-width: 1024px) {
  .sys-act {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-areas: "story needs" "up needs";
    grid-template-rows: auto 1fr;
  }
  .sys-act > .sys-needs-panel { grid-area: needs; }
  .sys-act > .sys-story { grid-area: story; }
  .sys-act > .sys-up-panel { grid-area: up; }
}
/* The rest of Home's list, behind "N more things wait for you": compact cards, one under the other. */
.sys-needs-rest { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.sys-needs-rest > li { min-width: 0; }
.sys-needs { display: grid; margin: 0; padding: 0; list-style: none; }
.sys-needs > li + li { border-top: 1px solid var(--line); }
.sys-need { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: var(--s-3); min-width: 0; padding: var(--s-3) 0; }
.sys-needs > li:first-child { padding-top: 0; }
.sys-needs > li:last-child { padding-bottom: 0; }
.sys-need-icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--st-soft, var(--neutral-soft));
  color: var(--st-icon, var(--ink-2));
}
.sys-need-body { display: grid; gap: var(--s-2); min-width: 0; }
.sys-need-title { min-width: 0; padding-top: 4px; font-size: var(--t-2); font-weight: 600; line-height: 1.35; color: var(--ink); overflow-wrap: break-word; }
.sys-need-text { display: grid; gap: var(--s-1); min-width: 0; font-size: var(--t-1); color: var(--ink-2); }
.sys-need-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
/* A held item's title on its own line, a link to its page (a 44 px target kept in the line's height). */
.sys-need-item { font-size: var(--t-2); font-weight: 500; color: var(--ink); }
.sys-need-item a { display: block; min-height: 44px; padding: 11px 0; margin: -11px 0; overflow-wrap: break-word; }
.sys-need-text > p + .sys-need-item { margin-top: var(--s-2); }
.sys-mini-list { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.sys-mini-list li { display: grid; gap: 2px; min-width: 0; }
.sys-mini-list a { display: flex; align-items: center; min-height: 44px; }
.sys-mini-list .sys-need-item a { display: block; }
.sys-clear { display: grid; justify-items: start; gap: var(--s-2); font-size: var(--t-2); color: var(--ink-2); }
.sys-channels { overflow-wrap: anywhere; }
.sys-preview { margin: 2px 0 var(--s-1); border-radius: var(--r-2); background: var(--tile); }
.sys-preview > summary { display: flex; align-items: center; min-height: 44px; padding: 0 var(--s-3); cursor: pointer; font-size: var(--t-1); font-weight: 600; color: var(--ink-2); }
.sys-preview > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-2); }
.sys-preview-body { display: grid; gap: var(--s-1); padding: 0 var(--s-3) var(--s-3); }
.sys-message { white-space: pre-line; overflow-wrap: anywhere; color: var(--ink); }

.sys-up { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; font-size: var(--t-2); color: var(--ink); }
.sys-up li { display: flex; align-items: flex-start; gap: var(--s-3); min-width: 0; }
.sys-up-icon { flex: none; margin-top: 3px; color: var(--area); }
.sys-worker { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: var(--t-1); color: var(--ink-2); }
.sys-worker > span:not(.status) { min-width: 0; flex: 1 1 12em; }
/* While the worker is stopped the panel says so before any planned time. */
.sys-worker-stopped { padding: var(--s-3); border-top: 0; border-radius: var(--r-2); background: var(--tile); color: var(--ink); }
.sys-up-zone { font-size: var(--t-1); color: var(--ink-3); }

/* The last 14 days at the head of the story: what was done, what failed, three quiet facts. */
.sys-last-days { display: grid; gap: var(--s-3); min-width: 0; padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.sys-band-facts { gap: var(--s-1) var(--s-5); color: var(--ink-2); }
/* The takeaway of the last 14 days: one sentence of what the counts were. */
.sys-done-line { max-width: 72ch; font-size: var(--t-2); color: var(--ink); }
.sys-band-facts .sys-fact-key { color: var(--ink-3); }

/* The story is the shared day timeline as every screen draws it (links, chips and line height included). */
.sys-story .days { gap: var(--s-4); }
.sys-story .empty-art { border: 0; background: none; padding: var(--s-4) var(--s-2); }
.sys-review { display: grid; gap: var(--s-4); min-width: 0; }
.sys-finding-groups { display: grid; gap: var(--s-4); }
.sys-group-title { margin-bottom: var(--s-2); font-size: var(--t-2); font-weight: 600; color: var(--ink); }
.sys-group-title a { overflow-wrap: break-word; }
.sys-group-why { font-weight: 400; color: var(--ink-3); }
.sys-findings { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.sys-finding { display: grid; gap: 2px; padding-left: var(--s-3); border-left: 2px solid var(--line-strong); }
.sys-finding-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
.sys-finding-title { font-weight: 500; color: var(--ink); }
.sys-finding-when { font-size: var(--t-1); color: var(--ink-3); }
/* A finding as a compact row: its title and state, then one quieter line and its dates. */
.sys-finding-text { font-size: var(--t-1); color: var(--ink-2); }
.sys-finding-seen { font-size: var(--t-0); color: var(--ink-3); }

/* ---------------------------------------------------------- Connections */

/* Every connection by its state: what works counted, then one group of pills per state. */
.sys-states .with-art { align-items: start; }
.sys-states .art { display: none; }
@media (min-width: 900px) { .sys-states .art { display: block; } }
.sys-states-words { display: grid; gap: var(--s-2); min-width: 0; }
.sys-count { max-width: 68ch; font-size: var(--t-lead); font-weight: 600; color: var(--ink); }
/* The list's rest under its count, in quieter words (which are connections, which to arrange). */
.sys-count-more { max-width: 68ch; font-size: var(--t-2); color: var(--ink); }
.sys-next-steps { max-width: 68ch; font-size: var(--t-2); color: var(--ink-2); }
.sys-where { max-width: 68ch; font-size: var(--t-1); color: var(--ink-3); }
.sys-strip { display: grid; gap: var(--s-2); margin: var(--s-2) 0 0; padding: 0; list-style: none; }
.sys-strip-group { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); align-items: start; gap: var(--s-1) var(--s-3); }
.sys-strip-word { padding-top: 3px; font-size: var(--t-1); font-weight: 500; color: var(--ink-2); }
.sys-strip-pills { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.sys-chip { flex-shrink: 1; }
@media (max-width: 639.98px) {
  .sys-strip-group { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
}
.sys-keys .section-head { margin-bottom: var(--s-3); }
.sys-key-grid { display: grid; gap: var(--s-4); align-items: start; }
/* Two columns of their own on a computer: each card is as tall as its words, never a hole beside it. */
.sys-key-col { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
@media (min-width: 900px) {
  .sys-key-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
  .sys-key-col { gap: var(--s-5); }
}
.sys-key .panel-body { gap: var(--s-3); align-content: start; }
.sys-key .panel-title { overflow-wrap: break-word; }
.sys-unlocks { font-size: var(--t-1); color: var(--ink-3); }
/* The owner's next step: a tile in the area's tint, so it is found at a glance. */
.sys-step { display: grid; gap: var(--s-1); min-width: 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-2); background: var(--tile); font-size: var(--t-2); color: var(--ink-2); }
.sys-step-key { font-weight: 600; color: var(--ink); }
.sys-step-none { padding: 0; background: none; font-size: var(--t-1); color: var(--ink-3); }
.sys-notes { display: grid; gap: var(--s-1); margin: 0; padding-left: 1.1em; font-size: var(--t-1); color: var(--ink-2); }
/* Each assistant on its own line: its name, then its state in words. */
.sys-engines { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; font-size: var(--t-2); color: var(--ink); }
.sys-engines li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-3); min-width: 0; }
.sys-engine-name { min-width: 0; overflow-wrap: break-word; }
/* What is not available yet: one quiet line under the pills, never a pill. */
.sys-not-yet { margin-top: var(--s-2); font-size: var(--t-1); color: var(--ink-2); }
.sys-not-yet .sys-fact-key { margin-right: var(--s-1); }
.sys-pair { display: grid; gap: var(--s-5); align-items: start; min-width: 0; }
@media (min-width: 1024px) { .sys-pair { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-6); } }

/* ------------------------------------------------------------- Settings */

/* What runs by itself: the worker's state first, then one row per background job. */
.sys-runs-lead { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); font-size: var(--t-2); color: var(--ink); }
.sys-runs-lead > span:not(.status) { min-width: 0; flex: 1 1 14em; }
.sys-runs-where, .sys-runs-zone { max-width: 72ch; font-size: var(--t-1); color: var(--ink-2); }
.sys-runs-paused { font-weight: 500; color: var(--ink); }
.sys-runs-start { margin-top: calc(0px - var(--s-2)); }
.sys-jobs { display: grid; margin: 0; padding: 0; list-style: none; }
.sys-job {
  display: grid;
  gap: var(--s-2) var(--s-4);
  align-items: start;
  min-width: 0;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title state" "days days" "facts facts" "note note" "change change";
}
/* On a phone the name sits beside its state and the week below them, on one line of its own. */
.sys-job-main { display: contents; }
.sys-job-title { grid-area: title; }
.sys-days { grid-area: days; }
.sys-job-facts { grid-area: facts; }
.sys-job-state { grid-area: state; justify-self: end; }
.sys-job-note { grid-area: note; display: grid; gap: var(--s-1); min-width: 0; font-size: var(--t-1); color: var(--ink-2); }
.sys-job-note .sys-link { min-height: 44px; }
.sys-job-change { grid-area: change; display: grid; gap: var(--s-2); min-width: 0; }
.sys-job-change .sys-intro { font-size: var(--t-2); }
.sys-job-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-3); min-width: 0; }
.sys-job-name { font-size: var(--t-2); font-weight: 600; color: var(--ink); overflow-wrap: break-word; }
.sys-job-when { font-size: var(--t-1); color: var(--ink-2); }
.sys-job.is-quiet .sys-job-name { font-weight: 500; color: var(--ink-2); }
.sys-job-facts { display: grid; gap: var(--s-1) var(--s-4); margin: 0; min-width: 0; font-size: var(--t-1); color: var(--ink-2); }
.sys-job-facts > div { display: grid; align-content: start; gap: 2px; min-width: 0; }
.sys-job-facts dt { font-weight: 500; color: var(--ink-3); }
.sys-job-facts dd { margin: 0; min-width: 0; color: var(--ink); overflow-wrap: break-word; }
/* The week: one mark per day, filled on the days the job runs. */
.sys-days { display: inline-flex; min-width: 0; }
.sys-day-marks { display: inline-flex; flex-wrap: nowrap; gap: var(--s-1); }
.sys-day {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: var(--t-0);
  font-weight: 500;
  color: var(--ink-3);
}
.sys-day.is-on { background: var(--area); color: var(--surface); font-weight: 600; }
/* While the background worker is stopped nothing runs: each planned day is a hollow ring. */
.sys-jobs.is-stopped .sys-day.is-on { background: none; color: var(--ink-2); box-shadow: inset 0 0 0 2px var(--line-control); }
/* The seven marks keep one line on the narrowest phones too. */
@media (max-width: 379.98px) { .sys-day { width: 24px; height: 24px; } }
/* On a computer the rows share one set of columns (a subgrid of the list), so the widest state
   pill widens the state column of every row and the facts columns line up from row to row. */
@media (min-width: 900px) {
  .sys-jobs { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) minmax(8.5em, max-content); column-gap: var(--s-4); }
  .sys-job {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    grid-template-areas: "main facts state" "note note note" "change change change";
  }
  .sys-job-main { grid-area: main; display: grid; gap: var(--s-2); min-width: 0; }
  .sys-job-title, .sys-days { grid-area: auto; }
  .sys-job-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A day of content work: when each step runs, then what happens to a finished draft. */
.sys-daily { display: grid; gap: var(--s-3); min-width: 0; }
.sys-daily-title { font-size: var(--t-3); font-weight: 600; color: var(--ink); }
.sys-daily-lead, .sys-daily-note { max-width: 72ch; font-size: var(--t-1); color: var(--ink-2); }
.sys-daily-note { color: var(--ink); font-weight: 500; }
.sys-day-flow { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.sys-day-step { display: grid; align-content: start; gap: var(--s-1); min-width: 0; padding: var(--s-3); border-radius: var(--r-2); background: var(--tile); }
.sys-day-step:last-child { background: var(--area-soft); }
.sys-day-when { font-size: var(--t-2); font-weight: 600; color: var(--area-ink); }
.sys-day-what { font-size: var(--t-1); color: var(--ink-2); }

/* The pause of the agents' daily work: its state, its one button, then what happens next. */
.sys-pause { display: grid; gap: var(--s-3); min-width: 0; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); }
.sys-pause.is-paused { border-color: var(--line-strong); background: var(--tile); }
.sys-pause-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); min-width: 0; }
.sys-pause-text { max-width: 72ch; font-size: var(--t-2); color: var(--ink-2); }
.sys-pause-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin: 0; }
.sys-pause-after { display: grid; gap: 2px; max-width: 72ch; padding: var(--s-3); border-radius: var(--r-2); background: var(--surface-sunk); font-size: var(--t-1); color: var(--ink); }
.sys-pause-after-label { font-weight: 600; color: var(--ink-2); }

.sys-form { max-width: none; gap: var(--s-4); }
.sys-agents-grid { display: grid; gap: var(--s-5); min-width: 0; }
@media (min-width: 900px) { .sys-agents-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); } }
.sys-col { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.sys-field-pair { display: grid; gap: var(--s-3); min-width: 0; }
@media (min-width: 480px) { .sys-field-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The publishing modes: the way to start carries its mark, the less used choice is quieter. */
.sys-modes .check-text { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
.sys-mode-name { font-weight: 600; }
.sys-mode-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 1px var(--s-2);
  border: 1px solid var(--good-line);
  border-radius: var(--r-pill);
  background: var(--good-soft);
  color: var(--good-ink);
  font-size: var(--t-0);
  font-weight: 600;
}
.sys-mode-drafts { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px dashed var(--line-strong); }
.sys-mode-drafts .sys-mode-name { font-weight: 400; color: var(--ink-2); }
.sys-routine { display: grid; gap: var(--s-1); padding: var(--s-3); border-radius: var(--r-2); background: var(--tile); font-size: var(--t-1); color: var(--ink-2); }
.sys-routine-lead { font-weight: 600; color: var(--ink); }
.sys-routine-lead ~ .sys-routine-lead { margin-top: var(--s-2); }
.sys-never { display: grid; gap: var(--s-1); margin: 0; padding-left: 1.2em; }
.sys-limits-label { margin-bottom: calc(0px - var(--s-2)); font-size: var(--t-2); font-weight: 600; color: var(--ink); }
.sys-agents .check:has(input:disabled) { cursor: not-allowed; color: var(--ink-3); }
.sys-agents .check input:disabled { cursor: not-allowed; }
.sys-doors { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.sys-door { display: grid; grid-template-columns: 6.5em auto minmax(0, 1fr); align-items: baseline; gap: var(--s-1) var(--s-3); font-size: var(--t-2); }
.sys-door-name { font-weight: 500; color: var(--ink); }
.sys-door-line { min-width: 0; color: var(--ink-2); }
@media (max-width: 639.98px) {
  .sys-door { grid-template-columns: auto minmax(0, 1fr); }
  .sys-door-line { grid-column: 1 / -1; }
}
.sys-section .panel-body { gap: var(--s-3); }
.sys-read-what { max-width: 68ch; font-size: var(--t-1); color: var(--ink-2); }
.sys-saved { margin-bottom: 0; }
.sys-change[open] > .sys-more-body { padding-top: var(--s-1); }

/* -------------------------------------------------------------- Details */

.sys-topics ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-1);
  margin: 0;
  padding: var(--s-1);
  list-style: none;
  border-radius: var(--r-2);
  background: var(--neutral-soft);
}
@media (min-width: 760px) { .sys-topics ul { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; } }
.sys-topic {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-1);
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--t-2);
  font-weight: 500;
  overflow-wrap: break-word;
}
.sys-topic:hover { color: var(--ink); background: var(--surface-warm); }
.sys-topic[aria-current] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--e-raised); }
.sys-details { display: grid; gap: var(--s-5); min-width: 0; }
.sys-details > .section { margin-top: 0; }
.sys-details .table code { overflow-wrap: anywhere; }
/* In a record table that scrolls on a phone, a key or a name keeps a readable width: the table
   scrolls sideways instead of squeezing it into a sliver one character wide. */
.sys-details .table-scroll .table code { display: inline-block; min-width: 14ch; }
.sys-details .table-scroll .table td { min-width: 8em; }
/* The store's rows per table: three short columns that fit a phone (358 px), the table names
   breaking after an underscore (the page marks each), never inside a word, the counts and
   headings at word ends, a little less padding. */
.sys-details .sys-store-table .table-scroll .table th,
.sys-details .sys-store-table .table-scroll .table td { min-width: 0; padding: var(--s-3) var(--s-2); }
.sys-details .sys-store-table .table-scroll .table th[scope="row"] { min-width: 0; }
.sys-details .sys-store-table .table-scroll .table thead th,
.sys-details .sys-store-table .table-scroll .table .num { white-space: normal; }
.sys-details .sys-store-table .table-scroll .table code { display: inline; min-width: 0; white-space: normal; overflow-wrap: break-word; }
.sys-internal .panel-body > p { color: var(--ink-2); }

/* -------------------------------------------------------------- Sign in */

/* One narrow column: the title, one sentence, one card with one field. */
.sys-signin-page { display: grid; gap: var(--s-4); max-width: 520px; min-width: 0; }
.sys-signin-page > * { margin-top: 0; }
.sys-signin-page .page-header { margin-bottom: 0; }

/* -------------------------------------------- build 4: connection flows */

/* A connection's flow page: its steps as the area's path in one panel, then what it is, what
   happens after and what it costs side by side on a computer, stacked on a phone. */
.sys-flow-steps { display: grid; gap: var(--s-4); min-width: 0; padding: var(--s-5); }
@media (min-width: 760px) { .sys-flow-steps { padding: var(--s-6); } }
.sys-flow-steps > .path { min-width: 0; }
.sys-flow-note { font-size: var(--t-2); color: var(--ink-2); }
.sys-flow-grid { display: grid; gap: var(--s-5); align-items: start; min-width: 0; }
.sys-flow-grid > * { min-width: 0; margin-top: 0; }
@media (min-width: 1024px) { .sys-flow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } }
.sys-flow-unlocks { display: grid; gap: var(--s-1); margin: 0; padding: 0; list-style: none; font-size: var(--t-2); color: var(--ink-2); }
.sys-flow-unlocks > li { min-width: 0; overflow-wrap: break-word; }
.sys-flow-list { font-size: var(--t-2); color: var(--ink-2); }
/* The way from a card or a row into its flow: one button on a line of its own. */
.sys-flow-go { display: flex; flex-wrap: wrap; gap: var(--s-2); min-width: 0; margin-top: var(--s-2); }
.sys-engines-full { gap: var(--s-3); }
.sys-engines-full > li { display: grid; gap: var(--s-1); }
.sys-engine-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-3); min-width: 0; }
.sys-engine-text { font-size: var(--t-1); color: var(--ink-2); }
/* The owner's and the website team's steps of a reader (the Business Profile, the APIs): a long
   address in a step wraps inside the phone's width. */
.sys-flow-profile-steps, .sys-flow-api { display: grid; gap: var(--s-3); min-width: 0; }
.sys-flow-profile-steps li, .sys-flow-profile-steps p, .sys-flow-api li, .sys-flow-api p { min-width: 0; overflow-wrap: anywhere; }

/* -------------------------------------------- build 4: worker health */

/* The worker's health (Settings, Activity, Details): the badge and its sentence, where it runs,
   then one quiet row per job. The badge never moves. */
.sys-health { display: grid; gap: var(--s-2); min-width: 0; }
.sys-health-lead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-size: var(--t-2); color: var(--ink); }
.sys-health-where { font-size: var(--t-2); color: var(--ink-2); }
.sys-health-jobs { margin-top: var(--s-1); }
.sys-health-why { display: block; font-size: var(--t-1); color: var(--ink-2); }
.sys-finding-why { font-size: var(--t-1); color: var(--ink-2); }


.wk > * + *, .wj > * + * { margin-top: 24px; }
@media (min-width: 1024px) { .wk > * + *, .wj > * + * { margin-top: 32px; } }
.wj-muted { color: var(--ink-3); font-size: var(--t-1); }
.wk-about { display: grid; gap: 8px; max-width: 72ch; margin: 0; padding-left: 1.25em; color: var(--ink-2); font-size: var(--t-2); }
.wk-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 600; }

/* What holds the work, under the page's sentence and above the flow. */
.wk-holds { display: grid; gap: 4px; max-width: 72ch; margin: 0; padding: 0; list-style: none; color: var(--ink-2); font-size: var(--t-2); }
.wk-holds li { position: relative; padding-left: 16px; }
.wk-holds li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--line-control); }
/* (fix round 4b) Under the line: what its numbers count, where the content plan's pieces are counted, and the way there on a line of its own. */
.wk-plan-note { max-width: 72ch; margin: 0; color: var(--ink-2); font-size: var(--t-2); line-height: 1.45; }
.wk-plan-link { margin: -12px 0 0; }
/* The team's own six stages, in their closed block. */
#team-stages { scroll-margin-top: 96px; }
.wk-stages-note { max-width: 72ch; margin: 0 0 12px; color: var(--ink-2); font-size: var(--t-2); }
/* A flow of this page narrower than 300 px of its own (a 320 px phone): one stage a row, so a
   state such as "Waits for live publishing" keeps whole words; the chevron points down again. */
@container flow (max-width: 299.98px) {
  .wk .flow-step { flex: 1 1 100%; }
  .wk .flow-node { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "icon name count" "icon state state"; align-items: center; gap: 2px 12px; min-height: 56px; }
  .wk .flow-step + .flow-step::before { left: 24px; top: -13px; border-top: 0; border-bottom: 2px solid var(--line-control); }
  .wk .flow > .flow-step:nth-child(2n + 1)::before { display: block; }
}

/* ------------------------------------------------------- the setup strip */

.wk-setup { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.wk-set { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; min-width: 0; padding: 12px; border-radius: var(--r-2); background: var(--tile); }
.wk-set-icon { display: none; }
.wk-set-text { display: grid; gap: 2px; min-width: 0; }
.wk-set-label { font-size: var(--t-1); font-weight: 500; color: var(--ink-2); }
.wk-set-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.wk-set-value { font-size: var(--t-3); font-weight: 600; line-height: 1.3; color: var(--ink); }
.wk-set-note { font-size: var(--t-1); line-height: 1.35; color: var(--ink-3); }
/* The confirmed changes: one tile, a number for each target. */
.wk-set-counts { grid-column: 1 / -1; }
.wk-counts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 2px; }
.wk-count { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
.wk-count-num { font-size: var(--t-6); font-weight: 600; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.wk-count-label { font-size: var(--t-1); color: var(--ink-2); }
.wk-pause { margin: 0; }
@media (max-width: 379.98px) { .wk-setup { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 760px) {
  .wk-setup { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wk-set { grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 12px; }
  .wk-set-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); color: var(--ink-2); box-shadow: 0 0 0 1px var(--line); }
  .wk-set-counts { grid-column: span 2; }
}

/* ------------------------------------------------------------- the list */

/* One column at every width: a stage, then its pieces of work, then the next stage. */
.wk-board { display: grid; gap: 32px; min-width: 0; }
.wk-col { display: grid; align-content: start; gap: 8px; min-width: 0; scroll-margin-top: 96px; }
.wk-col-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: var(--t-lead); font-weight: 600; color: var(--area-ink); }
.wk-col-count { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: var(--r-pill); background: var(--area-soft); color: var(--area-ink); font-size: var(--t-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.wk-col-who { margin: 0; color: var(--ink-3); font-size: var(--t-1); }
.role-link { font-weight: 600; }
.wk-empty-line { margin: 0; color: var(--ink-3); font-size: var(--t-1); }
.wk-team-link { margin: 0; }
.wk-cards { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }
.wk-card { gap: 8px; padding: 12px 40px 12px 16px; }
.wk-card .card-title { font-size: var(--t-2); line-height: 1.35; }
.wk-card .card-body { gap: 4px; }
.wk-card:hover .card-title { color: var(--accent); }
.wk-chev { position: absolute; right: 12px; top: 50%; margin-top: -9px; color: var(--ink-3); pointer-events: none; }
.wk-reason { max-width: 72ch; margin: 0; color: var(--ink-2); font-size: var(--t-1); line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.wk-card-needs .wk-reason { -webkit-line-clamp: 3; }
.wk-col .details { margin-top: 2px; }
.wk-more-list { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; padding: 0; list-style: none; }

/* ----------------------------------------------------------- the journey */

/* (build 4) The piece on the production line, in the summary band: its title over the compact path. */
.wj-line-title { margin: 0 0 8px; color: var(--ink-2); font-size: var(--t-1); font-weight: 600; }
#journey-summary .band-visual { min-width: 0; }
.wj-head-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; color: var(--ink-3); font-size: var(--t-1); }
.wj-path { display: inline; padding: 1px 6px; border-radius: 6px; background: var(--neutral-soft); color: var(--ink-2); font-size: var(--t-1); }
.wj-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 600; }

/* How the team handled it (a closed block): the nine stored steps under the team's six stages, one stage a row on a phone, side by side from 1000 px (Research holds three, Measure two). */
#journey-team { scroll-margin-top: 96px; }
.wj-track { display: block; }
.wj-phases { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.wj-phase { display: grid; align-content: start; gap: 8px; min-width: 0; padding-top: 10px; border-top: 3px solid var(--line-strong); }
.wj-phase-done { border-top-color: var(--good); }
.wj-phase-here { border-top-color: var(--accent); }
.wj-phase-stopped { border-top-color: var(--muted); }
.wj-phase-name { margin: 0; font-size: var(--t-1); font-weight: 600; color: var(--ink-2); }
.wj-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.wj-step { min-width: 0; }
.wj-step-box, .wj-step-link { display: grid; justify-items: center; align-content: start; gap: 6px; min-height: 44px; padding: 6px 4px; border-radius: var(--r-1); color: var(--ink); text-align: center; text-decoration: none; }
.wj-step-link:hover { background: var(--tile-hover); color: var(--ink); }
/* A step stopped work will never reach: no panel to jump to, drawn quieter. */
.wj-step-box { color: var(--ink-3); }
.wj-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); color: var(--ink-3); box-shadow: inset 0 0 0 2px var(--line-strong); font-size: var(--t-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.wj-step-done .wj-mark { background: var(--good); color: var(--surface); box-shadow: none; }
.wj-step-current .wj-mark { background: var(--accent); color: var(--surface); box-shadow: 0 0 0 4px var(--accent-soft); }
/* A step in progress has no number: a dot marks it. A step not reached yet is the empty ring. */
.wj-step-current .wj-mark::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); }
.wj-step-held .wj-mark { background: var(--caution-strong); color: var(--ink); box-shadow: 0 0 0 4px var(--caution-soft); }
.wj-step-waiting .wj-mark, .wj-step-undone .wj-mark { background: var(--neutral-soft); color: var(--ink-2); box-shadow: inset 0 0 0 2px var(--muted); }
.wj-step-label { font-size: var(--t-1); line-height: 1.25; color: var(--ink-2); }
.wj-step-current .wj-step-label, .wj-step-held .wj-step-label, .wj-step-waiting .wj-step-label, .wj-step-undone .wj-step-label { font-weight: 600; color: var(--ink); }
@media (min-width: 1000px) {
  .wj-phases { display: grid; grid-template-columns: 3fr 1fr 1fr 1fr 1fr 2fr; gap: 12px; }
}

/* The stage panels; the rail stays in view beside them on a computer. */
.wj .rail { display: grid; gap: 12px; align-content: start; }
@media (min-width: 1024px) { .wj .rail { position: sticky; top: 88px; } }
.wj .panel, .wj .wj-done { scroll-margin-top: 96px; }
.wj-lead { margin: 0; max-width: 68ch; color: var(--ink); font-size: var(--t-3); line-height: 1.5; text-wrap: pretty; }
.wj-lead .badge { vertical-align: 1px; }
.wj-sub { margin: 0; font-size: var(--t-2); font-weight: 600; color: var(--ink); }
.wj-sub-note { margin: 0; color: var(--ink-3); font-size: var(--t-1); }
.wj-meta { margin: 0; color: var(--ink-3); font-size: var(--t-1); }
.wj-role { margin: 0; color: var(--ink-2); font-size: var(--t-1); }
.wj-split { display: grid; gap: 24px; min-width: 0; }
.wj-part { display: grid; align-content: start; gap: 12px; min-width: 0; }
@media (min-width: 900px) { .wj-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
/* A line may hold a whole address or path ("https://www.precisiondoor.net/garage-door-tune-up"): it wraps inside the line, never widens the page. */
.wj-lines { display: grid; gap: 6px; min-width: 0; margin: 0; padding-left: 1.1em; color: var(--ink-2); font-size: var(--t-2); overflow-wrap: break-word; }
.wj-lines > li { min-width: 0; }
.wj-facts { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 0; padding: 0; list-style: none; }
.wj-facts li { display: grid; gap: 0; min-width: 0; }
.wj-fact-value { font-size: var(--t-4); font-weight: 600; line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; }
.wj-fact-label { font-size: var(--t-1); color: var(--ink-2); }

/* A stage already done: one line, a tick, its name and its key number; it opens on request. */
.wj-done-list { display: grid; gap: 8px; min-width: 0; }
.wj-done > summary { justify-content: flex-start; gap: 12px; min-height: 56px; padding: 10px 14px; }
.wj-done-mark { display: inline-grid; flex: none; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--good); color: var(--surface); }
/* An undone publication, or the stage stopped work rests at: a grey mark, never the green tick. */
.wj-done-mark-off { background: var(--neutral-soft); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--muted); }
.wj-done[open] > summary .wj-done-mark .icon { transform: none; }
.wj-done-text { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.wj-done-name { margin: 0; font-size: var(--t-2); font-weight: 600; line-height: 1.3; color: var(--ink); }
.wj-done-result { font-size: var(--t-1); font-weight: 400; line-height: 1.35; color: var(--ink-2); }
.wj-done > summary > .icon { flex: none; }
.wj-done-body { gap: 16px; padding-top: 8px; }

/* The opportunity: the headline, the searches, the value score as its sum, the evidence. */
.wj-headline-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.wj-queries { display: grid; margin: 0; padding: 0; list-style: none; }
.wj-queries > li + li { border-top: 1px solid var(--line); }
.wj-query { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; padding: 8px 0; }
.wj-query-name { font-size: var(--t-2); color: var(--ink); }
.wj-query-num { font-size: var(--t-2); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wj-unit { font-size: var(--t-1); font-weight: 400; color: var(--ink-3); }
.wj-query-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.wj-query-out .wj-query-name, .wj-query-out .wj-query-num { color: var(--ink-3); }
@media (max-width: 379.98px) {
  .wj-query { grid-template-columns: minmax(0, 1fr); }
  .wj-query-num { white-space: normal; }
}
.wj-eq { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.wj-parts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wj-term { display: inline-grid; justify-items: center; gap: 2px; min-width: 72px; padding: 8px 10px; border-radius: var(--r-2); background: var(--tile); text-align: center; }
.wj-term-num { font-size: var(--t-4); font-weight: 600; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.wj-term-label { max-width: 12ch; font-size: var(--t-0); line-height: 1.25; color: var(--ink-2); }
.wj-term-note { font-size: var(--t-0); line-height: 1.25; color: var(--ink-3); }
.wj-term-total { background: var(--accent-soft); }
.wj-term-total .wj-term-num { color: var(--accent-strong); }
.wj-op { font-size: var(--t-4); font-weight: 500; color: var(--ink-3); }
.wj-op-first { display: none; }
/* On a phone the sum is a list: one part a row, its sign before it, the total last. */
@media (max-width: 639.98px) {
  .wj-eq { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 6px 8px; }
  .wj-op-first { display: block; }
  .wj-op { font-size: var(--t-3); text-align: center; }
  .wj-term { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label num" "note num"; justify-items: start; align-items: center; gap: 0 12px; min-width: 0; padding: 8px 12px; text-align: left; }
  .wj-term-label { grid-area: label; max-width: none; font-size: var(--t-1); }
  .wj-term-note { grid-area: note; }
  .wj-term-num { grid-area: num; font-size: var(--t-3); }
}
.wj-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wj-chip { display: grid; gap: 0; min-width: 0; max-width: 100%; padding: 6px 12px; border-radius: var(--r-2); background: var(--tile); border: 1px solid var(--line); }
.wj-chip-label { font-size: var(--t-1); font-weight: 600; color: var(--ink); }
.wj-chip-meta { font-size: var(--t-0); color: var(--ink-3); }

/* The existing page: why it is the closest, what it covers, its details on request. */
.wj-page-ref { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; }
.wj-cover { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 16px; min-width: 0; }
.wj-checklist { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wj-check { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 10px 3px 4px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-size: var(--t-1); line-height: 1.3; color: var(--ink-2); }
.wj-check-yes { border-color: var(--good-line); background: var(--good-soft); color: var(--good-ink); font-weight: 500; }
.wj-check-mark { display: inline-grid; flex: none; place-items: center; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.wj-check-yes .wj-check-mark { background: var(--good); color: var(--surface); box-shadow: none; }
@media (max-width: 479.98px) { .wj-cover { grid-template-columns: minmax(0, 1fr); justify-items: start; } }
.wj-headings { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--t-2); color: var(--ink); }
.wj-h2 { padding-left: 12px; }
.wj-h3 { padding-left: 24px; color: var(--ink-2); }
.wj-h4 { padding-left: 36px; color: var(--ink-2); }
.wj-h-level { display: inline-block; min-width: 2.2em; margin-right: 6px; font-size: var(--t-0); font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* The competitor research: questions and sources. */
.wj-questions, .wj-sources, .wj-links, .wj-needed { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wj-questions li, .wj-sources li, .wj-links li, .wj-needed li { display: grid; gap: 2px; min-width: 0; font-size: var(--t-2); color: var(--ink); }
.wj-q-num { font-size: var(--t-1); color: var(--ink-3); }
.wj-needed li { position: relative; padding-left: 16px; }
.wj-needed li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--caution-strong); }

/* The plan: the outline as section blocks, the links, the facts. */
.wj-outline { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: wj-section; }
.wj-outline > li { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--r-2); background: var(--tile); counter-increment: wj-section; }
.wj-outline-h { font-size: var(--t-2); font-weight: 600; color: var(--ink); }
.wj-outline-h::before { content: counter(wj-section) ". "; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.wj-qs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wj-qs li { padding: 2px 10px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: var(--t-1); }
.wj-link-anchor { font-weight: 600; }
.wj-links .wj-path { justify-self: start; }
.wj-factlist { display: grid; gap: 8px 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); margin: 0; padding: 0; list-style: none; font-size: var(--t-2); color: var(--ink); }
.wj-factlist li { display: grid; gap: 0; min-width: 0; padding: 8px 12px; border-radius: var(--r-2); background: var(--tile); }
.wj-fact-key { font-size: var(--t-1); font-weight: 500; color: var(--ink-3); }

/* The draft: who wrote it, what the writer asks you, the article on solid white. */
.wj-writer { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 12px; padding: 12px; border-radius: var(--r-2); background: var(--tile); }
.wj-writer-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); color: var(--ink-2); box-shadow: 0 0 0 1px var(--line); }
.wj-writer-text { display: grid; gap: 2px; min-width: 0; }
.wj-writer-name { margin: 0; font-size: var(--t-2); color: var(--ink); text-wrap: pretty; }
.wj-asks { display: grid; gap: 8px; }
.wj-ask { display: grid; justify-items: start; gap: 6px; margin: 0; padding: 12px; border-radius: var(--r-2); background: var(--caution-soft); color: var(--ink); font-size: var(--t-2); }
/* Once you approved the draft, its asks are answered: said once, the notes kept on a quiet tile. */
.wj-asks-answered { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: var(--ink); font-size: var(--t-2); }
.wj-ask.is-answered { background: var(--tile); color: var(--ink-2); }
.wj-article { display: grid; gap: 12px; max-width: 72ch; padding: 16px 20px; border-radius: var(--r-2); background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--ink); font-size: var(--t-3); line-height: 1.6; scroll-margin-top: 96px; }
.wj-article h3, .wj-article h4, .wj-article h5 { margin-top: 8px; line-height: 1.3; }
.wj-article-title { font-size: var(--t-5); }
.wj-article h4 { font-size: var(--t-4); }
.wj-article h5 { font-size: var(--t-lead); }
.wj-article-description { color: var(--ink-3); font-size: var(--t-2); }
.wj-article ul, .wj-article ol { display: grid; gap: 4px; margin: 0; padding-left: 1.25em; }
.wj-article p { margin: 0; }
.wj-article-ref { margin: 0; }
@media (max-width: 639.98px) { .wj-article { padding: 12px 14px; font-size: var(--t-2); } }

/* The review: one row per check, its score against its limit. */
.wj-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; color: var(--ink-2); font-size: var(--t-2); }
.wj-gates { display: grid; margin: 0; padding: 0; list-style: none; }
.wj-gate { display: grid; gap: 8px; padding: 12px 0; min-width: 0; }
.wj-gates > li + li { border-top: 1px solid var(--line); }
.wj-gate-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.wj-gate-name { font-size: var(--t-2); font-weight: 600; color: var(--ink); }
.wj-gate-measure { display: grid; gap: 6px 16px; align-items: center; min-width: 0; }
.wj-gate-text { font-size: var(--t-2); color: var(--ink-2); }
@media (min-width: 640px) {
  .wj-gate-measure { grid-template-columns: minmax(120px, 220px) minmax(0, 1fr); }
  .wj-gate-text:only-child { grid-column: 1 / -1; }
}
.wj-found { display: grid; gap: 6px; min-width: 0; }
.wj-found + .wj-found { padding-top: 10px; border-top: 1px solid var(--line); }
.wj-found-title { margin: 0; font-size: var(--t-2); font-weight: 600; color: var(--ink); }
.wj-gauge { position: relative; display: block; height: 10px; border-radius: 5px; background: var(--neutral-soft); }
.wj-gauge-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--accent); }
.wj-gauge-over .wj-gauge-fill { background: var(--caution-strong); }
.wj-gauge-band { position: absolute; top: -3px; bottom: -3px; border-radius: 4px; background: var(--good-soft); box-shadow: inset 0 0 0 1px var(--good-line); }
.wj-gauge-dot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line-strong); }
.wj-gauge-over .wj-gauge-dot { background: var(--caution-strong); }
.wj-gauge-limit { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink-2); }

/* The publication: the target said plainly, the record, the undo. */
.wj-target { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-2); background: var(--tile); }
.wj-target-test { border: 1px dashed var(--line-strong); }
.wj-target-live { border: 1px solid var(--accent-line); }
.wj-target-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); color: var(--ink-2); box-shadow: 0 0 0 1px var(--line); }
.wj-target-name { margin: 0; font-size: var(--t-3); font-weight: 600; color: var(--ink); }
.wj-pub { display: grid; gap: 4px; min-width: 0; }
.wj-pub-line { display: grid; gap: 0 16px; align-items: center; min-width: 0; margin: 0; font-size: var(--t-2); color: var(--ink); }
.wj-pub-key { font-size: var(--t-1); font-weight: 500; color: var(--ink-3); }
@media (min-width: 640px) { .wj-pub-line { grid-template-columns: minmax(11em, 14em) minmax(0, 1fr); } }
.wj-pub-line .status { justify-self: start; }
.wj-undo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px; border-radius: var(--r-2); background: var(--tile); color: var(--ink-2); font-size: var(--t-1); }
.wj-undo .form-inline { margin: 0; }

/* The stages still to come, and the rail's stop form. */
.wj-later-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wj-later-list li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 12px 4px 4px; border-radius: var(--r-pill); background: var(--tile); }
.wj-later-mark { display: inline-block; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.wj-later-name { font-size: var(--t-1); font-weight: 500; color: var(--ink-2); }
.wj-stopped-line { margin: 0; }
.wj-stop-form { max-width: none; }

/* --------------------------------------------------- the owner's review */

/* "Your review": the checks at a glance, the article, its history, then the decisions. */
.wj-review .panel-body { gap: 24px; }
.wj-review-part { display: grid; gap: 12px; min-width: 0; }
.wj-review-meta { max-width: 72ch; }
.wj-glance-sum { margin: 0; font-size: var(--t-2); font-weight: 600; color: var(--ink); }
.wj-glance { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wj-glance-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 12px; min-width: 0; padding: 8px 12px; border-radius: var(--r-2); background: var(--tile); }
.wj-glance-mark { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--good); color: var(--surface); }
.wj-glance-warn .wj-glance-mark { background: var(--caution-soft); color: var(--caution-ink); box-shadow: inset 0 0 0 1.5px var(--caution-strong); }
.wj-glance-fail .wj-glance-mark { background: var(--bad-soft); color: var(--bad-ink); box-shadow: inset 0 0 0 1.5px var(--bad-strong); }
.wj-glance-text { display: grid; gap: 2px; min-width: 0; }
.wj-glance-name { font-size: var(--t-2); font-weight: 600; color: var(--ink); }
.wj-glance-found { font-size: var(--t-1); line-height: 1.4; color: var(--ink-2); }
.wj-glance-more { margin: 0; }

/* Why the draft in front of you was written again, and your own note. */
.wj-rewrite { display: grid; gap: 4px; max-width: 72ch; padding: 12px 16px; border-radius: var(--r-2); background: var(--area-soft); border: 1px solid var(--area-line); }
.wj-rewrite-text { margin: 0; font-size: var(--t-2); color: var(--ink); }
.wj-rewrite-note { max-width: 72ch; margin: 0; font-size: var(--t-2); color: var(--ink); overflow-wrap: break-word; }

/* The revision history: one draft a block, the newest marked in words. */
.wj-revs { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.wj-rev { display: grid; gap: 6px; min-width: 0; padding: 12px 16px; border-radius: var(--r-2); background: var(--tile); }
.wj-rev-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; }
.wj-rev-name { font-size: var(--t-2); font-weight: 600; color: var(--ink); }
.wj-rev-tag { padding: 1px 10px; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-2); font-size: var(--t-1); font-weight: 500; }
.wj-rev-meta { margin: 0; font-size: var(--t-1); color: var(--ink-3); }
.wj-rev-part { display: grid; gap: 4px; min-width: 0; }
.wj-rev-key { margin: 0; font-size: var(--t-1); font-weight: 600; color: var(--ink-2); }
.wj-rev-list { display: grid; gap: 4px; margin: 0; padding-left: 1.1em; font-size: var(--t-2); color: var(--ink); overflow-wrap: break-word; }
.wj-rev-from { font-weight: 600; color: var(--ink-2); }
.wj-rev-line, .wj-rev-note { max-width: 72ch; margin: 0; font-size: var(--t-2); color: var(--ink-2); overflow-wrap: break-word; }

/* The decisions, after the article: the area's tint, so they are found at a glance. */
.wj-decide { display: grid; gap: 12px; min-width: 0; padding: 16px; border-radius: var(--r-3); background: var(--area-soft); border: 1px solid var(--area-line); scroll-margin-top: 96px; }
.wj-approve { display: grid; gap: 8px; min-width: 0; }
.wj-approve-form { margin: 0; }
.wj-approve .btn { min-height: 48px; }
.wj-decide-hint { max-width: 68ch; margin: 0; }
.wj-changes-form { max-width: none; }
@media (max-width: 479.98px) {
  .wj-approve-form, .wj-approve .btn { width: 100%; }
  .wj-changes-form .btn, .wj-stop-form .btn { width: 100%; }
}
@media (min-width: 640px) { .wj-decide { padding: 20px 24px; } }


.aiv > * + * { margin-top: 24px; }
/* A phone keeps the panels closer: each has its own frame, so 16 px still parts them. */
@media (max-width: 639.98px) { .aiv > * + * { margin-top: 16px; } }
@media (min-width: 1024px) { .aiv > * + * { margin-top: 32px; } }
.aiv-note { max-width: 72ch; margin: 0; color: var(--ink-2); font-size: var(--t-2); line-height: 1.5; }
.aiv-quiet { max-width: 72ch; margin: 0; color: var(--ink-3); font-size: var(--t-1); line-height: 1.5; }
.aiv-sub { margin: 8px 0 0; color: var(--ink); font-size: var(--t-2); font-weight: 600; line-height: 1.35; }
.aiv-link { display: inline-flex; align-items: center; justify-self: start; gap: 4px; min-height: 44px; font-weight: 600; }
.aiv-nowrap { white-space: nowrap; }
.aiv-note, .aiv-quiet, .aiv-sub, .aiv-prompt, .aiv-quote, .aiv-picked, .aiv-proposal, .aiv-answer, .aiv-answer-raw, .aiv-figures, .aiv-qlist, .aiv-items, .aiv-engines, .aiv-compares, .aiv-reading, .aiv-sites, .aiv-planned, .aiv-list > li, .aiv-reading > li, .aiv-sites > li, .aiv-planned > li, .aiv-engine > *, .aiv-compare > *, .aiv-how-part > * { min-width: 0; }
.aiv-pair { display: grid; align-items: start; gap: 24px; grid-template-columns: minmax(0, 1fr); }
.aiv-duo { display: grid; align-items: start; gap: 24px; grid-template-columns: minmax(0, 1fr); }
.aiv-pair > *, .aiv-duo > * { min-width: 0; }
@media (min-width: 1024px) { .aiv-pair, .aiv-duo { gap: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* What was tested and what was not: two lists, the tested one on the area's breath of tint, the other on a dashed edge (what is missing), side by side from 760 px. */
.aiv-scope { display: grid; gap: 16px 24px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.aiv-scope-col { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 16px; border-radius: var(--r-2); }
.aiv-scope-col:first-child { background: var(--area-wash); box-shadow: inset 0 0 0 1px var(--area-line); }
.aiv-scope-col:last-child { border: 1px dashed var(--line-strong); background: var(--surface); }
.aiv-scope-col > .aiv-sub { margin: 0; font-size: var(--t-lead); }
.aiv-scope-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.aiv-scope-line { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 6px 10px; min-width: 0; color: var(--ink); font-size: var(--t-2); line-height: 1.5; }
.aiv-scope-line > .icon { margin-top: 4px; }
.aiv-scope-yes .aiv-scope-line > .icon { color: var(--good); }
.aiv-scope-no .aiv-scope-line > .icon { color: var(--ink-3); }
.aiv-scope-text, .aiv-scope-pill { min-width: 0; }
.aiv-scope-pill { grid-column: 2; }
@media (max-width: 479.98px) { .aiv-scope-col { padding: 12px; } .aiv-scope-list { gap: 10px; } }
@media (min-width: 760px) { .aiv-scope { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The owner's chosen source of a fact, beside what an answer said: a quiet tile of its own. */
.aiv-source { display: grid; justify-items: start; gap: 4px; min-width: 0; max-width: 100%; padding: 12px; border-radius: var(--r-1); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.aiv-source > * { min-width: 0; max-width: 100%; }
.aiv-source-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; }
.aiv-source-label { color: var(--ink); font-size: var(--t-1); font-weight: 600; }

.aiv-figures { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }
.aiv-figure { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 16px; border-radius: var(--r-2); background: var(--tile); }
.aiv-figure-label { margin: 0; color: var(--area-ink); font-size: var(--t-2); font-weight: 600; }
.aiv-figure-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; min-width: 0; }
.aiv-figure-num { color: var(--ink); font-size: var(--t-num-phone); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.aiv-figure-of { color: var(--ink-2); font-size: var(--t-2); }
.aiv-figure-none { color: var(--ink-2); font-size: var(--t-lead); font-weight: 600; }
.aiv-figure-what { margin: 0; color: var(--ink-2); font-size: var(--t-1); line-height: 1.45; }
.aiv-dots { display: flex; flex-wrap: wrap; gap: 4px; }
.aiv-dot { box-sizing: border-box; width: 12px; height: 12px; border: 2px solid var(--line-control); border-radius: 50%; background: var(--surface); }
.aiv-dot-on { border-color: var(--area); background: var(--area); }
@media (min-width: 700px) {
  .aiv-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .aiv-figure-num { font-size: var(--t-num); }
}

.aiv-marks { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.aiv-mark { display: inline-flex; align-items: center; gap: 4px; min-width: 0; color: var(--ink-2); font-size: var(--t-1); font-weight: 500; line-height: 1.4; }
.aiv-mark-yes { color: var(--good-ink); }
.aiv-mark-yes .icon { color: var(--good); }
.aiv-mark-no, .aiv-mark-none { color: var(--ink-3); }
.aiv-mark-flag { color: var(--caution-ink); }
.aiv-mark-flag .icon { color: var(--caution-strong); }

.aiv-qlist { display: grid; margin: 0; padding: 0; list-style: none; }
.aiv-q { display: grid; gap: 4px 24px; min-width: 0; padding: 12px 0; border-top: 1px solid var(--line); }
.aiv-q:first-child { padding-top: 0; border-top: 0; }
.aiv-q:last-child { padding-bottom: 0; }
.aiv-q-main { display: grid; justify-items: start; gap: 2px; min-width: 0; }
.aiv-q-link { display: inline-block; box-sizing: border-box; max-width: 100%; min-height: 44px; padding: 11px 0; color: var(--ink); font-size: var(--t-2); font-weight: 600; line-height: 1.35; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.aiv-q-link:hover { color: var(--accent); text-decoration-color: currentColor; }
.aiv-q-meta { margin: 0; color: var(--ink-3); font-size: var(--t-1); }
.aiv-q-result { display: grid; align-content: start; gap: 4px; min-width: 0; }
.aiv-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; }
.aiv-group + .aiv-group { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.aiv-group > .aiv-sub { margin: 0 0 8px; font-size: var(--t-lead); }
.aiv-count { margin-left: 4px; color: var(--ink-3); font-size: var(--t-1); font-weight: 500; }
@media (min-width: 900px) {
  .aiv-q-split { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: center; }
  .aiv-q-split .aiv-q-main { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
  .aiv-qlist-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .aiv-qlist-cols > .aiv-q:nth-child(2) { padding-top: 0; border-top: 0; }
  .aiv-qlist-cols > .aiv-q:nth-last-child(2):nth-child(odd) { padding-bottom: 0; }
}

.aiv-more { min-width: 0; }
.aiv-more > summary { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 2px; border-radius: var(--r-1); color: var(--accent); font-size: var(--t-2); font-weight: 600; cursor: pointer; }
.aiv-more > summary:hover { color: var(--accent-strong); }
.aiv-more-body { display: grid; gap: 24px; min-width: 0; margin-top: 8px; padding: 16px; border-radius: var(--r-2); background: var(--tile); }

.aiv-items { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.aiv-item { display: grid; align-content: start; justify-items: start; gap: 6px; min-width: 0; padding: 16px; border-radius: var(--r-2); background: var(--tile); }
.aiv-item > * { min-width: 0; max-width: 100%; }
.aiv-item-title { margin: 0; color: var(--ink); font-size: var(--t-2); font-weight: 600; line-height: 1.35; }
.aiv-kind { display: inline-block; padding: 1px 8px; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-2); font-size: var(--t-1); font-weight: 500; }
.aiv-reason { margin: 0; color: var(--caution-ink); font-size: var(--t-1); font-weight: 600; }
.aiv-proposal { max-width: 72ch; margin: 0; padding-left: 12px; border-left: 3px solid var(--area); color: var(--ink); font-size: var(--t-2); line-height: 1.5; }
.aiv-proposal-label { color: var(--area-ink); font-weight: 600; }
.aiv-quote { max-width: 72ch; margin: 0; padding-left: 12px; border-left: 3px solid var(--line-strong); color: var(--ink-2); font-size: var(--t-2); line-height: 1.5; }
.aiv-compares { display: grid; gap: 24px 32px; min-width: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.aiv-compare { display: grid; align-content: start; gap: 12px; min-width: 0; }
.aiv-compare > .aiv-sub { margin: 0; }
@media (min-width: 1024px) { .aiv-items-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.aiv-engines { display: grid; margin: 0; padding: 0; list-style: none; }
.aiv-engine { display: grid; gap: 6px; min-width: 0; padding: 12px 0; border-top: 1px solid var(--line); }
.aiv-engine:first-child { padding-top: 0; border-top: 0; }
.aiv-engine:last-child { padding-bottom: 0; }
.aiv-engine-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-width: 0; }
.aiv-engine-name { margin: 0; min-width: 0; font-size: var(--t-2); font-weight: 600; line-height: 1.35; }

.aiv-empty-title { margin: 0; font-size: var(--t-4); }
.aiv-need { color: var(--ink); font-weight: 600; }
.aiv-steps { display: grid; gap: 6px; margin: 0; padding-left: 1.4em; color: var(--ink-2); font-size: var(--t-2); }
@media (min-width: 760px) { .aiv-empty-title { font-size: var(--t-h2); } }

.aiv-prompt { margin: 0; padding: 12px 16px; border-left: 4px solid var(--area); border-radius: var(--r-1); background: var(--area-soft); color: var(--ink); font-size: var(--t-lead); line-height: 1.45; }
.aiv-picked { margin: 0; color: var(--ink); font-size: var(--t-lead); font-weight: 600; line-height: 1.35; }
.aiv-answer { display: grid; gap: 12px; margin: 0; padding: 12px 16px; border-radius: var(--r-2); background: var(--tile); color: var(--ink); font-size: var(--t-2); line-height: 1.55; overflow-wrap: anywhere; }
.aiv-answer > * { min-width: 0; max-width: 72ch; margin: 0; }
.aiv-answer strong { font-weight: 600; }
.aiv-answer .aiv-md-head { margin-top: 4px; font-weight: 600; }
.aiv-answer .aiv-md-list { display: grid; gap: 6px; padding-left: 1.4em; }
.aiv-answer .aiv-md-list .aiv-md-list { margin-top: 6px; }
.aiv-answer .aiv-md-quote { padding-left: 12px; border-left: 3px solid var(--line-strong); color: var(--ink-2); }
.aiv-answer .aiv-md-site { color: var(--ink-3); font-size: var(--t-1); }
.aiv-answer .aiv-md-code { padding: 0 4px; border-radius: var(--r-1); background: var(--surface-sunk); font-size: var(--t-1); }
.aiv-md-table { width: 100%; max-width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--surface); font-size: var(--t-1); }
.aiv-md-table th, .aiv-md-table td { padding: 6px 8px; border: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.aiv-md-table th { background: var(--surface-warm); font-weight: 600; }
.aiv-answer-raw { margin: 0; padding: 12px 16px; border-radius: var(--r-2); background: var(--surface-sunk); color: var(--ink-2); font-size: var(--t-1); line-height: 1.55; white-space: pre-wrap; }
.aiv-ext { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 500; }
.aiv-planned { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.aiv-planned > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.aiv-planned-line { max-width: 72ch; margin: 0; color: var(--ink); font-size: var(--t-2); line-height: 1.5; }
.aiv-planned-label { color: var(--good-ink); font-weight: 600; }
.aiv-how-part { display: grid; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
@media (max-width: 639.98px) { .aiv-how-part { margin-top: 12px; padding-top: 12px; } }
.aiv-how-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.aiv-how-head > .aiv-sub { margin: 0; }
.aiv-schedule-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.aiv-reading { display: grid; gap: 8px; margin: 0; padding-left: 1.25em; color: var(--ink-2); font-size: var(--t-2); }
.aiv-reading .aiv-quote { margin-top: 4px; }
.aiv-sites { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--ink); font-size: var(--t-2); }
.aiv-site-pages { display: block; margin-top: 2px; color: var(--ink-3); font-size: var(--t-1); }
.aiv-code { font-size: var(--t-1); }
@media (min-width: 480px) { .aiv-kv { grid-template-columns: minmax(8em, 15em) minmax(0, 1fr); } }

.aiv-standing { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.aiv-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; min-width: 0; }
.aiv-others, .aiv-listings, .aiv-mismatches, .aiv-suggest { display: grid; gap: 8px; min-width: 0; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.aiv-others > *, .aiv-listings > *, .aiv-mismatches > *, .aiv-suggest > * { min-width: 0; }
.aiv-others > .aiv-sub, .aiv-listings > .aiv-sub, .aiv-mismatches > .aiv-sub { margin: 0; }
/* The listings and the differences are closed blocks with their own frame: no hairline above them. */
.aiv-listings, .aiv-mismatches { padding-top: 0; border-top: 0; }
.aiv-group-result { margin: -4px 0 8px; color: var(--ink-2); font-size: var(--t-1); line-height: 1.45; }
.aiv-suggest-form { display: grid; gap: 8px; min-width: 0; }
.aiv-suggest-form .form-actions { margin: 0; }

/* What the owner did about a finding: its choices as buttons in one row that wraps. */
.aiv-follow-form { min-width: 0; margin: 4px 0 0; }
.aiv-follow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* The technical records: a cell holds several values of one record, a line each after its name. */
.aiv-cell-line { display: block; }
.aiv-cell-label { color: var(--ink-3); font-size: var(--t-1); }
@media (min-width: 640px) {
  .aiv .table-stack .aiv-code { white-space: nowrap; overflow-wrap: normal; }
  /* A table still wider than its frame on a computer says so, as it does on a phone. */
  .aiv .table-scroll[data-overflowing] + .scroll-hint { display: flex; }
}

/* (Build 4) The questions tested: a compact grid of tiles, one column on a phone, two from 700 px, three from 1100 px. A question that names the business stands on the area's breath of tint. */
.aiv-qgrid { gap: 12px; grid-template-columns: minmax(0, 1fr); }
.aiv-qgrid > .aiv-q, .aiv-qgrid > .aiv-q:first-child, .aiv-qgrid > .aiv-q:last-child { align-content: start; gap: 6px; padding: 4px 16px 12px; border-top: 0; border-radius: var(--r-2); background: var(--tile); }
.aiv-qgrid > .aiv-q-named, .aiv-qgrid > .aiv-q-named:first-child, .aiv-qgrid > .aiv-q-named:last-child { background: var(--area-wash); box-shadow: inset 0 0 0 1px var(--area-line); }
.aiv-qgrid .aiv-q-main { gap: 0 0; }
.aiv-qgrid .aiv-q-meta { margin-bottom: 6px; }
/* On a phone a tile is denser: its link keeps its 44 px target with less air around it, and its parts sit closer. */
@media (max-width: 699.98px) {
  .aiv-qgrid { gap: 8px; }
  .aiv-qgrid > .aiv-q, .aiv-qgrid > .aiv-q:first-child, .aiv-qgrid > .aiv-q:last-child { gap: 4px; padding: 2px 12px 10px; }
  .aiv-qgrid .aiv-q-link { padding: 6px 0; }
  .aiv-qgrid .aiv-q-meta { margin-bottom: 2px; }
  .aiv-qgrid .aiv-marks { gap: 2px 12px; }
}
@media (min-width: 700px) { .aiv-qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .aiv-qgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* (Build 4) Who the answers named instead and the websites they used: one band of its own on the area's tint, with its accent bar; the two panels inside it keep a fine edge of the accent and no shadow. */
.aiv-band { position: relative; padding: 12px; border-radius: var(--r-4); background: linear-gradient(140deg, var(--area-soft), var(--surface) 75%); box-shadow: inset 0 0 0 1px var(--area-line); }
.aiv-band::before { content: ""; position: absolute; left: 24px; top: 0; width: 48px; height: 4px; border-radius: 0 0 4px 4px; background: var(--area); }
.aiv-band > .panel { border-color: var(--area-line); box-shadow: none; }
@media (min-width: 1024px) { .aiv-band { padding: 24px; } }

/* The bars: the business's own row in the area's accent, the others in a quieter tint of it; a row at zero draws its empty track as a dashed mark of the accent. The printed value says the count. */
.aiv-bars .bar-label { min-width: 0; overflow-wrap: anywhere; }
.aiv-bars .bar-row.tone-accent .bar-fill { fill: var(--area); }
.aiv-bars .bar-row.tone-muted .bar-fill { fill: var(--area); fill-opacity: 0.45; }
.aiv-bars .bar-row-highlight .bar-label, .aiv-bars .bar-row-highlight .bar-value { color: var(--area-ink); }
.aiv-bars-zero .bar-row-highlight .bar { overflow: visible; }
.aiv-bars-zero .bar-row-highlight .bar-track { fill: var(--area-wash); stroke: var(--area); stroke-width: 1.5; stroke-dasharray: 4 3; }

/* What changed since the earlier checks, under the figures; the way to what was tested. */
.aiv-changed { display: grid; gap: 4px; min-width: 0; padding-top: 12px; border-top: 1px solid var(--line); }
.aiv-changed > .aiv-sub { margin: 0; }

/* The page's closed block of method and background: its panels sit flat inside it. */
.aiv > .details > .details-body { gap: 16px; padding: 8px 12px 12px; }
.aiv > .details > .details-body .panel { box-shadow: none; }
@media (min-width: 1024px) { .aiv > .details > .details-body { gap: 24px; padding: 8px 16px 16px; } }

/* A question's "What needs you here", under its title: the area's breath of tint and its accent rule. */
.aiv-here { display: grid; justify-items: start; gap: 4px; min-width: 0; padding: 12px 16px; border-left: 4px solid var(--area); border-radius: var(--r-2); background: var(--area-wash); box-shadow: inset 0 0 0 1px var(--area-line); }
.aiv-here > * { min-width: 0; max-width: 100%; }
.aiv-here-title { margin: 0; color: var(--area-ink); font-size: var(--t-lead); font-weight: 600; line-height: 1.35; }

/* Ask the questions now: one small form under the question tiles (under the schedule before the first check). */
.aiv-ask .form-actions { margin: 0; }

/* A fact card for several statements: each statement with the way to its answer, on a hairline of its own. */
.aiv-said { display: grid; gap: 0; width: 100%; margin: 0; padding: 0; list-style: none; }
.aiv-said > li { display: grid; justify-items: start; gap: 0; min-width: 0; padding: 8px 0 0 12px; border-left: 3px solid var(--line-strong); }
.aiv-said > li + li { margin-top: 8px; }
.aiv-said > li > * { min-width: 0; max-width: 100%; }

/* (Build 4, fix round 4) The rest of what needs the owner here, one click under the hero's cards. */
.aiv-needs-rest { min-width: 0; margin-top: 8px; }
.aiv-needs-rest .details-body { padding-top: 8px; }
/* Its closed line says "And N more" itself, in the cards' words: the list's own link to it is not drawn twice. */
.needs:has(+ .aiv-needs-rest) .needs-rest { display: none; }
/* The businesses also named and the lines of what was tested sit behind closed lines of their own. */
.aiv-others { padding-top: 0; border-top: 0; }
.aiv-scope-col > .details { background: var(--surface); }
/* A phone keeps more of its width for words: the panels of this long screen, the tiles inside them, the closed blocks and the band breathe less (12 px, as the lists of what was tested already do). */
@media (max-width: 479.98px) {
  .aiv .panel { --pad-panel: 12px; }
  .aiv .details-body { padding: 4px 12px 12px; }
  .aiv-item, .aiv-figure { padding: 12px; }
  .aiv-band { padding: 8px; }
  .aiv-band::before { left: 16px; }
}

/* The grouping of the questions: four short choices on one row of a phone from 360 px, two by two below it. */
@media (max-width: 639.98px) {
  .aiv-by .segmented ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 360px) and (max-width: 639.98px) {
  .aiv-by .segmented ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


.tm-room > * + * { margin-top: 24px; }
.tm-details > * + * { margin-top: 24px; }
@media (min-width: 1024px) {
  .tm-room > * + * { margin-top: 32px; }
  .tm-details > * + * { margin-top: 32px; }
}
.tm-note, .tm-methods { max-width: 72ch; margin: 0; color: var(--ink-2); font-size: var(--t-2); }
.tm-hint { margin: 0; color: var(--ink-3); font-size: var(--t-1); }
.tm-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.tm-evidence, .tm-last-step { display: inline-flex; align-items: center; min-height: 44px; }
.tm-meta { color: var(--ink-2); }

/* The strip in the hero: six stages joined by one line, their roles as avatars under them. */
.tm-strip-holder { min-width: 0; }
.tm-strip { container: tm-strip / inline-size; display: grid; gap: 16px; min-width: 0; }
.tm-strip-hint { margin: 0; color: var(--ink-2); font-size: var(--t-1); }
.tm-strip-hint-wide { display: none; }
.tm-strip-line { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 8px; margin: 0; padding: 0; list-style: none; }
.tm-stop { --tm-stop-ring: var(--line-control); --tm-stop-ink: var(--ink-2); position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; min-width: 0; text-align: center; }
/* The line from the previous stage's mark to this one; a row starts without one. */
.tm-stop::before { content: ""; position: absolute; top: 26px; left: calc(-50% + 22px); right: calc(50% + 30px); height: 2px; border-radius: 1px; background: var(--area-line); }
.tm-stop:nth-child(3n + 1)::before { display: none; }
/*
 * Three to a row, the line turns at the wrap: down from under the third
 * stage, across the gap between the rows, and down into the fourth, so the
 * six stay one way of work.
 */
@container tm-strip (max-width: 559.98px) {
  .tm-stop:nth-child(4)::before {
    display: block;
    top: -20px;
    left: 50%;
    right: auto;
    width: calc(200% + 16px);
    height: 20px;
    border-radius: 0;
    background:
      linear-gradient(var(--area-line), var(--area-line)) right top / 2px 50% no-repeat,
      linear-gradient(var(--area-line), var(--area-line)) left center / 100% 2px no-repeat,
      linear-gradient(var(--area-line), var(--area-line)) left bottom / 2px 50% no-repeat;
  }
}
@container tm-strip (min-width: 560px) {
  .tm-strip-line { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tm-stop:nth-child(3n + 1)::before { display: block; }
  .tm-stop:first-child::before { display: none; }
}
/*
 * A phone's strip is the six stages alone (the room just below names every
 * role), so the Needs you card under it stays near the top; from 560 px the
 * roles stand under their stage and on watch, with their names.
 */
.tm-stop > .tm-chips { display: none; }
@container tm-strip (min-width: 560px) {
  .tm-strip-hint-wide { display: inline; }
  .tm-strip-hint-narrow { display: none; }
  .tm-stop > .tm-chips { display: flex; }
}
.tm-stop[data-state="needs-you"] { --tm-stop-ring: var(--caution-strong); --tm-stop-ink: var(--caution-ink); }
.tm-stop[data-state="working"] { --tm-stop-ring: var(--accent); --tm-stop-ink: var(--accent-strong); }
.tm-stop[data-state="work"] { --tm-stop-ring: var(--area); --tm-stop-ink: var(--area-ink); }
.tm-stop[data-state="paused"] { --tm-stop-ring: var(--line-strong); }
.tm-stop-node { display: grid; justify-items: center; gap: 4px; min-width: 0; max-width: 100%; min-height: 44px; padding: 2px 4px 4px; border-radius: var(--r-2); color: var(--ink); text-decoration: none; }
.tm-stop-node:hover { background: var(--area-wash); color: var(--ink); }
.tm-stop-mark { position: relative; display: grid; place-items: center; box-sizing: border-box; width: 48px; height: 48px; border: 2px solid var(--tm-stop-ring); border-radius: 50%; background: var(--surface); color: var(--tm-stop-ink); }
.tm-stop[data-state="empty"] .tm-stop-mark { border-style: dashed; color: var(--ink-3); }
.tm-stop[data-state="needs-you"] .tm-stop-mark { background: var(--caution-soft); box-shadow: 0 0 0 4px var(--caution-soft); }
.tm-stop-count { position: absolute; top: -8px; right: -12px; display: inline-grid; place-items: center; box-sizing: border-box; min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--r-pill); background: var(--ink); color: var(--surface); font-size: var(--t-1); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.tm-stop[data-state="empty"] .tm-stop-count { background: var(--neutral-soft); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--neutral-line); }
.tm-stop[data-state="needs-you"] .tm-stop-count { background: var(--caution-ink); }
.tm-stop-name { min-width: 0; max-width: 100%; font-size: var(--t-2); font-weight: 600; line-height: 1.25; overflow-wrap: break-word; }
.tm-stop-words { min-width: 0; max-width: 100%; color: var(--tm-stop-ink); font-size: var(--t-1); line-height: 1.25; overflow-wrap: break-word; }
.tm-stop[data-state="needs-you"] .tm-stop-words { font-weight: 600; }
/* A role as a round avatar: the ring and its mark say the state (its words are read out). */
.tm-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.tm-chip-item { min-width: 0; }
.tm-chip { --tm-ring: var(--line-control); position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; min-width: 44px; min-height: 44px; padding: 2px; border-radius: var(--r-2); color: var(--ink); text-decoration: none; }
.tm-chip:hover { background: var(--area-wash); color: var(--ink); }
.tm-chip[data-state="working"] { --tm-ring: var(--accent); }
.tm-chip[data-state="ready"] { --tm-ring: var(--teal); }
.tm-chip[data-state="waiting"] { --tm-ring: var(--muted); }
.tm-chip[data-state="needs-connection"] { --tm-ring: var(--caution-strong); }
.tm-chip[data-state="done"] { --tm-ring: var(--good); }
.tm-chip-face { position: relative; display: block; box-sizing: border-box; width: 40px; height: 40px; padding: 2px; border: 2px solid var(--tm-ring); border-radius: 50%; background: var(--surface); }
.tm-chip[data-state="needs-connection"] .tm-chip-face { border-style: dashed; }
.tm-chip-mark { position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; box-sizing: border-box; width: 18px; height: 18px; border: 1.5px solid var(--tm-ring); border-radius: 50%; background: var(--surface); color: var(--ink-2); }
.tm-chip-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@container tm-strip (min-width: 560px) {
  .tm-chip { min-width: 76px; }
  .tm-chip-name { position: static; width: auto; height: auto; max-width: 92px; overflow: visible; clip: auto; clip-path: none; white-space: normal; color: var(--ink-2); font-size: var(--t-1); line-height: 1.2; overflow-wrap: break-word; }
}
/* Live: only a role that is working now moves, one soft ring around its avatar. */
.tm-chip[data-state="working"] .tm-chip-face::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: tm-live 2.4s ease-out infinite;
}
.tm-strip-watch { display: none; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; padding-top: 12px; border-top: 1px dashed var(--area-line); }
@container tm-strip (min-width: 560px) { .tm-strip-watch { display: flex; } }
.tm-strip-watch-label { margin: 0; color: var(--ink-2); font-size: var(--t-1); font-weight: 600; }
.tm-strip-watch .tm-chips { justify-content: flex-start; }

/*
 * The phone's copy of the strip (the six stages alone), the first thing of
 * the room: under 560 px of the window it stands under the Needs you card
 * and the hero's strip gives way, so the card comes first on a phone. One
 * of the two shows at any width; hidden, the copy takes no room. (Fix round
 * 4c) The hero's visual slot that holds the strip gives way with it, so the
 * stage keeps no empty row and no gap above the card.
 */
.tm-strip-phone-holder { display: none; }
@media (max-width: 559.98px) {
  .tm-strip-holder { display: none; }
  .hero-visual:has(> .tm-strip-holder) { display: none; }
  .tm-strip-phone-holder { display: block; min-width: 0; padding: 16px; border: 1px solid var(--area-line); border-radius: var(--r-3); background: linear-gradient(140deg, var(--area-soft) 0%, var(--surface) 70%); }
}
@media (min-width: 560px) { .tm-room > .tm-strip-phone-holder + * { margin-top: 0; } }

/* The content plan beside the team's own stages: a quiet note, and beside Review its drafts in review. */
.tm-plan-note { max-width: 72ch; margin: 0; color: var(--ink-2); font-size: var(--t-2); }
.tm-plan-review { display: flex; align-items: flex-start; gap: 8px; min-width: 0; margin: 0; padding: 8px 12px; border-radius: var(--r-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: var(--t-1); line-height: 1.5; }
.tm-plan-review > span { min-width: 0; }
.tm-plan-review-mark { flex: none; margin-top: 3px; color: var(--ink-3); }

/* What a stopped worker holds, said in the room only when the card above does not: quiet, never a second warning. */
.tm-halt { display: flex; align-items: flex-start; gap: 10px; max-width: 80ch; margin: 0 0 12px; padding: 12px 14px; border-radius: var(--r-2); background: var(--neutral-soft); color: var(--ink-2); font-size: var(--t-2); line-height: 1.5; }
.tm-halt-mark { flex: none; margin-top: 3px; }

/* The floor: the line of the six stages, then the roles on watch. */
.tm-floor { display: grid; gap: 24px; min-width: 0; }
.tm-line { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.tm-bay { position: relative; display: grid; align-content: start; gap: 12px; min-width: 0; padding: 12px; border-radius: var(--r-3); background: var(--tile); }
/* A stage with work that needs the owner: edged and lit in the color of Needs you. */
.tm-bay[data-state="needs-you"] { background: linear-gradient(180deg, var(--caution-soft), var(--tile) 160px); box-shadow: inset 0 0 0 2px var(--caution-line); }
/* The way from a stage to the next: a chevron in the gap, pointing down in a column. */
.tm-bay + .tm-bay::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-right: 2px solid var(--line-control);
  border-bottom: 2px solid var(--line-control);
  transform: rotate(45deg);
}
@media (min-width: 700px) {
  .tm-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm-bay { padding: 16px; }
  /* Side by side the chevron points right; the first bay of a row has none. */
  .tm-bay + .tm-bay::before { top: 44px; left: -9px; margin-left: -4px; transform: rotate(-45deg); }
}
/*
 * A row starts under the end of the one before: there the way turns, down
 * from the last stage of the row, across the gap and down into this one.
 */
@media (min-width: 700px) and (max-width: 1099.98px) {
  .tm-bay:nth-child(2n + 1)::before {
    top: -16px;
    left: 50%;
    width: calc(100% + 16px);
    height: 16px;
    margin-left: 0;
    border: 0;
    transform: none;
    background:
      linear-gradient(var(--line-control), var(--line-control)) right top / 2px 50% no-repeat,
      linear-gradient(var(--line-control), var(--line-control)) left center / 100% 2px no-repeat,
      linear-gradient(var(--line-control), var(--line-control)) left bottom / 2px 50% no-repeat;
  }
}
@media (min-width: 1100px) {
  .tm-line { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tm-bay:nth-child(3n + 1)::before {
    top: -16px;
    left: 50%;
    width: calc(200% + 32px);
    height: 16px;
    margin-left: 0;
    border: 0;
    transform: none;
    background:
      linear-gradient(var(--line-control), var(--line-control)) right top / 2px 50% no-repeat,
      linear-gradient(var(--line-control), var(--line-control)) left center / 100% 2px no-repeat,
      linear-gradient(var(--line-control), var(--line-control)) left bottom / 2px 50% no-repeat;
  }
}

/* A role: its drawing in a ring that follows its state, its name, what it is, its state. */
.tm-crew { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
/* A station is a container: its face is laid out by the station's own width, not the page's. */
.tm-station { min-width: 0; container-type: inline-size; --tm-ring: var(--line-control); }
.tm-station[data-state="working"] { --tm-ring: var(--accent); }
.tm-station[data-state="ready"] { --tm-ring: var(--teal); }
.tm-station[data-state="waiting"] { --tm-ring: var(--muted); }
.tm-station[data-state="needs-connection"] { --tm-ring: var(--caution-strong); }
.tm-station[data-state="done"] { --tm-ring: var(--good); }
.tm-station-box { min-width: 0; border-radius: var(--r-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.tm-station-box[open] { box-shadow: inset 0 0 0 1px var(--line-control), var(--e-raised); }
/* On a phone: the drawing and the name on one line, the state and what it is under them, side by side when they fit. */
.tm-station-face {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 24px;
  grid-template-areas: "art name toggle" "tags tags tags";
  align-items: center;
  gap: 8px 12px;
  min-height: 64px;
  padding: 10px 12px;
  border-radius: var(--r-2);
  cursor: pointer;
  list-style: none;
}
.tm-station-face::-webkit-details-marker { display: none; }
.tm-station-face:hover { background: var(--surface-warm); }
.tm-avatar { grid-area: art; position: relative; display: block; width: 48px; height: 48px; }
.tm-station-tags { grid-area: tags; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.tm-station-state { display: inline-flex; min-width: 0; max-width: 100%; }
@media (min-width: 700px) {
  .tm-station-face { grid-template-columns: 64px minmax(0, 1fr) 24px; gap: 6px 12px; min-height: 88px; padding: 12px; }
  .tm-avatar { width: 64px; height: 64px; }
  /*
   * Wider than a phone, beside the drawing, under the name, only on a
   * station wide enough for the longest state on one line ("Waiting for
   * another step"): a pill never wraps inside. A narrower station (the four
   * on watch, two stages side by side on a tablet) keeps the state and what
   * it is on their own row, as every station does on a phone.
   */
  @container (min-width: 320px) {
    .tm-station-face { grid-template-areas: "art name toggle" "art tags tags"; }
    .tm-role-name { align-self: end; }
    .tm-station-tags { align-self: start; }
  }
}
.tm-portrait { display: block; box-sizing: border-box; width: 100%; height: 100%; padding: 2px; border: 2px solid var(--tm-ring); border-radius: 50%; background: var(--surface); }
.tm-station[data-state="needs-connection"] .tm-portrait { border-style: dashed; }
.tm-art { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--area-soft); color: var(--ink-3); }
.tm-role-name { grid-area: name; min-width: 0; margin: 0; font-size: var(--t-lead); font-weight: 600; line-height: 1.25; overflow-wrap: break-word; }
.tm-station-toggle { grid-area: toggle; display: inline-grid; place-items: center; width: 24px; height: 24px; color: var(--ink-3); }
.tm-station-box[open] .tm-station-toggle .icon { transform: rotate(180deg); }
/* Live: only a role that is working now moves, one soft ring around its drawing. */
.tm-station[data-state="working"] .tm-avatar::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: tm-live 2.4s ease-out infinite;
}
@keyframes tm-live {
  0% { transform: scale(0.94); opacity: 0.6; }
  70% { transform: scale(1.16); opacity: 0; }
  100% { transform: scale(1.16); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-station[data-state="working"] .tm-avatar::after { animation: none; opacity: 0.45; }
  .tm-chip[data-state="working"] .tm-chip-face::after { animation: none; opacity: 0.45; }
}

/* The panel of an opened role, in place under its face. */
.tm-station-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; padding: 12px; border-top: 1px solid var(--line); }
.tm-role-job { margin: 0; overflow-wrap: break-word; color: var(--ink-2); font-size: var(--t-2); line-height: 1.5; }
.tm-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; }
.tm-fact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; padding: 10px 12px; border-radius: var(--r-1); background: var(--tile); }
.tm-fact dt { color: var(--ink-3); font-size: var(--t-1); font-weight: 600; }
.tm-fact dd { margin: 0; color: var(--ink); font-size: var(--t-2); line-height: 1.5; overflow-wrap: break-word; }
.tm-how { margin: 0; color: var(--ink-2); font-size: var(--t-1); line-height: 1.5; }
.tm-role-more { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; }

/* The work on a stage: one token for each open piece, an empty stage said as empty. */
.tm-tray { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tm-token {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 10px;
  border-radius: var(--r-2);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  text-decoration: none;
}
.tm-token:hover { background: var(--surface-warm); box-shadow: inset 0 0 0 1px var(--line-control); color: var(--ink); }
.tm-token-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--neutral-soft); color: var(--ink-2); }
.tm-token-moving .tm-token-mark { background: var(--teal-soft); color: var(--teal-ink); }
.tm-token-needs-you .tm-token-mark { background: var(--caution-soft); color: var(--caution-ink); }
/* One column held to the token's width, so a long unbroken title wraps instead of widening the page. */
.tm-token-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; }
.tm-token-title { font-size: var(--t-2); font-weight: 500; line-height: 1.35; overflow-wrap: break-word; }
.tm-token-state { font-size: var(--t-1); color: var(--ink-3); }
.tm-token-needs-you .tm-token-state { color: var(--caution-ink); font-weight: 600; }
.tm-token-go { color: var(--ink-3); }
/* An empty stage: its sign already counts 0, so on a phone no line is added; wider, one quiet line, no box. */
.tm-tray-empty { display: none; margin: 0; padding: 0 4px; color: var(--ink-3); font-size: var(--t-1); }
@media (min-width: 700px) { .tm-tray-empty { display: block; } }
.tm-tray-more { margin: 0; }

/* The roles on watch: a row of their own under the line, on tiles. */
.tm-deck { display: grid; gap: 12px; min-width: 0; padding-top: 24px; border-top: 1px solid var(--line); }
.tm-deck-head { display: grid; gap: 4px; min-width: 0; }
.tm-deck-title { margin: 0; font-size: var(--t-lead); font-weight: 600; }
.tm-deck-note { max-width: 72ch; margin: 0; color: var(--ink-2); font-size: var(--t-2); }
.tm-crew-watch { grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.tm-crew-watch .tm-station-box { background: var(--tile); box-shadow: none; }
.tm-crew-watch .tm-station-box[open] { box-shadow: inset 0 0 0 1px var(--line-control); }
.tm-crew-watch .tm-station-face:hover { background: var(--tile-hover); }
.tm-crew-watch .tm-fact { background: var(--surface); }
@media (min-width: 700px) { .tm-crew-watch { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tm-crew-watch { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tm-more-list { display: flex; flex-wrap: wrap; gap: 0 8px; margin: 0; padding: 0; list-style: none; }

/* The recent handoffs: who passed which piece to whom, and what the first one did. */
.tm-handoffs { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tm-handoff { display: grid; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: var(--r-2); background: var(--tile); }
@media (min-width: 900px) {
  .tm-handoff { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: 4px 24px; }
}
.tm-earlier { margin-top: 8px; }
.tm-earlier > .tm-handoffs { margin-top: 8px; }
.tm-earlier-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--accent-strong); font-weight: 600; cursor: pointer; list-style: none; }
.tm-earlier-toggle::-webkit-details-marker { display: none; }
.tm-earlier[open] .tm-earlier-toggle .icon { transform: rotate(180deg); }
.tm-handoff-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; margin: 0; color: var(--ink-2); font-size: var(--t-1); }
.tm-handoff-day { font-weight: 600; }
.tm-handoff-pair { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.tm-handoff-face { display: inline-grid; place-items: center; box-sizing: border-box; width: 28px; height: 28px; overflow: hidden; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-control); color: var(--ink-2); }
.tm-handoff-name { color: var(--ink); font-weight: 600; }
.tm-handoff-arrow { color: var(--ink-3); }
.tm-handoff-what { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; margin: 0; }
.tm-handoff-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; overflow-wrap: break-word; }
.tm-handoff-words { color: var(--ink-2); font-size: var(--t-2); line-height: 1.5; }
/* The way to everything that happened to each piece, its earlier handoffs too. */
.tm-history-lead { margin: 12px 0 0; color: var(--ink-2); font-size: var(--t-2); }
.tm-history { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.tm-history .tm-link { overflow-wrap: break-word; }

/* The Details page: the rule of the states, and the files of each role. */
.tm-rules { display: grid; gap: 8px; max-width: 80ch; margin: 0; padding-left: 24px; color: var(--ink); font-size: var(--t-2); }
.tm-files { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }


.ar > * + * { margin-top: var(--gap-section); }
.ar-note { max-width: 72ch; margin: 0; color: var(--ink-2); font-size: var(--t-2); }
.ar-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 600; }

/* The hero: the caption over the team's path. */
.ar-path-caption { max-width: 72ch; margin: 0 0 8px; color: var(--ink-2); font-size: var(--t-1); }
.ar-path-wide { display: none; }
.ar-path-narrow { margin: 0 0 24px; padding: 0 0 16px; border-bottom: 1px solid var(--line); }
/* The rail only where its seven steps stand in one row (the hero is 880 px wide from here). */
@media (min-width: 1024px) {
  .ar-path-wide { display: block; }
  .ar-path-narrow { display: none; }
}

/* The line's head: one sentence, what a number counts, then the places with their counts. */
.ar-flow { display: grid; gap: 8px; min-width: 0; scroll-margin-top: 96px; }
.ar-flow > .flow { margin-top: 8px; }
.ar-take { max-width: 68ch; margin: 0; color: var(--ink); font-size: var(--t-lead); line-height: 1.4; text-wrap: pretty; }
.ar-art { display: none; }
@media (min-width: 760px) {
  .ar-empty { grid-template-columns: minmax(0, 1fr) auto; }
  .ar-art { display: block; width: 120px; }
}

/* The lanes, joined by a line down their left side. */
.ar-lanes { position: relative; display: grid; gap: 0; margin: 24px 0 0; padding: 0; list-style: none; }
.ar-lane { position: relative; min-width: 0; padding: 0 0 24px 44px; }
.ar-lane::before { content: ""; position: absolute; top: 36px; bottom: 0; left: 15px; width: 2px; background: var(--area-line); }
.ar-lane:last-child { padding-bottom: 0; }
.ar-lane:last-child::before { display: none; }
.ar-lane > section { display: grid; gap: 8px; min-width: 0; scroll-margin-top: 96px; }
.ar-lane-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 44px; }
.ar-lane-mark { position: absolute; top: 4px; left: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-pill); background: var(--area-soft); color: var(--area-ink); box-shadow: inset 0 0 0 2px var(--area-line); }
.ar-lane.is-empty .ar-lane-mark { background: var(--surface); color: var(--ink-3); box-shadow: inset 0 0 0 2px var(--line-strong); }
.ar-lane.is-needs .ar-lane-mark { background: var(--amber-soft); color: var(--amber-ink); box-shadow: inset 0 0 0 2px var(--amber-line); }
.ar-lane-title { margin: 0; color: var(--ink); font-size: var(--t-lead); font-weight: 600; line-height: 1.3; }
.ar-lane-count { display: inline-grid; place-items: center; min-width: 32px; height: 28px; padding: 0 8px; border-radius: var(--r-pill); background: var(--surface-sunk); color: var(--ink); font-size: var(--t-1); font-weight: 600; }
.ar-lane.is-needs .ar-lane-count { background: var(--amber-soft); color: var(--amber-ink); }
.ar-lane.is-empty .ar-note { color: var(--ink-3); }
@media (min-width: 560px) {
  .ar-lane { padding-left: 60px; }
  .ar-lane::before { top: 44px; left: 21px; }
  .ar-lane-mark { top: 0; width: 44px; height: 44px; }
}

/* The cards of a lane: one piece of writing each. */
.ar-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ar-row { display: grid; grid-template-areas: "head" "side" "body" "act"; gap: 8px; min-width: 0; padding: 16px 0; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.ar-row:first-child { border-top: 0; }
.ar-row:last-child { padding-bottom: 0; }
.details .ar-row:first-child { padding-top: 8px; }
.ar-row-needs { margin: 0 -12px; padding: 16px 12px; border-radius: var(--r-2); background: var(--area-wash); }
.ar-head { grid-area: head; display: grid; gap: 4px; min-width: 0; }
.ar-body { grid-area: body; display: grid; gap: 4px; min-width: 0; }
.ar-kind { margin: 0; color: var(--area-ink); font-size: var(--t-1); font-weight: 600; }
.ar-title { margin: 0; min-width: 0; font-size: var(--t-lead); font-weight: 600; line-height: 1.35; overflow-wrap: break-word; }
.ar-title-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.ar-title-link:hover { color: var(--accent); text-decoration-color: currentColor; }
.ar-title-plain { padding: 8px 0; }
.ar-purpose { max-width: 72ch; margin: 0; color: var(--ink); font-size: var(--t-2); line-height: 1.5; }
.ar-why { max-width: 72ch; margin: 0; color: var(--ink-2); font-size: var(--t-1); line-height: 1.5; overflow-wrap: break-word; }
.ar-why-key { font-weight: 600; color: var(--ink-2); }
.ar-source { color: var(--ink-3); }
/* Why it was chosen: a quiet line that opens, never a box in the card. */
.ar-body .details { margin-top: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.ar-body .details > summary { justify-content: flex-start; gap: 4px; min-height: 44px; padding: 0; color: var(--accent); font-size: var(--t-1); font-weight: 600; }
.ar-body .details-body { display: grid; gap: 8px; padding: 0 0 4px; }
.ar-ways { display: flex; flex-wrap: wrap; gap: 0 8px; margin: 0; padding: 0; list-style: none; }
.ar-ways li { min-width: 0; max-width: 100%; }
.ar-side { grid-area: side; display: grid; justify-items: start; align-content: start; gap: 4px; min-width: 0; }
.ar-date { margin: 0; color: var(--ink-3); font-size: var(--t-1); }
.ar-act { grid-area: act; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; min-width: 0; }
.ar-act .btn { max-width: 100%; }
.ar-act-link .icon { flex: none; }
.ar-open { margin: 0; }

/* The step of the line: seven small marks, then its words. */
.ar-step { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: var(--ink-2); font-size: var(--t-1); }
.ar-dots { display: inline-flex; align-items: center; gap: 4px; }
.ar-dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--line-strong); }
.ar-dot.is-done { background: var(--area); }
.ar-dot.is-here { width: 12px; height: 12px; background: var(--area); box-shadow: 0 0 0 3px var(--area-soft); }
.ar-dot.is-copy { background: var(--surface); box-shadow: inset 0 0 0 2px var(--area); }
.ar-step-words { font-weight: 600; color: var(--ink); }

.ar-empty { align-items: center; }
@media (min-width: 760px) {
  .ar-row { grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); grid-template-areas: "head side" "body side" "act side"; grid-template-rows: auto auto 1fr; gap: 4px 24px; align-items: start; }
  .ar-act { margin-top: 4px; }
}

/* The ways to publish: four tiles, the chosen one edged in the area's accent. */
.ar-modes { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.ar-mode { display: grid; gap: 4px; min-width: 0; padding: 16px; border-radius: var(--r-2); background: var(--surface-sunk); box-shadow: inset 0 0 0 1px var(--line); scroll-margin-top: 96px; }
.ar-mode.is-chosen { background: var(--area-wash); box-shadow: inset 0 0 0 2px var(--area-line); }
.ar-mode-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: var(--ink); font-size: var(--t-2); font-weight: 600; }
.ar-mode-tag { color: var(--area-ink); font-size: var(--t-1); font-weight: 500; }
.ar-mode-text { max-width: 72ch; margin: 0; color: var(--ink-2); font-size: var(--t-2); line-height: 1.5; }
.ar-mode-note { max-width: 72ch; margin: 0; color: var(--ink); font-size: var(--t-1); line-height: 1.5; }
@media (min-width: 760px) {
  .ar-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#articles-publishing .ar-open { margin-top: 8px; }

/* How the daily content work is set up: one sentence, then a row for each part. */
.ar-setup-sentence { max-width: 68ch; margin: 0; color: var(--ink); font-size: var(--t-lead); line-height: 1.4; text-wrap: pretty; }
.ar-setup { display: grid; gap: 0; margin: 0; }
.ar-setup-row { display: grid; gap: 4px; min-width: 0; padding: 12px 0; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.ar-setup-row:last-child { padding-bottom: 0; }
.ar-setup-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: var(--ink); font-size: var(--t-2); font-weight: 600; }
.ar-setup-text { max-width: 72ch; margin: 0; color: var(--ink-2); font-size: var(--t-2); line-height: 1.5; }
@media (min-width: 760px) {
  .ar-setup-row { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 24px; align-items: start; }
}

/* How the team writes original articles (closed). */
.ar-rules { display: grid; gap: 8px; max-width: 72ch; margin: 0; padding-left: 20px; color: var(--ink-2); font-size: var(--t-2); line-height: 1.5; }

.ar-more-list { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; padding: 0; list-style: none; }


/* ------------------------------------------------------- Opportunities */

/* The area hero's wrapper: the Opportunities drawing's rays reach a few pixels past the hero's
   edge where the hero is narrow (560 to 819 px), so they are clipped there, with room left for
   the cards' shadows; the hero itself is the shared part, unchanged. */
.op-hero { min-width: 0; overflow-x: clip; overflow-clip-margin: 20px; }
.op > * + * { margin-top: var(--s-5); }
@media (min-width: 1024px) { .op > * + * { margin-top: var(--s-6); } }
.op-note { max-width: 72ch; margin: 0; color: var(--ink-2); font-size: var(--t-2); line-height: var(--lh); text-wrap: pretty; }
/* Above the hero's Needs-you cards: the one count said in the cards' own words. */
.op-needs-sum { max-width: 72ch; margin: 0 0 var(--s-3); color: var(--ink-2); font-size: var(--t-2); line-height: var(--lh); text-wrap: pretty; overflow-wrap: break-word; }

/* Where they stand: the bar and its sentence, the area's drawing beside them from 760 px. */
.op-art { display: none; }
@media (min-width: 760px) { .op-art { display: block; } }

/* The lines of an opportunity: why, what is proposed, the question, where it was found. */
.op-line { margin: 0; color: var(--ink-2); font-size: var(--t-2); line-height: var(--lh); overflow-wrap: break-word; }
.op-label { color: var(--ink); font-weight: 600; }
.op-from { display: flex; align-items: center; gap: var(--s-2); min-width: 0; margin: 0; color: var(--ink-3); font-size: var(--t-1); line-height: 1.45; }
.op-from .area-tile { flex: none; }
.op-from-text { min-width: 0; overflow-wrap: break-word; }
.op-from-source { font-weight: 600; color: var(--ink-2); }
/* How many more changes the same answer decides: a quiet line under the question. */
.op-also { margin: 0; color: var(--ink-3); font-size: var(--t-1); line-height: 1.45; overflow-wrap: break-word; }
.op-role { color: var(--ink-2); }

/* The next ones: cards in priority order. */
.op-list { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .op-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The screen's few: the first across the whole width, so five read one, then two and two. */
@media (min-width: 900px) { .op-list-top > li:first-child { grid-column: 1 / -1; } }
.op-card { min-width: 0; }
.op-card .card-body { gap: var(--s-2); }

/* The way to the full list. */
.op-all { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.op-all .btn { flex: 1 1 100%; }
@media (min-width: 640px) { .op-all .btn { flex: 0 1 auto; } }
.op-all .op-note { flex: 1 1 16rem; }

/* Where the list comes from: how many each source gives, at the row's end. */
.op-count { font-size: var(--t-1); font-weight: 600; color: var(--ink-2); }
.op-rule { gap: var(--s-2); }
.op-foot { gap: var(--s-3); }
/* How this list is made (a closed block at the foot): where it comes from, then how it is ordered. */
.op-sources, .op-order { display: grid; gap: var(--s-2); min-width: 0; }
.op-order { margin-top: var(--s-4); }
.op-order > p { max-width: 72ch; margin: 0; color: var(--ink-2); font-size: var(--t-2); }
.op-sub-title { margin: 0; font-size: var(--t-2); font-weight: 600; color: var(--ink); }
.op-inline-link { font-weight: 600; }
/* Under a list: the roles its cards name, each link a full touch target. */
.op-roles { margin-top: var(--s-3); }
.op-roles .op-inline-link { display: inline-flex; align-items: center; min-height: 44px; }

/* ------------------------------------- the six parts of an opportunity */

/* One panel, six parts one after the other, a hairline between them. */
.op-story { gap: 0; padding: 0; }
/* Its head (a recommendation's way to the live website): a quiet inset above the parts. */
.op-story-head { min-width: 0; padding: var(--pad-panel); background: var(--surface-warm); border-bottom: 1px solid var(--line); border-radius: var(--r-3) var(--r-3) 0 0; }
.op-part { display: grid; gap: var(--s-2); min-width: 0; padding: var(--pad-panel); }
.op-part + .op-part { border-top: 1px solid var(--line); }
.op-part-title { margin: 0; font-size: var(--t-lead); font-weight: 600; line-height: 1.3; color: var(--ink); }
.op-part-body { display: grid; gap: var(--s-3); min-width: 0; font-size: var(--t-2); color: var(--ink-2); }
.op-part-body > p { max-width: 68ch; margin: 0; text-wrap: pretty; overflow-wrap: break-word; }
.op-part-body > .op-lead { color: var(--ink); }
.op-part-body .source-note { margin: 0; }
.op-done-list { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.op-done-list li { display: flex; align-items: baseline; gap: var(--s-2); min-width: 0; overflow-wrap: break-word; }
.op-done-list li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.op-who { display: grid; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.op-who li { min-width: 0; overflow-wrap: break-word; }
.op-who-key { font-weight: 600; color: var(--ink); }